var i = 0;
var startX = 205+(i*5-(1*20*Math.random()));
var startY = 200+(i*2-(1*20*Math.random()))
var urand = 0;
var showtime = null;
var pauseon = false;
var complete = false;
var pauseMsg = "<br/>click to pause.";
var playMsg = "<br/>click to play.";
var redrawMsg = "<br/>double-click to redraw.";
var colorR = 0;//Math.ceil(255 *Math.random());
var colorG = 200;//255-Math.ceil(255 *randomvar);
var colorB = 200;//Math.ceil(100 *randomvar);

var nowX = $("#canvas").pageX;
var nowY = $("#canvas").pageY;
var oldX = 0;
var oldY = 0;
var circW = 5;
var deltMove = 0;

//window.onresize = resize;

function resize()
{
	var c = document.getElementById('canvas');
	var ctx = c.getContext('2d');
	//c.width =  document.body.clientWidth - 40;
	//c.width = c.width;
	//draw();
}

//document.getElementById('canvas').onClick = doRefresh;

function doPause(e){
	if (!complete){
		if (!pauseon){
			clearInterval(showtime);
			pauseon = true;
			if (!complete){
				var c = document.getElementById('featureTip');
				c.innerHTML = "<strong>paused</strong><br/>"+playMsg+redrawMsg;
			}
		} else {
			pauseon = false;
			showtime = setInterval( update, 25);
			var c = document.getElementById('featureTip');
			c.innerHTML = "<strong>running</strong><br/>"+pauseMsg+redrawMsg;
		}
	} else{
		clearInterval(showtime);
		complete = false;
		pauseon = false;
		i = 0;
		draw();
	}
}
function doRestart(){
	clearInterval(showtime);
	complete = false;
	pauseon = false;
	i = 0;
	draw();
}

function draw() {
	
	
	var c = document.getElementById('canvas');
	var ctx = c.getContext('2d');
	c.width =  document.body.clientWidth - 0;
	//c.height =  document.body.clientHeight - 0;
	//ctx.translate(document.body.clientWidth/3,200);
	c.style.backgroundImage="url('images/clear.gif')";
	
	var d = document.getElementById('featureTip');
	d.innerHTML = "<strong>running</strong><br/>"+pauseMsg+redrawMsg;
	
	//i=0;
	urand = Math.random();
	//alert(urand);
	//ctx.clear();
	//ctx.clear(0,0,document.body.clientWidth,600);
	showtime = setInterval( update, 25 );
	$("#canvas").mouseenter(function(e){ 
		showtime = setInterval( update, 25 );	
	});
	$("#canvas").mouseleave(function(e){ 
		clearInterval(showtime);
	});
	$("#canvas").click(function(e){ 
		doclickevent(e);
	});
}
function doclickevent(e) {
	var c = document.getElementById('canvas');
	var ctx = c.getContext('2d');
	
	ctx.beginPath();
	ctx.strokeStyle = "rgba(0,0,0,.1)";
	ctx.fillStyle = "rgba(255,255,255,0.5)"; 
	ctx.arc(e.pageX-5,e.pageY-5,30,0,Math.PI*2,true);
	ctx.stroke();
	ctx.fill();
	ctx.closePath();
	
	ctx.beginPath();
	ctx.fillStyle = "rgba(0,0,0,0.2)";  
	ctx.fillRect(nowX-20,nowY,40,1);
	ctx.closePath();
	
	ctx.beginPath();
	ctx.fillStyle = "rgba(0,0,0,0.2)";  
	ctx.fillRect(nowX,nowY-20,1,40);
	ctx.closePath();
}
function update() {
	
	var c = document.getElementById('canvas');
	var ctx = c.getContext('2d');

	circW = circW * 1.01;

	$("#canvas").mousemove(function(e){
		//$(this).css('cursor','pointer');
	
		deltMove = Math.sqrt(Math.pow(e.pageX-oldX,2)+Math.pow(e.pageY-oldY,2));
	
		nowX = e.pageX-5;
		nowY = e.pageY-5;
	
		//if ((nowX-oldX)>1 || (nowY-oldY)>1){
		if (deltMove>3){
			circW = 5;
			/*colorR = 0;
			colorG = 0;
			colorB = 255;*/
		}
		
		oldX = nowX;
		oldY = nowY;
	});
	//circle
	ctx.beginPath();
	//ctx.strokeStyle = "rgba(0,0,0,.1)";
	ctx.fillStyle = "rgba(255,255,255,0.05)"; 
	ctx.arc(nowX,nowY,4,0,Math.PI*2,true);
	//ctx.stroke();
	ctx.fill();
	ctx.closePath();
	//dot
	ctx.beginPath();
	ctx.fillStyle = "rgba(0,0,0,.5)";  
	ctx.fillRect(nowX,nowY,0.5,1);
	ctx.closePath();
	//blue
	ctx.beginPath();
	ctx.fillStyle = "rgba("+colorR+","+colorG+","+colorB+",.01)";
	ctx.arc(nowX,nowY,circW,0,Math.PI*2,true);
	//ctx.arc((i++)*2,(i++)*2,50,0,Math.PI*2,false);
	ctx.fill();
	ctx.closePath();
	//green
	ctx.beginPath();
	ctx.fillStyle = "rgba(0,255,0,.01)";
	ctx.arc(nowX,nowY,circW/2,0,Math.PI*2,true);
	//ctx.arc((i++)*2,(i++)*2,50,0,Math.PI*2,false);
	ctx.fill();
	ctx.closePath();
	//yellow
	ctx.beginPath();
	ctx.fillStyle = "rgba(255,255,0,.05)";
	ctx.arc(nowX,nowY,circW/10,0,Math.PI*2,true);
	//ctx.arc((i++)*2,(i++)*2,50,0,Math.PI*2,false);
	ctx.fill();
	ctx.closePath();
	//white
	ctx.beginPath();
	ctx.fillStyle = "rgba(255,255,255,.04)";
	ctx.arc(nowX,nowY,circW/1000,0,Math.PI*2,true);
	//ctx.arc((i++)*2,(i++)*2,50,0,Math.PI*2,false);
	ctx.fill();
	ctx.closePath();
	
	/*if (colorR>255){
		colorR = colorR+1;
		colorG = colorG+1;
		colorB = colorB-1;
	}else{
		colorR = 255;
		colorG = 255;
		colorB = 0;
	}*/

	/*ctx.strokeStyle = "#000000";
	ctx.fillStyle = "#FFFF00";
	ctx.beginPath();
	ctx.arc(100,100,50,0,Math.PI*2,true);
	ctx.closePath();
	//ctx.stroke();
	ctx.fill();*/



	/*i++;
	if (i > 200) {
		clearInterval(showtime);
		complete = true;
		var c = document.getElementById('featureTip');
		c.innerHTML = "<strong>finished</strong><br/><br/>click to redraw";
	}*/
}

function postFunctions(){
	
	var tiphover = false;
	
	$("body").append("<div id='featureTip'></div>");
	/*$("#featureTip").html("<strong>running</strong><br/>"+pauseMsg+redrawMsg);
	
	$("#featureTip").hover(function(){
		tiphover = true;
	});
	
	$("#canvas").hover(function(e){
		tiphover = true;
		$("#featureTip").fadeIn("fast");		
	},
	function(){
		tiphover = false;
		setTimeout(
			function(){
				if (!tiphover){
					$("#featureTip").fadeOut("fast");
				}
			},50
		);
    });
	$("#canvas").mousemove(function(e){
		$(this).css('cursor','pointer');
		var newxOffset = e.pageX - (e.pageX/($(document).width()))*($("#screenshot").innerWidth());
		var preHeight = $("#screenshot").outerHeight();
		$("#featureTip")
			.css("top",(e.pageY-$("#featureTip").innerHeight()) + "px")
			.css("left", (e.pageX+20) + "px");
	});*/
}