var $BannerSpeed = 500;
var $BannerIntervalSec = 15; //seconds
var $BannerInterval = $BannerIntervalSec * 1000;

$(document).ready(function () {
    var $BannerItems = new Array();
    var $BannerPos = 0;
    var $ClickedBannerPos = -1;
    var $animComplete = true;
    var $ButtonClick = false;
    var $IntervalVar;

    BannerPosition();

    $('#btn1').click(function () {
        $ButtonClick = true;

        $ClickedBannerPos = 0;
        BannerPosition();
    });
    $('#btn2').click(function () {
        $ButtonClick = true;

        $ClickedBannerPos = 1;
        BannerPosition();
    });
    $('#btn3').click(function () {
        $ButtonClick = true;

        $ClickedBannerPos = 2;
        BannerPosition();

    });
    $('#btn4').click(function () {
        $ButtonClick = true;

        $ClickedBannerPos = 3;
        BannerPosition();
    });
    $('#btn5').click(function () {
        $ButtonClick = true;

        $ClickedBannerPos = 4;
        BannerPosition();
    });

    $('ul.banner-items>li').each(function () {
        $BannerItems.push(this);
    });

    function BannerPosition() {

        if ($ButtonClick == true) {
            clearInterval($IntervalVar);
            scrollImage();
            $IntervalVar = setInterval(scrollImage, $BannerInterval);
        }
        else {
            clearInterval($IntervalVar);
            $IntervalVar = setInterval(scrollImage, $BannerInterval);
        }
    }

    function scrollImage() {

        $ButtonClick = false;

        if ($ClickedBannerPos != $BannerPos) {
            if ($animComplete == true) {

                removeWhiteDots();

                var vBanner = $BannerItems[$BannerPos];

                $BannerPos = $BannerPos >= $BannerItems.length - 1 ? 0 : $BannerPos + 1;

                var vBannerNew = $BannerItems[$BannerPos];
                if ($ClickedBannerPos > -1) {
                    vBannerNew = $BannerItems[$ClickedBannerPos];
                    $BannerPos = $ClickedBannerPos;
                }

                $("a.btn" + ($BannerPos + 1)).addClass("dotwhite");

                $(vBannerNew).css({ left: '0', 'display': 'block', 'z-index': '10' });

                $animComplete = false;
                $(vBanner).css('z-index', '11')
	               .animate({ left: '850' }, { duration: $BannerSpeed, complete:
                    function () {
                        $animComplete = true;
                        $ClickedBannerPos = -1;
                        $(this).css({ left: '0', display: 'none' });
                    }
	               });
            }
        }
        else {
            $ClickedBannerPos = -1;
        }
    }

    function removeWhiteDots() {
        $("a.btn1").removeClass("dotwhite");
        $("a.btn2").removeClass("dotwhite");
        $("a.btn3").removeClass("dotwhite");
        $("a.btn4").removeClass("dotwhite");
        $("a.btn5").removeClass("dotwhite");
    }
});