/************************************************************************************************
********************************************
************************
*/
/*FIRST ROTATOR VIEWER */
function theRotator() {
	//Set the opacity of all images to 0
	$('div#rotator ul li').css({opacity: 0.0});
	
	//Get the first image and display it (gets set to full opacity)
	$('div#rotator ul li:first').css({opacity: 1.0});
		
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('rotate()',3500);
	
}
 
function rotate() {	
	//Get the first image
	var current = ($('div#rotator ul li.show')?  $('div#rotator ul li.show') : $('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')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));	
	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);
 
	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
};
 
$(document).ready(function() {		
	//Load the slideshow
	theRotator();
});
/************************************************************************************************
********************************************
************************
*/
/*
*  SECOND ROTATOR VIEWER
*/
function theRotatorTwo() {
	//Set the opacity of all images to 0
	$('div#rotatorTwo ul li').css({opacity: 0.0});
	
	//Get the first image and display it (gets set to full opacity)
	$('div#rotatorTwo ul li:first').css({opacity: 1.0});
		
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('rotateTwo()',6000);
	
}
 
function rotateTwo() {	
	//Get the first image
	var current = ($('div#rotatorTwo ul li.show')?  $('div#rotatorTwo ul li.show') : $('div#rotatorTwo 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')) ? $('div#rotatorTwo ul li:first') :current.next()) : $('div#rotatorTwo ul li:first'));	
	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);
 
	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
};
 
$(document).ready(function() {		
	//Load the slideshow
	theRotatorTwo();
});
/************************************************************************************************
********************************************
************************
*/

/*THIRD ROTATOR VIEWER */
function theRotatorThree() {
	//Set the opacity of all images to 0
	$('div#rotatorThree ul li').css({opacity: 0.0});
	
	//Get the first image and display it (gets set to full opacity)
	$('div#rotatorThree ul li:first').css({opacity: 1.0});
		
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('rotateThree()',6000);
	
}
 
function rotateThree() {	
	//Get the first image
	var current = ($('div#rotatorThree ul li.show')?  $('div#rotatorThree ul li.show') : $('div#rotatorThree 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')) ? $('div#rotatorThree ul li:first') :current.next()) : $('div#rotatorThree ul li:first'));	
	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);
 
	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
};
 
$(document).ready(function() {		
	//Load the slideshow
	theRotatorThree();
});
/************************************************************************************************
********************************************
************************
*/

/*FOUR ROTATOR VIEWER */
function theRotatorFour() {
	//Set the opacity of all images to 0
	$('div#rotatorFour ul li').css({opacity: 0.0});
	
	//Get the first image and display it (gets set to full opacity)
	$('div#rotatorFour ul li:first').css({opacity: 1.0});
		
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('rotateFour()',6000);
	
}
 
function rotateFour() {	
	//Get the first image
	var current = ($('div#rotatorFour ul li.show')?  $('div#rotatorFour ul li.show') : $('div#rotatorFour 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')) ? $('div#rotatorFour ul li:first') :current.next()) : $('div#rotatorFour ul li:first'));	
	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);
 
	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
};
 
$(document).ready(function() {		
	//Load the slideshow
	theRotatorFour();
});
/************************************************************************************************
********************************************
************************
*/

/*FIVE ROTATOR VIEWER */
function theRotatorFive() {
	//Set the opacity of all images to 0
	$('div#rotatorFive ul li').css({opacity: 0.0});
	
	//Get the first image and display it (gets set to full opacity)
	$('div#rotatorFive ul li:first').css({opacity: 1.0});
		
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('rotateFive()',6000);
	
}
 
function rotateFive() {	
	//Get the first image
	var current = ($('div#rotatorFive ul li.show')?  $('div#rotatorFive ul li.show') : $('div#rotatorFive 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')) ? $('div#rotatorFive ul li:first') :current.next()) : $('div#rotatorFive ul li:first'));	
	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);
 
	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
};
 
$(document).ready(function() {		
	//Load the slideshow
	theRotatorFive();
});
/************************************************************************************************
********************************************
************************
*/

/*SIX ROTATOR VIEWER */
function theRotatorSix() {
	//Set the opacity of all images to 0
	$('div#rotatorSix ul li').css({opacity: 0.0});
	
	//Get the first image and display it (gets set to full opacity)
	$('div#rotatorSix ul li:first').css({opacity: 1.0});
		
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('rotateSix()',6000);
	
}
 
function rotateSix() {	
	//Get the first image
	var current = ($('div#rotatorSix ul li.show')?  $('div#rotatorSix ul li.show') : $('div#rotatorSix 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')) ? $('div#rotatorSix ul li:first') :current.next()) : $('div#rotatorSix ul li:first'));	
	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);
 
	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
};
 
$(document).ready(function() {		
	//Load the slideshow
	theRotatorSix();
});