$(function(){
	if ($("#workspace").length == 0) return;
	var drawing = false;
	var color = colors.black;
  var brush = new Brush({ style: 'pencil', color: color, width: 10 });
	var workspace = cw("#workspace");
	var surface = cw("#surface");
	var lastpoint;
	
	clearWorkspace();
	
	var offset;

	$(workspace).mousedown(function(e){
		drawing = true;
		lastpoint = new Point(e, offset);
		draw(lastpoint, lastpoint);
	});
	$(window).mousemove(function(e){
		if (drawing) {
			newpoint = new Point(e, offset);
			if (lastpoint) {
				draw(lastpoint, newpoint);
			}
			lastpoint = newpoint;
		}
	});
	$(window).mouseup(function(){
		if (drawing) {
			drawing = false;
			lastpoint = null;
		}
		finishDrawing();
		$("#chat-message").focus();
	});
	$(window).on("drawing:start", function(){
		offset = $(workspace).offset();
	});
	function clearWorkspace(){
		workspace.clear("#ffffff");
	}
	$("#save-drawing").click(function(){
		var uri = workspace.toDataURL("image/png").replace("data:image/png;base64,","");
		console.log(uri.length);
		console.log(atob(uri).length);

		var params = {
			image: uri,
			nick: Game.nick
		};
		$.post("/upload", params, function(){
			console.log("saved");
		});
		clearWorkspace();
		$("#drawing").hide();
	});
	
	// 0) When the pattern is set, paint it to a virtual canvas
	//    and key out white, producing a mask.
	// 1) Paint a (colored) line on the virtual workspace with this draw func vvvv
	// 2) Multiply the pattern mask against the workspace
	// 3) Display the result
	function draw(start, end){
		var halfBrushW = brush.width/2;
		var halfBrushH = brush.height/2;
		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;
			workspace.drawImage(brush.canvas, Math.floor(x), Math.floor(y));
		}
	}
	// 4) When you finish drawing a stroke, merge the workspace with the
	//    painting surface and clear the workspace so we're ready for another
	//    stroke
	function finishDrawing(){
	}
	
	// Hotkey ideas..
	// [] -- larger/smaller Brush
	// \  -- rotate brush 90 degrees

});

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);
}