/*
	scripts.js
	JavaScript examples
	
	Sparisoma Viridi | dudung@gmail.com
	
	20180116
	Create some examples.
	20180120
	Add an example
	20180121
	Add some examples and doi:10.5281/zenodo.1156150 for all
	versions.
*/

// Execute a test function
// test_get_parameters_from_textarea();
// test_get_parameter_from_textarea();
// test_get_textarea_lines_with_button();
// test_textarea();
// test_draw_polygon()
// test_coordinate_transformation();
// test_temperature_conversion();

// 20180121.1936 ok
function test_get_parameters_from_textarea() {
	// Create object of type textarea
	var ta = document.createElement("textarea");
	ta.style.width = "100px";
	ta.style.height = "100px";
	ta.value = "Npoly\t6\nColor\t#000";
	document.body.appendChild(ta);
	
	// Define world coordinate
	var xmin = -1.0;
	var ymin = -1.0;
	var xmax = 1.0;
	var ymax = 1.0;
	
	// Define canvas size
	var canvasWidth = 100;
	var canvasHeight = 104;
	
	// Define canvas coordinate
	var XMIN = 0;
	var YMIN = canvasHeight;
	var XMAX = canvasWidth;
	var YMAX = 0;
	
	// Create canvas
	var c = document.createElement("canvas");
	c.width = canvasWidth;
	c.height = canvasHeight;
	c.id = "canvas1";
	c.style.background = "#eef";
	c.style.border = "1px solid #aaa";
	document.body.appendChild(c);
	
	// Get context of canvas
	var cx = c.getContext("2d");
	
	// Create button
	var btn = document.createElement("button");
	btn.innerHTML = "Get lines";
	document.body.appendChild(btn);
	btn.addEventListener("click", buttonClick);
	
	function buttonClick() {
		var N = getValue("Npoly");
		var color = getValue("Color");
		cx.clearRect(0, 0, canvasWidth, canvasHeight);
		drawPoly(0, 0, 1, N, color);
	}
	
	// Get lines from textarea
	function getValue(name) {
		var lines = ta.value.split("\n");
		var M = lines.length;
		var x = "";
		for(var i = 0; i < M; i++) {
			var columns = lines[i].split("\t");
			if(columns[0] == name) {
				x = columns[1];
			}
		}
		return x;
	}
	
	// Draw a polygon
	function drawPoly(xc, yc, R, N, color) {
		// Set stroke style and begin path
		cx.strokeStyle = color;
		cx.beginPath();
		
		for(var i = 0; i < N; i++) {
			// Get (x, y) from parametric function
			var r = circularPath(i, 0, N, R, xc, yc);
			
			// Transform coordinates
			var RR = transform(r);
			
			// Draw a pixel
			if(i == 0) {
				cx.moveTo(RR.x, RR.y);
			} else {
				cx.lineTo(RR.x, RR.y);
			}
		}
		
		// Close the path
		cx.closePath();

		// Stroke the polygon curve (circular path)
		cx.stroke();
	}
	
	// Transform (x, y) to (X, Y)
	function transform(r) {
		var X = (r.x - xmin) / (xmax - xmin) * (XMAX - XMIN);
		X += XMIN;
		var Y = (r.y - ymin) / (ymax - ymin) * (YMAX - YMIN);
		Y += YMIN;
		return {x: X, y: Y};
	}
	
	// Create a parametric function for a circular path
	function circularPath(c, cmin, cmax, R, xc, yc) {
		var cc = (c - cmin) / (cmax - cmin) * 2 * Math.PI;
		var x = xc + R * Math.cos(cc);
		var y = yc + R * Math.sin(cc);
		var r = {x: x, y: y};
		return r;
	}
}

// 20180121.1927 ok
function test_get_parameter_from_textarea() {
	// Create object of type textarea
	var ta = document.createElement("textarea");
	ta.style.width = "100px";
	ta.style.height = "100px";
	ta.value = "Npoly\t6";
	document.body.appendChild(ta);
	
	// Define world coordinate
	var xmin = -1.0;
	var ymin = -1.0;
	var xmax = 1.0;
	var ymax = 1.0;
	
	// Define canvas size
	var canvasWidth = 100;
	var canvasHeight = 104;
	
	// Define canvas coordinate
	var XMIN = 0;
	var YMIN = canvasHeight;
	var XMAX = canvasWidth;
	var YMAX = 0;
	
	// Create canvas
	var c = document.createElement("canvas");
	c.width = canvasWidth;
	c.height = canvasHeight;
	c.id = "canvas1";
	c.style.background = "#eef";
	c.style.border = "1px solid #aaa";
	document.body.appendChild(c);
	
	// Get context of canvas
	var cx = c.getContext("2d");
	
	// Create button
	var btn = document.createElement("button");
	btn.innerHTML = "Get lines";
	document.body.appendChild(btn);
	btn.addEventListener("click", buttonClick);
	
	function buttonClick() {
		var N = getValue("Npoly");
		cx.clearRect(0, 0, canvasWidth, canvasHeight);
		drawPoly(0, 0, 1, N, "#00f");
	}
	
	// Get lines from textarea
	function getValue(name) {
		var lines = ta.value.split("\n");
		var M = lines.length;
		var x = 0;
		for(var i = 0; i < M; i++) {
			var columns = lines[i].split("\t");
			if(columns[0] == name) {
				x = parseInt(columns[1]);
			}
		}
		return x;
	}
	
	// Draw a polygon
	function drawPoly(xc, yc, R, N, color) {
		// Set stroke style and begin path
		cx.strokeStyle = color;
		cx.beginPath();
		
		for(var i = 0; i < N; i++) {
			// Get (x, y) from parametric function
			var r = circularPath(i, 0, N, R, xc, yc);
			
			// Transform coordinates
			var RR = transform(r);
			
			// Draw a pixel
			if(i == 0) {
				cx.moveTo(RR.x, RR.y);
			} else {
				cx.lineTo(RR.x, RR.y);
			}
		}
		
		// Close the path
		cx.closePath();

		// Stroke the polygon curve (circular path)
		cx.stroke();
	}
	
	// Transform (x, y) to (X, Y)
	function transform(r) {
		var X = (r.x - xmin) / (xmax - xmin) * (XMAX - XMIN);
		X += XMIN;
		var Y = (r.y - ymin) / (ymax - ymin) * (YMAX - YMIN);
		Y += YMIN;
		return {x: X, y: Y};
	}
	
	// Create a parametric function for a circular path
	function circularPath(c, cmin, cmax, R, xc, yc) {
		var cc = (c - cmin) / (cmax - cmin) * 2 * Math.PI;
		var x = xc + R * Math.cos(cc);
		var y = yc + R * Math.sin(cc);
		var r = {x: x, y: y};
		return r;
	}
}

// 20180121.1909 ok
function test_get_textarea_lines_with_button() {
	// Create object of type textarea
	var ta = document.createElement("textarea");
	ta.style.width = "200px";
	ta.style.height = "100px";
	ta.value = "xmin\t0\nxmax\t100\nymin\t2\nymax\t10";
	document.body.appendChild(ta);
	
	// Create button
	var btn = document.createElement("button");
	btn.innerHTML = "Get lines";
	document.body.appendChild(btn);
	btn.addEventListener("click", getLinesFromTextarea);
	
	// Get lines from textarea
	function getLinesFromTextarea() {
		console.clear();
		var lines = ta.value.split("\n");
		var N = lines.length;
		for(var i = 0; i < N; i++) {
			console.log(lines[i] + "\n");
		}
	}
}

// 20180121.1900 ok
function test_get_textarea_lines() {
	// Create object of type textarea
	var ta = document.createElement("textarea");
	ta.style.width = "200px";
	ta.style.height = "100px";
	ta.value = "xmin\t0\nxmax\t100\nymin\t2\nymax\t10";
	document.body.appendChild(ta);
	
	// Get lines from textarea
	var lines = ta.value.split("\n");
	var N = lines.length;
	for(var i = 0; i < N; i++) {
		console.log(lines[i] + "\n");
	}
}

// 20180121.1852 ok
function test_textarea() {
	// Create object of type textarea and set it style
	var ta = document.createElement("textarea");
	ta.style.width = "380px";
	ta.style.height = "200px";
	ta.style.background = "#fdd";
	ta.style.fontcolor = "#f00";
	document.body.appendChild(ta);
	
	// Add some texts to the textarea
	ta.value = "Ini adalah baris pertama \n";
	ta.value += "Ini adalah baris kedua ";
	ta.value += "dan ini juga  baris kedua \n";
	ta.value += "Ini adalah baris ketiga";
}

// 20180121.1704 ok
function test_draw_polygon() {
	// Define world coordinate
	var xmin = -1.0;
	var ymin = -1.0;
	var xmax = 1.0;
	var ymax = 1.0;
	
	// Define canvas size
	var canvasWidth = 100;
	var canvasHeight = 100;
	
	// Define canvas coordinate
	var XMIN = 0;
	var YMIN = canvasHeight;
	var XMAX = canvasWidth;
	var YMAX = 0;
	
	// Create canvas
	var c = document.createElement("canvas");
	c.width = canvasWidth;
	c.height = canvasHeight;
	c.id = "canvas1";
	c.style.background = "#fee";
	c.style.border = "1px dashed #faa";
	document.body.appendChild(c);
	
	// Get context of canvas
	var cx = c.getContext("2d");
	
	// Draw a polygon
	drawPoly(0, 0, 1, 5, "#f0f");
	
	// Draw a polygon
	function drawPoly(xc, yc, R, N, color) {
		// Set stroke style and begin path
		cx.strokeStyle = color;
		cx.beginPath();
		
		for(var i = 0; i < N; i++) {
			// Get (x, y) from parametric function
			var r = circularPath(i, 0, N, R, xc, yc);
			
			// Transform coordinates
			var RR = transform(r);
			
			// Draw a pixel
			if(i == 0) {
				cx.moveTo(RR.x, RR.y);
			} else {
				cx.lineTo(RR.x, RR.y);
			}
		}
		
		// Close the path
		cx.closePath();

		// Stroke the polygon curve (circular path)
		cx.stroke();
	}
	
	// Transform (x, y) to (X, Y)
	function transform(r) {
		var X = (r.x - xmin) / (xmax - xmin) * (XMAX - XMIN);
		X += XMIN;
		var Y = (r.y - ymin) / (ymax - ymin) * (YMAX - YMIN);
		Y += YMIN;
		return {x: X, y: Y};
	}
	
	// Create a parametric function for a circular path
	function circularPath(c, cmin, cmax, R, xc, yc) {
		var cc = (c - cmin) / (cmax - cmin) * 2 * Math.PI;
		var x = xc + R * Math.cos(cc);
		var y = yc + R * Math.sin(cc);
		var r = {x: x, y: y};
		return r;
	}
}

// 20180121.1658 ok
function test_coordinate_transformation() {
	// Define world coordinate
	var xmin = -1.0;
	var ymin = -1.0;
	var xmax = 1.0;
	var ymax = 1.0;
	
	// Define canvas size
	var canvasWidth = 100;
	var canvasHeight = 100;
	
	// Define canvas coordinate
	var XMIN = 0;
	var YMIN = canvasHeight;
	var XMAX = canvasWidth;
	var YMAX = 0;
	
	// Create canvas
	var c = document.createElement("canvas");
	c.width = canvasWidth;
	c.height = canvasHeight;
	c.id = "canvas1";
	c.style.background = "#fee";
	c.style.border = "1px dashed #faa";
	document.body.appendChild(c);
	
	// Get context of canvas
	var cx = c.getContext("2d");
	
	// Create data using parametric function
	var N = 100;
	
	// Set stroke style and begin path
	cx.strokeStyle = "#00f";
	cx.beginPath();
	for(var i = 0; i < N; i++) {
		// Get (x, y) from parametric function
		var r = circularPath(i, 0, N, 0.5, 0.5, 0.25);
		
		// Transform coordinates
		var RR = transform(r);
		
		// Draw a pixel
		if(i == 0) {
			cx.moveTo(RR.x, RR.y);
		} else {
			cx.lineTo(RR.x, RR.y);
		}
	}
	
	// Close the path
	cx.closePath();

	// Stroke the polygon curve (circular path)
	cx.stroke();
	
	// Transform (x, y) to (X, Y)
	function transform(r) {
		var X = (r.x - xmin) / (xmax - xmin) * (XMAX - XMIN);
		X += XMIN;
		var Y = (r.y - ymin) / (ymax - ymin) * (YMAX - YMIN);
		Y += YMIN;
		return {x: X, y: Y};
	}
	
	// Create a parametric function for a circular path
	function circularPath(c, cmin, cmax, R, xc, yc) {
		var cc = (c - cmin) / (cmax - cmin) * 2 * Math.PI;
		var x = xc + R * Math.cos(cc);
		var y = yc + R * Math.sin(cc);
		var r = {x: x, y: y};
		return r;
	}
}

// 20180120.1919 ok
function test_temperature_conversion() {
	// Define some temperature references in oC and oF
	var THC = 100;
	var TCC = 0;
	var THF = 212;
	var TCF = 32;
	
	// Convert oC to oF and then back to oC
	var TC = 20;
	var TF = C2F(TC);
	console.log("T = " + TF + " oF");
	var TC2 = F2C(TF);
	console.log("T = " + TC2 + " oC");
	
	// Convert from oC to oF
	function C2F(TC) {
		var TF = (TC - TCC) / (THC - TCC) * (THF - TCF) + TCF;
		return TF;
	}
	
	// Convert from oF to oC
	function F2C(TF) {
		var TC = (TF - TCF) / (THF - TCF) * (THC - TCC) + TCC;
		return TC;
	}
}

// 20180116.0950 ok
function test_table() {
	var table = document.createElement("table");
	table.border = "1";
	document.body.appendChild(table);
	
	var row1 = document.createElement("tr");
	table.appendChild(row1);
	
	var col11 = document.createElement("td");
	row1.appendChild(col11);
	col11.innerHTML = "(1,1) A";

	var col12 = document.createElement("td");
	row1.appendChild(col12);
	col12.innerHTML = "(1,2) B";
	
	var row2 = document.createElement("tr");
	table.appendChild(row2);
	
	var col21 = document.createElement("td");
	row2.appendChild(col21);
	col21.innerHTML = "(2,1) C";

	var col22 = document.createElement("td");
	row2.appendChild(col22);
	col22.innerHTML = "(2,2) D";
}

// 20180116.0941 ok
function test_canvas_circles() {
	var c = document.createElement("canvas");
	c.width = 300;
	c.height = 200;
	c.style.background = "#eee";
	var cx = c.getContext("2d");
	for(var x = 50; x < 300; x += 50) {
		for(var y = 50; y < 200; y += 50) {
			var R = parseInt(Math.random() * 256);
			var G = parseInt(Math.random() * 256);
			var B = parseInt(Math.random() * 256);
			var colorRGB = "rgb(" + R + "," + G + "," + B + ")";
			cx.strokeStyle = colorRGB;
			cx.beginPath();
			cx.arc(x, y, 20, 0, 2 * Math.PI);
			cx.stroke()
		}
	}
	document.body.appendChild(c);
}


// 20180116.0936 ok
function test_canvas() {
	var c = document.createElement("canvas");
	c.width = 300;
	c.height = 200;
	c.style.background = "#eee";
	var cx = c.getContext("2d");
	cx.strokeStyle = "#f00";
	cx.beginPath();
	cx.arc(150, 100, 50, 0, 2 * Math.PI);
	cx.stroke()
	document.body.appendChild(c);
}

// 20180116.0927 !ok
function test_bilangan_acak() {
	var N = 10;
	for(var i = 0; i < N; i++) {
		var x = Math.random();
		var y = parseInt(x * 10);
		console.log(i + "\t"  + x + "\t" + y);
	}
}

// 20180116.0918
function test_create_button_from_parent() {
	// Define first id
	var id = "10";
	
	// Create first button
	var btn = document.createElement("button");
	btn.id = 10 + parseInt(Math.random() * 90);
	btn.innerHTML = btn.id;
	document.body.appendChild(btn);
	
	// Add event
	btn.addEventListener("click", createButton);
	
	// Create a button
	function createButton() {
		var btn = document.createElement("button");
		var id = 10 + parseInt(Math.random() * 90);
		var parentId = event.target.id;
		while(id == parentId) {
			id = 10 + parseInt(Math.random() * 90);
		}
		btn.id = id;
		btn.innerHTML = btn.id + " [" + parentId + "]";
		document.body.appendChild(btn);
		btn.addEventListener("click", createButton);
	}
}

// 20180116.0850 ok
function test_button_create_button() {
	// Define button number
	var buttonNumber = 1;
	// Create first visible button
	var btn = document.createElement("button");
	btn.innerHTML = "Create another";
	document.body.appendChild(btn);
	
	// Add an event only to to first button
	btn.addEventListener("click", createAnotherButton);
	
	// Create another button
	function createAnotherButton() {
		var btn = document.createElement("button");
		btn.innerHTML = "Another button " + buttonNumber;
		document.body.appendChild(btn);
		buttonNumber++;
	}
}

// 20180116.0842 ok
function test_hello_button() {
	// Create element of type button, which is <button></button>
	// in a HTML page
	var b = document.createElement("button");
	b.innerHTML = "Hello, World!";
	document.body.appendChild(b);
}

// 20180116.0840
function test_hello_paragraph() {
	// Create element of type paragraph, which is <p></p>
	// in a HTML page
	var p = document.createElement("p");
	p.innerHTML = "Hello, World!";
	document.body.appendChild(p);
}

// 20180116.0824 ok
function test_hello_title() {
	// Tags <title></title> inside section <head></head> should
	// already be defined
	var title = document.getElementsByTagName("title");
	title[0].text = "Hello, Wordl!";
}

// 20180116.0818 ok
function test_hello_console() {
	// Open concole in internet browser
	// Google Chrome: Ctrl+Shift+I, Ctrl+Shift+J
	// Mozilla Firefox: Ctrl+Shift+I
	// Internet Explorer: F12 then Ctrl+2
	console.log("Hello, World!");
}