var BannerRotator = function(){
        var bannerList = document.getElementById("banners-list").getElementsByTagName("li"),
        bannerNavList = document.getElementById("banners-nav").getElementsByTagName("li"),
        count = bannerList.length,
        bannerNavLinks = document.getElementById("banners-nav").getElementsByTagName("a"),
        position = 0,
        int_id,
        currentEffect = false,
        previous = false,
        previousIndex = -1,
        activeIndex = -1,
        active = false,
        callChange = false,
        changePosition = function(){
            if (currentEffect) {
                callChange = true;
                return;
            }
            
            previous = false;
            previousIndex = -1;
            activeIndex = -1;
            active = false;
            
            for (var i = 0, l = count; i < l; i++){
                if (bannerNavList[i].className.match(/act/)) {
                    previous = $(bannerList[i]);
                    previousIndex = i;
                }
                
                if (i == position) {
                    active = $(bannerList[i]);
                    activeIndex = i;
                }
            }
            
            if (previousIndex == position) {return;}
            
            
            active.setStyle('visibility', 'visible');
            active.setStyle('z-index', '2');
            
            if (previous) {
                currentEffect = new Fx.Elements([active, previous], {onComplete: afterEffect});
                previous.setStyle('z-index', '3');
                currentEffect.start({'0':{'opacity':[0, 1]}, '1':{'opacity':[1, 0]}} );
            } else {afterEffect();}
        },
        afterEffect = function () {
            currentEffect = false;
            if (previous) {
                $(bannerNavList[previousIndex]).removeClass('act');
                previous.setStyle('visibility','hidden');
            }
            
            
            $(bannerNavList[activeIndex]).addClass('act');
            if (callChange) {
                callChange = false;
                changePosition();
            }
        },
        rotateAuto = function(){
            int_id = setInterval(function(){
                position++;
                validatePos();
                changePosition();
            },8000);
        },
        validatePos = function(){
            if (position == count) {
                position = 0;
            } else if ( position < 0) {
                position = count - 1;
            }
        };
        for (var i = 0, l = bannerNavLinks.length; i < l; i++){
            bannerNavLinks[i].onclick = function(){
                if (/arr/.test(this.className)){
                    position = (/next/.test(this.className)) ? position + 1 : position - 1;
                } else if (/item/.test(this.className)){
                    position = parseInt(/\d+/.exec(this.className));
                }
                validatePos();
                changePosition();
                return false;
            }
        }
        for (var i = 0, l = count; i < l; i++) {
            bannerList[i].onmouseover = function(){clearInterval(int_id);}
            bannerNavLinks[i].onmouseover = function(){clearInterval(int_id);};
            bannerList[i].onmouseout = function(){rotateAuto();}
            bannerNavLinks[i].onmouseout = function(){rotateAuto();}}
        changePosition();
        window.addEvent('load', rotateAuto);
    };
    BannerRotator();