var bannerTimeout = null;
var bannerElements = $$("div#image_gallery div");
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});
	}
	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'
		});
	}
	initializeVisibleTimeout = window.setTimeout("rotateBanner()", 250);
}

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

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