﻿$(function() {
    var i = 0; // starter
    var time = 5000;

    var elementsLength = $("#sliderUL li").length;
    var elementsLi = $("#sliderUL li");
    var sliderContent = $("#sliderContent");

    var timmer;

    var getEveryElement = function() {
        var key = i % elementsLength;
        changeElement(key);
        timmer = setTimeout(function() { getEveryElement(++i) }, time);
    }

    var changeElement = function(key) {
        var nrOfImgs = $("#sliderContent span").length;
        var nrOfSpans = $("#sliderContent span").length;
        if (nrOfImgs == 2) {
            $("#sliderContent img:first").remove();
        }
        if (nrOfSpans == 2) {
            $("#sliderContent span:first").remove();
        }
        $("#sliderContent span:first").slideUp(300);

        var imgSrc = $(elementsLi[key]).children("img").attr("src");
        var myImage = $('<img src="' + imgSrc + '" alt="" />');
        var spanText = $(elementsLi[key]).children("span").html();
        var span = $('<span class="sliderSpan">' + spanText + '</span>');

        $(myImage).appendTo('#sliderContent').hide().fadeIn(1200, function() {
            $(span).appendTo('#sliderContent').slideDown(700);
        });

        $("#sliderContent img").hover(function() {
            //$("#sliderContent span:last").slideDown(700);
            //clearTimeout(timmer);
        },
		function() {
		    //$("#sliderContent span:last").slideUp(700);
		    //getEveryElement();
		});

    }

    $("#sliderContent img").remove();
    getEveryElement();

});
