var bannerTimeout = null;
var bannerElements = $$("div.image_gallery div");
var bannerCaptions = $$("div.image_gallery span");
var bannerElementsCount = bannerElements.length;
var bannerCounter = 0;
var firstCall = true;

function initialize_fade() {
	for (j=bannerCounter;j<bannerElementsCount;j++) {
		// FADE OUT ALL ELEMENTS
		Effect.Fade(bannerElements[j], {duration: 0});
		Effect.Fade(bannerCaptions[j], {duration: 0});
	}
	initializeFadeTimeout = window.setTimeout("initialize_visible()", 250);
}

function initialize_visible() {
	for (j=bannerCounter;j<bannerElementsCount;j++) {
		// MAKE ALL ELEMENTS VISIBLE (EVEN THOUGH THEY ARE FADED OUT)
		bannerElements[j].setStyle({
		  visibility: 'visible'
		});
		bannerCaptions[j].setStyle({
		  visibility: 'visible'
		});
	}
	initializeVisibleTimeout = window.setTimeout("rotateBanner()", 250);
}

function rotateBanner() {
	for (i=bannerCounter;i<bannerElementsCount;i++) {
		// FADE CURRENT ELEMENT OUT
		if(!firstCall)
		{
			Effect.Fade(bannerElements[i]);
			Effect.Fade(bannerCaptions[i]);
		
			if (i+1 == bannerElementsCount)
				bannerCounter = 0;
			else
				bannerCounter = i + 1;
		}
		
		// FADE NEXT ELEMENT IN
		Effect.Appear(bannerElements[bannerCounter]);
		Effect.Appear(bannerCaptions[bannerCounter]);
		
		bannerTimeout = window.setTimeout("rotateBanner()", 5000);
		firstCall = false;
		break;
	}
}

window.onload = function() {
	initialize_fade();
}