//Execute the slideShow, set 8 seconds for each images
$(document).ready(function() {		
 slideShow(6000);
});

function slideShow(speed) {
 //append a LI item to the UL list for displaying caption
 $('#slider').append('<li id="slideshow-caption" class="caption"><strong></strong><p></p></li>');

 //Set the opacity of all images to 0
 $('#slider li').css({opacity: 0.0});
	
 //Get the first image and display it (set it to full opacity)
 $('#slider li:first').css({opacity: 1.0});
	
 //Get the caption of the first image from ALT attribute and display it
 $('#slideshow-caption strong').html($('#slider li:first').find('img').attr('alt'));
 Cufon.replace('#slideshow-caption strong');
 $('#slideshow-caption p').html($('#slider li:first').find('img').attr('title'));
		
 //Display the caption
 $('#slideshow-caption').css({opacity: 0.85, bottom:0});
	
 //Call the gallery function to run the slideshow	
 var timer = setInterval('gallery()',speed);
	
 //pause the slideshow on mouse over
 $('#slider').hover(
  function () {
	clearInterval(timer);	
  }, 	
  function () {
	timer = setInterval('gallery()',speed);			
  });
}

function gallery() {
 //if no IMGs have the show class, grab the first image
 var current = ($('#slider li.show')?  $('#slider li.show') : $('#slider li:first'));

 //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')?$('#slider li:first'):current.next()):$('#slider li:first'));
		
 //Get next image caption
 var title = next.find('img').attr('alt');	
 var desc = next.find('img').attr('title');	
		
 //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}, 2000);
	
 //Hide the caption first, and then set and display the caption
 $('#slideshow-caption').animate({bottom:-70}, 1000, function(){
  $('#slideshow-caption').empty();
  //Display the content
  $('#slideshow-caption').html('<strong>'+next.find('img').attr('alt')+'</strong><p>'+next.find('img').attr('title')+'</p>'); 
  Cufon.replace('#slideshow-caption strong');
  $('#slideshow-caption').animate({bottom:0}, 1200);	
 });		

 //Hide the current image
 current.animate({opacity: 0.0}, 2000).removeClass('show');
}