//Requres jQuery

$(function () {
    var billboardZIndex = 100;
    var billboardInterval;
    var billboardDelayTime = 6000;
    var currentBillboard = $('.billboards li').eq(0);
    var counterCount = 1;
    var pause = false;

    currentBillboard.show();

    //Set up events
    $('.homeBillboard').mouseenter(function () { pause = true; });
    $('.homeBillboard').mouseleave(function () { pause = false; });

    function changeBillboard() {
        if (pause) return;
        $('.count').removeClass('active');

        var lastBillboard = currentBillboard;
        var nextBillboard = currentBillboard.next();

        if (nextBillboard.length == 0) {
            nextBillboard = $('.billboards li').eq(0);
            counterCount = 1;
        }

        $('.count').eq(counterCount++ - 1).addClass('active');

        lastBillboard.css({ zIndex: billboardZIndex });

        nextBillboard.css({ top: '0', opacity: '1', zIndex: billboardZIndex - 1 });
        nextBillboard.show();

        lastBillboard.animate({ top: '-200px', opacity: '0' }, 1000, 'swing', function () { lastBillboard.hide(); });

        currentBillboard = nextBillboard;
    }
    function showBillboard(counter) {
        var index = parseInt($(counter).text());
        var lastBillboard = currentBillboard;
        var nextBillboard = $('.billboards li').eq(index - 1);

        $('.count').removeClass('active');
        $('.count').eq(index - 1).addClass('active');

        lastBillboard.hide();

        nextBillboard.css({ top: '0', opacity: '1', zIndex: billboardZIndex - 1 });
        nextBillboard.show();

        currentBillboard = nextBillboard;
        counterCount = index + 1;
    }
    if ($('.billboards li').length > 1) {
        //Set up counter
        $('.billboards li').each(function () {
            $('.billboardCounter').append('<div class="count">' + counterCount++ + '</div>');
        });
        $('.count').click(function () { showBillboard(this) });
        counterCount = 1;
        $('.count').eq(counterCount++ - 1).addClass('active');
        billboardInterval = window.setInterval(changeBillboard, billboardDelayTime);
    }
});