rails 0.13.0 → 0.13.1

data/html/javascripts/dragdrop.js

@@ -112,12 +112,18 @@ Element.Class = {
 var Droppables = {
   drops: false,
   
+  remove: function(element) {
+    for(var i = 0; i < this.drops.length; i++)
+      if(this.drops[i].element == element)
+        this.drops.splice(i,1);
+  },
+  
   add: function(element) {
     var element = $(element);
-    var options = {
+    var options = Object.extend({
       greedy:     true,
       hoverclass: null  
-    }.extend(arguments[1] || {});
+    }, arguments[1] || {});
     
     // cache containers
     if(options.containment) {
@@ -134,43 +140,42 @@ var Droppables = {
         options._containers.length-1;
     }
     
-    if(element.style.position=='') //fix IE
-      element.style.position = 'relative'; 
+    Element.makePositioned(element); // fix IE
     
-    // activate the droppable
-    element.droppable = options;
+    options.element = element;
     
+    // activate the droppable    
     if(!this.drops) this.drops = [];
-    this.drops.push(element);
+    this.drops.push(options);
   },
   
   is_contained: function(element, drop) {
-    var containers = drop.droppable._containers;
+    var containers = drop._containers;
     var parentNode = element.parentNode;
-    var i = drop.droppable._containers_length;
+    var i = drop._containers_length;
     do { if(parentNode==containers[i]) return true; } while (i--);
     return false;
   },
   
   is_affected: function(pX, pY, element, drop) {
     return (
-      (drop!=element) &&
-      ((!drop.droppable._containers) ||
+      (drop.element!=element) &&
+      ((!drop._containers) ||
         this.is_contained(element, drop)) &&
-      ((!drop.droppable.accept) ||
-        (Element.Class.has_any(element, drop.droppable.accept))) &&
-      Position.within(drop, pX, pY) );
+      ((!drop.accept) ||
+        (Element.Class.has_any(element, drop.accept))) &&
+      Position.within(drop.element, pX, pY) );
   },
   
   deactivate: function(drop) {
-    Element.Class.remove(drop, drop.droppable.hoverclass);
+    Element.Class.remove(drop.element, drop.hoverclass);
     this.last_active = null;
   },
   
   activate: function(drop) {
     if(this.last_active) this.deactivate(this.last_active);
-    if(drop.droppable.hoverclass) {
-      Element.Class.add(drop, drop.droppable.hoverclass);
+    if(drop.hoverclass) {
+      Element.Class.add(drop.element, drop.hoverclass);
       this.last_active = drop;
     }
   },
@@ -184,10 +189,9 @@ var Droppables = {
     var i = this.drops.length-1; do {
       var drop = this.drops[i];
       if(this.is_affected(pX, pY, element, drop)) {
-        if(drop.droppable.onHover)
-           drop.droppable.onHover(
-            element, drop, Position.overlap(drop.droppable.overlap, drop));
-        if(drop.droppable.greedy) { 
+        if(drop.onHover)
+           drop.onHover(element, drop.element, Position.overlap(drop.overlap, drop.element));
+        if(drop.greedy) { 
           this.activate(drop);
           return;
         }
@@ -196,17 +200,13 @@ var Droppables = {
   },
   
   fire: function(event, element) {
-    if(!this.drops) return;
-    var pX = Event.pointerX(event);
-    var pY = Event.pointerY(event);
+    if(!this.last_active) return;
     Position.prepare();
     
-    var i = this.drops.length-1; do {
-      var drop = this.drops[i];
-      if(this.is_affected(pX, pY, element, drop))
-        if(drop.droppable.onDrop)
-           drop.droppable.onDrop(element);
-    } while (i--);
+    if (this.is_affected(Event.pointerX(event), Event.pointerY(event), element, this.last_active))
+      if (this.last_active.onDrop) 
+        this.last_active.onDrop(element, this.last_active);
+    
   },
   
   reset: function() {
@@ -220,6 +220,11 @@ Draggables = {
   addObserver: function(observer) {
     this.observers.push(observer);    
   },
+  removeObserver: function(element) {  // element instead of obsever fixes mem leaks
+    for(var i = 0; i < this.observers.length; i++)
+      if(this.observers[i].element && (this.observers[i].element == element))
+        this.observers.splice(i,1);
+  },
   notify: function(eventName, draggable) {  // 'onStart', 'onEnd'
     for(var i = 0; i < this.observers.length; i++)
       this.observers[i][eventName](draggable);
@@ -231,7 +236,7 @@ Draggables = {
 Draggable = Class.create();
 Draggable.prototype = {
   initialize: function(element) {
-    var options = {
+    var options = Object.extend({
       handle: false,
       starteffect: function(element) { 
         new Effect.Opacity(element, {duration:0.2, from:1.0, to:0.7}); 
@@ -244,15 +249,12 @@ Draggable.prototype = {
       },
       zindex: 1000,
       revert: false
-    }.extend(arguments[1] || {});
+    }, arguments[1] || {});
     
     this.element      = $(element);
-    this.element.drag = this;
     this.handle       = options.handle ? $(options.handle) : this.element;
     
-    // fix IE
-    if(!this.element.style.position)
-      this.element.style.position = 'relative';
+    Element.makePositioned(this.element); // fix IE
     
     this.offsetX      = 0;
     this.offsetY      = 0;
@@ -267,9 +269,21 @@ Draggable.prototype = {
     this.active       = false;
     this.dragging     = false;   
     
-    Event.observe(this.handle, "mousedown", this.startDrag.bindAsEventListener(this));
-    Event.observe(document, "mouseup", this.endDrag.bindAsEventListener(this));
-    Event.observe(document, "mousemove", this.update.bindAsEventListener(this));
+    this.eventMouseDown = this.startDrag.bindAsEventListener(this);
+    this.eventMouseUp   = this.endDrag.bindAsEventListener(this);
+    this.eventMouseMove = this.update.bindAsEventListener(this);
+    this.eventKeypress  = this.keyPress.bindAsEventListener(this);
+    
+    Event.observe(this.handle, "mousedown", this.eventMouseDown);
+    Event.observe(document, "mouseup", this.eventMouseUp);
+    Event.observe(document, "mousemove", this.eventMouseMove);
+    Event.observe(document, "keypress", this.eventKeypress);
+  },
+  destroy: function() {
+    Event.stopObserving(this.handle, "mousedown", this.eventMouseDown);
+    Event.stopObserving(document, "mouseup", this.eventMouseUp);
+    Event.stopObserving(document, "mousemove", this.eventMouseMove);
+    Event.stopObserving(document, "keypress", this.eventKeypress);
   },
   currentLeft: function() {
     return parseInt(this.element.style.left || '0');
@@ -290,31 +304,43 @@ Draggable.prototype = {
       Event.stop(event);
     }
   },
-  endDrag: function(event) {
-    if(this.active && this.dragging) {
-      this.active = false;
-      this.dragging = false;
+  finishDrag: function(event, success) {
+    this.active = false;
+    this.dragging = false;
+    
+    if(success) Droppables.fire(event, this.element);
+    Draggables.notify('onEnd', this);
+    
+    var revert = this.options.revert;
+    if(revert && typeof revert == 'function') revert = revert(this.element);
       
-      Droppables.fire(event, this.element);
-      Draggables.notify('onEnd', this);
+    if(revert && this.options.reverteffect) {
+      this.options.reverteffect(this.element, 
+      this.currentTop()-this.originalTop,
+      this.currentLeft()-this.originalLeft);
+    } else {
+      this.originalLeft = this.currentLeft();
+      this.originalTop  = this.currentTop();
+    }
+    
+    this.element.style.zIndex = this.originalZ;
       
-      var revert = this.options.revert;
-      if(revert && typeof revert == 'function') revert = revert(this.element);
+    if(this.options.endeffect) 
+      this.options.endeffect(this.element);
       
-      if(revert && this.options.reverteffect) {
-        this.options.reverteffect(this.element, 
-          this.currentTop()-this.originalTop,
-          this.currentLeft()-this.originalLeft);
-      } else {
-        this.originalLeft = this.currentLeft();
-        this.originalTop  = this.currentTop();
+    Droppables.reset();
+  },
+  keyPress: function(event) {
+    if(this.active) {
+      if(event.keyCode==Event.KEY_ESC) {
+        this.finishDrag(event, false);
+        Event.stop(event);
       }
-      this.element.style.zIndex = this.originalZ;
-     
-      if(this.options.endeffect) 
-        this.options.endeffect(this.element);
-      
-      Droppables.reset();
+    }
+  },
+  endDrag: function(event) {
+    if(this.active && this.dragging) {
+      this.finishDrag(event, true);
       Event.stop(event);
     }
     this.active = false;
@@ -372,9 +398,32 @@ SortableObserver.prototype = {
 }
 
 Sortable = {
+  sortables: new Array(),
+  options: function(element){
+    var element = $(element);
+    for(var i=0;i<this.sortables.length;i++)
+      if(this.sortables[i].element == element)
+        return this.sortables[i];
+    return null;        
+  },
+  destroy: function(element){
+    var element = $(element);
+    for(var i=0;i<this.sortables.length;i++) {
+      if(this.sortables[i].element == element) {
+        var s = this.sortables[i];
+        Draggables.removeObserver(s.element);
+        for(var j=0;j<s.droppables.length;j++)
+          Droppables.remove(s.droppables[j]);
+        for(var j=0;j<s.draggables.length;j++)
+          s.draggables[j].destroy();
+        this.sortables.splice(i,1);
+      }
+    }
+  },
   create: function(element) {
     var element = $(element);
-    var options = { 
+    var options = Object.extend({ 
+      element:     element,
       tag:         'li',       // assumes li children, override with tag: 'tagname'
       overlap:     'vertical', // one of 'vertical', 'horizontal'
       constraint:  'vertical', // one of 'vertical', 'horizontal', false
@@ -384,8 +433,10 @@ Sortable = {
       hoverclass:  null,
       onChange:    function() {},
       onUpdate:    function() {}
-    }.extend(arguments[1] || {});
-    element.sortable = options;
+    }, arguments[1] || {});
+    
+    // clear any old sortable with same element
+    this.destroy(element);
     
     // build options for the draggables
     var options_for_draggable = {
@@ -435,8 +486,8 @@ Sortable = {
     // fix for gecko engine
     Element.cleanWhitespace(element); 
     
-    // for onupdate
-    Draggables.addObserver(new SortableObserver(element, options.onUpdate));
+    options.draggables = [];
+    options.droppables = [];
     
     // make it so 
     var elements = element.childNodes;
@@ -448,18 +499,28 @@ Sortable = {
         var handle = options.handle ? 
           Element.Class.childrenWith(elements[i], options.handle)[0] : elements[i];
         
-        new Draggable(elements[i], options_for_draggable.extend({ handle: handle }));
+        options.draggables.push(new Draggable(elements[i], Object.extend(options_for_draggable, { handle: handle })));
+        
         Droppables.add(elements[i], options_for_droppable);
+        options.droppables.push(elements[i]);
+        
       }
       
+    // keep reference
+    this.sortables.push(options);
+    
+    // for onupdate
+    Draggables.addObserver(new SortableObserver(element, options.onUpdate));
+
   },
   serialize: function(element) {
     var element = $(element);
-    var options = {
-      tag:  element.sortable.tag,
-      only: element.sortable.only,
+    var sortableOptions = this.options(element);
+    var options = Object.extend({
+      tag:  sortableOptions.tag,
+      only: sortableOptions.only,
       name: element.id
-    }.extend(arguments[1] || {});
+    }, arguments[1] || {});
     
     var items = $(element).childNodes;
     var queryComponents = new Array();

data/html/javascripts/effects.js

@@ -46,15 +46,33 @@ Effect.Transitions.wobble = function(pos) {
   return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
 }
 Effect.Transitions.pulse = function(pos) {
-   return (Math.floor(pos*10) % 2 == 0 ? 
+  return (Math.floor(pos*10) % 2 == 0 ? 
     (pos*10-Math.floor(pos*10)) : 1-(pos*10-Math.floor(pos*10)));
 }
-
 Effect.Transitions.none = function(pos) {
-    return 0;
+  return 0;
 }
 Effect.Transitions.full = function(pos) {
-    return 1;
+  return 1;
+}
+
+/* ------------- element ext -------------- */
+
+Element.makePositioned = function(element) {
+  element = $(element);
+  if(element.style.position == "")
+    element.style.position = "relative";
+}
+
+Element.makeClipping = function(element) {
+  element = $(element);
+  element._overflow = element.style.overflow || 'visible';
+  if(element._overflow!='hidden') element.style.overflow = 'hidden';
+}
+
+Element.undoClipping = function(element) {
+  element = $(element);
+  if(element._overflow!='hidden') element.style.overflow = element._overflow;
 }
 
 /* ------------- core effects ------------- */
@@ -62,33 +80,33 @@ Effect.Transitions.full = function(pos) {
 Effect.Base = function() {};
 Effect.Base.prototype = {
   setOptions: function(options) {
-    this.options = {
+    this.options = Object.extend({
       transition: Effect.Transitions.sinoidal,
       duration:   1.0,   // seconds
       fps:        25.0,  // max. 100fps
       sync:       false, // true for combining
       from:       0.0,
       to:         1.0
-    }.extend(options || {});
+    }, options || {});
   },
   start: function(options) {
     this.setOptions(options || {});
-    this.currentFrame    = 0;
-    this.startOn  = new Date().getTime();
-    this.finishOn = this.startOn + (this.options.duration*1000);
+    this.currentFrame = 0;
+    this.startOn      = new Date().getTime();
+    this.finishOn     = this.startOn + (this.options.duration*1000);
     if(this.options.beforeStart) this.options.beforeStart(this);
     if(!this.options.sync) this.loop();  
   },
   loop: function() {
-    timePos = new Date().getTime();
+    var timePos = new Date().getTime();
     if(timePos >= this.finishOn) {
       this.render(this.options.to);
       if(this.finish) this.finish(); 
       if(this.options.afterFinish) this.options.afterFinish(this);
       return;  
     }
-    pos   = (timePos - this.startOn) / (this.finishOn - this.startOn);
-    frame = Math.round(pos * this.options.fps * this.options.duration);
+    var pos   = (timePos - this.startOn) / (this.finishOn - this.startOn);
+    var frame = Math.round(pos * this.options.fps * this.options.duration);
     if(frame > this.currentFrame) {
       this.render(pos);
       this.currentFrame = frame;
@@ -97,7 +115,7 @@ Effect.Base.prototype = {
   },
   render: function(pos) {
     if(this.options.transition) pos = this.options.transition(pos);
-    pos  = pos * (this.options.to-this.options.from);
+    pos *= (this.options.to-this.options.from);
     pos += this.options.from; 
     if(this.options.beforeUpdate) this.options.beforeUpdate(this);
     if(this.update) this.update(pos);
@@ -109,32 +127,32 @@ Effect.Base.prototype = {
 }
 
 Effect.Parallel = Class.create();
-  Effect.Parallel.prototype = (new Effect.Base()).extend({
-    initialize: function(effects) {
-      this.effects = effects || [];
-       this.start(arguments[1]);
-    },
-    update: function(position) {
-       for (var i = 0; i < this.effects.length; i++)
-        this.effects[i].render(position);  
-    },
-    finish: function(position) {
-       for (var i = 0; i < this.effects.length; i++)
-          if(this.effects[i].finish) this.effects[i].finish(position);
-    }
-  });
+Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), {
+  initialize: function(effects) {
+    this.effects = effects || [];
+    this.start(arguments[1]);
+  },
+  update: function(position) {
+    for (var i = 0; i < this.effects.length; i++)
+      this.effects[i].render(position);  
+  },
+  finish: function(position) {
+    for (var i = 0; i < this.effects.length; i++)
+      if(this.effects[i].finish) this.effects[i].finish(position);
+  }
+});
 
 // Internet Explorer caveat: works only on elements the have
 // a 'layout', meaning having a given width or height. 
 // There is no way to safely set this automatically.
 Effect.Opacity = Class.create();
-Effect.Opacity.prototype = (new Effect.Base()).extend({
+Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), {
   initialize: function(element) {
     this.element = $(element);
-    options = {
+    options = Object.extend({
       from: 0.0,
       to:   1.0
-    }.extend(arguments[1] || {});
+    }, arguments[1] || {});
     this.start(options);
   },
   update: function(position) {
@@ -148,45 +166,44 @@ Effect.Opacity.prototype = (new Effect.Base()).extend({
 });
 
 Effect.MoveBy = Class.create();
- Effect.MoveBy.prototype = (new Effect.Base()).extend({
-   initialize: function(element, toTop, toLeft) {
-     this.element      = $(element);
-     this.originalTop  = parseFloat(this.element.style.top || '0');
-     this.originalLeft = parseFloat(this.element.style.left || '0');
-     this.toTop        = toTop;
-     this.toLeft       = toLeft;
-     if(this.element.style.position == "")
-       this.element.style.position = "relative";
-     this.start(arguments[3]);
-   },
-   update: function(position) {
-     topd  = this.toTop  * position + this.originalTop;
-     leftd = this.toLeft * position + this.originalLeft;
-     this.setPosition(topd, leftd);
-   },
-   setPosition: function(topd, leftd) {
-     this.element.style.top  = topd  + "px";
-     this.element.style.left = leftd + "px";
-   }
+Object.extend(Object.extend(Effect.MoveBy.prototype, Effect.Base.prototype), {
+  initialize: function(element, toTop, toLeft) {
+    this.element      = $(element);
+    this.originalTop  = parseFloat(this.element.style.top || '0');
+    this.originalLeft = parseFloat(this.element.style.left || '0');
+    this.toTop        = toTop;
+    this.toLeft       = toLeft;
+    Element.makePositioned(this.element);
+    this.start(arguments[3]);
+  },
+  update: function(position) {
+    topd  = this.toTop  * position + this.originalTop;
+    leftd = this.toLeft * position + this.originalLeft;
+    this.setPosition(topd, leftd);
+  },
+  setPosition: function(topd, leftd) {
+    this.element.style.top  = topd  + "px";
+    this.element.style.left = leftd + "px";
+  }
 });
 
 Effect.Scale = Class.create();
-Effect.Scale.prototype = (new Effect.Base()).extend({
+Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
   initialize: function(element, percent) {
     this.element = $(element)
-    options = {
+    options = Object.extend({
       scaleX: true,
       scaleY: true,
       scaleContent: true,
       scaleFromCenter: false,
       scaleMode: 'box',        // 'box' or 'contents' or {} with provided values
       scaleFrom: 100.0
-    }.extend(arguments[2] || {});
+    }, arguments[2] || {});
     this.originalTop    = this.element.offsetTop;
     this.originalLeft   = this.element.offsetLeft;
-    if (this.element.style.fontSize=="") this.sizeEm = 1.0;
-    if (this.element.style.fontSize && this.element.style.fontSize.indexOf("em")>0)
-       this.sizeEm      = parseFloat(this.element.style.fontSize);
+    if(this.element.style.fontSize=="") this.sizeEm = 1.0;
+    if(this.element.style.fontSize && this.element.style.fontSize.indexOf("em")>0)
+      this.sizeEm      = parseFloat(this.element.style.fontSize);
     this.factor = (percent/100.0) - (options.scaleFrom/100.0);
     if(options.scaleMode=='box') {
       this.originalHeight = this.element.clientHeight;
@@ -207,8 +224,8 @@ Effect.Scale.prototype = (new Effect.Base()).extend({
     if(this.options.scaleContent && this.sizeEm) 
       this.element.style.fontSize = this.sizeEm*currentScale + "em";
     this.setDimensions(
-     this.originalWidth * currentScale, 
-     this.originalHeight * currentScale);
+      this.originalWidth * currentScale, 
+      this.originalHeight * currentScale);
   },
 
   setDimensions: function(width, height) {
@@ -229,7 +246,7 @@ Effect.Scale.prototype = (new Effect.Base()).extend({
 });
 
 Effect.Highlight = Class.create();
-Effect.Highlight.prototype = (new Effect.Base()).extend({
+Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), {
   initialize: function(element) {
     this.element = $(element);
     
@@ -242,10 +259,11 @@ Effect.Highlight.prototype = (new Effect.Base()).extend({
       var cols = current.slice(4,current.length-1).split(',');
       var i=0; do { endcolor += parseInt(cols[i]).toColorPart() } while (++i<3); }
       
-    var options = {
-      startcolor: "#ffff99",
-      endcolor:   endcolor
-    }.extend(arguments[1] || {});
+    var options = Object.extend({
+      startcolor:   "#ffff99",
+      endcolor:     endcolor,
+      restorecolor: current 
+    }, arguments[1] || {});
     
     // init color calculations
     this.colors_base = [
@@ -266,25 +284,49 @@ Effect.Highlight.prototype = (new Effect.Base()).extend({
       Math.round(this.colors_base[2]+(this.colors_delta[2]*position)) ];
     this.element.style.backgroundColor = "#" +
       colors[0].toColorPart() + colors[1].toColorPart() + colors[2].toColorPart();
+  },
+  finish: function() {
+    this.element.style.backgroundColor = this.options.restorecolor;
   }
 });
 
+Effect.ScrollTo = Class.create();
+Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), {
+  initialize: function(element) {
+    this.element = $(element);
+    Position.prepare();
+    var offsets = Position.cumulativeOffset(this.element);
+    var max = window.innerHeight ? 
+      window.height - window.innerHeight :
+      document.body.scrollHeight - 
+        (document.documentElement.clientHeight ? 
+          document.documentElement.clientHeight : document.body.clientHeight);
+    this.scrollStart = Position.deltaY;
+    this.delta  = (offsets[1] > max ? max : offsets[1]) - this.scrollStart;
+    this.start(arguments[1] || {});
+  },
+  update: function(position) {
+    Position.prepare();
+    window.scrollTo(Position.deltaX, 
+      this.scrollStart + (position*this.delta));
+  }
+});
 
 /* ------------- prepackaged effects ------------- */
 
-Effect.Fade =  function(element) {
-  options = {
+Effect.Fade = function(element) {
+  options = Object.extend({
   from: 1.0,
   to:   0.0,
   afterFinish: function(effect) 
     { Element.hide(effect.element);
       effect.setOpacity(1); } 
-  }.extend(arguments[1] || {});
+  }, arguments[1] || {});
   new Effect.Opacity(element,options);
 }
 
-Effect.Appear =  function(element) {
-  options = {
+Effect.Appear = function(element) {
+  options = Object.extend({
   from: 0.0,
   to:   1.0,
   beforeStart: function(effect)  
@@ -292,7 +334,7 @@ Effect.Appear =  function(element) {
       Element.show(effect.element); },
   afterUpdate: function(effect)  
     { Element.show(effect.element); }
-  }.extend(arguments[1] || {});
+  }, arguments[1] || {});
   new Effect.Opacity(element,options);
 }
 
@@ -310,34 +352,32 @@ Effect.Puff = function(element) {
 }
 
 Effect.BlindUp = function(element) {
-  $(element)._overflow = $(element).style.overflow || 'visible';
-  $(element).style.overflow = 'hidden';
+  Element.makeClipping(element);
   new Effect.Scale(element, 0, 
-    { scaleContent: false, 
+    Object.extend({ scaleContent: false, 
       scaleX: false, 
       afterFinish: function(effect) 
         { 
           Element.hide(effect.element);
-          effect.element.style.overflow = effect.element._overflow;
+          Element.undoClipping(effect.element);
         } 
-    }.extend(arguments[1] || {})
+    }, arguments[1] || {})
   );
 }
 
 Effect.BlindDown = function(element) {
   $(element).style.height   = '0px';
-  $(element)._overflow = $(element).style.overflow || 'visible';
-  $(element).style.overflow = 'hidden';
+  Element.makeClipping(element);
   Element.show(element);
   new Effect.Scale(element, 100, 
-    { scaleContent: false, 
+    Object.extend({ scaleContent: false, 
       scaleX: false, 
       scaleMode: 'contents',
       scaleFrom: 0,
       afterFinish: function(effect) {
-        effect.element.style.overflow = effect.element._overflow;
+        Element.undoClipping(effect.element);
       }
-    }.extend(arguments[1] || {})
+    }, arguments[1] || {})
   );
 }
 
@@ -346,7 +386,7 @@ Effect.SwitchOff = function(element) {
     { duration: 0.4,
      transition: Effect.Transitions.flicker,
      afterFinish: function(effect)
-      {  effect.element.style.overflow = 'hidden';
+      { effect.element.style.overflow = 'hidden';
         new Effect.Scale(effect.element, 1, 
          { duration: 0.3, scaleFromCenter: true,
           scaleX: false, scaleContent: false,
@@ -356,7 +396,7 @@ Effect.SwitchOff = function(element) {
           afterFinish: function(effect) { Element.hide(effect.element); }
          } )
       }
-    } )
+    } );
 }
 
 Effect.DropOut = function(element) {
@@ -386,13 +426,14 @@ Effect.Shake = function(element) {
 }
 
 Effect.SlideDown = function(element) {
-  $(element)._overflow = $(element).style.overflow || 'visible';
-  $(element).style.height   = '0px';
-  $(element).style.overflow = 'hidden';
-  $(element).firstChild.style.position = 'relative';
+  element = $(element);
+  element.style.height   = '0px';
+  Element.makeClipping(element);
+  Element.cleanWhitespace(element);
+  Element.makePositioned(element.firstChild);
   Element.show(element);
   new Effect.Scale(element, 100, 
-   { scaleContent: false, 
+   Object.extend({ scaleContent: false, 
     scaleX: false, 
     scaleMode: 'contents',
     scaleFrom: 0,
@@ -400,18 +441,19 @@ Effect.SlideDown = function(element) {
       { effect.element.firstChild.style.bottom = 
           (effect.originalHeight - effect.element.clientHeight) + 'px'; },
     afterFinish: function(effect) 
-      {  effect.element.style.overflow = effect.element._overflow; }
-    }.extend(arguments[1] || {})
+      {  Element.undoClipping(effect.element); }
+    }, arguments[1] || {})
   );
 }
   
 Effect.SlideUp = function(element) {
-  $(element)._overflow = $(element).style.overflow || 'visible';
-  $(element).style.overflow = 'hidden';
-  $(element).firstChild.style.position = 'relative';
+  element = $(element);
+  Element.makeClipping(element);
+  Element.cleanWhitespace(element);
+  Element.makePositioned(element.firstChild);
   Element.show(element);
   new Effect.Scale(element, 0, 
-   { scaleContent: false, 
+   Object.extend({ scaleContent: false, 
     scaleX: false, 
     afterUpdate: function(effect) 
       { effect.element.firstChild.style.bottom = 
@@ -419,9 +461,9 @@ Effect.SlideUp = function(element) {
     afterFinish: function(effect)
       { 
         Element.hide(effect.element);
-        effect.element.style.overflow = effect.element._overflow; 
+        Element.undoClipping(effect.element);
       }
-   }.extend(arguments[1] || {})
+   }, arguments[1] || {})
   );
 }
 
@@ -540,14 +582,14 @@ Effect.Pulsate = function(element) {
   var reverser   = function(pos){ return transition(1-Effect.Transitions.pulse(pos)) };
   reverser.bind(transition);
   new Effect.Opacity(element, 
-    {  duration: 3.0,
+    Object.extend(Object.extend({  duration: 3.0,
        afterFinish: function(effect) { Element.show(effect.element); }
-    }.extend(options).extend({transition: reverser}));
+    }, options), {transition: reverser}));
 }
 
 Effect.Fold = function(element) {
  $(element).style.overflow = 'hidden';
- new Effect.Scale(element, 5, {   
+ new Effect.Scale(element, 5, Object.extend({   
    scaleContent: false,
    scaleTo: 100,
    scaleX: false,
@@ -557,7 +599,7 @@ Effect.Fold = function(element) {
      scaleTo: 0,
      scaleY: false,
      afterFinish: function(effect) { Element.hide(effect.element) } });
- }}.extend(arguments[1] || {}));
+ }}, arguments[1] || {}));
 }
 
 // old: new Effect.ContentZoom(element, percent)