var ArticleSlideshow = function(tileId, options){    
    this.tileId = tileId;
    this.options = {
        activeClassname:'active',
        slideClassname:'slide',
        shuffle: true,
        shuffleTime:'3',
        transitionTime: 1
    }; 
        
    if(options){
        Object.extend(this.options, options);
    }
    if(ArticleSlideshow.isDomLoaded){
        this.initialize();
    }else{
        Event.observe(document, 'dom:loaded', this.initialize.bind(this), false);
    }
}

ArticleSlideshow.instances = [];
ArticleSlideshow.isDomLoaded = false;

ArticleSlideshow.getInstance = function(id){
    var instances = ArticleSlideshow.instances;
    var i = instances.length;
    while(i--){
        if(instances[i].tileId === id){
            return instances[i];
        }
    }
};


ArticleSlideshow.prototype = {
    initialize: function() {
        this.el = $(this.tileId);
        this.slides = this.el.select('.'+this.options.slideClassname);
        slideCount = this.slides.size();
        if(slideCount == 0){
            return;
        } 
        
        for(var i=0; i<slideCount;i++){
            if(this.slides[i].hasClassName(this.options.activeClassname)){
                if(this.currentSlide == undefined){
                    this.currentSlide = this.slides[i];
                }else{
                    this.slides[i].removeClassName(this.options.activeClassname);
                    this.slides[i].setStyle({
                        opacity:0
                    });
                }
            } else {
                this.slides[i].setStyle({
                    opacity:0
                });
            }
            Event.observe(this.slides[i], 'mouseover', this.onMouseOver.bind(this));
            Event.observe(this.slides[i], 'mouseout', this.onMouseOut.bind(this));
        }
        
        if(this.currentSlide == undefined){
            this.currentSlide = this.slides[0];
            this.currentSlide.addClassName(this.options.activeClassname);
        }      
            
        this.startSlide();
            
    },
    
    onMouseOver: function(e){
        this.pauseSlide();     
    },
    
    onMouseOut: function(event){
        var target = (event.relatedTarget) ? event.relatedTarget : event.srcElement;
        if(this.isPaused && !target.descendantOf(this.currentSlide) && target != this.currentSlide){
            this.resumeSlide();
        }        
    },
        
    startSlide: function(){
        this.isPaused = false;
        this.ticks = 0; 
        this.timer = new PeriodicalExecuter(this.onTimerTick.bind(this), 1);
    },
        
    pauseSlide: function(){
        this.timer.stop();
        this.isPaused = true;
    },
        
    resumeSlide: function(){
        this.isPaused = false;
        this.timer = new PeriodicalExecuter(this.onTimerTick.bind(this), 1);
    },
        
    onTimerTick:function(pe){
        this.ticks += pe.frequency;
        if(this.ticks>this.options.shuffleTime){
            this.ticks=0;
            this.showNext();
        }
    },
        
    showNext: function(){
        if(this.options.shuffle){
            index = Math.floor(Math.random() * this.slides.size());
            slide = this.slides[index]
            if(slide == this.currentSlide){
                slide = slide.next();
            }
        } else {
            slide = this.currentSlide.next();
        }
            
        if(slide == undefined){
            slide = this.slides.first();
        }
            
        if(this.options.transitionTime>0){
            new Effect.Opacity(this.currentSlide, {
                from: 1,
                to: 0,
                duration: this.options.transitionTime/2, 
                afterFinish: function() {
                    this.currentSlide.removeClassName(this.options.activeClassname);
                    this.currentSlide = slide;
                    this.currentSlide.addClassName(this.options.activeClassname);
                    
                    new Effect.Opacity(slide, {
                        from: 0,
                        to: 1,
                        duration: this.options.transitionTime/2
                    });
                    
                }.bind(this)
            });
        } else {
            this.currentSlide.removeClassName(this.options.activeClassname);
            this.currentSlide = slide;
            this.currentSlide.addClassName(this.options.activeClassname);
        }   
    }
        
};
    
Event.observe(document, 'dom:loaded', function(){
    ArticleSlideshow.isDomLoaded = true;
}, false);