var options = {
    slideDuration: 7000,
    transitionSpeed: 300
};


var slidesIntervalId = 0;
var doNextSlide = true;

function nextSlide() {
    
        var $active = $('#banner-slide-wrapper DIV.active');
        var $active_button = $('#banner-button-wrapper DIV.active');
        
        if ($active.length == 0) {
            $active = $('#banner-slide-wrapper DIV:last');
            $active_button = $('#banner-button-wrapper DIV:last');
        }

        if ($active.next().length) {
            $next = $active.next();
            $next_button = $active_button.next();
        }
        else {
            $next = $('#banner-slide-wrapper DIV:first');
            $next_button = $('#banner-button-wrapper DIV:first'); 
        }

        if (doNextSlide) { switchSlide($active, $next, $active_button, $next_button); }
}

function switchSlide($active, $next, $active_button, $next_button) {
    $active.addClass('last-active');

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

$(document).ready(function() {

    // Start slideshow.
    slidesIntervalId = setInterval("nextSlide()", options.slideDuration);

    // Load button click events.
    $("#banner-button-1").click(function() { clickedButton(1) });
    $("#banner-button-2").click(function() { clickedButton(2) });
    $("#banner-button-3").click(function() { clickedButton(3) });
    $("#banner-button-4").click(function() { clickedButton(4) });
    //$("#banner-button-5").click(function() { clickedButton(5) });

    function clickedButton(buttonIndex) {

        // Stop slideshow
        doNextSlide = false;
        clearInterval(slidesIntervalId);

        var $active = $('#banner-slide-wrapper DIV.active');
        var $next = $('#banner-slide-wrapper DIV:nth-child(' + buttonIndex + ')');

        var $active_button = $('#banner-button-wrapper DIV.active');
        var $next_button = $('#banner-button-wrapper DIV:nth-child(' + buttonIndex + ')');

        switchSlide($active, $next, $active_button, $next_button);

        // restart timer.
        slidesIntervalId = setInterval("nextSlide()", options.slideDuration);
        doNextSlide = true;
    }
    
    
    $("#banner-button-1").hover(function() { over($(this)) }, function() { out($(this)) });
    $("#banner-button-2").hover(function() { over($(this)) }, function() { out($(this)) });
    $("#banner-button-3").hover(function() { over($(this)) }, function() { out($(this)) });
    $("#banner-button-4").hover(function() { over($(this)) }, function() { out($(this)) });
    //$("#banner-button-5").hover(function() { over($(this)) }, function() { out($(this)) });

    function over($button) {
        $button.addClass('hover');
    }

    function out($button) {
        $button.removeClass('hover');
    }
});