$(function () {
    //////////////////////////////////////////////////////////////////
    /// ETALAGE                                                    ///
    //////////////////////////////////////////////////////////////////
    $('.etalage>ul>li:eq(0)').addClass("active");
    $('.etalage>div>img').css('z-index', '1');
    $('.etalage>div>img:eq(0)').css('z-index', '3');
    $('.etalage>div>img:eq(1)').css('z-index', '2');
    $('.etalage>a:first').addClass("visible");

    $('.etalage>a').each(function () {
        
        if ($(this).attr("href") ==  null) {
            $(this).css('display', 'none');
        }
    });

    currentTimeout = setTimeout("Rotate()", 5000);

    $('.etalage>ul>li').click(function () {
        lastClicked = $(this).index();
        focusSlide($(this).index());
    });
});

//////////////////////////////////////////////////////////////////
/// ETALAGE                                                    ///
//////////////////////////////////////////////////////////////////
var currentSlideNr = 0;
var currentTimeout;
var lastClicked;

function Rotate() {

    var listsize = $('.etalage>ul>li').size()
    var nextSlideNr = (currentSlideNr + 1) % listsize;
    
    $('.etalage>ul>li:eq(' + currentSlideNr + ')').removeClass("active");
    $('.etalage>ul>li:eq(' + nextSlideNr + ')').addClass("active");

    $('.etalage>div>img').css('z-index', '1');
    $('.etalage>div>img:eq(' + currentSlideNr + ')').css('z-index', '2');
    $('.etalage>div>img:eq(' + nextSlideNr + ')').css('z-index', '3');
    $('.etalage>div>img:eq(' + nextSlideNr + ')').css('left', '-509px');

    $('.etalage>div>img:eq(' + nextSlideNr + ')').animate({ 'left': '0px' }, 500);

    $('.etalage>a').removeClass("visible");
    $('.etalage>a:eq(' + nextSlideNr + ')').addClass("visible");

    currentSlideNr = nextSlideNr;
    currentTimeout = setTimeout("Rotate()", 5000);
}

function focusSlide(index) {

    clearTimeout(currentTimeout);

    $('.etalage>ul>li:eq(' + currentSlideNr + ')').removeClass("active");
    $('.etalage>ul>li:eq(' + index + ')').addClass("active");

    $('.etalage>div>img:eq(' + index + ')').css('z-index', '4');
    $('.etalage>div>img:eq(' + index + ')').css('left', '-509px');

    currentSlideNr = index;

    $('.etalage>div>img:eq(' + index + ')').animate({ 'left': '0' }, 500);

    $('.etalage>div>img').not($('.etalage>div>img:eq(' + index + ')')).css('left', '0px');
    $('.etalage>div>img').not($('.etalage>div>img:eq(' + index + ')')).css('z-index', '1');

    $('.etalage>a').removeClass("visible");
    $('.etalage>a:eq(' + index + ')').addClass("visible");

    if (lastClicked == index) {
        currentTimeout = setTimeout("Rotate()", 5000);
    }

}