var $czas = 8000;
var $obrazy;
var $naglowki;
var $linki;
var $i = 0;
var $pause = 0;

function startChangingHeader() {
    $obrazy = $(".header-image");
    $naglowki = $(".header-tabs-text-content");

    $($obrazy[$i]).css('display','');
    $($naglowki[$i]).css('display','');

    $($obrazy).each(function(index) {
        $(".header-tabs-list-container").append('<li class="header-tabs-list-element">' + (index+1) + '</li>');
    });

    $linki = $(".header-tabs-list-element");
    $($linki[0]).addClass("active");
}

function changeHeader() {
    if ($pause == 0) {
        var $a = 0;
        var $b = 0;

        if ($i < $obrazy.length) {
            $i++;
        } else {
            $i = 0;
        }

        if ($i == 0) {
            $a = $obrazy.length;
        } else {
            $a = $i - 1;
        }

        if ($i == $obrazy.length) {
            $b = 0;
        } else {
            $b = $i;
        }

        $($obrazy[$a]).fadeOut();
        $($naglowki[$a]).fadeOut();
        $($linki[$a]).removeClass("active");

        $($obrazy[$b]).fadeIn("2000");
        $($naglowki[$b]).fadeIn("2000");
        $($linki[$b]).addClass("active").fadeIn("2000");
    }
}

function startHeader() {
    
    startChangingHeader();
    $t = setInterval("changeHeader();", $czas);
    $(".header-tabs-list-element").click(
            function () {
                changeHeader();
                var index = $(".header-tabs-list-element").index(this);
                $(".header-image").fadeOut();
                $(".header-tabs-text-content").fadeOut();
                $(".header-tabs-list-element").removeClass("active");
                $($obrazy[index]).fadeIn("2000");
                $($naglowki[index]).fadeIn("2000");
                $(this).addClass("active");
                $pause = 1;
            }
        );
}