var ctx;
var width;
var height;
var idInterval;

//colores
var bgcolor = "#000000";
var elementColor = "#9f8b00";

var font = "Lucida Console";

//bola
var xBallInit = 100;
var yBallInit = 50;
var xBall;
var yBall;
var ballr; //radio
var wBall; //width
var dx; //velocidad x
var dy; //velocidad y

//paletas
var xPaleta1;
var yPaleta1;
var xPaleta2;
var yPaleta2; 
var widthPaleta;
var heightPaleta; 

//puntos
var puntosP1;
var puntosP2;

//controles
var upPressed;
var downPressed;

var playPressed;
var isPlaying = false;

//player
var playerVel;
var cpuVel;


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

function rect(x,y,w,h) {
  ctx.beginPath();
  ctx.rect(x,y,w,h);
  ctx.closePath();
  ctx.fill();
}

function clear() {
  ctx.clearRect(0, 0, width, height);
}

function onKeyDown(evt) {
  if (evt.keyCode == 38) upPressed = true;
  else if (evt.keyCode == 40) downPressed = true;
  else if (evt.keyCode == 32 && !isPlaying){
	play();
	isPlaying = true;
  }  //space bar
}

function onKeyUp(evt) {
  if (evt.keyCode == 38) upPressed = false;
  else if (evt.keyCode == 40) downPressed = false;
}

$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);

function dibujaTitulo(){
	ctx.fillStyle = elementColor;
	var titulo = "PONG";
	var subtitulo = "Press space to start game";
	
	ctx.font = "60px "+font ;	
	metrics = ctx.measureText(titulo);
	var xTitulo = (width - metrics.width) / 2;
	var yTitulo = (height - 60) / 2;
	ctx.fillText(titulo, xTitulo, yTitulo);

	ctx.font = "20px "+font;
	metrics = ctx.measureText(subtitulo);
	xTitulo = (width - metrics.width) / 2;
	yTitulo = (height / 2) +40;
	ctx.fillText(subtitulo, xTitulo, yTitulo);

}

function dibujaGameOver(){



	clearInterval(idInterval);

	ctx.fillStyle = bgcolor;
	clear();
	
	ctx.fillStyle = elementColor;
	var titulo = "GAME OVER";
	var subtitulo = "";
	
	if (puntosP1 > puntosP2){
		subtitulo = "Player 1 wins!";
	}
	else {
		subtitulo = "Player 2 wins!";
	}
	
	ctx.font = "60px "+font;	
	metrics = ctx.measureText(titulo);
	var xTitulo = (width - metrics.width) / 2;
	var yTitulo = (height - 60) / 2;
	ctx.fillText(titulo, xTitulo, yTitulo);

	ctx.font = "20px "+font;
	metrics = ctx.measureText(subtitulo);
	xTitulo = (width - metrics.width) / 2;
	yTitulo = (height / 2) +40;
	ctx.fillText(subtitulo, xTitulo, yTitulo);
	
	isPlaying = false;

}

function movePlayerUp(){
	if (yPaleta1 - playerVel > 0)
		yPaleta1 -= playerVel; 
}

function movePlayerDown(){
	if (yPaleta1 + heightPaleta + playerVel < height){
		yPaleta1 += playerVel;
	}
}

function moveCPU(){
	

	var chance=Math.floor(Math.random()*11)

	if (xBall > width / 2 ) {
		if (yPaleta2 + cpuVel < 0 || yPaleta2 + heightPaleta + cpuVel > height) 
			cpuVel = -cpuVel;
		yPaleta2 += cpuVel;
	}
}

function moveBall(){

	//colision paleta izquierda
	if (xBall + dx  < xPaleta1 + widthPaleta
		&& yBall + dy >= yPaleta1
		&& yBall + dy + wBall < yPaleta1 + heightPaleta ){ 
		dx = -dx;
		dy = -dy;
	}
	
	//colision paleta derecha
	if (xBall + dx + wBall > xPaleta2 - widthPaleta
		&& yBall + dy >= yPaleta2 
		&& yBall + dy + wBall <= yPaleta2 + heightPaleta ){
		dx = -dx;
		dy = -dy;
	}

	if (xBall + wBall + dx > width){ //punto player1
		xBall = width - xBallInit - wBall;
		yBall = yBallInit; 
		dx = -dx;
		puntosP1++;
	}
	
	if (xBall + dx < 0){ //punto player2
		xBall = xBallInit;
		yBall = yBallInit; 
		dx = -dx;
		puntosP2++;
	}
			
		
	if (yBall + wBall + dy > height || yBall + dy  < 0 ) //colision abajo/arriba
		dy = -dy;

			

		
	xBall += dx;
	yBall += dy;
}



function dibujaRed(){
	var xRed = (width - 20) / 2;
	var yRed = 5;
	var wRed = 20;
	var hRed = 20;
	
	while (yRed + hRed < height){
		rect(xRed,yRed,wRed,hRed);
		yRed += hRed + 20;
	}	
}

function dibujaPuntos(puntos, player){

	var xPuntos = 50;
	var yPuntos = 50;

	if (player == 2){
		metrics = ctx.measureText(puntos);
		xPuntos = width - metrics.width - xPuntos;
	}

	ctx.font = "60px "+font;
	ctx.fillText(puntos, xPuntos, yPuntos);
}


function play(){
	idInterval = init();
}


function init(){	
	//paletas
	widthPaleta = 20;
	heightPaleta = 100;
	
	xPaleta1 = 10;
	yPaleta1 = (height - heightPaleta) / 2;
	
	xPaleta2 = width - widthPaleta -10;
	yPaleta2 = yPaleta1;
	
	//bola
	xBall = xBallInit;
	yBall = yBallInit;
	ballr = 10; //radio
	dx = 3; //velocidad x
	dy = 6; //velocidad y
	wBall = 20; //width ball
	
	//puntos
	puntosP1 = 0;
	puntosP2 = 0;
	
	//teclas pulsadas
	upPressed = false;
	downPressed = false;

	//velocidad paletas
	playerVel = 5;
	cpuVel = 5;
	
	return setInterval(draw, 10);
}

function draw(){
	if (puntosP1 < 6 && puntosP2 < 6){
		ctx.fillStyle = bgcolor;
		clear();
		ctx.fillStyle = elementColor;
		//red
		dibujaRed();
		//puntuación
		dibujaPuntos(puntosP1, 1);
		dibujaPuntos(puntosP2, 2);
		//bola
		rect(xBall, yBall, wBall, wBall);
		//paletas
		if (upPressed)
			movePlayerUp();
		if (downPressed)
			movePlayerDown();
		rect(xPaleta1, yPaleta1, widthPaleta, heightPaleta);
		rect(xPaleta2, yPaleta2, widthPaleta, heightPaleta);
	
		moveCPU();
		moveBall();	
	}
	else {
		dibujaGameOver();
	}
}

function stop (){
	clearInterval(idInterval);
}

function reset(){
	clearInterval(idInterval);
	ctx.fillStyle = bgcolor;
	clear();
	dibujaTitulo();
}

function loadGame(){
	ctx = $('#canvas')[0].getContext("2d");
	width = $("#canvas").width();
	height = $("#canvas").height();
	dibujaTitulo();
	
}