var ImageFaderFX = new Class({
    Implements: Events,
    initialize: function(container, slides) {
        this.slides = (slides) ? slides : container.getChildren();
        this.container = container;
        this.slideIdx = 0;
        this.isAvailable = true;
        this.pdId = null;
        this.duration = 0;
            
        Array.each(this.slides, function(s, idx) {
            if(idx > 0) {
                s.fade('hide');
                //s.setStyle('display','none');
            }
        });
    },
    gotoSlide: function(idx, resumePlay) {
        var slideB = this.slides[idx];
        if(slideB) {
            var slideA = this.slides[this.slideIdx];
            
            slideA.fade('out');
            slideB.fade('in');

            this.slideIdx = idx;
            this.fireEvent('updated');

            if(resumePlay === true) {
                this.play(this.duration);
            }
        }
    },
    stop: function() {
        if(this.pdId) {
            clearInterval(this.pdId);
        }

        this.pdId = null;
    },
    play: function(duration) {
        if(this.pdId) {
            this.stop();
        }
        if(duration) {
            this.duration = duration;
        }
        this.pdId = this.next.periodical(this.duration, this, [true]);
    },
    next: function(keepPeriodical) {
        this.gotoSlide((this.slideIdx + 1) % this.slides.length);
    },
    prev: function() {
        var dx = this.slideIdx - 1;
        if(dx < 0) {
            dx = this.slides.length - 1;
        }
        this.gotoSlide(dx);
    }
});


var FXController = new Class({
    initialize: function(fx, container, autoResume) {
        //fx can be any new class that's similar to above. 
        if(!fx || !container) {
            return;
        }

        this.autoResume = (autoResume !== null) ? autoResume : false;
        
        this.fx = fx;
        this.container = container;
        this.fx.addEvent('updated', this.fxUpdated.bind(this));      

        this.container.addClass('fx-container');
        this.indicators = [];
        this.resume = null;

        var li;

        for(var i = 0; i < fx.slides.length; i++) {
            li = new Element('li',{'class':'off'});
            li.inject(this.container);
            li.addEvent('click', this.indicatorClickedHandler.bind(this));
            this.indicators.push(li);
        }

        if(fx.slides.length > 1) {
            li = new Element('li',{'class':'control prev-btn'});
            li.inject(this.container, 'top');
            li.addEvent('click', this.indicatorClickedHandler.bind(this));
            
            li = new Element('li',{'class':'control next-btn'});
            li.inject(this.container, 'bottom');
            li.addEvent('click', this.indicatorClickedHandler.bind(this));
        }

        this.fxUpdated();
    },
    indicatorClickedHandler: function(event) {
        this.fx.stop();

        if(event.target.hasClass('prev-btn')) {
            this.fx.prev();
        }
        else if(event.target.hasClass('next-btn')) {
            this.fx.next();
        }
        else {
            var idx = this.indicators.indexOf(event.target);
            if(idx !== this.fx.slideIdx) {
                this.fx.gotoSlide(idx);
            }
        }
        
        if(this.autoResume === true) {
            this.resumeFX();
        }
    },
    resumeFX: function() {
        if(this.resume) {
            clearTimeout(this.resume);
        }
        this.resume = this.fx.play.delay(3000,this.fx);
    },
    fxUpdated: function() {
        Array.each(this.indicators, function(item, idx) {
            
            if(idx == this.fx.slideIdx) {
                item.removeClass('off');
                item.addClass('on');
            }
            else {
                item.removeClass('on');
                item.addClass('off');
            }
        }.bind(this));
    }
});