var $dom = YAHOO.util.Dom;
var $ = $dom.get;
var $class = $dom.getElementsByClassName;

var slideshows_auto = {
    init: function() {
	    this.slideshows = [];                                                                                                                                     
	    var containers = $class('slideshow-container', 'div');
	    for(var i=0, item; item=containers[i]; i++) {
	        this.slideshows[i] = new Slideshow(item);
	        this.slideshows[i].run(true);
	    }
    }
}


Slideshow = function(slideshow_container, speed, pause) {
    if (slideshow_container) {
        this.init(slideshow_container, speed, pause); 
    }
}

Slideshow.prototype = {  
    init: function(slideshow_container, speed, pause) {
        this.container = slideshow_container;
        this.speed = speed || 4;
        this.pause = pause || 5;
        if (YAHOO.env.ua.ie > 0) {
            this.fade = false; // Setting Opacity in IE (at least ie 7) messes up the text so it's hard to read
        } else {
            this.fade = true;
        }
        
        this.pause = this.pause * 1000 // Converting it to milliseconds from seconds
        this.current_slide = 0;
        this.slide_count = 0;
        
        this.stop_show = false;
        this.onSlideLoad = new YAHOO.util.CustomEvent("onSlideLoad");
        this.onSlideUnLoad = new YAHOO.util.CustomEvent("onSlideUnLoad");  
 
        this.slides = []
        var dom_slide_elements = $class('slideshow-slide', '',this.container);
        for(var i=0, slide; slide=dom_slide_elements[i]; i++) {
	        this.slides[i] = slide;
	        if (i != this.current_slide) {
	            if (this.fade) {
	                $dom.setStyle(this.slides[i], 'opacity', .5);
	            }
	            $dom.setStyle(this.slides[i], 'display', 'none');
	        } else {
	            if (this.fade) {
    	            $dom.setStyle(this.slides[i], 'opacity', 1);
	            }
	            $dom.setStyle(this.slides[i], 'display', 'block');
	        }
	        $dom.setStyle(this.slides[i], 'visibility', 'visible');
	    }
	    this.slide_count = this.slides.length; 

    },

    continue_show: function(pause_first) {
        if (this.stop_show) { //Otherwise it's already running
            pause_first = pause_first || false;
            this.stop_show = false;
            this.run(pause_first);
        }
    },

    run: function(pause_first) {
        if (!this.stop_show) {       
            if (pause_first) {
                //Since staying on first slide in essence we are "loading" the first slide
                //So firing the load signal
                //this.onSlideLoad.fire({slide: this.slides[this.current_slide], slide_number: this.current_slide});
            } else {    
                this.show_slide();       
            }
             
            var thisObj = this;
            setTimeout(function(){ thisObj.run() }, this.pause);
        }
    },
  
    show_slide: function(slide_number) {
        if (slide_number==null) {
            slide_number = this.next_slide();
        }
        if (slide_number >= 0 && slide_number <= this.slide_count && slide_number != this.current_slide) {
            if (this.fade) {
                var animFadeOut = new YAHOO.util.Anim(this.slides[this.current_slide], { opacity: {from: 1, to: 0 } }, this.speed, YAHOO.util.Easing.easeOutStrong);
                animFadeOut.onComplete.subscribe( function() { 
                        var slide = this.getEl();
                        $dom.setStyle(slide, 'display', 'none');
                    }
                );
                var animFadeIn = new YAHOO.util.Anim(this.slides[slide_number], { opacity: {from: .5,  to: 1 } }, this.speed, YAHOO.util.Easing.easeOut);
                animFadeIn.onComplete.subscribe( function() { 
                        // This generally won't change anything as it's already set to a display: block
                        // before the animation starts, but it's in case somebody clicks between slides quickly
                        // to override the setting display to none on the oncomplete functionality above
                        var slide = this.getEl();
                        $dom.setStyle(slide, 'display', 'block');
                    }
                );
                this.onSlideLoad.fire({slide: this.slides[slide_number], slide_number: slide_number});
                animFadeOut.animate();
                $dom.setStyle(this.slides[slide_number], 'opacity', .5);
                $dom.setStyle(this.slides[slide_number], 'display', 'block');
                animFadeIn.animate();
                this.onSlideUnLoad.fire({slide: this.slides[this.current_slide], slide_number: this.current_slide});
                this.current_slide = slide_number;
            } else {
                this.onSlideLoad.fire({slide: this.slides[slide_number], slide_number: slide_number});
                $dom.setStyle(this.slides[slide_number], 'display', 'block');
                $dom.setStyle(this.slides[this.current_slide], 'display', 'none');
                this.onSlideUnLoad.fire({slide: this.slides[this.current_slide], slide_number: this.current_slide});
                this.current_slide = slide_number;
            }
        }
    },

    stop: function() {
        this.stop_show = true;
    },
    
    show_slide_then_stop: function(slide_number) {
        this.stop();
        this.show_slide(slide_number);   
    },    
    
    next_slide: function() {
        if (this.current_slide == (this.slide_count - 1)) {
            return 0;
        } else {
            return this.current_slide + 1;
        }  
    }

}

//Un comment the below line or add it to your own html/javascript files to start the slideshow
YAHOO.util.Event.addListener(window, 'load', slideshows_auto.init);

//Not using auto-init as we want to be able to jump to specific slides
//YAHOO.util.Event.addListener(window, 'load', slideshow_init);
//var hmp_slideshow = '';
//function slideshow_init() {
//    hmp_slideshow = new Slideshow($('hmp-slideshow'));
//    hmp_slideshow.run(true);
//}