var bannerLock = false;

var BannersBox = new Class ({

    box:null,
    banners:null,

    timer:null,
    peroid:10000,

    pages:null,

    initialize:function(id) {
        if(!$chk(id))
            return;

        bannerLock = false;

        this.box = $(id);
        this.banners = this.box.getElements('li');

        for(var i = 1 ; i < this.banners.length ; i++)
            this.banners[i].setStyle('opacity', '0');

        this.timer = this.change.periodical(this.peroid, this);

        var pagesWrapper = this.box.getElement('div.pages');
        this.pages = pagesWrapper.getElements('a');
        this.pages.addEvent('click', function(event) {
            var e = new Event(event);

            if(!bannerLock) {
            
                this.pages.removeClass('selected');

                var target = $(event.target);
                target.addClass('selected');

                var activeIndex = this.getActive();
                var nextIndex = parseInt(target.rel) - 1;

           

                if(activeIndex != nextIndex) {
                    this.changeTo(activeIndex, nextIndex);
                    $clear(this.timer);
                    this.timer = this.change.periodical(this.peroid, this);
                }

            }

            e.stop();
        }.bind(this));
    },
    
    change: function() {
        var activeBannerIndex = this.getActive();
        var nextBannerIndex = activeBannerIndex < this.banners.length - 1 
                             ? activeBannerIndex + 1 : 0;
        this.changeTo(activeBannerIndex, nextBannerIndex);
    },

   changeTo: function(activeBannerIndex, nextBannerIndex) {

       this.pages.removeClass('selected');
       this.pages[nextBannerIndex].addClass('selected');

       if(bannerLock)
           return;

       bannerLock = true;
       var activeBanner = this.banners[activeBannerIndex];
        var tweenOut = new Fx.Tween(activeBanner, {
            duration:'short',
            link: 'chain',
            nextBanner:this.banners[nextBannerIndex],
            onComplete: function(element) {
               element.removeClass('active');
               element.setStyle('visibility', 'hidden');
               element.setStyle('display', 'none');
               var tweenIn = new Fx.Tween(this.options.nextBanner, {
                    duration:'short',
                    link: 'chain',
                    onStart: function(element) {
                        element.setStyle('visibility', 'visible');
                        element.setStyle('display', 'block');
                    },
                    onComplete: function(element) {
                        element.addClass('active');
                        bannerLock = false;
                    }
               });
               tweenIn.start('opacity', '0', '1');
            }
        });
        tweenOut.start('opacity', '1', '0');
   },

   getActive: function() {
        var i;
        for(i = 0 ; i < this.banners.length ; i++) {
            if(this.banners[i].hasClass('active')) {
                break;
            }
        }
        return i;
    }
});