// Creation Date: 10 Aug 2011
// Author: Fernando Canizo (aka conan) - http://conan.muriandre.com/

// TODO: this probably needs refactoring! I just landed pussyballs code and didn't checked for code or variable duplication, just made it work quickly

// global constants (these wont work on IE)
const MAX_SPEED = 3
const TANK_SIZE = 15
const MAX_TANKS = 10

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// general code
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function resizeCanvas(canvas, context) {
	canvas.attr('width', $(window).get(0).innerWidth)
	canvas.attr('height', $(window).get(0).innerHeight)
	context.fillRect(0, 0, canvas.width, canvas.height)
}

function drawBackground(context, width, height, alpha) {
		// checking default value for alpha
		alpha = (typeof alpha == 'undefined') ? 1 : alpha;

		context.fillStyle = "rgba(0, 0, 0, " + alpha + ")";
		context.fillRect(0, 0, width, height)
	}


$(document).ready(function() {

	var playGround = $('#playGround')
	var context = playGround.get(0).getContext('2d')


	var pgWidth = playGround.width()
	var pgHeight = playGround.height()
	var switchanimationLoop = 1;

	drawBackground(context, pgWidth, pgHeight)

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// tank code
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	var Tank = function(x, y, color, speed, direction) {
		this.x = x
		this.y = y
		this.color = color
		this.speed = speed // from 0 to MAX_SPEED
		this.direction = direction // in radians
	}

	var Army = new Array()

	for(var i = 0; i < MAX_TANKS; i++) {
		Army.push(new Tank(
			Math.floor(Math.random() * pgWidth), // x
			Math.floor(Math.random() * pgHeight), // y
			'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')', // color
			Math.floor(Math.random() * MAX_SPEED) + 1, // speed
			Math.floor(Math.random() * 2 * Math.PI) // direction
			)
		)
	}


	function drawTank(context, tank) {
		context.fillStyle = tank.color
		context.fillRect(tank.x, tank.y, 10, 10)
	}


	var playAnimation = true
	var changeTankDirectionCount = 0;


	function tankLoop() {
		switchanimationLoop++;

		drawBackground(context, pgWidth, pgHeight, 0.1)
		for(var tankIndex = 0; tankIndex < Army.length; tankIndex++) {
			var tmpTank = Army[tankIndex]

			if((changeTankDirectionCount % 50) == 0) {
				tmpTank.direction = Math.floor(Math.random() * 2 * Math.PI);
			}

			tmpTank.x = tmpTank.x + Math.cos(tmpTank.direction) * tmpTank.speed
			tmpTank.y = tmpTank.y + Math.sin(tmpTank.direction) * tmpTank.speed
			if(tmpTank.x > pgWidth) {
				tmpTank.x = tmpTank.x - pgWidth
			} else if(tmpTank.x < 0) {
				tmpTank.x = pgWidth - Math.abs(tmpTank.x)
			}

			if(tmpTank.y >= pgHeight) {
				tmpTank.y = tmpTank.y - pgHeight
			} else if(tmpTank.y < 0) {
				tmpTank.y = pgHeight - Math.abs(tmpTank.y)
			}

			drawTank(context, tmpTank)
		}

		changeTankDirectionCount++;

		// TODO: it would be nice to make an array of looping functions and jump between them, but I tried:
		// var animationLoop = Array('tankLoop', 'pussyBallsLoop')
		// and it didn't worked

		if(playAnimation) {
			if((switchanimationLoop % 330) == 0) { // 330 => every 10 seconds
				setTimeout(pussyBallsLoop, 33)
			} else {
				setTimeout(tankLoop, 33)
			}
		}
	}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// pussy balls code
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	var Asteroid = function(x, y, radius, vX, vY, aX, aY) {
		this.x = x;
		this.y = y;
		this.radius = radius;
		this.vX = vX;
		this.vY = vY;
		this.aX = aX;
		this.aY = aY;
	};

	var asteroids = new Array()
	for (var i = 0; i < 10; i++) {
		var x = 20+(Math.random()*(pgWidth-40))
		var y = 20+(Math.random()*(pgHeight-40))
		var radius = 5+Math.random()*10
		var vX = Math.random() * MAX_SPEED - 1
		var vY = Math.random() * MAX_SPEED - 1
		var aX = Math.random() * 0.2 - 0.1
		var aY = Math.random() * 0.2 - 0.1
		asteroids.push(new Asteroid(x, y, radius, vX, vY, aX, aY))

	}

	function pussyBallsLoop() {
		switchanimationLoop++;

		drawBackground(context, pgWidth, pgHeight, 0.1)

		context.fillStyle = "rgb(255, 0, 255)";
		var asteroidsLength = asteroids.length;

		for (var i = 0; i < asteroidsLength; i++) {
			var tmpAsteroid = asteroids[i];

			for (var j = i+1; j < asteroidsLength; j++) {
				var tmpAsteroidB = asteroids[j];
				var dX = tmpAsteroidB.x - tmpAsteroid.x;
				var dY = tmpAsteroidB.y - tmpAsteroid.y;
				var distance = Math.sqrt((dX*dX)+(dY*dY));

				if (distance < tmpAsteroid.radius + tmpAsteroidB.radius) {
					var angle = Math.atan2(dY, dX);
					var sine = Math.sin(angle);
					var cosine = Math.cos(angle);

					var x = 0;
					var y = 0;
					var xB = dX * cosine + dY * sine;
					var yB = dY * cosine - dX * sine;
					var vX = tmpAsteroid.vX * cosine + tmpAsteroid.vY * sine;
					var vY = tmpAsteroid.vY * cosine - tmpAsteroid.vX * sine;
					var vXb = tmpAsteroidB.vX * cosine + tmpAsteroidB.vY * sine;
					var vYb = tmpAsteroidB.vY * cosine - tmpAsteroidB.vX * sine;

					vX *= -1;
					vXb *= -1;
					xB = x + (tmpAsteroid.radius + tmpAsteroidB.radius);

					tmpAsteroid.x = tmpAsteroid.x + (x * cosine - y * sine);
					tmpAsteroid.y = tmpAsteroid.y + (y * cosine + x * sine);
					tmpAsteroidB.x = tmpAsteroid.x + (xB * cosine - yB * sine);
					tmpAsteroidB.y = tmpAsteroid.y + (yB * cosine + xB * sine);
					tmpAsteroid.vX = vX * cosine - vY * sine;
					tmpAsteroid.vY = vY * cosine + vX * sine;
					tmpAsteroidB.vX = vXb * cosine - vYb * sine;
					tmpAsteroidB.vY = vYb * cosine + vXb * sine;
				};
			};


			tmpAsteroid.x += tmpAsteroid.vX;
			tmpAsteroid.y += tmpAsteroid.vY;

			if (Math.abs(tmpAsteroid.vX) < MAX_SPEED) {
				tmpAsteroid.vX += tmpAsteroid.aX;
			};
			if (Math.abs(tmpAsteroid.vY) < MAX_SPEED) {
				tmpAsteroid.vY += tmpAsteroid.aY;
			};


			if (tmpAsteroid.x-tmpAsteroid.radius < 0) {
				tmpAsteroid.x = tmpAsteroid.radius;
				tmpAsteroid.vX *= -1;
				tmpAsteroid.aX *= -1;

			} else if (tmpAsteroid.x+tmpAsteroid.radius > pgWidth) {
				tmpAsteroid.x = pgWidth-tmpAsteroid.radius;
				tmpAsteroid.vX *= -1;
				tmpAsteroid.aX *= -1;

			};
			if (tmpAsteroid.y-tmpAsteroid.radius < 0) {
				tmpAsteroid.y = tmpAsteroid.radius;
				tmpAsteroid.vY *= -1;
				tmpAsteroid.aY *= -1;

			} else if (tmpAsteroid.y+tmpAsteroid.radius > pgHeight) {
				tmpAsteroid.y = pgHeight-tmpAsteroid.radius;
				tmpAsteroid.vY *= -1;
				tmpAsteroid.aY *= -1;

			};


			context.beginPath();
			context.arc(tmpAsteroid.x, tmpAsteroid.y, tmpAsteroid.radius, 0, Math.PI*2, false);
			context.closePath();
			context.fill();
		};

		if(playAnimation) {
			if((switchanimationLoop % 330) == 0) { // 330 => every 10 seconds
				setTimeout(tankLoop, 33)
			} else {
				setTimeout(pussyBallsLoop, 33)
			}
		}

	}; // pussyBallsLoop ends


	tankLoop()
})