$(function(){
	var drawing = false;
	var color = colors.black;
  var brush = new Brush({ style: 'pencil', color: color, width: 10 });
	var workspace = document.getElementById("workspace");
	var workspaceCtx = workspace.getContext('2d');
	var lastpoint;
	
	workspaceCtx.fillStyle = "#fff";
	workspaceCtx.fillRect(0,0,workspace.width,workspace.height);
	
	var offset = $(workspace).offset();
	
	workspace.onmousedown = function(e){
		drawing = true;
	}
	document.onmousemove = function(e){
		if (drawing) {
			newpoint = new Point(e, offset);
			if (lastpoint) {
				draw(lastpoint, newpoint);
			}
			lastpoint = newpoint;
		}
	}
	window.onmouseup = function(){
		if (drawing) {
			drawing = false;
			lastpoint = null;
		}
	}
	function draw(start, end){
		var halfBrushW = brush.width/2;
		var halfBrushH = brush.height/2;
	 console.log(start.x, end.x);
		var distance = parseInt( Trig.distanceBetween2Points( start, end ) );
		var angle = Trig.angleBetween2Points( start, end );
		for ( var z=0; (z<=distance || z==0); z += 2 ) {
			var x = start.x + (Math.sin(angle) * z) - halfBrushW;
			var y = start.y + (Math.cos(angle) * z) - halfBrushH;
			workspaceCtx.drawImage(brush.canvas, Math.floor(x), Math.floor(y));
		}
	}
	
	function Point(e, offset) {
		this.x = e.pageX - offset.left;
		this.y = e.pageY - offset.top;
	}
	
});

function Brush (b) {
  this.opt = b;
  b.height = b.height || b.width;
  var canvas = this.canvas = document.createElement("canvas");
  var ctx = this.ctx = canvas.getContext('2d');
  this.width = canvas.width = b.width;
  this.height = canvas.height = b.height;
  this.color = b.color;
  canvas.className = "brush";
	
	var hw = canvas.width / 2, hh = canvas.height / 2;
	var id = ctx.getImageData( 0, 0, canvas.width, canvas.height );
	var data = id.data;
	for (var i = 0; i < canvas.width; i++) {
		for (var j = 0; j < canvas.height; j++) {
			var mag = Trig.magnitude({ x: i - hw, y: j - hh });
			var offset = (j * canvas.width + i) * 4;
			if (offset > data.length) continue;
			data[ offset ]     = b.color.r;
			data[ offset + 1 ] = b.color.g;
			data[ offset + 2 ] = b.color.b;
			data[ offset + 3 ] = mag < hw ? 255 : 0;
		}
	}
	ctx.putImageData(id, 0, 0);
	$("#drawing").append(canvas);
}