Fx.SlideExt = new Class({ 

Extends: Fx, 

	options: { 
	mode: 'vertical' 
	}, 

        
       initialize: function(element, options){ 
			this.addEvent('complete', function(){ 
				
				//alert(this.element.getStyle(this.margin-top).toInt());
				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 = $(element);
                this.parent(options); 
                var wrapper = this.element.retrieve('wrapper'); 
                this.wrapper = wrapper || new Element('div', { 
                        styles: $extend(this.element.getStyles('margin', 'position'), 
{overflow: 'hidden'}) 
                }).wraps(this.element); 
				
				this.wrapper.addClass('widgetWrapper'); 
                this.now = []; 
                this.open = true; 
        }, 

        vertical: function(){ 
                this.margin = 'margin-top'; 
                this.layout = 'height'; 
                //alert(this.element.getStyle(this.margin).toInt());
                this.wrMargin = 'margin-top';
                this.showing = 316;
                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.showing, this.offset-this.showing]]; 
                var start; 
                start = caseIn;
                switch (how){ 
                        case 'in': start = caseIn; break; 
                        case 'out': start = caseOut; break; 
                        case 'toggle': start = (layout == (0+this.showing)) ? 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.showing, this.offset-this.showing]); 
        }, 

        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'); 
        } 

};