$( function() {
	var canvas = $("#myCanvas");
	var paint = new Paint(canvas[0].getContext("2d"));

	function getMousePosition(event, canvas) {
		var x, y;

		if (event.offsetX) {
			x = event.offsetX;
			y = event.offsetY;
		} else {
			x = event.pageX - canvas.offsetLeft;
			y = event.pageY - canvas.offsetTop;
		}

		return {
			x: x,
			y: y
		};
	}

	canvas.mousedown(function(e) {
		var pos = getMousePosition(e, this);
		paint.isPainting = true;
		paint.addClick(pos.x, pos.y, false);
		paint.draw();
	});

	canvas.mousemove(function(e) {
		if (paint.isPainting) {
			var pos = getMousePosition(e, this);
			paint.addClick(pos.x, pos.y, true);
			paint.draw();
		}
	});

	canvas.mouseup(function(e) {
		paint.stop();
	});

	canvas.mouseleave(function(e) {
		paint.stop();
	});

	$("#clearButton").click(function() {
		paint.clear();
	});
	
	$("#colorPalette a").click(function() {
		$("#colorPalette a").removeClass("active");
		$(this).addClass("active");
		paint.options.brushColour = "#"+this.name;
	});
	
	$("#newPaintModal").modal({
		backdrop: 'static',
		keyboard: false
	});
	
	$("#clearCanvasBtn").click(function() {
		paint.clear();
	});
	
	$("#saveCanvasBtn").click(function() {
		var dataURL = canvas[0].toDataURL();
	});
	
	$("#blankCanvas").click(function() {
		paint.clear();
		$("#newPaintModal").modal("hide");
	});
	
	$("#batmanCanvas").click(function() {
		paint.clear();
		paint.drawImage("img/batman.gif");
		$("#newPaintModal").modal("hide");
	});
	
	$("#spidermanCanvas").click(function() {
		paint.clear();
		paint.drawImage("img/spiderman.gif");
		$("#newPaintModal").modal("hide");
	});
});