var ID = "imageRotate"; //id of the span or div in the HTML
var POS = 0; //position of the item to display in the IMAGEARRAY
var firstCase = true; //is this the first image being loaded
var IMAGEARRAY = new Array('commerce_bank.jpg','commerce_bank_2.jpg','commerce_bank_ina_lacholla.jpg', 'commerce_bank_campbell.jpg');
var IMAGEARRAYLENGTH = IMAGEARRAY.length - 1; //Length of array in terms of array positioning
var timerID = 0;

function rotateImage()
{	
	//This can be removed this is only optional
	//If this is the first time the code is loaded we will randomly start the 
	//image rotation with a random image in the array. If this section is omitted
	//the images will just be displayed in the order they appear in the IMAGEARRAY
	if(firstCase)
	{
		POS = randomStart();
		firstCase = false;
	}
	//**************************************************//
	//**************************************************//
	
	document.getElementById(ID).innerHTML = generateImageString(IMAGEARRAY[POS]);
	
	if(POS == IMAGEARRAYLENGTH)
		POS = 0;
	else
		POS++;

	timerID = setTimeout("rotateImage()",5000);
}

function generateImageString(imageName)
{
	var imageString = '';
	imageString +='<img src="img\/';
	imageString += imageName;
	imageString += '" class="bordered" alt="Commerce Bank">';
	return imageString;
}//end function generateImageString

function randomStart()
{
	if(IMAGEARRAYLENGTH == null || IMAGEARRAYLENGTH == 0)
		return 0;
	
	//generate the random number	
	var randomnumber = Math.floor(Math.random()*(IMAGEARRAYLENGTH + 1));
	
	//additional validation that the number is a valid array position
	if(randomnumber >= 0 && randomnumber <= IMAGEARRAYLENGTH)
		return randomnumber;
	else 
		return 0;
}

function stopRotateImage(){
	clearTimeout ( timerID );
}

function startRotateImage(){
	timerID = setTimeout("rotateImage()",5000);
}