thisImg=1;
function rotate(){
	if (document.getElementById) {
		var image1 = $('image1');
		var image2 = $('image2');		
		var text1 = $('text1');
		var text2 = $('text2');

		var trophyMask = $('trophyImageMask');
		//var minWidth = trophyMask.offsetWidth;
		//var minHeight = trophyMask.offsetHeight;

		var textMask = $('trophyTextMask');

		// Safari seems to create all images with a document-base level .src, and a .complete of "true".  
		// So we'll need to create a blank image, and if our images are the same as it, we'll consider that "incomplete"
		var blankImage = new Image();

		if (image1 && image2) {
			// make sure the next image has been preloaded before proceeding (or if it's the first one, just proceed)
			if (!rotatingImageArray[thisImg].complete && thisImg != 0) {
				// it's not ready, so set up to check again in a second, and jump out
				setTimeout("rotate()", 1000);			
				return;
			}

			if (image1.style.zIndex > image2.style.zIndex) {
				// fade out the image
				if (image1.fadeFx) {
					image1.fadeFx.stop();
				}
				image1.fadeFx = new Fx.Style(image1.id, 'opacity', {duration: 2000, transition: Fx.Transitions.quintOut, onComplete: swapDataSets});
				image1.fadeFx.custom(1,0.001);

				// fade out the text
				if (text1.fadeFx) {
					text1.fadeFx.stop();
				}
				text1.fadeFx = new Fx.Style(text1.id, 'opacity', {duration: 2000, transition: Fx.Transitions.quintOut});
				text1.fadeFx.custom(1,0.001);
	
				// change the src of the image in the back
				image2.src = rotatingImageArray[thisImg].src;
				image2.width = rotatingImageData[thisImg]['width'];
				image2.height = rotatingImageData[thisImg]['height'];
				//image2.width = rotatingImageData[thisImg]['width'] >= minWidth ? rotatingImageData[thisImg]['width'] : minWidth;
				//image2.height = rotatingImageData[thisImg]['height'] >= minHeight ? rotatingImageData[thisImg]['height'] : minHeight;

				// change the text contents, but keep it hidden
				text2.innerHTML = rotatingImageData[thisImg]['description'];
				text2.fadeFx = new Fx.Style(text2.id, 'opacity');
				text2.fadeFx.set(0);

				// fade in the text
				if (text2.fadeFx) {
					text2.fadeFx.stop();
				}				
				text2.fadeFx = new Fx.Style(text2.id, 'opacity', {duration: 2000, transition: Fx.Transitions.quintOut});
				text2.fadeFx.custom(0,1);

				// adjust the text box size
				if (textMask.heightFx) {
					textMask.heightFx.stop();
				}
				textMask.heightFx = new Fx.Style(textMask.id, 'height', {duration: 2000, transition: Fx.Transitions.quintOut});
				textMask.heightFx.custom(textMask.offsetHeight, text2.offsetHeight);
			}
			else {
				// fade out the image that's in front 
				if (image2.fadeFx) {
					image2.fadeFx.stop();
				}
				image2.fadeFx = new Fx.Style(image2.id, 'opacity', {duration: 2000, transition: Fx.Transitions.quintOut, onComplete: swapDataSets});
				image2.fadeFx.custom(1,0.001);

				// fade out the text too
				if (text2.fadeFx) {
					text2.fadeFx.stop();
				}
				text2.fadeFx = new Fx.Style(text2.id, 'opacity', {duration: 2000, transition: Fx.Transitions.quintOut});
				text2.fadeFx.custom(1,0.001);

				// set the source of the image in the back
				image1.src = rotatingImageArray[thisImg].src;
				image1.width = rotatingImageData[thisImg]['width'];
				image1.height = rotatingImageData[thisImg]['height'];
				//image1.width = rotatingImageData[thisImg]['width'] >= minWidth ? rotatingImageData[thisImg]['width'] : minWidth;
				//image1.height = rotatingImageData[thisImg]['height'] >= minHeight ? rotatingImageData[thisImg]['height'] : minHeight;

				// change the text contents
				text1.innerHTML = rotatingImageData[thisImg]['description'];
				text1.fadeFx = new Fx.Style(text1.id, 'opacity');
				text1.fadeFx.set(0);

				// fade in the text				
				if (text1.fadeFx) {
					text1.fadeFx.stop();
				}
				text1.fadeFx = new Fx.Style(text1.id, 'opacity', {duration: 2000, transition: Fx.Transitions.quintOut});
				text1.fadeFx.set(0);
				text1.fadeFx.custom(0,1);

				// adjust the text box size
				if (textMask.heightFx) {
					textMask.heightFx.stop();
				}
				textMask.heightFx = new Fx.Style(textMask.id, 'height', {duration: 2000, transition: Fx.Transitions.quintOut});
				textMask.heightFx.custom(textMask.offsetHeight, text1.offsetHeight);

			}

			// setup for the next iteration
			thisImg++;
			// reset the index if we're past our array length
			if (thisImg >= rotatingImageArray.length) {
				thisImg = 0;
			}
			setTimeout("rotate()", 6*1000);
		}
	}
}


function swapDataSets() {

	var image1 = $('image1');
	var image2 = $('image2');
	var text1 = $('text1');
	var text2 = $('text2');

	image1.style.zIndex = (image1.style.zIndex == 2 ? 1 : 2);
	image2.style.zIndex = (image2.style.zIndex == 2 ? 1 : 2);

	text1.style.zIndex = (text1.style.zIndex == 2 ? 1 : 2);
	text2.style.zIndex = (text2.style.zIndex == 2 ? 1 : 2);

	// and now, make sure the opacity is set to SHOW whichever one is in back
	var theBackImage = (image1.style.zIndex == 1 ? image1 : image2);
	theBackImage.fadeFx = new Fx.Style(theBackImage.id, 'opacity');
	theBackImage.fadeFx.set(1);
	var theBackText = (text1.style.zIndex == 1 ? text1 : text2);
	theBackText.fadeFx = new Fx.Style(theBackText.id, 'opacity');
	theBackText.fadeFx.set(0);
	
}


function initializeTextHeight() {
	var text1 = $('text1');
	var textMask = $('trophyTextMask');
	textMask.style.height = text1.offsetHeight + "px";
}