// JavaScript Document
// this array consists of the id attributes of the divs we wish to alternate between
// the function that performs the fade
var imgnum = 0;
var bgnum = 0;
// the number of milliseconds between swaps.  Default is five seconds.
var wait = 5000;
var divs_to_fade = new Array();
var fade_images = new Array();

function swapFade() {
	bgnum = imgnum+1;
	if (bgnum == divs_to_fade.length) bgnum = 0;
	//$('console').innerHTML = bgnum + ': ' + fade_images[bgnum];
	$('image-fader').style.background = "url(" + fade_images[bgnum] + ")";
	new Effect.Fade(divs_to_fade[imgnum], { duration:1.0, from:1.0, to:0.0 });
	imgnum++;
	if (imgnum == divs_to_fade.length) imgnum = 0;
	new Effect.Appear(divs_to_fade[imgnum], { duration:.5, from:0.0, to:1.0});
}

// the onload event handler that starts the fading.
function startFade() {
	boxes = $('image-fader').immediateDescendants();
	d = 0;
	for(d=0; d < boxes.length; d++) {
		divs_to_fade[d] = boxes[d].id;
		var tmp_imgs = boxes[d].getElementsBySelector('img');
		fade_images[d] = tmp_imgs[0].src;
		//$('console').innerHTML = d + ': ' + fade_images[d];
	}
	// the starting index in the above array.  It should be set to the value of the div 
	// which doesn't have the CSS Display property set to "none"
	setInterval('swapFade()',wait);
}
if (window.addEventListener) //DOM method for binding an event
	window.addEventListener("load", startFade, false)
else if (window.attachEvent) //IE exclusive method for binding an event
	window.attachEvent("onload", startFade)
else if (document.getElementById) //support older modern browsers
	window.onload=startFade