[Sommaire] [Imprimer]

   1  // script.aculo.us effects.js v1.7.0, Fri Jan 19 19:16:36 CET 2007
   2  
   3  // Copyright (c) 2005, 2006 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(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);
  49    return element;
  50  }
  51  
  52  Element.getOpacity = function(element){
  53    return $(element).getStyle('opacity');
  54  }
  55  
  56  Element.setOpacity = function(element, value){
  57    return $(element).setStyle({opacity:value});
  58  }
  59  
  60  Element.getInlineOpacity = function(element){
  61    return $(element).style.opacity || '';
  62  }
  63  
  64  Element.forceRerendering = function(element) {
  65    try {
  66      element = $(element);
  67      var n = document.createTextNode(' ');
  68      element.appendChild(n);
  69      element.removeChild(n);
  70    } catch(e) { }
  71  };
  72  
  73  /*--------------------------------------------------------------------------*/
  74  
  75  Array.prototype.call = function() {
  76    var args = arguments;
  77    this.each(function(f){ f.apply(this, args) });
  78  }
  79  
  80  /*--------------------------------------------------------------------------*/
  81  
  82  var Effect = {
  83    _elementDoesNotExistError: {
  84      name: 'ElementDoesNotExistError',
  85      message: 'The specified DOM element does not exist, but is required for this effect to operate'
  86    },
  87    tagifyText: function(element) {
  88      if(typeof Builder == 'undefined')
  89        throw("Effect.tagifyText requires including script.aculo.us' builder.js library");
  90        
  91      var tagifyStyle = 'position:relative';
  92      if(/MSIE/.test(navigator.userAgent) && !window.opera) tagifyStyle += ';zoom:1';
  93      
  94      element = $(element);
  95      $A(element.childNodes).each( function(child) {
  96        if(child.nodeType==3) {
  97          child.nodeValue.toArray().each( function(character) {
  98            element.insertBefore(
  99              Builder.node('span',{style: tagifyStyle},
 100                character == ' ' ? String.fromCharCode(160) : character), 
 101                child);
 102          });
 103          Element.remove(child);
 104        }
 105      });
 106    },
 107    multiple: function(element, effect) {
 108      var elements;
 109      if(((typeof element == 'object') || 
 110          (typeof element == 'function')) && 
 111         (element.length))
 112        elements = element;
 113      else
 114        elements = $(element).childNodes;
 115        
 116      var options = Object.extend({
 117        speed: 0.1,
 118        delay: 0.0
 119      }, arguments[2] || {});
 120      var masterDelay = options.delay;
 121  
 122      $A(elements).each( function(element, index) {
 123        new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay }));
 124      });
 125    },
 126    PAIRS: {
 127      'slide':  ['SlideDown','SlideUp'],
 128      'blind':  ['BlindDown','BlindUp'],
 129      'appear': ['Appear','Fade']
 130    },
 131    toggle: function(element, effect) {
 132      element = $(element);
 133      effect = (effect || 'appear').toLowerCase();
 134      var options = Object.extend({
 135        queue: { position:'end', scope:(element.id || 'global'), limit: 1 }
 136      }, arguments[2] || {});
 137      Effect[element.visible() ? 
 138        Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options);
 139    }
 140  };
 141  
 142  var Effect2 = Effect; // deprecated
 143  
 144  /* ------------- transitions ------------- */
 145  
 146  Effect.Transitions = {
 147    linear: Prototype.K,
 148    sinoidal: function(pos) {
 149      return (-Math.cos(pos*Math.PI)/2) + 0.5;
 150    },
 151    reverse: function(pos) {
 152      return 1-pos;
 153    },
 154    flicker: function(pos) {
 155      return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4;
 156    },
 157    wobble: function(pos) {
 158      return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
 159    },
 160    pulse: function(pos, pulses) { 
 161      pulses = pulses || 5; 
 162      return (
 163        Math.round((pos % (1/pulses)) * pulses) == 0 ? 
 164              ((pos * pulses * 2) - Math.floor(pos * pulses * 2)) : 
 165          1 - ((pos * pulses * 2) - Math.floor(pos * pulses * 2))
 166        );
 167    },
 168    none: function(pos) {
 169      return 0;
 170    },
 171    full: function(pos) {
 172      return 1;
 173    }
 174  };
 175  
 176  /* ------------- core effects ------------- */
 177  
 178  Effect.ScopedQueue = Class.create();
 179  Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
 180    initialize: function() {
 181      this.effects  = [];
 182      this.interval = null;
 183    },
 184    _each: function(iterator) {
 185      this.effects._each(iterator);
 186    },
 187    add: function(effect) {
 188      var timestamp = new Date().getTime();
 189      
 190      var position = (typeof effect.options.queue == 'string') ? 
 191        effect.options.queue : effect.options.queue.position;
 192      
 193      switch(position) {
 194        case 'front':
 195          // move unstarted effects after this effect  
 196          this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) {
 197              e.startOn  += effect.finishOn;
 198              e.finishOn += effect.finishOn;
 199            });
 200          break;
 201        case 'with-last':
 202          timestamp = this.effects.pluck('startOn').max() || timestamp;
 203          break;
 204        case 'end':
 205          // start effect after last queued effect has finished
 206          timestamp = this.effects.pluck('finishOn').max() || timestamp;
 207          break;
 208      }
 209      
 210      effect.startOn  += timestamp;
 211      effect.finishOn += timestamp;
 212  
 213      if(!effect.options.queue.limit || (this.effects.length < effect.options.queue.limit))
 214        this.effects.push(effect);
 215      
 216      if(!this.interval) 
 217        this.interval = setInterval(this.loop.bind(this), 15);
 218    },
 219    remove: function(effect) {
 220      this.effects = this.effects.reject(function(e) { return e==effect });
 221      if(this.effects.length == 0) {
 222        clearInterval(this.interval);
 223        this.interval = null;
 224      }
 225    },
 226    loop: function() {
 227      var timePos = new Date().getTime();
 228      for(var i=0, len=this.effects.length;i<len;i++) 
 229        if(this.effects[i]) this.effects[i].loop(timePos);
 230    }
 231  });
 232  
 233  Effect.Queues = {
 234    instances: $H(),
 235    get: function(queueName) {
 236      if(typeof queueName != 'string') return queueName;
 237      
 238      if(!this.instances[queueName])
 239        this.instances[queueName] = new Effect.ScopedQueue();
 240        
 241      return this.instances[queueName];
 242    }
 243  }
 244  Effect.Queue = Effect.Queues.get('global');
 245  
 246  Effect.DefaultOptions = {
 247    transition: Effect.Transitions.sinoidal,
 248    duration:   1.0,   // seconds
 249    fps:        60.0,  // max. 60fps due to Effect.Queue implementation
 250    sync:       false, // true for combining
 251    from:       0.0,
 252    to:         1.0,
 253    delay:      0.0,
 254    queue:      'parallel'
 255  }
 256  
 257  Effect.Base = function() {};
 258  Effect.Base.prototype = {
 259    position: null,
 260    start: function(options) {
 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.event('beforeStart');
 267      if(!this.options.sync)
 268        Effect.Queues.get(typeof this.options.queue == 'string' ? 
 269          'global' : this.options.queue.scope).add(this);
 270    },
 271    loop: function(timePos) {
 272      if(timePos >= this.startOn) {
 273        if(timePos >= this.finishOn) {
 274          this.render(1.0);
 275          this.cancel();
 276          this.event('beforeFinish');
 277          if(this.finish) this.finish(); 
 278          this.event('afterFinish');
 279          return;  
 280        }
 281        var pos   = (timePos - this.startOn) / (this.finishOn - this.startOn);
 282        var frame = Math.round(pos * this.options.fps * this.options.duration);
 283        if(frame > this.currentFrame) {
 284          this.render(pos);
 285          this.currentFrame = frame;
 286        }
 287      }
 288    },
 289    render: function(pos) {
 290      if(this.state == 'idle') {
 291        this.state = 'running';
 292        this.event('beforeSetup');
 293        if(this.setup) this.setup();
 294        this.event('afterSetup');
 295      }
 296      if(this.state == 'running') {
 297        if(this.options.transition) pos = this.options.transition(pos);
 298        pos *= (this.options.to-this.options.from);
 299        pos += this.options.from;
 300        this.position = pos;
 301        this.event('beforeUpdate');
 302        if(this.update) this.update(pos);
 303        this.event('afterUpdate');
 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(/MSIE/.test(navigator.userAgent) && !window.opera && (!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.camelize()] = '';
 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].underscore().dasherize(), 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(/MSIE/.test(navigator.userAgent) && !window.opera && (!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]), unit = (components.length == 3) ? components[2] : null;
 984  
 985        var originalValue = this.element.getStyle(property);
 986        return $H({ 
 987          style: property, 
 988          originalValue: unit=='color' ? parseColor(originalValue) : parseFloat(originalValue || 0), 
 989          targetValue: unit=='color' ? parseColor(value) : value,
 990          unit: unit
 991        });
 992      }.bind(this)).reject(function(transform){
 993        return (
 994          (transform.originalValue == transform.targetValue) ||
 995          (
 996            transform.unit != 'color' &&
 997            (isNaN(transform.originalValue) || isNaN(transform.targetValue))
 998          )
 999        )
1000      });
1001    },
1002    update: function(position) {
1003      var style = $H(), value = null;
1004      this.transforms.each(function(transform){
1005        value = transform.unit=='color' ?
1006          $R(0,2).inject('#',function(m,v,i){
1007            return m+(Math.round(transform.originalValue[i]+
1008              (transform.targetValue[i] - transform.originalValue[i])*position)).toColorPart() }) : 
1009          transform.originalValue + Math.round(
1010            ((transform.targetValue - transform.originalValue) * position) * 1000)/1000 + transform.unit;
1011        style[transform.style] = value;
1012      });
1013      this.element.setStyle(style);
1014    }
1015  });
1016  
1017  Effect.Transform = Class.create();
1018  Object.extend(Effect.Transform.prototype, {
1019    initialize: function(tracks){
1020      this.tracks  = [];
1021      this.options = arguments[1] || {};
1022      this.addTracks(tracks);
1023    },
1024    addTracks: function(tracks){
1025      tracks.each(function(track){
1026        var data = $H(track).values().first();
1027        this.tracks.push($H({
1028          ids:     $H(track).keys().first(),
1029          effect:  Effect.Morph,
1030          options: { style: data }
1031        }));
1032      }.bind(this));
1033      return this;
1034    },
1035    play: function(){
1036      return new Effect.Parallel(
1037        this.tracks.map(function(track){
1038          var elements = [$(track.ids) || $$(track.ids)].flatten();
1039          return elements.map(function(e){ return new track.effect(e, Object.extend({ sync:true }, track.options)) });
1040        }).flatten(),
1041        this.options
1042      );
1043    }
1044  });
1045  
1046  Element.CSS_PROPERTIES = $w(
1047    'backgroundColor backgroundPosition borderBottomColor borderBottomStyle ' + 
1048    'borderBottomWidth borderLeftColor borderLeftStyle borderLeftWidth ' +
1049    'borderRightColor borderRightStyle borderRightWidth borderSpacing ' +
1050    'borderTopColor borderTopStyle borderTopWidth bottom clip color ' +
1051    'fontSize fontWeight height left letterSpacing lineHeight ' +
1052    'marginBottom marginLeft marginRight marginTop markerOffset maxHeight '+
1053    'maxWidth minHeight minWidth opacity outlineColor outlineOffset ' +
1054    'outlineWidth paddingBottom paddingLeft paddingRight paddingTop ' +
1055    'right textIndent top width wordSpacing zIndex');
1056    
1057  Element.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/;
1058  
1059  String.prototype.parseStyle = function(){
1060    var element = Element.extend(document.createElement('div'));
1061    element.innerHTML = '<div style="' + this + '"></div>';
1062    var style = element.down().style, styleRules = $H();
1063    
1064    Element.CSS_PROPERTIES.each(function(property){
1065      if(style[property]) styleRules[property] = style[property]; 
1066    });
1067    if(/MSIE/.test(navigator.userAgent) && !window.opera && this.indexOf('opacity') > -1) {
1068      styleRules.opacity = this.match(/opacity:\s*((?:0|1)?(?:\.\d*)?)/)[1];
1069    }
1070    return styleRules;
1071  };
1072  
1073  Element.morph = function(element, style) {
1074    new Effect.Morph(element, Object.extend({ style: style }, arguments[2] || {}));
1075    return element;
1076  };
1077  
1078  ['setOpacity','getOpacity','getInlineOpacity','forceRerendering','setContentZoom',
1079   'collectTextNodes','collectTextNodesIgnoreClass','morph'].each( 
1080    function(f) { Element.Methods[f] = Element[f]; }
1081  );
1082  
1083  Element.Methods.visualEffect = function(element, effect, options) {
1084    s = effect.gsub(/_/, '-').camelize();
1085    effect_class = s.charAt(0).toUpperCase() + s.substring(1);
1086    new Effect[effect_class](element, options);
1087    return $(element);
1088  };
1089  
1090  Element.addMethods();