// JavaScript Document

function draw3DGraph(type) {
	var element = document.getElementById('dynamic');
	
	element.innerHTML = '\
<div id="canvas3DGraph">\
	<canvas id="graph" width="600" height="600" ></canvas>\
	<div id="gInfo"></div> \
</div>\
	';
	

	//Initialise Graph
	var g = new canvasGraph('graph');
	var gData = new Array();
			
	switch (type) {
		case 'sine':
			for(i=0;i<100;i++){
				var j = 0.01745329 * i;
				//gData[i] = {x:(Math.sin((i/10)) * 400 + 400), y:(1000-(i*7)), z:(i*10)};
				gData[i] = {x:(Math.sin(i/10) * 500 + 500), y:1000-(i * 7), z:(i*10)};
			}
			break;
			
		case 'cosine':
			for(i=0;i<100;i++){
				var j = 0.01745329 * i;
				//gData[i] = {x:(Math.sin((i/10)) * 400 + 400), y:(1000-(i*7)), z:(i*10)};
				gData[i] = {x:(Math.cos(i/10) * 500 + 500), y:1000-(i * 7), z:(i*10)};
			}
			break;
			
		case 'linearIncrease':
			var veloc = 40;
			var amp =12; //sine wave amplitude (pixels)
			var freq = 2.4; //oscillations per second
			
			var i=0;
			for(time=0;time<20;time+=.5){
				gData[i] = {x:amp*time*(Math.sin(freq*time*2*Math.PI)) + 1000 / 2, y:1000 - (time * veloc), z:(time * veloc)};
				i++;
			}
			break;
			
			
	}
	
	//sort it by Z axis
	//gData.sort(sortNumByZ);
				
	//draw graph 
	g.drawGraph(gData);	
	
	document.getElementById('canvas3DGraph').style.top = ((window.innerHeight - 600) / 2) + "px";
	document.getElementById('canvas3DGraph').style.left = ((window.innerWidth - 600) / 2) + "px";
		
	element.style.height = window.innerHeight + 'px';
	element.style.top = window.pageYOffset + 'px';
	element.style.display = 'block';
	element.style.opacity = 1.0;
	
	element.onclick = function () {
		document.getElementById('dynamic').style.display = 'none';
		document.getElementById('dynamic').style.opacity = 0.0;
		
		window.onresize = null;
	};
	
	window.onresize = function () {
		var element = document.getElementById('dynamic');
		element.style.height = window.innerHeight + 'px';
		element.style.top = window.pageYOffset + 'px';
	
		
		var element = document.getElementById('canvas3DGraph');
		element.style.top = ((window.innerHeight - 600) / 2) + "px";
		element.style.left = ((window.innerWidth - 600) / 2) + "px";
	};
}