/*
	scripts.js
	JavaScript examples
	
	Sparisoma Viridi | dudung@gmail.com
	
	20180116
	Create this script.
	20180120
	Create repo with doi:10.5281/zenodo.1156177 in  Zenodo.
*/

// Call a test function
//test_hello_docwrite();
//test_hello_span();
//test_hello_div();
//test_spans_in_div();
//test_divs_in_span();
//test_table();
//test_colored_spans_in_div();
//test_series_usm_console();
//test_series_usm_table();
//test_series_usm_canvas_raw();
//test_series_nusm_canvas_raw();
//test_lissajous_canvas_raw();
//test_two_buttons();
//test_button_move();
//test_canvas_drag();
//test_mouse_event();
test_canvas_draw_color();

// 20180117.0610 ok
function test_canvas_draw_color() {
	// Define color of drawing pen
	var penColor = "#fff";
	
	// Define variabel for storing position
	var px = 0;
	var py = 0;
	
	// Define mouse state
	var MOUSESTILLDOWN = false;
	
	// Create color palette
	createCanvas("red", 10, 10, 40, 40, "#faa", "#aaa");
	createCanvas("green", 10, 50, 40, 40, "#afa", "#aaa");
	createCanvas("blue", 10, 90, 40, 40, "#aaf", "#aaa");
	createCanvas("board", 50, 10, 120, 120, "#fff", "#aaa");
	
	// Add event to canvas
	addEvent("red", "click", mouseClick);
	addEvent("green", "click", mouseClick);
	addEvent("blue", "click", mouseClick);
	addEvent("board", "mousemove", mouseMove);
	addEvent("board", "mousedown", mouseDown);
	addEvent("board", "mouseup", mouseUp);
	
	// Create canvas box
	function createCanvas(id, x, y, w, h, c, b) {
		var cv = document.createElement("canvas");
		cv.id = id;
		cv.style.position = "absolute";
		cv.style.left = x + "px";
		cv.style.top = y + "px";
		cv.style.width = w + "px";
		cv.style.height = h + "px";
		cv.style.background = c;
		cv.style.border = "1px solid " + b;
		document.body.appendChild(cv);
	}
	
	// Add event to object with id
	function addEvent(id, eventType, functionName) {
			var cv = document.getElementById(id);
			cv.addEventListener(eventType, functionName);
		}
	
	// Handle mouseclick event
	function mouseClick() {
		var id = event.target.id;
		var cv = document.getElementById(id);
		var c = cv.style.background;
		penColor = c;
		console.log(c);
	}
	
	// Handle mouseclick event
	function mouseMove() {
		var id = event.target.id;
		var c = document.getElementById(id);
		
		// Get relative coordinate -- still not work
		px = event.clientX - 0 * parseInt(c.style.left);
		py = event.clientY - 0 * parseInt(c.style.top);
		
		if(MOUSESTILLDOWN) {
			var cx = c.getContext("2d");
			cx.strokeStyle = penColor;
			cx.beginPath();
			cx.arc(px, py, 1, 0, 2 * Math.PI);
			cx.stroke();
		}
	}
	
	// Handle mouseDown
	function mouseDown() {
		MOUSESTILLDOWN = true;
		console.log(MOUSESTILLDOWN);
	}
	
	// Handle mouseDown
	function mouseUp() {
		MOUSESTILLDOWN = false;
		console.log(MOUSESTILLDOWN);
	}
}

// 20180117.0414 ok.
function test_mouse_event() {
	var c1 = document.createElement("canvas");
	c1.id = "light_red";
	c1.style.background = "#faa";
	c1.style.width = "100px";
	c1.style.height = "100px";
	c1.style.left = "100px";
	c1.style.top = "50px";
	c1.style.position = "absolute";
	document.body.appendChild(c1);
	
	var c2 = document.createElement("canvas");
	c2.id = "light_blue";
	c2.style.background = "#aaf";
	c2.style.width = "100px";
	c2.style.height = "100px";
	c2.style.left = "280px";
	c2.style.top = "20px";
	c2.style.position = "absolute";
	document.body.appendChild(c2);
	
	var c3 = document.createElement("canvas");
	c3.id = "light_blue";
	c3.style.background = "#afa";
	c3.style.width = "100px";
	c3.style.height = "100px";
	c3.style.left = "400px";
	c3.style.top = "120px";
	c3.style.position = "absolute";
	document.body.appendChild(c3);
	
	c1.addEventListener("mousemove", mouseMove);
	c2.addEventListener("mousemove", mouseMove);
	c3.addEventListener("mousemove", mouseMove);
	window.addEventListener("mousemove", mouseMove);
	
	c1.addEventListener("mousedown", mouseDown);
	c2.addEventListener("mousedown", mouseDown);
	c3.addEventListener("mousedown", mouseDown);
	window.addEventListener("mousedown", mouseDown);
	
	c1.addEventListener("mouseup", mouseUp);
	c2.addEventListener("mouseup", mouseUp);
	c3.addEventListener("mouseup", mouseUp);
	window.addEventListener("mouseup", mouseUp);
	
	function mouseMove() {
		px = event.clientX;
		py = event.clientY;
		var id = event.target.id;
		if(id == "") {
			id = "window";
		}
		console.log(
			"mousemove in "
			+ id + " at "
			+ "(" + px + ", " + py + ")"
		);
	}
	
	function mouseDown() {
		var id = event.target.id;
		if(id == "") {
			id = "window";
		}
		console.log("mousedown in " + id);
	}
	
	function mouseUp() {
		var id = event.target.id;
		if(id == "") {
			id = "window";
		}
		console.log("mouseup in " + id);
	}	
}

// 20180116.2137 ok
function test_canvas_drag() {
	var px = 0;
	var py = 0;
	var id;
	
	var c1 = document.createElement("canvas");
	c1.id = "drag1";
	c1.style.background = "#faa";
	c1.style.width = "100px";
	c1.style.height = "100px";
	c1.style.left = "100px";
	c1.style.top = "50px";
	c1.style.position = "absolute";
	document.body.appendChild(c1);
	
	var c2 = document.createElement("canvas");
	c2.id = "drag2";
	c2.style.background = "#aaf";
	c2.style.width = "100px";
	c2.style.height = "100px";
	c2.style.left = "280px";
	c2.style.top = "20px";
	c2.style.position = "absolute";
	document.body.appendChild(c2);
	
	var c3 = document.createElement("canvas");
	c3.id = "drag3";
	c3.style.background = "#afa";
	c3.style.width = "100px";
	c3.style.height = "100px";
	c3.style.left = "400px";
	c3.style.top = "120px";
	c3.style.position = "absolute";
	document.body.appendChild(c3);
	
	c1.addEventListener("mousedown", mouseDown);
	c1.addEventListener("mousemove", mouseMove);
	c2.addEventListener("mousedown", mouseDown);
	c2.addEventListener("mousemove", mouseMove);
	c3.addEventListener("mousedown", mouseDown);
	c3.addEventListener("mousemove", mouseMove);
	window.addEventListener("mouseup", mouseUp);
	
	function mouseMove() {
		px = event.clientX;
		py = event.clientY;
		id = event.target.id;
		var c = document.getElementById(id);
		px -= parseInt(c.style.left);
		py -= parseInt(c.style.top);
	}
	
	function mouseDown() {
		id = event.target.id;
		window.addEventListener("mousemove", divMove);
	}
	
	function mouseUp() {
		window.removeEventListener("mousemove", divMove);
	}
	
	function divMove() {
		var c = document.getElementById(id);
		c.style.top = (event.clientY - py) + "px";
		c.style.left = (event.clientX - px) + "px";
	}
}

// 20180116.2016 ok
function test_button_move() {
	var btn = document.createElement("button");
	btn.id = "click_move";
	btn.innerHTML = "Click";
	btn.style.left = "0px";
	btn.style.top = "0px";
	btn.style.position = "relative";
	btn.addEventListener("click", moveMe);
	document.body.appendChild(btn);
	
	function moveMe() {
		var id = event.target.id;
		var btncm = document.getElementById(id);
		var left = parseInt(btncm.style.left);
		var top = parseInt(btncm.style.top);
		btncm.style.left = left + 10 + "px";
		btncm.style.top = top + 5 + "px";
		console.log(left + "\t" + top);
	}
}

// 20180116.1932 ok
function test_two_buttons() {
	// Add 1st button for Lissajous curve
	var btn1 = document.createElement("button");
	btn1.innerHTML = "Lissajous";
	btn1.addEventListener("click", test_lissajous_canvas_raw);
	document.body.appendChild(btn1);
	
	// Add 2nd button for color table
	var btn2 = document.createElement("button");
	btn2.innerHTML = "Color";
	btn2.addEventListener("click", test_colored_spans_in_div);
	document.body.appendChild(btn2);
}

// 20180116.1925 ok
function test_lissajous_canvas_raw() {
	// Define 1st oscillator
	var T1 = 3;
	var phi1 = 1 * Math.PI / 2;
	var A1 = 1;
	
	// Define 2nd oscillator
	var T2 = 5;
	var phi2 = 0 * Math.PI / 2;
	var A2 = 1;
	
	// Get max amplitudo and periode
	var A = Math.max(A1, A2);
	var T = T1 * T2;
	
	// Set time range and step
	var tbeg = 0;
	var tend = T;
	var dt = 0.001;
	
	// Create rectangular canvas with A dependent size
	var c = document.createElement("canvas");
	document.body.appendChild(c);
	c.width = 2 * A * 100;
	c.height = 2 * A * 100;
	c.style.background = "#272";
	var cx = c.getContext("2d");
	
	// Initialize time
	var t = tbeg;
	
	// Perform iteration
	while(t <= tend) {
		// Calculate x position due to 1st oscillator
		var x = A1 * Math.sin(2 * Math.PI / T1 * t + phi1);
	
		// Calculate y position due to 2nd oscillator
		var y = A2 * Math.sin(2 * Math.PI / T2 * t + phi2);
		
		// Transform (x, y) from real world coordinate
		// to (X, Y) in canvas coordinate roughly
		var X = 100 + x * 90;
		var Y = 100 + y * 90;
		
		// Draw
		cx.strokeStyle = "#cfc";
		cx.beginPath();
		cx.arc(X, Y, 1, 0, 2 * Math.PI);
		cx.stroke();
		
		t += dt;
	}
}

// 20180116.1904 ok
function test_series_nusm_canvas_raw() {
	// Define initial condition
	var x0 = 0;
	var v0 = 0;
	var a = 1;
	
	// Define intial, final time and time step
	var tbeg = 0;
	var tend = 10;
	var dt = 1;
	
	// Initiate time and position
	var t = tbeg;
	var x = x0;
	var v = v0;
	
	// Display result in canvas
	var c = document.createElement("canvas");
	c.width = 200;
	c.height = 275;
	c.style.background = "#efe";
	var cx = c.getContext("2d");
	cx.strokeStyle = "#f00";
	
	while(t <= tend) {
		// Display results in console
		console.log(t + "\t" + x + "\t" + v);
		
		// Draw circle at position (t * 20, x * 5) using arc
		cx.beginPath();
		cx.arc(t * 20, x * 5, 3, 0, 2 * Math.PI);
		cx.stroke();
		
		// Calculate new position and velocity
		v += a * dt;
		x += v * dt;
		
		// Increase time
		t += dt;
	}
	
	document.body.appendChild(c);
}

// 20180116.1752 ok
function test_series_usm_canvas_raw() {
	// Define initial condition
	var x0 = 3;
	var v = 2;
	
	// Define intial, final time and time step
	var tbeg = 0;
	var tend = 10;
	var dt = 1;
	
	// Initiate time and position
	var t = tbeg;
	var x = x0;
	
	// Display result in canvas
	var c = document.createElement("canvas");
	c.width = 200;
	c.height = 230;
	c.style.background = "#efe";
	var cx = c.getContext("2d");
	cx.strokeStyle = "#f00";
	
	while(t <= tend) {
		// Draw circle at position (t * 20, x * 10) using arc
		cx.beginPath();
		cx.arc(t * 20, x * 10, 3, 0, 2 * Math.PI);
		cx.stroke();
		
		// Calculate new position
		x += v * dt;
		
		// Increase time
		t += dt;
	}
	
	document.body.appendChild(c);
}

// 20180116.1743 ok
function test_series_usm_table() {
	// Define initial condition
	var x0 = 3;
	var v = 2;
	
	// Define intial, final time and time step
	var tbeg = 0;
	var tend = 10;
	var dt = 1;
	
	// Initiate time and position
	var t = tbeg;
	var x = x0;
	
	// Display result in table
	var table = document.createElement("table");
	var hrow = document.createElement("tr");
	
	var td1 = document.createElement("td");
	td1.innerHTML = "<b><i>t</i> (s)</b>";
	td1.width = "80px";
	td1.style.textAlign = "center";
	hrow.appendChild(td1);
	var td2 = document.createElement("td");
	td2.innerHTML = "<b><i>x</i> (m) </b>";
	td2.width = "80px";
	td2.style.textAlign = "center";
	hrow.appendChild(td2);
	var td3 = document.createElement("td");
	td3.innerHTML = "<b><i>v</i> (m/s)</b>";
	td3.width = "80px";
	td3.style.textAlign = "center";
	hrow.appendChild(td3);
	
	hrow.style.background = "#eef";
	table.appendChild(hrow);
	
	while(t <= tend) {
		var row = document.createElement("tr");
		
		var td1 = document.createElement("td");
		td1.innerHTML = t;
		td1.style.textAlign = "center";
		row.appendChild(td1);
		var td2 = document.createElement("td");
		td2.innerHTML = x;
		td2.style.textAlign = "center";
		row.appendChild(td2);
		var td3 = document.createElement("td");
		td3.innerHTML = v;
		td3.style.textAlign = "center";
		row.appendChild(td3);
		
		row.style.background = "#fee";
		table.appendChild(row);
		
		// Calculate new position
		x += v * dt;
		
		// Increase time
		t += dt;
	}
	
	document.body.appendChild(table);
}

// 20180116.1726 ok
function test_series_usm_console() {
	// Define initial condition
	var x0 = 3;
	var v = 2;
	
	// Define intial, final time and time step
	var tbeg = 0;
	var tend = 10;
	var dt = 1;
	
	// Initiate time and position
	var t = tbeg;
	var x = x0;
	
	// Display result in console
	console.log("#t\tx\tv");
	while(t <= tend) {
		console.log(t + "\t" + x + "\t" + v);
		
		// Calculate new position
		x += v * dt;
		
		// Increase time
		t += dt;
	}
}

// 20180116.1652 ok
function test_colored_spans_in_div() {
	// Define number of columns and rows
	var COLS = 16;
	var ROWS = 16;
	for(var j = 0; j < ROWS; j++) {
		var div = document.createElement("div");
		for(var i = 0; i < COLS; i++) {
			// Define color
			var r = 0;
			var g = parseInt(i * 16);
			var b = parseInt(j * 16);
			rgb = "rgb(" + r + ", " + g + "," + b + ")";
			var span = document.createElement("span");
			span.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;";
			span.style.background = rgb;
			div.appendChild(span);
		}
		document.body.appendChild(div);
	}
}

// 20180116.1649 ok
function test_table() {
	// Define number of columns and rows
	var COLS = 5;
	var ROWS = 7;
	
	// Create table element
	var table = document.createElement("table");
	for(var j = 0; j < ROWS; j++) {
		// Create row element
		var row = document.createElement("tr");
		for(var i = 0; i < COLS; i++) {
			// Create column element
			var col = document.createElement("td");
			col.innerHTML = "(" + j + ", " + i + ")";
			
			// Append column to row
			row.appendChild(col);
		}
		
		// Append row to table
		table.appendChild(row);
	}
	table.border = "1";
	
	// Append table to document.body
	document.body.appendChild(table);
}

// 20180116.1637 ok
function test_divs_in_span() {
	// Create first div element
	var div1 = document.createElement("div");
	div1.innerHTML = "1st div";
	div1.style.background = "#fbb";
	div1.style.width = "100px";
	
	// Create second div element
	var div2 = document.createElement("div");
	div2.innerHTML = "2nd div";
	div2.style.background = "#bbf";
	div2.style.width = "100px";
	
	// Create span element as container for the two divs
	// even it is a wrong implementation
	var sp = document.createElement("span");
	sp.style.background = "#bfb";
	sp.style.padding = "4px";
	sp.style.textAlign = "center";
	sp.style.width = "300px";
	
	// Append the two spans to div element
	sp.appendChild(div1);
	sp.appendChild(div2);
	
	// Append div element to document.body
	document.body.appendChild(sp);
}

// 20180116.1633 ok
function test_spans_in_div() {
	// Create first span element
	var sp1 = document.createElement("span");
	sp1.innerHTML = "1st span";
	sp1.style.background = "#fbb";
	
	// Create second span element
	var sp2 = document.createElement("span");
	sp2.innerHTML = "2nd span";
	sp2.style.background = "#bbf";
	
	// Create div element as container for the two spans
	var dv = document.createElement("div");
	dv.style.background = "#bfb";
	dv.style.padding = "4px";
	dv.style.textAlign = "center";
	dv.style.width = "200px";
	
	// Append the two spans to div element
	dv.appendChild(sp1);
	dv.appendChild(sp2);
	
	// Append div element to document.body
	document.body.appendChild(dv);
}

// 20180116.125 ok
function test_hello_div() {
	var dv = document.createElement("div");
	dv.innerHTML = "Hello, World!";
	document.body.appendChild(dv);
}

// 20180116.124 ok
function test_hello_span() {
	var sp = document.createElement("span");
	sp.innerHTML = "Hello, World!";
	document.body.appendChild(sp);
}

// 20180116.1555 ok
function test_hello_docwrite() {
	document.write("Hello, World!");
}