$(document).ready(function() {  
							   
		var slideshowSpeed = 6000;
      
		//Execute the slideShow, set 4 seconds for each images  
		slideShow(slideshowSpeed);
	  
	});  
	  
	function slideShow(speed) {  
	  
	  
		//append a LI item to the UL list for displaying caption  
		$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"></div><p><span class="caption"></span><span class="credit"></span></p></li>');  
	  
		//Set the opacity of all images to 0  
		$('ul.slideshow li').css({opacity: 0.0});  
		  
		//Get the first image and display it (set it to full opacity)  
		$('ul.slideshow li:first').css({opacity: 1.0});  
		  
		//Get the caption of the first image from REL attribute and display it  
		$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));  
		$('#slideshow-caption p span.caption').html($('ul.slideshow a:first').find('img').attr('alt'));  
		$('#slideshow-caption p span.credit').html($('ul.slideshow a:first').find('img').attr('title')); 
		
		//Display the caption  
		$('#slideshow-caption').css({opacity:1.0, bottom:0});
		$('#slideshow-caption .slideshow-caption-container').css({opacity: 0.6});
		$('#slideshow-caption p').css({opacity: 1}); 
		  
		//Call the gallery function to run the slideshow      
		var timer = setInterval('gallery()',speed);  
		  
		//pause the slideshow on mouse over  
		$('ul.slideshow, #slideshow-next, #slideshow-prev').hover(  
			function () {  
				clearInterval(timer);     
			},    
			function () {  
				timer = setInterval('gallery()',speed);           
			}  
		);  
		
		$('#slideshow-next').click(function(){ 
			gallery();
		});
		
		$('#slideshow-prev').click(function(){		 
			gallery('prev');
		});
		  
	}  
	  
	function gallery(direction) { 
	  
		//if no IMGs have the show class, grab the first image  
		var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));  
	  
	  	if (direction == 'prev') {
			//Get next image, if it reached the end of the slideshow, rotate it back to the first image
			if (!current.prev().length) {
				var next = $('ul.slideshow li:last').prev();
			} else {
				var next = current.prev();
			}	
		} else {
			//Get next image, if it reached the end of the slideshow, rotate it back to the first image  
			var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));  
		}
		
		//Get next image caption  
		var title = next.find('img').attr('title');   
		var desc = next.find('img').attr('alt');      
			  
		//Set the fade in effect for the next image, show class has higher z-index  
		next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);  
		  
		//Hide the caption first, and then set and display the caption  
		$('#slideshow-caption').fadeOut(300, function () {  
				//Display the content  
				$('#slideshow-caption h3').html(title);  
				$('#slideshow-caption p span.caption').html(desc);    
				$('#slideshow-caption p span.credit').html(title); 
				$('#slideshow-caption').fadeIn(500);     
		});       
	  
		//Hide the current image  
		current.animate({opacity: 0.0}, 1000).removeClass('show');  
	  
	}  // JavaScript Document