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

function slideShow(speed) {
    
    // 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 alt attribute and display it
    $('ul.slideshow li.caption').html($('ul.slideshow li:first').find('img').attr('alt'));
    
    // display the caption
    $('ul.slideshow li.caption').css({opacity: 0.7, bottom:0});
    
    // call the gallery function to run the slideshow	
    var timer = setInterval('gallery()', speed);
    
    // pause the slideshow on mouse over
    $('ul.slideshow').hover(
        function () {
            clearInterval(timer);	
        }, 	
        function () {
            timer = setInterval('gallery()', speed);			
        }
    );
    
}

function gallery() {
    
    // if no images have the show class, grab the first image
    var current = ($('ul.slideshow li.show') ?  $('ul.slideshow li.show') : $('#ul.slideshow 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('class') == 'caption') ? $('ul.slideshow li:first') : current.next()) : $('ul.slideshow li:first'));
            
    // get next image caption
    var caption = 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);
    
    // change the caption
    $('ul.slideshow li.caption').css({opacity: 0.0});
    $('ul.slideshow li.caption').html(caption);
    $('ul.slideshow li.caption').css({opacity: 0.7, bottom:0});	

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