////============================================
//// expo10.js, 04/29/09, by ralph abraham
//// graph the sine function
//// expo06.js, by ralph abraham, 29 april, 2009

//// GLOBAL VARS
	// to setup 2D world coords (u, v) ranges
	// init values determined by canvas size
//	var wumax = 360; // worldu max, degrees
//	var wumin = 0; // worldu min, degrees
//	var wvmax = 2; // worldv max, for sine function
//	var wvmin = -2; // worldv min, degrees
//	// and screen coords (x, y) ranges
//	var sxmax = 320; // worldu max, degrees
//	var sxmin = 0; // worldu min, degrees
//	var symax = 0; // worldv max, for sine function
//	var symin = 280; // worldv min, degrees
	
//// MATH FUNCS
	// map screen to world coords, x --> u
//	function worldu(sx) {
//		var temp =  ( sx - sxmin ) / ( sxmax - sxmin );
//		return wumin + ( wumax - wumin ) * temp;
//	};
//
//	// map screen to world coords, y --> v
//	function worldv(sy) {
//		var temp =  ( sy - symin ) / ( symax - symin );
//		return wvmin + ( wvmax - wvmin ) * temp;
//	};
//
//	// map world to screen coords, u --> x
//	function screenx(wu) {
//		var temp =  ( wu - wumin ) / ( wumax - wumin );
//		return sxmin + ( sxmax - sxmin ) * temp;
//	};
//
//	// map world to screen coords, v --> y
//	function screeny(wv) {
//		var temp =  ( wv - wvmin ) / ( wvmax - wvmin );
//		return symin + ( symax - symin ) * temp;
//	};
	
//// SETUP

	// wait for the browser to load
	window.onload = function() {
	// set up background basic template
		base00(); // draw entire canvas
		drawlines();
	};
	
    // setup single white canvas
	function base00()  {
		var canvas = document.getElementById("canvas"); // only one canvas
		var ctx = canvas.getContext("2d");
		// setup whole rectangle (x0, y0, width, height)
		ctx.clearRect(0, 0, 320, 280);
 		ctx.fillStyle = "black"; //  bg color
 		ctx.fillRect (0, 0, 320, 280);
	};
	
	// draw someting on the canvas
	function drawlines() {
		var canvas = document.getElementById("canvas"); // only one canvas
		var ctx = canvas.getContext("2d");
		// get ready to draw the graph
		ctx.strokeStyle = "yellow"; // pen color
		ctx.lineWidth = 2; // little wider
		ctx.beginPath(); // open a path staring here
		ctx.moveTo(0, 280); // lower left corner
		for ( u = 0 ; u < 1.01 ; u = u + 0.01 )
			ctx.lineTo(320 * u, 280 - 280 * 3.5 * u * (1-u)); // the graph
		ctx.stroke(); // ink the line segment
		ctx.closePath(); // end the path definition
		// now for the red diagonal
		ctx.strokeStyle = "red"; // pen color
		ctx.beginPath(); // open a path staring here
		ctx.moveTo(0, 280); // go here without drawing
		ctx.lineTo(320, 0); // draw a line segment to there
		ctx.stroke(); // ink the line segment
		ctx.closePath(); // end the path definition
	};

// this is for debug
//	document.onclick = function(ev) { // may need mouseup
//		var xnow = ev.clientX; // may need ev.X or ev.layerX, etc
//  	var ynow = ev.clientY;
//  	var wunow = worldu(xnow);
//  	var wvnow = worldv(ynow);
//  	alert ("coords: (" + wunow + ", " + wvnow + ")");
//	};
    
////////// END ///////////