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

    options: {
        timer: 10000,
        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.elements.length > 1;

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

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

        this.controls[0].addEvent('click' , (function(){
            this.previous();
            return false;
        }).bind(this));

        this.controls[1].addEvent('click' , (function(){
            this.proceed_and_change();
            return false;
        }).bind(this));

        this.interval = 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 );
    },

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

    change_places: function(i){
        clearInterval( this.interval );
        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);
        this.current = i;
        this.elements[this.current].setStyle('z-index', 1);
        this.elements[this.current].set('tween' , {duration:this.options.tween}).tween('opacity',1);
        this.interval = this.proceed_and_change.periodical(this.options.timer , this);
        return false;
    }
});