var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var status = document.getElementById("status");

var width = canvas.width;
var height = canvas.height;

var mouseDown;

var coords = [];
var pressures = [];

var secondaries = [];

document.onload = setup();

function setup () {
	
	setInterval(draw, 0);
	
	var patternImage = new Image();
	patternImage.src = "pattern_098.gif";
	patternImage.onload = function () {
		patternStyle = ctx.createPattern(patternImage, "repeat");
	}
}

function pressure(v){
	var damp = 3.0;
	var	dampInv = 1.0/damp;
	var	damp1 = damp - 1.0;
	var scale = 1/8;
	v *= scale;
	var minP = 0.02;
	var oldP = (coords.length > 0) ? pressures[coords.length-1] : 0;
	return (Math.max(minP, 1.0-v) + (damp1*oldP))*dampInv;
}


function draw() {
	rot();
	ctx.clearRect(0,0,600,400);
	//ctx.fillStyle = "rgba(0,0,0,0.3)";
	//ctx.fillRect(0,0,600,400);
	drawCurve();
	drawSecondaries();
}


function drawCurve() {
	ctx.fillStyle = "white";
//	ctx.fillStyle = patternStyle;
//	ctx.fillStyle = "rgba(200,200,200,0.4)";
	for(i=1; i<coords.length-1; i++) {
		//We draw the segment from the midpoint of the segments on either side of point i
		//Three points concern us, 0,1,2
		var x0 = coords[i-1].x; var y0 = coords[i-1].y;
		var x1 = coords[i  ].x; var y1 = coords[i  ].y;
		var x2 = coords[i+1].x; var y2 = coords[i+1].y;
		
		//compute the midpoints of the segments on either side of the point in question
		//Yeilds midpoints 0,1
		var mpx0 = 0.5*(x1+x0); var mpy0 = 0.5*(y1+y0);
		var mpx1 = 0.5*(x1+x2); var mpy1 = 0.5*(y1+y2);
		
		//The tangent at mp0 pointing toward p1
		var vx0 = x1-x0; var vy0 = y1-y0;
		var mag0 = Math.sqrt(vx0*vx0 + vy0*vy0);
		if (mag0 ==0) continue;
		//Normalize
		vx0 /= mag0; vy0 /= mag0;
		
		//The tangent at mp1 pointing toward p1
		var vx1 = x1-x2; var vy1 = y1-y2;
		var mag1 = Math.sqrt(vx1*vx1 + vy1*vy1);
		if (mag1 ==0) continue;
		//Normalize
		vx1 /= mag1; vy1 /= mag1;
		
			
		var thick0 = 50*pressures[i-1];
		var thick1 = 50*pressures[i];

		//Corner vector (from x1,y1)
		var cxR = -vy0+vy1; var cyR = vx0-vx1;
		var cRmag = mag(cxR, cyR);
		if (cRmag == 0) continue;
		//Deal with reversal of left-right vectors, weird, this method sucks
		//if ()
		cxR *= -thick0 / cRmag; cyR *= -thick0 / cRmag;
		
		
		//Transformed points outside the curve
		//Left side
		var tx0L = mpx0 + thick0*vy0; var ty0L = mpy0 - thick0*vx0;
		var tx1L = mpx1 - thick1*vy1; var ty1L = mpy1 + thick1*vx1;
		//Corner points
		var x1L = x1 + cxR; var y1L = y1 + cyR;

		//Transformed points outside the curve
		//Now the right side
		var tx0R = mpx0 - thick0*vy0; var ty0R = mpy0 + thick0*vx0;
		var tx1R = mpx1 + thick1*vy1; var ty1R = mpy1 - thick1*vx1;
		//Corner points
		var x1R = x1 - cxR; var y1R = y1 - cyR;

		ctx.beginPath();
		//the vx0 term is to move in a bit closer to deal with AA artifacts
		ctx.moveTo(tx0L-0.5*vx0, ty0L-0.5*vy0);
		ctx.bezierCurveTo(
			x1L, y1L,
			x1L, y1L,
			tx1L-0.5*vx1, ty1L-0.5*vy1);
		ctx.lineTo(tx1R-0.5*vx1, ty1R-0.5*vy1);
		ctx.bezierCurveTo(
			x1R, y1R,
			x1R, y1R,
			tx0R-0.5*vx0, ty0R-0.5*vy0);
		
		ctx.fill();
	}
}

function drawSecondaries() {
	if (0) {
		ctx.fillStyle = "rgba(250,20,0,0.9)";
		ctx.strokeStyle = "rgb(100,20,0)";
	} else {
		ctx.fillStyle = "white";
		ctx.strokeStyle = "rgba(200,200,200,0.4)";	
	}
	for (i=0; i<coords.length-1; i++) {
		var p = pressures[i];
		var s = secondaries[i];
		if (p > .1 && s > 0.5) {
			p*= 5;
			var x = coords[i].x;
			var y = coords[i].y;
			var dx = coords[i+1].x - coords[i].x; 
			var dy = coords[i+1].y - coords[i].y;
			var m = mag(dx,dy);
			if (dx>0) m=-m;
			dx/=m; dy/=m;
			
			ctx.beginPath();
			ctx.moveTo(x - 7*dy*p, y+7*dx*p);
			ctx.lineTo(x - 40*dy*p, y+30*dx*p);
			ctx.lineTo(x - 50*dy*p, y+50*dx*p);
			ctx.lineWidth = 1;
			ctx.stroke();
			
			
			ctx.beginPath();
			ctx.arc(x - 40*dy*p, y+40*dx*p, p*(s+1),0, Math.PI*2, 0);
			ctx.fill();
		}
	}
}


function rot() {
	if (coords==null || coords.length < 2 || mouseDown) return;
	var e = coords.shift();
	var o = coords[0];
	var end = coords[coords.length-1];
	e.x = end.x + (o.x-e.x);
	e.y = end.y + (o.y-e.y);
	coords.push(e);
}


canvas.onmousedown = function() {
	mouseDown = true;
	draw();
	coords = new Array();
	pressures = new Array();
	return false;
}

window.onmouseup = function() {
	if (mouseDown) {
		mouseDown = false;
		//attenuate pressures
		var npm1finv =  1.0/(Math.max(1, pressures.length - 1));
		for (i=0; i<pressures.length; i++) {
			pressures[i] *= Math.pow((pressures.length-i)*npm1finv, 0.4);
		}
	}
	return false;
}


function inspect(e) {
	var str = "";
	for (k in e) {
		str += "k:" + k + " v:" + e[k] + "\n";
	}
	return str;
}


/*
window.onkeypress = function(e) {
	alert("Key : \n" + e.keyCode);
	return false;
}*/

window.onmousemove = function(e) {

	var x = e.pageX - canvas.offsetLeft;
	var y = e.pageY - canvas.offsetTop;
	var p = 0;
	if (mouseDown) {
		if (coords.length > 0) {
			var dx = x - coords[coords.length-1].x;
			var dy = y - coords[coords.length-1].y;
			var mag = dx*dx + dy*dy;
			if (mag < 3*3) return;
			p = pressure(Math.sqrt(mag));
		}
		coords.push({x:x, y:y});
		pressures.push(p);
		secondaries.push(Math.random());
		smooth();
	}
}

function rgb(r,g,b) {
	var f = Math.floor;
	return "rgb(" + f(r) + ", " + f(g) + ", " + f(b) + ")";
}


function drawPoly() {
	ctx.fillStyle = "rgb(200,200,255)";
	ctx.strokeStyle = "white";
	if (coords.length > 2)  {
		var vx = coords[1].x - coords[0].x;
		var vy = coords[1].y - coords[0].y;
		var mag = Math.sqrt(vx*vx+vy*vy);
		vx /= mag;
		vy /= mag;

		var p = 50*pressures[0];
		for(i=1; i<coords.length; i++) {
			var pvx = vx; var pvy = vy;
			
			//Path vector
			var pp = p;
			p = 60*pressures[i];
			
			var vx = coords[i].x - coords[i-1].x;
			var vy = coords[i].y - coords[i-1].y;
			mag = Math.sqrt(vx*vx+vy*vy);

			vx /= mag;
			vy /= mag;
			
			ctx.beginPath();
			ctx.moveTo(coords[i-1].x + pp*pvy - 0.2*pvx, coords[i-1].y - pp*pvx -0.2*pvy);
			ctx.lineTo(coords[i-1].x - pp*pvy - 0.2*pvx, coords[i-1].y + pp*pvx -0.2*pvy);
			ctx.lineTo(coords[i].x - p*vy + 0.2*vx, coords[i].y + p*vx + 0.2*vy);
			ctx.lineTo(coords[i].x + p*vy + 0.2*vx, coords[i].y - p*vx + 0.2*vy);
			ctx.closePath();
			ctx.fill();
		}
	}
}

function mag (x,y) {
	return Math.sqrt(x*x+y*y);
}




function drawVolume() {
	ctx.globalCompositeOperation = "lighter";
	ctx.fillStyle = "rgba(200,10,0,0.05)";
	if (coords.length > 2)  {
		for(i=0; i<coords.length-1; i++) {
			var x1 = coords[i  ].x; var y1 = coords[i  ].y;
			var x2 = coords[i+1].x; var y2 = coords[i+1].y;
			var p1 = pressures[i];
			var p2 = pressures[i+1];
			var d = 5/mag(x2-x1, y2-y1);
			for (j=1; j>0; j-=d) {
				k = 1-j;
				var p = 50*(p1*j+p2*k);
				var xc = j*x1 + k*x2; var yc = j*y1 + k*y2;
				
				ctx.beginPath();
				ctx.moveTo(xc + p, yc);
				//ctx.rect(xc-p,yc-p, 2*p,2*p);
				ctx.arc(xc,yc,1+p, 0, Math.PI*2, 0);
				ctx.fill();
			}
		}
	}
}

function drawDot() {
	ctx.fillStyle = "white";
	if (coords.length > 2)  {
		for(i=0; i<coords.length-1; i++) {
			var x1 = coords[i  ].x; var y1 = coords[i  ].y;
			var p = 10*Math.sqrt(pressures[i]);
			ctx.beginPath();
			ctx.moveTo(x1 + p, y1);
			ctx.arc(x1,y1,Math.max(0.001,-2+p), 0, Math.PI*2, 0);
			ctx.fill();
		}
	}
}

function smooth() {
	var f = 0.02;
	var f2 = 1-2*f;
	for (i=1; i<coords.length-1; i++) {
		coords[i].x = f*coords[i-1].x + f2*coords[i].x + f*coords[i+1].x;
		coords[i].y = f*coords[i-1].y + f2*coords[i].y + f*coords[i+1].y;
	}
}