var canvasArea = null;
var canvasLock = false;
var drawTimer = null;
var imgName = null;

var mouseX = 0;
var mouseY = 0;
var canvasX = 0;
var canvasY = 0;

var lineWidth = 2;
var lineColour = 'rgb(255,0,0)';


$(function() {
	var canvas = document.getElementById("canvas");
	if(canvas)
		canvasArea = canvas.getContext("2d");
	
	
	$("#canvas").mousedown(function(){
		startDrawing();
	});
	$("#canvas").mouseup(function(){
		stopDrawing();
	});
	$("#canvas").mouseout(function(){
		stopDrawing();
	});
	$("#canvas").mousemove(function(e){
		mouseX = e.pageX - this.offsetLeft;
		mouseY = e.pageY - this.offsetTop;
		$("#debug_mx").html(mouseX);
		$("#debug_my").html(mouseY);
	});
				
	$("#colour-picker").ColorPicker({
		flat: true,
		onChange: function (hsb, hex, rgb) {
			$("#debug-line-rgb").html(rgb.r+","+rgb.g+","+rgb.b);
			lineColour = "rgb("+rgb.r+","+rgb.g+","+rgb.b+")";
		}
	});
	
})


function loadImageToCanvas(src) {
	var img = new Image();
	img.onload = function() {
		canvasArea.drawImage(img,0,0,img.width,img.height);
	}
	img.src = src;
}
function saveCanvasData(form) {
	canvasLock = true;
	$("#controls .submit").val("saving").addClass("progress").blur();
	$("#controls .submit").click(function(){ return false; });
	
	imgName = $("#imagename").val();
	
	var canvas = document.getElementById("canvas");
	var data = canvas.toDataURL("image/png");
	ajaxOb.postRequest('/tools/canvas/canvas-upload',{imageName:imgName,imageData:data.substr(22)},saveCanvasResponse);
	
	return false;
}
function saveCanvasResponse() {
	var response = jsonParse(ajaxOb.xmlResponseText);

	if(response.success==true) {
		$("#controls .submit").after('<a class="button" href="/tools/canvas/canvas-gallery">View Gallery</a>');
		$("#controls .submit").after('<a class="button" href="/media/dContent/uploads/canvas/'+imgName+'" rel="external">Download Canvas</a>');
		$("#controls .submit").remove();
	} else {
		if(response.error)
			alert(response.error)
		else
			alert("Sorry, something seems to have gone wrong!");
		$("#controls .submit").after('<a class="button" href="/tools/canvas">Start again</a>');
		$("#controls .submit").remove();
	}
}

function startDrawing() {
	if(canvasLock)
		return;
	drawTimer = setInterval("canvasDraw()",20);
}
function stopDrawing() {
	if(drawTimer)
		clearInterval(drawTimer);
	drawTimer = null;
	canvasX = null;
	canvasY = null;
}

function canvasDraw() {			
	canvasArea.beginPath();
	if(canvasX) {
		canvasArea.moveTo(canvasX,canvasY);	
		canvasArea.strokeStyle= lineColour;
		canvasArea.lineWidth = lineWidth;
		canvasArea.lineTo(mouseX, mouseY);
		canvasArea.stroke();
	}
	canvasX = mouseX;
	canvasY = mouseY;
}

function setLineSize(scale) {
	if(scale=="+")
		lineWidth++;
	if(scale=="-")
		lineWidth--;
	if(lineWidth<1) {
		alert("Too Small");
		lineWidth = 1;
	}
	if(lineWidth>5) {
		alert("Too Big");
		lineWidth = 5;
	}
	$("#debug_width").html(lineWidth);
}