//preload the images and load them into an array
imageArray = new Array(); 
		
var image01 = new Image();
image01.src = 'img/bg1.jpg';
imageArray[imageArray.length] = image01;

var image02 = new Image();
image02.src = 'img/bg2.jpg';
imageArray[imageArray.length] = image02;

var image03 = new Image();
image03.src = 'img/bg3.jpg';
imageArray[imageArray.length] = image03;

var image04 = new Image();
image04.src = 'img/bg4.jpg';
imageArray[imageArray.length] = image04;
		
// imageIndex is going to be the index of the next image to display.  
// images 0 and 1 are already loaded into the html
var imageIndex = 1;

function switchImage() {
	// place the next image to be displayed to the front
	$('imageFront').src = imageArray[imageIndex].src;

	// make the image in front appear, when it is done swap it with the image in the back
	new Effect.Appear('imageFront', {
		afterFinish: function() { 
			// make the image in the back the same src as the image in the front
			$('imageBehind').src = $('imageFront').src;
			
			//hide the image in the front
			$('imageFront').style.display = 'none';
				
			// increment the index
			imageIndex++;
			// if we have indexed past the end of the array, go back to zero
			if (imageIndex == imageArray.length) { 
				imageIndex = 0;
			}
		}
	});
}