// useful functions

function drawCircle(ctx, x, y, radius) {
	ctx.beginPath();
	ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
	ctx.fill();	
}

function drawPoint(ctx, x, y) {
	ctx.fillRect(x, y, 1, 1);
}

// if you don't want the animated button enabled, set this to false
var canAnimate = true;

// supporting functions for draw.html, don't use these in your program

var canvas;
var drawButton;
var animateButton;
var stopButton;
var clearButton;
var intervalInput;
var intervalId;
var redScore;
var blueScore;
var state = {
	ctx: null,
	width: 0,
	height: 0
};

// this function will run after the page loads because it's called from the onload attribute in the body tag
function doOnLoad() {
    // save canvas and buttons in vars for convenience
    canvas = document.getElementById("canvas");
    animateButton = document.getElementById("animateButton");
    stopButton = document.getElementById("stopButton");
	intervalInput = document.getElementById("intervalInput");
	redScore = document.getElementById("redScore");
	blueScore = document.getElementById("blueScore");
    
    // set canvas width and height first time through
    doOnResize();
    
    // register event listener so width and height is adjust on resize
    window.onresize = doOnResize;

	// to capture arrow keys
	window.onkeydown = doOnKeyDown;
    
    state.ctx = canvas.getContext('2d');
	if (state.ctx) {
		state.ctx.save();
		state.ctx.fillStyle = "black";
		state.ctx.fillRect(0, 0, state.width, state.height);
		state.ctx.restore();
		// we're good to go, enable the start button
		if (canAnimate) {
			animateButton.disabled = false;
			stopButton.disabled = true;
			intervalInput.disabled = false;
		}
	} else {
		alert("Canvas not supported on this browser.");
	}
    
}

var KEY = { D: 68, W: 87, A: 65, S:83, SPACE: 32, SEMICOLON:59, O:79, K:75, L:76, M: 77, RETURN: 13, BACKSLASH: 220};
function doOnKeyDown(evt) {
	var code = evt.keyCode;
	switch(code) {
		case KEY.D: rocket1.right = true; break;
		case KEY.SEMICOLON: rocket2.right = true; break;
		
		case KEY.W: rocket1.up = true; break;
		case KEY.O: rocket2.up = true; break;
		
		case KEY.A: rocket1.left = true; break;
		case KEY.K: rocket2.left = true; break;
		
		case KEY.SPACE: rocket1.shoot(); break;
		case KEY.BACKSLASH: rocket2.shoot(); break;
	}
}

function doOnKeyUp(evt) {
	var code = evt.keyCode;
	switch(code) {
		case KEY.D: rocket1.right = false; break;
		case KEY.SEMICOLON: rocket2.right = false; break;
		
		case KEY.W: rocket1.up = false; break;
		case KEY.O: rocket2.up = false; break;
		
		case KEY.A: rocket1.left = false; break;
		case KEY.K: rocket2.left = false; break;
	}
}

function doOnResize() {
    if (window.innerHeight && window.innerWidth) {
	    canvas.width = window.innerWidth - 70;
	    canvas.height = window.innerHeight - 120;
    } else {
	    // else keep defaults for Internet Explorer users
    }
    
    // save width and height in state
    state.width = canvas.width;
    state.height = canvas.height;
}


function animate() {
	try {
		var intervalInMillis = parseInt(intervalInput.value);
		
		if (isNaN(intervalInMillis) || intervalInMillis <= 0) {
			alert("Interval must be a non-negative integer!");
		} else {
			animateButton.blur();
			animateButton.disabled = true;
			stopButton.disabled = false;

			intervalId = window.setInterval(function() {draw(state.ctx, state.width, state.height);}, intervalInMillis);
		}
	} catch (e) {
		alert(e);
	}
}

function stop() {
	if (intervalId) {
		stopButton.blur();
		animateButton.disabled = false;
		stopButton.disabled = true;
		
		// stop the madness
		window.clearInterval(intervalId);
		
		// don't want to use this intervalId again
		intervalId = null;
	}
}