var Rotator = new Class({
    options: {
        ctlCont  : 'rotation-ctls',
        itemCont : 'rotation-items',
        interval : 5000
    },
    initialize: function(options){
        this.setOptions(options);
        
        this.ctls = $(this.options.ctlCont).getChildren();
        this.items = $(this.options.itemCont).getChildren();
        
        this.currentItem = -1;
        this.transFlag = false;
        
        $each(this.ctls, function(el, i){
            el.addEvent('click', this.click.pass(i, this));
        }, this);
        
        $each(this.items, function(el){
            el.setOpacity(0).setStyle('display','block');
        });
        
        this.rotate(0);
        
        this.periodical = this.loop.periodical(this.options.interval, this);
    },
    click: function(i){
        $clear(this.periodical);
        return this.rotate(i);
    },
    rotate: function(i){
        if(i == this.currentItem || this.transFlag) return;
        this.transFlag = true;
        this.ctls[i].addClass('current');
        this.myFx(i, 1);
        if(this.currentItem >= 0){
            this.ctls[this.currentItem].removeClass('current');
            this.myFx(this.currentItem, 0);
        };
        this.currentItem = i;
    },
    myFx: function(i, opacity){
        this.items[i].effect('opacity', {duration: 500}).start(opacity).chain(this.resetFlag.pass(opacity, this));
    },
    resetFlag: function(i){
        if(i == 0 || this.currentItem <= 0) this.transFlag = false;
    },
    loop: function(){
        var i = this.currentItem + 1;
        
        if(i < this.items.length){
            this.rotate(i);
        }else{
            $clear(this.periodical);
            this.rotate(0);
        }
    }
});

Rotator.implement(new Options, new Events);