// JavaScript Document

	setInterval( "moveIt()", 100 );

var headingRight;
var headingDown;

setInterval( "moveIt()", 100 );

// Initializes the variables
function setUp()
{
	headingRight = true;
	headingDown = false;
	moveIt();	
}


function moveIt()
{
	
    // Target the circle
	var theCircle = document.getElementById("circle");
    // Fetches the left position and turns it into a number
	var left = parseInt(theCircle.style.left);
	
    // The circle is heading to the right
	if (headingRight)
	{
        // Increment the left position
        left = left + 10;
        // Test the left position
		if (left >= 565)
		{
			headingRight = false;	
		}
		
	}
	
    // The circle is heading to the left
	if (!headingRight)
	{
        // Decrement the left position
        left = left - 10;
        // Test the left position
		if (left <= 205)
		{
			headingRight = true;
		}
	}
	
    // Turn the new left position into a string and give it back to the circle
	theCircle.style.left = left + "px";	
	
	var top = parseInt(theCircle.style.top);
	
    // The circle is heading to the bottom
	if (headingDown)
	{
        // Increment the bottom position
        top = top + 10;
        // Test the bottom position
		if (top >= 465)
		{
			headingDown = false;	
		}
		
	}
	
    // The circle is heading to the top
	if (!headingDown)
	{
        // Decrement the top position
        top = top - 10;
        // Test the top position
		if (top <= 205)
		{
			headingDown = true;
		}
	}
	
    // Turn the new top position into a string and give it back to the circle
	theCircle.style.top = top + "px";	
}