var delay = 4000;
var images = []; 
var last_image;
var current_image = 0;
var fadeInterval;

Event.observe(window, 'load', function() {
	last_image = images.length;
	var xfade = $("image-mover");

	xfade.style.position = "relative";
	xfade.innerHTML = "";

	for(var i = 0; i < images.length; i++)
	{
		xfade.innerHTML += '<img style="position:absolute; top:0; z-index:' + (100-i) + '" src="' + images[i] + '" id="image_' + i + '"/>'
		Event.observe ('banner-nav-button-' + i, 'click', bannerNavClick);
	}
		
	fadeInterval = setInterval('fader()', delay);
});

function fader(next_image)
{
	Effect.Fade("image_" + current_image , { 
		duration: 1, 
		from: 1.0, 
		to: 0.0
	});
	
	if(next_image >= 0) current_image = next_image;
	else current_image++;
	
	if(current_image == last_image) current_image = 0;
	Effect.Appear("image_" + current_image, { 
		duration: 1, 
		from: 0.0, 
		to: 1.0
	});
	
	changeImage(current_image);
}

function bannerNavClick (event)
{
	clearInterval(fadeInterval);
	
	var element = Event.element(event);
	
	next_image = parseFloat(element.id.replace(/banner-nav-button-/, ""));

	fader(next_image);
	
	fadeInterval = setInterval('fader()', delay);
}

function changeImage(i)
{
	removeAllActive();
	
	$('banner-nav-button-' + i).addClassName ('banner-nav-button-active');				
}

function removeAllActive ()
{
	var nav = $$('a.banner-nav-button');
	
	for (var i = 0; i < nav.length; i++)
	{
		nav[i].removeClassName ('banner-nav-button-active');
	}				
}