var canvas;
var canvasWidth;
var canvasHeight;

var canvasLocation;
var mouseLocation;

var game;
var time;
var shapeNum = 0;
var rotate=127;
var pressed = false;

function Shape() {
	col = shapeNum++;
	
	col = ((31*shapeNum) % 255);
	
	this.color = 'rgb('+col+','+col+','+col+')';
	this.size = {x: 10, y: 10};
	this.type = 'box';
	this.location = {x: 0, y: 0};
	this.speed = {x: 0, y: 0};
	this.friction = {x: 0.01, y: 0.1};
	this.rotate = 1+(Math.random()*127);
	this.rotateD = Math.random() / 10;
	
}

Shape.prototype.size = {x: 10, y: 10};
Shape.prototype.type = 'box';
Shape.prototype.location = {x: 0, y: 0};
Shape.prototype.speed = {x: 0, y: 0};
Shape.prototype.friction = {x: 0.06, y: 0.06};


Shape.prototype.paint = function(ctx) {
	if(this.type == 'box') {
		ctx.save();
		ctx.fillStyle = this.color;
		ctx.translate(this.location.x, this.location.y);
		ctx.rotate(this.rotate);
		ctx.fillRect(0,0, this.size.x, this.size.y);
		ctx.restore();
	}
}


Shape.prototype.setLocation = function(x, y) {
	this.location.x = x;
	this.location.y = y;
}

Shape.prototype.accelerate = function(x, y) {
	this.speed.x += x;
	this.speed.y += y;
}

Shape.prototype.animate = function() {
	if(this.speed.x != 0 || this.speed.y != 0) {
		this.location.x += this.speed.x;
		this.location.y += this.speed.y;
		
		if(this.location.x > canvasWidth + 50) {
			this.location.x = 0;
		}
		if(this.location.x < -50) {
			this.location.x = canvasWidth;
		}
		
		if(this.location.y > canvasHeight) {
			this.location.y = -50;
		}
		if(this.location.y < -50) {
			this.location.y = canvasHeight;
		}
	}
	
	if(Math.abs(this.speed.x) > 0.5) {
		this.speed.x -= this.friction.x;
		if(this.speed.x < 0.5) this.speed.x = 0;
	}
	
	if(Math.abs(this.speed.y) > 0.5) {
		this.speed.y -= this.friction.y;
		if(this.speed.y < 0.5) this.speed.y = 0;
	}
	
	
	if(this.rotate < 1 || this.rotate > 359) {
		this.rotateD = -this.rotateD;
	}
	this.rotate += this.rotateD;
}


function Game() {
	this.color = 240;
	this.colorD = 2.5;
	
	var w = canvasWidth / 2;
	var h = canvasHeight / 2;
	
	
	
	var i = 0;
	for(y = 0; y < canvasHeight; y+=20) {
		for(x = 0; x < canvasWidth; x+=20) {
			this.boxes[i] = new Shape();
			this.boxes[i].setLocation(x,y);
			i++;
		}
	}
	
}

Game.prototype.boxes = new Array();
Game.prototype.color = 0;
Game.prototype.colorD = 0;

Game.prototype.paint = function() {
	var ctx = canvas.getContext('2d');
	var c = Math.round(this.color);
	
	ctx.fillStyle = 'rgb('+c+','+c+','+c+')';
	ctx.fillRect(0,0, canvasWidth, canvasHeight);
	
	ctx.save();
	
	
	for(i = 0; i < this.boxes.length; i++) {
		this.boxes[i].animate();
		this.boxes[i].paint(ctx);
	}
	ctx.restore();
	
};

Game.prototype.init = function() {
	
};

Game.prototype.animate = function() {
	
	if(!pressed) {
		var i = 0;
		for(y = 0; y < canvasHeight; y+=20) {
			for(x = 0; x < canvasWidth; x+=20) {
				var d = Math.random();
				if(d > 0.5) {
					d = -Math.random();
				} else {
					d = Math.random();
				}
				this.boxes[i].accelerate(d, Math.random()/20.0);
				i++;
			}
		}
	} else {
		
		var i = 0;
		for(y = 0; y < canvasHeight; y+=20) {
			for(x = 0; x < canvasWidth; x+=20) {
			
				var xd;
				var yd;
				
				if(this.boxes[i].location.x > mouseLocation.x) {
					xd = (mouseLocation.x - this.boxes[i].location.x) / 10.0;
				} else {
					xd = (this.boxes[i].location.x - mouseLocation.x) / 10.0;
				}
				
				if(this.boxes[i].location.y > mouseLocation.y) {
					yd = (mouseLocation.y - this.boxes[i].location.y) / 10.0;
				} else {
					yd = (this.boxes[i].location.y - mouseLocation.y) / 10.0;
				}
				
				if(xd > 5) xd = 5;
				if(xd < -5) xd -5;
				
				if(yd > 5) yd = 5;
				if(yd < -5) yd -5;
				
				this.boxes[i].accelerate(xd, yd);
				i++;
			}
		}
	}

/*	this.color += this.colorD;
	if(this.color < 5 || this.color > 250) {
		this.colorD = -this.colorD;
	} */
	
};

function findPosition(obj) {
	var left = 0;
	var top = 0;
	if (obj.offsetParent) {
		while(obj) {
			left += obj.offsetLeft;
			top += obj.offsetTop;
			obj = obj.offsetParent;
		}
	}
	
	return {x : left, y: top};
}

function toLocal(e) {
	var pos = {x : e.clientX, y : e.clientY};
	
	pos.x = pos.x - canvasLocation.x;
	pos.y = pos.y - canvasLocation.y;
	
	return pos;
}

function mouseDown(e) {
	mouseLocation = toLocal(e);
	pressed = true;
}

function mouseMove(e) {
	mouseLocation = toLocal(e);
	
	
	
}

function mouseUp(e) {
	pressed = false;
	mouseLocation = toLocal(e);
}

function animate() {

	


	game.animate();
	game.paint();
}


function start() {
	canvas = document.getElementById('canvas');
	canvasWidth = parseInt(canvas.getAttribute("width"));
	canvasHeight = parseInt(canvas.getAttribute("height"));
	
	canvasLocation = findPosition(canvas);
	
	game = new Game();
	game.init();
	
	window.setInterval("animate();", 50);
	
	canvas.addEventListener("mousedown", mouseDown, false);
	canvas.addEventListener("mousemove", mouseMove, false);
	canvas.addEventListener("mouseup", mouseUp, false); 
}

 $(document).ready(function(){
   start();
 });