testing/mochitest/MochiKit/Visual.js

   1 /***
   2
   3 MochiKit.Visual 1.4
   4
   5 See <http://mochikit.com/> for documentation, downloads, license, etc.
   6
   7 (c) 2005 Bob Ippolito and others.  All rights Reserved.
   8
   9 ***/
  10
  11 if (typeof(dojo) != 'undefined') {
  12     dojo.provide('MochiKit.Visual');
  13     dojo.require('MochiKit.Base');
  14     dojo.require('MochiKit.DOM');
  15     dojo.require('MochiKit.Style');
  16     dojo.require('MochiKit.Color');
  17 }
  18
  19 if (typeof(JSAN) != 'undefined') {
  20     JSAN.use("MochiKit.Base", []);
  21     JSAN.use("MochiKit.DOM", []);
  22     JSAN.use("MochiKit.Style", []);
  23     JSAN.use("MochiKit.Color", []);
  24 }
  25
  26 try {
  27     if (typeof(MochiKit.Base) === 'undefined' ||
  28         typeof(MochiKit.DOM) === 'undefined' ||
  29         typeof(MochiKit.Style) === 'undefined' ||
  30         typeof(MochiKit.Color) === 'undefined') {
  31         throw "";
  32     }
  33 } catch (e) {
  34     throw "MochiKit.Visual depends on MochiKit.Base, MochiKit.DOM, MochiKit.Style and MochiKit.Color!";
  35 }
  36
  37 if (typeof(MochiKit.Visual) == "undefined") {
  38     MochiKit.Visual = {};
  39 }
  40
  41 MochiKit.Visual.NAME = "MochiKit.Visual";
  42 MochiKit.Visual.VERSION = "1.4";
  43
  44 MochiKit.Visual.__repr__ = function () {
  45     return "[" + this.NAME + " " + this.VERSION + "]";
  46 };
  47
  48 MochiKit.Visual.toString = function () {
  49     return this.__repr__();
  50 };
  51
  52 MochiKit.Visual._RoundCorners = function (e, options) {
  53     e = MochiKit.DOM.getElement(e);
  54     this._setOptions(options);
  55     if (this.options.__unstable__wrapElement) {
  56         e = this._doWrap(e);
  57     }
  58
  59     var color = this.options.color;
  60     var C = MochiKit.Color.Color;
  61     if (this.options.color === "fromElement") {
  62         color = C.fromBackground(e);
  63     } else if (!(color instanceof C)) {
  64         color = C.fromString(color);
  65     }
  66     this.isTransparent = (color.asRGB().a <= 0);
  67
  68     var bgColor = this.options.bgColor;
  69     if (this.options.bgColor === "fromParent") {
  70         bgColor = C.fromBackground(e.offsetParent);
  71     } else if (!(bgColor instanceof C)) {
  72         bgColor = C.fromString(bgColor);
  73     }
  74
  75     this._roundCornersImpl(e, color, bgColor);
  76 };
  77
  78 MochiKit.Visual._RoundCorners.prototype = {
  79     _doWrap: function (e) {
  80         var parent = e.parentNode;
  81         var doc = MochiKit.DOM.currentDocument();
  82         if (typeof(doc.defaultView) === "undefined"
  83             || doc.defaultView === null) {
  84             return e;
  85         }
  86         var style = doc.defaultView.getComputedStyle(e, null);
  87         if (typeof(style) === "undefined" || style === null) {
  88             return e;
  89         }
  90         var wrapper = MochiKit.DOM.DIV({"style": {
  91             display: "block",
  92             // convert padding to margin
  93             marginTop: style.getPropertyValue("padding-top"),
  94             marginRight: style.getPropertyValue("padding-right"),
  95             marginBottom: style.getPropertyValue("padding-bottom"),
  96             marginLeft: style.getPropertyValue("padding-left"),
  97             // remove padding so the rounding looks right
  98             padding: "0px"
  99             /*
 100             paddingRight: "0px",
 101             paddingLeft: "0px"
 102             */
 103         }});
 104         wrapper.innerHTML = e.innerHTML;
 105         e.innerHTML = "";
 106         e.appendChild(wrapper);
 107         return e;
 108     },
 109
 110     _roundCornersImpl: function (e, color, bgColor) {
 111         if (this.options.border) {
 112             this._renderBorder(e, bgColor);
 113         }
 114         if (this._isTopRounded()) {
 115             this._roundTopCorners(e, color, bgColor);
 116         }
 117         if (this._isBottomRounded()) {
 118             this._roundBottomCorners(e, color, bgColor);
 119         }
 120     },
 121
 122     _renderBorder: function (el, bgColor) {
 123         var borderValue = "1px solid " + this._borderColor(bgColor);
 124         var borderL = "border-left: "  + borderValue;
 125         var borderR = "border-right: " + borderValue;
 126         var style = "style='" + borderL + ";" + borderR +  "'";
 127         el.innerHTML = "<div " + style + ">" + el.innerHTML + "</div>";
 128     },
 129
 130     _roundTopCorners: function (el, color, bgColor) {
 131         var corner = this._createCorner(bgColor);
 132         for (var i = 0; i < this.options.numSlices; i++) {
 133             corner.appendChild(
 134                 this._createCornerSlice(color, bgColor, i, "top")
 135             );
 136         }
 137         el.style.paddingTop = 0;
 138         el.insertBefore(corner, el.firstChild);
 139     },
 140
 141     _roundBottomCorners: function (el, color, bgColor) {
 142         var corner = this._createCorner(bgColor);
 143         for (var i = (this.options.numSlices - 1); i >= 0; i--) {
 144             corner.appendChild(
 145                 this._createCornerSlice(color, bgColor, i, "bottom")
 146             );
 147         }
 148         el.style.paddingBottom = 0;
 149         el.appendChild(corner);
 150     },
 151
 152     _createCorner: function (bgColor) {
 153         var dom = MochiKit.DOM;
 154         return dom.DIV({style: {backgroundColor: bgColor.toString()}});
 155     },
 156
 157     _createCornerSlice: function (color, bgColor, n, position) {
 158         var slice = MochiKit.DOM.SPAN();
 159
 160         var inStyle = slice.style;
 161         inStyle.backgroundColor = color.toString();
 162         inStyle.display = "block";
 163         inStyle.height = "1px";
 164         inStyle.overflow = "hidden";
 165         inStyle.fontSize = "1px";
 166
 167         var borderColor = this._borderColor(color, bgColor);
 168         if (this.options.border && n === 0) {
 169             inStyle.borderTopStyle = "solid";
 170             inStyle.borderTopWidth = "1px";
 171             inStyle.borderLeftWidth = "0px";
 172             inStyle.borderRightWidth = "0px";
 173             inStyle.borderBottomWidth = "0px";
 174             // assumes css compliant box model
 175             inStyle.height = "0px";
 176             inStyle.borderColor = borderColor.toString();
 177         } else if (borderColor) {
 178             inStyle.borderColor = borderColor.toString();
 179             inStyle.borderStyle = "solid";
 180             inStyle.borderWidth = "0px 1px";
 181         }
 182
 183         if (!this.options.compact && (n == (this.options.numSlices - 1))) {
 184             inStyle.height = "2px";
 185         }
 186
 187         this._setMargin(slice, n, position);
 188         this._setBorder(slice, n, position);
 189
 190         return slice;
 191     },
 192
 193     _setOptions: function (options) {
 194         this.options = {
 195             corners: "all",
 196             color: "fromElement",
 197             bgColor: "fromParent",
 198             blend: true,
 199             border: false,
 200             compact: false,
 201             __unstable__wrapElement: false
 202         };
 203         MochiKit.Base.update(this.options, options);
 204
 205         this.options.numSlices = (this.options.compact ? 2 : 4);
 206     },
 207
 208     _whichSideTop: function () {
 209         var corners = this.options.corners;
 210         if (this._hasString(corners, "all", "top")) {
 211             return "";
 212         }
 213
 214         var has_tl = (corners.indexOf("tl") != -1);
 215         var has_tr = (corners.indexOf("tr") != -1);
 216         if (has_tl && has_tr) {
 217             return "";
 218         }
 219         if (has_tl) {
 220             return "left";
 221         }
 222         if (has_tr) {
 223             return "right";
 224         }
 225         return "";
 226     },
 227
 228     _whichSideBottom: function () {
 229         var corners = this.options.corners;
 230         if (this._hasString(corners, "all", "bottom")) {
 231             return "";
 232         }
 233
 234         var has_bl = (corners.indexOf('bl') != -1);
 235         var has_br = (corners.indexOf('br') != -1);
 236         if (has_bl && has_br) {
 237             return "";
 238         }
 239         if (has_bl) {
 240             return "left";
 241         }
 242         if (has_br) {
 243             return "right";
 244         }
 245         return "";
 246     },
 247
 248     _borderColor: function (color, bgColor) {
 249         if (color == "transparent") {
 250             return bgColor;
 251         } else if (this.options.border) {
 252             return this.options.border;
 253         } else if (this.options.blend) {
 254             return bgColor.blendedColor(color);
 255         }
 256         return "";
 257     },
 258
 259
 260     _setMargin: function (el, n, corners) {
 261         var marginSize = this._marginSize(n) + "px";
 262         var whichSide = (
 263             corners == "top" ? this._whichSideTop() : this._whichSideBottom()
 264         );
 265         var style = el.style;
 266
 267         if (whichSide == "left") {
 268             style.marginLeft = marginSize;
 269             style.marginRight = "0px";
 270         } else if (whichSide == "right") {
 271             style.marginRight = marginSize;
 272             style.marginLeft = "0px";
 273         } else {
 274             style.marginLeft = marginSize;
 275             style.marginRight = marginSize;
 276         }
 277     },
 278
 279     _setBorder: function (el, n, corners) {
 280         var borderSize = this._borderSize(n) + "px";
 281         var whichSide = (
 282             corners == "top" ? this._whichSideTop() : this._whichSideBottom()
 283         );
 284
 285         var style = el.style;
 286         if (whichSide == "left") {
 287             style.borderLeftWidth = borderSize;
 288             style.borderRightWidth = "0px";
 289         } else if (whichSide == "right") {
 290             style.borderRightWidth = borderSize;
 291             style.borderLeftWidth = "0px";
 292         } else {
 293             style.borderLeftWidth = borderSize;
 294             style.borderRightWidth = borderSize;
 295         }
 296     },
 297
 298     _marginSize: function (n) {
 299         if (this.isTransparent) {
 300             return 0;
 301         }
 302
 303         var o = this.options;
 304         if (o.compact && o.blend) {
 305             var smBlendedMarginSizes = [1, 0];
 306             return smBlendedMarginSizes[n];
 307         } else if (o.compact) {
 308             var compactMarginSizes = [2, 1];
 309             return compactMarginSizes[n];
 310         } else if (o.blend) {
 311             var blendedMarginSizes = [3, 2, 1, 0];
 312             return blendedMarginSizes[n];
 313         } else {
 314             var marginSizes = [5, 3, 2, 1];
 315             return marginSizes[n];
 316         }
 317     },
 318
 319     _borderSize: function (n) {
 320         var o = this.options;
 321         var borderSizes;
 322         if (o.compact && (o.blend || this.isTransparent)) {
 323             return 1;
 324         } else if (o.compact) {
 325             borderSizes = [1, 0];
 326         } else if (o.blend) {
 327             borderSizes = [2, 1, 1, 1];
 328         } else if (o.border) {
 329             borderSizes = [0, 2, 0, 0];
 330         } else if (this.isTransparent) {
 331             borderSizes = [5, 3, 2, 1];
 332         } else {
 333             return 0;
 334         }
 335         return borderSizes[n];
 336     },
 337
 338     _hasString: function (str) {
 339         for (var i = 1; i< arguments.length; i++) {
 340             if (str.indexOf(arguments[i]) != -1) {
 341                 return true;
 342             }
 343         }
 344         return false;
 345     },
 346
 347     _isTopRounded: function () {
 348         return this._hasString(this.options.corners,
 349             "all", "top", "tl", "tr"
 350         );
 351     },
 352
 353     _isBottomRounded: function () {
 354         return this._hasString(this.options.corners,
 355             "all", "bottom", "bl", "br"
 356         );
 357     },
 358
 359     _hasSingleTextChild: function (el) {
 360         return (el.childNodes.length == 1 && el.childNodes[0].nodeType == 3);
 361     }
 362 };
 363
 364 /** @id MochiKit.Visual.roundElement */
 365 MochiKit.Visual.roundElement = function (e, options) {
 366     new MochiKit.Visual._RoundCorners(e, options);
 367 };
 368
 369 /** @id MochiKit.Visual.roundClass */
 370 MochiKit.Visual.roundClass = function (tagName, className, options) {
 371     var elements = MochiKit.DOM.getElementsByTagAndClassName(
 372         tagName, className
 373     );
 374     for (var i = 0; i < elements.length; i++) {
 375         MochiKit.Visual.roundElement(elements[i], options);
 376     }
 377 };
 378
 379 /** @id MochiKit.Visual.tagifyText */
 380 MochiKit.Visual.tagifyText = function (element, /* optional */tagifyStyle) {
 381     /***
 382
 383     Change a node text to character in tags.
 384
 385     @param tagifyStyle: the style to apply to character nodes, default to
 386     'position: relative'.
 387
 388     ***/
 389     var tagifyStyle = tagifyStyle || 'position:relative';
 390     if (/MSIE/.test(navigator.userAgent)) {
 391         tagifyStyle += ';zoom:1';
 392     }
 393     element = MochiKit.DOM.getElement(element);
 394     var ma = MochiKit.Base.map;
 395     ma(function (child) {
 396         if (child.nodeType == 3) {
 397             ma(function (character) {
 398                 element.insertBefore(
 399                     MochiKit.DOM.SPAN({style: tagifyStyle},
 400                         character == ' ' ? String.fromCharCode(160) : character), child);
 401             }, child.nodeValue.split(''));
 402             MochiKit.DOM.removeElement(child);
 403         }
 404     }, element.childNodes);
 405 };
 406
 407 /** @id MochiKit.Visual.forceRerendering */
 408 MochiKit.Visual.forceRerendering = function (element) {
 409     try {
 410         element = MochiKit.DOM.getElement(element);
 411         var n = document.createTextNode(' ');
 412         element.appendChild(n);
 413         element.removeChild(n);
 414     } catch(e) {
 415     }
 416 };
 417
 418 /** @id MochiKit.Visual.multiple */
 419 MochiKit.Visual.multiple = function (elements, effect, /* optional */options) {
 420     /***
 421
 422     Launch the same effect subsequently on given elements.
 423
 424     ***/
 425     options = MochiKit.Base.update({
 426         speed: 0.1, delay: 0.0
 427     }, options || {});
 428     var masterDelay = options.delay;
 429     var index = 0;
 430     MochiKit.Base.map(function (innerelement) {
 431         options.delay = index * options.speed + masterDelay;
 432         new effect(innerelement, options);
 433         index += 1;
 434     }, elements);
 435 };
 436
 437 MochiKit.Visual.PAIRS = {
 438     'slide': ['slideDown', 'slideUp'],
 439     'blind': ['blindDown', 'blindUp'],
 440     'appear': ['appear', 'fade'],
 441     'size': ['grow', 'shrink']
 442 };
 443
 444 /** @id MochiKit.Visual.toggle */
 445 MochiKit.Visual.toggle = function (element, /* optional */effect, /* optional */options) {
 446     /***
 447
 448     Toggle an item between two state depending of its visibility, making
 449     a effect between these states. Default  effect is 'appear', can be
 450     'slide' or 'blind'.
 451
 452     ***/
 453     element = MochiKit.DOM.getElement(element);
 454     effect = (effect || 'appear').toLowerCase();
 455     options = MochiKit.Base.update({
 456         queue: {position: 'end', scope: (element.id || 'global'), limit: 1}
 457     }, options || {});
 458     var v = MochiKit.Visual;
 459     v[element.style.display != 'none' ?
 460       v.PAIRS[effect][1] : v.PAIRS[effect][0]](element, options);
 461 };
 462
 463 /***
 464
 465 Transitions: define functions calculating variations depending of a position.
 466
 467 ***/
 468
 469 MochiKit.Visual.Transitions = {}
 470
 471 /** @id MochiKit.Visual.Transitions.linear */
 472 MochiKit.Visual.Transitions.linear = function (pos) {
 473     return pos;
 474 };
 475
 476 /** @id MochiKit.Visual.Transitions.sinoidal */
 477 MochiKit.Visual.Transitions.sinoidal = function (pos) {
 478     return (-Math.cos(pos*Math.PI)/2) + 0.5;
 479 };
 480
 481 /** @id MochiKit.Visual.Transitions.reverse */
 482 MochiKit.Visual.Transitions.reverse = function (pos) {
 483     return 1 - pos;
 484 };
 485
 486 /** @id MochiKit.Visual.Transitions.flicker */
 487 MochiKit.Visual.Transitions.flicker = function (pos) {
 488     return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4;
 489 };
 490
 491 /** @id MochiKit.Visual.Transitions.wobble */
 492 MochiKit.Visual.Transitions.wobble = function (pos) {
 493     return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
 494 };
 495
 496 /** @id MochiKit.Visual.Transitions.pulse */
 497 MochiKit.Visual.Transitions.pulse = function (pos) {
 498     return (Math.floor(pos*10) % 2 == 0 ?
 499         (pos*10 - Math.floor(pos*10)) : 1 - (pos*10 - Math.floor(pos*10)));
 500 };
 501
 502 /** @id MochiKit.Visual.Transitions.none */
 503 MochiKit.Visual.Transitions.none = function (pos) {
 504     return 0;
 505 };
 506
 507 /** @id MochiKit.Visual.Transitions.full */
 508 MochiKit.Visual.Transitions.full = function (pos) {
 509     return 1;
 510 };
 511
 512 /***
 513
 514 Core effects
 515
 516 ***/
 517
 518 MochiKit.Visual.ScopedQueue = function () {
 519     this.__init__();
 520 };
 521
 522 MochiKit.Base.update(MochiKit.Visual.ScopedQueue.prototype, {
 523     __init__: function () {
 524         this.effects = [];
 525         this.interval = null;
 526     },
 527
 528     /** @id MochiKit.Visual.ScopedQueue.prototype.add */
 529     add: function (effect) {
 530         var timestamp = new Date().getTime();
 531
 532         var position = (typeof(effect.options.queue) == 'string') ?
 533             effect.options.queue : effect.options.queue.position;
 534
 535         var ma = MochiKit.Base.map;
 536         switch (position) {
 537             case 'front':
 538                 // move unstarted effects after this effect
 539                 ma(function (e) {
 540                     if (e.state == 'idle') {
 541                         e.startOn += effect.finishOn;
 542                         e.finishOn += effect.finishOn;
 543                     }
 544                 }, this.effects);
 545                 break;
 546             case 'end':
 547                 var finish;
 548                 // start effect after last queued effect has finished
 549                 ma(function (e) {
 550                     var i = e.finishOn;
 551                     if (i >= (finish || i)) {
 552                         finish = i;
 553                     }
 554                 }, this.effects);
 555                 timestamp = finish || timestamp;
 556                 break;
 557             case 'break':
 558                 ma(function (e) {
 559                     e.finalize();
 560                 }, this.effects);
 561                 break;
 562         }
 563
 564         effect.startOn += timestamp;
 565         effect.finishOn += timestamp;
 566         if (!effect.options.queue.limit ||
 567             this.effects.length < effect.options.queue.limit) {
 568             this.effects.push(effect);
 569         }
 570
 571         if (!this.interval) {
 572             this.interval = this.startLoop(MochiKit.Base.bind(this.loop, this),
 573                                         40);
 574         }
 575     },
 576
 577     /** @id MochiKit.Visual.ScopedQueue.prototype.startLoop */
 578     startLoop: function (func, interval) {
 579         return setInterval(func, interval)
 580     },
 581
 582     /** @id MochiKit.Visual.ScopedQueue.prototype.remove */
 583     remove: function (effect) {
 584         this.effects = MochiKit.Base.filter(function (e) {
 585             return e != effect;
 586         }, this.effects);
 587         if (this.effects.length == 0) {
 588             this.stopLoop(this.interval);
 589             this.interval = null;
 590         }
 591     },
 592
 593     /** @id MochiKit.Visual.ScopedQueue.prototype.stopLoop */
 594     stopLoop: function (interval) {
 595         clearInterval(interval)
 596     },
 597
 598     /** @id MochiKit.Visual.ScopedQueue.prototype.loop */
 599     loop: function () {
 600         var timePos = new Date().getTime();
 601         MochiKit.Base.map(function (effect) {
 602             effect.loop(timePos);
 603         }, this.effects);
 604     }
 605 });
 606
 607 MochiKit.Visual.Queues = {
 608     instances: {},
 609
 610     get: function (queueName) {
 611         if (typeof(queueName) != 'string') {
 612             return queueName;
 613         }
 614
 615         if (!this.instances[queueName]) {
 616             this.instances[queueName] = new MochiKit.Visual.ScopedQueue();
 617         }
 618         return this.instances[queueName];
 619     }
 620 };
 621
 622 MochiKit.Visual.Queue = MochiKit.Visual.Queues.get('global');
 623
 624 MochiKit.Visual.DefaultOptions = {
 625     transition: MochiKit.Visual.Transitions.sinoidal,
 626     duration: 1.0,  // seconds
 627     fps: 25.0,  // max. 25fps due to MochiKit.Visual.Queue implementation
 628     sync: false,  // true for combining
 629     from: 0.0,
 630     to: 1.0,
 631     delay: 0.0,
 632     queue: 'parallel'
 633 };
 634
 635 MochiKit.Visual.Base = function () {};
 636
 637 MochiKit.Visual.Base.prototype = {
 638     /***
 639
 640     Basic class for all Effects. Define a looping mechanism called for each step
 641     of an effect. Don't instantiate it, only subclass it.
 642
 643     ***/
 644
 645     __class__ : MochiKit.Visual.Base,
 646
 647     /** @id MochiKit.Visual.Base.prototype.start */
 648     start: function (options) {
 649         var v = MochiKit.Visual;
 650         this.options = MochiKit.Base.setdefault(options || {},
 651                                                 v.DefaultOptions);
 652         this.currentFrame = 0;
 653         this.state = 'idle';
 654         this.startOn = this.options.delay*1000;
 655         this.finishOn = this.startOn + (this.options.duration*1000);
 656         this.event('beforeStart');
 657         if (!this.options.sync) {
 658             v.Queues.get(typeof(this.options.queue) == 'string' ?
 659                 'global' : this.options.queue.scope).add(this);
 660         }
 661     },
 662
 663     /** @id MochiKit.Visual.Base.prototype.loop */
 664     loop: function (timePos) {
 665         if (timePos >= this.startOn) {
 666             if (timePos >= this.finishOn) {
 667                 return this.finalize();
 668             }
 669             var pos = (timePos - this.startOn) / (this.finishOn - this.startOn);
 670             var frame =
 671                 Math.round(pos * this.options.fps * this.options.duration);
 672             if (frame > this.currentFrame) {
 673                 this.render(pos);
 674                 this.currentFrame = frame;
 675             }
 676         }
 677     },
 678
 679     /** @id MochiKit.Visual.Base.prototype.render */
 680     render: function (pos) {
 681         if (this.state == 'idle') {
 682             this.state = 'running';
 683             this.event('beforeSetup');
 684             this.setup();
 685             this.event('afterSetup');
 686         }
 687         if (this.state == 'running') {
 688             if (this.options.transition) {
 689                 pos = this.options.transition(pos);
 690             }
 691             pos *= (this.options.to - this.options.from);
 692             pos += this.options.from;
 693             this.event('beforeUpdate');
 694             this.update(pos);
 695             this.event('afterUpdate');
 696         }
 697     },
 698
 699     /** @id MochiKit.Visual.Base.prototype.cancel */
 700     cancel: function () {
 701         if (!this.options.sync) {
 702             MochiKit.Visual.Queues.get(typeof(this.options.queue) == 'string' ?
 703                 'global' : this.options.queue.scope).remove(this);
 704         }
 705         this.state = 'finished';
 706     },
 707
 708     /** @id MochiKit.Visual.Base.prototype.finalize */
 709     finalize: function () {
 710         this.render(1.0);
 711         this.cancel();
 712         this.event('beforeFinish');
 713         this.finish();
 714         this.event('afterFinish');
 715     },
 716
 717     setup: function () {
 718     },
 719
 720     finish: function () {
 721     },
 722
 723     update: function (position) {
 724     },
 725
 726     /** @id MochiKit.Visual.Base.prototype.event */
 727     event: function (eventName) {
 728         if (this.options[eventName + 'Internal']) {
 729             this.options[eventName + 'Internal'](this);
 730         }
 731         if (this.options[eventName]) {
 732             this.options[eventName](this);
 733         }
 734     },
 735
 736     /** @id MochiKit.Visual.Base.prototype.repr */
 737     repr: function () {
 738         return '[' + this.__class__.NAME + ', options:' +
 739                MochiKit.Base.repr(this.options) + ']';
 740     }
 741 }
 742
 743     /** @id MochiKit.Visual.Parallel */
 744 MochiKit.Visual.Parallel = function (effects, options) {
 745     this.__init__(effects, options);
 746 };
 747
 748 MochiKit.Visual.Parallel.prototype = new MochiKit.Visual.Base();
 749
 750 MochiKit.Base.update(MochiKit.Visual.Parallel.prototype, {
 751     /***
 752
 753     Run multiple effects at the same time.
 754
 755     ***/
 756     __init__: function (effects, options) {
 757         this.effects = effects || [];
 758         this.start(options);
 759     },
 760
 761     /** @id MochiKit.Visual.Parallel.prototype.update */
 762     update: function (position) {
 763         MochiKit.Base.map(function (effect) {
 764             effect.render(position);
 765         }, this.effects);
 766     },
 767
 768     /** @id MochiKit.Visual.Parallel.prototype.finish */
 769     finish: function () {
 770         MochiKit.Base.map(function (effect) {
 771             effect.finalize();
 772         }, this.effects);
 773     }
 774 });
 775
 776 /** @id MochiKit.Visual.Opacity */
 777 MochiKit.Visual.Opacity = function (element, options) {
 778     this.__init__(element, options);
 779 };
 780
 781 MochiKit.Visual.Opacity.prototype = new MochiKit.Visual.Base();
 782
 783 MochiKit.Base.update(MochiKit.Visual.Opacity.prototype, {
 784     /***
 785
 786     Change the opacity of an element.
 787
 788     @param options: 'from' and 'to' change the starting and ending opacities.
 789     Must be between 0.0 and 1.0. Default to current opacity and 1.0.
 790
 791     ***/
 792     __init__: function (element, /* optional */options) {
 793         var b = MochiKit.Base;
 794         var s = MochiKit.Style;
 795         this.element = MochiKit.DOM.getElement(element);
 796         // make this work on IE on elements without 'layout'
 797         if (this.element.currentStyle &&
 798             (!this.element.currentStyle.hasLayout)) {
 799             s.setStyle(this.element, {zoom: 1});
 800         }
 801         options = b.update({
 802             from: s.getOpacity(this.element) || 0.0,
 803             to: 1.0
 804         }, options || {});
 805         this.start(options);
 806     },
 807
 808     /** @id MochiKit.Visual.Opacity.prototype.update */
 809     update: function (position) {
 810         MochiKit.Style.setOpacity(this.element, position);
 811     }
 812 });
 813
 814 /**  @id MochiKit.Visual.Opacity.prototype.Move */
 815 MochiKit.Visual.Move = function (element, options) {
 816     this.__init__(element, options);
 817 };
 818
 819 MochiKit.Visual.Move.prototype = new MochiKit.Visual.Base();
 820
 821 MochiKit.Base.update(MochiKit.Visual.Move.prototype, {
 822     /***
 823
 824     Move an element between its current position to a defined position
 825
 826     @param options: 'x' and 'y' for final positions, default to 0, 0.
 827
 828     ***/
 829     __init__: function (element, /* optional */options) {
 830         this.element = MochiKit.DOM.getElement(element);
 831         options = MochiKit.Base.update({
 832             x: 0,
 833             y: 0,
 834             mode: 'relative'
 835         }, options || {});
 836         this.start(options);
 837     },
 838
 839     /** @id MochiKit.Visual.Move.prototype.setup */
 840     setup: function () {
 841         // Bug in Opera: Opera returns the 'real' position of a static element
 842         // or relative element that does not have top/left explicitly set.
 843         // ==> Always set top and left for position relative elements in your
 844         // stylesheets (to 0 if you do not need them)
 845         MochiKit.DOM.makePositioned(this.element);
 846
 847         var s = this.element.style;
 848         var originalVisibility = s.visibility;
 849         var originalDisplay = s.display;
 850         if (originalDisplay == 'none') {
 851             s.visibility = 'hidden';
 852             s.display = '';
 853         }
 854
 855         this.originalLeft = parseFloat(MochiKit.Style.getStyle(this.element, 'left') || '0');
 856         this.originalTop = parseFloat(MochiKit.Style.getStyle(this.element, 'top') || '0');
 857
 858         if (this.options.mode == 'absolute') {
 859             // absolute movement, so we need to calc deltaX and deltaY
 860             this.options.x -= this.originalLeft;
 861             this.options.y -= this.originalTop;
 862         }
 863         if (originalDisplay == 'none') {
 864             s.visibility = originalVisibility;
 865             s.display = originalDisplay;
 866         }
 867     },
 868
 869     /** @id MochiKit.Visual.Move.prototype.update */
 870     update: function (position) {
 871         MochiKit.Style.setStyle(this.element, {
 872             left: Math.round(this.options.x * position + this.originalLeft) + 'px',
 873             top: Math.round(this.options.y * position + this.originalTop) + 'px'
 874         });
 875     }
 876 });
 877
 878 /** @id MochiKit.Visual.Scale */
 879 MochiKit.Visual.Scale = function (element, percent, options) {
 880     this.__init__(element, percent, options);
 881 };
 882
 883 MochiKit.Visual.Scale.prototype = new MochiKit.Visual.Base();
 884
 885 MochiKit.Base.update(MochiKit.Visual.Scale.prototype, {
 886     /***
 887
 888     Change the size of an element.
 889
 890     @param percent: final_size = percent*original_size
 891
 892     @param options: several options changing scale behaviour
 893
 894     ***/
 895     __init__: function (element, percent, /* optional */options) {
 896         this.element = MochiKit.DOM.getElement(element)
 897         options = MochiKit.Base.update({
 898             scaleX: true,
 899             scaleY: true,
 900             scaleContent: true,
 901             scaleFromCenter: false,
 902             scaleMode: 'box',  // 'box' or 'contents' or {} with provided values
 903             scaleFrom: 100.0,
 904             scaleTo: percent
 905         }, options || {});
 906         this.start(options);
 907     },
 908
 909     /** @id MochiKit.Visual.Scale.prototype.setup */
 910     setup: function () {
 911         this.restoreAfterFinish = this.options.restoreAfterFinish || false;
 912         this.elementPositioning = MochiKit.Style.getStyle(this.element,
 913                                                         'position');
 914
 915         var ma = MochiKit.Base.map;
 916         var b = MochiKit.Base.bind;
 917         this.originalStyle = {};
 918         ma(b(function (k) {
 919                 this.originalStyle[k] = this.element.style[k];
 920             }, this), ['top', 'left', 'width', 'height', 'fontSize']);
 921
 922         this.originalTop = this.element.offsetTop;
 923         this.originalLeft = this.element.offsetLeft;
 924
 925         var fontSize = MochiKit.Style.getStyle(this.element,
 926                                              'font-size') || '100%';
 927         ma(b(function (fontSizeType) {
 928             if (fontSize.indexOf(fontSizeType) > 0) {
 929                 this.fontSize = parseFloat(fontSize);
 930                 this.fontSizeType = fontSizeType;
 931             }
 932         }, this), ['em', 'px', '%']);
 933
 934         this.factor = (this.options.scaleTo - this.options.scaleFrom)/100;
 935
 936         if (/^content/.test(this.options.scaleMode)) {
 937             this.dims = [this.element.scrollHeight, this.element.scrollWidth];
 938         } else if (this.options.scaleMode == 'box') {
 939             this.dims = [this.element.offsetHeight, this.element.offsetWidth];
 940         } else {
 941             this.dims = [this.options.scaleMode.originalHeight,
 942                          this.options.scaleMode.originalWidth];
 943         }
 944     },
 945
 946     /** @id MochiKit.Visual.Scale.prototype.update */
 947     update: function (position) {
 948         var currentScale = (this.options.scaleFrom/100.0) +
 949                            (this.factor * position);
 950         if (this.options.scaleContent && this.fontSize) {
 951             MochiKit.Style.setStyle(this.element, {
 952                 fontSize: this.fontSize * currentScale + this.fontSizeType
 953             });
 954         }
 955         this.setDimensions(this.dims[0] * currentScale,
 956                            this.dims[1] * currentScale);
 957     },
 958
 959     /** @id MochiKit.Visual.Scale.prototype.finish */
 960     finish: function () {
 961         if (this.restoreAfterFinish) {
 962             MochiKit.Style.setStyle(this.element, this.originalStyle);
 963         }
 964     },
 965
 966     /** @id MochiKit.Visual.Scale.prototype.setDimensions */
 967     setDimensions: function (height, width) {
 968         var d = {};
 969         var r = Math.round;
 970         if (/MSIE/.test(navigator.userAgent)) {
 971             r = Math.ceil;
 972         }
 973         if (this.options.scaleX) {
 974             d.width = r(width) + 'px';
 975         }
 976         if (this.options.scaleY) {
 977             d.height = r(height) + 'px';
 978         }
 979         if (this.options.scaleFromCenter) {
 980             var topd = (height - this.dims[0])/2;
 981             var leftd = (width - this.dims[1])/2;
 982             if (this.elementPositioning == 'absolute') {
 983                 if (this.options.scaleY) {
 984                     d.top = this.originalTop - topd + 'px';
 985                 }
 986                 if (this.options.scaleX) {
 987                     d.left = this.originalLeft - leftd + 'px';
 988                 }
 989             } else {
 990                 if (this.options.scaleY) {
 991                     d.top = -topd + 'px';
 992                 }
 993                 if (this.options.scaleX) {
 994                     d.left = -leftd + 'px';
 995                 }
 996             }
 997         }
 998         MochiKit.Style.setStyle(this.element, d);
 999     }
1000 });
1001
1002 /** @id MochiKit.Visual.Highlight */
1003 MochiKit.Visual.Highlight = function (element, options) {
1004     this.__init__(element, options);
1005 };
1006
1007 MochiKit.Visual.Highlight.prototype = new MochiKit.Visual.Base();
1008
1009 MochiKit.Base.update(MochiKit.Visual.Highlight.prototype, {
1010     /***
1011
1012     Highlight an item of the page.
1013
1014     @param options: 'startcolor' for choosing highlighting color, default
1015     to '#ffff99'.
1016
1017     ***/
1018     __init__: function (element, /* optional */options) {
1019         this.element = MochiKit.DOM.getElement(element);
1020         options = MochiKit.Base.update({
1021             startcolor: '#ffff99'
1022         }, options || {});
1023         this.start(options);
1024     },
1025
1026     /** @id MochiKit.Visual.Highlight.prototype.setup */
1027     setup: function () {
1028         var b = MochiKit.Base;
1029         var s = MochiKit.Style;
1030         // Prevent executing on elements not in the layout flow
1031         if (s.getStyle(this.element, 'display') == 'none') {
1032             this.cancel();
1033             return;
1034         }
1035         // Disable background image during the effect
1036         this.oldStyle = {
1037             backgroundImage: s.getStyle(this.element, 'background-image')
1038         };
1039         s.setStyle(this.element, {
1040             backgroundImage: 'none'
1041         });
1042
1043         if (!this.options.endcolor) {
1044             this.options.endcolor =
1045                 MochiKit.Color.Color.fromBackground(this.element).toHexString();
1046         }
1047         if (b.isUndefinedOrNull(this.options.restorecolor)) {
1048             this.options.restorecolor = s.getStyle(this.element,
1049                                                    'background-color');
1050         }
1051         // init color calculations
1052         this._base = b.map(b.bind(function (i) {
1053             return parseInt(
1054                 this.options.startcolor.slice(i*2 + 1, i*2 + 3), 16);
1055         }, this), [0, 1, 2]);
1056         this._delta = b.map(b.bind(function (i) {
1057             return parseInt(this.options.endcolor.slice(i*2 + 1, i*2 + 3), 16)
1058                 - this._base[i];
1059         }, this), [0, 1, 2]);
1060     },
1061
1062     /** @id MochiKit.Visual.Highlight.prototype.update */
1063     update: function (position) {
1064         var m = '#';
1065         MochiKit.Base.map(MochiKit.Base.bind(function (i) {
1066             m += MochiKit.Color.toColorPart(Math.round(this._base[i] +
1067                                             this._delta[i]*position));
1068         }, this), [0, 1, 2]);
1069         MochiKit.Style.setStyle(this.element, {
1070             backgroundColor: m
1071         });
1072     },
1073
1074     /** @id MochiKit.Visual.Highlight.prototype.finish */
1075     finish: function () {
1076         MochiKit.Style.setStyle(this.element,
1077             MochiKit.Base.update(this.oldStyle, {
1078                 backgroundColor: this.options.restorecolor
1079         }));
1080     }
1081 });
1082
1083 /** @id MochiKit.Visual.ScrollTo */
1084 MochiKit.Visual.ScrollTo = function (element, options) {
1085     this.__init__(element, options);
1086 };
1087
1088 MochiKit.Visual.ScrollTo.prototype = new MochiKit.Visual.Base();
1089
1090 MochiKit.Base.update(MochiKit.Visual.ScrollTo.prototype, {
1091     /***
1092
1093     Scroll to an element in the page.
1094
1095     ***/
1096     __init__: function (element, /* optional */options) {
1097         this.element = MochiKit.DOM.getElement(element);
1098         this.start(options || {});
1099     },
1100
1101     /** @id MochiKit.Visual.ScrollTo.prototype.setup */
1102     setup: function () {
1103         var p = MochiKit.Position;
1104         p.prepare();
1105         var offsets = p.cumulativeOffset(this.element);
1106         if (this.options.offset) {
1107             offsets.y += this.options.offset;
1108         }
1109         var max;
1110         if (window.innerHeight) {
1111             max = window.innerHeight - window.height;
1112         } else if (document.documentElement &&
1113                    document.documentElement.clientHeight) {
1114             max = document.documentElement.clientHeight -
1115                   document.body.scrollHeight;
1116         } else if (document.body) {
1117             max = document.body.clientHeight - document.body.scrollHeight;
1118         }
1119         this.scrollStart = p.windowOffset.y;
1120         this.delta = (offsets.y > max ? max : offsets.y) - this.scrollStart;
1121     },
1122
1123     /** @id MochiKit.Visual.ScrollTo.prototype.update */
1124     update: function (position) {
1125         var p = MochiKit.Position;
1126         p.prepare();
1127         window.scrollTo(p.windowOffset.x, this.scrollStart + (position * this.delta));
1128     }
1129 });
1130
1131 /***
1132
1133 Combination effects.
1134
1135 ***/
1136
1137 /** @id MochiKit.Visual.fade */
1138 MochiKit.Visual.fade = function (element, /* optional */ options) {
1139     /***
1140
1141     Fade a given element: change its opacity and hide it in the end.
1142
1143     @param options: 'to' and 'from' to change opacity.
1144
1145     ***/
1146     var s = MochiKit.Style;
1147     var oldOpacity = MochiKit.DOM.getElement(element).style.opacity || '';
1148     options = MochiKit.Base.update({
1149         from: s.getOpacity(element) || 1.0,
1150         to: 0.0,
1151         afterFinishInternal: function (effect) {
1152             if (effect.options.to !== 0) {
1153                 return;
1154             }
1155             s.hideElement(effect.element);
1156             s.setStyle(effect.element, {opacity: oldOpacity});
1157         }
1158     }, options || {});
1159     return new MochiKit.Visual.Opacity(element, options);
1160 };
1161
1162 /** @id MochiKit.Visual.appear */
1163 MochiKit.Visual.appear = function (element, /* optional */ options) {
1164     /***
1165
1166     Make an element appear.
1167
1168     @param options: 'to' and 'from' to change opacity.
1169
1170     ***/
1171     var s = MochiKit.Style;
1172     var v = MochiKit.Visual;
1173     options = MochiKit.Base.update({
1174         from: (s.getStyle(element, 'display') == 'none' ? 0.0 :
1175                s.getOpacity(element) || 0.0),
1176         to: 1.0,
1177         // force Safari to render floated elements properly
1178         afterFinishInternal: function (effect) {
1179             v.forceRerendering(effect.element);
1180         },
1181         beforeSetupInternal: function (effect) {
1182             s.setOpacity(effect.element, effect.options.from);
1183             s.showElement(effect.element);
1184         }
1185     }, options || {});
1186     return new v.Opacity(element, options);
1187 };
1188
1189 /** @id MochiKit.Visual.puff */
1190 MochiKit.Visual.puff = function (element, /* optional */ options) {
1191     /***
1192
1193     'Puff' an element: grow it to double size, fading it and make it hidden.
1194
1195     ***/
1196     var s = MochiKit.Style;
1197     var v = MochiKit.Visual;
1198     element = MochiKit.DOM.getElement(element);
1199     var oldStyle = {
1200         opacity: element.style.opacity || '',
1201         position: s.getStyle(element, 'position'),
1202         top: element.style.top,
1203         left: element.style.left,
1204         width: element.style.width,
1205         height: element.style.height
1206     };
1207     options = MochiKit.Base.update({
1208         beforeSetupInternal: function (effect) {
1209             MochiKit.Position.absolutize(effect.effects[0].element)
1210         },
1211         afterFinishInternal: function (effect) {
1212             s.hideElement(effect.effects[0].element);
1213             s.setStyle(effect.effects[0].element, oldStyle);
1214         }
1215     }, options || {});
1216     return new v.Parallel(
1217         [new v.Scale(element, 200,
1218             {sync: true, scaleFromCenter: true,
1219              scaleContent: true, restoreAfterFinish: true}),
1220          new v.Opacity(element, {sync: true, to: 0.0 })],
1221         options);
1222 };
1223
1224 /** @id MochiKit.Visual.blindUp */
1225 MochiKit.Visual.blindUp = function (element, /* optional */ options) {
1226     /***
1227
1228     Blind an element up: change its vertical size to 0.
1229
1230     ***/
1231     var d = MochiKit.DOM;
1232     element = d.getElement(element);
1233     var elemClip = d.makeClipping(element);
1234     options = MochiKit.Base.update({
1235         scaleContent: false,
1236         scaleX: false,
1237         restoreAfterFinish: true,
1238         afterFinishInternal: function (effect) {
1239             MochiKit.Style.hideElement(effect.element);
1240             d.undoClipping(effect.element, elemClip);
1241         }
1242     }, options || {});
1243
1244     return new MochiKit.Visual.Scale(element, 0, options);
1245 };
1246
1247 /** @id MochiKit.Visual.blindDown */
1248 MochiKit.Visual.blindDown = function (element, /* optional */ options) {
1249     /***
1250
1251     Blind an element down: restore its vertical size.
1252
1253     ***/
1254     var d = MochiKit.DOM;
1255     var s = MochiKit.Style;
1256     element = d.getElement(element);
1257     var elementDimensions = s.getElementDimensions(element);
1258     var elemClip;
1259     options = MochiKit.Base.update({
1260         scaleContent: false,
1261         scaleX: false,
1262         scaleFrom: 0,
1263         scaleMode: {originalHeight: elementDimensions.h,
1264                     originalWidth: elementDimensions.w},
1265         restoreAfterFinish: true,
1266         afterSetupInternal: function (effect) {
1267             elemClip = d.makeClipping(effect.element);
1268             s.setStyle(effect.element, {height: '0px'});
1269             s.showElement(effect.element);
1270         },
1271         afterFinishInternal: function (effect) {
1272             d.undoClipping(effect.element, elemClip);
1273         }
1274     }, options || {});
1275     return new MochiKit.Visual.Scale(element, 100, options);
1276 };
1277
1278 /** @id MochiKit.Visual.switchOff */
1279 MochiKit.Visual.switchOff = function (element, /* optional */ options) {
1280     /***
1281
1282     Apply a switch-off-like effect.
1283
1284     ***/
1285     var d = MochiKit.DOM;
1286     element = d.getElement(element);
1287     var oldOpacity = element.style.opacity || '';
1288     var elemClip;
1289     var options = MochiKit.Base.update({
1290         duration: 0.3,
1291         scaleFromCenter: true,
1292         scaleX: false,
1293         scaleContent: false,
1294         restoreAfterFinish: true,
1295         beforeSetupInternal: function (effect) {
1296             d.makePositioned(effect.element);
1297             elemClip = d.makeClipping(effect.element);
1298         },
1299         afterFinishInternal: function (effect) {
1300             MochiKit.Style.hideElement(effect.element);
1301             d.undoClipping(effect.element, elemClip);
1302             d.undoPositioned(effect.element);
1303             MochiKit.Style.setStyle(effect.element, {opacity: oldOpacity});
1304         }
1305     }, options || {});
1306     var v = MochiKit.Visual;
1307     return new v.appear(element, {
1308         duration: 0.4,
1309         from: 0,
1310         transition: v.Transitions.flicker,
1311         afterFinishInternal: function (effect) {
1312             new v.Scale(effect.element, 1, options)
1313         }
1314     });
1315 };
1316
1317 /** @id MochiKit.Visual.dropOut */
1318 MochiKit.Visual.dropOut = function (element, /* optional */ options) {
1319     /***
1320
1321     Make an element fall and disappear.
1322
1323     ***/
1324     var d = MochiKit.DOM;
1325     var s = MochiKit.Style;
1326     element = d.getElement(element);
1327     var oldStyle = {
1328         top: s.getStyle(element, 'top'),
1329         left: s.getStyle(element, 'left'),
1330         opacity: element.style.opacity || ''
1331     };
1332
1333     options = MochiKit.Base.update({
1334         duration: 0.5,
1335         beforeSetupInternal: function (effect) {
1336             d.makePositioned(effect.effects[0].element);
1337         },
1338         afterFinishInternal: function (effect) {
1339             s.hideElement(effect.effects[0].element);
1340             d.undoPositioned(effect.effects[0].element);
1341             s.setStyle(effect.effects[0].element, oldStyle);
1342         }
1343     }, options || {});
1344     var v = MochiKit.Visual;
1345     return new v.Parallel(
1346         [new v.Move(element, {x: 0, y: 100, sync: true}),
1347          new v.Opacity(element, {sync: true, to: 0.0})],
1348         options);
1349 };
1350
1351 /** @id MochiKit.Visual.shake */
1352 MochiKit.Visual.shake = function (element, /* optional */ options) {
1353     /***
1354
1355     Move an element from left to right several times.
1356
1357     ***/
1358     var d = MochiKit.DOM;
1359     var v = MochiKit.Visual;
1360     var s = MochiKit.Style;
1361     element = d.getElement(element);
1362     options = MochiKit.Base.update({
1363         x: -20,
1364         y: 0,
1365         duration: 0.05,
1366         afterFinishInternal: function (effect) {
1367             d.undoPositioned(effect.element);
1368             s.setStyle(effect.element, oldStyle);
1369         }
1370     }, options || {});
1371     var oldStyle = {
1372         top: s.getStyle(element, 'top'),
1373         left: s.getStyle(element, 'left') };
1374         return new v.Move(element,
1375           {x: 20, y: 0, duration: 0.05, afterFinishInternal: function (effect) {
1376         new v.Move(effect.element,
1377           {x: -40, y: 0, duration: 0.1, afterFinishInternal: function (effect) {
1378         new v.Move(effect.element,
1379            {x: 40, y: 0, duration: 0.1, afterFinishInternal: function (effect) {
1380         new v.Move(effect.element,
1381           {x: -40, y: 0, duration: 0.1, afterFinishInternal: function (effect) {
1382         new v.Move(effect.element,
1383            {x: 40, y: 0, duration: 0.1, afterFinishInternal: function (effect) {
1384         new v.Move(effect.element, options
1385         ) }}) }}) }}) }}) }});
1386 };
1387
1388 /** @id MochiKit.Visual.slideDown */
1389 MochiKit.Visual.slideDown = function (element, /* optional */ options) {
1390     /***
1391
1392     Slide an element down.
1393     It needs to have the content of the element wrapped in a container
1394     element with fixed height.
1395
1396     ***/
1397     var d = MochiKit.DOM;
1398     var b = MochiKit.Base;
1399     var s = MochiKit.Style;
1400     element = d.getElement(element);
1401     if (!element.firstChild) {
1402         throw "MochiKit.Visual.slideDown must be used on a element with a child";
1403     }
1404     d.removeEmptyTextNodes(element);
1405     var oldInnerBottom = s.getStyle(element.firstChild, 'bottom') || 0;
1406     var elementDimensions = s.getElementDimensions(element);
1407     var elemClip;
1408     options = b.update({
1409         scaleContent: false,
1410         scaleX: false,
1411         scaleFrom: 0,
1412         scaleMode: {originalHeight: elementDimensions.h,
1413                     originalWidth: elementDimensions.w},
1414         restoreAfterFinish: true,
1415         afterSetupInternal: function (effect) {
1416             d.makePositioned(effect.element);
1417             d.makePositioned(effect.element.firstChild);
1418             if (/Opera/.test(navigator.userAgent)) {
1419                 s.setStyle(effect.element, {top: ''});
1420             }
1421             elemClip = d.makeClipping(effect.element);
1422             s.setStyle(effect.element, {height: '0px'});
1423             s.showElement(effect.element);
1424         },
1425         afterUpdateInternal: function (effect) {
1426             s.setStyle(effect.element.firstChild,
1427                {bottom: (effect.dims[0] - effect.element.clientHeight) + 'px'})
1428         },
1429         afterFinishInternal: function (effect) {
1430             d.undoClipping(effect.element, elemClip);
1431             // IE will crash if child is undoPositioned first
1432             if (/MSIE/.test(navigator.userAgent)) {
1433                 d.undoPositioned(effect.element);
1434                 d.undoPositioned(effect.element.firstChild);
1435             } else {
1436                 d.undoPositioned(effect.element.firstChild);
1437                 d.undoPositioned(effect.element);
1438             }
1439             s.setStyle(effect.element.firstChild,
1440                                   {bottom: oldInnerBottom});
1441         }
1442     }, options || {});
1443
1444     return new MochiKit.Visual.Scale(element, 100, options);
1445 };
1446
1447 /** @id MochiKit.Visual.slideUp */
1448 MochiKit.Visual.slideUp = function (element, /* optional */ options) {
1449     /***
1450
1451     Slide an element up.
1452     It needs to have the content of the element wrapped in a container
1453     element with fixed height.
1454
1455     ***/
1456     var d = MochiKit.DOM;
1457     var b = MochiKit.Base;
1458     var s = MochiKit.Style;
1459     element = d.getElement(element);
1460     if (!element.firstChild) {
1461         throw "MochiKit.Visual.slideUp must be used on a element with a child";
1462     }
1463     d.removeEmptyTextNodes(element);
1464     var oldInnerBottom = s.getStyle(element.firstChild, 'bottom');
1465     var elemClip;
1466     options = b.update({
1467         scaleContent: false,
1468         scaleX: false,
1469         scaleMode: 'box',
1470         scaleFrom: 100,
1471         restoreAfterFinish: true,
1472         beforeStartInternal: function (effect) {
1473             d.makePositioned(effect.element);
1474             d.makePositioned(effect.element.firstChild);
1475             if (/Opera/.test(navigator.userAgent)) {
1476                 s.setStyle(effect.element, {top: ''});
1477             }
1478             elemClip = d.makeClipping(effect.element);
1479             s.showElement(effect.element);
1480         },
1481         afterUpdateInternal: function (effect) {
1482             s.setStyle(effect.element.firstChild,
1483             {bottom: (effect.dims[0] - effect.element.clientHeight) + 'px'});
1484         },
1485         afterFinishInternal: function (effect) {
1486             s.hideElement(effect.element);
1487             d.undoClipping(effect.element, elemClip);
1488             d.undoPositioned(effect.element.firstChild);
1489             d.undoPositioned(effect.element);
1490             s.setStyle(effect.element.firstChild, {bottom: oldInnerBottom});
1491         }
1492     }, options || {});
1493     return new MochiKit.Visual.Scale(element, 0, options);
1494 };
1495
1496 // Bug in opera makes the TD containing this element expand for a instance
1497 // after finish
1498 /** @id MochiKit.Visual.squish */
1499 MochiKit.Visual.squish = function (element, /* optional */ options) {
1500     /***
1501
1502     Reduce an element and make it disappear.
1503
1504     ***/
1505     var d = MochiKit.DOM;
1506     var b = MochiKit.Base;
1507     var elemClip;
1508     options = b.update({
1509         restoreAfterFinish: true,
1510         beforeSetupInternal: function (effect) {
1511             elemClip = d.makeClipping(effect.element);
1512         },
1513         afterFinishInternal: function (effect) {
1514             MochiKit.Style.hideElement(effect.element);
1515             d.undoClipping(effect.element, elemClip);
1516         }
1517     }, options || {});
1518
1519     return new MochiKit.Visual.Scale(element, /Opera/.test(navigator.userAgent) ? 1 : 0, options);
1520 };
1521
1522 /** @id MochiKit.Visual.grow */
1523 MochiKit.Visual.grow = function (element, /* optional */ options) {
1524     /***
1525
1526     Grow an element to its original size. Make it zero-sized before
1527     if necessary.
1528
1529     ***/
1530     var d = MochiKit.DOM;
1531     var v = MochiKit.Visual;
1532     var s = MochiKit.Style;
1533     element = d.getElement(element);
1534     options = MochiKit.Base.update({
1535         direction: 'center',
1536         moveTransition: v.Transitions.sinoidal,
1537         scaleTransition: v.Transitions.sinoidal,
1538         opacityTransition: v.Transitions.full
1539     }, options || {});
1540     var oldStyle = {
1541         top: element.style.top,
1542         left: element.style.left,
1543         height: element.style.height,
1544         width: element.style.width,
1545         opacity: element.style.opacity || ''
1546     };
1547
1548     var dims = s.getElementDimensions(element);
1549     var initialMoveX, initialMoveY;
1550     var moveX, moveY;
1551
1552     switch (options.direction) {
1553         case 'top-left':
1554             initialMoveX = initialMoveY = moveX = moveY = 0;
1555             break;
1556         case 'top-right':
1557             initialMoveX = dims.w;
1558             initialMoveY = moveY = 0;
1559             moveX = -dims.w;
1560             break;
1561         case 'bottom-left':
1562             initialMoveX = moveX = 0;
1563             initialMoveY = dims.h;
1564             moveY = -dims.h;
1565             break;
1566         case 'bottom-right':
1567             initialMoveX = dims.w;
1568             initialMoveY = dims.h;
1569             moveX = -dims.w;
1570             moveY = -dims.h;
1571             break;
1572         case 'center':
1573             initialMoveX = dims.w / 2;
1574             initialMoveY = dims.h / 2;
1575             moveX = -dims.w / 2;
1576             moveY = -dims.h / 2;
1577             break;
1578     }
1579
1580     var optionsParallel = MochiKit.Base.update({
1581         beforeSetupInternal: function (effect) {
1582             s.setStyle(effect.effects[0].element, {height: '0px'});
1583             s.showElement(effect.effects[0].element);
1584         },
1585         afterFinishInternal: function (effect) {
1586             d.undoClipping(effect.effects[0].element);
1587             d.undoPositioned(effect.effects[0].element);
1588             s.setStyle(effect.effects[0].element, oldStyle);
1589         }
1590     }, options || {});
1591
1592     return new v.Move(element, {
1593         x: initialMoveX,
1594         y: initialMoveY,
1595         duration: 0.01,
1596         beforeSetupInternal: function (effect) {
1597             s.hideElement(effect.element);
1598             d.makeClipping(effect.element);
1599             d.makePositioned(effect.element);
1600         },
1601         afterFinishInternal: function (effect) {
1602             new v.Parallel(
1603                 [new v.Opacity(effect.element, {
1604                     sync: true, to: 1.0, from: 0.0,
1605                     transition: options.opacityTransition
1606                  }),
1607                  new v.Move(effect.element, {
1608                      x: moveX, y: moveY, sync: true,
1609                      transition: options.moveTransition
1610                  }),
1611                  new v.Scale(effect.element, 100, {
1612                         scaleMode: {originalHeight: dims.h,
1613                                     originalWidth: dims.w},
1614                         sync: true,
1615                         scaleFrom: /Opera/.test(navigator.userAgent) ? 1 : 0,
1616                         transition: options.scaleTransition,
1617                         restoreAfterFinish: true
1618                 })
1619                 ], optionsParallel
1620             );
1621         }
1622     });
1623 };
1624
1625 /** @id MochiKit.Visual.shrink */
1626 MochiKit.Visual.shrink = function (element, /* optional */ options) {
1627     /***
1628
1629     Shrink an element and make it disappear.
1630
1631     ***/
1632     var d = MochiKit.DOM;
1633     var v = MochiKit.Visual;
1634     var s = MochiKit.Style;
1635     element = d.getElement(element);
1636     options = MochiKit.Base.update({
1637         direction: 'center',
1638         moveTransition: v.Transitions.sinoidal,
1639         scaleTransition: v.Transitions.sinoidal,
1640         opacityTransition: v.Transitions.none
1641     }, options || {});
1642     var oldStyle = {
1643         top: element.style.top,
1644         left: element.style.left,
1645         height: element.style.height,
1646         width: element.style.width,
1647         opacity: element.style.opacity || ''
1648     };
1649
1650     var dims = s.getElementDimensions(element);
1651     var moveX, moveY;
1652
1653     switch (options.direction) {
1654         case 'top-left':
1655             moveX = moveY = 0;
1656             break;
1657         case 'top-right':
1658             moveX = dims.w;
1659             moveY = 0;
1660             break;
1661         case 'bottom-left':
1662             moveX = 0;
1663             moveY = dims.h;
1664             break;
1665         case 'bottom-right':
1666             moveX = dims.w;
1667             moveY = dims.h;
1668             break;
1669         case 'center':
1670             moveX = dims.w / 2;
1671             moveY = dims.h / 2;
1672             break;
1673     }
1674     var elemClip;
1675
1676     var optionsParallel = MochiKit.Base.update({
1677         beforeStartInternal: function (effect) {
1678             elemClip = d.makePositioned(effect.effects[0].element);
1679             d.makeClipping(effect.effects[0].element);
1680         },
1681         afterFinishInternal: function (effect) {
1682             s.hideElement(effect.effects[0].element);
1683             d.undoClipping(effect.effects[0].element, elemClip);
1684             d.undoPositioned(effect.effects[0].element);
1685             s.setStyle(effect.effects[0].element, oldStyle);
1686         }
1687     }, options || {});
1688
1689     return new v.Parallel(
1690         [new v.Opacity(element, {
1691             sync: true, to: 0.0, from: 1.0,
1692             transition: options.opacityTransition
1693          }),
1694          new v.Scale(element, /Opera/.test(navigator.userAgent) ? 1 : 0, {
1695              sync: true, transition: options.scaleTransition,
1696              restoreAfterFinish: true
1697          }),
1698          new v.Move(element, {
1699              x: moveX, y: moveY, sync: true, transition: options.moveTransition
1700          })
1701         ], optionsParallel
1702     );
1703 };
1704
1705 /** @id MochiKit.Visual.pulsate */
1706 MochiKit.Visual.pulsate = function (element, /* optional */ options) {
1707     /***
1708
1709     Pulse an element between appear/fade.
1710
1711     ***/
1712     var d = MochiKit.DOM;
1713     var v = MochiKit.Visual;
1714     var b = MochiKit.Base;
1715     var oldOpacity = d.getElement(element).style.opacity || '';
1716     options = b.update({
1717         duration: 3.0,
1718         from: 0,
1719         afterFinishInternal: function (effect) {
1720             MochiKit.Style.setStyle(effect.element, {opacity: oldOpacity});
1721         }
1722     }, options || {});
1723     var transition = options.transition || v.Transitions.sinoidal;
1724     var reverser = b.bind(function (pos) {
1725         return transition(1 - v.Transitions.pulse(pos));
1726     }, transition);
1727     b.bind(reverser, transition);
1728     return new v.Opacity(element, b.update({
1729         transition: reverser}, options));
1730 };
1731
1732 /** @id MochiKit.Visual.fold */
1733 MochiKit.Visual.fold = function (element, /* optional */ options) {
1734     /***
1735
1736     Fold an element, first vertically, then horizontally.
1737
1738     ***/
1739     var d = MochiKit.DOM;
1740     var v = MochiKit.Visual;
1741     var s = MochiKit.Style;
1742     element = d.getElement(element);
1743     var oldStyle = {
1744         top: element.style.top,
1745         left: element.style.left,
1746         width: element.style.width,
1747         height: element.style.height
1748     };
1749     var elemClip = d.makeClipping(element);
1750     options = MochiKit.Base.update({
1751         scaleContent: false,
1752         scaleX: false,
1753         afterFinishInternal: function (effect) {
1754             new v.Scale(element, 1, {
1755                 scaleContent: false,
1756                 scaleY: false,
1757                 afterFinishInternal: function (effect) {
1758                     s.hideElement(effect.element);
1759                     d.undoClipping(effect.element, elemClip);
1760                     s.setStyle(effect.element, oldStyle);
1761                 }
1762             });
1763         }
1764     }, options || {});
1765     return new v.Scale(element, 5, options);
1766 };
1767
1768
1769 // Compatibility with MochiKit 1.0
1770 MochiKit.Visual.Color = MochiKit.Color.Color;
1771 MochiKit.Visual.getElementsComputedStyle = MochiKit.DOM.computedStyle;
1772
1773 /* end of Rico adaptation */
1774
1775 MochiKit.Visual.__new__ = function () {
1776     var m = MochiKit.Base;
1777
1778     m.nameFunctions(this);
1779
1780     this.EXPORT_TAGS = {
1781         ":common": this.EXPORT,
1782         ":all": m.concat(this.EXPORT, this.EXPORT_OK)
1783     };
1784
1785 };
1786
1787 MochiKit.Visual.EXPORT = [
1788     "roundElement",
1789     "roundClass",
1790     "tagifyText",
1791     "multiple",
1792     "toggle",
1793     "Base",
1794     "Parallel",
1795     "Opacity",
1796     "Move",
1797     "Scale",
1798     "Highlight",
1799     "ScrollTo",
1800     "fade",
1801     "appear",
1802     "puff",
1803     "blindUp",
1804     "blindDown",
1805     "switchOff",
1806     "dropOut",
1807     "shake",
1808     "slideDown",
1809     "slideUp",
1810     "squish",
1811     "grow",
1812     "shrink",
1813     "pulsate",
1814     "fold"
1815 ];
1816
1817 MochiKit.Visual.EXPORT_OK = [
1818     "PAIRS"
1819 ];
1820
1821 MochiKit.Visual.__new__();
1822
1823 MochiKit.Base._exportSymbols(this, MochiKit.Visual);