var slideShow = new Class({
    initialize: function(el, thumb, options) {
        this.element = $(el);
        this.img;
        this.slides = [];
        this.thumb = $(thumb);
        this.current = null;
        this.ptr = 0;
        this.active = true;
        this.autoplay = true;
        this.timer = null;
        this.options = {fade: 500,
                        delay: 9000};

        loop = 0;

        this.element.setHTML('')

        $ES('a', this.thumb).each(function(thumb) {
            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').setProperty('src', thumb.getProperty('rel'))
                                        .setProperty('alt', $E('img', thumb).getProperty('alt'))
                                        .setStyle('position', 'absolute')
                                        .setStyle('top', '0px')
                                        .setStyle('left', '0px')
                                        .injectInside(this.element)
                                        .addEvent('click', this.link.bind(this));
            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)});
            if (thumb.getProperty('href')) {
                img.setStyle('cursor', 'pointer');
                slide.link = thumb.getProperty('href');
            }
            this.slides[loop] = slide;
            loop++;
        }.bind(this));
        
        this.captionpnl = new Element('div').setProperty('id', 'gallery_caption')
                                            .setStyle('position', 'absolute')
                                            .setStyle('top', this.element.getCoordinates().height)
                                            .setStyle('overflow', 'hidden');
        this.captiontxt = new Element('div').setStyle('opacity', 0.8)
                                            .injectInside(this.captionpnl);
        this.captionpnl.fx = this.captionpnl.effect('top');
        this.captionpnl.injectInside(this.element);

        this.start.delay(100, this);
    },
    
    start: function() {
        this._reset();
        this.active = true;
        this.next();
    },
    
    stop: function() {
        this._reset();
        this.slides[this.ptr].stop();
        this.active = false;
    },
    
    link: function() {
        if (this.current.link) {
            location.href = this.current.link;
        }
    },
    
    next: function() {
        if (this.current) {
            this.current.start(0);
        }
        this.current = this.slides[this.ptr];
        this.current.element.setStyle('left', ((this.element.getCoordinates().width / 2) - (this.current.element.width / 2)) + 'px');
        this.current.element.setStyle('top', ((this.element.getCoordinates().height / 2) - (this.current.element.height / 2)) + '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.ptr = el;
        this.autoplay = false;
        this.start();
    },
    
    _reset: function() {
        if (this.timer) {
            $clear(this.timer);
            this.timer = null;
        }
    },
    
    _captionUpdate: function(close) {
        this.captionpnl.fx.stop();
        caption = this.current.element.alt;
        if (close) {
            this.captionpnl.fx.start(this.element.getCoordinates().height);
        } else if (this.active && caption) {
            if (caption.contains('[')) {
                var regex = /^\[(.+?)\]\s*(\w+)/g;
                caption = caption.replace(regex, '<strong>$1</strong><br />$2');
            }
            if (this.current.link) {
                caption = '<a href="' + this.current.link + '">' + caption + '</a>';
            }
            this.captiontxt.setHTML(caption);
            this.captionpnl.fx.start(this.element.getCoordinates().height - this.captiontxt.offsetHeight);
        }
    }
});