[Summary view] [Print] [Text view]

   1  YUI.add('yui2-element', 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  /**
  10   * Provides Attribute configurations.
  11   * @namespace YAHOO.util
  12   * @class Attribute
  13   * @constructor
  14   * @param hash {Object} The intial Attribute.
  15   * @param {YAHOO.util.AttributeProvider} The owner of the Attribute instance.
  16   */
  17  
  18  YAHOO.util.Attribute = function(hash, owner) {
  19      if (owner) { 
  20          this.owner = owner;
  21          this.configure(hash, true);
  22      }
  23  };
  24  
  25  YAHOO.util.Attribute.INVALID_VALUE = {};
  26  
  27  YAHOO.util.Attribute.prototype = {
  28      /**
  29       * The name of the attribute.
  30       * @property name
  31       * @type String
  32       */
  33      name: undefined,
  34      
  35      /**
  36       * The value of the attribute.
  37       * @property value
  38       * @type String
  39       */
  40      value: null,
  41      
  42      /**
  43       * The owner of the attribute.
  44       * @property owner
  45       * @type YAHOO.util.AttributeProvider
  46       */
  47      owner: null,
  48      
  49      /**
  50       * Whether or not the attribute is read only.
  51       * @property readOnly
  52       * @type Boolean
  53       */
  54      readOnly: false,
  55      
  56      /**
  57       * Whether or not the attribute can only be written once.
  58       * @property writeOnce
  59       * @type Boolean
  60       */
  61      writeOnce: false,
  62  
  63      /**
  64       * The attribute's initial configuration.
  65       * @private
  66       * @property _initialConfig
  67       * @type Object
  68       */
  69      _initialConfig: null,
  70      
  71      /**
  72       * Whether or not the attribute's value has been set.
  73       * @private
  74       * @property _written
  75       * @type Boolean
  76       */
  77      _written: false,
  78      
  79      /**
  80       * A function to call when setting the attribute's value.
  81       * The method receives the new value as the first arg and the attribute name as the 2nd
  82       * @property method
  83       * @type Function
  84       */
  85      method: null,
  86      
  87      /**
  88       * The function to use when setting the attribute's value.
  89       * The setter receives the new value as the first arg and the attribute name as the 2nd
  90       * The return value of the setter replaces the value passed to set(). 
  91       * @property setter
  92       * @type Function
  93       */
  94      setter: null,
  95      
  96      /**
  97       * The function to use when getting the attribute's value.
  98       * The getter receives the new value as the first arg and the attribute name as the 2nd
  99       * The return value of the getter will be used as the return from get().
 100       * @property getter
 101       * @type Function
 102       */
 103      getter: null,
 104  
 105      /**
 106       * The validator to use when setting the attribute's value.
 107       * @property validator
 108       * @type Function
 109       * @return Boolean
 110       */
 111      validator: null,
 112      
 113      /**
 114       * Retrieves the current value of the attribute.
 115       * @method getValue
 116       * @return {any} The current value of the attribute.
 117       */
 118      getValue: function() {
 119          var val = this.value;
 120  
 121          if (this.getter) {
 122              val = this.getter.call(this.owner, this.name, val);
 123          }
 124  
 125          return val;
 126      },
 127      
 128      /**
 129       * Sets the value of the attribute and fires beforeChange and change events.
 130       * @method setValue
 131       * @param {Any} value The value to apply to the attribute.
 132       * @param {Boolean} silent If true the change events will not be fired.
 133       * @return {Boolean} Whether or not the value was set.
 134       */
 135      setValue: function(value, silent) {
 136          var beforeRetVal,
 137              owner = this.owner,
 138              name = this.name,
 139              invalidValue = YAHOO.util.Attribute.INVALID_VALUE,
 140          
 141              event = {
 142                  type: name, 
 143                  prevValue: this.getValue(),
 144                  newValue: value
 145          };
 146          
 147          if (this.readOnly || ( this.writeOnce && this._written) ) {
 148              YAHOO.log( 'setValue ' + name + ', ' +  value +
 149                      ' failed: read only', 'error', 'Attribute');
 150              return false; // write not allowed
 151          }
 152          
 153          if (this.validator && !this.validator.call(owner, value) ) {
 154              YAHOO.log( 'setValue ' + name + ', ' + value +
 155                      ' validation failed', 'error', 'Attribute');
 156              return false; // invalid value
 157          }
 158  
 159          if (!silent) {
 160              beforeRetVal = owner.fireBeforeChangeEvent(event);
 161              if (beforeRetVal === false) {
 162                  YAHOO.log('setValue ' + name + 
 163                          ' cancelled by beforeChange event', 'info', 'Attribute');
 164                  return false;
 165              }
 166          }
 167  
 168          if (this.setter) {
 169              value = this.setter.call(owner, value, this.name);
 170              if (value === undefined) {
 171                  YAHOO.log('setter for ' + this.name + ' returned undefined', 'warn', 'Attribute');
 172              }
 173  
 174              if (value === invalidValue) {
 175                  return false;
 176              }
 177          }
 178          
 179          if (this.method) {
 180              if (this.method.call(owner, value, this.name) === invalidValue) {
 181                  return false; 
 182              }
 183          }
 184          
 185          this.value = value; // TODO: set before calling setter/method?
 186          this._written = true;
 187          
 188          event.type = name;
 189          
 190          if (!silent) {
 191              this.owner.fireChangeEvent(event);
 192          }
 193          
 194          return true;
 195      },
 196      
 197      /**
 198       * Allows for configuring the Attribute's properties.
 199       * @method configure
 200       * @param {Object} map A key-value map of Attribute properties.
 201       * @param {Boolean} init Whether or not this should become the initial config.
 202       */
 203      configure: function(map, init) {
 204          map = map || {};
 205  
 206          if (init) {
 207              this._written = false; // reset writeOnce
 208          }
 209  
 210          this._initialConfig = this._initialConfig || {};
 211          
 212          for (var key in map) {
 213              if ( map.hasOwnProperty(key) ) {
 214                  this[key] = map[key];
 215                  if (init) {
 216                      this._initialConfig[key] = map[key];
 217                  }
 218              }
 219          }
 220      },
 221      
 222      /**
 223       * Resets the value to the initial config value.
 224       * @method resetValue
 225       * @return {Boolean} Whether or not the value was set.
 226       */
 227      resetValue: function() {
 228          return this.setValue(this._initialConfig.value);
 229      },
 230      
 231      /**
 232       * Resets the attribute config to the initial config state.
 233       * @method resetConfig
 234       */
 235      resetConfig: function() {
 236          this.configure(this._initialConfig, true);
 237      },
 238      
 239      /**
 240       * Resets the value to the current value.
 241       * Useful when values may have gotten out of sync with actual properties.
 242       * @method refresh
 243       * @return {Boolean} Whether or not the value was set.
 244       */
 245      refresh: function(silent) {
 246          this.setValue(this.value, silent);
 247      }
 248  };
 249  
 250  (function() {
 251      var Lang = YAHOO.util.Lang;
 252  
 253      /*
 254      Copyright (c) 2006, Yahoo! Inc. All rights reserved.
 255      Code licensed under the BSD License:
 256      http://developer.yahoo.net/yui/license.txt
 257      */
 258      
 259      /**
 260       * Provides and manages YAHOO.util.Attribute instances
 261       * @namespace YAHOO.util
 262       * @class AttributeProvider
 263       * @uses YAHOO.util.EventProvider
 264       */
 265      YAHOO.util.AttributeProvider = function() {};
 266  
 267      YAHOO.util.AttributeProvider.prototype = {
 268          
 269          /**
 270           * A key-value map of Attribute configurations
 271           * @property _configs
 272           * @protected (may be used by subclasses and augmentors)
 273           * @private
 274           * @type {Object}
 275           */
 276          _configs: null,
 277          /**
 278           * Returns the current value of the attribute.
 279           * @method get
 280           * @param {String} key The attribute whose value will be returned.
 281           * @return {Any} The current value of the attribute.
 282           */
 283          get: function(key){
 284              this._configs = this._configs || {};
 285              var config = this._configs[key];
 286              
 287              if (!config || !this._configs.hasOwnProperty(key)) {
 288                  YAHOO.log(key + ' not found', 'error', 'AttributeProvider');
 289                  return null;
 290              }
 291              
 292              return config.getValue();
 293          },
 294          
 295          /**
 296           * Sets the value of a config.
 297           * @method set
 298           * @param {String} key The name of the attribute
 299           * @param {Any} value The value to apply to the attribute
 300           * @param {Boolean} silent Whether or not to suppress change events
 301           * @return {Boolean} Whether or not the value was set.
 302           */
 303          set: function(key, value, silent){
 304              this._configs = this._configs || {};
 305              var config = this._configs[key];
 306              
 307              if (!config) {
 308                  YAHOO.log('set failed: ' + key + ' not found',
 309                          'error', 'AttributeProvider');
 310                  return false;
 311              }
 312              
 313              return config.setValue(value, silent);
 314          },
 315      
 316          /**
 317           * Returns an array of attribute names.
 318           * @method getAttributeKeys
 319           * @return {Array} An array of attribute names.
 320           */
 321          getAttributeKeys: function(){
 322              this._configs = this._configs;
 323              var keys = [], key;
 324  
 325              for (key in this._configs) {
 326                  if ( Lang.hasOwnProperty(this._configs, key) && 
 327                          !Lang.isUndefined(this._configs[key]) ) {
 328                      keys[keys.length] = key;
 329                  }
 330              }
 331              
 332              return keys;
 333          },
 334          
 335          /**
 336           * Sets multiple attribute values.
 337           * @method setAttributes
 338           * @param {Object} map  A key-value map of attributes
 339           * @param {Boolean} silent Whether or not to suppress change events
 340           */
 341          setAttributes: function(map, silent){
 342              for (var key in map) {
 343                  if ( Lang.hasOwnProperty(map, key) ) {
 344                      this.set(key, map[key], silent);
 345                  }
 346              }
 347          },
 348      
 349          /**
 350           * Resets the specified attribute's value to its initial value.
 351           * @method resetValue
 352           * @param {String} key The name of the attribute
 353           * @param {Boolean} silent Whether or not to suppress change events
 354           * @return {Boolean} Whether or not the value was set
 355           */
 356          resetValue: function(key, silent){
 357              this._configs = this._configs || {};
 358              if (this._configs[key]) {
 359                  this.set(key, this._configs[key]._initialConfig.value, silent);
 360                  return true;
 361              }
 362              return false;
 363          },
 364      
 365          /**
 366           * Sets the attribute's value to its current value.
 367           * @method refresh
 368           * @param {String | Array} key The attribute(s) to refresh
 369           * @param {Boolean} silent Whether or not to suppress change events
 370           */
 371          refresh: function(key, silent) {
 372              this._configs = this._configs || {};
 373              var configs = this._configs;
 374              
 375              key = ( ( Lang.isString(key) ) ? [key] : key ) || 
 376                      this.getAttributeKeys();
 377              
 378              for (var i = 0, len = key.length; i < len; ++i) { 
 379                  if (configs.hasOwnProperty(key[i])) {
 380                      this._configs[key[i]].refresh(silent);
 381                  }
 382              }
 383          },
 384      
 385          /**
 386           * Adds an Attribute to the AttributeProvider instance. 
 387           * @method register
 388           * @param {String} key The attribute's name
 389           * @param {Object} map A key-value map containing the
 390           * attribute's properties.
 391           * @deprecated Use setAttributeConfig
 392           */
 393          register: function(key, map) {
 394              this.setAttributeConfig(key, map);
 395          },
 396          
 397          
 398          /**
 399           * Returns the attribute's properties.
 400           * @method getAttributeConfig
 401           * @param {String} key The attribute's name
 402           * @private
 403           * @return {object} A key-value map containing all of the
 404           * attribute's properties.
 405           */
 406          getAttributeConfig: function(key) {
 407              this._configs = this._configs || {};
 408              var config = this._configs[key] || {};
 409              var map = {}; // returning a copy to prevent overrides
 410              
 411              for (key in config) {
 412                  if ( Lang.hasOwnProperty(config, key) ) {
 413                      map[key] = config[key];
 414                  }
 415              }
 416      
 417              return map;
 418          },
 419          
 420          /**
 421           * Sets or updates an Attribute instance's properties. 
 422           * @method setAttributeConfig
 423           * @param {String} key The attribute's name.
 424           * @param {Object} map A key-value map of attribute properties
 425           * @param {Boolean} init Whether or not this should become the intial config.
 426           */
 427          setAttributeConfig: function(key, map, init) {
 428              this._configs = this._configs || {};
 429              map = map || {};
 430              if (!this._configs[key]) {
 431                  map.name = key;
 432                  this._configs[key] = this.createAttribute(map);
 433              } else {
 434                  this._configs[key].configure(map, init);
 435              }
 436          },
 437          
 438          /**
 439           * Sets or updates an Attribute instance's properties. 
 440           * @method configureAttribute
 441           * @param {String} key The attribute's name.
 442           * @param {Object} map A key-value map of attribute properties
 443           * @param {Boolean} init Whether or not this should become the intial config.
 444           * @deprecated Use setAttributeConfig
 445           */
 446          configureAttribute: function(key, map, init) {
 447              this.setAttributeConfig(key, map, init);
 448          },
 449          
 450          /**
 451           * Resets an attribute to its intial configuration. 
 452           * @method resetAttributeConfig
 453           * @param {String} key The attribute's name.
 454           * @private
 455           */
 456          resetAttributeConfig: function(key){
 457              this._configs = this._configs || {};
 458              this._configs[key].resetConfig();
 459          },
 460          
 461          // wrapper for EventProvider.subscribe
 462          // to create events on the fly
 463          subscribe: function(type, callback) {
 464              this._events = this._events || {};
 465  
 466              if ( !(type in this._events) ) {
 467                  this._events[type] = this.createEvent(type);
 468              }
 469  
 470              YAHOO.util.EventProvider.prototype.subscribe.apply(this, arguments);
 471          },
 472  
 473          on: function() {
 474              this.subscribe.apply(this, arguments);
 475          },
 476  
 477          addListener: function() {
 478              this.subscribe.apply(this, arguments);
 479          },
 480  
 481          /**
 482           * Fires the attribute's beforeChange event. 
 483           * @method fireBeforeChangeEvent
 484           * @param {String} key The attribute's name.
 485           * @param {Obj} e The event object to pass to handlers.
 486           */
 487          fireBeforeChangeEvent: function(e) {
 488              var type = 'before';
 489              type += e.type.charAt(0).toUpperCase() + e.type.substr(1) + 'Change';
 490              e.type = type;
 491              return this.fireEvent(e.type, e);
 492          },
 493          
 494          /**
 495           * Fires the attribute's change event. 
 496           * @method fireChangeEvent
 497           * @param {String} key The attribute's name.
 498           * @param {Obj} e The event object to pass to the handlers.
 499           */
 500          fireChangeEvent: function(e) {
 501              e.type += 'Change';
 502              return this.fireEvent(e.type, e);
 503          },
 504  
 505          createAttribute: function(map) {
 506              return new YAHOO.util.Attribute(map, this);
 507          }
 508      };
 509      
 510      YAHOO.augment(YAHOO.util.AttributeProvider, YAHOO.util.EventProvider);
 511  })();
 512  
 513  (function() {
 514  // internal shorthand
 515  var Dom = YAHOO.util.Dom,
 516      AttributeProvider = YAHOO.util.AttributeProvider,
 517      specialTypes = {
 518          mouseenter: true,
 519          mouseleave: true
 520      };
 521  
 522  /**
 523   * Element provides an wrapper object to simplify adding
 524   * event listeners, using dom methods, and managing attributes. 
 525   * @module element
 526   * @namespace YAHOO.util
 527   * @requires yahoo, dom, event
 528   */
 529  
 530  /**
 531   * Element provides an wrapper object to simplify adding
 532   * event listeners, using dom methods, and managing attributes. 
 533   * @class Element
 534   * @uses YAHOO.util.AttributeProvider
 535   * @constructor
 536   * @param el {HTMLElement | String} The html element that 
 537   * represents the Element.
 538   * @param {Object} map A key-value map of initial config names and values
 539   */
 540  var Element = function(el, map) {
 541      this.init.apply(this, arguments);
 542  };
 543  
 544  Element.DOM_EVENTS = {
 545      'click': true,
 546      'dblclick': true,
 547      'keydown': true,
 548      'keypress': true,
 549      'keyup': true,
 550      'mousedown': true,
 551      'mousemove': true,
 552      'mouseout': true, 
 553      'mouseover': true, 
 554      'mouseup': true,
 555      'mouseenter': true, 
 556      'mouseleave': true,
 557      'focus': true,
 558      'blur': true,
 559      'submit': true,
 560      'change': true
 561  };
 562  
 563  Element.prototype = {
 564      /**
 565       * Dom events supported by the Element instance.
 566       * @property DOM_EVENTS
 567       * @type Object
 568       */
 569      DOM_EVENTS: null,
 570  
 571      DEFAULT_HTML_SETTER: function(value, key) {
 572          var el = this.get('element');
 573          
 574          if (el) {
 575              el[key] = value;
 576          }
 577  
 578          return value;
 579  
 580      },
 581  
 582      DEFAULT_HTML_GETTER: function(key) {
 583          var el = this.get('element'),
 584              val;
 585  
 586          if (el) {
 587              val = el[key];
 588          }
 589  
 590          return val;
 591      },
 592  
 593      /**
 594       * Wrapper for HTMLElement method.
 595       * @method appendChild
 596       * @param {YAHOO.util.Element || HTMLElement} child The element to append. 
 597       * @return {HTMLElement} The appended DOM element. 
 598       */
 599      appendChild: function(child) {
 600          child = child.get ? child.get('element') : child;
 601          return this.get('element').appendChild(child);
 602      },
 603      
 604      /**
 605       * Wrapper for HTMLElement method.
 606       * @method getElementsByTagName
 607       * @param {String} tag The tagName to collect
 608       * @return {HTMLCollection} A collection of DOM elements. 
 609       */
 610      getElementsByTagName: function(tag) {
 611          return this.get('element').getElementsByTagName(tag);
 612      },
 613      
 614      /**
 615       * Wrapper for HTMLElement method.
 616       * @method hasChildNodes
 617       * @return {Boolean} Whether or not the element has childNodes
 618       */
 619      hasChildNodes: function() {
 620          return this.get('element').hasChildNodes();
 621      },
 622      
 623      /**
 624       * Wrapper for HTMLElement method.
 625       * @method insertBefore
 626       * @param {HTMLElement} element The HTMLElement to insert
 627       * @param {HTMLElement} before The HTMLElement to insert
 628       * the element before.
 629       * @return {HTMLElement} The inserted DOM element. 
 630       */
 631      insertBefore: function(element, before) {
 632          element = element.get ? element.get('element') : element;
 633          before = (before && before.get) ? before.get('element') : before;
 634          
 635          return this.get('element').insertBefore(element, before);
 636      },
 637      
 638      /**
 639       * Wrapper for HTMLElement method.
 640       * @method removeChild
 641       * @param {HTMLElement} child The HTMLElement to remove
 642       * @return {HTMLElement} The removed DOM element. 
 643       */
 644      removeChild: function(child) {
 645          child = child.get ? child.get('element') : child;
 646          return this.get('element').removeChild(child);
 647      },
 648      
 649      /**
 650       * Wrapper for HTMLElement method.
 651       * @method replaceChild
 652       * @param {HTMLElement} newNode The HTMLElement to insert
 653       * @param {HTMLElement} oldNode The HTMLElement to replace
 654       * @return {HTMLElement} The replaced DOM element. 
 655       */
 656      replaceChild: function(newNode, oldNode) {
 657          newNode = newNode.get ? newNode.get('element') : newNode;
 658          oldNode = oldNode.get ? oldNode.get('element') : oldNode;
 659          return this.get('element').replaceChild(newNode, oldNode);
 660      },
 661  
 662      
 663      /**
 664       * Registers Element specific attributes.
 665       * @method initAttributes
 666       * @param {Object} map A key-value map of initial attribute configs
 667       */
 668      initAttributes: function(map) {
 669      },
 670  
 671      /**
 672       * Adds a listener for the given event.  These may be DOM or 
 673       * customEvent listeners.  Any event that is fired via fireEvent
 674       * can be listened for.  All handlers receive an event object. 
 675       * @method addListener
 676       * @param {String} type The name of the event to listen for
 677       * @param {Function} fn The handler to call when the event fires
 678       * @param {Any} obj A variable to pass to the handler
 679       * @param {Object} scope The object to use for the scope of the handler 
 680       */
 681      addListener: function(type, fn, obj, scope) {
 682  
 683          scope = scope || this;
 684  
 685          var Event = YAHOO.util.Event,
 686              el = this.get('element') || this.get('id'),
 687              self = this;
 688  
 689  
 690          if (specialTypes[type] && !Event._createMouseDelegate) {
 691              YAHOO.log("Using a " + type + " event requires the event-mouseenter module", "error", "Event");
 692              return false;    
 693          }
 694  
 695  
 696          if (!this._events[type]) { // create on the fly
 697  
 698              if (el && this.DOM_EVENTS[type]) {
 699                  Event.on(el, type, function(e, matchedEl) {
 700  
 701                      // Supplement IE with target, currentTarget relatedTarget
 702  
 703                      if (e.srcElement && !e.target) { 
 704                          e.target = e.srcElement;
 705                      }
 706  
 707                      if ((e.toElement && !e.relatedTarget) || (e.fromElement && !e.relatedTarget)) {
 708                          e.relatedTarget = Event.getRelatedTarget(e);
 709                      }
 710                      
 711                      if (!e.currentTarget) {
 712                          e.currentTarget = el;
 713                      }
 714  
 715                      //    Note: matchedEl el is passed back for delegated listeners
 716                      self.fireEvent(type, e, matchedEl);
 717  
 718                  }, obj, scope);
 719              }
 720              this.createEvent(type, {scope: this});
 721          }
 722          
 723          return YAHOO.util.EventProvider.prototype.subscribe.apply(this, arguments); // notify via customEvent
 724      },
 725  
 726  
 727      /**
 728       * Alias for addListener
 729       * @method on
 730       * @param {String} type The name of the event to listen for
 731       * @param {Function} fn The function call when the event fires
 732       * @param {Any} obj A variable to pass to the handler
 733       * @param {Object} scope The object to use for the scope of the handler 
 734       */
 735      on: function() {
 736          return this.addListener.apply(this, arguments);
 737      },
 738      
 739      /**
 740       * Alias for addListener
 741       * @method subscribe
 742       * @param {String} type The name of the event to listen for
 743       * @param {Function} fn The function call when the event fires
 744       * @param {Any} obj A variable to pass to the handler
 745       * @param {Object} scope The object to use for the scope of the handler 
 746       */
 747      subscribe: function() {
 748          return this.addListener.apply(this, arguments);
 749      },
 750      
 751      /**
 752       * Remove an event listener
 753       * @method removeListener
 754       * @param {String} type The name of the event to listen for
 755       * @param {Function} fn The function call when the event fires
 756       */
 757      removeListener: function(type, fn) {
 758          return this.unsubscribe.apply(this, arguments);
 759      },
 760      
 761      /**
 762       * Wrapper for Dom method.
 763       * @method addClass
 764       * @param {String} className The className to add
 765       */
 766      addClass: function(className) {
 767          Dom.addClass(this.get('element'), className);
 768      },
 769      
 770      /**
 771       * Wrapper for Dom method.
 772       * @method getElementsByClassName
 773       * @param {String} className The className to collect
 774       * @param {String} tag (optional) The tag to use in
 775       * conjunction with class name
 776       * @return {Array} Array of HTMLElements
 777       */
 778      getElementsByClassName: function(className, tag) {
 779          return Dom.getElementsByClassName(className, tag,
 780                  this.get('element') );
 781      },
 782      
 783      /**
 784       * Wrapper for Dom method.
 785       * @method hasClass
 786       * @param {String} className The className to add
 787       * @return {Boolean} Whether or not the element has the class name
 788       */
 789      hasClass: function(className) {
 790          return Dom.hasClass(this.get('element'), className); 
 791      },
 792      
 793      /**
 794       * Wrapper for Dom method.
 795       * @method removeClass
 796       * @param {String} className The className to remove
 797       */
 798      removeClass: function(className) {
 799          return Dom.removeClass(this.get('element'), className);
 800      },
 801      
 802      /**
 803       * Wrapper for Dom method.
 804       * @method replaceClass
 805       * @param {String} oldClassName The className to replace
 806       * @param {String} newClassName The className to add
 807       */
 808      replaceClass: function(oldClassName, newClassName) {
 809          return Dom.replaceClass(this.get('element'), 
 810                  oldClassName, newClassName);
 811      },
 812      
 813      /**
 814       * Wrapper for Dom method.
 815       * @method setStyle
 816       * @param {String} property The style property to set
 817       * @param {String} value The value to apply to the style property
 818       */
 819      setStyle: function(property, value) {
 820          return Dom.setStyle(this.get('element'),  property, value); // TODO: always queuing?
 821      },
 822      
 823      /**
 824       * Wrapper for Dom method.
 825       * @method getStyle
 826       * @param {String} property The style property to retrieve
 827       * @return {String} The current value of the property
 828       */
 829      getStyle: function(property) {
 830          return Dom.getStyle(this.get('element'),  property);
 831      },
 832      
 833      /**
 834       * Apply any queued set calls.
 835       * @method fireQueue
 836       */
 837      fireQueue: function() {
 838          var queue = this._queue;
 839          for (var i = 0, len = queue.length; i < len; ++i) {
 840              this[queue[i][0]].apply(this, queue[i][1]);
 841          }
 842      },
 843      
 844      /**
 845       * Appends the HTMLElement into either the supplied parentNode.
 846       * @method appendTo
 847       * @param {HTMLElement | Element} parentNode The node to append to
 848       * @param {HTMLElement | Element} before An optional node to insert before
 849       * @return {HTMLElement} The appended DOM element. 
 850       */
 851      appendTo: function(parent, before) {
 852          parent = (parent.get) ?  parent.get('element') : Dom.get(parent);
 853          
 854          this.fireEvent('beforeAppendTo', {
 855              type: 'beforeAppendTo',
 856              target: parent
 857          });
 858          
 859          
 860          before = (before && before.get) ? 
 861                  before.get('element') : Dom.get(before);
 862          var element = this.get('element');
 863          
 864          if (!element) {
 865              YAHOO.log('appendTo failed: element not available',
 866                      'error', 'Element');
 867              return false;
 868          }
 869          
 870          if (!parent) {
 871              YAHOO.log('appendTo failed: parent not available',
 872                      'error', 'Element');
 873              return false;
 874          }
 875          
 876          if (element.parent != parent) {
 877              if (before) {
 878                  parent.insertBefore(element, before);
 879              } else {
 880                  parent.appendChild(element);
 881              }
 882          }
 883          
 884          YAHOO.log(element + 'appended to ' + parent);
 885          
 886          this.fireEvent('appendTo', {
 887              type: 'appendTo',
 888              target: parent
 889          });
 890  
 891          return element;
 892      },
 893      
 894      get: function(key) {
 895          var configs = this._configs || {},
 896              el = configs.element; // avoid loop due to 'element'
 897  
 898          if (el && !configs[key] && !YAHOO.lang.isUndefined(el.value[key]) ) {
 899              this._setHTMLAttrConfig(key);
 900          }
 901  
 902          return AttributeProvider.prototype.get.call(this, key);
 903      },
 904  
 905      setAttributes: function(map, silent) {
 906          // set based on configOrder
 907          var done = {},
 908              configOrder = this._configOrder;
 909  
 910          // set based on configOrder
 911          for (var i = 0, len = configOrder.length; i < len; ++i) {
 912              if (map[configOrder[i]] !== undefined) {
 913                  done[configOrder[i]] = true;
 914                  this.set(configOrder[i], map[configOrder[i]], silent);
 915              }
 916          }
 917  
 918          // unconfigured (e.g. Dom attributes)
 919          for (var att in map) {
 920              if (map.hasOwnProperty(att) && !done[att]) {
 921                  this.set(att, map[att], silent);
 922              }
 923          }
 924      },
 925  
 926      set: function(key, value, silent) {
 927          var el = this.get('element');
 928          if (!el) {
 929              this._queue[this._queue.length] = ['set', arguments];
 930              if (this._configs[key]) {
 931                  this._configs[key].value = value; // so "get" works while queueing
 932              
 933              }
 934              return;
 935          }
 936          
 937          // set it on the element if not configured and is an HTML attribute
 938          if ( !this._configs[key] && !YAHOO.lang.isUndefined(el[key]) ) {
 939              this._setHTMLAttrConfig(key);
 940          }
 941  
 942          return AttributeProvider.prototype.set.apply(this, arguments);
 943      },
 944      
 945      setAttributeConfig: function(key, map, init) {
 946          this._configOrder.push(key);
 947          AttributeProvider.prototype.setAttributeConfig.apply(this, arguments);
 948      },
 949  
 950      createEvent: function(type, config) {
 951          this._events[type] = true;
 952          return AttributeProvider.prototype.createEvent.apply(this, arguments);
 953      },
 954      
 955      init: function(el, attr) {
 956          this._initElement(el, attr); 
 957      },
 958  
 959      destroy: function() {
 960          var el = this.get('element');
 961          YAHOO.util.Event.purgeElement(el, true); // purge DOM listeners recursively
 962          this.unsubscribeAll(); // unsubscribe all custom events
 963  
 964          if (el && el.parentNode) {
 965              el.parentNode.removeChild(el); // pull from the DOM
 966          }
 967  
 968          // revert initial configs
 969          this._queue = [];
 970          this._events = {};
 971          this._configs = {};
 972          this._configOrder = []; 
 973      },
 974  
 975      _initElement: function(el, attr) {
 976          this._queue = this._queue || [];
 977          this._events = this._events || {};
 978          this._configs = this._configs || {};
 979          this._configOrder = []; 
 980          attr = attr || {};
 981          attr.element = attr.element || el || null;
 982  
 983          var isReady = false;  // to determine when to init HTMLElement and content
 984  
 985          var DOM_EVENTS = Element.DOM_EVENTS;
 986          this.DOM_EVENTS = this.DOM_EVENTS || {};
 987  
 988          for (var event in DOM_EVENTS) {
 989              if (DOM_EVENTS.hasOwnProperty(event)) {
 990                  this.DOM_EVENTS[event] = DOM_EVENTS[event];
 991              }
 992          }
 993  
 994          if (typeof attr.element === 'string') { // register ID for get() access
 995              this._setHTMLAttrConfig('id', { value: attr.element });
 996          }
 997  
 998          if (Dom.get(attr.element)) {
 999              isReady = true;
1000              this._initHTMLElement(attr);
1001              this._initContent(attr);
1002          }
1003  
1004          YAHOO.util.Event.onAvailable(attr.element, function() {
1005              if (!isReady) { // otherwise already done
1006                  this._initHTMLElement(attr);
1007              }
1008  
1009              this.fireEvent('available', { type: 'available', target: Dom.get(attr.element) });  
1010          }, this, true);
1011          
1012          YAHOO.util.Event.onContentReady(attr.element, function() {
1013              if (!isReady) { // otherwise already done
1014                  this._initContent(attr);
1015              }
1016              this.fireEvent('contentReady', { type: 'contentReady', target: Dom.get(attr.element) });  
1017          }, this, true);
1018      },
1019  
1020      _initHTMLElement: function(attr) {
1021          /**
1022           * The HTMLElement the Element instance refers to.
1023           * @attribute element
1024           * @type HTMLElement
1025           */
1026          this.setAttributeConfig('element', {
1027              value: Dom.get(attr.element),
1028              readOnly: true
1029           });
1030      },
1031  
1032      _initContent: function(attr) {
1033          this.initAttributes(attr);
1034          this.setAttributes(attr, true);
1035          this.fireQueue();
1036  
1037      },
1038  
1039      /**
1040       * Sets the value of the property and fires beforeChange and change events.
1041       * @private
1042       * @method _setHTMLAttrConfig
1043       * @param {YAHOO.util.Element} element The Element instance to
1044       * register the config to.
1045       * @param {String} key The name of the config to register
1046       * @param {Object} map A key-value map of the config's params
1047       */
1048      _setHTMLAttrConfig: function(key, map) {
1049          var el = this.get('element');
1050          map = map || {};
1051          map.name = key;
1052  
1053          map.setter = map.setter || this.DEFAULT_HTML_SETTER;
1054          map.getter = map.getter || this.DEFAULT_HTML_GETTER;
1055  
1056          map.value = map.value || el[key];
1057          this._configs[key] = new YAHOO.util.Attribute(map, this);
1058      }
1059  };
1060  
1061  /**
1062   * Fires when the Element's HTMLElement can be retrieved by Id.
1063   * <p>See: <a href="#addListener">Element.addListener</a></p>
1064   * <p><strong>Event fields:</strong><br>
1065   * <code>&lt;String&gt; type</code> available<br>
1066   * <code>&lt;HTMLElement&gt;
1067   * target</code> the HTMLElement bound to this Element instance<br>
1068   * <p><strong>Usage:</strong><br>
1069   * <code>var handler = function(e) {var target = e.target};<br>
1070   * myTabs.addListener('available', handler);</code></p>
1071   * @event available
1072   */
1073   
1074  /**
1075   * Fires when the Element's HTMLElement subtree is rendered.
1076   * <p>See: <a href="#addListener">Element.addListener</a></p>
1077   * <p><strong>Event fields:</strong><br>
1078   * <code>&lt;String&gt; type</code> contentReady<br>
1079   * <code>&lt;HTMLElement&gt;
1080   * target</code> the HTMLElement bound to this Element instance<br>
1081   * <p><strong>Usage:</strong><br>
1082   * <code>var handler = function(e) {var target = e.target};<br>
1083   * myTabs.addListener('contentReady', handler);</code></p>
1084   * @event contentReady
1085   */
1086  
1087  /**
1088   * Fires before the Element is appended to another Element.
1089   * <p>See: <a href="#addListener">Element.addListener</a></p>
1090   * <p><strong>Event fields:</strong><br>
1091   * <code>&lt;String&gt; type</code> beforeAppendTo<br>
1092   * <code>&lt;HTMLElement/Element&gt;
1093   * target</code> the HTMLElement/Element being appended to 
1094   * <p><strong>Usage:</strong><br>
1095   * <code>var handler = function(e) {var target = e.target};<br>
1096   * myTabs.addListener('beforeAppendTo', handler);</code></p>
1097   * @event beforeAppendTo
1098   */
1099  
1100  /**
1101   * Fires after the Element is appended to another Element.
1102   * <p>See: <a href="#addListener">Element.addListener</a></p>
1103   * <p><strong>Event fields:</strong><br>
1104   * <code>&lt;String&gt; type</code> appendTo<br>
1105   * <code>&lt;HTMLElement/Element&gt;
1106   * target</code> the HTMLElement/Element being appended to 
1107   * <p><strong>Usage:</strong><br>
1108   * <code>var handler = function(e) {var target = e.target};<br>
1109   * myTabs.addListener('appendTo', handler);</code></p>
1110   * @event appendTo
1111   */
1112  
1113  YAHOO.augment(Element, AttributeProvider);
1114  YAHOO.util.Element = Element;
1115  })();
1116  
1117  YAHOO.register("element", YAHOO.util.Element, {version: "2.9.0", build: "2800"});
1118  
1119  }, '2.9.0' ,{"requires": ["yui2-yahoo", "yui2-dom", "yui2-event"], "optional": ["yui2-event-mouseenter", "yui2-event-delegate"]});