var showCaptions = false;
var paused = false;
$(document).ready(function () 
{
    $('#slideCaption').css({ opacity: 0, bottom: 0 });

    $('#captionOnOff').click(
    function () 
    {
        if (showCaptions == false) 
        {
            $('#captionOnOff').html('On');
            showCaptions = true;
            $('#slideCaption').css({ opacity: 0.7, bottom: 0 });
        }
        else 
        {
            $('#captionOnOff').html('Off');
            showCaptions = false;
            $('#slideCaption').css({ opacity: 0, bottom: 0 });
        }
    }
    );

    slideShow(8000);

});


function slideShow(speed) 
{

    $('#play').hide();
    $('#pause').show();
      
    //Set the opacity of all images to 0
    $('ul.slideshow li').css({ opacity: 0.0 });

    //Set the total numberslides counter
    $('#totalSlides').html($(".slideshow > *").size());

    //Set the slidenumber to 1
    $('#slideNumber').html(1);

    //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   
    $('#slideCaption p').html($('ul.slideshow a:first').find('img').attr('alt'));

    if (showCaptions == true) 
    {
        //Display the caption   
        $('#slideCaption').css({ opacity: 0.7, bottom: 0 });
    }

    //Call the gallery function to run the slideshow	
    var timer = setInterval('gallery()', speed);

    $('#pause').click
    (
	    function() {
	        paused = true;
	        clearInterval(timer);
	        $('#pause').hide();
	        $('#play').show();
	    }
	);

	$('#play').click
    (
        function() {
            paused = false;
            nextSlide();

            timer = setInterval('gallery()', speed);

            $('#play').hide();
            $('#pause').show();
        }
    );

        $('#prev').click(function() 
        {
            clearInterval(timer);
            prevSlide();
            if (!paused) 
            {
                timer = setInterval('gallery()', speed);
            }
        }
    );

    $('#next').click
    (
        function() 
        {
            clearInterval(timer);
            
            nextSlide();
            
            if (!paused) 
            {
                timer = setInterval('gallery()', speed);
            }
        }
    );
	
}

function gallery() 
{

    //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'));

    //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') == 'slideCaption') ? $('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


    $('#slideCaption').slideToggle(300, function() 
    {
            $('#slideCaption p').html(desc);
            $('#slideCaption').slideToggle(500);
    }
    );
        

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

    $('#slideNumber').html(next.index() + 1);

}

function nextSlide()
{

    //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'));
    
    //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') == 'slideCaption') ? $('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   
    $('#slideCaption').slideToggle(300, function() {
        //$('#slideshow-caption h3').html(title);
        $('#slideCaption p').html(desc);
        $('#slideCaption').slideToggle(500);
    });    

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

    $('#slideNumber').html(next.index() + 1);

}

function prevSlide() 
{

    //if no IMGs have the show class, grab the last image
    var current = ($('ul.slideshow li.show') ? $('ul.slideshow li.show') : $('#ul.slideshow li:last'));

    //Get next image, if it reached the beginning of the slideshow, rotate it back to the last image
    var prev = ((current.prev().length) ? ((current.prev().attr('id') == 'slideCaption') ? $('ul.slideshow li:last') : current.prev()) : $('ul.slideshow li:last'));

    //Need some logic here to go back one more if it is on the ul item.
    
    //Get next image caption   
    var title = prev.find('img').attr('title');
    var desc = prev.find('img').attr('alt');   

    //Set the fade in effect for the next image, show class has higher z-index
    prev.css({ opacity: 0.0 }).addClass('show').animate({ opacity: 1.0 }, 1000);

    //Hide the caption first, and then set and display the caption   
    $('#slideCaption').slideToggle(300, function() {
        //$('#slideshow-caption h3').html(title);
        $('#slideCaption p').html(desc);
        $('#slideCaption').slideToggle(500);
    });    

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

    $('#slideNumber').html(prev.index() + 1);

}