function preparePadBase() {
	context.globalCompositeOperation = 'source-over';
	
	context.fillStyle = "rgb(0, 0, 0)";
	context.clearRect(0, 0, padWidth, padHeight);
	
	try {
		asdfadfasdfasdf44f
		context.fillStyle = "rgb(130, 130, 130)";
		context.font = "22pt Trebuchet MS";
		
		context.fillText("X", 30, 207);
		
		context.fillStyle = "rgb(206, 206, 206)";
		context.fillRect(30, 210, 340, 3);
		
		context.fillText("PLEASE SIGN HERE", 80, 120);
		context.font = "14pt Trebuchet MS";
		context.fillText("With Your Mouse or Finger", 91, 142);
		
		context.fillStyle = "rgb(130, 130, 130)";
		context.font = "20pt Trebuchet MS";
	} catch (caught) {
		$('#signatureContainer').css({ background: 'white', backgroundImage: "url(tickets/images/signatureBackground2.png)" });
	}

	signatureController = new SignatureController(context);
	
	signaturePoints = new Array;
		
	$('#signatureData').html(JSON.stringify(signaturePoints));
	$('#debugBox').html(signaturePoints);
}

function loadPadStartData() {
	var startPoints = new Array();
	try {
		startPoints = JSON.parse($('#startData').val());
	} catch (caught) {}
	
	if (startPoints.length > 0) {
		for (i in startPoints) {
			signatureController.strokeStart(startPoints[i][0][0], startPoints[i][0][1]);
			
			for (j in startPoints[i]) {
				signatureController.stroke(startPoints[i][j][0], startPoints[i][j][1]);
			}
		}
	}
	
	$('#signatureData').html(JSON.stringify(signaturePoints));
}

function preparePad() {
	signatureContainer = document.getElementById('signatureContainer');

	canvas = $('#signaturePad');
	canvasObject = canvas[0];
	
	canvasObject.width = padWidth;
	canvasObject.height = padHeight;
	canvas.css({ cursor: 'crosshair' });
	
	context = canvasObject.getContext("2d");
	
	preparePadBase();

	$(document).mouseup(sigPadMouseUp);
	canvas.mousedown(sigPadMouseDown);
	canvas.mouseup(sigPadMouseUp);
	canvas.bind('mousemove', sigPadMouseMove);

	canvasObject.ontouchstart = sigPadTouchStart;
	canvasObject.ontouchend = sigPadTouchEnd;
	canvasObject.ontouchmove = sigPadTouchMove;
	
	loadPadStartData();
}

function sigPadMouseDown(e) {
	if (!e) var e = window.event;
	
	isMouseDown = true;
	var arr = $('#signaturePad').offset(); 
	mousePosX = e.pageX - arr.left;
	mousePosY = e.pageY - arr.top;
	
	signatureController.strokeStart(mousePosX, mousePosY);
}

function sigPadMouseUp(e) {
	isMouseDown = false;
}

function sigPadMouseMove(e) {
	if (!e) var e = window.event;

	var arr = $('#signaturePad').offset(); 
	mousePosX = e.pageX - arr.left;
	mousePosY = e.pageY - arr.top;

	if (!isMouseDown)
		return;

	signatureController.stroke(mousePosX, mousePosY);
	signaturePoints[signaturePoints.length] = new Array(mousePosX, mousePosY);
	
	$('#signatureData').html(JSON.stringify(signaturePoints));
}

function sigPadTouchStart(e) {
	if (e.touches.length == 1) {
		var touch = e.touches[0];
		signatureController.strokeStart(touch.pageX, touch.pageY);
	}

	return false;
}

function sigPadTouchEnd(e) {
	if (e.touches.length == 1) {
		var touch = e.touches[0];
	}
}

function sigPadTouchMove(e) {
	if (e.touches.length == 1) {
		var touch = e.touches[0];

		var arr = $('#signaturePad').offset();

		signatureController.stroke(touch.pageX - arr.left, touch.pageY - arr.top);
	}
}

function clearPad() {
	preparePadBase();
}

function SignatureController(context) {
	this.init(context);
}

SignatureController.prototype = {
	context: null,

	prevMouseX: null, prevMouseY: null,

	points: null, count: null,
	
	currentLine: null,

	init: function(context) {
		this.context = context;
		this.context.lineWidth = 2;
		this.context.globalCompositeOperation = 'source-over';

		this.points = new Array();
		signaturePoints = this.points;
		this.currentLine = -1;
	},

	destroy: function() {
	},

	strokeStart: function(mousePosX, mousePosY) {
		this.currentLine++;
		this.points[this.currentLine] = new Array();
	
		this.prevMouseX = mousePosX;
		this.prevMouseY = mousePosY;
	},

	stroke: function(mousePosX, mousePosY) {
		this.points[this.currentLine].push([mousePosX, mousePosY]);
		signaturePoints = this.points;
		
		this.context.strokeStyle = "rgba(0, 0, 0, 1)";
		
		var i = this.currentLine;
		var j = this.points[i].length - 2;
		if (j < 0)
			j = 0;
		
		this.prevMouseX = this.points[i][j][0];
		this.prevMouseY = this.points[i][j][1];
		
		this.context.beginPath();
		this.context.moveTo(this.prevMouseX, this.prevMouseY);
		this.context.lineTo(mousePosX, mousePosY);
		this.context.stroke();
		this.context.closePath();

		this.count++;
	}
}