var ground = 300; //where the ball stops/bounces
var apex = 10; //the highest point of ball bounce
var startYPos = 0; //starting point of the ball
var currentYPos = startYPos; //declaring and assigning a variable that keeps track of the current Y psosition of the ball
var startXPos = 0; //starting X point of the ball
var currentXPos = startXPos; //declaring and ssigning a variable that keeps track of the current X

var Yspeed = 10; //speed the ball moves in Y
var Xspeed = .5; //speed the ball moves in X
var direction = 1; //direction ball is moving in, initialized to moving in apositive (down) direction)

function bounceBall()	{
	var ball = document.getElementById("ball"); //reference to the ball object
	
	if (apex >= ground) {
		msg("stop")
		clearInterval(intervalID);
	} else if ((currentYPos <= apex) && (direction <0))  { //test to see if the ball has hit the 
		direction *= -1; //change direction
		apex += Yspeed;
	} else if ((currentYPos >= ground) && (direction > 0 )) {
		direction *= -1;
	} else {
		
		currentYPos += Yspeed * direction; //calculate the balls's next Y position
		currentXPos += Xspeed;
		
		ball.style.top = currentYPos + "px"; //assign the balls's next position
		ball.style.left = currentXPos + "px"; //assign the balls's next position
	
	}
	
}//end bounceBall()

var intervalID = setInterval("bounceBall()", 50); //execute the function bounceBall() every 100ms


function msg(useString) {
	var textNode = document.createTextNode(useString);
	var breakNode = document.createElement("br");
	var messages = document.getElementById("messages");
	messages.appendChild(textNode);
	messages.appendChild(breakNode);
}