////============================================
//// expo15.js, 05/04/09, by ralph abraham
//// coloring by distance

//// GLOBAL VARS
	// init point, dist func
	// lower left corner of unit square of the u-v plane
	var u0 = 0.1; // init u
	var v0 = 0.1; // init v 
	
	// to setup 2D world coords (u, v) ranges
	// init values determined by canvas size
	var wumax = 1.0; // worldu max
	var wumin = 0; // worldu min
	var wvmax = 1.0; // worldv max
	var wvmin = 0; // worldv min
	// and screen coords (x, y) ranges
	var sxmax = 320; // screenx max, use width of canvas from HTML page
	var sxmin = 0; // screenx min
	var symax = 280; // screeny max, use height of canvas from HTML page
	var symin = 0; // screeny min
	// color spectrum 03 as an array of strings
	var a = new Array();
	a[0] = "red";
	a[1] = "#FF8000";
	a[2] = "yellow";
	a[3] = "#80FF00";
	a[4] = "lime";
	a[5] = "#00FF80";
	a[6] = "cyan";
	a[7] = "#0080FF";
	a[8] = "blue";
	a[9] = "#8000FF";
	a[10] = "magenta";
	a[11] = "#FF0080";
	a[12] = "white"; // for overscale
	a[13] = "white";
	a[14] = "white";

//// 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 wvmax - ( wvmax - wvmin ) * temp;
	};

	// euclidean plane distance for world coords
	function dist(u1, v1, u2, v2) {
		var du2 = (u1 - u2) * (u1 - u2);
		var dv2 = (v1 - v2) * (v1 - v2);
		return Math.sqrt(du2 + dv2);
	};

//// SETUP

	// wait for the browser to load
	window.onload = function() {
	// set up background basic template
		base00(); // draw entire canvas
		//drawblot(x0, y0, 10); // 10 is size of blot
	};
	
    // 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 a blot
	function drawblot(x, y, w, c) {
		var canvas = document.getElementById("canvas"); // only one canvas
		var ctx = canvas.getContext("2d");
		//ctx.clearRect(x, y, w, w);
 		ctx.fillStyle = c; //  colored rect
 		ctx.fillRect (x, y, w, w);
	};
  	
// this is for interaction
	document.onclick = function(ev) { // may need mouseup
		var xnow = ev.clientX; // may need ev.X or ev.layerX, etc
  		var ynow = ev.clientY - 50; // offset from top viewport to top canvas
  		var unow = worldu(xnow);
  		var vnow = worldv(ynow);
  		var temp1 = dist(u0, v0, unow, vnow);
  		var temp2 = Math.floor(10 * temp1);
		//alert ("dist: " + temp1 ); // for debug
		drawblot(xnow, ynow, 10, a[temp2]); // 10 is size of blot
	};
    
////////// END ///////////