Fx.SlideExt = new Class({

        Extends: Fx,

        options: {
                mode: 'vertical'
        },

        initialize: function(element, options){
                this.addEvent('complete', function(){
                        this.open = (this.wrapper['offset' + this.layout.capitalize()] !=
0);
                        if (this.open && Browser.Engine.webkit419) this.element.dispose
().inject(this.wrapper);
                }, true);
                this.element = this.subject = document.id(element);
                this.parent(options);
                var wrapper = this.element.retrieve('wrapper');
                this.wrapper = wrapper || new Element('div',{ 'class' : 'div-wrapper',
                        styles: $extend(this.element.getStyles('margin'),{overflow: 'hidden'})
                }).wraps(this.element);

                this.now = [];
                this.open = true;
        },

        vertical: function(){
                this.margin = 'margin-top';
                this.layout = 'height';
                this.wrMargin = 'margin-top'
                this.offset = this.element.offsetHeight;
        },

        horizontal: function(){
                this.margin = 'margin-left';
                this.layout = 'width';
                this.wrMargin = 'margin-right'
                this.offset = this.element.offsetWidth;
        },

        set: function(now){
                this.wrapper.setStyle(this.layout,now[1]);
                this.wrapper.setStyle(this.wrMargin,now[2]);
                return this;
        },

        compute: function(from, to, delta){
                return [0, 1, 2].map(function(i){
                        return Fx.compute(from[i], to[i], delta);
                });
        },

        start: function(how, mode){
                if (!this.check(how, mode)) return this;
                this[mode || this.options.mode]();
                var margin = this.element.getStyle(this.margin).toInt();
                var layout = this.wrapper.getStyle(this.layout).toInt();
                var wrMargin = this.wrapper.getStyle(this.wrMargin).toInt();
                var caseIn = [[margin, layout, wrMargin], [0, this.offset, 0]];
                var caseOut = [[margin, layout, wrMargin], [this.offset, 0,
this.offset]];
                var start;
                switch (how){
                        case 'in': start = caseIn; break;
                        case 'out': start = caseOut; break;
                        case 'toggle': start = (layout == 0) ? caseIn : caseOut;
                }
                //console.log('ok',this.parent);
                return this.parent(start[0], start[1], start[2]);
        },

        slideIn: function(mode){
                return this.start('in', mode);
        },

        slideOut: function(mode){
                return this.start('out', mode);
        },

        hide: function(mode){
                this[mode || this.options.mode]();
                this.open = false;
                return this.set([this.offset, 0, this.offset]);
        },

        show: function(mode){
                this[mode || this.options.mode]();
                this.open = true;
                return this.set([0, this.offset, 0]);
        },

        toggle: function(mode){
                return this.start('toggle', mode);
        }

});

Element.Properties.slide = {

        set: function(options){
                var slide = this.retrieve('slide');
                if (slide) slide.cancel();
                return this.eliminate('slide').store('slide:options', $extend({link:
'cancel'}, options));
        },

        get: function(options){
                if (options || !this.retrieve('slide')){
                        if (options || !this.retrieve('slide:options')) this.set('slide',
options);
                        this.store('slide', new Fx.SlideExt(this, this.retrieve
('slide:options')));
                }
                return this.retrieve('slide');
        }

};