/**
 * @author jasse
 */
var ImageFade = Class.create({
    
    initialize: function(imageToFade, images) {
        
        this.options = Object.extend({
            sleeptime: 5,
            fadetime:  0.5
        }, arguments[2] || {});
        
        this.imageToFade =  $(imageToFade);
        this.imageToFade.addClassName('FaderImage');
        
        // preload images
        this.images = [];
        this.loadedCount = 0;
        
        for(var i = 0; i < images.length; i++) {
            var image = $(new Image());
            
            image.onload = function() { this.loadedCount++ }.bind(this)
            
            image.src = images[i];
            
            image.setAttribute('border', 0);
            image.hide();

            this.images.push(image);
        }
        
        //alert(images.length + '/' + this.images.length);
        
        // Wait until images have been loaded
        new PeriodicalExecuter(function(pe) {
            
            if(this.loadedCount < this.images.length)
            return;
            
            // We want this to only run once
            pe.stop();
            
            var parent = this.imageToFade.up();
            var marginLeftRight = new String(
                (parent.getWidth() - this.imageToFade.getWidth()) / 2
            ) + 'px';
            var marginTopBottom = new String(
                (parent.getHeight() - this.imageToFade.getHeight()) / 2
            ) + 'px';
            
            this.wrapper = $(document.createElement('div'));
            this.wrapper.setStyle({
                margin:  marginTopBottom + ' ' + marginLeftRight,
                padding: 0,
                border:  0,
                width:   this.imageToFade.getWidth() + 'px',
                height:  this.imageToFade.getHeight() + 'px'
            });
            this.imageToFade.wrap(this.wrapper);
            
            // Set container background to image src
            this.wrapper.setStyle({ 
                backgroundImage: 'url(' + this.images[0].src + ')',
                backgroundRepeat: 'no-repeat'
            });
            
            // replace image 
            this.imageToFade.replace(this.images[0]);
            this.imageToFade = this.images[0];
            
            // Init fading
            this.currentIndex = 0;
            new PeriodicalExecuter(this.fadeover.bind(this), this.options.sleeptime);

        }.bind(this), 0.1);
    },
    
    fadeover: function() {
        
        // Get next image index
        this.currentIndex = (this.currentIndex + 1) % this.images.length;
        var nextImage = this.images[this.currentIndex];
        
        // Make it invisible (just to be sure)
        nextImage.hide();

        // Replace current w/ next image
        this.imageToFade.replace(nextImage); // In DOM
        this.imageToFade = nextImage;        // reference
        
        // Fade image in
        new Effect.Appear(nextImage, {
            to:       1,
            duration: this.options.fadetime,
            
            afterFinish: function() {
                this.wrapper.setStyle({ background: 'url(' + nextImage.src + ')' });
            }.bind(this)
        });
    }
});