// Tiina Vuorenmaa
// class: mm3303 
// updated: 9/09/2009
// trying at pong animation

//Steps for the pong game:
// 1. set up the field and starting positions of the ball, paddles
// later: add the score
// later: players choose a side
// later: flip a coin to see who goes first (for now left will)
// 2. 3-2-1 countdown to start of game
// 3. when game starts the ball moves
// 4. when ball hits a side:
//		if the paddle is there, it moves back (do this automatically first)
//		if a paddle is not there, it stops (point for other side)

// game ends (round ends?) and link to restart pops up.

//////////////////////////////////////////////
///////////////VARIABLES//////////////////////
//debug variable so I can see what is going on...
//change it to false when I'm done
var DEBUG = false;

	//get window width:
	var windowWidth = getWindowWidth();

//variables for the game setup
	var field; //elementNode
	//width and height
	var fieldWidth = 869;
	var fieldHeight = 504;
	//field positions
	//all will be positioned in relation to the field
	var fieldTop = 110;
	var fieldLeft = (windowWidth/2) - (fieldWidth/2);
	var fieldBottom = fieldTop + fieldHeight;		
	var fieldRight = fieldLeft + fieldWidth;		

	var fieldImage; //elementNode

	//paddles
	//width and height are the same for both paddles
	var paddleWidth = 36;
	var paddleHeight = 102;
	
	var paddleLeft; //elementNode	
	//starting position of the paddle
	var paddleLeftX = fieldLeft - paddleWidth;
	var paddleLeftY = fieldTop + (fieldHeight/2);

	
	var paddleRight; //elementNode
	//starting position of the paddle
	var paddleRightX = fieldRight;
	var paddleRightY = fieldTop + (fieldHeight/2);

	//for moving the paddle
	var paddleY;
	
	var paddleLeftInst; //instructions nodes
	var paddleRightInst;
	var thumbRightInst;
	var thumbLeftInst;
	

	//ball
	var ball; 
	var ballX = fieldLeft + 170;
	var ballY = fieldTop + 155;	
	var ballWidth = 38; 	
	var ballHeight = 74;	
	
	//how fast the ball moves
	var ballDistX = 1; 	//moves  left/right
	var ballDistY = 1; 	//moves  up/down
	//ballSpeed - smaller is faster
	var ballSpeed = 1;	//interval time is 100 ms
	var movingBall;		//settimeout for the ball
	var randomnumber; //random number for moving the ballY
	var stoppedBall = false;
	
	//container div for everything
	var container;

	//comments div for comments
	var commentsDiv;
	var comments; //the text node for the div

	var mouseY;
	
	var opponentOne;
	
	var score = 0;
	var addToScore = 1;
	var scoreArea;  //elementNode
	var scoreTxt;  //textNode
	 
	var scoreAreaWidth	= 300  	
	var scoreAreaHeight = 30;
	var startArea; 	//elementNode
	var playAgain;	//elementNode
	var sendScore;	//elementNode
	var scoreToSend; //elementNode
	
	var gameHasStarted = false;
	

//////////////////////////////////////////////
///////////////FUNCTIONS//////////////////////

//testing to make sure javascript works
addLoadEvent(testBrowser);  //in general.js

addLoadEvent(setupPong);  	//sets up the pong field with paddles and ball centered
//addLoadEvent(chooseBkg);

addLoadEvent(checkFieldLocation);

function chooseBkg() {
	//alert("we're ready to go in the imageGallery");
	var artlink = document.getElementsByTagName("img");
	//alert(artlink.length);
	for(var i=0; i < artlink.length; i++) {
	artlink[i].onclick = function(){
		changeBkg(this);  //i'm inside the a tag - this tag!
		return false; //don't do the usual href link
		}
	}
	var how2Play = document.getElementById("howtoLink");

	how2Play.onclick = function(){
		var howSource = this.getAttribute("href");
		fieldImage.setAttribute("src", howSource);
		return false; //don't do the usual href link
		}

}

function checkFieldLocation() {
	
	window.onresize = function() {
		var newWindowWidth = getWindowWidth();
		if( windowWidth != newWindowWidth)
		{
			windowWidth = newWindowWidth;
			adjustFieldLocation();
			//alert("window was adjusted");
		}
	}
}


function changeBkg(whichPic) {
//alert("we're ready to go inside show pic");

//gets the href value
//var source = whichPic.getAttribute("src");
var source = whichPic.parentNode.getAttribute("href");
//alert(source);
//assigns the src to the field bkg
//field = document.getElementById("pongField");
//alert (field.style.background);
//field.style.background = "#000000 url( "+ source + ") center no-repeat";

//changing the image src attribute instead of the background image of the field
fieldImage.setAttribute("src", source);

if (gameHasStarted) {
randomnumber=Math.floor(Math.random()*3);				
//shift it vertically
ballDistY += randomnumber;
addToScore ++;

}

// don't go to the link
return false;

}


function startTheGame() {
	gameHasStarted = true;
	//move start button out of the way
	startArea.style.top = -1000 + "px"; 
	
	paddleRightInst.style.display  =  "none";
	paddleLeftInst.style.display  =  "none";
	moveCompPaddle();
	document.onmousemove = movePaddle;
	moveBall();	
	//hitTheBall();
	//ball.onclick = stopBall;

	
}
function adjustFieldLocation() {
	
	fieldLeft = (windowWidth/2) - (fieldWidth/2);
	field.style.left = fieldLeft + "px"; 

	fieldRight = fieldLeft + fieldWidth;
	
	paddleLeftX = fieldLeft - paddleWidth;
	paddleRightX = fieldRight;
	


	startArea.style.left = (fieldLeft + fieldWidth/2 - 102 ) + "px";

	scoreArea.style.left = (fieldLeft) + "px"; 

	paddleLeft.style.left = paddleLeftX + "px";
	
	paddleRight.style.left = paddleRightX +  "px";


	//create an image for instructions
	paddleRightInst.style.left =  (paddleRightX + 5) +  "px";
	paddleLeftInst.style.left =  (paddleLeftX - 80) +  "px";
	thumbRightInst.style.left =  (paddleRightX + 5) +  "px";
	thumbLeftInst.style.left =  (paddleLeftX -60) +  "px";
	
	if(!gameHasStarted)
	{
	ballX = fieldLeft + 170;
	ball.style.left = (ballX - ballWidth/2) + "px";
	}

}

//begins to set up the field
function setupPong() {
	//preload bkg images
	//preloader();
	
	//alert("in setup");
	//alert ("height= " + fieldHeight);
	field = document.createElement("div");
	field.setAttribute("id","pongField");
	//set current position of field	
	//this will be use to keep the ball inside the field
	field.style.top = fieldTop + "px"; 	
	field.style.left = fieldLeft + "px"; 
	field.style.width = fieldWidth	+ "px";  	
	field.style.height = fieldHeight + "px"; 
	
	fieldBottom = fieldTop + fieldHeight;		
	fieldRight = fieldLeft + fieldWidth;
	field.style.background = "url(images/pong_frame.jpg) top center no-repeat";
	
	//create an image inside the field div
	fieldImage = document.createElement("img");
	fieldImage.setAttribute("id","fieldImage");
	fieldImage.setAttribute("width","704");
	fieldImage.setAttribute("height","350");
	fieldImage.setAttribute("src","images/pong_instructions.jpg");
	fieldImage.style.marginTop  = "75px";
	fieldImage.style.marginright = "37px";
	fieldImage.style.background = "#c3c3c3";
	
	
	//setup the start button area
	startArea = document.getElementById("startArea");
	
	//position of hte start button area
	startArea.style.top = (fieldTop + 350) + "px";
	startArea.style.left = (fieldLeft + fieldWidth/2 - 102 ) + "px";
	
	scoreArea = document.createElement("div");
	scoreArea.setAttribute("id","scoreArea");
	//set current position of the score area
	scoreArea.style.position = "absolute";
	scoreArea.style.textAlign = "right";
	//position of the score area
	scoreArea.style.left = (fieldLeft) + "px"; 
	scoreArea.style.top = (fieldTop - 35) + "px"; 
	
	scoreArea.style.width = (fieldWidth - 20)	+ "px";  	
	scoreArea.style.height = scoreAreaHeight + "px"; 
	
	scoreTxt = document.createTextNode("SCORE: " + score);
	
	//alert("fieldTop = " + field.style.top);	
	//alert("fieldLeft = " + field.style.left);
	//alert("fieldBottom = " + fieldBottom);
	//alert("fieldRight = " + fieldRight);
	
		
	//creates left paddle as div
	paddleLeft = document.createElement("div");
	paddleLeft.setAttribute("id","paddleLeft");
	addClass(paddleLeft, "paddle"); 					//paddle shape
	addClass(paddleLeft, "red"); 						//paddle color
	paddleLeft.style.width = paddleWidth + "px";
	paddleLeft.style.height = paddleHeight + "px";

	//creates right paddle as div
	paddleRight = document.createElement("div");
	paddleRight.setAttribute("id","paddleRight");
	addClass(paddleRight, "paddle"); 					//paddle shape
	addClass(paddleRight, "blue"); 						//paddle color
	paddleRight.style.width = paddleWidth + "px";
	paddleRight.style.height = paddleHeight + "px";

	//create the ball
	ball = document.createElement("div");
	ball.setAttribute("id","ball");
	ball.style.width = ballWidth + "px";
	ball.style.height = ballHeight + "px";	
	
	//position the ball
	ball.style.top = (ballY - ballHeight/2) + "px";
	ball.style.left = (ballX - ballWidth/2) + "px";
	
	//alert("ball.style.top = " + ball.style.top);
	//alert("ball.style.left = " + ball.style.left);
	//alert("ball.style.width = " + ball.style.width);
	//alert("ball.style.height = " + ball.style.height);

	//positions the paddles
	//adding the position to the css style with "px"
	//in CSS position is already absolute
	paddleLeft.style.top = (paddleLeftY - paddleHeight/2) + "px";
	paddleLeft.style.left = paddleLeftX + "px";
	
	paddleRight.style.top = (paddleRightY - paddleHeight/2)  + "px";
	paddleRight.style.left = paddleRightX +  "px";


	//create an image for instructions
	paddleRightInst = document.createElement("img");
	paddleRightInst.setAttribute("id","paddleRightInst");
	paddleRightInst.setAttribute("width","99");
	paddleRightInst.setAttribute("height","46");
	paddleRightInst.setAttribute("src","images/pong_yourpaddle.png");
	paddleRightInst.style.position  =  "absolute";
	paddleRightInst.style.top  =  (paddleRightY + 60) +  "px";
	paddleRightInst.style.left =  (paddleRightX + 5) +  "px";
	
	paddleLeftInst = document.createElement("img");
	paddleLeftInst.setAttribute("id","paddleLeftInst");
	paddleLeftInst.setAttribute("width","110");
	paddleLeftInst.setAttribute("height","46");
	paddleLeftInst.setAttribute("src","images/pong_comppaddle.png");
	paddleLeftInst.style.position  =  "absolute";
	paddleLeftInst.style.top  =  (paddleLeftY + 60) +  "px";
	paddleLeftInst.style.left =  (paddleLeftX - 80) +  "px";
	
	
	thumbRightInst = document.createElement("img");
	thumbRightInst.setAttribute("id","thumbRightInst");
	thumbRightInst.setAttribute("width","87");
	thumbRightInst.setAttribute("height","50");
	thumbRightInst.setAttribute("src","images/pong_thumb_right.png");
	thumbRightInst.style.position  =  "absolute";
	thumbRightInst.style.top  =  (paddleRightY + 330) +  "px";
	thumbRightInst.style.left =  (paddleRightX + 5) +  "px";
	
	thumbLeftInst = document.createElement("img");
	thumbLeftInst.setAttribute("id","thumbLeftInst");
	thumbLeftInst.setAttribute("width","87");
	thumbLeftInst.setAttribute("height","50");
	thumbLeftInst.setAttribute("src","images/pong_thumb_left.png");
	thumbLeftInst.style.position  =  "absolute";
	thumbLeftInst.style.top  =  (paddleLeftY + 270) +  "px";
	thumbLeftInst.style.left =  (paddleLeftX -60) +  "px";

	
	//alert (paddleLeft.style.top + paddleLeftY);
	//alert("field.style.left = " + field.style.left);
	//alert ("paddleLeft.style.left = " + paddleLeft.style.left);
	//alert (paddleRight.style.top + paddleRightY);
	//alert (paddleRight.style.left + paddleRightX);
	//use appendChild to add a textnode into an element node
	
	//get the container div to put everything in
	container = document.getElementById("container");
	//alert(container);

	//setup the comments div
	commentsDiv = document.createElement("p");
	commentsDiv.setAttribute("id","comments");
	//commentsDiv.style.width = "200 px";
	//commentsDiv.style.height = "100 px";
	//commentsDiv.style.left = "0 px";
	//commentsDiv.style.top = "1000 px";
	//add in a comment
	//comments = document.createTextNode("Choose a Background Below:");
	//commentsDiv.appendChild(comments);
	//alert(commentsDiv);
	//alert(comments);
	
	//add the divs to the container
	container.appendChild(field);
	field.appendChild(fieldImage);
	container.appendChild(paddleLeft);
	container.appendChild(paddleRight);
	container.appendChild(ball);
	scoreArea.appendChild(scoreTxt);
	container.appendChild(scoreArea);
	//container.appendChild(commentsDiv);
	insertAfter(paddleRightInst, container);
	insertAfter(paddleLeftInst, container);
	insertAfter(thumbRightInst, container);
	insertAfter(thumbLeftInst, container);

	//container.insertBefore(paddleLeft, field);
	//insertAfter(paddleRight, field);
	//field.appendChild(ball);
	
	//start the game by letting the user move the paddles and ball
	//paddleLeft.onmousedown = movePaddles;
	opponentOne = paddleRight;
	opponentComp = paddleLeft;
	compPaddleY = paddleLeftY;
	
	//check which paddle it is moving
	if (opponentOne == paddleRight);
	{
	//alert("opponentOne == paddleRight");
	paddleY = paddleRightY;
	}
	if (opponentOne == paddleLeft);
	{
	//alert("opponentOne == paddleRight");
	paddleY = paddleLeftY;
	}
	chooseBkg();
	
	start_button = document.getElementById("start");
	start_button.onclick = startTheGame;
}

function moveBall() {

	//alert ("in moveBall");
	//move the ball's position;
	if (stoppedBall) {
		clearTimeout(movingBall);
	}
	else {
		
	ballX += ballDistX;
	ballY += ballDistY;
	
	//set the positions in the style
	ball.style.top = (ballY - ballHeight/2) + "px";
	ball.style.left = (ballX - ballWidth/2) + "px";
	
	//if the ball's X position goes outside of the field
	//left hand side
	if (ballX < (fieldLeft + ballWidth/2)) {
		//change the direction of the distance it moves (from left to right and vice versa)
		ballDistX = -ballDistX;
		
		
	}
	
	//right hand side
	if (ballX > (fieldRight - ballWidth/2)) {
	//change the direction of the distance it moves (from left to right and vice versa)
	ballDistX = -ballDistX;
	hitTheBall();
	
	
		
	}
	
	//if the ball's Y position goes outside of the field
	if ((ballY < fieldTop + ballHeight/2) || (ballY > fieldBottom - ballHeight/2)) {
		//change the direction of the distance it moves (from up to down, vice-versa)
		ballDistY = -ballDistY;
	}
	
	movingBall = setTimeout("moveBall()", ballSpeed);
	
	}
}
	
function stopBall () {

	
	ballDistY = 0;
	ballDistX = 0;
	clearTimeout(movingBall);

	
}	

function endGame () {
	//alert("ball is stopped");

	comments = "Congratulations! Your score is " + score + ".";
	playAgain = document.getElementById("playAgain");
	playAgain.style.top = (fieldTop + fieldHeight/2 - 100) + "px";
	playAgain.style.left = (fieldLeft + fieldWidth/2 - 300) + "px";
	
	//sendScore = document.getElementById("sendScore");
	//sendScore.style.top = (fieldTop + fieldHeight -200) + "px";
	//sendScore.style.left = (fieldLeft + fieldWidth/2 - 250) + "px";
	
	scoreToSend = document.getElementById("scoreToSend");
	scoreToSend.setAttribute("value", score);
	//scoreToSend.value = score;
	//alert(scoreToSend.value);

	//commentsDiv.firstChild.nodeValue = comments;
	stoppedBall = true;
	gameHasStarted = false;
	
}

function moveCompPaddle () {

	compPaddleY = ballY;
	opponentComp.style.top = (compPaddleY - paddleHeight/2) + "px";
	movingCompPaddle = setTimeout("moveCompPaddle()", ballSpeed*2);
}


function hitTheBall() {
	//when the ball and the paddle are at the same spot - Y
	
	//if ((ballX < fieldLeft + ballWidth/2) || (ballX > fieldRight - ballWidth/2)) {
		if ( (ballY >= parseInt(opponentOne.style.top)) && (ballY <= (parseInt(opponentOne.style.top) + paddleHeight)) ) {
			//the player gets a point
			score += addToScore;
			//speed up the ball
			ballDistX --;

		
			//changes how the ball moves vertically
			//http://www.javascriptkit.com/javatutors/randomnum.shtml
			if (score >0) {
				randomnumber=Math.floor(Math.random()*4);
			}
			
			if (score  > 10){
				randomnumber=Math.floor(Math.random()*11);				
			}
			
			if (score  > 15){
				randomnumber=Math.floor(Math.random()*25);				
			}
			//shift it vertically
			ballDistY += randomnumber;
			//comments =  " Paddlebottom = " + (parseInt(opponentOne.style.top) + paddleHeight) + " Paddletop = " + parseInt(opponentOne.style.top) + "BallY is " + ballY;
			//commentsDiv.firstChild.nodeValue = comments;
	
		}
		else {
			stopBall();
			endGame();
			//score --;
			
			//comments =  " Paddlebottom = " + (paddleRightY + paddleHeight/2) + " Paddletop = " + (paddleRightY - paddleHeight/2) + "BallY is " + ballY;
			//commentsDiv.firstChild.nodeValue = comments;
		}
	//}	
	scoreArea.firstChild.nodeValue = "SCORE: " + score;
}


function movePaddle (e) {
	//alert ("in movePaddles");
	//paddleLeft.onmousemove = getMouseY;
	//line below is from Kor at http://www.webdeveloper.com/forum/showthread.php?t=142372
	var e=(!e)?window.event:e;//IE:Moz

	mouseY = e.clientY;
	//add in a comment
	//comments = document.createTextNode("MouseY is " + mouseY);
	//commentsDiv.appendChild(comments);

	
	//comments = "MouseY is " + mouseY + " and PaddleY = " + paddleY + "BallX is " + ballX;
	//commentsDiv.firstChild.nodeValue = comments;
	//alert(" in mouseY = " + mouseY + "paddleLeftY = " + paddleLeftY);
	
	//if the paddle is above the bottom part of field AND the mouse is beloe the paddle's middle
	if ((paddleY > (fieldTop + paddleHeight/2)) && (mouseY < paddleY)) {
		// move the paddle
		//paddleLeftY --;
		if(mouseY > (fieldTop + paddleHeight/2)){
		paddleY = mouseY;}
		else {
		paddleY = fieldTop + paddleHeight/2;
		}
		//alert("mouseY = " + mouseY + "paddleLeftY = " + paddleLeftY);
		//adding the position to the css style with "px"
		opponentOne.style.top = (paddleY - paddleHeight/2) + "px";
		//alert("mouseY = " + mouseY + "paddleLeft.style.top = " + paddleLeft.style.top);
	}	
	
	if ((paddleY < (fieldBottom - paddleHeight/2)) && (mouseY > paddleY)) {
		// move the paddle
		//paddleLeftY ++;
		if(mouseY < (fieldBottom - paddleHeight/2)){
		paddleY = mouseY;}
		else {
		paddleY = fieldBottom - paddleHeight/2;
		}
		
		//adding the position to the css style with "px"
		opponentOne.style.top = (paddleY - paddleHeight/2) + "px";
		//alert("mouseY = " + mouseY + "paddleLeft.style.top = " + paddleLeft.style.top);
	}
	
}

function getMouseY (e) {
	//alert("in getMouseY");
	//the mouse coordinates
	//var mouseposX = event.clientX;
	//line below is from Kor at http://www.webdeveloper.com/forum/showthread.php?t=142372
	var e=(!e)?window.event:e;//IE:Moz

	mouseY = e.clientY;
	//return mousePosY;
	//alert(mouseposY);


}

//this function tests if the browser can use javascript
function testBrowser() {
	
	//alert("in test browser");

	
	if (!document.getElementsByTagName) {
	alert("woah - tagname");
	return false; //stop if the browser doesn't understand getElementByTagName
	}
	
	if (!document.getElementById) {
	alert("woah!  id");
	return false;//stop if the browser doesn't understand getElementById
	}
	
	//if everything works
	if (DEBUG) {
		alert("all good in testBrowser");
	}


}