window.addEvent('domready', function()
{
	//set the default image
	activeImage = 'imgnav1';
	activeLink = '1';
	
	//initialise the default image
	var initialise = $(activeImage).setStyles({display:'block',opacity: 0});	
	new Fx.Style(initialise, 'opacity', {duration: 1} ).set(1);
	//$(activeLink).className = "active";
	
	var nav1 = new Fx.Slide('nav1');
	$('nav1').addEvent('click', function(e){
		new Event(e).stop();
		var newImage = 'img'+this.id;
		transitionImage(newImage);
	});
	
	var nav2 = new Fx.Slide('nav2');
	$('nav2').addEvent('click', function(e){										 
		new Event(e).stop();
		var newImage = 'img'+this.id;
		transitionImage(newImage);	
	});
	
	var nav3 = new Fx.Slide('nav3');
	$('nav3').addEvent('click', function(e){										 
		new Event(e).stop();
		var newImage = 'img'+this.id;
		transitionImage(newImage);	
	});
	
	var nav4 = new Fx.Slide('nav4');
	$('nav4').addEvent('click', function(e){										 
		new Event(e).stop();
		var newImage = 'img'+this.id;
		transitionImage(newImage);	
	});
	
	var nav5 = new Fx.Slide('nav5');
	$('nav5').addEvent('click', function(e){										 
		new Event(e).stop();
		var newImage = 'img'+this.id;
		transitionImage(newImage);	
	});
	
	var nav6 = new Fx.Slide('nav6');
	$('nav6').addEvent('click', function(e){										 
		new Event(e).stop();
		var newImage = 'img'+this.id;
		transitionImage(newImage);	
	});	
});

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

function replaceServicesDesc(html)
{
	document.getElementById('ServicesDesc').innerHTML = html;	
}