function theRotator() {

    if(jQuery.support.opacity)
	{
	    //Set the opacity of all images to 0	
	    jQuery('div#rotator ul li').css({opacity: '0.0'});
	
	    //Get the first image and display it (gets set to full opacity)
	    jQuery('div#rotator ul li:first').css({opacity: '1.0'});
	}
	else
	{
	    jQuery('div#rotator ul li').css({filter: 'alpha(opacity=0)'});
	    jQuery('div#rotator ul li:first').css({filter: 'alpha(opacity=1)'});
	}
		
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('rotate()',3000);
	
}

function rotate() {	
	//Get the first image
	var current = (jQuery('div#rotator ul li.show')?  jQuery('div#rotator ul li.show') : jQuery('div#rotator ul li:first'));

	//Get next image, when it reaches the end, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? jQuery('div#rotator ul li:first') :current.next()) : jQuery('div#rotator ul li:first'));	
    
    
	//Set the fade in effect for the next image, the show class has higher z-index
	/**/
	
	if(jQuery.support.opacity)
	{
	    next.css({opacity: '0.0'})
	    .addClass('show')
	    .animate({opacity: '1.0'}, 1000);
	    
	    current.animate({opacity: '0.0'}, 1000)
	    .removeClass('show');
	}
	else
	{
	    next.css({filter: 'alpha(opacity=0)'})
	    .addClass('show')
	    .animate({filter: 'alpha(opacity=100)'}, 1000);
	    
	     current.animate({filter: 'alpha(opacity=0)'}, 1000)
	    .removeClass('show');
	}
	
};

jQuery(document).ready(function() {		
	//Load the slideshow
	theRotator();
});