﻿$(function () {
    //////////////////////////////////////////////////////////////////
    /// CARROUSEL                                                  ///
    //////////////////////////////////////////////////////////////////
    $('.carrousel>ul>li:eq(0)').addClass("active");
    $('.carrousel>div>img').css('z-index', '1');
    $('.carrousel>div>img:eq(0)').css('z-index', '3');
    $('.carrousel>div>img:eq(1)').css('z-index', '2');
    $('.carrousel>a:first').addClass("visible");
    $('.carrousel>div.tekstvlak:first').addClass("visible");

    currentTimeout = setTimeout("Rotate()", 5000);

    $('.carrousel>ul>li').click(function () {
        lastClicked = $(this).index();
        focusSlide($(this).index());
    });
});

//////////////////////////////////////////////////////////////////
/// CARROUSEL                                                  ///
//////////////////////////////////////////////////////////////////
var currentSlideNr = 0;
var currentTimeout;
var lastClicked;

function Rotate() {

    var listsize = $('.carrousel>ul>li').size()
    var nextSlideNr = (currentSlideNr + 1) % listsize;

    $('.carrousel>ul>li:eq(' + currentSlideNr + ')').removeClass("active");
    $('.carrousel>ul>li:eq(' + nextSlideNr + ')').addClass("active");

    $('.carrousel>div>img').css('z-index', '1');
    $('.carrousel>div>img:eq(' + currentSlideNr + ')').css('z-index', '2');
    $('.carrousel>div>img:eq(' + nextSlideNr + ')').css('z-index', '3');
    $('.carrousel>div>img:eq(' + nextSlideNr + ')').css('left', '-509px');

    $('.carrousel>div>img:eq(' + nextSlideNr + ')').animate({ 'left': '0px' }, 500);

    $('.carrousel>a').removeClass("visible");
    $('.carrousel>a:eq(' + nextSlideNr + ')').addClass("visible");

    $('.carrousel>div.tekstvlak').removeClass("visible");
    $('.carrousel>div.tekstvlak:eq(' + nextSlideNr + ')').addClass("visible");

    currentSlideNr = nextSlideNr;
    currentTimeout = setTimeout("Rotate()", 5000);
}

function focusSlide(index) {

    clearTimeout(currentTimeout);

    $('.carrousel>ul>li:eq(' + currentSlideNr + ')').removeClass("active");
    $('.carrousel>ul>li:eq(' + index + ')').addClass("active");

    $('.carrousel>div>img:eq(' + index + ')').css('z-index', '4');
    $('.carrousel>div>img:eq(' + index + ')').css('left', '-509px');

    currentSlideNr = index;

    $('.carrousel>div>img:eq(' + index + ')').animate({ 'left': '0' }, 500);

    $('.carrousel>div>img').not($('.carrousel>div>img:eq(' + index + ')')).css('left', '0px');
    $('.carrousel>div>img').not($('.carrousel>div>img:eq(' + index + ')')).css('z-index', '1');

    $('.carrousel>a').removeClass("visible");
    $('.carrousel>a:eq(' + index + ')').addClass("visible");

    $('.carrousel>div.tekstvlak').removeClass("visible");
    $('.carrousel>div.tekstvlak:eq(' + index + ')').addClass("visible");

    if (lastClicked == index) {
        currentTimeout = setTimeout("Rotate()", 5000);
    }

}
