var GallerySlideshow = new Class({
    initialize: function(el, thumb, options) {
        this.element = $(el);
        this.img;
        this.slides = [];
        this.thumb = $(thumb);
        this.current = null;
        this.caption = null;
        this.ptr = 0;
        this.active = true;
        this.autoplay = true;
        this.timer = null;
        this.images = 0;
        this.options = {fade: 500,
                        delay: 9000,
                        width: 479,
                        height: 304,
                        offset: 12,
                        spinner: '/img/common/spinner.png'};
        this.setOptions(options);
        loop = 0;

        $ES('.thumbnail a', this.thumb).each(function(thumb) {
            this.images++;
            thumb.loop = loop;
            thumb.addEvent('click', function(evt) {
                evt = new Event(evt).stop();
                this.goTo(evt.target.getParent().loop);
            }.bindAsEventListener(this));
            var img = new Element('img').addEvent('load', this.preload.bind(this))
                                        .setProperty('src', thumb.getProperty('rel'))
                                        .setProperty('alt', $E('img', thumb).getProperty('alt'))
                                        .setStyle('position', 'absolute')
                                        .setStyle('top', '0px')
                                        .setStyle('left', '0px')
                                        .injectInside(this.element);
            var slide = new Fx.Style(img.setStyles({'position':'absolute',
                                                    'left':'0px',
                                                    'right':'0px',
                                                    'opacity':'0',
                                                    'display':'block'}),
                                     'opacity',
                                     {duration: this.options.fade,
                                      onComplete: this._captionUpdate.pass([false], this)});
            this.slides[loop] = slide;
            this.slides[loop].set(0);
            loop++;
        }.bind(this));
        
        this.captionpnl = new Element('div').setProperty('id', 'gallery_caption')
                                            .setStyle('position', 'absolute')
                                            .setStyle('height', '0px')
                                            .setStyle('width', this.element.getCoordinates().width + 'px')
                                            .setStyle('overflow', 'hidden');
        this.captiontxt = new Element('div').setStyle('opacity', 0.8)
                                            .injectInside(this.captionpnl);
        this.captionpnl.fx = this.captionpnl.effect('height');
        this.captionpnl.injectInside(this.element);
    },

    preload: function() {
        this.images--;
        if (this.images < 1) {
            this.start();
        }
    },
    
    start: function() {
        this._reset();
        this.active = true;
        this.next();
    },
    
    stop: function() {
        this._reset();
        this.slides[this.ptr].stop();
        this.active = false;
    },
    
    next: function() {
        if (this.current) {
            this.current.start(0);
        }
        this.current = this.slides[this.ptr];
        var w = (this.current.element.width) ? this.current.element.width : this.options.width;
        var h = (this.current.element.height) ? this.current.element.height : this.options.height;
        this.current.element.setStyle('left', ((this.element.getCoordinates().width / 2) - (w / 2)) + 'px');
        this.current.element.setStyle('top', (((this.element.getCoordinates().height / 2) - (h / 2)) + this.options.offset) + 'px');
        this.current.start(1);
        this.ptr++;
        if (this.ptr >= this.slides.length) {
            this.ptr = 0;
        }
        this._captionUpdate(true);
        if (this.autoplay) {
            this.timer = this.next.delay(this.options.delay, this);
        }
    },
    
    goTo: function(el) {
        this._reset();
        this.ptr = el;
        this.autoplay = false;
        this.next();
    },
    
    _reset: function() {
        if (this.timer) {
            $clear(this.timer);
            this.timer = null;
        }
    },
    
    _captionUpdate: function(close) {
        this.captionpnl.fx.stop();
        if (close) {
            if (this.caption) {
                this.captionpnl.fx.start(0);
            }
        } else if (this.active && this.caption) {
            this.captiontxt.setHTML(this.caption);
            this.captionpnl.fx.start(this.captiontxt.offsetHeight);
        }
    }
});
GallerySlideshow.implement(new Options);