var GalleryCarousel = new Class({
    ctr: 0,
    max: 0,
    maxw: 0,
    width: 0,
    xpos: 0,
    ypos: 0,
    delay: 0,
    scroll: null,
    panel: null,
    tray: null,
    item: [],
    options: {
        group: 1,
        delay: 50,
        duration: 500,
        transition: Fx.Transitions.Cubic.easeOut,
        linkBack: null,
        linkNext: null,
        linkCtrl: 'linkCtrl'
    },

    initialize: function(win, options) {
        if (!$(win)) {
            return false;
        }
        
        var win = $(win);
        this.setOptions(options);
        this.panel = win.getElement('.thumbpanel');
        this.tray = win.getElement('.thumbtray');
        this.ctr = 0;
        this.maxw = 0;

        $$('.thumbnail').each(function(item) {
            this.ctr++;
            this.item[this.ctr] = {left: this.maxw,
                                   width: item.getCoordinates().width,
                                   height: item.getCoordinates().height};
            this.maxw += this.item[this.ctr].width;
        }.bind(this));

        this.ctr = 0;
        this.width = this.panel.getCoordinates().width;
        this.max = Math.floor(this.maxw / this.width);
        
        this.scroll = new Fx.Scroll(this.panel, {wait: true,
                                                 duration: this.options.duration,
                                                 transition: this.options.transition});

        this.up = new Element('p').addEvent('mouseover', this.hoverOn)
                        .addEvent('mouseout', this.hoverOff)
                        .addEvent('click', this.rewind.bindWithEvent(this))
                        .addEvent('dblclick', this.rewind.bindWithEvent(this))
                        .addClass(this.options.linkBack)
                        .setOpacity(0.5)
                        .injectInside(win)
                        .set('html', 'Back');
        this.dn = new Element('p').addEvent('mouseover', this.hoverOn)
                        .addEvent('mouseout', this.hoverOff)
                        .addEvent('click', this.advance.bindWithEvent(this))
                        .addEvent('dblclick', this.advance.bindWithEvent(this))
                        .addClass(this.options.linkNext)
                        .setOpacity(0.5)
                        .injectInside(win)
                        .set('html', 'Next');

        this.render();
    },
    
    advance: function(e) {
        e = new Event(e);
        e.stop();
        if (this.ctr == this.max) {
            return false;
        }
        
        this.ctr++;
        
        this.render();
    },
    
    rewind: function(e) {
        e = new Event(e);
        e.stop();
        if (this.ctr == 0) {
            return false;
        }
        
        this.ctr--;
        
        this.render();
    },
    
    render: function() {
        var tgt = (this.ctr * this.width > this.maxw - this.width) ? this.maxw - this.width : this.ctr * this.width;
        this.scroll.start(this.ctr * this.width, 0);
        this.up.setStyles({display: (this.ctr > 0) ? 'block' : 'none'});
        this.dn.setStyles({display: (this.ctr < this.max) ? 'block' : 'none'});
    },
    
    hoverOn: function() {
        this.tween('opacity', 1);
    },
    
    hoverOff: function() {
        this.tween('opacity', 0.5);
    }
});

GalleryCarousel.implement(new Options);