// Get the 2D context from the canvas in
//our HTML page
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);

var SCREEN_WIDTH = canvas.width;
var SCREEN_HEIGHT = canvas.height;

var ASTEROID_SPEED = 0.05;
var PLAYER_SPEED = 1;
var PLAYER_TURN_SPEED = 0.04;
var BULLET_SPEED = 7.5;

//this will create 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
};

//players image here
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
};

// asteroid set the image
	asteroid.image.src = "rock_large.png";
	asteroid.directionX = 10;
	asteroid.directionY = 8;

	// 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
	};

//bullet image
bullet.image.src = "bullet.png";


// 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_A = 65;
var KEY_W = 87;
var KEY_D = 68;
var KEY_S = 83;




//normalize the velocity (make it equal to 1)

var magnitude = Math.sqrt( (asteroid.directionX * asteroid.directionX) + (asteroid.directionY * asteroid.directionY) );

if (magnitude != 0)
	{
	asteroid.directionx /= magnitude;
	asteroid.directionY /= magnitude;
	}



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_W)
			{
				player.directionY = 1;
			}

		if(event.keyCode == KEY_S)
			{
				player.directionY = -1;
			}

		if(event.keyCode == KEY_A)
			{
				player.angularDirection = -1;
			}

		if(event.keyCode == KEY_D)
			{
				player.angularDirection = 1;
			}
	}

function onKeyUp(event)
	{
		if(event.keyCode == KEY_W)
			{
				player.directionY = 0;
			}
		if(event.keyCode == KEY_S)
			{
				player.directionY = 0;
			}
		if(event.keyCode == KEY_A)
			{
				player.angularDirection = 0;
			}
		if(event.keyCode == KEY_D)
			{
				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 = "#8a2be2";
		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 players 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 asteroid


		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);