var DisplayImageTime = 8000;
var FadeInImageTime = 1500;
var FadeOutImageTime = 2500;
var ButtonFadeTime = 400;
var SlideShowInterval;
var ZIPHasFocus = false;


$(document).ready(function ()
{
    /*-------------------------------------------------------------------------
    Button Mouseover Animations
    -------------------------------------------------------------------------*/
    $(".SlideShowButton, .SlideShowPlayButton").hover(function ()
    {
        var imgSource = $(this).attr("src");

        //$(this).stop(true, true).animate({ "opacity": "0" }, ButtonFadeTime);

        imgSource = imgSource.substring(0, imgSource.lastIndexOf(".")) + "Over" + imgSource.substring(imgSource.lastIndexOf("."), imgSource.length);

        $(this).attr("src", imgSource);
    }, function ()
    {
        //$(this).stop(true, true).animate({ "opacity": "1" }, ButtonFadeTime);
        var imgSource = $(this).attr("src");
        imgSource = imgSource.replace("Over.", ".");

        $(this).attr("src", imgSource);
    });

    /*-------------------------------------------------------------------------
    Needed for IE6 since it doesn't support :hover on elements other than <a>
    -------------------------------------------------------------------------*/
    $("[id$=SlideShowButtons] ul li").hover(function (event)
    {
        $(this).css("cursor", "pointer");
        $(this).css("background-image", "url(../../Common/Images/SlideshowButtonOver.png)");
        $(this).css("background-repeat", "no-repeat;")
    }, function ()
    {
        $(this).css("cursor", "default");
        $(this).css("background-image", "url(../../Common/Images/SlideshowButton.png)");
        $(this).css("background-repeat", "no-repeat;")
    });

    /*-------------------------------------------------------------------------
    Manually Set SlideShow Position (User clicked button)
    -------------------------------------------------------------------------*/
    $("[id$=SlideShowButtons] ul li").click(function (event)
    {
        SetSlideShowPosition($(this));
    });

    /*-------------------------------------------------------------------------
    Pause Slideshow on ZIP code focus
    -------------------------------------------------------------------------*/
    $("[id$=txtZIP]").focus(function (event)
    {
        ZIPHasFocus = true;
        clearInterval(SlideShowInterval);
    }, function ()
    {
        ZIPHasFocus = false;
    });

    /*-------------------------------------------------------------------------
    Pause SlideShow on Mouseover - Resume on Mouseout
    -------------------------------------------------------------------------*/
    $("[id$=SlideShow], [id$=SlideShowButtons] ul li").hover(function ()
    {
        clearInterval(SlideShowInterval);
    }, function ()
    {
        SlideShowInterval = setInterval("RotateSlideshowImages()", DisplayImageTime);
    });

    /*-------------------------------------------------------------------------
    Start Automatic SlideShow
    -------------------------------------------------------------------------*/
    $("[id$=SlideShow] ul li").css({ opacity: 0.0 });
    $("[id$=SlideShow] ul li:first").css({ opacity: 1.0 });
    SlideShowInterval = setInterval("RotateSlideshowImages()", DisplayImageTime);
});

function SetSlideShowPosition(ButtonSelected)
{
    if(ZIPHasFocus)
        $("[id$=txtZIP]").blur();

    $("[id$=SlideShowButtons] ul li").stop(true, true);
    $("[id$=SlideShow] ul li").stop(true, true);

    $("[id$=SlideShowButtons] ul li").removeClass("SlideShowActiveButton");
    ButtonSelected.addClass("SlideShowActiveButton");
    
    $("[id$=SlideShow] ul li").removeClass("show");
    $("[id$=SlideShow] ul li").css({ opacity: 0.0 });
    
    var listItem
    for(var i = 0; i <= ButtonSelected.index(); i++)
    {
        if(i == 0)
            listItem = $("[id$=SlideShow] ul li").first();
        else
            listItem = listItem.next();
    }

    listItem.addClass("show").css({ opacity: 1.0 });    
}

function RotateSlideshowImages()
{
    if(ZIPHasFocus)
        $("[id$=txtZIP]").blur();

    //Get the current button image
    var currentButton = $("[id$=SlideShowButtons] ul li.SlideShowActiveButton");    
    if(currentButton.length == 0) currentButton = $("[id$=SlideShowButtons] ul li:first");        

    //Get the current slideshow image
    var currentImage = ($("[id$=SlideShow] ul li.show"));
    if(currentImage.length == 0) currentImage = $("[id$=SlideShow] ul li:first");    

    //Get next image, when it reaches the end, rotate back to the first image
    var nextImage, nextButton;
    if(currentImage.next().length == 0)
    {
        nextButton = $("[id$=SlideShowButtons] ul li:first");
        nextImage = $("[id$=SlideShow] ul li:first");
    }
    else
    {
        nextButton = currentButton.next();
        nextImage = currentImage.next();
    }

    //Un-comment the 3 lines below to get the images in random order
    //var sibs = current.siblings();
    //var rndNum = Math.floor(Math.random() * sibs.length );
    //var next = $( sibs[ rndNum ] );

    nextButton.addClass("SlideShowActiveButton");
    currentButton.removeClass("SlideShowActiveButton");
    
    //Set the fade in effect for the next image, the show class has higher z-index
    nextImage.css({ opacity: 0.0 })
	    .addClass("show")
        .stop(true, true)
	    .animate({ opacity: 1.0 }, FadeInImageTime);

    //Hide the current image
    currentImage.stop(true, true).animate({ opacity: 0.0 }, FadeOutImageTime)
        .removeClass("show");
};