/*
Script: BarackSlideshow.js
  Lightweight slideshow script, based on Fx.MorphList

  License:
    MIT-style license.

  Authors:
    Guillermo Rauch
 */

var Slideshow = new Class({

    Implements: [Options, Events],

    options: {
        auto: true,
        autostart: true,
        autointerval: 2000,
        transition: 'fade',
        tween: { duration: 700 }
    },
    
    initialize: function(images, options){
        this.images = $(images);
        this.setOptions(options);
        this.imagesitems = this.images.getChildren().fade('hide');
        new Asset.images(this.images.getElements('img').map(function(el) { return el.setStyle('display', 'none').get('src'); }), { onComplete: function() {
            this.loaded = true;
            if (this.current) this.show(this.items.indexOf(this.current));
            else if (this.options.auto && this.options.autostart) this.progress();
        }.bind(this)});
        this.createCaption();
        if ($type(this.options.transition) != 'function') 
            this.options.transition = $lambda(this.options.transition);
    },
    
    auto: function(){
        if (!this.options.auto) 
            return false;
        $clear(this.autotimer);
        this.autotimer = this.progress.delay(this.options.autointerval, this);
    },
    
    progress: function(){
        var curindex = this.imagesitems.indexOf(this.curimage);
        this.show((this.curimage && (curindex + 1 < this.imagesitems.length)) ? curindex + 1 : 0);
    },
    
    show: function(index) {
        if (!this.loaded) 
            return;
        var image = this.imagesitems[index]; 
        var img = image.getElement('img');
        if (image == this.curimage) 
            return;
        this.hideCaption();
        image.set('tween', this.options.tween).dispose().inject(this.curimage || this.images.getFirst(), this.curimage ? 'after' : 'before').fade('hide');
        img.setStyle('display', 'block');
        var trans = this.options.transition.run(null, this).split('-');
        switch(trans[0]){
        case 'slide': 
            var dir = $pick(trans[1], 'left');
            var prop = (dir == 'left' || dir == 'right') ? 'left' : 'top';
            image.fade('show').setStyle(prop, image['offset' + (prop == 'left' ? 'Width' : 'Height')] * ((dir == 'bottom' || dir == 'right') ? 1 : -1)).tween(prop, 0); 
            break;
        case 'fade': image.fade('in'); break;
        }
        this.showCaption(img.getProperty('alt'));
        image.get('tween').chain(function(){ 
            this.auto();
            this.fireEvent('show', image); 
        }.bind(this));
        this.curimage = image;
        return this;
    },
    
    createCaption: function()
    {
        this.caption = new Element('div', {
            'class': 'caption',
            styles: {
                opacity: 0
            }
        }).inject(this.images);
        
        this.caption.store('fxInstance', new Fx.Morph(this.caption, {
            duration: 400,
            wait: false
        }));
        this.caption.store('height', this.caption.getHeight());
    },
    
    hideCaption:function()
    {
        var fx = this.caption.retrieve('fxInstance');
        fx.start({
            bottom: this.caption.retrieve('height') * -1,
            opacity: 0  
        });
    },
    
    showCaption: function(title)
    {
        if (!title) {
            return;
        }
        
        this.caption.set('text', title);
        var fx = this.caption.retrieve('fxInstance');
        fx.start({
            bottom: 0,
            opacity: 0.8
        });
    }
});