var YOOdrawer = new Class({
    initialize: function(wrapper, items, options) {
        this.setOptions({
            layout: 'vertical',
            itemstyle: 'top',
            shiftSize: 50,
            transition: Fx.Transitions.Expo.easeOut
        },
        options);
        this.wrapper = $(wrapper);
        this.items = $$(items);
        this.fx = new Fx.Elements(this.items, {
            wait: false,
            duration: 600,
            transition: this.options.transition
        });
        if (this.options.layout != 'vertical') this.options.itemstyle = 'left';
        var pos = {};
        this.items.each(function(item, i) {
            pos[i] = item.getStyle(this.options.itemstyle).toInt();
            item.addEvent('mouseenter', this.itemFx.bind(this, [pos, item, i]))
        },
        this)
    },
    itemFx: function(pos, item, i) {
        var o = {};
        item.addClass('active');
        this.items.each(function(other, j) {
            var s = other.getStyle(this.options.itemstyle).toInt();
            if (j >= i) {
                if (s != pos[j]) o[j] = this.itemStyle(s, pos[j])
            } else {
                if (s != pos[j] - this.options.shiftSize) o[j] = this.itemStyle(s, pos[j] - this.options.shiftSize)
            }
            if (j != i) {
                other.removeClass('active')
            }
        },
        this);
        this.fx.start(o)
    },
    itemStyle: function(startVal, endVal) {
        if (this.options.layout == 'vertical') {
            return {
                top: [startVal, endVal]
            }
        } else {
            return {
                left: [startVal, endVal]
            }
        }
    }
});
YOOdrawer.implement(new Options);