/*  title: A fading Slideshow
    project: ADS Design
    author: Sebastian Wohlrab for kubus media
    date: 2008-08-27
*/
var enhancedSlideshow = new Class({
    Implements: Options,

    /* Get the Options */
    getOptions: function() {
        return {
            duration: 2000,
            linkClass: 'imagelink',
            wait: 1000,
            presentation: 'presentation',
            thumbs: false,
            actual: 'actual',
            allimages: 'all',
            next: 'next',
            prev: 'prev',
            description: 'description',
            controls: 'controls'
        };
    },

    initialize: function( container, options ) {
        this.timer = 0;
        this.starts = true;
        this.setOptions( this.getOptions(), options );
        this.container = $( container );
        this.presentation = new Element( 'div', { 'id': this.options.presentation } ).injectInside( this.container );
        this.actual = 0;
        this.images = this.getImages();
        
        $('slide_outer').setStyles({'height' : '320px', 'padding' : '0'});
        $('controls').setStyle('display', 'block');
        
        
        $( this.options.allimages ).set( 'text', this.images.length.toString() );
        $( this.options.next ).addEvent( 'click' , this.nextImg.bindWithEvent( this, null ) );
        $( this.options.prev ).addEvent( 'click' , this.prevImg.bindWithEvent( this, null ) );

        if (this.images.length > 1) {
            this.startShow();
        } else {
            this.singleImage();
            this.hide( $( this.options.controls ) );
        }
    },
    
    singleImage: function() {
        this.newImage( 0 ).injectInside( this.presentation );
    },
    
    startShow: function() {
        if ( !this.starts ) {
            this.timer = this.nextImg.delay( this.options.wait , this , 'fade' );
        } else {
            this.starts = false;
            this.timer = this.nextImg( null );
        }
    },
    
    setActual: function( number ) {
        $(this.options.actual).set('text', number.toString() );
    },
    
    setText: function( text ) {
        $( this.options.description ).set( 'text' , text );
    },
    
    nextImg: function( mode ) {
        $clear( this.timer );
        
        var loadimg = 0;
        var previd = 'i' + ( this.images.length - 1 ).toString();

        if ( this.actual < ( this.images.length - 1 ) ) {
            loadimg = this.actual + 1;
        }
        if ( loadimg > 0 ) {
            previd = 'i' + ( loadimg - 1 ).toString();
        }
        
        el = this.newImage( loadimg );

        if ( mode == 'fade' ) {
            el.injectInside( this.presentation );
            ef = new Fx.Morph( el, {
                duration: 1000
            } );

            el.setStyles( {
                'opacity': 0,
                'visibility': 'hidden'
            } );
            ef.addEvent( 'complete', function( e ) {
                if ( $( previd ) ) {
                    $( previd ).destroy();
                }
            } );
            ef.start( {
                'opacity': 1,
                'visibility': 'visible'
            } );
        } else {
            el.injectInside( this.presentation );
            if ( $( previd ) ) {
                $( previd ).destroy();
            }
        }

        this.setText( this.images[loadimg].text );
        this.setActual( loadimg + 1 );
        this.actual = loadimg;
        this.startShow();
    },
    
    prevImg: function( mode ) {
        $clear( this.timer );
        
        var loadimg = ( this.images.length - 1 );
        var previd = 0;

        if ( this.actual > 0 ) {
            loadimg = this.actual - 1;
        }
        if ( loadimg < ( this.images.length - 1 ) ) {
            previd = 'i' + ( loadimg + 1 ).toString();
        }

        this.newImage( loadimg ).injectInside( this.presentation );
        this.actual = loadimg;
        this.setText( this.images[loadimg].text );
        this.setActual( loadimg + 1 );
        
        if ( $( previd ) ) {
            $( previd ).destroy();
        }
        
        this.startShow();
    },
    
    newImage: function( arrid ) {
        image = new Element( 'div', {
            'id': 'i' + arrid,
            'class': 'img_outer',
            'style': 'position: absolute; z-index: 1'
        } );
        
        link = new Element( 'a', {
            'class': this.options.linkClass,
            'href': this.images[arrid].url
        }).injectInside( image );
        
        new Element('img', {
            'src': this.images[arrid].path,
            'alt': this.images[arrid].text,
            'class': 'bordered'
        }).injectInside(link);

        return image;
    },

    getImages: function() {
        var images = $$('#' + this.container.getProperty('id') + ' a');
        var imgarray = [];

        function image( path, url, text, id ) {
            this.path = path;
            this.url = url;
            this.text = text;
            this.id = id;
        }

        for ( var i = 0; i < images.length; i++ ) {
            this.hide(images[i]);
            
            imgarray[i] = new image(
                images[i].getProperty('href'),
                images[i].getProperty('title'),
                images[i].getChildren()[0].getProperty('alt'),
                i
            )
        }
        return imgarray;
    },
    
    hide: function( element ) {
        element.setStyles({
            display: 'none'
        });
    }
});