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
	rotation = setInterval('rotate()',4000);
	
}

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');
	slide();
};

var speed = 800;
var thumbWidth;
var startingX;
var currentX;
var total;
var thumbWidth;
var maxRight;

function slide() {
	
	if(currentX >= maxRight) {
		$('#thumb-overlay').animate({left: startingX}, speed);
		currentX = startingX;
	}
	else {
		$('#thumb-overlay').animate({left: '+=' + thumbWidth}, speed, function() {
			total = currentX + thumbWidth;
			currentX = total;
		});
	}
}

function theThumbnails() {
	
	thumbWidth = $('div#thumbs ul li').outerWidth(true);
	currentX = $("div#thumb-overlay").position().left;
	startingX = $("div#thumb-overlay").position().left;
	maxRight = $('div#thumbs ul').innerWidth() - thumbWidth;

	$('<a id="scroll-left"></a><a id="scroll-right"></a>').appendTo('#thumbs');

	$("div#thumbs ul li").click(function(event){			   
		clearInterval(rotation);
		
		var cur = $(this).index() + 1;
		var pos = $(this).position().left;
		
		$('.show').animate({opacity: 0.0}, 1000).removeClass('show');		
		$('li#' + cur).animate({opacity: 1.0}, 1000).addClass('show');
		$('#thumb-overlay').animate({left: pos +7}, speed);
		currentX = pos;
		return false;
	});

	$("#scroll-right").click(function(event){
		clearInterval(rotation);
		var next = $('.show').next();
		var slideAmount = '+=' + thumbWidth;
		
		if(next.length == 0) {
			next = $('div#rotator ul li:first');
			slideAmount = startingX;
		}

		$('.show').animate({opacity: 0.0}, 1000).removeClass('show');
		$(next).animate({opacity: 1.0}, 1000).addClass('show');
		$('#thumb-overlay').animate({left: slideAmount}, speed);
	});

	$("#scroll-left").click(function(event){
		clearInterval(rotation);
		
		var next = $('.show').prev();
		var slideAmount = '-=' + thumbWidth;
		
		if(next.length == 0) {
			next = $('div#rotator ul li:last');
			slideAmount = $("div#thumbs ul li:last").position().left + 7;
		}

		$('.show').animate({opacity: 0.0}, 1000).removeClass('show');
		$(next).animate({opacity: 1.0}, 1000).addClass('show');
		$('#thumb-overlay').animate({left: slideAmount}, speed);
	});	
	
}