var slideShowCounter = 1;
var stopSlider = false;

$(function () {

    initSlider();
    initSlideshow();
    initSlideshowLinks();
    initEventsWidget();

});

function initSlider() {
    $("#sliderGallery").hide();
    $("#sliderGalleryBackground").css("opacity", 0.7).hide();
    $("#whatToDoSubNavContainer").fadeOut("slow");
}

function initSlideshow() {

    $("#sliderShowButton").mouseover(function () {
        $("#sliderGallery").slideDown();
        $("#sliderGalleryBackground").slideDown();
        $("#sliderShowButton").fadeOut();
    });

    $("#slideshow").mouseover(hideSlider);
    $("#slideshow").mouseover(hideSlider);

    // hide all images except first to avoid initial flicker
    $("#slideshow img").css({ opacity: 0.0 });
    $("#slideshow img:first").css({ opacity: 1.0 });

    // use setInterval to traverse list
    var playSlideshow = setInterval("slideSwitch()", 5000);

    // create buttons to move to specific slide
    var $slideButtons = $("#sliderGallery li img");
    $slideButtons.click(function () {
        // stop the slideshow, to keep it from trying to overlap our transition
        stopSlider = true;
        clearInterval(playSlideshow);
        // call the function using the index of the clicked button
        slideSwitch($slideButtons.index(this));

        switch ($slideButtons.index(this)) {
            case 0:
                $("#handle").animate({ 'left': '11px' }, 'slow');
                slideShowCounter = 1;
                break;
            case 1:
                $("#handle").animate({ 'left': '155px' }, 'slow');
                slideShowCounter = 2;
                break;
            case 2:
                $("#handle").animate({ 'left': '300px' }, 'slow');
                slideShowCounter = 3;
                break;
            case 3:
                $("#handle").animate({ 'left': '445px' }, 'slow');
                slideShowCounter = 4;
                break;
            case 4:
                $("#handle").animate({ 'left': '590px' }, 'slow');
                slideShowCounter = 5;
                break;
        }
        // restart the slideshow
        stopSlider = false;
        playSlideshow = setInterval("slideSwitch()", 5000);
    });

    var $verticalSlideButtons = $("#verticalThumbs li.slideThumb"),
            $activeImage = $("#verticalScrollMainImage img.active"),
            $allImages = $("#verticalScrollMainImage img");

    $verticalSlideButtons.click(function () {
        $allImages.css('display', 'none');
        $activeImage.fadeOut('slow').removeClass("active");
        $activeImage = $("#verticalScrollMainImage img").eq($verticalSlideButtons.index(this)).fadeIn('slow').addClass("active");
    });

}

function initSlideshowLinks() {

    //set the images that have valid URLs to become clickable links
    $("#slideshow img").each(function () {
        var link = $(this).attr('url');  //get custom 'url' attribute
        if (link.toString().length > 0) {
            $(this).css('cursor', 'pointer'); //set cursor 
            $(this).click(function () { //make it a link
                var link = $(this).attr('url');
                if (link.toString().length > 0) {
                    location.href = link;
                }
            });
        }
    });
    
}

function slideSwitch(slideTo) {

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

    var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
    $active.addClass('last-active');

    // added "slideTo" variable to allow transition to a selected slide
    // defaults to null, but if it's >= 0, it will use this index for "$next"
    var slideTo = (slideTo + 1) ? slideTo : null;
    if (slideTo != null) {
        $next = $('#slideshow img').eq(slideTo);
    }

    $next.css({ opacity: 0.0 }).addClass('active').animate({ opacity: 1.0 }, 1000, function () {
        $active.removeClass('active last-active');
    });

    if (stopSlider === false) {
        if (slideShowCounter < 5) {
            $("#handle").animate({ 'left': '+=145px' }, 'slow');
        }
        else {
            $("#handle").animate({ 'left': '11px' }, 'slow'); slideShowCounter = 0;
        }
        slideShowCounter++;
    }
}

function hideSlider() {
    $("#sliderGallery").slideUp();
    $("#sliderGalleryBackground").slideUp();
    $("#sliderShowButton").fadeIn();
}