tor-browser

Visual.js (61967B)

---

/***

MochiKit.Visual 1.4

See <http://mochikit.com/> for documentation, downloads, license, etc.

(c) 2005 Bob Ippolito and others.  All rights Reserved.

***/

if (typeof(dojo) != 'undefined') {
   dojo.provide('MochiKit.Visual');
   dojo.require('MochiKit.Base');
   dojo.require('MochiKit.DOM');
   dojo.require('MochiKit.Style');
   dojo.require('MochiKit.Color');
   dojo.require('MochiKit.Position');
}

if (typeof(JSAN) != 'undefined') {
   JSAN.use("MochiKit.Base", []);
   JSAN.use("MochiKit.DOM", []);
   JSAN.use("MochiKit.Style", []);
   JSAN.use("MochiKit.Color", []);
   JSAN.use("MochiKit.Position", []);
}

try {
   if (typeof(MochiKit.Base) === 'undefined' ||
       typeof(MochiKit.DOM) === 'undefined' ||
       typeof(MochiKit.Style) === 'undefined' ||
       typeof(MochiKit.Position) === 'undefined' ||
       typeof(MochiKit.Color) === 'undefined') {
       throw "";
   }
} catch (e) {
   throw "MochiKit.Visual depends on MochiKit.Base, MochiKit.DOM, MochiKit.Style, MochiKit.Position and MochiKit.Color!";
}

if (typeof(MochiKit.Visual) == "undefined") {
   MochiKit.Visual = {};
}

MochiKit.Visual.NAME = "MochiKit.Visual";
MochiKit.Visual.VERSION = "1.4";

MochiKit.Visual.__repr__ = function () {
   return "[" + this.NAME + " " + this.VERSION + "]";
};

MochiKit.Visual.toString = function () {
   return this.__repr__();
};

MochiKit.Visual._RoundCorners = function (e, options) {
   e = MochiKit.DOM.getElement(e);
   this._setOptions(options);
   if (this.options.__unstable__wrapElement) {
       e = this._doWrap(e);
   }

   var color = this.options.color;
   var C = MochiKit.Color.Color;
   if (this.options.color === "fromElement") {
       color = C.fromBackground(e);
   } else if (!(color instanceof C)) {
       color = C.fromString(color);
   }
   this.isTransparent = (color.asRGB().a <= 0);

   var bgColor = this.options.bgColor;
   if (this.options.bgColor === "fromParent") {
       bgColor = C.fromBackground(e.offsetParent);
   } else if (!(bgColor instanceof C)) {
       bgColor = C.fromString(bgColor);
   }

   this._roundCornersImpl(e, color, bgColor);
};

MochiKit.Visual._RoundCorners.prototype = {
   _doWrap: function (e) {
       var parent = e.parentNode;
       var doc = MochiKit.DOM.currentDocument();
       if (typeof(doc.defaultView) === "undefined"
           || doc.defaultView === null) {
           return e;
       }
       var style = doc.defaultView.getComputedStyle(e, null);
       if (typeof(style) === "undefined" || style === null) {
           return e;
       }
       var wrapper = MochiKit.DOM.DIV({"style": {
           display: "block",
           // convert padding to margin
           marginTop: style.getPropertyValue("padding-top"),
           marginRight: style.getPropertyValue("padding-right"),
           marginBottom: style.getPropertyValue("padding-bottom"),
           marginLeft: style.getPropertyValue("padding-left"),
           // remove padding so the rounding looks right
           padding: "0px"
           /*
           paddingRight: "0px",
           paddingLeft: "0px"
           */
       }});
       wrapper.innerHTML = e.innerHTML;
       e.innerHTML = "";
       e.appendChild(wrapper);
       return e;
   },

   _roundCornersImpl: function (e, color, bgColor) {
       if (this.options.border) {
           this._renderBorder(e, bgColor);
       }
       if (this._isTopRounded()) {
           this._roundTopCorners(e, color, bgColor);
       }
       if (this._isBottomRounded()) {
           this._roundBottomCorners(e, color, bgColor);
       }
   },

   _renderBorder: function (el, bgColor) {
       var borderValue = "1px solid " + this._borderColor(bgColor);
       var borderL = "border-left: "  + borderValue;
       var borderR = "border-right: " + borderValue;
       var style = "style='" + borderL + ";" + borderR +  "'";
       el.innerHTML = "<div " + style + ">" + el.innerHTML + "</div>";
   },

   _roundTopCorners: function (el, color, bgColor) {
       var corner = this._createCorner(bgColor);
       for (var i = 0; i < this.options.numSlices; i++) {
           corner.appendChild(
               this._createCornerSlice(color, bgColor, i, "top")
           );
       }
       el.style.paddingTop = 0;
       el.insertBefore(corner, el.firstChild);
   },

   _roundBottomCorners: function (el, color, bgColor) {
       var corner = this._createCorner(bgColor);
       for (var i = (this.options.numSlices - 1); i >= 0; i--) {
           corner.appendChild(
               this._createCornerSlice(color, bgColor, i, "bottom")
           );
       }
       el.style.paddingBottom = 0;
       el.appendChild(corner);
   },

   _createCorner: function (bgColor) {
       var dom = MochiKit.DOM;
       return dom.DIV({style: {backgroundColor: bgColor.toString()}});
   },

   _createCornerSlice: function (color, bgColor, n, position) {
       var slice = MochiKit.DOM.SPAN();

       var inStyle = slice.style;
       inStyle.backgroundColor = color.toString();
       inStyle.display = "block";
       inStyle.height = "1px";
       inStyle.overflow = "hidden";
       inStyle.fontSize = "1px";

       var borderColor = this._borderColor(color, bgColor);
       if (this.options.border && n === 0) {
           inStyle.borderTopStyle = "solid";
           inStyle.borderTopWidth = "1px";
           inStyle.borderLeftWidth = "0px";
           inStyle.borderRightWidth = "0px";
           inStyle.borderBottomWidth = "0px";
           // assumes css compliant box model
           inStyle.height = "0px";
           inStyle.borderColor = borderColor.toString();
       } else if (borderColor) {
           inStyle.borderColor = borderColor.toString();
           inStyle.borderStyle = "solid";
           inStyle.borderWidth = "0px 1px";
       }

       if (!this.options.compact && (n == (this.options.numSlices - 1))) {
           inStyle.height = "2px";
       }

       this._setMargin(slice, n, position);
       this._setBorder(slice, n, position);

       return slice;
   },

   _setOptions: function (options) {
       this.options = {
           corners: "all",
           color: "fromElement",
           bgColor: "fromParent",
           blend: true,
           border: false,
           compact: false,
           __unstable__wrapElement: false
       };
       MochiKit.Base.update(this.options, options);

       this.options.numSlices = (this.options.compact ? 2 : 4);
   },

   _whichSideTop: function () {
       var corners = this.options.corners;
       if (this._hasString(corners, "all", "top")) {
           return "";
       }

       var has_tl = (corners.indexOf("tl") != -1);
       var has_tr = (corners.indexOf("tr") != -1);
       if (has_tl && has_tr) {
           return "";
       }
       if (has_tl) {
           return "left";
       }
       if (has_tr) {
           return "right";
       }
       return "";
   },

   _whichSideBottom: function () {
       var corners = this.options.corners;
       if (this._hasString(corners, "all", "bottom")) {
           return "";
       }

       var has_bl = (corners.indexOf('bl') != -1);
       var has_br = (corners.indexOf('br') != -1);
       if (has_bl && has_br) {
           return "";
       }
       if (has_bl) {
           return "left";
       }
       if (has_br) {
           return "right";
       }
       return "";
   },

   _borderColor: function (color, bgColor) {
       if (color == "transparent") {
           return bgColor;
       } else if (this.options.border) {
           return this.options.border;
       } else if (this.options.blend) {
           return bgColor.blendedColor(color);
       }
       return "";
   },


   _setMargin: function (el, n, corners) {
       var marginSize = this._marginSize(n) + "px";
       var whichSide = (
           corners == "top" ? this._whichSideTop() : this._whichSideBottom()
       );
       var style = el.style;

       if (whichSide == "left") {
           style.marginLeft = marginSize;
           style.marginRight = "0px";
       } else if (whichSide == "right") {
           style.marginRight = marginSize;
           style.marginLeft = "0px";
       } else {
           style.marginLeft = marginSize;
           style.marginRight = marginSize;
       }
   },

   _setBorder: function (el, n, corners) {
       var borderSize = this._borderSize(n) + "px";
       var whichSide = (
           corners == "top" ? this._whichSideTop() : this._whichSideBottom()
       );

       var style = el.style;
       if (whichSide == "left") {
           style.borderLeftWidth = borderSize;
           style.borderRightWidth = "0px";
       } else if (whichSide == "right") {
           style.borderRightWidth = borderSize;
           style.borderLeftWidth = "0px";
       } else {
           style.borderLeftWidth = borderSize;
           style.borderRightWidth = borderSize;
       }
   },

   _marginSize: function (n) {
       if (this.isTransparent) {
           return 0;
       }

       var o = this.options;
       if (o.compact && o.blend) {
           var smBlendedMarginSizes = [1, 0];
           return smBlendedMarginSizes[n];
       } else if (o.compact) {
           var compactMarginSizes = [2, 1];
           return compactMarginSizes[n];
       } else if (o.blend) {
           var blendedMarginSizes = [3, 2, 1, 0];
           return blendedMarginSizes[n];
       } else {
           var marginSizes = [5, 3, 2, 1];
           return marginSizes[n];
       }
   },

   _borderSize: function (n) {
       var o = this.options;
       var borderSizes;
       if (o.compact && (o.blend || this.isTransparent)) {
           return 1;
       } else if (o.compact) {
           borderSizes = [1, 0];
       } else if (o.blend) {
           borderSizes = [2, 1, 1, 1];
       } else if (o.border) {
           borderSizes = [0, 2, 0, 0];
       } else if (this.isTransparent) {
           borderSizes = [5, 3, 2, 1];
       } else {
           return 0;
       }
       return borderSizes[n];
   },

   _hasString: function (str) {
       for (var i = 1; i< arguments.length; i++) {
           if (str.indexOf(arguments[i]) != -1) {
               return true;
           }
       }
       return false;
   },

   _isTopRounded: function () {
       return this._hasString(this.options.corners,
           "all", "top", "tl", "tr"
       );
   },

   _isBottomRounded: function () {
       return this._hasString(this.options.corners,
           "all", "bottom", "bl", "br"
       );
   },

   _hasSingleTextChild: function (el) {
       return (el.childNodes.length == 1 && el.childNodes[0].nodeType == 3);
   }
};

/** @id MochiKit.Visual.roundElement */
MochiKit.Visual.roundElement = function (e, options) {
   new MochiKit.Visual._RoundCorners(e, options);
};

/** @id MochiKit.Visual.roundClass */
MochiKit.Visual.roundClass = function (tagName, className, options) {
   var elements = MochiKit.DOM.getElementsByTagAndClassName(
       tagName, className
   );
   for (var i = 0; i < elements.length; i++) {
       MochiKit.Visual.roundElement(elements[i], options);
   }
};

/** @id MochiKit.Visual.tagifyText */
MochiKit.Visual.tagifyText = function (element, /* optional */tagifyStyle) {
   /***

   Change a node text to character in tags.

   @param tagifyStyle: the style to apply to character nodes, default to
   'position: relative'.

   ***/
   tagifyStyle = tagifyStyle || 'position:relative';
   if (/MSIE/.test(navigator.userAgent)) {
       tagifyStyle += ';zoom:1';
   }
   element = MochiKit.DOM.getElement(element);
   var ma = MochiKit.Base.map;
   ma(function (child) {
       if (child.nodeType == 3) {
           ma(function (character) {
               element.insertBefore(
                   MochiKit.DOM.SPAN({style: tagifyStyle},
                       character == ' ' ? String.fromCharCode(160) : character), child);
           }, child.nodeValue.split(''));
           MochiKit.DOM.removeElement(child);
       }
   }, element.childNodes);
};

/** @id MochiKit.Visual.forceRerendering */
MochiKit.Visual.forceRerendering = function (element) {
   try {
       element = MochiKit.DOM.getElement(element);
       var n = document.createTextNode(' ');
       element.appendChild(n);
       element.removeChild(n);
   } catch(e) {
   }
};

/** @id MochiKit.Visual.multiple */
MochiKit.Visual.multiple = function (elements, effect, /* optional */options) {
   /***

   Launch the same effect subsequently on given elements.

   ***/
   options = MochiKit.Base.update({
       speed: 0.1, delay: 0.0
   }, options || {});
   var masterDelay = options.delay;
   var index = 0;
   MochiKit.Base.map(function (innerelement) {
       options.delay = index * options.speed + masterDelay;
       new effect(innerelement, options);
       index += 1;
   }, elements);
};

MochiKit.Visual.PAIRS = {
   'slide': ['slideDown', 'slideUp'],
   'blind': ['blindDown', 'blindUp'],
   'appear': ['appear', 'fade'],
   'size': ['grow', 'shrink']
};

/** @id MochiKit.Visual.toggle */
MochiKit.Visual.toggle = function (element, /* optional */effect, /* optional */options) {
   /***

   Toggle an item between two state depending of its visibility, making
   a effect between these states. Default  effect is 'appear', can be
   'slide' or 'blind'.

   ***/
   element = MochiKit.DOM.getElement(element);
   effect = (effect || 'appear').toLowerCase();
   options = MochiKit.Base.update({
       queue: {position: 'end', scope: (element.id || 'global'), limit: 1}
   }, options || {});
   var v = MochiKit.Visual;
   v[MochiKit.Style.getStyle(element, 'display') != 'none' ?
     v.PAIRS[effect][1] : v.PAIRS[effect][0]](element, options);
};

/***

Transitions: define functions calculating variations depending of a position.

***/

MochiKit.Visual.Transitions = {};

/** @id MochiKit.Visual.Transitions.linear */
MochiKit.Visual.Transitions.linear = function (pos) {
   return pos;
};

/** @id MochiKit.Visual.Transitions.sinoidal */
MochiKit.Visual.Transitions.sinoidal = function (pos) {
   return (-Math.cos(pos*Math.PI)/2) + 0.5;
};

/** @id MochiKit.Visual.Transitions.reverse */
MochiKit.Visual.Transitions.reverse = function (pos) {
   return 1 - pos;
};

/** @id MochiKit.Visual.Transitions.flicker */
MochiKit.Visual.Transitions.flicker = function (pos) {
   return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4;
};

/** @id MochiKit.Visual.Transitions.wobble */
MochiKit.Visual.Transitions.wobble = function (pos) {
   return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
};

/** @id MochiKit.Visual.Transitions.pulse */
MochiKit.Visual.Transitions.pulse = function (pos, pulses) {
   if (!pulses) {
       return (Math.floor(pos*10) % 2 === 0 ?
           (pos*10 - Math.floor(pos*10)) : 1 - (pos*10 - Math.floor(pos*10)));
   }
   return (Math.round((pos % (1/pulses)) * pulses) == 0 ?
           ((pos * pulses * 2) - Math.floor(pos * pulses * 2)) :
       1 - ((pos * pulses * 2) - Math.floor(pos * pulses * 2)));
};

/** @id MochiKit.Visual.Transitions.none */
MochiKit.Visual.Transitions.none = function (pos) {
   return 0;
};

/** @id MochiKit.Visual.Transitions.full */
MochiKit.Visual.Transitions.full = function (pos) {
   return 1;
};

/***

Core effects

***/

MochiKit.Visual.ScopedQueue = function () {
   var cls = arguments.callee;
   if (!(this instanceof cls)) {
       return new cls();
   }
   this.__init__();
};

MochiKit.Base.update(MochiKit.Visual.ScopedQueue.prototype, {
   __init__: function () {
       this.effects = [];
       this.interval = null;
   },

   /** @id MochiKit.Visual.ScopedQueue.prototype.add */
   add: function (effect) {
       var timestamp = new Date().getTime();

       var position = (typeof(effect.options.queue) == 'string') ?
           effect.options.queue : effect.options.queue.position;

       var ma = MochiKit.Base.map;
       switch (position) {
           case 'front':
               // move unstarted effects after this effect
               ma(function (e) {
                   if (e.state == 'idle') {
                       e.startOn += effect.finishOn;
                       e.finishOn += effect.finishOn;
                   }
               }, this.effects);
               break;
           case 'end':
               var finish;
               // start effect after last queued effect has finished
               ma(function (e) {
                   var i = e.finishOn;
                   if (i >= (finish || i)) {
                       finish = i;
                   }
               }, this.effects);
               timestamp = finish || timestamp;
               break;
           case 'break':
               ma(function (e) {
                   e.finalize();
               }, this.effects);
               break;
       }

       effect.startOn += timestamp;
       effect.finishOn += timestamp;
       if (!effect.options.queue.limit ||
           this.effects.length < effect.options.queue.limit) {
           this.effects.push(effect);
       }

       if (!this.interval) {
           this.interval = this.startLoop(MochiKit.Base.bind(this.loop, this),
                                       40);
       }
   },

   /** @id MochiKit.Visual.ScopedQueue.prototype.startLoop */
   startLoop: function (func, interval) {
       return setInterval(func, interval);
   },

   /** @id MochiKit.Visual.ScopedQueue.prototype.remove */
   remove: function (effect) {
       this.effects = MochiKit.Base.filter(function (e) {
           return e != effect;
       }, this.effects);
       if (!this.effects.length) {
           this.stopLoop(this.interval);
           this.interval = null;
       }
   },

   /** @id MochiKit.Visual.ScopedQueue.prototype.stopLoop */
   stopLoop: function (interval) {
       clearInterval(interval);
   },

   /** @id MochiKit.Visual.ScopedQueue.prototype.loop */
   loop: function () {
       var timePos = new Date().getTime();
       MochiKit.Base.map(function (effect) {
           effect.loop(timePos);
       }, this.effects);
   }
});

MochiKit.Visual.Queues = {
   instances: {},

   get: function (queueName) {
       if (typeof(queueName) != 'string') {
           return queueName;
       }

       if (!this.instances[queueName]) {
           this.instances[queueName] = new MochiKit.Visual.ScopedQueue();
       }
       return this.instances[queueName];
   }
};

MochiKit.Visual.Queue = MochiKit.Visual.Queues.get('global');

MochiKit.Visual.DefaultOptions = {
   transition: MochiKit.Visual.Transitions.sinoidal,
   duration: 1.0,  // seconds
   fps: 25.0,  // max. 25fps due to MochiKit.Visual.Queue implementation
   sync: false,  // true for combining
   from: 0.0,
   to: 1.0,
   delay: 0.0,
   queue: 'parallel'
};

MochiKit.Visual.Base = function () {};

MochiKit.Visual.Base.prototype = {
   /***

   Basic class for all Effects. Define a looping mechanism called for each step
   of an effect. Don't instantiate it, only subclass it.

   ***/

   __class__ : MochiKit.Visual.Base,

   /** @id MochiKit.Visual.Base.prototype.start */
   start: function (options) {
       var v = MochiKit.Visual;
       this.options = MochiKit.Base.setdefault(options || {},
                                               v.DefaultOptions);
       this.currentFrame = 0;
       this.state = 'idle';
       this.startOn = this.options.delay*1000;
       this.finishOn = this.startOn + (this.options.duration*1000);
       this.event('beforeStart');
       if (!this.options.sync) {
           v.Queues.get(typeof(this.options.queue) == 'string' ?
               'global' : this.options.queue.scope).add(this);
       }
   },

   /** @id MochiKit.Visual.Base.prototype.loop */
   loop: function (timePos) {
       if (timePos >= this.startOn) {
           if (timePos >= this.finishOn) {
               return this.finalize();
           }
           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;
           }
       }
   },

   /** @id MochiKit.Visual.Base.prototype.render */
   render: function (pos) {
       if (this.state == 'idle') {
           this.state = 'running';
           this.event('beforeSetup');
           this.setup();
           this.event('afterSetup');
       }
       if (this.state == 'running') {
           if (this.options.transition) {
               pos = this.options.transition(pos);
           }
           pos *= (this.options.to - this.options.from);
           pos += this.options.from;
           this.event('beforeUpdate');
           this.update(pos);
           this.event('afterUpdate');
       }
   },

   /** @id MochiKit.Visual.Base.prototype.cancel */
   cancel: function () {
       if (!this.options.sync) {
           MochiKit.Visual.Queues.get(typeof(this.options.queue) == 'string' ?
               'global' : this.options.queue.scope).remove(this);
       }
       this.state = 'finished';
   },

   /** @id MochiKit.Visual.Base.prototype.finalize */
   finalize: function () {
       this.render(1.0);
       this.cancel();
       this.event('beforeFinish');
       this.finish();
       this.event('afterFinish');
   },

   setup: function () {
   },

   finish: function () {
   },

   update: function (position) {
   },

   /** @id MochiKit.Visual.Base.prototype.event */
   event: function (eventName) {
       if (this.options[eventName + 'Internal']) {
           this.options[eventName + 'Internal'](this);
       }
       if (this.options[eventName]) {
           this.options[eventName](this);
       }
   },

   /** @id MochiKit.Visual.Base.prototype.repr */
   repr: function () {
       return '[' + this.__class__.NAME + ', options:' +
              MochiKit.Base.repr(this.options) + ']';
   }
};

   /** @id MochiKit.Visual.Parallel */
MochiKit.Visual.Parallel = function (effects, options) {
   var cls = arguments.callee;
   if (!(this instanceof cls)) {
       return new cls(effects, options);
   }

   this.__init__(effects, options);
};

MochiKit.Visual.Parallel.prototype = new MochiKit.Visual.Base();

MochiKit.Base.update(MochiKit.Visual.Parallel.prototype, {
   /***

   Run multiple effects at the same time.

   ***/

   __class__ : MochiKit.Visual.Parallel,

   __init__: function (effects, options) {
       this.effects = effects || [];
       this.start(options);
   },

   /** @id MochiKit.Visual.Parallel.prototype.update */
   update: function (position) {
       MochiKit.Base.map(function (effect) {
           effect.render(position);
       }, this.effects);
   },

   /** @id MochiKit.Visual.Parallel.prototype.finish */
   finish: function () {
       MochiKit.Base.map(function (effect) {
           effect.finalize();
       }, this.effects);
   }
});

/** @id MochiKit.Visual.Opacity */
MochiKit.Visual.Opacity = function (element, options) {
   var cls = arguments.callee;
   if (!(this instanceof cls)) {
       return new cls(element, options);
   }
   this.__init__(element, options);
};

MochiKit.Visual.Opacity.prototype = new MochiKit.Visual.Base();

MochiKit.Base.update(MochiKit.Visual.Opacity.prototype, {
   /***

   Change the opacity of an element.

   @param options: 'from' and 'to' change the starting and ending opacities.
   Must be between 0.0 and 1.0. Default to current opacity and 1.0.

   ***/

   __class__ : MochiKit.Visual.Opacity,

   __init__: function (element, /* optional */options) {
       var b = MochiKit.Base;
       var s = MochiKit.Style;
       this.element = MochiKit.DOM.getElement(element);
       // make this work on IE on elements without 'layout'
       if (this.element.currentStyle &&
           (!this.element.currentStyle.hasLayout)) {
           s.setStyle(this.element, {zoom: 1});
       }
       options = b.update({
           from: s.getStyle(this.element, 'opacity') || 0.0,
           to: 1.0
       }, options || {});
       this.start(options);
   },

   /** @id MochiKit.Visual.Opacity.prototype.update */
   update: function (position) {
       MochiKit.Style.setStyle(this.element, {'opacity': position});
   }
});

/**  @id MochiKit.Visual.Move.prototype */
MochiKit.Visual.Move = function (element, options) {
   var cls = arguments.callee;
   if (!(this instanceof cls)) {
       return new cls(element, options);
   }
   this.__init__(element, options);
};

MochiKit.Visual.Move.prototype = new MochiKit.Visual.Base();

MochiKit.Base.update(MochiKit.Visual.Move.prototype, {
   /***

   Move an element between its current position to a defined position

   @param options: 'x' and 'y' for final positions, default to 0, 0.

   ***/

   __class__ : MochiKit.Visual.Move,

   __init__: function (element, /* optional */options) {
       this.element = MochiKit.DOM.getElement(element);
       options = MochiKit.Base.update({
           x: 0,
           y: 0,
           mode: 'relative'
       }, options || {});
       this.start(options);
   },

   /** @id MochiKit.Visual.Move.prototype.setup */
   setup: function () {
       // Bug in Opera: Opera returns the 'real' position of a static element
       // or relative element that does not have top/left explicitly set.
       // ==> Always set top and left for position relative elements in your
       // stylesheets (to 0 if you do not need them)
       MochiKit.DOM.makePositioned(this.element);

       var s = this.element.style;
       var originalVisibility = s.visibility;
       var originalDisplay = s.display;
       if (originalDisplay == 'none') {
           s.visibility = 'hidden';
           s.display = '';
       }

       this.originalLeft = parseFloat(MochiKit.Style.getStyle(this.element, 'left') || '0');
       this.originalTop = parseFloat(MochiKit.Style.getStyle(this.element, 'top') || '0');

       if (this.options.mode == 'absolute') {
           // absolute movement, so we need to calc deltaX and deltaY
           this.options.x -= this.originalLeft;
           this.options.y -= this.originalTop;
       }
       if (originalDisplay == 'none') {
           s.visibility = originalVisibility;
           s.display = originalDisplay;
       }
   },

   /** @id MochiKit.Visual.Move.prototype.update */
   update: function (position) {
       MochiKit.Style.setStyle(this.element, {
           left: Math.round(this.options.x * position + this.originalLeft) + 'px',
           top: Math.round(this.options.y * position + this.originalTop) + 'px'
       });
   }
});

/** @id MochiKit.Visual.Scale */
MochiKit.Visual.Scale = function (element, percent, options) {
   var cls = arguments.callee;
   if (!(this instanceof cls)) {
       return new cls(element, percent, options);
   }
   this.__init__(element, percent, options);
};

MochiKit.Visual.Scale.prototype = new MochiKit.Visual.Base();

MochiKit.Base.update(MochiKit.Visual.Scale.prototype, {
   /***

   Change the size of an element.

   @param percent: final_size = percent*original_size

   @param options: several options changing scale behaviour

   ***/

   __class__ : MochiKit.Visual.Scale,

   __init__: function (element, percent, /* optional */options) {
       this.element = MochiKit.DOM.getElement(element);
       options = MochiKit.Base.update({
           scaleX: true,
           scaleY: true,
           scaleContent: true,
           scaleFromCenter: false,
           scaleMode: 'box',  // 'box' or 'contents' or {} with provided values
           scaleFrom: 100.0,
           scaleTo: percent
       }, options || {});
       this.start(options);
   },

   /** @id MochiKit.Visual.Scale.prototype.setup */
   setup: function () {
       this.restoreAfterFinish = this.options.restoreAfterFinish || false;
       this.elementPositioning = MochiKit.Style.getStyle(this.element,
                                                       'position');

       var ma = MochiKit.Base.map;
       var b = MochiKit.Base.bind;
       this.originalStyle = {};
       ma(b(function (k) {
               this.originalStyle[k] = this.element.style[k];
           }, this), ['top', 'left', 'width', 'height', 'fontSize']);

       this.originalTop = this.element.offsetTop;
       this.originalLeft = this.element.offsetLeft;

       var fontSize = MochiKit.Style.getStyle(this.element,
                                            'font-size') || '100%';
       ma(b(function (fontSizeType) {
           if (fontSize.indexOf(fontSizeType) > 0) {
               this.fontSize = parseFloat(fontSize);
               this.fontSizeType = fontSizeType;
           }
       }, this), ['em', 'px', '%']);

       this.factor = (this.options.scaleTo - this.options.scaleFrom)/100;

       if (/^content/.test(this.options.scaleMode)) {
           this.dims = [this.element.scrollHeight, this.element.scrollWidth];
       } else if (this.options.scaleMode == 'box') {
           this.dims = [this.element.offsetHeight, this.element.offsetWidth];
       } else {
           this.dims = [this.options.scaleMode.originalHeight,
                        this.options.scaleMode.originalWidth];
       }
   },

   /** @id MochiKit.Visual.Scale.prototype.update */
   update: function (position) {
       var currentScale = (this.options.scaleFrom/100.0) +
                          (this.factor * position);
       if (this.options.scaleContent && this.fontSize) {
           MochiKit.Style.setStyle(this.element, {
               fontSize: this.fontSize * currentScale + this.fontSizeType
           });
       }
       this.setDimensions(this.dims[0] * currentScale,
                          this.dims[1] * currentScale);
   },

   /** @id MochiKit.Visual.Scale.prototype.finish */
   finish: function () {
       if (this.restoreAfterFinish) {
           MochiKit.Style.setStyle(this.element, this.originalStyle);
       }
   },

   /** @id MochiKit.Visual.Scale.prototype.setDimensions */
   setDimensions: function (height, width) {
       var d = {};
       var r = Math.round;
       if (/MSIE/.test(navigator.userAgent)) {
           r = Math.ceil;
       }
       if (this.options.scaleX) {
           d.width = r(width) + 'px';
       }
       if (this.options.scaleY) {
           d.height = r(height) + 'px';
       }
       if (this.options.scaleFromCenter) {
           var topd = (height - this.dims[0])/2;
           var leftd = (width - this.dims[1])/2;
           if (this.elementPositioning == 'absolute') {
               if (this.options.scaleY) {
                   d.top = this.originalTop - topd + 'px';
               }
               if (this.options.scaleX) {
                   d.left = this.originalLeft - leftd + 'px';
               }
           } else {
               if (this.options.scaleY) {
                   d.top = -topd + 'px';
               }
               if (this.options.scaleX) {
                   d.left = -leftd + 'px';
               }
           }
       }
       MochiKit.Style.setStyle(this.element, d);
   }
});

/** @id MochiKit.Visual.Highlight */
MochiKit.Visual.Highlight = function (element, options) {
   var cls = arguments.callee;
   if (!(this instanceof cls)) {
       return new cls(element, options);
   }
   this.__init__(element, options);
};

MochiKit.Visual.Highlight.prototype = new MochiKit.Visual.Base();

MochiKit.Base.update(MochiKit.Visual.Highlight.prototype, {
   /***

   Highlight an item of the page.

   @param options: 'startcolor' for choosing highlighting color, default
   to '#ffff99'.

   ***/

   __class__ : MochiKit.Visual.Highlight,

   __init__: function (element, /* optional */options) {
       this.element = MochiKit.DOM.getElement(element);
       options = MochiKit.Base.update({
           startcolor: '#ffff99'
       }, options || {});
       this.start(options);
   },

   /** @id MochiKit.Visual.Highlight.prototype.setup */
   setup: function () {
       var b = MochiKit.Base;
       var s = MochiKit.Style;
       // Prevent executing on elements not in the layout flow
       if (s.getStyle(this.element, 'display') == 'none') {
           this.cancel();
           return;
       }
       // Disable background image during the effect
       this.oldStyle = {
           backgroundImage: s.getStyle(this.element, 'background-image')
       };
       s.setStyle(this.element, {
           backgroundImage: 'none'
       });

       if (!this.options.endcolor) {
           this.options.endcolor =
               MochiKit.Color.Color.fromBackground(this.element).toHexString();
       }
       if (b.isUndefinedOrNull(this.options.restorecolor)) {
           this.options.restorecolor = s.getStyle(this.element,
                                                  'background-color');
       }
       // init color calculations
       this._base = b.map(b.bind(function (i) {
           return parseInt(
               this.options.startcolor.slice(i*2 + 1, i*2 + 3), 16);
       }, this), [0, 1, 2]);
       this._delta = b.map(b.bind(function (i) {
           return parseInt(this.options.endcolor.slice(i*2 + 1, i*2 + 3), 16)
               - this._base[i];
       }, this), [0, 1, 2]);
   },

   /** @id MochiKit.Visual.Highlight.prototype.update */
   update: function (position) {
       var m = '#';
       MochiKit.Base.map(MochiKit.Base.bind(function (i) {
           m += MochiKit.Color.toColorPart(Math.round(this._base[i] +
                                           this._delta[i]*position));
       }, this), [0, 1, 2]);
       MochiKit.Style.setStyle(this.element, {
           backgroundColor: m
       });
   },

   /** @id MochiKit.Visual.Highlight.prototype.finish */
   finish: function () {
       MochiKit.Style.setStyle(this.element,
           MochiKit.Base.update(this.oldStyle, {
               backgroundColor: this.options.restorecolor
       }));
   }
});

/** @id MochiKit.Visual.ScrollTo */
MochiKit.Visual.ScrollTo = function (element, options) {
   var cls = arguments.callee;
   if (!(this instanceof cls)) {
       return new cls(element, options);
   }
   this.__init__(element, options);
};

MochiKit.Visual.ScrollTo.prototype = new MochiKit.Visual.Base();

MochiKit.Base.update(MochiKit.Visual.ScrollTo.prototype, {
   /***

   Scroll to an element in the page.

   ***/

   __class__ : MochiKit.Visual.ScrollTo,

   __init__: function (element, /* optional */options) {
       this.element = MochiKit.DOM.getElement(element);
       this.start(options || {});
   },

   /** @id MochiKit.Visual.ScrollTo.prototype.setup */
   setup: function () {
       var p = MochiKit.Position;
       p.prepare();
       var offsets = p.cumulativeOffset(this.element);
       if (this.options.offset) {
           offsets.y += this.options.offset;
       }
       var max;
       if (window.innerHeight) {
           max = window.innerHeight - window.height;
       } else if (document.documentElement &&
                  document.documentElement.clientHeight) {
           max = document.documentElement.clientHeight -
                 document.body.scrollHeight;
       } else if (document.body) {
           max = document.body.clientHeight - document.body.scrollHeight;
       }
       this.scrollStart = p.windowOffset.y;
       this.delta = (offsets.y > max ? max : offsets.y) - this.scrollStart;
   },

   /** @id MochiKit.Visual.ScrollTo.prototype.update */
   update: function (position) {
       var p = MochiKit.Position;
       p.prepare();
       window.scrollTo(p.windowOffset.x, this.scrollStart + (position * this.delta));
   }
});

MochiKit.Visual.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/;

MochiKit.Visual.Morph = function (element, options) {
   var cls = arguments.callee;
   if (!(this instanceof cls)) {
       return new cls(element, options);
   }
   this.__init__(element, options);
};

MochiKit.Visual.Morph.prototype = new MochiKit.Visual.Base();

MochiKit.Base.update(MochiKit.Visual.Morph.prototype, {
   /***

   Morph effect: make a transformation from current style to the given style,
   automatically making a transition between the two.

   ***/

   __class__ : MochiKit.Visual.Morph,

   __init__: function (element, /* optional */options) {
       this.element = MochiKit.DOM.getElement(element);
       this.start(options || {});
   },

   /** @id MochiKit.Visual.Morph.prototype.setup */
   setup: function () {
       var b = MochiKit.Base;
       var style = this.options.style;
       this.styleStart = {};
       this.styleEnd = {};
       this.units = {};
       var value, unit;
       for (var s in style) {
           value = style[s];
           s = b.camelize(s);
           if (MochiKit.Visual.CSS_LENGTH.test(value)) {
               var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/);
               value = parseFloat(components[1]);
               unit = (components.length == 3) ? components[2] : null;
               this.styleEnd[s] = value;
               this.units[s] = unit;
               value = MochiKit.Style.getStyle(this.element, s);
               components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/);
               value = parseFloat(components[1]);
               this.styleStart[s] = value;
           } else {
               var c = MochiKit.Color.Color;
               value = c.fromString(value);
               if (value) {
                   this.units[s] = "color";
                   this.styleEnd[s] = value.toHexString();
                   value = MochiKit.Style.getStyle(this.element, s);
                   this.styleStart[s] = c.fromString(value).toHexString();

                   this.styleStart[s] = b.map(b.bind(function (i) {
                       return parseInt(
                           this.styleStart[s].slice(i*2 + 1, i*2 + 3), 16);
                   }, this), [0, 1, 2]);
                   this.styleEnd[s] = b.map(b.bind(function (i) {
                       return parseInt(
                           this.styleEnd[s].slice(i*2 + 1, i*2 + 3), 16);
                   }, this), [0, 1, 2]);
               }
           }
       }
   },

   /** @id MochiKit.Visual.Morph.prototype.update */
   update: function (position) {
       var value;
       for (var s in this.styleStart) {
           if (this.units[s] == "color") {
               var m = '#';
               var start = this.styleStart[s];
               var end = this.styleEnd[s];
               MochiKit.Base.map(MochiKit.Base.bind(function (i) {
                   m += MochiKit.Color.toColorPart(Math.round(start[i] +
                                                   (end[i] - start[i])*position));
               }, this), [0, 1, 2]);
               this.element.style[s] = m;
           } else {
               value = this.styleStart[s] + Math.round((this.styleEnd[s] - this.styleStart[s]) * position * 1000) / 1000 + this.units[s];
               this.element.style[s] = value;
           }
       }
   }
});

/***

Combination effects.

***/

/** @id MochiKit.Visual.fade */
MochiKit.Visual.fade = function (element, /* optional */ options) {
   /***

   Fade a given element: change its opacity and hide it in the end.

   @param options: 'to' and 'from' to change opacity.

   ***/
   var s = MochiKit.Style;
   var oldOpacity = s.getStyle(element, 'opacity');
   options = MochiKit.Base.update({
       from: s.getStyle(element, 'opacity') || 1.0,
       to: 0.0,
       afterFinishInternal: function (effect) {
           if (effect.options.to !== 0) {
               return;
           }
           s.hideElement(effect.element);
           s.setStyle(effect.element, {'opacity': oldOpacity});
       }
   }, options || {});
   return new MochiKit.Visual.Opacity(element, options);
};

/** @id MochiKit.Visual.appear */
MochiKit.Visual.appear = function (element, /* optional */ options) {
   /***

   Make an element appear.

   @param options: 'to' and 'from' to change opacity.

   ***/
   var s = MochiKit.Style;
   var v = MochiKit.Visual;
   options = MochiKit.Base.update({
       from: (s.getStyle(element, 'display') == 'none' ? 0.0 :
              s.getStyle(element, 'opacity') || 0.0),
       to: 1.0,
       // force Safari to render floated elements properly
       afterFinishInternal: function (effect) {
           v.forceRerendering(effect.element);
       },
       beforeSetupInternal: function (effect) {
           s.setStyle(effect.element, {'opacity': effect.options.from});
           s.showElement(effect.element);
       }
   }, options || {});
   return new v.Opacity(element, options);
};

/** @id MochiKit.Visual.puff */
MochiKit.Visual.puff = function (element, /* optional */ options) {
   /***

   'Puff' an element: grow it to double size, fading it and make it hidden.

   ***/
   var s = MochiKit.Style;
   var v = MochiKit.Visual;
   element = MochiKit.DOM.getElement(element);
   var oldStyle = {
       position: s.getStyle(element, 'position'),
       top: element.style.top,
       left: element.style.left,
       width: element.style.width,
       height: element.style.height,
       opacity: s.getStyle(element, 'opacity')
   };
   options = MochiKit.Base.update({
       beforeSetupInternal: function (effect) {
           MochiKit.Position.absolutize(effect.effects[0].element);
       },
       afterFinishInternal: function (effect) {
           s.hideElement(effect.effects[0].element);
           s.setStyle(effect.effects[0].element, oldStyle);
       },
       scaleContent: true,
       scaleFromCenter: true
   }, options || {});
   return new v.Parallel(
       [new v.Scale(element, 200,
           {sync: true, scaleFromCenter: options.scaleFromCenter,
            scaleContent: options.scaleContent, restoreAfterFinish: true}),
        new v.Opacity(element, {sync: true, to: 0.0 })],
       options);
};

/** @id MochiKit.Visual.blindUp */
MochiKit.Visual.blindUp = function (element, /* optional */ options) {
   /***

   Blind an element up: change its vertical size to 0.

   ***/
   var d = MochiKit.DOM;
   element = d.getElement(element);
   var elemClip = d.makeClipping(element);
   options = MochiKit.Base.update({
       scaleContent: false,
       scaleX: false,
       restoreAfterFinish: true,
       afterFinishInternal: function (effect) {
           MochiKit.Style.hideElement(effect.element);
           d.undoClipping(effect.element, elemClip);
       }
   }, options || {});

   return new MochiKit.Visual.Scale(element, 0, options);
};

/** @id MochiKit.Visual.blindDown */
MochiKit.Visual.blindDown = function (element, /* optional */ options) {
   /***

   Blind an element down: restore its vertical size.

   ***/
   var d = MochiKit.DOM;
   var s = MochiKit.Style;
   element = d.getElement(element);
   var elementDimensions = s.getElementDimensions(element);
   var elemClip;
   options = MochiKit.Base.update({
       scaleContent: false,
       scaleX: false,
       scaleFrom: 0,
       scaleMode: {originalHeight: elementDimensions.h,
                   originalWidth: elementDimensions.w},
       restoreAfterFinish: true,
       afterSetupInternal: function (effect) {
           elemClip = d.makeClipping(effect.element);
           s.setStyle(effect.element, {height: '0px'});
           s.showElement(effect.element);
       },
       afterFinishInternal: function (effect) {
           d.undoClipping(effect.element, elemClip);
       }
   }, options || {});
   return new MochiKit.Visual.Scale(element, 100, options);
};

/** @id MochiKit.Visual.switchOff */
MochiKit.Visual.switchOff = function (element, /* optional */ options) {
   /***

   Apply a switch-off-like effect.

   ***/
   var d = MochiKit.DOM;
   element = d.getElement(element);
   var oldOpacity = MochiKit.Style.getStyle(element, 'opacity');
   var elemClip;
   options = MochiKit.Base.update({
       duration: 0.3,
       scaleFromCenter: true,
       scaleX: false,
       scaleContent: false,
       restoreAfterFinish: true,
       beforeSetupInternal: function (effect) {
           d.makePositioned(effect.element);
           elemClip = d.makeClipping(effect.element);
       },
       afterFinishInternal: function (effect) {
           MochiKit.Style.hideElement(effect.element);
           d.undoClipping(effect.element, elemClip);
           d.undoPositioned(effect.element);
           MochiKit.Style.setStyle(effect.element, {'opacity': oldOpacity});
       }
   }, options || {});
   var v = MochiKit.Visual;
   return new v.appear(element, {
       duration: 0.4,
       from: 0,
       transition: v.Transitions.flicker,
       afterFinishInternal: function (effect) {
           new v.Scale(effect.element, 1, options);
       }
   });
};

/** @id MochiKit.Visual.dropOut */
MochiKit.Visual.dropOut = function (element, /* optional */ options) {
   /***

   Make an element fall and disappear.

   ***/
   var d = MochiKit.DOM;
   var s = MochiKit.Style;
   element = d.getElement(element);
   var oldStyle = {
       top: s.getStyle(element, 'top'),
       left: s.getStyle(element, 'left'),
       opacity: s.getStyle(element, 'opacity')
   };

   options = MochiKit.Base.update({
       duration: 0.5,
       distance: 100,
       beforeSetupInternal: function (effect) {
           d.makePositioned(effect.effects[0].element);
       },
       afterFinishInternal: function (effect) {
           s.hideElement(effect.effects[0].element);
           d.undoPositioned(effect.effects[0].element);
           s.setStyle(effect.effects[0].element, oldStyle);
       }
   }, options || {});
   var v = MochiKit.Visual;
   return new v.Parallel(
       [new v.Move(element, {x: 0, y: options.distance, sync: true}),
        new v.Opacity(element, {sync: true, to: 0.0})],
       options);
};

/** @id MochiKit.Visual.shake */
MochiKit.Visual.shake = function (element, /* optional */ options) {
   /***

   Move an element from left to right several times.

   ***/
   var d = MochiKit.DOM;
   var v = MochiKit.Visual;
   var s = MochiKit.Style;
   element = d.getElement(element);
   options = MochiKit.Base.update({
       x: -20,
       y: 0,
       duration: 0.05,
       afterFinishInternal: function (effect) {
           d.undoPositioned(effect.element);
           s.setStyle(effect.element, oldStyle);
       }
   }, options || {});
   var oldStyle = {
       top: s.getStyle(element, 'top'),
       left: s.getStyle(element, 'left') };
       return new v.Move(element,
         {x: 20, y: 0, duration: 0.05, afterFinishInternal: function (effect) {
       new v.Move(effect.element,
         {x: -40, y: 0, duration: 0.1, afterFinishInternal: function (effect) {
       new v.Move(effect.element,
          {x: 40, y: 0, duration: 0.1, afterFinishInternal: function (effect) {
       new v.Move(effect.element,
         {x: -40, y: 0, duration: 0.1, afterFinishInternal: function (effect) {
       new v.Move(effect.element,
          {x: 40, y: 0, duration: 0.1, afterFinishInternal: function (effect) {
       new v.Move(effect.element, options
       ) }}) }}) }}) }}) }});
};

/** @id MochiKit.Visual.slideDown */
MochiKit.Visual.slideDown = function (element, /* optional */ options) {
   /***

   Slide an element down.
   It needs to have the content of the element wrapped in a container
   element with fixed height.

   ***/
   var d = MochiKit.DOM;
   var b = MochiKit.Base;
   var s = MochiKit.Style;
   element = d.getElement(element);
   if (!element.firstChild) {
       throw "MochiKit.Visual.slideDown must be used on a element with a child";
   }
   d.removeEmptyTextNodes(element);
   var oldInnerBottom = s.getStyle(element.firstChild, 'bottom') || 0;
   var elementDimensions = s.getElementDimensions(element);
   var elemClip;
   options = b.update({
       scaleContent: false,
       scaleX: false,
       scaleFrom: 0,
       scaleMode: {originalHeight: elementDimensions.h,
                   originalWidth: elementDimensions.w},
       restoreAfterFinish: true,
       afterSetupInternal: function (effect) {
           d.makePositioned(effect.element);
           d.makePositioned(effect.element.firstChild);
           if (/Opera/.test(navigator.userAgent)) {
               s.setStyle(effect.element, {top: ''});
           }
           elemClip = d.makeClipping(effect.element);
           s.setStyle(effect.element, {height: '0px'});
           s.showElement(effect.element);
       },
       afterUpdateInternal: function (effect) {
           s.setStyle(effect.element.firstChild,
              {bottom: (effect.dims[0] - effect.element.clientHeight) + 'px'});
       },
       afterFinishInternal: function (effect) {
           d.undoClipping(effect.element, elemClip);
           // IE will crash if child is undoPositioned first
           if (/MSIE/.test(navigator.userAgent)) {
               d.undoPositioned(effect.element);
               d.undoPositioned(effect.element.firstChild);
           } else {
               d.undoPositioned(effect.element.firstChild);
               d.undoPositioned(effect.element);
           }
           s.setStyle(effect.element.firstChild,
                                 {bottom: oldInnerBottom});
       }
   }, options || {});

   return new MochiKit.Visual.Scale(element, 100, options);
};

/** @id MochiKit.Visual.slideUp */
MochiKit.Visual.slideUp = function (element, /* optional */ options) {
   /***

   Slide an element up.
   It needs to have the content of the element wrapped in a container
   element with fixed height.

   ***/
   var d = MochiKit.DOM;
   var b = MochiKit.Base;
   var s = MochiKit.Style;
   element = d.getElement(element);
   if (!element.firstChild) {
       throw "MochiKit.Visual.slideUp must be used on a element with a child";
   }
   d.removeEmptyTextNodes(element);
   var oldInnerBottom = s.getStyle(element.firstChild, 'bottom');
   var elemClip;
   options = b.update({
       scaleContent: false,
       scaleX: false,
       scaleMode: 'box',
       scaleFrom: 100,
       restoreAfterFinish: true,
       beforeStartInternal: function (effect) {
           d.makePositioned(effect.element);
           d.makePositioned(effect.element.firstChild);
           if (/Opera/.test(navigator.userAgent)) {
               s.setStyle(effect.element, {top: ''});
           }
           elemClip = d.makeClipping(effect.element);
           s.showElement(effect.element);
       },
       afterUpdateInternal: function (effect) {
           s.setStyle(effect.element.firstChild,
           {bottom: (effect.dims[0] - effect.element.clientHeight) + 'px'});
       },
       afterFinishInternal: function (effect) {
           s.hideElement(effect.element);
           d.undoClipping(effect.element, elemClip);
           d.undoPositioned(effect.element.firstChild);
           d.undoPositioned(effect.element);
           s.setStyle(effect.element.firstChild, {bottom: oldInnerBottom});
       }
   }, options || {});
   return new MochiKit.Visual.Scale(element, 0, options);
};

// Bug in opera makes the TD containing this element expand for a instance
// after finish
/** @id MochiKit.Visual.squish */
MochiKit.Visual.squish = function (element, /* optional */ options) {
   /***

   Reduce an element and make it disappear.

   ***/
   var d = MochiKit.DOM;
   var b = MochiKit.Base;
   var elemClip;
   options = b.update({
       restoreAfterFinish: true,
       beforeSetupInternal: function (effect) {
           elemClip = d.makeClipping(effect.element);
       },
       afterFinishInternal: function (effect) {
           MochiKit.Style.hideElement(effect.element);
           d.undoClipping(effect.element, elemClip);
       }
   }, options || {});

   return new MochiKit.Visual.Scale(element, /Opera/.test(navigator.userAgent) ? 1 : 0, options);
};

/** @id MochiKit.Visual.grow */
MochiKit.Visual.grow = function (element, /* optional */ options) {
   /***

   Grow an element to its original size. Make it zero-sized before
   if necessary.

   ***/
   var d = MochiKit.DOM;
   var v = MochiKit.Visual;
   var s = MochiKit.Style;
   element = d.getElement(element);
   options = MochiKit.Base.update({
       direction: 'center',
       moveTransition: v.Transitions.sinoidal,
       scaleTransition: v.Transitions.sinoidal,
       opacityTransition: v.Transitions.full,
       scaleContent: true,
       scaleFromCenter: false
   }, options || {});
   var oldStyle = {
       top: element.style.top,
       left: element.style.left,
       height: element.style.height,
       width: element.style.width,
       opacity: s.getStyle(element, 'opacity')
   };

   var dims = s.getElementDimensions(element);
   var initialMoveX, initialMoveY;
   var moveX, moveY;

   switch (options.direction) {
       case 'top-left':
           initialMoveX = initialMoveY = moveX = moveY = 0;
           break;
       case 'top-right':
           initialMoveX = dims.w;
           initialMoveY = moveY = 0;
           moveX = -dims.w;
           break;
       case 'bottom-left':
           initialMoveX = moveX = 0;
           initialMoveY = dims.h;
           moveY = -dims.h;
           break;
       case 'bottom-right':
           initialMoveX = dims.w;
           initialMoveY = dims.h;
           moveX = -dims.w;
           moveY = -dims.h;
           break;
       case 'center':
           initialMoveX = dims.w / 2;
           initialMoveY = dims.h / 2;
           moveX = -dims.w / 2;
           moveY = -dims.h / 2;
           break;
   }

   var optionsParallel = MochiKit.Base.update({
       beforeSetupInternal: function (effect) {
           s.setStyle(effect.effects[0].element, {height: '0px'});
           s.showElement(effect.effects[0].element);
       },
       afterFinishInternal: function (effect) {
           d.undoClipping(effect.effects[0].element);
           d.undoPositioned(effect.effects[0].element);
           s.setStyle(effect.effects[0].element, oldStyle);
       }
   }, options || {});

   return new v.Move(element, {
       x: initialMoveX,
       y: initialMoveY,
       duration: 0.01,
       beforeSetupInternal: function (effect) {
           s.hideElement(effect.element);
           d.makeClipping(effect.element);
           d.makePositioned(effect.element);
       },
       afterFinishInternal: function (effect) {
           new v.Parallel(
               [new v.Opacity(effect.element, {
                   sync: true, to: 1.0, from: 0.0,
                   transition: options.opacityTransition
                }),
                new v.Move(effect.element, {
                    x: moveX, y: moveY, sync: true,
                    transition: options.moveTransition
                }),
                new v.Scale(effect.element, 100, {
                       scaleMode: {originalHeight: dims.h,
                                   originalWidth: dims.w},
                       sync: true,
                       scaleFrom: /Opera/.test(navigator.userAgent) ? 1 : 0,
                       transition: options.scaleTransition,
                       scaleContent: options.scaleContent,
                       scaleFromCenter: options.scaleFromCenter,
                       restoreAfterFinish: true
               })
               ], optionsParallel
           );
       }
   });
};

/** @id MochiKit.Visual.shrink */
MochiKit.Visual.shrink = function (element, /* optional */ options) {
   /***

   Shrink an element and make it disappear.

   ***/
   var d = MochiKit.DOM;
   var v = MochiKit.Visual;
   var s = MochiKit.Style;
   element = d.getElement(element);
   options = MochiKit.Base.update({
       direction: 'center',
       moveTransition: v.Transitions.sinoidal,
       scaleTransition: v.Transitions.sinoidal,
       opacityTransition: v.Transitions.none,
       scaleContent: true,
       scaleFromCenter: false
   }, options || {});
   var oldStyle = {
       top: element.style.top,
       left: element.style.left,
       height: element.style.height,
       width: element.style.width,
       opacity: s.getStyle(element, 'opacity')
   };

   var dims = s.getElementDimensions(element);
   var moveX, moveY;

   switch (options.direction) {
       case 'top-left':
           moveX = moveY = 0;
           break;
       case 'top-right':
           moveX = dims.w;
           moveY = 0;
           break;
       case 'bottom-left':
           moveX = 0;
           moveY = dims.h;
           break;
       case 'bottom-right':
           moveX = dims.w;
           moveY = dims.h;
           break;
       case 'center':
           moveX = dims.w / 2;
           moveY = dims.h / 2;
           break;
   }
   var elemClip;

   var optionsParallel = MochiKit.Base.update({
       beforeStartInternal: function (effect) {
           elemClip = d.makePositioned(effect.effects[0].element);
           d.makeClipping(effect.effects[0].element);
       },
       afterFinishInternal: function (effect) {
           s.hideElement(effect.effects[0].element);
           d.undoClipping(effect.effects[0].element, elemClip);
           d.undoPositioned(effect.effects[0].element);
           s.setStyle(effect.effects[0].element, oldStyle);
       }
   }, options || {});

   return new v.Parallel(
       [new v.Opacity(element, {
           sync: true, to: 0.0, from: 1.0,
           transition: options.opacityTransition
        }),
        new v.Scale(element, /Opera/.test(navigator.userAgent) ? 1 : 0, {
            sync: true, transition: options.scaleTransition,
            scaleContent: options.scaleContent,
            scaleFromCenter: options.scaleFromCenter,
            restoreAfterFinish: true
        }),
        new v.Move(element, {
            x: moveX, y: moveY, sync: true, transition: options.moveTransition
        })
       ], optionsParallel
   );
};

/** @id MochiKit.Visual.pulsate */
MochiKit.Visual.pulsate = function (element, /* optional */ options) {
   /***

   Pulse an element between appear/fade.

   ***/
   var d = MochiKit.DOM;
   var v = MochiKit.Visual;
   var b = MochiKit.Base;
   var oldOpacity = MochiKit.Style.getStyle(element, 'opacity');
   options = b.update({
       duration: 3.0,
       from: 0,
       afterFinishInternal: function (effect) {
           MochiKit.Style.setStyle(effect.element, {'opacity': oldOpacity});
       }
   }, options || {});
   var transition = options.transition || v.Transitions.sinoidal;
   var reverser = b.bind(function (pos) {
       return transition(1 - v.Transitions.pulse(pos, options.pulses));
   }, transition);
   b.bind(reverser, transition);
   return new v.Opacity(element, b.update({
       transition: reverser}, options));
};

/** @id MochiKit.Visual.fold */
MochiKit.Visual.fold = function (element, /* optional */ options) {
   /***

   Fold an element, first vertically, then horizontally.

   ***/
   var d = MochiKit.DOM;
   var v = MochiKit.Visual;
   var s = MochiKit.Style;
   element = d.getElement(element);
   var oldStyle = {
       top: element.style.top,
       left: element.style.left,
       width: element.style.width,
       height: element.style.height
   };
   var elemClip = d.makeClipping(element);
   options = MochiKit.Base.update({
       scaleContent: false,
       scaleX: false,
       afterFinishInternal: function (effect) {
           new v.Scale(element, 1, {
               scaleContent: false,
               scaleY: false,
               afterFinishInternal: function (effect) {
                   s.hideElement(effect.element);
                   d.undoClipping(effect.element, elemClip);
                   s.setStyle(effect.element, oldStyle);
               }
           });
       }
   }, options || {});
   return new v.Scale(element, 5, options);
};


// Compatibility with MochiKit 1.0
MochiKit.Visual.Color = MochiKit.Color.Color;
MochiKit.Visual.getElementsComputedStyle = MochiKit.DOM.computedStyle;

/* end of Rico adaptation */

MochiKit.Visual.__new__ = function () {
   var m = MochiKit.Base;

   m.nameFunctions(this);

   this.EXPORT_TAGS = {
       ":common": this.EXPORT,
       ":all": m.concat(this.EXPORT, this.EXPORT_OK)
   };

};

MochiKit.Visual.EXPORT = [
   "roundElement",
   "roundClass",
   "tagifyText",
   "multiple",
   "toggle",
   "Parallel",
   "Opacity",
   "Move",
   "Scale",
   "Highlight",
   "ScrollTo",
   "Morph",
   "fade",
   "appear",
   "puff",
   "blindUp",
   "blindDown",
   "switchOff",
   "dropOut",
   "shake",
   "slideDown",
   "slideUp",
   "squish",
   "grow",
   "shrink",
   "pulsate",
   "fold"
];

MochiKit.Visual.EXPORT_OK = [
   "Base",
   "PAIRS"
];

MochiKit.Visual.__new__();

MochiKit.Base._exportSymbols(this, MochiKit.Visual);