var FadeHero = new Class({
    Implements: Options,
    elements: [],
    controls: [],
    current: 0,
    show_controls: true,

    options: {
        timer: 1000,
        tween: 400,
        current: 'current'
    },

    initialize: function( elements, controls, options ){
        this.setOptions(options);
        elements.each(function(e){ this.elements.push(e) },this);
        controls.each(function(e){ this.controls.push(e) },this);
        this.show_controls = this.controls.length > 0;

        this.elements.each(function(e){e.setStyle('opacity',0)});
        this.elements[this.current].setStyle('opacity',1);

        if (this.show_controls) {
            this.controls[this.current].addClass(this.options.current);
            this.controls[this.current].getParent().setStyle('display', 'block');
        }

        this.controls.each(function(e,i){
            e.addEvent( 'click' , this.change_places.bind(this , i) );
        },this);

        this.proceed_and_change.periodical(this.options.timer , this);
    },

    proceed_and_change: function(){
        this.change_places( this.current + 1 === this.elements.length ? 0 : this.current + 1 );
    },

    change_places: function(i){
        if ( i === this.current ) return false;
        this.elements[this.current].setStyle('z-index', 2);
        this.elements[this.current].set('tween' , {duration:this.options.tween}).tween('opacity',0);
        if (this.show_controls) this.controls[this.current].removeClass(this.options.current);
        this.current = i;
        this.elements[this.current].setStyle('z-index', 1);
        this.elements[this.current].set('tween' , {duration:this.options.tween}).tween('opacity',1);
        if (this.show_controls) this.controls[this.current].addClass(this.options.current);
        return false;
    }
});