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

		var image02 = new Image();
		image02.src = './sub/images/about/about1.jpg';
		imageArray[imageArray.length] = image02;

		var image03 = new Image();
		image03.src = './sub/images/about/about2.jpg';
		imageArray[imageArray.length] = image03;

		var image04 = new Image();
		image04.src = './sub/images/about/about3.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;
					}
				}
			});
		}