window.addEvent('domready', function()
{	
	//set the default image
	activeImage = 'img2';
	activeLink = '2';
	
	//initialise the default image
	var initialise = $(activeImage).setStyles({display:'block',opacity: 0});	
	new Fx.Style(initialise, 'opacity', {duration: 1} ).set(1);
	$(activeLink).className = "active";
	
	//event listener
	$('banner-nav').getElements('a').addEvent('mouseenter', function(e) 
	{	
		new Event(e).stop();
		
		$(activeLink).className = "";
		this.className = "active";
		activeLink = this.id;
		
		var newImage = 'img'+this.id;
		
		transitionImage(activeImage,newImage);
	});
	$('banner-nav').addEvent('mouseleave', function(e)
			{	
				new Event(e).stop();
				
				$(activeLink).className = "";
				this.className = "active";
				activeLink = this.id;
				
				
				transitionImage(activeImage,initialise );
	});
});

function transitionImage(oldImage,newImage)
{
	var fadeOut = function()
	{
		var div = $(oldImage).setStyles({
			opacity: 1
		});
		
		new Fx.Style(div, 'opacity', {duration: 700}).start(0);
		
		fadeIn();
		
	};
	
	var fadeIn = function()
	{
		
		var div2 = $(newImage).setStyles({
			display:'block',
			opacity: 0
		});
			
		new Fx.Style(div2, 'opacity', {duration: 700}).start(1);
		
	};
	
	if(newImage != activeImage)
	{
		fadeOut();
		activeImage = newImage;		
	}
}