var currentState = 1;
var t;

$(document).ready(function() {
    //featured event rotation
    var eventCount = $('.rotator').length;

    var clickChange = function changeImage(currentImage, nextImage) {
        $(currentImage).css({ 'z-index': 10 });
        $(nextImage).css({ 'z-index': 9 }).show().children().hide();

        $(currentImage).children().fadeOut(500).parent().delay(500).fadeOut(800);
        $(nextImage).children().delay(1200).fadeIn(800);

        currentState = new Number(nextImage.slice(nextImage.length - 1));
    }

    timeChange = function autoSwap() {
        if (currentState < eventCount) {
            nextState = currentState + 1;
        } else {
            nextState = 1;
        }
        clickChange(".index" + currentState, ".index" + nextState);
    }

    autoRotate = function rotateByTime() {
        t = setInterval("timeChange()", 8000);
    }

    autoRotate();

    $('a.nextBanner').click(function(event) {
        event.preventDefault();

        clearInterval(t);

        if (currentState < eventCount) {
            nextState = currentState + 1;
        } else {
            nextState = 1;
        }

        clickChange(".index" + currentState, ".index" + nextState);
    });
});