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

        //
        $ES('img', this.element).each(function(img) {
            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[this.slides.length] = slide;
        }.bind(this));
        
        //
        this.scrollwindow = $('thumbviewer');
        this.scrollview = $('thumbscroll');
        this.scrollpanel = $('thumbpanel');
        this.scrollpanel.fx = this.scrollpanel.effect('top', {onComplete: function() {
                                                                             this.scrollactive = false;
                                                                             this._refreshThumbScroll();
                                                                         }.bind(this)}).set(0);
        this.scrollactive = false;
        this.scrollup = new Element('a').setProperty('id', 'thumbscrollup')
                                          .setHTML(' ')
                                          .addEvent('click', function() {
                                              this._scrollThumbScroll(1);
                                          }.bind(this))
                                          .injectInside(this.scrollwindow);
        this.scrolldn = new Element('a').setProperty('id', 'thumbscrolldn')
                                          .setHTML(' ')
                                          .addEvent('click', function() {
                                              this._scrollThumbScroll(-1);
                                          }.bind(this))
                                          .injectInside(this.scrollwindow);

        // determine boundaries
        this.scrollheight = this.scrollview.getCoordinates().height;
        this.scrollmin = 0;
        this.scrollmax = (this.scrollpanel.getCoordinates().height > this.scrollheight) ? -(this.scrollpanel.getCoordinates().height - this.scrollheight) : 0;
        this._refreshThumbScroll();

        //
        this.captionpnl = new Element('div').setProperty('id', 'gallery_caption')
                                            .setStyle('position', 'absolute')
                                            .setStyle('height', '36px')
                                            .setStyle('opacity', 0)
                                            .setStyle('overflow', 'hidden');
        this.captiontxt = new Element('div').injectInside(this.captionpnl);
        this.captionpnl.fx = this.captionpnl.effect('color');
        this.captionpnl.fx.set('#222222');
        this.captionpnl.injectInside(this.element);
        
        //
        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.active) {
            return false;
        }
        if (this.current) {
            this.slides[this.current].start(0);
        }
        this.current = this.ptr;
        this.slides[this.ptr].start(1);
        this.ptr++;
        if (this.ptr >= this.slides.length || this.ptr > this.max) {
            this.ptr = 0;
        }
        this._captionUpdate(true);
        this.timer = this.next.delay(this.options.delay, this);
    },
    
    goTo: function(el) {
        if (this.current != el) {
            this.ptr = el;
            this.start();
        }
    },
    
    _reset: function() {
        if (this.timer) {
            $clear(this.timer);
            this.timer = null;
        }
    },
    
    _refreshThumbScroll: function() {
        this.scrollup.setStyle('display', (this.scrollpanel.offsetTop < this.scrollmin) ? 'block' : 'none');
        this.scrolldn.setStyle('display', (this.scrollpanel.offsetTop > this.scrollmax) ? 'block' : 'none');
    },
    
    _scrollThumbScroll: function(dir) {
        if (this.scrollactive) {
            return false;
        }
        var cur = 0;
        var tgt = 0;
        var wnd = this.scrollheight;
        if (dir == 1) {
            cur = this.scrollpanel.offsetTop;
            tgt = (cur + this.scrollheight < this.scrollmin) ? cur + this.scrollheight : this.scrollmin;
        } else if (dir == -1) {
            cur = this.scrollpanel.offsetTop;
            hgt = this.scrollpanel.getCoordinates().height;
            tgt = ((cur - (wnd * 2)) > -hgt) ? cur - wnd : -hgt + wnd;
        }
        this.scrollpanel.fx.start(tgt);
        this.scrollactive = true;
    },
    
    _captionUpdate: function(close) {
        this.captionpnl.fx.stop();
        caption = this.slides[this.ptr].element.alt;
        if (close) {
            if (caption) {
                this.captionpnl.fx.start('#222222');
            }
        } else if (this.active) {
            this.captiontxt.setHTML(caption);
            this.captionpnl.fx.start('#aaaaaa');
        }
    }
});