$(document).ready(function () {
	$('#thumbnails span a').click(function(){
		clearInterval(timerId);
		$('#thumbnails span a').removeClass('selected');
		var currentImageIndex = $('#thumbnails span').index($(this).parent());
		$(this).addClass('selected');
		setPanel(currentImageIndex);
		return false;
	})
	
	function fadeBanners() {
		var totalPanels = $('#slideshow li').length;
		var currentPanel = $('#slideshow li').index($('#slideshow li.selected'));
		nextPanel = currentPanel + 1;
		if(nextPanel > totalPanels - 1) {
			nextPanel = 0;
		}
		$('#thumbnails span a').removeClass('selected');
		setPanel(nextPanel);
		$("#thumbnails a:eq("+nextPanel+")").addClass('selected');
	}
	
	function setPanel(referencePanel) {
		var currentPanel = $('#slideshow li').index($('#slideshow li.selected'));
		if (currentPanel!=referencePanel) {
		   $('#slideshow li').eq(currentPanel).addClass('lastSelected');
		   $('#slideshow li').eq(referencePanel).css({ opacity: 0.0 })
				.addClass('selected')
				.animate({ opacity: 1.0 }, 500, function () {
				$('#slideshow li').eq(currentPanel).removeClass('selected lastSelected');
			});
		}
	}
	
	function startShow() {
		timerId = setInterval(function () {fadeBanners()}, 5 * 1000);	
	}
	startShow();
})