var currentIndex = 0;
var totalSlides = 0;
var duration = 3500;
var isPaused = false;
var slideWidth = 460;
var slideHeight = 250;
var timerID = 0;

jQuery(document).ready(function () {
    totalSlides = $(".banner_slides").children().size();
    timerID = setInterval(banner_Loop, duration);
    
    if (totalSlides > 1) {
        // Add a Previous link
        $('.banner_bar').append('<a id="btn_prev" class="banner_btn">&lt;</a>');

        // Populate the slide numbers
        $("#banner_object").find(".banner_slide").each(function (i) {
            $('.banner_bar').append('<a class="slide_number">' + (i + 1) + '</a>');
        });
        $("#banner_object").find(".slide_number").each(function (i) {
            if (i == 0)
                $(this).addClass('selected');
            $(this).click(function () {
                currentIndex = (totalSlides + i - 1) % totalSlides;
                banner_Change();
            })
        });

        // Add a Next link
        $('.banner_bar').append('<a id="btn_next" class="banner_btn">&gt;</a>');
    }

    // Pause the slide show when the mouse is over one of the slides
    $('.banner_slides').hover(
        function () {
            isPaused = true;
        },
        function () {
            isPaused = false;
        }
    );

    $("#btn_prev").click(function () {
        currentIndex = (2 * totalSlides + currentIndex - 2) % totalSlides;
        banner_Change();
    });

    $("#btn_next").click(function () {
        banner_Change();
    });
});

function banner_Change() {
    clearInterval(timerID);
    //timerID = setInterval(banner_Loop, duration);
    banner_Loop();
}

function banner_Loop() {
    if (isPaused)
        return;
    currentIndex = (currentIndex + 1) % totalSlides;

    // Fade the slides
    $("#banner_object").find(".banner_slide").each(function (i) {
        if (i == currentIndex) {
            $(this).animate({ opacity: 'show' }, 500);
        } else {
            $(this).animate({ opacity: 'hide' }, 500);
        }
    });
    // Highlight the current slide number
    $("#banner_object").find(".slide_number").each(function (i) {
        if (i == currentIndex) {
            $(this).addClass('selected');
        } else {
            $(this).removeClass('selected');
        }
    });
}