/*global $, setInterval */

var slideIndex = 0;
var prevSlideIndex = 2;

function SelectNewStep()
{
    //$(".slideStep").eq(slideIndex).children().toggle();
    $($(".slideStep").eq(slideIndex).children()[0]).css("display", "none");
    $($(".slideStep").eq(slideIndex).children()[1]).css("display", "block");
}
function ResetSelectedStep()
{
    $(".slideStep").each(
        function()
        {
            $($(this).children()[0]).show();
            $($(this).children()[1]).hide();
        }
    );
}
function DiselectOldStep()
{
    if(prevSlideIndex >= 0)
    {
        //$(".slideStep").eq(prevSlideIndex).children().toggle();
        $($(".slideStep").eq(prevSlideIndex).children()[0]).css("display", "block");
        $($(".slideStep").eq(prevSlideIndex).children()[1]).css("display", "none");
    }
}

function gallery() {
    //if no IMGs have the show class, grab the first image  
    var current;
    if($('.slidingImage.showSlidingImage').length)
    {
        current = $('.slidingImage.showSlidingImage');
    }
    else
    {
        current = $('.slidingImage:first');
    }

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image  
    var next;
    prevSlideIndex = slideIndex;
    if(current.next().length)
    {
        next = current.next();
        slideIndex++;
    }
    else
    {
        next = $('.slidingImage:first');
        slideIndex = 0;
    }

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

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

    DiselectOldStep();    
    SelectNewStep();
}

function ChangeSlidingImage(idx)
{
    slideIndex = idx - 1;
    
    var current;
    if($('.slidingImage.showSlidingImage').length)
    {
        current = $('.slidingImage.showSlidingImage');
    }
    else
    {
        current = $('.slidingImage:first');
    }
        
    var next = $('#' + $('.slidingImage')[slideIndex].id);
    
    //Set the fade in effect for the next image, show class has higher z-index  
    next.css({opacity: 0.0})  
    .addClass('showSlidingImage')  
    .animate({opacity: 1.0}, 1000);  

    //Hide the current image  
    current.animate({opacity: 0.0}, 1000)  
    .removeClass('showSlidingImage');
    
    ResetSelectedStep();    
    SelectNewStep();
}

function slideShow() {  
    SelectNewStep();
    
    //Set the opacity of all images to 0  
    $('.slidingImage').css({opacity: 0.0});  

    //Get the first image and display it (set it to full opacity)  
    $('.slidingImage:first').css({opacity: 1.0});

    setInterval(gallery,5000);
}