$(document).ready(function() {        
       
     //Execute the slideShow  
     slideShow();  
   
 });  
   
 function slideShow() {  
   
     //Set the opacity of all images to 0  
     $('#gallery li').css({opacity: 0.0});  
       
     //Get the first image and display it (set it to full opacity)  
     $('#gallery li:first').css({opacity: 1.0}, 1000);  
	 
	 //Set the caption background to semi-transparent 
     $('.headerText').css({opacity: 1.0});
	 //.show().animate({opacity: 0.7}, 500); 
       
     //Get the headerText of the first image from REL attribute and display it  
     $('.headerText .content').html($('#gallery li:first').find('img').attr('alt')).animate({opacity: 1.0}, 5000);  
       
     //Call the slideshow function to run the slideshow, 6000 = change to next image after 6 seconds  
     setInterval('gallery()',6000);  
       
 }  
   
 function gallery() {  
       
     //if no IMGs have the show class, grab the first image  
     var current = ($('#gallery li.show')?  $('#gallery li.show') : $('#gallery 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().hasClass('headerText'))? $('#gallery li:first') :current.next()) : $('#gallery li:first'));     
       
     //Get next image headerText  
     var headerText = 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 current image  
     current.animate({opacity: 1.0}, 1000)  
     .removeClass('show')
	 .animate({opacity: 0.0});
      
     $('.headerText').css({opacity:0.0}).animate({opacity:1.0}, 500);
       
     //Display the content  
     $('.headerText .content').html(headerText).css({opacity:1.0});  
           
 }