var scrollForwardTimer;
var fadeOutScrollButtonsOnInitTimer;

var autoplayMillisecondsPerSlide = 10000;
var scrollSpeed = 750;

$(document).ready(function() {

    $('.panel').css('opacity','0.5');
    $('.panel:first-child').css('opacity','1');

    // Show scroll buttons for two seconds when page is loaded, then fade them out.
    fadeOutScrollButtonsOnInitTimer = setTimeout("$('.scrollButtons').parent().fadeOut('slow');", 2000);

    // Init hover effect on rewind/forward-buttons
    $('#slider').hover(function() {
        clearTimeout(fadeOutScrollButtonsOnInitTimer);
        $('.scrollButtons').parent().stop().css('opacity','1').show();
    }, function() {
        setTimeout("$('.scrollButtons').parent().fadeOut('slow');", 10);
    });

    // Stop auto play if user clicks on slideshow
    $('#slider').click(function() {
        clearInterval(scrollForwardTimer);
    });

    // enable click-functions on rewind/forward-buttons
    bindButtonForward('.scrollButtons.right');
    bindButtonRewind('.scrollButtons.left');
    
    // Start the timer for the auto scroll
    scrollForwardTimer = setInterval("scrollForward();", autoplayMillisecondsPerSlide);

    initScrollForwardTimer = setTimeout("scrollForward();", 1500);

});


function bindButtonForward(cssSelector)
{
    $(cssSelector).click(function() {
        clearInterval(initScrollForwardTimer);
        clearInterval(scrollForwardTimer);
        scrollForward();
    });
}
function bindButtonRewind(cssSelector)
{
    $(cssSelector).click(function() {
        clearInterval(initScrollForwardTimer);
        clearInterval(scrollForwardTimer);
        scrollRewind();
    });
}
function unbindButton(cssSelector)
{
    $(cssSelector).unbind('click');
}




function scrollForward()
{
    // disable buttons during scroll
    unbindButton('.scrollButtons.right');
    unbindButton('.scrollButtons.left');

    // add the first panel last
    $('.scrollContainer').not('.noscroll').append($('.panel:first-child').outerHTML());
    $('.scrollContainer').not('.noscroll').animate({marginLeft:"-934px"}, scrollSpeed, function() {
        // remove the first panel
        $('.panel:first-child').remove();

        // manage highlight effect for panel that becomes visible
        $('.panel').css('opacity','0.5');
        $('.panel:first-child').animate({'opacity':'1'}, 200);

        // compensate removed panel
        $('.scrollContainer').css('margin-left','-2px');

        // enable click-functions on rewind/forward-buttons
        bindButtonForward('.scrollButtons.right');
        bindButtonRewind('.scrollButtons.left');
    });
}

function scrollRewind()
{
    // disable buttons during scroll
    unbindButton('.scrollButtons.right');
    unbindButton('.scrollButtons.left');

    // add the last panel first
    $('.scrollContainer').prepend($('.panel:last-child').outerHTML());
    // compensate added panel
    $('.scrollContainer').css('margin-left','-934px');
    $('.scrollContainer').animate({marginLeft:"-2px"}, scrollSpeed, function() {
        // remove the last panel
        $('.panel:last-child').remove();

        // manage highlight effect for panel that becomes visible
        $('.panel').css('opacity','0.5');
        $('.panel:first-child').animate({'opacity':'1'}, 200);

        // enable click-functions on rewind/forward-buttons
        bindButtonForward('.scrollButtons.right');
        bindButtonRewind('.scrollButtons.left');
    });
}