var WIDTH;
var HEIGHT;
var g;
var rightDown = false;
var leftDown = false;
var carray = new Array();


// Main Function To Start
function start()
{
	g = $('#canvas')[0].getContext("2d");
	WIDTH = $("#canvas").width();
	HEIGHT = $("#canvas").height();
	carray[0] = new Circle(150,150,20);
	carray[1] = new Circle(150,150,15);
	carray[2] = new Circle(150,150,10);
	carray[3] = new Circle(150,150,5);
	return setInterval(draw, 10);
}


// Get Key Input
function onKeyDown(evt) 
{
	if(evt.keyCode == 39) rightDown = true;
	else if(evt.keyCode == 37) leftDown = true;
	dx = dx*-1;
}

function onKeyUp(evt) 
{
	if (evt.keyCode == 39) rightDown = false;
	else if (evt.keyCode == 37) leftDown = false;
	dx = dx*-1;
}


// Circle Class	
function Circle(x,y,r)
{
	this.x = x;
	this.y = y;
	this.r = r;
	this.dx = Math.ceil(Math.random()*7);
	this.dy = Math.ceil(Math.random()*7);
	
	this.draw = function()
	{
		g.beginPath();
		g.fillStyle = "#000";
		g.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
		g.closePath();
		g.fill();
	}
	
	this.getX = function()
	{
		return x;
	}
	
	this.getY = function()
	{
		return this.y;
	}
	
	this.move = function()
	{	
		this.x += this.dx;
		this.y += this.dy;
	
		if(this.x > WIDTH || this.x < 0)
		{
			this.dx = this.dx*-1;
		}
		
		if(this.y > HEIGHT || this.y < 0)
		{
			this.dy = this.dy*-1;
		}
	}
}


// Draw Function
function draw()
{
	clear();
	var i;
	for (i=0; i<carray.length; i++)
	{
		carray[i].move();
		carray[i].draw();
	}
}

function clear() 
{
	g.fillStyle = "#fff";
	g.fillRect(0, 0, WIDTH, HEIGHT);
}

// Use JQuery to wait for document load
$(document).ready(function()
{
	start();
});

$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);