﻿function slideShow(interval) {


    var slideCount = jQuery('#mgslideshow div.slide').length;

    // Show player buttons only if more than 1 slide
    if (slideCount > 1) {
        jQuery('.playerbuttons').show();
    }

    //Set the caption background to semi-transparent
    var captionBox = jQuery('#mgslideshow .captionbox');
    captionBox.css({ opacity: 0.7 });

    //Resize the width of the caption according to the image width
    captionBox.css({ width: jQuery('#mgslideshow').css('width') });

    var isPlaying = true;

    var direction = 1; // positive forward, negative -1 backward

    // Load the first slide
    showSlide(direction);

    var iTimerID = 0;
    if (slideCount > 1) { // start play
        iTimerID = setInterval(function () { showSlide(direction) }, interval);
        jQuery('#donext').addClass('on');
    }

    var play = function () {
        // show next image right away
        showSlide(direction);
        // restart the interval, otherwise if the function is called at the end of the interval two images will appear one after another.
        clearInterval(iTimerID);
        // Start playing images with an interval. If slideshow was paused then don't play, in pause mode the user manually controls next/prev.
        if (isPlaying) iTimerID = setInterval(function () { showSlide(direction) }, interval);

    }


    jQuery('#donext').click(function () {
        isPlaying = true; // If was on pause then start playing again. This line can be removed, then clicking next will bring the next image but won't start auto play of the slideshow.
        jQuery('.playerbuttons a').removeClass('on'); jQuery('#donext').addClass('on');
        direction = 1;
        play();
        return false;
    });

    jQuery('#doprev').click(function () {
        isPlaying = true;
        jQuery('.playerbuttons a').removeClass('on'); jQuery('#doprev').addClass('on');
        direction = -1;
        play();
        return false;
    });

    jQuery('#dopause').click(function () {
        if (isPlaying) {
            isPlaying = false;
            clearInterval(iTimerID); // stop playing the slideshow.
            jQuery('.playerbuttons a').removeClass('on'); jQuery(this).addClass('on');
        }
        else {
            jQuery(this).removeClass('on');
            isPlaying = true;
            jQuery('#donext').trigger('click'); // when pause is released start playing forward.
        }
        return false;

    });

    // Lock captions to always show or unlock to show only on mouse hover.    
    var captionLocked = false;

    // Initialize caption's locked state
    if (!captionLocked) {
        jQuery('#mgslideshow .imginfo').removeClass('on'); // change locked image to unlocked
        jQuery('#mgslideshow .captionbox').hide(); // hide caption
    }



    jQuery('#mgslideshow .imginfo').click(function () {
        if (captionLocked) {
            captionLocked = false;
            jQuery('#mgslideshow .imginfo').removeClass('on');
        }
        else {
            captionLocked = true;
            jQuery('#mgslideshow .imginfo').addClass('on');
        }
    }
    );


    jQuery('#mgslideshow').hover(
      function () {
          if (!captionLocked)
              jQuery('#mgslideshow .captionbox').slideDown(300);
      },
      function () {
          if (!captionLocked)
              jQuery('#mgslideshow .captionbox').slideUp(300);
      }
    );



    function showSlide(direction) {
        // if no images have the show class, grab the first image
        var current = (jQuery('#mgslideshow .slide.show') ? jQuery('#mgslideshow .slide.show') : jQuery('#mgslideshow .slide:first'));

        // Get next image, if it reached the end of the slideshow, rotate it back to the first image
        var next;
        if (direction > 0) {
            next = ((current.next().length) ? ((current.next().hasClass('captionbox')) ? jQuery('#mgslideshow .slide:first') : current.next()) : jQuery('#mgslideshow .slide:first'));
        }
        else {
            next = ((current.prev().length) ? current.prev() : jQuery('#mgslideshow .slide:last'));
        }

        // Get next image caption
        var caption = next.find('.slidecaption').html();

        //Set the fade in effect for the next image, show class has higher z-index
        next.fadeIn(1000).addClass('show');

        //Hide the current image
        current.fadeOut(1000).removeClass('show');

        jQuery('#mgslideshow .caption').html(caption);

//        // Display a link if a url was supplied for the slide
//        var slideLink = jQuery(".slidelink", next);
//        var slideLinkButton = jQuery(".slideurl");

//        if (slideLink.length > 0) {
//            slideLinkButton.attr("href", slideLink.attr("href"));
//            slideLinkButton.show();
//        }
//        else {
//            slideLinkButton.attr("href", "");
//            slideLinkButton.hide();
//        }

    }



}


