Slideshow = new JS.Class('Slideshow', {
    initialize: function(display, images, options) {
        this._options = options = options || {};
        
        this._options.fadeTime    = options.fadeTime    || this.klass.FADE_TIME;
        this._options.displayTime = options.displayTime || this.klass.DISPLAY_TIME;
        
        this._display = Ojay(display);
        this._current = 0;
        
        this._display.setStyle({
            position: 'relative'
        });
        
        var y = 0;
        
        this._images = Ojay(images).map(function(image, i) {
            var height = image.getHeight();
            
            if (y < height) {
                y = height;
            }
            
            image.setStyle({
                position: 'absolute',
                top:       0,
                left:      0
            });
            
            if (this._current !== i) {
                image.setStyle({opacity: 0}).hide();
            }
            
            return image;
        }, this);
        
        this._display.setStyle({
            height: y + 'px'
        });
        
        if (this._images.length > 1) {
            var interval = this._options.displayTime + this._options.fadeTime * 2;
            setInterval(this.rotate.bind(this), interval * 1000);
        }
    },
    
    rotate: function() {
        var next = this._current + 1;
        
        if (!this._images[next]) next = 0;
        
        this._images[this._current].animate({
            opacity: {
                to: 0
            }
        }, this._options.fadeTime).hide()
        ._(this._images[next]).show().animate({
            opacity: {
                to: 1
            }
        }, this._options.fadeTime)
        ._(function() {
            this._current = next;
        }.bind(this));
    },
    
    getHTML: function() {
        return this._display;
    },
    
    extend: {
        FADE_TIME:    0.5,
        DISPLAY_TIME: 4.0
    }
});