$(document).ready(function () {

    $(".bread_bg").css("background-color", $(".CollapsiblePanelContentOpened").parent().children().first().css("background-color"));
    
    var speed = 5000;
    var currentPosition = 0;
    var slideWidth = 560;
    var slides = $('.slide');
    var numberOfSlides = slides.length;

    // Remove scrollbar in JS
    $('#slidesContainer').css('overflow', 'hidden');

    // Wrap all .slides with #slideInner div
    slides.wrapAll('<div id="slideInner"></div>').css({
        'float': 'left',
        'width': slideWidth
    });

    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css('width', slideWidth * numberOfSlides);

    // Insert controls in the DOM
    $('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');

    // Hide left arrow control on first load
    manageControls(currentPosition);

    // Create event listeners for .controls clicks
    $('.control').bind('click', function () {
        currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
        manageControls(currentPosition);
    });

    function manageControls(position) {
        if (position == 0) { $('#leftControl').hide() } else { $('#leftControl').show() }
        if (position == numberOfSlides - 1) { $('#rightControl').hide() } else { $('#rightControl').show() }
        $('#slideInner').animate({
            'marginLeft': slideWidth * (-position)
        });
    }

    function alone() {
        if (currentPosition < numberOfSlides - 1) {
            currentPosition = currentPosition + 1;
        }
        else {
            currentPosition = 0;
        }
        manageControls(currentPosition);
    }

    var run = setInterval(function () {
        alone();
    }, speed);

    $('#slidesContainer').hover(
		function () {
		    clearInterval(run);
		},
		function () {
		    run = setInterval(function () {
		        alone();
		    }, speed);
		});

    //        currentBanniereNo = 1;
    //        var runBanniere = setInterval(function () {
    //            if (currentBanniereNo >= 2) {
    //                currentBanniereNo = 1;
    //            }
    //            else {
    //                currentBanniereNo = currentBanniereNo + 1;
    //            }
    //            changeBanniere(currentBanniereNo);
    //        }, speed*2);

    //        function changeBanniere(nb) {
    //            $(".art-header-png").animate({ opacity: 0.0 }, 1000, function () {
    //                $(".art-header-png").css('background-image', 'url(<%= SkinPath %>images/bannieres/' + nb + '.png)');
    //            });
    //            $(".art-header-png").animate({ opacity: 1.0 }, 1000, function () {
    //            });
    //        }

    //    function slideSwitch() {
    //        var $active = $('#banniere img.active');
    //        var $next = $active.next().length ? $active.next() : $('#banniere img:first');

    //        $active.animate({ opacity: 0.0 }, 2000, function () {
    //            $active.removeClass("active");
    //            $active.addClass("last-active");
    //        });
    //        $next.animate({ opacity: 1.0 }, 2000, function () {
    //            $next.removeClass("last-active");
    //            $next.addClass("active");
    //        });
    //    }

    function slideSwitch() {
        var $active = $('#banniere IMG.active');

        if ($active.length == 0) $active = $('#slideshowbanniere IMG:last');

        var $next = $active.next().length ? $active.next()
        : $('#banniere IMG:first');

        $active.addClass('last-active');

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


    var runtest = setInterval(function () {
        slideSwitch();
    }, speed * 2);

});