var canvas = document.getElementById("gameCanvas");
var context = canvas.getContext("2d");

// set up some event handlers to process keyboard input
window.addEventListener('keydown', function(evt) { onKeyDown(evt); }, false);
window.addEventListener('keyup', function(evt) { onKeyUp(evt); }, false)

// key constants
// Go here for a list of key codes:
// https://developer.mozilla.org/en-US/docs/DOM/KeyboardEvent
var KEY_SPACE = 32;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;

var SCREEN_WIDTH = canvas.width;
var SCREEN_HEIGHT = canvas.height;
var ASTEROID_SPEED = 0.8;
var PLAYER_SPEED = 1;
var PLAYER_TURN_SPEED = 0.04;
var BULLET_SPEED = 1.5;


	// this creates the player object and assigns it some properties
var player = {
	image: document.createElement("img"),
	x: SCREEN_WIDTH/2,
	y: SCREEN_HEIGHT/2,
	width: 93,
	height: 80,
	directionX: 0,
	directionY: 0,
	angularDirection: 0,
	rotation: 0
};
// set the image for the player to use
player.image.src = "ship.png";

	// this creates the asteroid object and assigns it some
	// properties
var asteroid = {
	image: document.createElement("img"),
	x: 100,
	y: 100,
	width: 69,
	height: 75,
	directionX: 0,
	directionY: 0
	isDead: false;
}
// set the image for the asteroid to use
asteroid.image.src = "rock_large.png";

asteroid.directionX = 10;
asteroid.directionY = 8;
// 'normalize' the velocity (the hypotenuse of the triangle
// formed by x,y will equal 1)
var magnitude = Math.sqrt( (asteroid.directionX * asteroid.directionX)
+ (asteroid.directionY * asteroid.directionY) );
if(magnitude != 0)
{
asteroid.directionX /= magnitude;
asteroid.directionY /= magnitude;
}

// this creates the bullet object and assigns it some properties
var bullet = {
image: document.createElement("img"),
x: player.x,
y: player.y,
width: 5,
height: 5,
velocityX: 0,
velocityY: 0,
isDead: true
};
// set the image for the asteroid to use
bullet.image.src = "bullet.png";

function playerShoot()
{
	// we can only have 1 bullet at a time
	if( bullet.isDead == false )
		return;
	// start off with a velocity that shoots the bullet straight up
	var velX = 0;
	var velY = 1;
	// now rotate this vector acording to the ship's current rotation
	var s = Math.sin(player.rotation);
	var c = Math.cos(player.rotation);
	// for an explanation of this formula,
	// see http://en.wikipedia.org/wiki/Rotation_matrix
	var xVel = (velX * c) - (velY * s);
	var yVel = (velX * s) + (velY * c);
	// dont bother storing a direction and calculating the
	// velocity every frame, because it won't change.
	// Just store the pre-calculated velocity
	bullet.velocityX = xVel * BULLET_SPEED;
	bullet.velocityY = yVel * BULLET_SPEED;
	// don't forget to set the bullet's position
	bullet.x = player.x;
	bullet.y = player.y;
	// make the bullet alive
	bullet.isDead = false;
}

function onKeyDown(event)
{
	if(event.keyCode == KEY_UP)
	{
		player.directionY = 1;
	}
	if(event.keyCode == KEY_DOWN)
	{
		player.directionY = -1;
	}
	if(event.keyCode == KEY_LEFT)
	{
		player.angularDirection = -1;
	}
	if(event.keyCode == KEY_RIGHT)
	{
		player.angularDirection = 1;
	}
}

function onKeyUp(event)
{
	if(event.keyCode == KEY_UP)
	{
		player.directionY = 0;
	}
	if(event.keyCode == KEY_DOWN)
	{
		player.directionY = 0;
	}
	if(event.keyCode == KEY_LEFT)
	{
		player.angularDirection = 0;
	}
	if(event.keyCode == KEY_RIGHT)
	{
		player.angularDirection = 0;
	}
	if(event.keyCode == KEY_SPACE)
	{
		playerShoot();
	}
}

	// tests if two rectangles are intersecting.
	// Pass in the x,y coordinates, width and height of each rectangle.
	// Returns 'true' if the rectangles are intersecting
function intersects(x1, y1, w1, h1, x2, y2, w2, h2)
	{
		if(y2 + h2 < y1 ||
			x2 + w2 < x1 ||
			x2 > x1 + w1 ||
			y2 > y1 + h1)
		{
			return false;
		}
		return true;
	}


function run()
{
	context.fillStyle = "#ccc";
	context.fillRect(0, 0, canvas.width, canvas.height);

	// update and draw the bullet
	// we want to do this first so that the plane is drawn on
	// top of the bullet
	if(bullet.isDead == false)
	{
		bullet.x += bullet.velocityX;
		bullet.y += bullet.velocityY;
		context.drawImage(bullet.image,
			bullet.x - bullet.width/2,
			bullet.y - bullet.height/2);

		if(asteroid.isDead == false)
		{
			var hit = intersects(
						bullet.x, bullet.y,
						bullet.width, bullet.height,
						asteroid.x, asteroid.y,
						asteroid.width, asteroid.height);
			if(hit == true)
			{
				bullet.isDead = true;
				asteroid.isDead = true;
			}
		}

		if(bullet.x < 0 || bullet.x > SCREEN_WIDTH ||
			bullet.y < 0 || bullet.y > SCREEN_HEIGHT)
		{
			bullet.isDead = true;
		}
	}

		// calculate sin and cos for the player's current rotation
	var s = Math.sin(player.rotation);
	var c = Math.cos(player.rotation);

	// figure out what the player's velocity will be based on the current rotation
	// (so that if the ship is moving forward, then it will move forward according to its
	// rotation. Without this, the ship would just move up the screen when we pressed 'up',
	// regardless of which way it was rotated)
	// for an explanation of this formula, see http://en.wikipedia.org/wiki/Rotation_matrix
	var xDir = (player.directionX * c) - (player.directionY * s);
	var yDir = (player.directionX * s) + (player.directionY * c);
	var xVel = xDir * PLAYER_SPEED;
	var yVel = yDir * PLAYER_SPEED;

	player.x += xVel;
	player.y += yVel;

	player.rotation += player.angularDirection * PLAYER_TURN_SPEED;

	context.save();
		context.translate(player.x, player.y);
		context.rotate(player.rotation);
		context.drawImage(
				player.image, -player.width/2, -player.height/2);
	context.restore();

// update and draw the asteroid (we don't need to
// worry about rotation here)
var velocityX = asteroid.directionX * ASTEROID_SPEED;
var velocityY = asteroid.directionY * ASTEROID_SPEED;
asteroid.x += velocityX;
asteroid.y += velocityY;
context.drawImage(asteroid.image,
asteroid.x - asteroid.width/2,
asteroid.y - asteroid.height/2);
}


//-------------------- Don't modify anything below here
// This code will set up the framework so that the 'run' function is
// called 60 times per second. We have some options to fall back on
// in case the browser doesn't support our preferred method.
(function() {
 var onEachFrame;
	if (window.requestAnimationFrame) {
	onEachFrame = function(cb) {
 var _cb = function() { cb(); window.requestAnimationFrame(_cb); }
	_cb();
	};
 }
 else if (window.mozRequestAnimationFrame) {
	onEachFrame = function(cb) {
 var _cb = function() { cb();
	window.mozRequestAnimationFrame(_cb); }
	_cb();
	};
 }
 else {
	onEachFrame = function(cb) {
	setInterval(cb, 1000 / 60);
	}
 }

 window.onEachFrame = onEachFrame;
})();
window.onEachFrame(run);