[Summary view] [Print] [Text view]

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