rt/share/html/NoAuth/js/scriptaculous/effects.js

   1 // script.aculo.us effects.js v1.8.2, Tue Nov 18 18:30:58 +0100 2008
   2
   3 // Copyright (c) 2005-2008 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
   4 // Contributors:
   5 //  Justin Palmer (http://encytemedia.com/)
   6 //  Mark Pilgrim (http://diveintomark.org/)
   7 //  Martin Bialasinki
   8 //
   9 // script.aculo.us is freely distributable under the terms of an MIT-style license.
  10 // For details, see the script.aculo.us web site: http://script.aculo.us/
  11
  12 // converts rgb() and #xxx to #xxxxxx format,
  13 // returns self (or first argument) if not convertable
  14 String.prototype.parseColor = function() {
  15   var color = '#';
  16   if (this.slice(0,4) == 'rgb(') {
  17     var cols = this.slice(4,this.length-1).split(',');
  18     var i=0; do { color += parseInt(cols[i]).toColorPart() } while (++i<3);
  19   } else {
  20     if (this.slice(0,1) == '#') {
  21       if (this.length==4) for(var i=1;i<4;i++) color += (this.charAt(i) + this.charAt(i)).toLowerCase();
  22       if (this.length==7) color = this.toLowerCase();
  23     }
  24   }
  25   return (color.length==7 ? color : (arguments[0] || this));
  26 };
  27
  28 /*--------------------------------------------------------------------------*/
  29
  30 Element.collectTextNodes = function(element) {
  31   return $A($(element).childNodes).collect( function(node) {
  32     return (node.nodeType==3 ? node.nodeValue :
  33       (node.hasChildNodes() ? Element.collectTextNodes(node) : ''));
  34   }).flatten().join('');
  35 };
  36
  37 Element.collectTextNodesIgnoreClass = function(element, className) {
  38   return $A($(element).childNodes).collect( function(node) {
  39     return (node.nodeType==3 ? node.nodeValue :
  40       ((node.hasChildNodes() && !Element.hasClassName(node,className)) ?
  41         Element.collectTextNodesIgnoreClass(node, className) : ''));
  42   }).flatten().join('');
  43 };
  44
  45 Element.setContentZoom = function(element, percent) {
  46   element = $(element);
  47   element.setStyle({fontSize: (percent/100) + 'em'});
  48   if (Prototype.Browser.WebKit) window.scrollBy(0,0);
  49   return element;
  50 };
  51
  52 Element.getInlineOpacity = function(element){
  53   return $(element).style.opacity || '';
  54 };
  55
  56 Element.forceRerendering = function(element) {
  57   try {
  58     element = $(element);
  59     var n = document.createTextNode(' ');
  60     element.appendChild(n);
  61     element.removeChild(n);
  62   } catch(e) { }
  63 };
  64
  65 /*--------------------------------------------------------------------------*/
  66
  67 var Effect = {
  68   _elementDoesNotExistError: {
  69     name: 'ElementDoesNotExistError',
  70     message: 'The specified DOM element does not exist, but is required for this effect to operate'
  71   },
  72   Transitions: {
  73     linear: Prototype.K,
  74     sinoidal: function(pos) {
  75       return (-Math.cos(pos*Math.PI)/2) + .5;
  76     },
  77     reverse: function(pos) {
  78       return 1-pos;
  79     },
  80     flicker: function(pos) {
  81       var pos = ((-Math.cos(pos*Math.PI)/4) + .75) + Math.random()/4;
  82       return pos > 1 ? 1 : pos;
  83     },
  84     wobble: function(pos) {
  85       return (-Math.cos(pos*Math.PI*(9*pos))/2) + .5;
  86     },
  87     pulse: function(pos, pulses) {
  88       return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5;
  89     },
  90     spring: function(pos) {
  91       return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6));
  92     },
  93     none: function(pos) {
  94       return 0;
  95     },
  96     full: function(pos) {
  97       return 1;
  98     }
  99   },
 100   DefaultOptions: {
 101     duration:   1.0,   // seconds
 102     fps:        100,   // 100= assume 66fps max.
 103     sync:       false, // true for combining
 104     from:       0.0,
 105     to:         1.0,
 106     delay:      0.0,
 107     queue:      'parallel'
 108   },
 109   tagifyText: function(element) {
 110     var tagifyStyle = 'position:relative';
 111     if (Prototype.Browser.IE) tagifyStyle += ';zoom:1';
 112
 113     element = $(element);
 114     $A(element.childNodes).each( function(child) {
 115       if (child.nodeType==3) {
 116         child.nodeValue.toArray().each( function(character) {
 117           element.insertBefore(
 118             new Element('span', {style: tagifyStyle}).update(
 119               character == ' ' ? String.fromCharCode(160) : character),
 120               child);
 121         });
 122         Element.remove(child);
 123       }
 124     });
 125   },
 126   multiple: function(element, effect) {
 127     var elements;
 128     if (((typeof element == 'object') ||
 129         Object.isFunction(element)) &&
 130        (element.length))
 131       elements = element;
 132     else
 133       elements = $(element).childNodes;
 134
 135     var options = Object.extend({
 136       speed: 0.1,
 137       delay: 0.0
 138     }, arguments[2] || { });
 139     var masterDelay = options.delay;
 140
 141     $A(elements).each( function(element, index) {
 142       new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay }));
 143     });
 144   },
 145   PAIRS: {
 146     'slide':  ['SlideDown','SlideUp'],
 147     'blind':  ['BlindDown','BlindUp'],
 148     'appear': ['Appear','Fade']
 149   },
 150   toggle: function(element, effect) {
 151     element = $(element);
 152     effect = (effect || 'appear').toLowerCase();
 153     var options = Object.extend({
 154       queue: { position:'end', scope:(element.id || 'global'), limit: 1 }
 155     }, arguments[2] || { });
 156     Effect[element.visible() ?
 157       Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options);
 158   }
 159 };
 160
 161 Effect.DefaultOptions.transition = Effect.Transitions.sinoidal;
 162
 163 /* ------------- core effects ------------- */
 164
 165 Effect.ScopedQueue = Class.create(Enumerable, {
 166   initialize: function() {
 167     this.effects  = [];
 168     this.interval = null;
 169   },
 170   _each: function(iterator) {
 171     this.effects._each(iterator);
 172   },
 173   add: function(effect) {
 174     var timestamp = new Date().getTime();
 175
 176     var position = Object.isString(effect.options.queue) ?
 177       effect.options.queue : effect.options.queue.position;
 178
 179     switch(position) {
 180       case 'front':
 181         // move unstarted effects after this effect
 182         this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) {
 183             e.startOn  += effect.finishOn;
 184             e.finishOn += effect.finishOn;
 185           });
 186         break;
 187       case 'with-last':
 188         timestamp = this.effects.pluck('startOn').max() || timestamp;
 189         break;
 190       case 'end':
 191         // start effect after last queued effect has finished
 192         timestamp = this.effects.pluck('finishOn').max() || timestamp;
 193         break;
 194     }
 195
 196     effect.startOn  += timestamp;
 197     effect.finishOn += timestamp;
 198
 199     if (!effect.options.queue.limit || (this.effects.length < effect.options.queue.limit))
 200       this.effects.push(effect);
 201
 202     if (!this.interval)
 203       this.interval = setInterval(this.loop.bind(this), 15);
 204   },
 205   remove: function(effect) {
 206     this.effects = this.effects.reject(function(e) { return e==effect });
 207     if (this.effects.length == 0) {
 208       clearInterval(this.interval);
 209       this.interval = null;
 210     }
 211   },
 212   loop: function() {
 213     var timePos = new Date().getTime();
 214     for(var i=0, len=this.effects.length;i<len;i++)
 215       this.effects[i] && this.effects[i].loop(timePos);
 216   }
 217 });
 218
 219 Effect.Queues = {
 220   instances: $H(),
 221   get: function(queueName) {
 222     if (!Object.isString(queueName)) return queueName;
 223
 224     return this.instances.get(queueName) ||
 225       this.instances.set(queueName, new Effect.ScopedQueue());
 226   }
 227 };
 228 Effect.Queue = Effect.Queues.get('global');
 229
 230 Effect.Base = Class.create({
 231   position: null,
 232   start: function(options) {
 233     function codeForEvent(options,eventName){
 234       return (
 235         (options[eventName+'Internal'] ? 'this.options.'+eventName+'Internal(this);' : '') +
 236         (options[eventName] ? 'this.options.'+eventName+'(this);' : '')
 237       );
 238     }
 239     if (options && options.transition === false) options.transition = Effect.Transitions.linear;
 240     this.options      = Object.extend(Object.extend({ },Effect.DefaultOptions), options || { });
 241     this.currentFrame = 0;
 242     this.state        = 'idle';
 243     this.startOn      = this.options.delay*1000;
 244     this.finishOn     = this.startOn+(this.options.duration*1000);
 245     this.fromToDelta  = this.options.to-this.options.from;
 246     this.totalTime    = this.finishOn-this.startOn;
 247     this.totalFrames  = this.options.fps*this.options.duration;
 248
 249     this.render = (function() {
 250       function dispatch(effect, eventName) {
 251         if (effect.options[eventName + 'Internal'])
 252           effect.options[eventName + 'Internal'](effect);
 253         if (effect.options[eventName])
 254           effect.options[eventName](effect);
 255       }
 256
 257       return function(pos) {
 258         if (this.state === "idle") {
 259           this.state = "running";
 260           dispatch(this, 'beforeSetup');
 261           if (this.setup) this.setup();
 262           dispatch(this, 'afterSetup');
 263         }
 264         if (this.state === "running") {
 265           pos = (this.options.transition(pos) * this.fromToDelta) + this.options.from;
 266           this.position = pos;
 267           dispatch(this, 'beforeUpdate');
 268           if (this.update) this.update(pos);
 269           dispatch(this, 'afterUpdate');
 270         }
 271       };
 272     })();
 273
 274     this.event('beforeStart');
 275     if (!this.options.sync)
 276       Effect.Queues.get(Object.isString(this.options.queue) ?
 277         'global' : this.options.queue.scope).add(this);
 278   },
 279   loop: function(timePos) {
 280     if (timePos >= this.startOn) {
 281       if (timePos >= this.finishOn) {
 282         this.render(1.0);
 283         this.cancel();
 284         this.event('beforeFinish');
 285         if (this.finish) this.finish();
 286         this.event('afterFinish');
 287         return;
 288       }
 289       var pos   = (timePos - this.startOn) / this.totalTime,
 290           frame = (pos * this.totalFrames).round();
 291       if (frame > this.currentFrame) {
 292         this.render(pos);
 293         this.currentFrame = frame;
 294       }
 295     }
 296   },
 297   cancel: function() {
 298     if (!this.options.sync)
 299       Effect.Queues.get(Object.isString(this.options.queue) ?
 300         'global' : this.options.queue.scope).remove(this);
 301     this.state = 'finished';
 302   },
 303   event: function(eventName) {
 304     if (this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this);
 305     if (this.options[eventName]) this.options[eventName](this);
 306   },
 307   inspect: function() {
 308     var data = $H();
 309     for(property in this)
 310       if (!Object.isFunction(this[property])) data.set(property, this[property]);
 311     return '#<Effect:' + data.inspect() + ',options:' + $H(this.options).inspect() + '>';
 312   }
 313 });
 314
 315 Effect.Parallel = Class.create(Effect.Base, {
 316   initialize: function(effects) {
 317     this.effects = effects || [];
 318     this.start(arguments[1]);
 319   },
 320   update: function(position) {
 321     this.effects.invoke('render', position);
 322   },
 323   finish: function(position) {
 324     this.effects.each( function(effect) {
 325       effect.render(1.0);
 326       effect.cancel();
 327       effect.event('beforeFinish');
 328       if (effect.finish) effect.finish(position);
 329       effect.event('afterFinish');
 330     });
 331   }
 332 });
 333
 334 Effect.Tween = Class.create(Effect.Base, {
 335   initialize: function(object, from, to) {
 336     object = Object.isString(object) ? $(object) : object;
 337     var args = $A(arguments), method = args.last(),
 338       options = args.length == 5 ? args[3] : null;
 339     this.method = Object.isFunction(method) ? method.bind(object) :
 340       Object.isFunction(object[method]) ? object[method].bind(object) :
 341       function(value) { object[method] = value };
 342     this.start(Object.extend({ from: from, to: to }, options || { }));
 343   },
 344   update: function(position) {
 345     this.method(position);
 346   }
 347 });
 348
 349 Effect.Event = Class.create(Effect.Base, {
 350   initialize: function() {
 351     this.start(Object.extend({ duration: 0 }, arguments[0] || { }));
 352   },
 353   update: Prototype.emptyFunction
 354 });
 355
 356 Effect.Opacity = Class.create(Effect.Base, {
 357   initialize: function(element) {
 358     this.element = $(element);
 359     if (!this.element) throw(Effect._elementDoesNotExistError);
 360     // make this work on IE on elements without 'layout'
 361     if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout))
 362       this.element.setStyle({zoom: 1});
 363     var options = Object.extend({
 364       from: this.element.getOpacity() || 0.0,
 365       to:   1.0
 366     }, arguments[1] || { });
 367     this.start(options);
 368   },
 369   update: function(position) {
 370     this.element.setOpacity(position);
 371   }
 372 });
 373
 374 Effect.Move = Class.create(Effect.Base, {
 375   initialize: function(element) {
 376     this.element = $(element);
 377     if (!this.element) throw(Effect._elementDoesNotExistError);
 378     var options = Object.extend({
 379       x:    0,
 380       y:    0,
 381       mode: 'relative'
 382     }, arguments[1] || { });
 383     this.start(options);
 384   },
 385   setup: function() {
 386     this.element.makePositioned();
 387     this.originalLeft = parseFloat(this.element.getStyle('left') || '0');
 388     this.originalTop  = parseFloat(this.element.getStyle('top')  || '0');
 389     if (this.options.mode == 'absolute') {
 390       this.options.x = this.options.x - this.originalLeft;
 391       this.options.y = this.options.y - this.originalTop;
 392     }
 393   },
 394   update: function(position) {
 395     this.element.setStyle({
 396       left: (this.options.x  * position + this.originalLeft).round() + 'px',
 397       top:  (this.options.y  * position + this.originalTop).round()  + 'px'
 398     });
 399   }
 400 });
 401
 402 // for backwards compatibility
 403 Effect.MoveBy = function(element, toTop, toLeft) {
 404   return new Effect.Move(element,
 405     Object.extend({ x: toLeft, y: toTop }, arguments[3] || { }));
 406 };
 407
 408 Effect.Scale = Class.create(Effect.Base, {
 409   initialize: function(element, percent) {
 410     this.element = $(element);
 411     if (!this.element) throw(Effect._elementDoesNotExistError);
 412     var options = Object.extend({
 413       scaleX: true,
 414       scaleY: true,
 415       scaleContent: true,
 416       scaleFromCenter: false,
 417       scaleMode: 'box',        // 'box' or 'contents' or { } with provided values
 418       scaleFrom: 100.0,
 419       scaleTo:   percent
 420     }, arguments[2] || { });
 421     this.start(options);
 422   },
 423   setup: function() {
 424     this.restoreAfterFinish = this.options.restoreAfterFinish || false;
 425     this.elementPositioning = this.element.getStyle('position');
 426
 427     this.originalStyle = { };
 428     ['top','left','width','height','fontSize'].each( function(k) {
 429       this.originalStyle[k] = this.element.style[k];
 430     }.bind(this));
 431
 432     this.originalTop  = this.element.offsetTop;
 433     this.originalLeft = this.element.offsetLeft;
 434
 435     var fontSize = this.element.getStyle('font-size') || '100%';
 436     ['em','px','%','pt'].each( function(fontSizeType) {
 437       if (fontSize.indexOf(fontSizeType)>0) {
 438         this.fontSize     = parseFloat(fontSize);
 439         this.fontSizeType = fontSizeType;
 440       }
 441     }.bind(this));
 442
 443     this.factor = (this.options.scaleTo - this.options.scaleFrom)/100;
 444
 445     this.dims = null;
 446     if (this.options.scaleMode=='box')
 447       this.dims = [this.element.offsetHeight, this.element.offsetWidth];
 448     if (/^content/.test(this.options.scaleMode))
 449       this.dims = [this.element.scrollHeight, this.element.scrollWidth];
 450     if (!this.dims)
 451       this.dims = [this.options.scaleMode.originalHeight,
 452                    this.options.scaleMode.originalWidth];
 453   },
 454   update: function(position) {
 455     var currentScale = (this.options.scaleFrom/100.0) + (this.factor * position);
 456     if (this.options.scaleContent && this.fontSize)
 457       this.element.setStyle({fontSize: this.fontSize * currentScale + this.fontSizeType });
 458     this.setDimensions(this.dims[0] * currentScale, this.dims[1] * currentScale);
 459   },
 460   finish: function(position) {
 461     if (this.restoreAfterFinish) this.element.setStyle(this.originalStyle);
 462   },
 463   setDimensions: function(height, width) {
 464     var d = { };
 465     if (this.options.scaleX) d.width = width.round() + 'px';
 466     if (this.options.scaleY) d.height = height.round() + 'px';
 467     if (this.options.scaleFromCenter) {
 468       var topd  = (height - this.dims[0])/2;
 469       var leftd = (width  - this.dims[1])/2;
 470       if (this.elementPositioning == 'absolute') {
 471         if (this.options.scaleY) d.top = this.originalTop-topd + 'px';
 472         if (this.options.scaleX) d.left = this.originalLeft-leftd + 'px';
 473       } else {
 474         if (this.options.scaleY) d.top = -topd + 'px';
 475         if (this.options.scaleX) d.left = -leftd + 'px';
 476       }
 477     }
 478     this.element.setStyle(d);
 479   }
 480 });
 481
 482 Effect.Highlight = Class.create(Effect.Base, {
 483   initialize: function(element) {
 484     this.element = $(element);
 485     if (!this.element) throw(Effect._elementDoesNotExistError);
 486     var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || { });
 487     this.start(options);
 488   },
 489   setup: function() {
 490     // Prevent executing on elements not in the layout flow
 491     if (this.element.getStyle('display')=='none') { this.cancel(); return; }
 492     // Disable background image during the effect
 493     this.oldStyle = { };
 494     if (!this.options.keepBackgroundImage) {
 495       this.oldStyle.backgroundImage = this.element.getStyle('background-image');
 496       this.element.setStyle({backgroundImage: 'none'});
 497     }
 498     if (!this.options.endcolor)
 499       this.options.endcolor = this.element.getStyle('background-color').parseColor('#ffffff');
 500     if (!this.options.restorecolor)
 501       this.options.restorecolor = this.element.getStyle('background-color');
 502     // init color calculations
 503     this._base  = $R(0,2).map(function(i){ return parseInt(this.options.startcolor.slice(i*2+1,i*2+3),16) }.bind(this));
 504     this._delta = $R(0,2).map(function(i){ return parseInt(this.options.endcolor.slice(i*2+1,i*2+3),16)-this._base[i] }.bind(this));
 505   },
 506   update: function(position) {
 507     this.element.setStyle({backgroundColor: $R(0,2).inject('#',function(m,v,i){
 508       return m+((this._base[i]+(this._delta[i]*position)).round().toColorPart()); }.bind(this)) });
 509   },
 510   finish: function() {
 511     this.element.setStyle(Object.extend(this.oldStyle, {
 512       backgroundColor: this.options.restorecolor
 513     }));
 514   }
 515 });
 516
 517 Effect.ScrollTo = function(element) {
 518   var options = arguments[1] || { },
 519   scrollOffsets = document.viewport.getScrollOffsets(),
 520   elementOffsets = $(element).cumulativeOffset();
 521
 522   if (options.offset) elementOffsets[1] += options.offset;
 523
 524   return new Effect.Tween(null,
 525     scrollOffsets.top,
 526     elementOffsets[1],
 527     options,
 528     function(p){ scrollTo(scrollOffsets.left, p.round()); }
 529   );
 530 };
 531
 532 /* ------------- combination effects ------------- */
 533
 534 Effect.Fade = function(element) {
 535   element = $(element);
 536   var oldOpacity = element.getInlineOpacity();
 537   var options = Object.extend({
 538     from: element.getOpacity() || 1.0,
 539     to:   0.0,
 540     afterFinishInternal: function(effect) {
 541       if (effect.options.to!=0) return;
 542       effect.element.hide().setStyle({opacity: oldOpacity});
 543     }
 544   }, arguments[1] || { });
 545   return new Effect.Opacity(element,options);
 546 };
 547
 548 Effect.Appear = function(element) {
 549   element = $(element);
 550   var options = Object.extend({
 551   from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0),
 552   to:   1.0,
 553   // force Safari to render floated elements properly
 554   afterFinishInternal: function(effect) {
 555     effect.element.forceRerendering();
 556   },
 557   beforeSetup: function(effect) {
 558     effect.element.setOpacity(effect.options.from).show();
 559   }}, arguments[1] || { });
 560   return new Effect.Opacity(element,options);
 561 };
 562
 563 Effect.Puff = function(element) {
 564   element = $(element);
 565   var oldStyle = {
 566     opacity: element.getInlineOpacity(),
 567     position: element.getStyle('position'),
 568     top:  element.style.top,
 569     left: element.style.left,
 570     width: element.style.width,
 571     height: element.style.height
 572   };
 573   return new Effect.Parallel(
 574    [ new Effect.Scale(element, 200,
 575       { sync: true, scaleFromCenter: true, scaleContent: true, restoreAfterFinish: true }),
 576      new Effect.Opacity(element, { sync: true, to: 0.0 } ) ],
 577      Object.extend({ duration: 1.0,
 578       beforeSetupInternal: function(effect) {
 579         Position.absolutize(effect.effects[0].element);
 580       },
 581       afterFinishInternal: function(effect) {
 582          effect.effects[0].element.hide().setStyle(oldStyle); }
 583      }, arguments[1] || { })
 584    );
 585 };
 586
 587 Effect.BlindUp = function(element) {
 588   element = $(element);
 589   element.makeClipping();
 590   return new Effect.Scale(element, 0,
 591     Object.extend({ scaleContent: false,
 592       scaleX: false,
 593       restoreAfterFinish: true,
 594       afterFinishInternal: function(effect) {
 595         effect.element.hide().undoClipping();
 596       }
 597     }, arguments[1] || { })
 598   );
 599 };
 600
 601 Effect.BlindDown = function(element) {
 602   element = $(element);
 603   var elementDimensions = element.getDimensions();
 604   return new Effect.Scale(element, 100, Object.extend({
 605     scaleContent: false,
 606     scaleX: false,
 607     scaleFrom: 0,
 608     scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
 609     restoreAfterFinish: true,
 610     afterSetup: function(effect) {
 611       effect.element.makeClipping().setStyle({height: '0px'}).show();
 612     },
 613     afterFinishInternal: function(effect) {
 614       effect.element.undoClipping();
 615     }
 616   }, arguments[1] || { }));
 617 };
 618
 619 Effect.SwitchOff = function(element) {
 620   element = $(element);
 621   var oldOpacity = element.getInlineOpacity();
 622   return new Effect.Appear(element, Object.extend({
 623     duration: 0.4,
 624     from: 0,
 625     transition: Effect.Transitions.flicker,
 626     afterFinishInternal: function(effect) {
 627       new Effect.Scale(effect.element, 1, {
 628         duration: 0.3, scaleFromCenter: true,
 629         scaleX: false, scaleContent: false, restoreAfterFinish: true,
 630         beforeSetup: function(effect) {
 631           effect.element.makePositioned().makeClipping();
 632         },
 633         afterFinishInternal: function(effect) {
 634           effect.element.hide().undoClipping().undoPositioned().setStyle({opacity: oldOpacity});
 635         }
 636       });
 637     }
 638   }, arguments[1] || { }));
 639 };
 640
 641 Effect.DropOut = function(element) {
 642   element = $(element);
 643   var oldStyle = {
 644     top: element.getStyle('top'),
 645     left: element.getStyle('left'),
 646     opacity: element.getInlineOpacity() };
 647   return new Effect.Parallel(
 648     [ new Effect.Move(element, {x: 0, y: 100, sync: true }),
 649       new Effect.Opacity(element, { sync: true, to: 0.0 }) ],
 650     Object.extend(
 651       { duration: 0.5,
 652         beforeSetup: function(effect) {
 653           effect.effects[0].element.makePositioned();
 654         },
 655         afterFinishInternal: function(effect) {
 656           effect.effects[0].element.hide().undoPositioned().setStyle(oldStyle);
 657         }
 658       }, arguments[1] || { }));
 659 };
 660
 661 Effect.Shake = function(element) {
 662   element = $(element);
 663   var options = Object.extend({
 664     distance: 20,
 665     duration: 0.5
 666   }, arguments[1] || {});
 667   var distance = parseFloat(options.distance);
 668   var split = parseFloat(options.duration) / 10.0;
 669   var oldStyle = {
 670     top: element.getStyle('top'),
 671     left: element.getStyle('left') };
 672     return new Effect.Move(element,
 673       { x:  distance, y: 0, duration: split, afterFinishInternal: function(effect) {
 674     new Effect.Move(effect.element,
 675       { x: -distance*2, y: 0, duration: split*2,  afterFinishInternal: function(effect) {
 676     new Effect.Move(effect.element,
 677       { x:  distance*2, y: 0, duration: split*2,  afterFinishInternal: function(effect) {
 678     new Effect.Move(effect.element,
 679       { x: -distance*2, y: 0, duration: split*2,  afterFinishInternal: function(effect) {
 680     new Effect.Move(effect.element,
 681       { x:  distance*2, y: 0, duration: split*2,  afterFinishInternal: function(effect) {
 682     new Effect.Move(effect.element,
 683       { x: -distance, y: 0, duration: split, afterFinishInternal: function(effect) {
 684         effect.element.undoPositioned().setStyle(oldStyle);
 685   }}); }}); }}); }}); }}); }});
 686 };
 687
 688 Effect.SlideDown = function(element) {
 689   element = $(element).cleanWhitespace();
 690   // SlideDown need to have the content of the element wrapped in a container element with fixed height!
 691   var oldInnerBottom = element.down().getStyle('bottom');
 692   var elementDimensions = element.getDimensions();
 693   return new Effect.Scale(element, 100, Object.extend({
 694     scaleContent: false,
 695     scaleX: false,
 696     scaleFrom: window.opera ? 0 : 1,
 697     scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
 698     restoreAfterFinish: true,
 699     afterSetup: function(effect) {
 700       effect.element.makePositioned();
 701       effect.element.down().makePositioned();
 702       if (window.opera) effect.element.setStyle({top: ''});
 703       effect.element.makeClipping().setStyle({height: '0px'}).show();
 704     },
 705     afterUpdateInternal: function(effect) {
 706       effect.element.down().setStyle({bottom:
 707         (effect.dims[0] - effect.element.clientHeight) + 'px' });
 708     },
 709     afterFinishInternal: function(effect) {
 710       effect.element.undoClipping().undoPositioned();
 711       effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom}); }
 712     }, arguments[1] || { })
 713   );
 714 };
 715
 716 Effect.SlideUp = function(element) {
 717   element = $(element).cleanWhitespace();
 718   var oldInnerBottom = element.down().getStyle('bottom');
 719   var elementDimensions = element.getDimensions();
 720   return new Effect.Scale(element, window.opera ? 0 : 1,
 721    Object.extend({ scaleContent: false,
 722     scaleX: false,
 723     scaleMode: 'box',
 724     scaleFrom: 100,
 725     scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
 726     restoreAfterFinish: true,
 727     afterSetup: function(effect) {
 728       effect.element.makePositioned();
 729       effect.element.down().makePositioned();
 730       if (window.opera) effect.element.setStyle({top: ''});
 731       effect.element.makeClipping().show();
 732     },
 733     afterUpdateInternal: function(effect) {
 734       effect.element.down().setStyle({bottom:
 735         (effect.dims[0] - effect.element.clientHeight) + 'px' });
 736     },
 737     afterFinishInternal: function(effect) {
 738       effect.element.hide().undoClipping().undoPositioned();
 739       effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom});
 740     }
 741    }, arguments[1] || { })
 742   );
 743 };
 744
 745 // Bug in opera makes the TD containing this element expand for a instance after finish
 746 Effect.Squish = function(element) {
 747   return new Effect.Scale(element, window.opera ? 1 : 0, {
 748     restoreAfterFinish: true,
 749     beforeSetup: function(effect) {
 750       effect.element.makeClipping();
 751     },
 752     afterFinishInternal: function(effect) {
 753       effect.element.hide().undoClipping();
 754     }
 755   });
 756 };
 757
 758 Effect.Grow = function(element) {
 759   element = $(element);
 760   var options = Object.extend({
 761     direction: 'center',
 762     moveTransition: Effect.Transitions.sinoidal,
 763     scaleTransition: Effect.Transitions.sinoidal,
 764     opacityTransition: Effect.Transitions.full
 765   }, arguments[1] || { });
 766   var oldStyle = {
 767     top: element.style.top,
 768     left: element.style.left,
 769     height: element.style.height,
 770     width: element.style.width,
 771     opacity: element.getInlineOpacity() };
 772
 773   var dims = element.getDimensions();
 774   var initialMoveX, initialMoveY;
 775   var moveX, moveY;
 776
 777   switch (options.direction) {
 778     case 'top-left':
 779       initialMoveX = initialMoveY = moveX = moveY = 0;
 780       break;
 781     case 'top-right':
 782       initialMoveX = dims.width;
 783       initialMoveY = moveY = 0;
 784       moveX = -dims.width;
 785       break;
 786     case 'bottom-left':
 787       initialMoveX = moveX = 0;
 788       initialMoveY = dims.height;
 789       moveY = -dims.height;
 790       break;
 791     case 'bottom-right':
 792       initialMoveX = dims.width;
 793       initialMoveY = dims.height;
 794       moveX = -dims.width;
 795       moveY = -dims.height;
 796       break;
 797     case 'center':
 798       initialMoveX = dims.width / 2;
 799       initialMoveY = dims.height / 2;
 800       moveX = -dims.width / 2;
 801       moveY = -dims.height / 2;
 802       break;
 803   }
 804
 805   return new Effect.Move(element, {
 806     x: initialMoveX,
 807     y: initialMoveY,
 808     duration: 0.01,
 809     beforeSetup: function(effect) {
 810       effect.element.hide().makeClipping().makePositioned();
 811     },
 812     afterFinishInternal: function(effect) {
 813       new Effect.Parallel(
 814         [ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
 815           new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }),
 816           new Effect.Scale(effect.element, 100, {
 817             scaleMode: { originalHeight: dims.height, originalWidth: dims.width },
 818             sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
 819         ], Object.extend({
 820              beforeSetup: function(effect) {
 821                effect.effects[0].element.setStyle({height: '0px'}).show();
 822              },
 823              afterFinishInternal: function(effect) {
 824                effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle);
 825              }
 826            }, options)
 827       );
 828     }
 829   });
 830 };
 831
 832 Effect.Shrink = function(element) {
 833   element = $(element);
 834   var options = Object.extend({
 835     direction: 'center',
 836     moveTransition: Effect.Transitions.sinoidal,
 837     scaleTransition: Effect.Transitions.sinoidal,
 838     opacityTransition: Effect.Transitions.none
 839   }, arguments[1] || { });
 840   var oldStyle = {
 841     top: element.style.top,
 842     left: element.style.left,
 843     height: element.style.height,
 844     width: element.style.width,
 845     opacity: element.getInlineOpacity() };
 846
 847   var dims = element.getDimensions();
 848   var moveX, moveY;
 849
 850   switch (options.direction) {
 851     case 'top-left':
 852       moveX = moveY = 0;
 853       break;
 854     case 'top-right':
 855       moveX = dims.width;
 856       moveY = 0;
 857       break;
 858     case 'bottom-left':
 859       moveX = 0;
 860       moveY = dims.height;
 861       break;
 862     case 'bottom-right':
 863       moveX = dims.width;
 864       moveY = dims.height;
 865       break;
 866     case 'center':
 867       moveX = dims.width / 2;
 868       moveY = dims.height / 2;
 869       break;
 870   }
 871
 872   return new Effect.Parallel(
 873     [ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }),
 874       new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}),
 875       new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition })
 876     ], Object.extend({
 877          beforeStartInternal: function(effect) {
 878            effect.effects[0].element.makePositioned().makeClipping();
 879          },
 880          afterFinishInternal: function(effect) {
 881            effect.effects[0].element.hide().undoClipping().undoPositioned().setStyle(oldStyle); }
 882        }, options)
 883   );
 884 };
 885
 886 Effect.Pulsate = function(element) {
 887   element = $(element);
 888   var options    = arguments[1] || { },
 889     oldOpacity = element.getInlineOpacity(),
 890     transition = options.transition || Effect.Transitions.linear,
 891     reverser   = function(pos){
 892       return 1 - transition((-Math.cos((pos*(options.pulses||5)*2)*Math.PI)/2) + .5);
 893     };
 894
 895   return new Effect.Opacity(element,
 896     Object.extend(Object.extend({  duration: 2.0, from: 0,
 897       afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); }
 898     }, options), {transition: reverser}));
 899 };
 900
 901 Effect.Fold = function(element) {
 902   element = $(element);
 903   var oldStyle = {
 904     top: element.style.top,
 905     left: element.style.left,
 906     width: element.style.width,
 907     height: element.style.height };
 908   element.makeClipping();
 909   return new Effect.Scale(element, 5, Object.extend({
 910     scaleContent: false,
 911     scaleX: false,
 912     afterFinishInternal: function(effect) {
 913     new Effect.Scale(element, 1, {
 914       scaleContent: false,
 915       scaleY: false,
 916       afterFinishInternal: function(effect) {
 917         effect.element.hide().undoClipping().setStyle(oldStyle);
 918       } });
 919   }}, arguments[1] || { }));
 920 };
 921
 922 Effect.Morph = Class.create(Effect.Base, {
 923   initialize: function(element) {
 924     this.element = $(element);
 925     if (!this.element) throw(Effect._elementDoesNotExistError);
 926     var options = Object.extend({
 927       style: { }
 928     }, arguments[1] || { });
 929
 930     if (!Object.isString(options.style)) this.style = $H(options.style);
 931     else {
 932       if (options.style.include(':'))
 933         this.style = options.style.parseStyle();
 934       else {
 935         this.element.addClassName(options.style);
 936         this.style = $H(this.element.getStyles());
 937         this.element.removeClassName(options.style);
 938         var css = this.element.getStyles();
 939         this.style = this.style.reject(function(style) {
 940           return style.value == css[style.key];
 941         });
 942         options.afterFinishInternal = function(effect) {
 943           effect.element.addClassName(effect.options.style);
 944           effect.transforms.each(function(transform) {
 945             effect.element.style[transform.style] = '';
 946           });
 947         };
 948       }
 949     }
 950     this.start(options);
 951   },
 952
 953   setup: function(){
 954     function parseColor(color){
 955       if (!color || ['rgba(0, 0, 0, 0)','transparent'].include(color)) color = '#ffffff';
 956       color = color.parseColor();
 957       return $R(0,2).map(function(i){
 958         return parseInt( color.slice(i*2+1,i*2+3), 16 );
 959       });
 960     }
 961     this.transforms = this.style.map(function(pair){
 962       var property = pair[0], value = pair[1], unit = null;
 963
 964       if (value.parseColor('#zzzzzz') != '#zzzzzz') {
 965         value = value.parseColor();
 966         unit  = 'color';
 967       } else if (property == 'opacity') {
 968         value = parseFloat(value);
 969         if (Prototype.Browser.IE && (!this.element.currentStyle.hasLayout))
 970           this.element.setStyle({zoom: 1});
 971       } else if (Element.CSS_LENGTH.test(value)) {
 972           var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/);
 973           value = parseFloat(components[1]);
 974           unit = (components.length == 3) ? components[2] : null;
 975       }
 976
 977       var originalValue = this.element.getStyle(property);
 978       return {
 979         style: property.camelize(),
 980         originalValue: unit=='color' ? parseColor(originalValue) : parseFloat(originalValue || 0),
 981         targetValue: unit=='color' ? parseColor(value) : value,
 982         unit: unit
 983       };
 984     }.bind(this)).reject(function(transform){
 985       return (
 986         (transform.originalValue == transform.targetValue) ||
 987         (
 988           transform.unit != 'color' &&
 989           (isNaN(transform.originalValue) || isNaN(transform.targetValue))
 990         )
 991       );
 992     });
 993   },
 994   update: function(position) {
 995     var style = { }, transform, i = this.transforms.length;
 996     while(i--)
 997       style[(transform = this.transforms[i]).style] =
 998         transform.unit=='color' ? '#'+
 999           (Math.round(transform.originalValue[0]+
1000             (transform.targetValue[0]-transform.originalValue[0])*position)).toColorPart() +
1001           (Math.round(transform.originalValue[1]+
1002             (transform.targetValue[1]-transform.originalValue[1])*position)).toColorPart() +
1003           (Math.round(transform.originalValue[2]+
1004             (transform.targetValue[2]-transform.originalValue[2])*position)).toColorPart() :
1005         (transform.originalValue +
1006           (transform.targetValue - transform.originalValue) * position).toFixed(3) +
1007             (transform.unit === null ? '' : transform.unit);
1008     this.element.setStyle(style, true);
1009   }
1010 });
1011
1012 Effect.Transform = Class.create({
1013   initialize: function(tracks){
1014     this.tracks  = [];
1015     this.options = arguments[1] || { };
1016     this.addTracks(tracks);
1017   },
1018   addTracks: function(tracks){
1019     tracks.each(function(track){
1020       track = $H(track);
1021       var data = track.values().first();
1022       this.tracks.push($H({
1023         ids:     track.keys().first(),
1024         effect:  Effect.Morph,
1025         options: { style: data }
1026       }));
1027     }.bind(this));
1028     return this;
1029   },
1030   play: function(){
1031     return new Effect.Parallel(
1032       this.tracks.map(function(track){
1033         var ids = track.get('ids'), effect = track.get('effect'), options = track.get('options');
1034         var elements = [$(ids) || $$(ids)].flatten();
1035         return elements.map(function(e){ return new effect(e, Object.extend({ sync:true }, options)) });
1036       }).flatten(),
1037       this.options
1038     );
1039   }
1040 });
1041
1042 Element.CSS_PROPERTIES = $w(
1043   'backgroundColor backgroundPosition borderBottomColor borderBottomStyle ' +
1044   'borderBottomWidth borderLeftColor borderLeftStyle borderLeftWidth ' +
1045   'borderRightColor borderRightStyle borderRightWidth borderSpacing ' +
1046   'borderTopColor borderTopStyle borderTopWidth bottom clip color ' +
1047   'fontSize fontWeight height left letterSpacing lineHeight ' +
1048   'marginBottom marginLeft marginRight marginTop markerOffset maxHeight '+
1049   'maxWidth minHeight minWidth opacity outlineColor outlineOffset ' +
1050   'outlineWidth paddingBottom paddingLeft paddingRight paddingTop ' +
1051   'right textIndent top width wordSpacing zIndex');
1052
1053 Element.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/;
1054
1055 String.__parseStyleElement = document.createElement('div');
1056 String.prototype.parseStyle = function(){
1057   var style, styleRules = $H();
1058   if (Prototype.Browser.WebKit)
1059     style = new Element('div',{style:this}).style;
1060   else {
1061     String.__parseStyleElement.innerHTML = '<div style="' + this + '"></div>';
1062     style = String.__parseStyleElement.childNodes[0].style;
1063   }
1064
1065   Element.CSS_PROPERTIES.each(function(property){
1066     if (style[property]) styleRules.set(property, style[property]);
1067   });
1068
1069   if (Prototype.Browser.IE && this.include('opacity'))
1070     styleRules.set('opacity', this.match(/opacity:\s*((?:0|1)?(?:\.\d*)?)/)[1]);
1071
1072   return styleRules;
1073 };
1074
1075 if (document.defaultView && document.defaultView.getComputedStyle) {
1076   Element.getStyles = function(element) {
1077     var css = document.defaultView.getComputedStyle($(element), null);
1078     return Element.CSS_PROPERTIES.inject({ }, function(styles, property) {
1079       styles[property] = css[property];
1080       return styles;
1081     });
1082   };
1083 } else {
1084   Element.getStyles = function(element) {
1085     element = $(element);
1086     var css = element.currentStyle, styles;
1087     styles = Element.CSS_PROPERTIES.inject({ }, function(results, property) {
1088       results[property] = css[property];
1089       return results;
1090     });
1091     if (!styles.opacity) styles.opacity = element.getOpacity();
1092     return styles;
1093   };
1094 }
1095
1096 Effect.Methods = {
1097   morph: function(element, style) {
1098     element = $(element);
1099     new Effect.Morph(element, Object.extend({ style: style }, arguments[2] || { }));
1100     return element;
1101   },
1102   visualEffect: function(element, effect, options) {
1103     element = $(element);
1104     var s = effect.dasherize().camelize(), klass = s.charAt(0).toUpperCase() + s.substring(1);
1105     new Effect[klass](element, options);
1106     return element;
1107   },
1108   highlight: function(element, options) {
1109     element = $(element);
1110     new Effect.Highlight(element, options);
1111     return element;
1112   }
1113 };
1114
1115 $w('fade appear grow shrink fold blindUp blindDown slideUp slideDown '+
1116   'pulsate shake puff squish switchOff dropOut').each(
1117   function(effect) {
1118     Effect.Methods[effect] = function(element, options){
1119       element = $(element);
1120       Effect[effect.charAt(0).toUpperCase() + effect.substring(1)](element, options);
1121       return element;
1122     };
1123   }
1124 );
1125
1126 $w('getInlineOpacity forceRerendering setContentZoom collectTextNodes collectTextNodesIgnoreClass getStyles').each(
1127   function(f) { Effect.Methods[f] = Element[f]; }
1128 );
1129
1130 Element.addMethods(Effect.Methods);