
$(document).ready(function(){
	
	$('#slideshow #thumbnails .previous').click(function(){gotoPreviousPanel(); return false;});
	$('#slideshow #thumbnails .next').click(function(){gotoNextPanel(); return false;});
	
	$('#slideshow #thumbnails img').click(function(){

		$('#slideshow #thumbnails a.selected img').attr("src", $('#slideshow #thumbnails a.selected img').attr("src").split("a.gif").join(".gif"));
		$('#slideshow #thumbnails a').removeClass('selected');
		$(this).attr("src", $(this).attr("src").split(".gif").join("a.gif"));
		
		$(this).parent().addClass('selected');

		var currentImageIndex = $('#thumbnails li').index($(this).parent().parent());
		//console.log(currentImageIndex);
		
		window.clearInterval(nextPanel);
		$('#topImage').parent().attr('href', $('#bigPhotos ul li:eq('+currentImageIndex+') a').attr('href'));
		$('#topImage')
			.css('opacity', "0")
			.attr('src', $('#bigPhotos ul li:eq('+currentImageIndex+') img').attr('src'))
			.show()
			.stop()
			.animate({opacity: "1"}, 500, "linear", function(){
				$('#bigPhotos li').hide();
				$('#bigPhotos ul li').eq(currentImageIndex).show();
				$('#topImage').hide().css('opacity', '0');
				nextPanel = window.setInterval(function(){gotoNextPanel()}, 5 * 1000);
			});

	return false;
	})
	

	$('#topImage')
		.hide()
		.css('opacity', '0')
		.css('position', 'absolute')
		.css('top', '0')
		.css('left', '0')
		.attr('src', $('#mainBanner li:first img').attr('src'));
	$('#bigPhotos li').hide();
	$('#bigPhotos li:first').show();
	
	
	gotoNextPanel = function() {
		var totalPanels = $('#thumbnails li').length;
		var currentPanel = $('#thumbnails li').index($('#thumbnails li a.selected').parent());
		var nextPanel = currentPanel + 1;
		
		if(nextPanel > totalPanels - 1) {
			//nextPanel = totalPanels - 1;
			nextPanel = 0;
		}

		$('#thumbnails li:eq('+nextPanel+') img').trigger('click');
	}
	
	gotoPreviousPanel = function() {
		
		var totalPanels = $('#thumbnails li').length;
		var currentPanel = $('#thumbnails li').index($('#thumbnails li a.selected').parent());
		var previousPanel = currentPanel - 1;
		
		
		if(previousPanel < 0) {
			previousPanel = 0;
		}
		
		$('#thumbnails li:eq('+previousPanel+') img').trigger('click');
	}
	
	nextPanel = window.setInterval(function(){gotoNextPanel()}, 5 * 1000);
	//previousPanel = window.setInterval(function(){gotoPreviousPanel()}, 5 * 1000);

})
