var SlideGallery = new Class({

    Implements: [Options, Events],

    options: {
        morph: {
             duration: 800,
             transition: Fx.Transitions.Quad.easeInOut,
             wait: false
        }
    },

    initialize: function(el, prev, next, options) {
        this.setOptions(options);

        this.items = $$(el);
        this.prev  = $(prev);
        this.next  = $(next);

        if (!this.items || !this.prev || !this.next) {
            return;
        }

        this.itemNum = 0;
        this.width   = this.items[0].getSize().x;

        this.items.each(function(element, index) {
            if (0 == index) {
                element.setStyle('left', 0);
            } else {
                element.setStyle('left', this.width);
                element.setStyle('opacity', 0);
            }
        });

        this.prev.addEvent('click', this.slideIt.bind(this, 'right'));
        this.next.addEvent('click', this.slideIt.bind(this, 'left'));
    },

    slideIt: function(dir) {
        var curItem = this.items[this.itemNum];

        if (this.itemNum < (this.items.length - 1)) {
            this.itemNum++;
        } else {
            this.itemNum = 0;
        }

        var newItem  = this.items[this.itemNum];
        var item_in  = new Fx.Morph(newItem, this.options.morph);
        var item_out = new Fx.Morph(curItem, this.options.morph);

        if ('left' == dir) {
            item_in.start({'left': [this.width, 0], 'opacity': [0, 1]});
            item_out.start({'left': -this.width, 'opacity': 0});
        } else {
            item_in.start({'left': [-this.width, 0], 'opacity': [0, 1]});
            item_out.start({'left': this.width, 'opacity': 0});
        }
    }
});