// Based on Simple jQuery Slideshow from JonRaasch.com
// Modified by Olle, to support paging and dynamic databinding
// Need some css styles to work

// Global variables
var selectedImageIndex = null;

// SlideShow function
// ---------------------------------
function slideSwitch(imageIndex, prevIndex) {
    
    var $active = $('#slideshow img.active');
    var animateSpeed = 400; // <-- Don't set this much higher (500) or it will render ungly if you click like a maniac.

    if ($active.length == 0) $active = $('#slideshow img:last');

    // use this to pull the images in the order they appear in the markup
    if (imageIndex == null) {
        var $next = $active.next().length ? $active.next()
            : $('#slideshow img:first');
    }
    else {
        var $next = $active.parent().children("img:eq(" + imageIndex + ")").length ? $active.parent().children("img:eq(" + imageIndex + ")")
            : $('#slideshow img:first');
    }

    // Keep track of the active image nr in the array (0 based)
    // the prevIndex and the -1 check down is duplicate and are not nice, need refactoring.
    var index = $("#slideshow img").index($active);
    var nrOfSlideShowImageslenght = $("#slideshow img").size();
    
    selectedImageIndex = index + 1;

    if (prevIndex == true) {
        selectedImageIndex = index - 1;
    }
    
    if (selectedImageIndex == nrOfSlideShowImageslenght) {
        selectedImageIndex = 0;
    }

    if (selectedImageIndex == -1) {
        selectedImageIndex = nrOfSlideShowImageslenght - 1;
    }

    // Trigger the animation progess
    $active.addClass('last-active');
    
    $next.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, animateSpeed, function() {
            $active.removeClass('active last-active');
        });
    }

    $(function() {
        $("#slideShowHolder").show();
        $("a#startSlide").hide();

        // Add class to last li element
        $("#pageImageList img:last").addClass("liClear");
        $("#slideShowPager").hide();

        // First global varibale that detemines if the rest of the script is running or not
        var numberOfImages = $("#pageImageList img").length;
        if (numberOfImages == 0) {
            $("#slideshow").hide();
        }
        else {
            // Take all the small images and put the large version in a holder
            $("#pageImageList img").each(function() {
                var alt = $(this).attr("alt");
                var src = $(this).attr("longdesc");

                $("#slideshow").append("<img src=\"" + src + "\" alt=\"" + alt + "\" />")
            });

            $("#slideshow img:first").addClass("active");

            // Variables and start for the slideshow
            var slideShowSpeed = 4000;
            var slideShow = setInterval("slideSwitch()", slideShowSpeed);

            // When I click a small image the SlideShow stops, and displays the selected image
            $("#pageImageList img").click(function() {

                if ($("#slideShowPager").is(":hidden")) {
                    $("#slideShowPager").slideDown(); // <-- Show the navigation
                }

                $("#startSlide").show();
                $("#stopSlide").hide();

                clearInterval(slideShow);
                var currentClickedIndex = $("#pageImageList img").index(this);
                if (currentClickedIndex != selectedImageIndex || (selectedImageIndex == null && currentClickedIndex == 0)) {
                    selectedImageIndex = currentClickedIndex;
                    slideSwitch(selectedImageIndex);
                }
            });

            // Change image manually in the slide
            $("#slideShowPager a").click(function() {
                clearInterval(slideShow);
                var prevIndex = false;

                if (selectedImageIndex == null) {
                    selectedImageIndex = 0;
                }

                if ($(this).hasClass("prev")) {
                    selectedImageIndex = selectedImageIndex - 1;
                    if (selectedImageIndex == -1) {
                        selectedImageIndex = numberOfImages - 1;
                    }
                    prevIndex = true;
                }
                else if ($(this).hasClass("next")) {
                    selectedImageIndex = selectedImageIndex + 1;
                    if (selectedImageIndex == numberOfImages) {
                        selectedImageIndex = 0;
                    }
                }

                slideSwitch(selectedImageIndex, prevIndex);
            });

            // Start the slide again
            $("#startSlide").click(function() {

                if ($("#slideShowPager").is(":visible")) {
                    $("#slideShowPager").slideUp(); // <-- Hide navigation
                }

                slideShow = setInterval("slideSwitch()", slideShowSpeed);
                $(this).hide();
                $("#stopSlide").show();
            });

            // StopSlide
            $("#stopSlide").click(function() {

                if ($("#slideShowPager").is(":hidden")) {
                    $("#slideShowPager").slideDown(); // <-- Hide navigation
                }

                clearInterval(slideShow);
                $(this).hide();
                $("#startSlide").show();
            });
        }
    });