[Summary view] [Print] [Text view]

   1  YUI.add('yui2-animation', function(Y) {
   2      var YAHOO    = Y.YUI2;
   3      /*
   4  Copyright (c) 2011, Yahoo! Inc. All rights reserved.
   5  Code licensed under the BSD License:
   6  http://developer.yahoo.com/yui/license.html
   7  version: 2.9.0
   8  */
   9  (function() {
  10  
  11  var Y = YAHOO.util;
  12  
  13  /*
  14  Copyright (c) 2006, Yahoo! Inc. All rights reserved.
  15  Code licensed under the BSD License:
  16  http://developer.yahoo.net/yui/license.txt
  17  */
  18  
  19  /**
  20   * The animation module provides allows effects to be added to HTMLElements.
  21   * @module animation
  22   * @requires yahoo, event, dom
  23   */
  24  
  25  /**
  26   *
  27   * Base animation class that provides the interface for building animated effects.
  28   * <p>Usage: var myAnim = new YAHOO.util.Anim(el, { width: { from: 10, to: 100 } }, 1, YAHOO.util.Easing.easeOut);</p>
  29   * @class Anim
  30   * @namespace YAHOO.util
  31   * @requires YAHOO.util.AnimMgr
  32   * @requires YAHOO.util.Easing
  33   * @requires YAHOO.util.Dom
  34   * @requires YAHOO.util.Event
  35   * @requires YAHOO.util.CustomEvent
  36   * @constructor
  37   * @param {String | HTMLElement} el Reference to the element that will be animated
  38   * @param {Object} attributes The attribute(s) to be animated.  
  39   * Each attribute is an object with at minimum a "to" or "by" member defined.  
  40   * Additional optional members are "from" (defaults to current value), "units" (defaults to "px").  
  41   * All attribute names use camelCase.
  42   * @param {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
  43   * @param {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
  44   */
  45  
  46  var Anim = function(el, attributes, duration, method) {
  47      if (!el) {
  48      }
  49      this.init(el, attributes, duration, method); 
  50  };
  51  
  52  Anim.NAME = 'Anim';
  53  
  54  Anim.prototype = {
  55      /**
  56       * Provides a readable name for the Anim instance.
  57       * @method toString
  58       * @return {String}
  59       */
  60      toString: function() {
  61          var el = this.getEl() || {};
  62          var id = el.id || el.tagName;
  63          return (this.constructor.NAME + ': ' + id);
  64      },
  65      
  66      patterns: { // cached for performance
  67          noNegatives:        /width|height|opacity|padding/i, // keep at zero or above
  68          offsetAttribute:  /^((width|height)|(top|left))$/, // use offsetValue as default
  69          defaultUnit:        /width|height|top$|bottom$|left$|right$/i, // use 'px' by default
  70          offsetUnit:         /\d+(em|%|en|ex|pt|in|cm|mm|pc)$/i // IE may return these, so convert these to offset
  71      },
  72      
  73      /**
  74       * Returns the value computed by the animation's "method".
  75       * @method doMethod
  76       * @param {String} attr The name of the attribute.
  77       * @param {Number} start The value this attribute should start from for this animation.
  78       * @param {Number} end  The value this attribute should end at for this animation.
  79       * @return {Number} The Value to be applied to the attribute.
  80       */
  81      doMethod: function(attr, start, end) {
  82          return this.method(this.currentFrame, start, end - start, this.totalFrames);
  83      },
  84      
  85      /**
  86       * Applies a value to an attribute.
  87       * @method setAttribute
  88       * @param {String} attr The name of the attribute.
  89       * @param {Number} val The value to be applied to the attribute.
  90       * @param {String} unit The unit ('px', '%', etc.) of the value.
  91       */
  92      setAttribute: function(attr, val, unit) {
  93          var el = this.getEl();
  94          if ( this.patterns.noNegatives.test(attr) ) {
  95              val = (val > 0) ? val : 0;
  96          }
  97  
  98          if (attr in el && !('style' in el && attr in el.style)) {
  99              el[attr] = val;
 100          } else {
 101              Y.Dom.setStyle(el, attr, val + unit);
 102          }
 103      },                        
 104      
 105      /**
 106       * Returns current value of the attribute.
 107       * @method getAttribute
 108       * @param {String} attr The name of the attribute.
 109       * @return {Number} val The current value of the attribute.
 110       */
 111      getAttribute: function(attr) {
 112          var el = this.getEl();
 113          var val = Y.Dom.getStyle(el, attr);
 114  
 115          if (val !== 'auto' && !this.patterns.offsetUnit.test(val)) {
 116              return parseFloat(val);
 117          }
 118          
 119          var a = this.patterns.offsetAttribute.exec(attr) || [];
 120          var pos = !!( a[3] ); // top or left
 121          var box = !!( a[2] ); // width or height
 122          
 123          if ('style' in el) {
 124              // use offsets for width/height and abs pos top/left
 125              if ( box || (Y.Dom.getStyle(el, 'position') == 'absolute' && pos) ) {
 126                  val = el['offset' + a[0].charAt(0).toUpperCase() + a[0].substr(1)];
 127              } else { // default to zero for other 'auto'
 128                  val = 0;
 129              }
 130          } else if (attr in el) {
 131              val = el[attr];
 132          }
 133  
 134          return val;
 135      },
 136      
 137      /**
 138       * Returns the unit to use when none is supplied.
 139       * @method getDefaultUnit
 140       * @param {attr} attr The name of the attribute.
 141       * @return {String} The default unit to be used.
 142       */
 143      getDefaultUnit: function(attr) {
 144           if ( this.patterns.defaultUnit.test(attr) ) {
 145              return 'px';
 146           }
 147           
 148           return '';
 149      },
 150          
 151      /**
 152       * Sets the actual values to be used during the animation.  Should only be needed for subclass use.
 153       * @method setRuntimeAttribute
 154       * @param {Object} attr The attribute object
 155       * @private 
 156       */
 157      setRuntimeAttribute: function(attr) {
 158          var start;
 159          var end;
 160          var attributes = this.attributes;
 161  
 162          this.runtimeAttributes[attr] = {};
 163          
 164          var isset = function(prop) {
 165              return (typeof prop !== 'undefined');
 166          };
 167          
 168          if ( !isset(attributes[attr]['to']) && !isset(attributes[attr]['by']) ) {
 169              return false; // note return; nothing to animate to
 170          }
 171          
 172          start = ( isset(attributes[attr]['from']) ) ? attributes[attr]['from'] : this.getAttribute(attr);
 173  
 174          // To beats by, per SMIL 2.1 spec
 175          if ( isset(attributes[attr]['to']) ) {
 176              end = attributes[attr]['to'];
 177          } else if ( isset(attributes[attr]['by']) ) {
 178              if (start.constructor == Array) {
 179                  end = [];
 180                  for (var i = 0, len = start.length; i < len; ++i) {
 181                      end[i] = start[i] + attributes[attr]['by'][i] * 1; // times 1 to cast "by" 
 182                  }
 183              } else {
 184                  end = start + attributes[attr]['by'] * 1;
 185              }
 186          }
 187          
 188          this.runtimeAttributes[attr].start = start;
 189          this.runtimeAttributes[attr].end = end;
 190  
 191          // set units if needed
 192          this.runtimeAttributes[attr].unit = ( isset(attributes[attr].unit) ) ?
 193                  attributes[attr]['unit'] : this.getDefaultUnit(attr);
 194          return true;
 195      },
 196  
 197      /**
 198       * Constructor for Anim instance.
 199       * @method init
 200       * @param {String | HTMLElement} el Reference to the element that will be animated
 201       * @param {Object} attributes The attribute(s) to be animated.  
 202       * Each attribute is an object with at minimum a "to" or "by" member defined.  
 203       * Additional optional members are "from" (defaults to current value), "units" (defaults to "px").  
 204       * All attribute names use camelCase.
 205       * @param {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
 206       * @param {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
 207       */ 
 208      init: function(el, attributes, duration, method) {
 209          /**
 210           * Whether or not the animation is running.
 211           * @property isAnimated
 212           * @private
 213           * @type Boolean
 214           */
 215          var isAnimated = false;
 216          
 217          /**
 218           * A Date object that is created when the animation begins.
 219           * @property startTime
 220           * @private
 221           * @type Date
 222           */
 223          var startTime = null;
 224          
 225          /**
 226           * The number of frames this animation was able to execute.
 227           * @property actualFrames
 228           * @private
 229           * @type Int
 230           */
 231          var actualFrames = 0; 
 232  
 233          /**
 234           * The element to be animated.
 235           * @property el
 236           * @private
 237           * @type HTMLElement
 238           */
 239          el = Y.Dom.get(el);
 240          
 241          /**
 242           * The collection of attributes to be animated.  
 243           * Each attribute must have at least a "to" or "by" defined in order to animate.  
 244           * If "to" is supplied, the animation will end with the attribute at that value.  
 245           * If "by" is supplied, the animation will end at that value plus its starting value. 
 246           * If both are supplied, "to" is used, and "by" is ignored. 
 247           * Optional additional member include "from" (the value the attribute should start animating from, defaults to current value), and "unit" (the units to apply to the values).
 248           * @property attributes
 249           * @type Object
 250           */
 251          this.attributes = attributes || {};
 252          
 253          /**
 254           * The length of the animation.  Defaults to "1" (second).
 255           * @property duration
 256           * @type Number
 257           */
 258          this.duration = !YAHOO.lang.isUndefined(duration) ? duration : 1;
 259          
 260          /**
 261           * The method that will provide values to the attribute(s) during the animation. 
 262           * Defaults to "YAHOO.util.Easing.easeNone".
 263           * @property method
 264           * @type Function
 265           */
 266          this.method = method || Y.Easing.easeNone;
 267  
 268          /**
 269           * Whether or not the duration should be treated as seconds.
 270           * Defaults to true.
 271           * @property useSeconds
 272           * @type Boolean
 273           */
 274          this.useSeconds = true; // default to seconds
 275          
 276          /**
 277           * The location of the current animation on the timeline.
 278           * In time-based animations, this is used by AnimMgr to ensure the animation finishes on time.
 279           * @property currentFrame
 280           * @type Int
 281           */
 282          this.currentFrame = 0;
 283          
 284          /**
 285           * The total number of frames to be executed.
 286           * In time-based animations, this is used by AnimMgr to ensure the animation finishes on time.
 287           * @property totalFrames
 288           * @type Int
 289           */
 290          this.totalFrames = Y.AnimMgr.fps;
 291          
 292          /**
 293           * Changes the animated element
 294           * @method setEl
 295           */
 296          this.setEl = function(element) {
 297              el = Y.Dom.get(element);
 298          };
 299          
 300          /**
 301           * Returns a reference to the animated element.
 302           * @method getEl
 303           * @return {HTMLElement}
 304           */
 305          this.getEl = function() { return el; };
 306          
 307          /**
 308           * Checks whether the element is currently animated.
 309           * @method isAnimated
 310           * @return {Boolean} current value of isAnimated.     
 311           */
 312          this.isAnimated = function() {
 313              return isAnimated;
 314          };
 315          
 316          /**
 317           * Returns the animation start time.
 318           * @method getStartTime
 319           * @return {Date} current value of startTime.      
 320           */
 321          this.getStartTime = function() {
 322              return startTime;
 323          };        
 324          
 325          this.runtimeAttributes = {};
 326          
 327          
 328          
 329          /**
 330           * Starts the animation by registering it with the animation manager. 
 331           * @method animate  
 332           */
 333          this.animate = function() {
 334              if ( this.isAnimated() ) {
 335                  return false;
 336              }
 337              
 338              this.currentFrame = 0;
 339              
 340              this.totalFrames = ( this.useSeconds ) ? Math.ceil(Y.AnimMgr.fps * this.duration) : this.duration;
 341      
 342              if (this.duration === 0 && this.useSeconds) { // jump to last frame if zero second duration 
 343                  this.totalFrames = 1; 
 344              }
 345              Y.AnimMgr.registerElement(this);
 346              return true;
 347          };
 348            
 349          /**
 350           * Stops the animation.  Normally called by AnimMgr when animation completes.
 351           * @method stop
 352           * @param {Boolean} finish (optional) If true, animation will jump to final frame.
 353           */ 
 354          this.stop = function(finish) {
 355              if (!this.isAnimated()) { // nothing to stop
 356                  return false;
 357              }
 358  
 359              if (finish) {
 360                   this.currentFrame = this.totalFrames;
 361                   this._onTween.fire();
 362              }
 363              Y.AnimMgr.stop(this);
 364          };
 365          
 366          this._handleStart = function() {            
 367              this.onStart.fire();
 368              
 369              this.runtimeAttributes = {};
 370              for (var attr in this.attributes) {
 371                  if (this.attributes.hasOwnProperty(attr)) {
 372                      this.setRuntimeAttribute(attr);
 373                  }
 374              }
 375              
 376              isAnimated = true;
 377              actualFrames = 0;
 378              startTime = new Date(); 
 379          };
 380          
 381          /**
 382           * Feeds the starting and ending values for each animated attribute to doMethod once per frame, then applies the resulting value to the attribute(s).
 383           * @private
 384           */
 385           
 386          this._handleTween = function() {
 387              var data = {
 388                  duration: new Date() - this.getStartTime(),
 389                  currentFrame: this.currentFrame
 390              };
 391              
 392              data.toString = function() {
 393                  return (
 394                      'duration: ' + data.duration +
 395                      ', currentFrame: ' + data.currentFrame
 396                  );
 397              };
 398              
 399              this.onTween.fire(data);
 400              
 401              var runtimeAttributes = this.runtimeAttributes;
 402              
 403              for (var attr in runtimeAttributes) {
 404                  if (runtimeAttributes.hasOwnProperty(attr)) {
 405                      this.setAttribute(attr, this.doMethod(attr, runtimeAttributes[attr].start, runtimeAttributes[attr].end), runtimeAttributes[attr].unit); 
 406                  }
 407              }
 408              
 409              this.afterTween.fire(data);
 410              
 411              actualFrames += 1;
 412          };
 413          
 414          this._handleComplete = function() {
 415              var actual_duration = (new Date() - startTime) / 1000 ;
 416              
 417              var data = {
 418                  duration: actual_duration,
 419                  frames: actualFrames,
 420                  fps: actualFrames / actual_duration
 421              };
 422              
 423              data.toString = function() {
 424                  return (
 425                      'duration: ' + data.duration +
 426                      ', frames: ' + data.frames +
 427                      ', fps: ' + data.fps
 428                  );
 429              };
 430              
 431              isAnimated = false;
 432              actualFrames = 0;
 433              this.onComplete.fire(data);
 434          };
 435          
 436          /**
 437           * Custom event that fires after onStart, useful in subclassing
 438           * @private
 439           */    
 440          this._onStart = new Y.CustomEvent('_start', this, true);
 441  
 442          /**
 443           * Custom event that fires when animation begins
 444           * Listen via subscribe method (e.g. myAnim.onStart.subscribe(someFunction)
 445           * @event onStart
 446           */    
 447          this.onStart = new Y.CustomEvent('start', this);
 448          
 449          /**
 450           * Custom event that fires between each frame
 451           * Listen via subscribe method (e.g. myAnim.onTween.subscribe(someFunction)
 452           * @event onTween
 453           */
 454          this.onTween = new Y.CustomEvent('tween', this);
 455          
 456          /**
 457           * Custom event that fires between each frame
 458           * Listen via subscribe method (e.g. myAnim.afterTween.subscribe(someFunction)
 459           * @event afterTween
 460           */
 461          this.afterTween = new Y.CustomEvent('afterTween', this);
 462          
 463          /**
 464           * Custom event that fires after onTween
 465           * @private
 466           */
 467          this._onTween = new Y.CustomEvent('_tween', this, true);
 468          
 469          /**
 470           * Custom event that fires when animation ends
 471           * Listen via subscribe method (e.g. myAnim.onComplete.subscribe(someFunction)
 472           * @event onComplete
 473           */
 474          this.onComplete = new Y.CustomEvent('complete', this);
 475          /**
 476           * Custom event that fires after onComplete
 477           * @private
 478           */
 479          this._onComplete = new Y.CustomEvent('_complete', this, true);
 480  
 481          this._onStart.subscribe(this._handleStart);
 482          this._onTween.subscribe(this._handleTween);
 483          this._onComplete.subscribe(this._handleComplete);
 484      }
 485  };
 486  
 487      Y.Anim = Anim;
 488  })();
 489  /**
 490   * Handles animation queueing and threading.
 491   * Used by Anim and subclasses.
 492   * @class AnimMgr
 493   * @namespace YAHOO.util
 494   */
 495  YAHOO.util.AnimMgr = new function() {
 496      /** 
 497       * Reference to the animation Interval.
 498       * @property thread
 499       * @private
 500       * @type Int
 501       */
 502      var thread = null;
 503      
 504      /** 
 505       * The current queue of registered animation objects.
 506       * @property queue
 507       * @private
 508       * @type Array
 509       */    
 510      var queue = [];
 511  
 512      /** 
 513       * The number of active animations.
 514       * @property tweenCount
 515       * @private
 516       * @type Int
 517       */        
 518      var tweenCount = 0;
 519  
 520      /** 
 521       * Base frame rate (frames per second). 
 522       * Arbitrarily high for better x-browser calibration (slower browsers drop more frames).
 523       * @property fps
 524       * @type Int
 525       * 
 526       */
 527      this.fps = 1000;
 528  
 529      /** 
 530       * Interval delay in milliseconds, defaults to fastest possible.
 531       * @property delay
 532       * @type Int
 533       * 
 534       */
 535      this.delay = 20;
 536  
 537      /**
 538       * Adds an animation instance to the animation queue.
 539       * All animation instances must be registered in order to animate.
 540       * @method registerElement
 541       * @param {object} tween The Anim instance to be be registered
 542       */
 543      this.registerElement = function(tween) {
 544          queue[queue.length] = tween;
 545          tweenCount += 1;
 546          tween._onStart.fire();
 547          this.start();
 548      };
 549      
 550      var _unregisterQueue = [];
 551      var _unregistering = false;
 552  
 553      var doUnregister = function() {
 554          var next_args = _unregisterQueue.shift();
 555          unRegister.apply(YAHOO.util.AnimMgr,next_args);
 556          if (_unregisterQueue.length) {
 557              arguments.callee();
 558          }
 559      };
 560  
 561      var unRegister = function(tween, index) {
 562          index = index || getIndex(tween);
 563          if (!tween.isAnimated() || index === -1) {
 564              return false;
 565          }
 566          
 567          tween._onComplete.fire();
 568          queue.splice(index, 1);
 569  
 570          tweenCount -= 1;
 571          if (tweenCount <= 0) {
 572              this.stop();
 573          }
 574  
 575          return true;
 576      };
 577  
 578      /**
 579       * removes an animation instance from the animation queue.
 580       * All animation instances must be registered in order to animate.
 581       * @method unRegister
 582       * @param {object} tween The Anim instance to be be registered
 583       * @param {Int} index The index of the Anim instance
 584       * @private
 585       */
 586      this.unRegister = function() {
 587          _unregisterQueue.push(arguments);
 588          if (!_unregistering) {
 589              _unregistering = true;
 590              doUnregister();
 591              _unregistering = false;
 592          }
 593      }
 594  
 595      /**
 596       * Starts the animation thread.
 597      * Only one thread can run at a time.
 598       * @method start
 599       */    
 600      this.start = function() {
 601          if (thread === null) {
 602              thread = setInterval(this.run, this.delay);
 603          }
 604      };
 605  
 606      /**
 607       * Stops the animation thread or a specific animation instance.
 608       * @method stop
 609       * @param {object} tween A specific Anim instance to stop (optional)
 610       * If no instance given, Manager stops thread and all animations.
 611       */    
 612      this.stop = function(tween) {
 613          if (!tween) {
 614              clearInterval(thread);
 615              
 616              for (var i = 0, len = queue.length; i < len; ++i) {
 617                  this.unRegister(queue[0], 0);  
 618              }
 619  
 620              queue = [];
 621              thread = null;
 622              tweenCount = 0;
 623          }
 624          else {
 625              this.unRegister(tween);
 626          }
 627      };
 628      
 629      /**
 630       * Called per Interval to handle each animation frame.
 631       * @method run
 632       */    
 633      this.run = function() {
 634          for (var i = 0, len = queue.length; i < len; ++i) {
 635              var tween = queue[i];
 636              if ( !tween || !tween.isAnimated() ) { continue; }
 637  
 638              if (tween.currentFrame < tween.totalFrames || tween.totalFrames === null)
 639              {
 640                  tween.currentFrame += 1;
 641                  
 642                  if (tween.useSeconds) {
 643                      correctFrame(tween);
 644                  }
 645                  tween._onTween.fire();          
 646              }
 647              else { YAHOO.util.AnimMgr.stop(tween, i); }
 648          }
 649      };
 650      
 651      var getIndex = function(anim) {
 652          for (var i = 0, len = queue.length; i < len; ++i) {
 653              if (queue[i] === anim) {
 654                  return i; // note return;
 655              }
 656          }
 657          return -1;
 658      };
 659      
 660      /**
 661       * On the fly frame correction to keep animation on time.
 662       * @method correctFrame
 663       * @private
 664       * @param {Object} tween The Anim instance being corrected.
 665       */
 666      var correctFrame = function(tween) {
 667          var frames = tween.totalFrames;
 668          var frame = tween.currentFrame;
 669          var expected = (tween.currentFrame * tween.duration * 1000 / tween.totalFrames);
 670          var elapsed = (new Date() - tween.getStartTime());
 671          var tweak = 0;
 672          
 673          if (elapsed < tween.duration * 1000) { // check if falling behind
 674              tweak = Math.round((elapsed / expected - 1) * tween.currentFrame);
 675          } else { // went over duration, so jump to end
 676              tweak = frames - (frame + 1); 
 677          }
 678          if (tweak > 0 && isFinite(tweak)) { // adjust if needed
 679              if (tween.currentFrame + tweak >= frames) {// dont go past last frame
 680                  tweak = frames - (frame + 1);
 681              }
 682              
 683              tween.currentFrame += tweak;      
 684          }
 685      };
 686      this._queue = queue;
 687      this._getIndex = getIndex;
 688  };
 689  /**
 690   * Used to calculate Bezier splines for any number of control points.
 691   * @class Bezier
 692   * @namespace YAHOO.util
 693   *
 694   */
 695  YAHOO.util.Bezier = new function() {
 696      /**
 697       * Get the current position of the animated element based on t.
 698       * Each point is an array of "x" and "y" values (0 = x, 1 = y)
 699       * At least 2 points are required (start and end).
 700       * First point is start. Last point is end.
 701       * Additional control points are optional.     
 702       * @method getPosition
 703       * @param {Array} points An array containing Bezier points
 704       * @param {Number} t A number between 0 and 1 which is the basis for determining current position
 705       * @return {Array} An array containing int x and y member data
 706       */
 707      this.getPosition = function(points, t) {  
 708          var n = points.length;
 709          var tmp = [];
 710  
 711          for (var i = 0; i < n; ++i){
 712              tmp[i] = [points[i][0], points[i][1]]; // save input
 713          }
 714          
 715          for (var j = 1; j < n; ++j) {
 716              for (i = 0; i < n - j; ++i) {
 717                  tmp[i][0] = (1 - t) * tmp[i][0] + t * tmp[parseInt(i + 1, 10)][0];
 718                  tmp[i][1] = (1 - t) * tmp[i][1] + t * tmp[parseInt(i + 1, 10)][1]; 
 719              }
 720          }
 721      
 722          return [ tmp[0][0], tmp[0][1] ]; 
 723      
 724      };
 725  };
 726  (function() {
 727  /**
 728   * Anim subclass for color transitions.
 729   * <p>Usage: <code>var myAnim = new Y.ColorAnim(el, { backgroundColor: { from: '#FF0000', to: '#FFFFFF' } }, 1, Y.Easing.easeOut);</code> Color values can be specified with either 112233, #112233, 
 730   * [255,255,255], or rgb(255,255,255)</p>
 731   * @class ColorAnim
 732   * @namespace YAHOO.util
 733   * @requires YAHOO.util.Anim
 734   * @requires YAHOO.util.AnimMgr
 735   * @requires YAHOO.util.Easing
 736   * @requires YAHOO.util.Bezier
 737   * @requires YAHOO.util.Dom
 738   * @requires YAHOO.util.Event
 739   * @constructor
 740   * @extends YAHOO.util.Anim
 741   * @param {HTMLElement | String} el Reference to the element that will be animated
 742   * @param {Object} attributes The attribute(s) to be animated.
 743   * Each attribute is an object with at minimum a "to" or "by" member defined.
 744   * Additional optional members are "from" (defaults to current value), "units" (defaults to "px").
 745   * All attribute names use camelCase.
 746   * @param {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
 747   * @param {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
 748   */
 749      var ColorAnim = function(el, attributes, duration,  method) {
 750          ColorAnim.superclass.constructor.call(this, el, attributes, duration, method);
 751      };
 752      
 753      ColorAnim.NAME = 'ColorAnim';
 754  
 755      ColorAnim.DEFAULT_BGCOLOR = '#fff';
 756      // shorthand
 757      var Y = YAHOO.util;
 758      YAHOO.extend(ColorAnim, Y.Anim);
 759  
 760      var superclass = ColorAnim.superclass;
 761      var proto = ColorAnim.prototype;
 762      
 763      proto.patterns.color = /color$/i;
 764      proto.patterns.rgb            = /^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i;
 765      proto.patterns.hex            = /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i;
 766      proto.patterns.hex3          = /^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i;
 767      proto.patterns.transparent = /^transparent|rgba\(0, 0, 0, 0\)$/; // need rgba for safari
 768      
 769      /**
 770       * Attempts to parse the given string and return a 3-tuple.
 771       * @method parseColor
 772       * @param {String} s The string to parse.
 773       * @return {Array} The 3-tuple of rgb values.
 774       */
 775      proto.parseColor = function(s) {
 776          if (s.length == 3) { return s; }
 777      
 778          var c = this.patterns.hex.exec(s);
 779          if (c && c.length == 4) {
 780              return [ parseInt(c[1], 16), parseInt(c[2], 16), parseInt(c[3], 16) ];
 781          }
 782      
 783          c = this.patterns.rgb.exec(s);
 784          if (c && c.length == 4) {
 785              return [ parseInt(c[1], 10), parseInt(c[2], 10), parseInt(c[3], 10) ];
 786          }
 787      
 788          c = this.patterns.hex3.exec(s);
 789          if (c && c.length == 4) {
 790              return [ parseInt(c[1] + c[1], 16), parseInt(c[2] + c[2], 16), parseInt(c[3] + c[3], 16) ];
 791          }
 792          
 793          return null;
 794      };
 795  
 796      proto.getAttribute = function(attr) {
 797          var el = this.getEl();
 798          if (this.patterns.color.test(attr) ) {
 799              var val = YAHOO.util.Dom.getStyle(el, attr);
 800              
 801              var that = this;
 802              if (this.patterns.transparent.test(val)) { // bgcolor default
 803                  var parent = YAHOO.util.Dom.getAncestorBy(el, function(node) {
 804                      return !that.patterns.transparent.test(val);
 805                  });
 806  
 807                  if (parent) {
 808                      val = Y.Dom.getStyle(parent, attr);
 809                  } else {
 810                      val = ColorAnim.DEFAULT_BGCOLOR;
 811                  }
 812              }
 813          } else {
 814              val = superclass.getAttribute.call(this, attr);
 815          }
 816  
 817          return val;
 818      };
 819      
 820      proto.doMethod = function(attr, start, end) {
 821          var val;
 822      
 823          if ( this.patterns.color.test(attr) ) {
 824              val = [];
 825              for (var i = 0, len = start.length; i < len; ++i) {
 826                  val[i] = superclass.doMethod.call(this, attr, start[i], end[i]);
 827              }
 828              
 829              val = 'rgb('+Math.floor(val[0])+','+Math.floor(val[1])+','+Math.floor(val[2])+')';
 830          }
 831          else {
 832              val = superclass.doMethod.call(this, attr, start, end);
 833          }
 834  
 835          return val;
 836      };
 837  
 838      proto.setRuntimeAttribute = function(attr) {
 839          superclass.setRuntimeAttribute.call(this, attr);
 840          
 841          if ( this.patterns.color.test(attr) ) {
 842              var attributes = this.attributes;
 843              var start = this.parseColor(this.runtimeAttributes[attr].start);
 844              var end = this.parseColor(this.runtimeAttributes[attr].end);
 845              // fix colors if going "by"
 846              if ( typeof attributes[attr]['to'] === 'undefined' && typeof attributes[attr]['by'] !== 'undefined' ) {
 847                  end = this.parseColor(attributes[attr].by);
 848              
 849                  for (var i = 0, len = start.length; i < len; ++i) {
 850                      end[i] = start[i] + end[i];
 851                  }
 852              }
 853              
 854              this.runtimeAttributes[attr].start = start;
 855              this.runtimeAttributes[attr].end = end;
 856          }
 857      };
 858  
 859      Y.ColorAnim = ColorAnim;
 860  })();
 861  /*!
 862  TERMS OF USE - EASING EQUATIONS
 863  Open source under the BSD License.
 864  Copyright 2001 Robert Penner All rights reserved.
 865  
 866  Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
 867  
 868   * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
 869   * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
 870   * Neither the name of the author nor the names of contributors may be used to endorse or promote products derived from this software without specific prior written permission.
 871  
 872  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 873  */
 874  
 875  /**
 876   * Singleton that determines how an animation proceeds from start to end.
 877   * @class Easing
 878   * @namespace YAHOO.util
 879  */
 880  
 881  YAHOO.util.Easing = {
 882  
 883      /**
 884       * Uniform speed between points.
 885       * @method easeNone
 886       * @param {Number} t Time value used to compute current value
 887       * @param {Number} b Starting value
 888       * @param {Number} c Delta between start and end values
 889       * @param {Number} d Total length of animation
 890       * @return {Number} The computed value for the current animation frame
 891       */
 892      easeNone: function (t, b, c, d) {
 893          return c*t/d + b;
 894      },
 895      
 896      /**
 897       * Begins slowly and accelerates towards end.
 898       * @method easeIn
 899       * @param {Number} t Time value used to compute current value
 900       * @param {Number} b Starting value
 901       * @param {Number} c Delta between start and end values
 902       * @param {Number} d Total length of animation
 903       * @return {Number} The computed value for the current animation frame
 904       */
 905      easeIn: function (t, b, c, d) {
 906          return c*(t/=d)*t + b;
 907      },
 908  
 909      /**
 910       * Begins quickly and decelerates towards end.
 911       * @method easeOut
 912       * @param {Number} t Time value used to compute current value
 913       * @param {Number} b Starting value
 914       * @param {Number} c Delta between start and end values
 915       * @param {Number} d Total length of animation
 916       * @return {Number} The computed value for the current animation frame
 917       */
 918      easeOut: function (t, b, c, d) {
 919          return -c *(t/=d)*(t-2) + b;
 920      },
 921      
 922      /**
 923       * Begins slowly and decelerates towards end.
 924       * @method easeBoth
 925       * @param {Number} t Time value used to compute current value
 926       * @param {Number} b Starting value
 927       * @param {Number} c Delta between start and end values
 928       * @param {Number} d Total length of animation
 929       * @return {Number} The computed value for the current animation frame
 930       */
 931      easeBoth: function (t, b, c, d) {
 932          if ((t/=d/2) < 1) {
 933              return c/2*t*t + b;
 934          }
 935          
 936          return -c/2 * ((--t)*(t-2) - 1) + b;
 937      },
 938      
 939      /**
 940       * Begins slowly and accelerates towards end.
 941       * @method easeInStrong
 942       * @param {Number} t Time value used to compute current value
 943       * @param {Number} b Starting value
 944       * @param {Number} c Delta between start and end values
 945       * @param {Number} d Total length of animation
 946       * @return {Number} The computed value for the current animation frame
 947       */
 948      easeInStrong: function (t, b, c, d) {
 949          return c*(t/=d)*t*t*t + b;
 950      },
 951      
 952      /**
 953       * Begins quickly and decelerates towards end.
 954       * @method easeOutStrong
 955       * @param {Number} t Time value used to compute current value
 956       * @param {Number} b Starting value
 957       * @param {Number} c Delta between start and end values
 958       * @param {Number} d Total length of animation
 959       * @return {Number} The computed value for the current animation frame
 960       */
 961      easeOutStrong: function (t, b, c, d) {
 962          return -c * ((t=t/d-1)*t*t*t - 1) + b;
 963      },
 964      
 965      /**
 966       * Begins slowly and decelerates towards end.
 967       * @method easeBothStrong
 968       * @param {Number} t Time value used to compute current value
 969       * @param {Number} b Starting value
 970       * @param {Number} c Delta between start and end values
 971       * @param {Number} d Total length of animation
 972       * @return {Number} The computed value for the current animation frame
 973       */
 974      easeBothStrong: function (t, b, c, d) {
 975          if ((t/=d/2) < 1) {
 976              return c/2*t*t*t*t + b;
 977          }
 978          
 979          return -c/2 * ((t-=2)*t*t*t - 2) + b;
 980      },
 981  
 982      /**
 983       * Snap in elastic effect.
 984       * @method elasticIn
 985       * @param {Number} t Time value used to compute current value
 986       * @param {Number} b Starting value
 987       * @param {Number} c Delta between start and end values
 988       * @param {Number} d Total length of animation
 989       * @param {Number} a Amplitude (optional)
 990       * @param {Number} p Period (optional)
 991       * @return {Number} The computed value for the current animation frame
 992       */
 993  
 994      elasticIn: function (t, b, c, d, a, p) {
 995          if (t == 0) {
 996              return b;
 997          }
 998          if ( (t /= d) == 1 ) {
 999              return b+c;
1000          }
1001          if (!p) {
1002              p=d*.3;
1003          }
1004          
1005          if (!a || a < Math.abs(c)) {
1006              a = c; 
1007              var s = p/4;
1008          }
1009          else {
1010              var s = p/(2*Math.PI) * Math.asin (c/a);
1011          }
1012          
1013          return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
1014      },
1015  
1016      /**
1017       * Snap out elastic effect.
1018       * @method elasticOut
1019       * @param {Number} t Time value used to compute current value
1020       * @param {Number} b Starting value
1021       * @param {Number} c Delta between start and end values
1022       * @param {Number} d Total length of animation
1023       * @param {Number} a Amplitude (optional)
1024       * @param {Number} p Period (optional)
1025       * @return {Number} The computed value for the current animation frame
1026       */
1027      elasticOut: function (t, b, c, d, a, p) {
1028          if (t == 0) {
1029              return b;
1030          }
1031          if ( (t /= d) == 1 ) {
1032              return b+c;
1033          }
1034          if (!p) {
1035              p=d*.3;
1036          }
1037          
1038          if (!a || a < Math.abs(c)) {
1039              a = c;
1040              var s = p / 4;
1041          }
1042          else {
1043              var s = p/(2*Math.PI) * Math.asin (c/a);
1044          }
1045          
1046          return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
1047      },
1048      
1049      /**
1050       * Snap both elastic effect.
1051       * @method elasticBoth
1052       * @param {Number} t Time value used to compute current value
1053       * @param {Number} b Starting value
1054       * @param {Number} c Delta between start and end values
1055       * @param {Number} d Total length of animation
1056       * @param {Number} a Amplitude (optional)
1057       * @param {Number} p Period (optional)
1058       * @return {Number} The computed value for the current animation frame
1059       */
1060      elasticBoth: function (t, b, c, d, a, p) {
1061          if (t == 0) {
1062              return b;
1063          }
1064          
1065          if ( (t /= d/2) == 2 ) {
1066              return b+c;
1067          }
1068          
1069          if (!p) {
1070              p = d*(.3*1.5);
1071          }
1072          
1073          if ( !a || a < Math.abs(c) ) {
1074              a = c; 
1075              var s = p/4;
1076          }
1077          else {
1078              var s = p/(2*Math.PI) * Math.asin (c/a);
1079          }
1080          
1081          if (t < 1) {
1082              return -.5*(a*Math.pow(2,10*(t-=1)) * 
1083                      Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
1084          }
1085          return a*Math.pow(2,-10*(t-=1)) * 
1086                  Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
1087      },
1088  
1089  
1090      /**
1091       * Backtracks slightly, then reverses direction and moves to end.
1092       * @method backIn
1093       * @param {Number} t Time value used to compute current value
1094       * @param {Number} b Starting value
1095       * @param {Number} c Delta between start and end values
1096       * @param {Number} d Total length of animation
1097       * @param {Number} s Overshoot (optional)
1098       * @return {Number} The computed value for the current animation frame
1099       */
1100      backIn: function (t, b, c, d, s) {
1101          if (typeof s == 'undefined') {
1102              s = 1.70158;
1103          }
1104          return c*(t/=d)*t*((s+1)*t - s) + b;
1105      },
1106  
1107      /**
1108       * Overshoots end, then reverses and comes back to end.
1109       * @method backOut
1110       * @param {Number} t Time value used to compute current value
1111       * @param {Number} b Starting value
1112       * @param {Number} c Delta between start and end values
1113       * @param {Number} d Total length of animation
1114       * @param {Number} s Overshoot (optional)
1115       * @return {Number} The computed value for the current animation frame
1116       */
1117      backOut: function (t, b, c, d, s) {
1118          if (typeof s == 'undefined') {
1119              s = 1.70158;
1120          }
1121          return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
1122      },
1123      
1124      /**
1125       * Backtracks slightly, then reverses direction, overshoots end, 
1126       * then reverses and comes back to end.
1127       * @method backBoth
1128       * @param {Number} t Time value used to compute current value
1129       * @param {Number} b Starting value
1130       * @param {Number} c Delta between start and end values
1131       * @param {Number} d Total length of animation
1132       * @param {Number} s Overshoot (optional)
1133       * @return {Number} The computed value for the current animation frame
1134       */
1135      backBoth: function (t, b, c, d, s) {
1136          if (typeof s == 'undefined') {
1137              s = 1.70158; 
1138          }
1139          
1140          if ((t /= d/2 ) < 1) {
1141              return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
1142          }
1143          return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
1144      },
1145  
1146      /**
1147       * Bounce off of start.
1148       * @method bounceIn
1149       * @param {Number} t Time value used to compute current value
1150       * @param {Number} b Starting value
1151       * @param {Number} c Delta between start and end values
1152       * @param {Number} d Total length of animation
1153       * @return {Number} The computed value for the current animation frame
1154       */
1155      bounceIn: function (t, b, c, d) {
1156          return c - YAHOO.util.Easing.bounceOut(d-t, 0, c, d) + b;
1157      },
1158      
1159      /**
1160       * Bounces off end.
1161       * @method bounceOut
1162       * @param {Number} t Time value used to compute current value
1163       * @param {Number} b Starting value
1164       * @param {Number} c Delta between start and end values
1165       * @param {Number} d Total length of animation
1166       * @return {Number} The computed value for the current animation frame
1167       */
1168      bounceOut: function (t, b, c, d) {
1169          if ((t/=d) < (1/2.75)) {
1170              return c*(7.5625*t*t) + b;
1171          } else if (t < (2/2.75)) {
1172              return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
1173          } else if (t < (2.5/2.75)) {
1174              return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
1175          }
1176          return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
1177      },
1178      
1179      /**
1180       * Bounces off start and end.
1181       * @method bounceBoth
1182       * @param {Number} t Time value used to compute current value
1183       * @param {Number} b Starting value
1184       * @param {Number} c Delta between start and end values
1185       * @param {Number} d Total length of animation
1186       * @return {Number} The computed value for the current animation frame
1187       */
1188      bounceBoth: function (t, b, c, d) {
1189          if (t < d/2) {
1190              return YAHOO.util.Easing.bounceIn(t*2, 0, c, d) * .5 + b;
1191          }
1192          return YAHOO.util.Easing.bounceOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
1193      }
1194  };
1195  
1196  (function() {
1197  /**
1198   * Anim subclass for moving elements along a path defined by the "points" 
1199   * member of "attributes".  All "points" are arrays with x, y coordinates.
1200   * <p>Usage: <code>var myAnim = new YAHOO.util.Motion(el, { points: { to: [800, 800] } }, 1, YAHOO.util.Easing.easeOut);</code></p>
1201   * @class Motion
1202   * @namespace YAHOO.util
1203   * @requires YAHOO.util.Anim
1204   * @requires YAHOO.util.AnimMgr
1205   * @requires YAHOO.util.Easing
1206   * @requires YAHOO.util.Bezier
1207   * @requires YAHOO.util.Dom
1208   * @requires YAHOO.util.Event
1209   * @requires YAHOO.util.CustomEvent 
1210   * @constructor
1211   * @extends YAHOO.util.ColorAnim
1212   * @param {String | HTMLElement} el Reference to the element that will be animated
1213   * @param {Object} attributes The attribute(s) to be animated.  
1214   * Each attribute is an object with at minimum a "to" or "by" member defined.  
1215   * Additional optional members are "from" (defaults to current value), "units" (defaults to "px").  
1216   * All attribute names use camelCase.
1217   * @param {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
1218   * @param {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
1219   */
1220      var Motion = function(el, attributes, duration,  method) {
1221          if (el) { // dont break existing subclasses not using YAHOO.extend
1222              Motion.superclass.constructor.call(this, el, attributes, duration, method);
1223          }
1224      };
1225  
1226  
1227      Motion.NAME = 'Motion';
1228  
1229      // shorthand
1230      var Y = YAHOO.util;
1231      YAHOO.extend(Motion, Y.ColorAnim);
1232      
1233      var superclass = Motion.superclass;
1234      var proto = Motion.prototype;
1235  
1236      proto.patterns.points = /^points$/i;
1237      
1238      proto.setAttribute = function(attr, val, unit) {
1239          if (  this.patterns.points.test(attr) ) {
1240              unit = unit || 'px';
1241              superclass.setAttribute.call(this, 'left', val[0], unit);
1242              superclass.setAttribute.call(this, 'top', val[1], unit);
1243          } else {
1244              superclass.setAttribute.call(this, attr, val, unit);
1245          }
1246      };
1247  
1248      proto.getAttribute = function(attr) {
1249          if (  this.patterns.points.test(attr) ) {
1250              var val = [
1251                  superclass.getAttribute.call(this, 'left'),
1252                  superclass.getAttribute.call(this, 'top')
1253              ];
1254          } else {
1255              val = superclass.getAttribute.call(this, attr);
1256          }
1257  
1258          return val;
1259      };
1260  
1261      proto.doMethod = function(attr, start, end) {
1262          var val = null;
1263  
1264          if ( this.patterns.points.test(attr) ) {
1265              var t = this.method(this.currentFrame, 0, 100, this.totalFrames) / 100;                
1266              val = Y.Bezier.getPosition(this.runtimeAttributes[attr], t);
1267          } else {
1268              val = superclass.doMethod.call(this, attr, start, end);
1269          }
1270          return val;
1271      };
1272  
1273      proto.setRuntimeAttribute = function(attr) {
1274          if ( this.patterns.points.test(attr) ) {
1275              var el = this.getEl();
1276              var attributes = this.attributes;
1277              var start;
1278              var control = attributes['points']['control'] || [];
1279              var end;
1280              var i, len;
1281              
1282              if (control.length > 0 && !(control[0] instanceof Array) ) { // could be single point or array of points
1283                  control = [control];
1284              } else { // break reference to attributes.points.control
1285                  var tmp = []; 
1286                  for (i = 0, len = control.length; i< len; ++i) {
1287                      tmp[i] = control[i];
1288                  }
1289                  control = tmp;
1290              }
1291  
1292              if (Y.Dom.getStyle(el, 'position') == 'static') { // default to relative
1293                  Y.Dom.setStyle(el, 'position', 'relative');
1294              }
1295      
1296              if ( isset(attributes['points']['from']) ) {
1297                  Y.Dom.setXY(el, attributes['points']['from']); // set position to from point
1298              } 
1299              else { Y.Dom.setXY( el, Y.Dom.getXY(el) ); } // set it to current position
1300              
1301              start = this.getAttribute('points'); // get actual top & left
1302              
1303              // TO beats BY, per SMIL 2.1 spec
1304              if ( isset(attributes['points']['to']) ) {
1305                  end = translateValues.call(this, attributes['points']['to'], start);
1306                  
1307                  var pageXY = Y.Dom.getXY(this.getEl());
1308                  for (i = 0, len = control.length; i < len; ++i) {
1309                      control[i] = translateValues.call(this, control[i], start);
1310                  }
1311  
1312                  
1313              } else if ( isset(attributes['points']['by']) ) {
1314                  end = [ start[0] + attributes['points']['by'][0], start[1] + attributes['points']['by'][1] ];
1315                  
1316                  for (i = 0, len = control.length; i < len; ++i) {
1317                      control[i] = [ start[0] + control[i][0], start[1] + control[i][1] ];
1318                  }
1319              }
1320  
1321              this.runtimeAttributes[attr] = [start];
1322              
1323              if (control.length > 0) {
1324                  this.runtimeAttributes[attr] = this.runtimeAttributes[attr].concat(control); 
1325              }
1326  
1327              this.runtimeAttributes[attr][this.runtimeAttributes[attr].length] = end;
1328          }
1329          else {
1330              superclass.setRuntimeAttribute.call(this, attr);
1331          }
1332      };
1333      
1334      var translateValues = function(val, start) {
1335          var pageXY = Y.Dom.getXY(this.getEl());
1336          val = [ val[0] - pageXY[0] + start[0], val[1] - pageXY[1] + start[1] ];
1337  
1338          return val; 
1339      };
1340      
1341      var isset = function(prop) {
1342          return (typeof prop !== 'undefined');
1343      };
1344  
1345      Y.Motion = Motion;
1346  })();
1347  (function() {
1348  /**
1349   * Anim subclass for scrolling elements to a position defined by the "scroll"
1350   * member of "attributes".  All "scroll" members are arrays with x, y scroll positions.
1351   * <p>Usage: <code>var myAnim = new YAHOO.util.Scroll(el, { scroll: { to: [0, 800] } }, 1, YAHOO.util.Easing.easeOut);</code></p>
1352   * @class Scroll
1353   * @namespace YAHOO.util
1354   * @requires YAHOO.util.Anim
1355   * @requires YAHOO.util.AnimMgr
1356   * @requires YAHOO.util.Easing
1357   * @requires YAHOO.util.Bezier
1358   * @requires YAHOO.util.Dom
1359   * @requires YAHOO.util.Event
1360   * @requires YAHOO.util.CustomEvent 
1361   * @extends YAHOO.util.ColorAnim
1362   * @constructor
1363   * @param {String or HTMLElement} el Reference to the element that will be animated
1364   * @param {Object} attributes The attribute(s) to be animated.  
1365   * Each attribute is an object with at minimum a "to" or "by" member defined.  
1366   * Additional optional members are "from" (defaults to current value), "units" (defaults to "px").  
1367   * All attribute names use camelCase.
1368   * @param {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
1369   * @param {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
1370   */
1371      var Scroll = function(el, attributes, duration,  method) {
1372          if (el) { // dont break existing subclasses not using YAHOO.extend
1373              Scroll.superclass.constructor.call(this, el, attributes, duration, method);
1374          }
1375      };
1376  
1377      Scroll.NAME = 'Scroll';
1378  
1379      // shorthand
1380      var Y = YAHOO.util;
1381      YAHOO.extend(Scroll, Y.ColorAnim);
1382      
1383      var superclass = Scroll.superclass;
1384      var proto = Scroll.prototype;
1385  
1386      proto.doMethod = function(attr, start, end) {
1387          var val = null;
1388      
1389          if (attr == 'scroll') {
1390              val = [
1391                  this.method(this.currentFrame, start[0], end[0] - start[0], this.totalFrames),
1392                  this.method(this.currentFrame, start[1], end[1] - start[1], this.totalFrames)
1393              ];
1394              
1395          } else {
1396              val = superclass.doMethod.call(this, attr, start, end);
1397          }
1398          return val;
1399      };
1400  
1401      proto.getAttribute = function(attr) {
1402          var val = null;
1403          var el = this.getEl();
1404          
1405          if (attr == 'scroll') {
1406              val = [ el.scrollLeft, el.scrollTop ];
1407          } else {
1408              val = superclass.getAttribute.call(this, attr);
1409          }
1410          
1411          return val;
1412      };
1413  
1414      proto.setAttribute = function(attr, val, unit) {
1415          var el = this.getEl();
1416          
1417          if (attr == 'scroll') {
1418              el.scrollLeft = val[0];
1419              el.scrollTop = val[1];
1420          } else {
1421              superclass.setAttribute.call(this, attr, val, unit);
1422          }
1423      };
1424  
1425      Y.Scroll = Scroll;
1426  })();
1427  YAHOO.register("animation", YAHOO.util.Anim, {version: "2.9.0", build: "2800"});
1428  
1429  }, '2.9.0' ,{"requires": ["yui2-yahoo", "yui2-dom", "yui2-event"]});