function theRotator() {
	theInterval = null;
	delay = 4000; // 4 seconds
	//Set the opacity of all images to 0
	jQuery('div#imageFlipper ul li').css({opacity: 0.0});
	jQuery('div#tabFlipper ul li').addClass('off');
	//Get the first image and display it (gets set to full opacity)
	jQuery('div#imageFlipper ul li:first').css({opacity: 1.0});
	jQuery('div#tabFlipper ul li:first').addClass('show');
	//Call the rotator function to run the slideshow
	theInterval = setInterval('rotate()',delay);
};

jQuery('#tabFlipper').hover(function() {
	stopSlideShow();
	}, function() {
	startSlideShow();
});

jQuery('#imageFlipper').hover(function() {
	stopSlideShow();
	}, function() {
	startSlideShow();
});   

function stopSlideShow() {
	if(theInterval) clearInterval(theInterval);
	hoverTabs();
};

function startSlideShow() {
	theInterval = setInterval('rotate()',delay);
};

function hoverTabs() {
	jQuery('#tabFlipper ul li').mouseover(function() { 
		var currentId = jQuery(this).attr('id'); 
		var numberId = currentId.split('_',2)[1];
		var hoverTab = 'div#tabFlipper ul li#flipperTab_' + numberId;
		var hoverImage = 'div#imageFlipper ul li#flipperImage_' + numberId;
		jQuery('div#tabFlipper ul li').each(function(index) { 
			jQuery(this).removeClass('show').addClass('off'); 
		});
		jQuery('div#imageFlipper ul li').each(function(index) {
			jQuery(this).animate({opacity: 0.0}, 0).css('z-index', 700).removeClass('show').addClass('off'); 
		});
		jQuery(hoverImage).removeClass('off').addClass('show').animate({opacity: 1.0}, 0).css('z-index', 800);
		jQuery(hoverTab).removeClass('off').addClass('show');
	});
};

function rotate() { 
	//Get the first image
	var currentImage = (jQuery('div#imageFlipper ul li.show')?  jQuery('div#imageFlipper ul li.show') : jQuery('div#imageFlipper ul li:first'));
	var currentTab = (jQuery('div#tabFlipper ul li.show')?  jQuery('div#tabFlipper ul li.show') : jQuery('div#tabFlipper ul li:first'));
	//Get next image, when it reaches the end, rotate it back to the first image
	var nextImage = ((currentImage.next().length) ? ((currentImage.next().hasClass('show')) ? jQuery('div#imageFlipper ul li:first') :currentImage.next()) : jQuery('div#imageFlipper ul li:first'));
	//Get next tab, when it reaches the end, rotate it back to the first image
	var nextTab = ((currentTab.next().length) ? ((currentTab.next().hasClass('show')) ? jQuery('div#tabFlipper ul li:first') :currentTab.next()) : jQuery('div#tabFlipper ul li:first')); 
	//Set the fade in effect for the next image, the show class has higher z-index
	nextImage.css({opacity: 0.0})
	.addClass('show')
	.removeClass('off')
	.animate({opacity: 1.0}, 1000)
	.css('z-index', 800);
	nextTab.removeClass('off')
	.addClass('show');
	//Hide the current image
	currentImage.animate({opacity: 0.0}, 1000)
	.removeClass('show')
	.addClass('off')
	.css('z-index', 700); 
	currentTab.removeClass('show')
	.addClass('off'); 
};

theRotator();