///////////////////////////////////////////////////////////////////////////////////////
// Start moving boxes.

function init()
{
	slideDown("squareGreen");
	slideRight("squareBlue");
	slideUp("squareRed");
	slideLeft("squareYellow");
}

////////////////////////////////////////////////////////////////////////////////////////
// @param p_strId1 (parameter_String ID)is the "id" of the HTML element that we want to slide.
function slideLeft(p_strId1) 
{
	// If the "getLeft()" for this object, is greater than 70, then we want to do something.
	//	But if it's not, then nothing gets done, and the recursive function ends.
	//	Recursion explained: "Damn. Damn Damn. Damn Damn Damn. Damn Damn Damn Damn..."   You get the idea.
	if(getLeft( p_strId1 ) > 60) 
	
	{
		//Set the new left, via the "setLeft()" function.
		//This function expects two things. The "ID" of the HTML element we want to move to the right, along the x axis, and the new 'x axis' position for this element.
		setLeft( p_strId1, getLeft(p_strId1) + -1);
	
		//Run a "setTimeout()" so that this function will call itself again, after a given period of time. (30).
		//This causes the function to be 'recursive', because it keeps calling itself over and over.
		//But, because of the "if" statement, it will only execute the call to itself, IF the current left for the object, is under 30.
		//This basically forces the function to act like a loop. The advantage is that is has a timer, rather then just continually executing.
		setTimeout("slideLeft('"+ p_strId1 +"')",30);
	}
}
////////////////////////////////////////////////////////////////////////////////////////
// @param p_strId1 (parameter_String ID)is the "id" of the HTML element that we want to slide.
function slideUp(p_strId1) 
{
	// If the "getTop()" for this object, is greater than 70, then we want to do something.
	//	But if it's not, then nothing gets done, and the recursive function ends.
	//	Recursion explained: "Damn. Damn Damn. Damn Damn Damn. Damn Damn Damn Damn..."   You get the idea.
	if(getTop( p_strId1 ) > 60) 
	
	{
		//Set the new left, via the "setLeft()" function.
		//This function expects two things. The "ID" of the HTML element we want to move to the right, along the x axis, and the new 'x axis' position for this element.
		setTop( p_strId1, getTop(p_strId1) + -1);
	
		//Run a "setTimeout()" so that this function will call itself again, after a given period of time. (30).
		//This causes the function to be 'recursive', because it keeps calling itself over and over.
		//But, because of the "if" statement, it will only execute the call to itself, IF the current left for the object, is under 30.
		//This basically forces the function to act like a loop. The advantage is that is has a timer, rather then just continually executing.
		setTimeout("slideUp('"+ p_strId1 +"')",30);
	}
}
////////////////////////////////////////////////////////////////////////////////////////
// @param p_strId1 (parameter_String ID)is the "id" of the HTML element that we want to slide.
function slideDown(p_strId1) 
{
	// If the "getTop()" for this object, is less than 30, then we want to do something.
	//	But if it's not, then nothing gets done, and the recursive function ends.
	//	Recursion explained: "Damn. Damn Damn. Damn Damn Damn. Damn Damn Damn Damn..."   You get the idea.
	if(getTop( p_strId1 ) < 40) 
	
	{
		//Set the new left, via the "setTop()" function.
		//This function expects two things. The "ID" of the HTML element we want to move to the right, along the x axis, and the new 'x axis' position for this element.
		setTop( p_strId1, getTop(p_strId1) + 1);
	
		//Run a "setTimeout()" so that this function will call itself again, after a given period of time. (30).
		//This causes the function to be 'recursive', because it keeps calling itself over and over.
		//But, because of the "if" statement, it will only execute the call to itself, IF the current left for the object, is under 30.
		//This basically forces the function to act like a loop. The advantage is that is has a timer, rather then just continually executing.
		setTimeout("slideDown('"+ p_strId1 +"')",30);
	}
}
////////////////////////////////////////////////////////////////////////////////////////
// @param p_strId1 (parameter_String ID)is the "id" of the HTML element that we want to slide.
function slideRight(p_strId1) 
{
	// If the "getLeft()" for this object, is less than 30, then we want to do something.
	//	But if it's not, then nothing gets done, and the recursive function ends.
	//	Recursion explained: "Damn. Damn Damn. Damn Damn Damn. Damn Damn Damn Damn..."   You get the idea.
	if(getLeft( p_strId1 ) < 40) 
	
	{
		//Set the new left, via the "setLeft()" function.
		//This function expects two things. The "ID" of the HTML element we want to move to the right, along the x axis, and the new 'x axis' position for this element.
		setLeft( p_strId1, getLeft(p_strId1) + 1);
	
		//Run a "setTimeout()" so that this function will call itself again, after a given period of time. (30).
		//This causes the function to be 'recursive', because it keeps calling itself over and over.
		//But, because of the "if" statement, it will only execute the call to itself, IF the current left for the object, is under 30.
		//This basically forces the function to act like a loop. The advantage is that is has a timer, rather then just continually executing.
		setTimeout("slideRight('"+ p_strId1 +"')",30);
	}
}

////////////////////////////////////////////////////////////////////////////////////////
// @param p_strId (parameter_String ID) is the "id" of the HTML element we want to move.
// @param p_iX (parameter_Int X) is the new "x axis" position of the element we want to move.
function setLeft( p_strId, p_iX )
{
	//Get the object, then set it's "style.left" to the new X axis location, as a percent.
	//	So, if p_iX == 10, then the object will be at the CSS equivalent postion of "left:10%;"
	getObject(p_strId).style.left = p_iX +"%";
}

////////////////////////////////////////////////////////////////////////////////////////
// @param p_strId (parameter_String ID) is the "id" of the HTML element we want to move.
// @param p_iY (parameter_Int Y) is the new "y axis" position of the element we want to move.
function setTop( p_strId, p_iY )
{
	//Get the object, using the helper function, then set it's "style.top" to the new Y axis position, as a percent.
	getObject(p_strId).style.top  = p_iY +"%";
}

////////////////////////////////////////////////////////////////////////////////////////
// @param pstrId (parameter_String ID) is the "id" of the HTML element we want to get the "x" position of.
function getLeft( p_strId )
{
	//Return the current left position of the "id", using the helper method. 
	//Also, parse it as an int before returning it.
	return parseInt(getObject(p_strId).style.left);
}

////////////////////////////////////////////////////////////////////////////////////////
// @param pstrId (parameter_String ID) is the "id" of the HTML element we want to get the "y" position of.
function getTop( p_strId )
{
	//Return the current top position of the "id", using the helper method. 
	//Also, parse it as an int before returning it.
	return parseInt(getObject(p_strId).style.top);
}

/////////////////////////////////////////////////////////////////////////////////////////
// Helper function used by the "set" functions.
// This function gets returns an object that defines the tag you want, based on which browser you're using.
// @param p_strld is the "id" of the HTML element we're targetting.
// This is something legible is the browser doesn't support the scripting.
function getObject( p_strId )
{
	//Decide which browser to use, and if the user's browser supports this..
	if(document.all)
	{
			return document.all[ p_strId ];
			//Yay.. You have (I think) IE.. Return the right document Object Model object!
	}
	else if(document.getElementById)
	{
		return document.getElementById( p_strId );
		//Your browser was supported. (I can't remember if this is for IE or netscape though.. I think netscape.)
	}
	else
	{
		alert("Your browser is not supported.")
;
		//Get a new browser.
	}
}

//////////////////////////////////////////////////////////////////////////////////////////////
// End of box moving.