var map = {
	0 : "6:00 PM EST",
	50 : "7:12 PM EST",
	100 : "8:24 PM EST",
	150 : "9:36 PM EST",
	200 : "10:48 PM EST",
	250 : "12:00 AM EST",
	300 : "1:12 AM EST",
	350 : "2:24 AM EST",
	400 : "3:36 AM EST",
	450 : "4:48 AM EST",
	500 : "6:00 AM EST",
	550 : "7:12 AM EST",
	600 : "8:24 AM EST",
	650 : "9:36 AM EST",
	700 : "10:48 AM EST",
	750 : "12:00 PM EST",
	800 : "1:12 PM EST",
	850 : "2:24 PM EST",
	900 : "3:36 PM EST",
	950 : "4:48 PM EST",
	1000 : "6:00 PM EST"
};

function Canvas() {};

Canvas.prototype.init = function () {
	this.canvas = document.getElementById("canvas");
	this.ctx = this.canvas.getContext("2d");
}

Canvas.prototype.drawDot = function (x,y) {
	
	x = (x*500)/180;
	y = (y*250)/90;
	
	xCoord = (500 + x);
	yCoord = (-y + 250);
	
	this.ctx.fillStyle = "red";
	this.ctx.fillRect(xCoord, yCoord, 2, 2);
}

Canvas.prototype.drawIt = function (input) {
	switch (input) {
		case 0:
			currentArray = phpArr0;
			break;
		case 50:
			currentArray = phpArr1;
			break;
		case 100:
			currentArray = phpArr2;
			break;
		case 150:
			currentArray = phpArr3;
			break;
		case 200:
			currentArray = phpArr4;
			break;
		case 250:
			currentArray = phpArr5;
			break;
		case 300:
			currentArray = phpArr6;
			break;
		case 350:
			currentArray = phpArr7;
			break;
		case 400:
			currentArray = phpArr8;
			break;
		case 450:
			currentArray = phpArr9;
			break;
		case 500:
			currentArray = phpArr10;
			break;
		case 550:
			currentArray = phpArr11;
			break;
		case 600:
			currentArray = phpArr12;
			break;
		case 650:
			currentArray = phpArr13;
			break;
		case 700:
			currentArray = phpArr14;
			break;
		case 750:
			currentArray = phpArr15;
			break;
		case 800:
			currentArray = phpArr16;
			break;
		case 850:
			currentArray = phpArr17;
			break;
		case 900:
			currentArray = phpArr18;
			break;
		case 950:
			currentArray = phpArr19;
			break;
	}
	var i = 0;

	for (var i=0; i < currentArray.length; i++) {		
		if (currentArray[i][0] && currentArray[i][1]) {
			canvas.drawDot(currentArray[i][0], currentArray[i][1]);
		}
		else {
			//console.log("Whoops, bad data");
		}
	}
}

Canvas.prototype.clearMe = function () {
	this.ctx.clearRect(0, 0, 1000, 500);
}

$(document).ready(function() {
	canvas = new Canvas();
	canvas.init();
	canvas.drawIt(0);

	
	$(function() {
			$("#slider").slider({
				value:0,
				min: 0,
				max: 1000,
				step: 50,
				slide: function(event, ui) {
					$("#amount").val(map[ui.value]);
					canvas.clearMe();
					canvas.drawIt(ui.value);
				}
			});
			$("#amount").val("6:00 PM EST");
	});
	
	

});