include/javascript/yui/build/dom/dom.js

   1 /*
   2 Copyright (c) 2011, Yahoo! Inc. All rights reserved.
   3 Code licensed under the BSD License:
   4 http://developer.yahoo.com/yui/license.html
   5 version: 2.9.0
   6 */
   7 /**
   8  * The dom module provides helper methods for manipulating Dom elements.
   9  * @module dom
  10  *
  11  */
  12
  13 (function() {
  14     // for use with generateId (global to save state if Dom is overwritten)
  15     YAHOO.env._id_counter = YAHOO.env._id_counter || 0;
  16
  17     // internal shorthand
  18     var Y = YAHOO.util,
  19         lang = YAHOO.lang,
  20         UA = YAHOO.env.ua,
  21         trim = YAHOO.lang.trim,
  22         propertyCache = {}, // for faster hyphen converts
  23         reCache = {}, // cache className regexes
  24         RE_TABLE = /^t(?:able|d|h)$/i, // for _calcBorders
  25         RE_COLOR = /color$/i,
  26
  27         // DOM aliases
  28         document = window.document,
  29         documentElement = document.documentElement,
  30
  31         // string constants
  32         OWNER_DOCUMENT = 'ownerDocument',
  33         DEFAULT_VIEW = 'defaultView',
  34         DOCUMENT_ELEMENT = 'documentElement',
  35         COMPAT_MODE = 'compatMode',
  36         OFFSET_LEFT = 'offsetLeft',
  37         OFFSET_TOP = 'offsetTop',
  38         OFFSET_PARENT = 'offsetParent',
  39         PARENT_NODE = 'parentNode',
  40         NODE_TYPE = 'nodeType',
  41         TAG_NAME = 'tagName',
  42         SCROLL_LEFT = 'scrollLeft',
  43         SCROLL_TOP = 'scrollTop',
  44         GET_BOUNDING_CLIENT_RECT = 'getBoundingClientRect',
  45         GET_COMPUTED_STYLE = 'getComputedStyle',
  46         CURRENT_STYLE = 'currentStyle',
  47         CSS1_COMPAT = 'CSS1Compat',
  48         _BACK_COMPAT = 'BackCompat',
  49         _CLASS = 'class', // underscore due to reserved word
  50         CLASS_NAME = 'className',
  51         EMPTY = '',
  52         SPACE = ' ',
  53         C_START = '(?:^|\\s)',
  54         C_END = '(?= |$)',
  55         G = 'g',
  56         POSITION = 'position',
  57         FIXED = 'fixed',
  58         RELATIVE = 'relative',
  59         LEFT = 'left',
  60         TOP = 'top',
  61         MEDIUM = 'medium',
  62         BORDER_LEFT_WIDTH = 'borderLeftWidth',
  63         BORDER_TOP_WIDTH = 'borderTopWidth',
  64
  65     // brower detection
  66         isOpera = UA.opera,
  67         isSafari = UA.webkit,
  68         isGecko = UA.gecko,
  69         isIE = UA.ie;
  70
  71     /**
  72      * Provides helper methods for DOM elements.
  73      * @namespace YAHOO.util
  74      * @class Dom
  75      * @requires yahoo, event
  76      */
  77     Y.Dom = {
  78         CUSTOM_ATTRIBUTES: (!documentElement.hasAttribute) ? { // IE < 8
  79             'for': 'htmlFor',
  80             'class': CLASS_NAME
  81         } : { // w3c
  82             'htmlFor': 'for',
  83             'className': _CLASS
  84         },
  85
  86         DOT_ATTRIBUTES: {
  87             checked: true
  88         },
  89
  90         /**
  91          * Returns an HTMLElement reference.
  92          * @method get
  93          * @param {String | HTMLElement |Array} el Accepts a string to use as an ID for getting a DOM reference, an actual DOM reference, or an Array of IDs and/or HTMLElements.
  94          * @return {HTMLElement | Array} A DOM reference to an HTML element or an array of HTMLElements.
  95          */
  96         get: function(el) {
  97             var id, nodes, c, i, len, attr, ret = null;
  98
  99             if (el) {
 100                 if (typeof el == 'string' || typeof el == 'number') { // id
 101                     id = el + '';
 102                     el = document.getElementById(el);
 103                     attr = (el) ? el.attributes : null;
 104                     if (el && attr && attr.id && attr.id.value === id) { // IE: avoid false match on "name" attribute
 105                         return el;
 106                     } else if (el && document.all) { // filter by name
 107                         el = null;
 108                         nodes = document.all[id];
 109                         if (nodes && nodes.length) {
 110                             for (i = 0, len = nodes.length; i < len; ++i) {
 111                                 if (nodes[i].id === id) {
 112                                     return nodes[i];
 113                                 }
 114                             }
 115                         }
 116                     }
 117                 } else if (Y.Element && el instanceof Y.Element) {
 118                     el = el.get('element');
 119                 } else if (!el.nodeType && 'length' in el) { // array-like
 120                     c = [];
 121                     for (i = 0, len = el.length; i < len; ++i) {
 122                         c[c.length] = Y.Dom.get(el[i]);
 123                     }
 124
 125                     el = c;
 126                 }
 127
 128                 ret = el;
 129             }
 130
 131             return ret;
 132         },
 133
 134         getComputedStyle: function(el, property) {
 135             if (window[GET_COMPUTED_STYLE]) {
 136                 return el[OWNER_DOCUMENT][DEFAULT_VIEW][GET_COMPUTED_STYLE](el, null)[property];
 137             } else if (el[CURRENT_STYLE]) {
 138                 return Y.Dom.IE_ComputedStyle.get(el, property);
 139             }
 140         },
 141
 142         /**
 143          * Normalizes currentStyle and ComputedStyle.
 144          * @method getStyle
 145          * @param {String | HTMLElement |Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements.
 146          * @param {String} property The style property whose value is returned.
 147          * @return {String | Array} The current value of the style property for the element(s).
 148          */
 149         getStyle: function(el, property) {
 150             return Y.Dom.batch(el, Y.Dom._getStyle, property);
 151         },
 152
 153         // branching at load instead of runtime
 154         _getStyle: function() {
 155             if (window[GET_COMPUTED_STYLE]) { // W3C DOM method
 156                 return function(el, property) {
 157                     property = (property === 'float') ? property = 'cssFloat' :
 158                             Y.Dom._toCamel(property);
 159
 160                     var value = el.style[property],
 161                         computed;
 162
 163                     if (!value) {
 164                         computed = el[OWNER_DOCUMENT][DEFAULT_VIEW][GET_COMPUTED_STYLE](el, null);
 165                         if (computed) { // test computed before touching for safari
 166                             value = computed[property];
 167                         }
 168                     }
 169
 170                     return value;
 171                 };
 172             } else if (documentElement[CURRENT_STYLE]) {
 173                 return function(el, property) {
 174                     var value;
 175
 176                     switch(property) {
 177                         case 'opacity' :// IE opacity uses filter
 178                             value = 100;
 179                             try { // will error if no DXImageTransform
 180                                 value = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
 181
 182                             } catch(e) {
 183                                 try { // make sure its in the document
 184                                     value = el.filters('alpha').opacity;
 185                                 } catch(err) {
 186                                 }
 187                             }
 188                             return value / 100;
 189                         case 'float': // fix reserved word
 190                             property = 'styleFloat'; // fall through
 191                         default:
 192                             property = Y.Dom._toCamel(property);
 193                             value = el[CURRENT_STYLE] ? el[CURRENT_STYLE][property] : null;
 194                             return ( el.style[property] || value );
 195                     }
 196                 };
 197             }
 198         }(),
 199
 200         /**
 201          * Wrapper for setting style properties of HTMLElements.  Normalizes "opacity" across modern browsers.
 202          * @method setStyle
 203          * @param {String | HTMLElement | Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements.
 204          * @param {String} property The style property to be set.
 205          * @param {String} val The value to apply to the given property.
 206          */
 207         setStyle: function(el, property, val) {
 208             Y.Dom.batch(el, Y.Dom._setStyle, { prop: property, val: val });
 209         },
 210
 211         _setStyle: function() {
 212             if (!window.getComputedStyle && document.documentElement.currentStyle) {
 213                 return function(el, args) {
 214                     var property = Y.Dom._toCamel(args.prop),
 215                         val = args.val;
 216
 217                     if (el) {
 218                         switch (property) {
 219                             case 'opacity':
 220                                 // remove filter if unsetting or full opacity
 221                                 if (val === '' || val === null || val === 1) {
 222                                     el.style.removeAttribute('filter');
 223                                 } else if ( lang.isString(el.style.filter) ) { // in case not appended
 224                                     el.style.filter = 'alpha(opacity=' + val * 100 + ')';
 225
 226                                     if (!el[CURRENT_STYLE] || !el[CURRENT_STYLE].hasLayout) {
 227                                         el.style.zoom = 1; // when no layout or cant tell
 228                                     }
 229                                 }
 230                                 break;
 231                             case 'float':
 232                                 property = 'styleFloat';
 233                             default:
 234                             el.style[property] = val;
 235                         }
 236                     } else {
 237                     }
 238                 };
 239             } else {
 240                 return function(el, args) {
 241                     var property = Y.Dom._toCamel(args.prop),
 242                         val = args.val;
 243                     if (el) {
 244                         if (property == 'float') {
 245                             property = 'cssFloat';
 246                         }
 247                         el.style[property] = val;
 248                     } else {
 249                     }
 250                 };
 251             }
 252
 253         }(),
 254
 255         /**
 256          * Gets the current position of an element based on page coordinates.
 257          * Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
 258          * @method getXY
 259          * @param {String | HTMLElement | Array} el Accepts a string to use as an ID, an actual DOM
 260          * reference, or an Array of IDs and/or HTMLElements
 261          * @return {Array} The XY position of the element(s)
 262          */
 263         getXY: function(el) {
 264             return Y.Dom.batch(el, Y.Dom._getXY);
 265         },
 266
 267         _canPosition: function(el) {
 268             return ( Y.Dom._getStyle(el, 'display') !== 'none' && Y.Dom._inDoc(el) );
 269         },
 270
 271         _getXY: function(node) {
 272             var scrollLeft, scrollTop, box, doc,
 273                 clientTop, clientLeft,
 274                 round = Math.round, // TODO: round?
 275                 xy = false;
 276
 277             if (Y.Dom._canPosition(node)) {
 278                 box = node[GET_BOUNDING_CLIENT_RECT]();
 279                 doc = node[OWNER_DOCUMENT];
 280                 scrollLeft = Y.Dom.getDocumentScrollLeft(doc);
 281                 scrollTop = Y.Dom.getDocumentScrollTop(doc);
 282                 xy = [box[LEFT], box[TOP]];
 283
 284                 // remove IE default documentElement offset (border)
 285                 if (clientTop || clientLeft) {
 286                     xy[0] -= clientLeft;
 287                     xy[1] -= clientTop;
 288                 }
 289
 290                 if ((scrollTop || scrollLeft)) {
 291                     xy[0] += scrollLeft;
 292                     xy[1] += scrollTop;
 293                 }
 294
 295                 // gecko may return sub-pixel (non-int) values
 296                 xy[0] = round(xy[0]);
 297                 xy[1] = round(xy[1]);
 298             } else {
 299             }
 300
 301             return xy;
 302         },
 303
 304         /**
 305          * Gets the current X position of an element based on page coordinates.  The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
 306          * @method getX
 307          * @param {String | HTMLElement | Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements
 308          * @return {Number | Array} The X position of the element(s)
 309          */
 310         getX: function(el) {
 311             var f = function(el) {
 312                 return Y.Dom.getXY(el)[0];
 313             };
 314
 315             return Y.Dom.batch(el, f, Y.Dom, true);
 316         },
 317
 318         /**
 319          * Gets the current Y position of an element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
 320          * @method getY
 321          * @param {String | HTMLElement | Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements
 322          * @return {Number | Array} The Y position of the element(s)
 323          */
 324         getY: function(el) {
 325             var f = function(el) {
 326                 return Y.Dom.getXY(el)[1];
 327             };
 328
 329             return Y.Dom.batch(el, f, Y.Dom, true);
 330         },
 331
 332         /**
 333          * Set the position of an html element in page coordinates, regardless of how the element is positioned.
 334          * The element(s) must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
 335          * @method setXY
 336          * @param {String | HTMLElement | Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements
 337          * @param {Array} pos Contains X & Y values for new position (coordinates are page-based)
 338          * @param {Boolean} noRetry By default we try and set the position a second time if the first fails
 339          */
 340         setXY: function(el, pos, noRetry) {
 341             Y.Dom.batch(el, Y.Dom._setXY, { pos: pos, noRetry: noRetry });
 342         },
 343
 344         _setXY: function(node, args) {
 345             var pos = Y.Dom._getStyle(node, POSITION),
 346                 setStyle = Y.Dom.setStyle,
 347                 xy = args.pos,
 348                 noRetry = args.noRetry,
 349
 350                 delta = [ // assuming pixels; if not we will have to retry
 351                     parseInt( Y.Dom.getComputedStyle(node, LEFT), 10 ),
 352                     parseInt( Y.Dom.getComputedStyle(node, TOP), 10 )
 353                 ],
 354
 355                 currentXY,
 356                 newXY;
 357
 358             currentXY = Y.Dom._getXY(node);
 359
 360             if (!xy || currentXY === false) { // has to be part of doc to have xy
 361                 return false;
 362             }
 363
 364             if (pos == 'static') { // default to relative
 365                 pos = RELATIVE;
 366                 setStyle(node, POSITION, pos);
 367             }
 368
 369             if ( isNaN(delta[0]) ) {// in case of 'auto'
 370                 delta[0] = (pos == RELATIVE) ? 0 : node[OFFSET_LEFT];
 371             }
 372             if ( isNaN(delta[1]) ) { // in case of 'auto'
 373                 delta[1] = (pos == RELATIVE) ? 0 : node[OFFSET_TOP];
 374             }
 375
 376             if (xy[0] !== null) { // from setX
 377                 setStyle(node, LEFT, xy[0] - currentXY[0] + delta[0] + 'px');
 378             }
 379
 380             if (xy[1] !== null) { // from setY
 381                 setStyle(node, TOP, xy[1] - currentXY[1] + delta[1] + 'px');
 382             }
 383
 384             if (!noRetry) {
 385                 newXY = Y.Dom._getXY(node);
 386
 387                 // if retry is true, try one more time if we miss
 388                if ( (xy[0] !== null && newXY[0] != xy[0]) ||
 389                     (xy[1] !== null && newXY[1] != xy[1]) ) {
 390                    Y.Dom._setXY(node, { pos: xy, noRetry: true });
 391                }
 392             }
 393
 394         },
 395
 396         /**
 397          * Set the X position of an html element in page coordinates, regardless of how the element is positioned.
 398          * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
 399          * @method setX
 400          * @param {String | HTMLElement | Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements.
 401          * @param {Int} x The value to use as the X coordinate for the element(s).
 402          */
 403         setX: function(el, x) {
 404             Y.Dom.setXY(el, [x, null]);
 405         },
 406
 407         /**
 408          * Set the Y position of an html element in page coordinates, regardless of how the element is positioned.
 409          * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
 410          * @method setY
 411          * @param {String | HTMLElement | Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements.
 412          * @param {Int} x To use as the Y coordinate for the element(s).
 413          */
 414         setY: function(el, y) {
 415             Y.Dom.setXY(el, [null, y]);
 416         },
 417
 418         /**
 419          * Returns the region position of the given element.
 420          * The element must be part of the DOM tree to have a region (display:none or elements not appended return false).
 421          * @method getRegion
 422          * @param {String | HTMLElement | Array} el Accepts a string to use as an ID, an actual DOM reference, or an Array of IDs and/or HTMLElements.
 423          * @return {Region | Array} A Region or array of Region instances containing "top, left, bottom, right" member data.
 424          */
 425         getRegion: function(el) {
 426             var f = function(el) {
 427                 var region = false;
 428                 if ( Y.Dom._canPosition(el) ) {
 429                     region = Y.Region.getRegion(el);
 430                 } else {
 431                 }
 432
 433                 return region;
 434             };
 435
 436             return Y.Dom.batch(el, f, Y.Dom, true);
 437         },
 438
 439         /**
 440          * Returns the width of the client (viewport).
 441          * @method getClientWidth
 442          * @deprecated Now using getViewportWidth.  This interface left intact for back compat.
 443          * @return {Int} The width of the viewable area of the page.
 444          */
 445         getClientWidth: function() {
 446             return Y.Dom.getViewportWidth();
 447         },
 448
 449         /**
 450          * Returns the height of the client (viewport).
 451          * @method getClientHeight
 452          * @deprecated Now using getViewportHeight.  This interface left intact for back compat.
 453          * @return {Int} The height of the viewable area of the page.
 454          */
 455         getClientHeight: function() {
 456             return Y.Dom.getViewportHeight();
 457         },
 458
 459         /**
 460          * Returns an array of HTMLElements with the given class.
 461          * For optimized performance, include a tag and/or root node when possible.
 462          * Note: This method operates against a live collection, so modifying the
 463          * collection in the callback (removing/appending nodes, etc.) will have
 464          * side effects.  Instead you should iterate the returned nodes array,
 465          * as you would with the native "getElementsByTagName" method.
 466          * @method getElementsByClassName
 467          * @param {String} className The class name to match against
 468          * @param {String} tag (optional) The tag name of the elements being collected
 469          * @param {String | HTMLElement} root (optional) The HTMLElement or an ID to use as the starting point.
 470          * This element is not included in the className scan.
 471          * @param {Function} apply (optional) A function to apply to each element when found
 472          * @param {Any} o (optional) An optional arg that is passed to the supplied method
 473          * @param {Boolean} overrides (optional) Whether or not to override the scope of "method" with "o"
 474          * @return {Array} An array of elements that have the given class name
 475          */
 476         getElementsByClassName: function(className, tag, root, apply, o, overrides) {
 477             tag = tag || '*';
 478             root = (root) ? Y.Dom.get(root) : null || document;
 479             if (!root) {
 480                 return [];
 481             }
 482
 483             var nodes = [],
 484                 elements = root.getElementsByTagName(tag),
 485                 hasClass = Y.Dom.hasClass;
 486
 487             for (var i = 0, len = elements.length; i < len; ++i) {
 488                 if ( hasClass(elements[i], className) ) {
 489                     nodes[nodes.length] = elements[i];
 490                 }
 491             }
 492
 493             if (apply) {
 494                 Y.Dom.batch(nodes, apply, o, overrides);
 495             }
 496
 497             return nodes;
 498         },
 499
 500         /**
 501          * Determines whether an HTMLElement has the given className.
 502          * @method hasClass
 503          * @param {String | HTMLElement | Array} el The element or collection to test
 504          * @param {String | RegExp} className the class name to search for, or a regular
 505          * expression to match against
 506          * @return {Boolean | Array} A boolean value or array of boolean values
 507          */
 508         hasClass: function(el, className) {
 509             return Y.Dom.batch(el, Y.Dom._hasClass, className);
 510         },
 511
 512         _hasClass: function(el, className) {
 513             var ret = false,
 514                 current;
 515
 516             if (el && className) {
 517                 current = Y.Dom._getAttribute(el, CLASS_NAME) || EMPTY;
 518                 if (current) { // convert line breaks, tabs and other delims to spaces
 519                     current = current.replace(/\s+/g, SPACE);
 520                 }
 521
 522                 if (className.exec) {
 523                     ret = className.test(current);
 524                 } else {
 525                     ret = className && (SPACE + current + SPACE).
 526                         indexOf(SPACE + className + SPACE) > -1;
 527                 }
 528             } else {
 529             }
 530
 531             return ret;
 532         },
 533
 534         /**
 535          * Adds a class name to a given element or collection of elements.
 536          * @method addClass
 537          * @param {String | HTMLElement | Array} el The element or collection to add the class to
 538          * @param {String} className the class name to add to the class attribute
 539          * @return {Boolean | Array} A pass/fail boolean or array of booleans
 540          */
 541         addClass: function(el, className) {
 542             return Y.Dom.batch(el, Y.Dom._addClass, className);
 543         },
 544
 545         _addClass: function(el, className) {
 546             var ret = false,
 547                 current;
 548
 549             if (el && className) {
 550                 current = Y.Dom._getAttribute(el, CLASS_NAME) || EMPTY;
 551                 if ( !Y.Dom._hasClass(el, className) ) {
 552                     Y.Dom.setAttribute(el, CLASS_NAME, trim(current + SPACE + className));
 553                     ret = true;
 554                 }
 555             } else {
 556             }
 557
 558             return ret;
 559         },
 560
 561         /**
 562          * Removes a class name from a given element or collection of elements.
 563          * @method removeClass
 564          * @param {String | HTMLElement | Array} el The element or collection to remove the class from
 565          * @param {String} className the class name to remove from the class attribute
 566          * @return {Boolean | Array} A pass/fail boolean or array of booleans
 567          */
 568         removeClass: function(el, className) {
 569             return Y.Dom.batch(el, Y.Dom._removeClass, className);
 570         },
 571
 572         _removeClass: function(el, className) {
 573             var ret = false,
 574                 current,
 575                 newClass,
 576                 attr;
 577
 578             if (el && className) {
 579                 current = Y.Dom._getAttribute(el, CLASS_NAME) || EMPTY;
 580                 Y.Dom.setAttribute(el, CLASS_NAME, current.replace(Y.Dom._getClassRegex(className), EMPTY));
 581
 582                 newClass = Y.Dom._getAttribute(el, CLASS_NAME);
 583                 if (current !== newClass) { // else nothing changed
 584                     Y.Dom.setAttribute(el, CLASS_NAME, trim(newClass)); // trim after comparing to current class
 585                     ret = true;
 586
 587                     if (Y.Dom._getAttribute(el, CLASS_NAME) === '') { // remove class attribute if empty
 588                         attr = (el.hasAttribute && el.hasAttribute(_CLASS)) ? _CLASS : CLASS_NAME;
 589                         el.removeAttribute(attr);
 590                     }
 591                 }
 592
 593             } else {
 594             }
 595
 596             return ret;
 597         },
 598
 599         /**
 600          * Replace a class with another class for a given element or collection of elements.
 601          * If no oldClassName is present, the newClassName is simply added.
 602          * @method replaceClass
 603          * @param {String | HTMLElement | Array} el The element or collection to remove the class from
 604          * @param {String} oldClassName the class name to be replaced
 605          * @param {String} newClassName the class name that will be replacing the old class name
 606          * @return {Boolean | Array} A pass/fail boolean or array of booleans
 607          */
 608         replaceClass: function(el, oldClassName, newClassName) {
 609             return Y.Dom.batch(el, Y.Dom._replaceClass, { from: oldClassName, to: newClassName });
 610         },
 611
 612         _replaceClass: function(el, classObj) {
 613             var className,
 614                 from,
 615                 to,
 616                 ret = false,
 617                 current;
 618
 619             if (el && classObj) {
 620                 from = classObj.from;
 621                 to = classObj.to;
 622
 623                 if (!to) {
 624                     ret = false;
 625                 }  else if (!from) { // just add if no "from"
 626                     ret = Y.Dom._addClass(el, classObj.to);
 627                 } else if (from !== to) { // else nothing to replace
 628                     // May need to lead with DBLSPACE?
 629                     current = Y.Dom._getAttribute(el, CLASS_NAME) || EMPTY;
 630                     className = (SPACE + current.replace(Y.Dom._getClassRegex(from), SPACE + to).
 631                             replace(/\s+/g, SPACE)). // normalize white space
 632                             split(Y.Dom._getClassRegex(to));
 633
 634                     // insert to into what would have been the first occurrence slot
 635                     className.splice(1, 0, SPACE + to);
 636                     Y.Dom.setAttribute(el, CLASS_NAME, trim(className.join(EMPTY)));
 637                     ret = true;
 638                 }
 639             } else {
 640             }
 641
 642             return ret;
 643         },
 644
 645         /**
 646          * Returns an ID and applies it to the element "el", if provided.
 647          * @method generateId
 648          * @param {String | HTMLElement | Array} el (optional) An optional element array of elements to add an ID to (no ID is added if one is already present).
 649          * @param {String} prefix (optional) an optional prefix to use (defaults to "yui-gen").
 650          * @return {String | Array} The generated ID, or array of generated IDs (or original ID if already present on an element)
 651          */
 652         generateId: function(el, prefix) {
 653             prefix = prefix || 'yui-gen';
 654
 655             var f = function(el) {
 656                 if (el && el.id) { // do not override existing ID
 657                     return el.id;
 658                 }
 659
 660                 var id = prefix + YAHOO.env._id_counter++;
 661
 662                 if (el) {
 663                     if (el[OWNER_DOCUMENT] && el[OWNER_DOCUMENT].getElementById(id)) { // in case one already exists
 664                         // use failed id plus prefix to help ensure uniqueness
 665                         return Y.Dom.generateId(el, id + prefix);
 666                     }
 667                     el.id = id;
 668                 }
 669
 670                 return id;
 671             };
 672
 673             // batch fails when no element, so just generate and return single ID
 674             return Y.Dom.batch(el, f, Y.Dom, true) || f.apply(Y.Dom, arguments);
 675         },
 676
 677         /**
 678          * Determines whether an HTMLElement is an ancestor of another HTML element in the DOM hierarchy.
 679          * @method isAncestor
 680          * @param {String | HTMLElement} haystack The possible ancestor
 681          * @param {String | HTMLElement} needle The possible descendent
 682          * @return {Boolean} Whether or not the haystack is an ancestor of needle
 683          */
 684         isAncestor: function(haystack, needle) {
 685             haystack = Y.Dom.get(haystack);
 686             needle = Y.Dom.get(needle);
 687
 688             var ret = false;
 689
 690             if ( (haystack && needle) && (haystack[NODE_TYPE] && needle[NODE_TYPE]) ) {
 691                 if (haystack.contains && haystack !== needle) { // contains returns true when equal
 692                     ret = haystack.contains(needle);
 693                 }
 694                 else if (haystack.compareDocumentPosition) { // gecko
 695                     ret = !!(haystack.compareDocumentPosition(needle) & 16);
 696                 }
 697             } else {
 698             }
 699             return ret;
 700         },
 701
 702         /**
 703          * Determines whether an HTMLElement is present in the current document.
 704          * @method inDocument
 705          * @param {String | HTMLElement} el The element to search for
 706          * @param {Object} doc An optional document to search, defaults to element's owner document
 707          * @return {Boolean} Whether or not the element is present in the current document
 708          */
 709         inDocument: function(el, doc) {
 710             return Y.Dom._inDoc(Y.Dom.get(el), doc);
 711         },
 712
 713         _inDoc: function(el, doc) {
 714             var ret = false;
 715             if (el && el[TAG_NAME]) {
 716                 doc = doc || el[OWNER_DOCUMENT];
 717                 ret = Y.Dom.isAncestor(doc[DOCUMENT_ELEMENT], el);
 718             } else {
 719             }
 720             return ret;
 721         },
 722
 723         /**
 724          * Returns an array of HTMLElements that pass the test applied by supplied boolean method.
 725          * For optimized performance, include a tag and/or root node when possible.
 726          * Note: This method operates against a live collection, so modifying the
 727          * collection in the callback (removing/appending nodes, etc.) will have
 728          * side effects.  Instead you should iterate the returned nodes array,
 729          * as you would with the native "getElementsByTagName" method.
 730          * @method getElementsBy
 731          * @param {Function} method - A boolean method for testing elements which receives the element as its only argument.
 732          * @param {String} tag (optional) The tag name of the elements being collected
 733          * @param {String | HTMLElement} root (optional) The HTMLElement or an ID to use as the starting point
 734          * @param {Function} apply (optional) A function to apply to each element when found
 735          * @param {Any} o (optional) An optional arg that is passed to the supplied method
 736          * @param {Boolean} overrides (optional) Whether or not to override the scope of "method" with "o"
 737          * @return {Array} Array of HTMLElements
 738          */
 739         getElementsBy: function(method, tag, root, apply, o, overrides, firstOnly) {
 740             tag = tag || '*';
 741             root = (root) ? Y.Dom.get(root) : null || document;
 742
 743                 var ret = (firstOnly) ? null : [],
 744                     elements;
 745
 746             // in case Dom.get() returns null
 747             if (root) {
 748                 elements = root.getElementsByTagName(tag);
 749                 for (var i = 0, len = elements.length; i < len; ++i) {
 750                     if ( method(elements[i]) ) {
 751                         if (firstOnly) {
 752                             ret = elements[i];
 753                             break;
 754                         } else {
 755                             ret[ret.length] = elements[i];
 756                         }
 757                     }
 758                 }
 759
 760                 if (apply) {
 761                     Y.Dom.batch(ret, apply, o, overrides);
 762                 }
 763             }
 764
 765
 766             return ret;
 767         },
 768
 769         /**
 770          * Returns the first HTMLElement that passes the test applied by the supplied boolean method.
 771          * @method getElementBy
 772          * @param {Function} method - A boolean method for testing elements which receives the element as its only argument.
 773          * @param {String} tag (optional) The tag name of the elements being collected
 774          * @param {String | HTMLElement} root (optional) The HTMLElement or an ID to use as the starting point
 775          * @return {HTMLElement}
 776          */
 777         getElementBy: function(method, tag, root) {
 778             return Y.Dom.getElementsBy(method, tag, root, null, null, null, true);
 779         },
 780
 781         /**
 782          * Runs the supplied method against each item in the Collection/Array.
 783          * The method is called with the element(s) as the first arg, and the optional param as the second ( method(el, o) ).
 784          * @method batch
 785          * @param {String | HTMLElement | Array} el (optional) An element or array of elements to apply the method to
 786          * @param {Function} method The method to apply to the element(s)
 787          * @param {Any} o (optional) An optional arg that is passed to the supplied method
 788          * @param {Boolean} overrides (optional) Whether or not to override the scope of "method" with "o"
 789          * @return {Any | Array} The return value(s) from the supplied method
 790          */
 791         batch: function(el, method, o, overrides) {
 792             var collection = [],
 793                 scope = (overrides) ? o : null;
 794
 795             el = (el && (el[TAG_NAME] || el.item)) ? el : Y.Dom.get(el); // skip get() when possible
 796             if (el && method) {
 797                 if (el[TAG_NAME] || el.length === undefined) { // element or not array-like
 798                     return method.call(scope, el, o);
 799                 }
 800
 801                 for (var i = 0; i < el.length; ++i) {
 802                     collection[collection.length] = method.call(scope || el[i], el[i], o);
 803                 }
 804             } else {
 805                 return false;
 806             }
 807             return collection;
 808         },
 809
 810         /**
 811          * Returns the height of the document.
 812          * @method getDocumentHeight
 813          * @return {Int} The height of the actual document (which includes the body and its margin).
 814          */
 815         getDocumentHeight: function() {
 816             var scrollHeight = (document[COMPAT_MODE] != CSS1_COMPAT || isSafari) ? document.body.scrollHeight : documentElement.scrollHeight,
 817                 h = Math.max(scrollHeight, Y.Dom.getViewportHeight());
 818
 819             return h;
 820         },
 821
 822         /**
 823          * Returns the width of the document.
 824          * @method getDocumentWidth
 825          * @return {Int} The width of the actual document (which includes the body and its margin).
 826          */
 827         getDocumentWidth: function() {
 828             var scrollWidth = (document[COMPAT_MODE] != CSS1_COMPAT || isSafari) ? document.body.scrollWidth : documentElement.scrollWidth,
 829                 w = Math.max(scrollWidth, Y.Dom.getViewportWidth());
 830             return w;
 831         },
 832
 833         /**
 834          * Returns the current height of the viewport.
 835          * @method getViewportHeight
 836          * @return {Int} The height of the viewable area of the page (excludes scrollbars).
 837          */
 838         getViewportHeight: function() {
 839             var height = self.innerHeight, // Safari, Opera
 840                 mode = document[COMPAT_MODE];
 841
 842             if ( (mode || isIE) && !isOpera ) { // IE, Gecko
 843                 height = (mode == CSS1_COMPAT) ?
 844                         documentElement.clientHeight : // Standards
 845                         document.body.clientHeight; // Quirks
 846             }
 847
 848             return height;
 849         },
 850
 851         /**
 852          * Returns the current width of the viewport.
 853          * @method getViewportWidth
 854          * @return {Int} The width of the viewable area of the page (excludes scrollbars).
 855          */
 856
 857         getViewportWidth: function() {
 858             var width = self.innerWidth,  // Safari
 859                 mode = document[COMPAT_MODE];
 860
 861             if (mode || isIE) { // IE, Gecko, Opera
 862                 width = (mode == CSS1_COMPAT) ?
 863                         documentElement.clientWidth : // Standards
 864                         document.body.clientWidth; // Quirks
 865             }
 866             return width;
 867         },
 868
 869        /**
 870          * Returns the nearest ancestor that passes the test applied by supplied boolean method.
 871          * For performance reasons, IDs are not accepted and argument validation omitted.
 872          * @method getAncestorBy
 873          * @param {HTMLElement} node The HTMLElement to use as the starting point
 874          * @param {Function} method - A boolean method for testing elements which receives the element as its only argument.
 875          * @return {Object} HTMLElement or null if not found
 876          */
 877         getAncestorBy: function(node, method) {
 878             while ( (node = node[PARENT_NODE]) ) { // NOTE: assignment
 879                 if ( Y.Dom._testElement(node, method) ) {
 880                     return node;
 881                 }
 882             }
 883
 884             return null;
 885         },
 886
 887         /**
 888          * Returns the nearest ancestor with the given className.
 889          * @method getAncestorByClassName
 890          * @param {String | HTMLElement} node The HTMLElement or an ID to use as the starting point
 891          * @param {String} className
 892          * @return {Object} HTMLElement
 893          */
 894         getAncestorByClassName: function(node, className) {
 895             node = Y.Dom.get(node);
 896             if (!node) {
 897                 return null;
 898             }
 899             var method = function(el) { return Y.Dom.hasClass(el, className); };
 900             return Y.Dom.getAncestorBy(node, method);
 901         },
 902
 903         /**
 904          * Returns the nearest ancestor with the given tagName.
 905          * @method getAncestorByTagName
 906          * @param {String | HTMLElement} node The HTMLElement or an ID to use as the starting point
 907          * @param {String} tagName
 908          * @return {Object} HTMLElement
 909          */
 910         getAncestorByTagName: function(node, tagName) {
 911             node = Y.Dom.get(node);
 912             if (!node) {
 913                 return null;
 914             }
 915             var method = function(el) {
 916                  return el[TAG_NAME] && el[TAG_NAME].toUpperCase() == tagName.toUpperCase();
 917             };
 918
 919             return Y.Dom.getAncestorBy(node, method);
 920         },
 921
 922         /**
 923          * Returns the previous sibling that is an HTMLElement.
 924          * For performance reasons, IDs are not accepted and argument validation omitted.
 925          * Returns the nearest HTMLElement sibling if no method provided.
 926          * @method getPreviousSiblingBy
 927          * @param {HTMLElement} node The HTMLElement to use as the starting point
 928          * @param {Function} method A boolean function used to test siblings
 929          * that receives the sibling node being tested as its only argument
 930          * @return {Object} HTMLElement or null if not found
 931          */
 932         getPreviousSiblingBy: function(node, method) {
 933             while (node) {
 934                 node = node.previousSibling;
 935                 if ( Y.Dom._testElement(node, method) ) {
 936                     return node;
 937                 }
 938             }
 939             return null;
 940         },
 941
 942         /**
 943          * Returns the previous sibling that is an HTMLElement
 944          * @method getPreviousSibling
 945          * @param {String | HTMLElement} node The HTMLElement or an ID to use as the starting point
 946          * @return {Object} HTMLElement or null if not found
 947          */
 948         getPreviousSibling: function(node) {
 949             node = Y.Dom.get(node);
 950             if (!node) {
 951                 return null;
 952             }
 953
 954             return Y.Dom.getPreviousSiblingBy(node);
 955         },
 956
 957         /**
 958          * Returns the next HTMLElement sibling that passes the boolean method.
 959          * For performance reasons, IDs are not accepted and argument validation omitted.
 960          * Returns the nearest HTMLElement sibling if no method provided.
 961          * @method getNextSiblingBy
 962          * @param {HTMLElement} node The HTMLElement to use as the starting point
 963          * @param {Function} method A boolean function used to test siblings
 964          * that receives the sibling node being tested as its only argument
 965          * @return {Object} HTMLElement or null if not found
 966          */
 967         getNextSiblingBy: function(node, method) {
 968             while (node) {
 969                 node = node.nextSibling;
 970                 if ( Y.Dom._testElement(node, method) ) {
 971                     return node;
 972                 }
 973             }
 974             return null;
 975         },
 976
 977         /**
 978          * Returns the next sibling that is an HTMLElement
 979          * @method getNextSibling
 980          * @param {String | HTMLElement} node The HTMLElement or an ID to use as the starting point
 981          * @return {Object} HTMLElement or null if not found
 982          */
 983         getNextSibling: function(node) {
 984             node = Y.Dom.get(node);
 985             if (!node) {
 986                 return null;
 987             }
 988
 989             return Y.Dom.getNextSiblingBy(node);
 990         },
 991
 992         /**
 993          * Returns the first HTMLElement child that passes the test method.
 994          * @method getFirstChildBy
 995          * @param {HTMLElement} node The HTMLElement to use as the starting point
 996          * @param {Function} method A boolean function used to test children
 997          * that receives the node being tested as its only argument
 998          * @return {Object} HTMLElement or null if not found
 999          */
1000         getFirstChildBy: function(node, method) {
1001             var child = ( Y.Dom._testElement(node.firstChild, method) ) ? node.firstChild : null;
1002             return child || Y.Dom.getNextSiblingBy(node.firstChild, method);
1003         },
1004
1005         /**
1006          * Returns the first HTMLElement child.
1007          * @method getFirstChild
1008          * @param {String | HTMLElement} node The HTMLElement or an ID to use as the starting point
1009          * @return {Object} HTMLElement or null if not found
1010          */
1011         getFirstChild: function(node, method) {
1012             node = Y.Dom.get(node);
1013             if (!node) {
1014                 return null;
1015             }
1016             return Y.Dom.getFirstChildBy(node);
1017         },
1018
1019         /**
1020          * Returns the last HTMLElement child that passes the test method.
1021          * @method getLastChildBy
1022          * @param {HTMLElement} node The HTMLElement to use as the starting point
1023          * @param {Function} method A boolean function used to test children
1024          * that receives the node being tested as its only argument
1025          * @return {Object} HTMLElement or null if not found
1026          */
1027         getLastChildBy: function(node, method) {
1028             if (!node) {
1029                 return null;
1030             }
1031             var child = ( Y.Dom._testElement(node.lastChild, method) ) ? node.lastChild : null;
1032             return child || Y.Dom.getPreviousSiblingBy(node.lastChild, method);
1033         },
1034
1035         /**
1036          * Returns the last HTMLElement child.
1037          * @method getLastChild
1038          * @param {String | HTMLElement} node The HTMLElement or an ID to use as the starting point
1039          * @return {Object} HTMLElement or null if not found
1040          */
1041         getLastChild: function(node) {
1042             node = Y.Dom.get(node);
1043             return Y.Dom.getLastChildBy(node);
1044         },
1045
1046         /**
1047          * Returns an array of HTMLElement childNodes that pass the test method.
1048          * @method getChildrenBy
1049          * @param {HTMLElement} node The HTMLElement to start from
1050          * @param {Function} method A boolean function used to test children
1051          * that receives the node being tested as its only argument
1052          * @return {Array} A static array of HTMLElements
1053          */
1054         getChildrenBy: function(node, method) {
1055             var child = Y.Dom.getFirstChildBy(node, method),
1056                 children = child ? [child] : [];
1057
1058             Y.Dom.getNextSiblingBy(child, function(node) {
1059                 if ( !method || method(node) ) {
1060                     children[children.length] = node;
1061                 }
1062                 return false; // fail test to collect all children
1063             });
1064
1065             return children;
1066         },
1067
1068         /**
1069          * Returns an array of HTMLElement childNodes.
1070          * @method getChildren
1071          * @param {String | HTMLElement} node The HTMLElement or an ID to use as the starting point
1072          * @return {Array} A static array of HTMLElements
1073          */
1074         getChildren: function(node) {
1075             node = Y.Dom.get(node);
1076             if (!node) {
1077             }
1078
1079             return Y.Dom.getChildrenBy(node);
1080         },
1081
1082         /**
1083          * Returns the left scroll value of the document
1084          * @method getDocumentScrollLeft
1085          * @param {HTMLDocument} document (optional) The document to get the scroll value of
1086          * @return {Int}  The amount that the document is scrolled to the left
1087          */
1088         getDocumentScrollLeft: function(doc) {
1089             doc = doc || document;
1090             return Math.max(doc[DOCUMENT_ELEMENT].scrollLeft, doc.body.scrollLeft);
1091         },
1092
1093         /**
1094          * Returns the top scroll value of the document
1095          * @method getDocumentScrollTop
1096          * @param {HTMLDocument} document (optional) The document to get the scroll value of
1097          * @return {Int}  The amount that the document is scrolled to the top
1098          */
1099         getDocumentScrollTop: function(doc) {
1100             doc = doc || document;
1101             return Math.max(doc[DOCUMENT_ELEMENT].scrollTop, doc.body.scrollTop);
1102         },
1103
1104         /**
1105          * Inserts the new node as the previous sibling of the reference node
1106          * @method insertBefore
1107          * @param {String | HTMLElement} newNode The node to be inserted
1108          * @param {String | HTMLElement} referenceNode The node to insert the new node before
1109          * @return {HTMLElement} The node that was inserted (or null if insert fails)
1110          */
1111         insertBefore: function(newNode, referenceNode) {
1112             newNode = Y.Dom.get(newNode);
1113             referenceNode = Y.Dom.get(referenceNode);
1114
1115             if (!newNode || !referenceNode || !referenceNode[PARENT_NODE]) {
1116                 return null;
1117             }
1118
1119             return referenceNode[PARENT_NODE].insertBefore(newNode, referenceNode);
1120         },
1121
1122         /**
1123          * Inserts the new node as the next sibling of the reference node
1124          * @method insertAfter
1125          * @param {String | HTMLElement} newNode The node to be inserted
1126          * @param {String | HTMLElement} referenceNode The node to insert the new node after
1127          * @return {HTMLElement} The node that was inserted (or null if insert fails)
1128          */
1129         insertAfter: function(newNode, referenceNode) {
1130             newNode = Y.Dom.get(newNode);
1131             referenceNode = Y.Dom.get(referenceNode);
1132
1133             if (!newNode || !referenceNode || !referenceNode[PARENT_NODE]) {
1134                 return null;
1135             }
1136
1137             if (referenceNode.nextSibling) {
1138                 return referenceNode[PARENT_NODE].insertBefore(newNode, referenceNode.nextSibling);
1139             } else {
1140                 return referenceNode[PARENT_NODE].appendChild(newNode);
1141             }
1142         },
1143
1144         /**
1145          * Creates a Region based on the viewport relative to the document.
1146          * @method getClientRegion
1147          * @return {Region} A Region object representing the viewport which accounts for document scroll
1148          */
1149         getClientRegion: function() {
1150             var t = Y.Dom.getDocumentScrollTop(),
1151                 l = Y.Dom.getDocumentScrollLeft(),
1152                 r = Y.Dom.getViewportWidth() + l,
1153                 b = Y.Dom.getViewportHeight() + t;
1154
1155             return new Y.Region(t, r, b, l);
1156         },
1157
1158         /**
1159          * Provides a normalized attribute interface.
1160          * @method setAttribute
1161          * @param {String | HTMLElement} el The target element for the attribute.
1162          * @param {String} attr The attribute to set.
1163          * @param {String} val The value of the attribute.
1164          */
1165         setAttribute: function(el, attr, val) {
1166             Y.Dom.batch(el, Y.Dom._setAttribute, { attr: attr, val: val });
1167         },
1168
1169         _setAttribute: function(el, args) {
1170             var attr = Y.Dom._toCamel(args.attr),
1171                 val = args.val;
1172
1173             if (el && el.setAttribute) {
1174                 // set as DOM property, except for BUTTON, which errors on property setter
1175                 if (Y.Dom.DOT_ATTRIBUTES[attr] && el.tagName && el.tagName != 'BUTTON') {
1176                     el[attr] = val;
1177                 } else {
1178                     attr = Y.Dom.CUSTOM_ATTRIBUTES[attr] || attr;
1179                     el.setAttribute(attr, val);
1180                 }
1181             } else {
1182             }
1183         },
1184
1185         /**
1186          * Provides a normalized attribute interface.
1187          * @method getAttribute
1188          * @param {String | HTMLElement} el The target element for the attribute.
1189          * @param {String} attr The attribute to get.
1190          * @return {String} The current value of the attribute.
1191          */
1192         getAttribute: function(el, attr) {
1193             return Y.Dom.batch(el, Y.Dom._getAttribute, attr);
1194         },
1195
1196
1197         _getAttribute: function(el, attr) {
1198             var val;
1199             attr = Y.Dom.CUSTOM_ATTRIBUTES[attr] || attr;
1200
1201             if (Y.Dom.DOT_ATTRIBUTES[attr]) {
1202                 val = el[attr];
1203             } else if (el && 'getAttribute' in el) {
1204                 if (/^(?:href|src)$/.test(attr)) { // use IE flag to return exact value
1205                     val = el.getAttribute(attr, 2);
1206                 } else {
1207                     val = el.getAttribute(attr);
1208                 }
1209             } else {
1210             }
1211
1212             return val;
1213         },
1214
1215         _toCamel: function(property) {
1216             var c = propertyCache;
1217
1218             function tU(x,l) {
1219                 return l.toUpperCase();
1220             }
1221
1222             return c[property] || (c[property] = property.indexOf('-') === -1 ?
1223                                     property :
1224                                     property.replace( /-([a-z])/gi, tU ));
1225         },
1226
1227         _getClassRegex: function(className) {
1228             var re;
1229             if (className !== undefined) { // allow empty string to pass
1230                 if (className.exec) { // already a RegExp
1231                     re = className;
1232                 } else {
1233                     re = reCache[className];
1234                     if (!re) {
1235                         // escape special chars (".", "[", etc.)
1236                         className = className.replace(Y.Dom._patterns.CLASS_RE_TOKENS, '\\$1');
1237                         className = className.replace(/\s+/g, SPACE); // convert line breaks and other delims
1238                         re = reCache[className] = new RegExp(C_START + className + C_END, G);
1239                     }
1240                 }
1241             }
1242             return re;
1243         },
1244
1245         _patterns: {
1246             ROOT_TAG: /^body|html$/i, // body for quirks mode, html for standards,
1247             CLASS_RE_TOKENS: /([\.\(\)\^\$\*\+\?\|\[\]\{\}\\])/g
1248         },
1249
1250
1251         _testElement: function(node, method) {
1252             return node && node[NODE_TYPE] == 1 && ( !method || method(node) );
1253         },
1254
1255         _calcBorders: function(node, xy2) {
1256             var t = parseInt(Y.Dom[GET_COMPUTED_STYLE](node, BORDER_TOP_WIDTH), 10) || 0,
1257                 l = parseInt(Y.Dom[GET_COMPUTED_STYLE](node, BORDER_LEFT_WIDTH), 10) || 0;
1258             if (isGecko) {
1259                 if (RE_TABLE.test(node[TAG_NAME])) {
1260                     t = 0;
1261                     l = 0;
1262                 }
1263             }
1264             xy2[0] += l;
1265             xy2[1] += t;
1266             return xy2;
1267         }
1268     };
1269
1270     var _getComputedStyle = Y.Dom[GET_COMPUTED_STYLE];
1271     // fix opera computedStyle default color unit (convert to rgb)
1272     if (UA.opera) {
1273         Y.Dom[GET_COMPUTED_STYLE] = function(node, att) {
1274             var val = _getComputedStyle(node, att);
1275             if (RE_COLOR.test(att)) {
1276                 val = Y.Dom.Color.toRGB(val);
1277             }
1278
1279             return val;
1280         };
1281
1282     }
1283
1284     // safari converts transparent to rgba(), others use "transparent"
1285     if (UA.webkit) {
1286         Y.Dom[GET_COMPUTED_STYLE] = function(node, att) {
1287             var val = _getComputedStyle(node, att);
1288
1289             if (val === 'rgba(0, 0, 0, 0)') {
1290                 val = 'transparent';
1291             }
1292
1293             return val;
1294         };
1295
1296     }
1297
1298     if (UA.ie && UA.ie >= 8) {
1299         Y.Dom.DOT_ATTRIBUTES.type = true; // IE 8 errors on input.setAttribute('type')
1300     }
1301 })();
1302 /**
1303  * A region is a representation of an object on a grid.  It is defined
1304  * by the top, right, bottom, left extents, so is rectangular by default.  If
1305  * other shapes are required, this class could be extended to support it.
1306  * @namespace YAHOO.util
1307  * @class Region
1308  * @param {Int} t the top extent
1309  * @param {Int} r the right extent
1310  * @param {Int} b the bottom extent
1311  * @param {Int} l the left extent
1312  * @constructor
1313  */
1314 YAHOO.util.Region = function(t, r, b, l) {
1315
1316     /**
1317      * The region's top extent
1318      * @property top
1319      * @type Int
1320      */
1321     this.top = t;
1322
1323     /**
1324      * The region's top extent
1325      * @property y
1326      * @type Int
1327      */
1328     this.y = t;
1329
1330     /**
1331      * The region's top extent as index, for symmetry with set/getXY
1332      * @property 1
1333      * @type Int
1334      */
1335     this[1] = t;
1336
1337     /**
1338      * The region's right extent
1339      * @property right
1340      * @type int
1341      */
1342     this.right = r;
1343
1344     /**
1345      * The region's bottom extent
1346      * @property bottom
1347      * @type Int
1348      */
1349     this.bottom = b;
1350
1351     /**
1352      * The region's left extent
1353      * @property left
1354      * @type Int
1355      */
1356     this.left = l;
1357
1358     /**
1359      * The region's left extent
1360      * @property x
1361      * @type Int
1362      */
1363     this.x = l;
1364
1365     /**
1366      * The region's left extent as index, for symmetry with set/getXY
1367      * @property 0
1368      * @type Int
1369      */
1370     this[0] = l;
1371
1372     /**
1373      * The region's total width
1374      * @property width
1375      * @type Int
1376      */
1377     this.width = this.right - this.left;
1378
1379     /**
1380      * The region's total height
1381      * @property height
1382      * @type Int
1383      */
1384     this.height = this.bottom - this.top;
1385 };
1386
1387 /**
1388  * Returns true if this region contains the region passed in
1389  * @method contains
1390  * @param  {Region}  region The region to evaluate
1391  * @return {Boolean}        True if the region is contained with this region,
1392  *                          else false
1393  */
1394 YAHOO.util.Region.prototype.contains = function(region) {
1395     return ( region.left   >= this.left   &&
1396              region.right  <= this.right  &&
1397              region.top    >= this.top    &&
1398              region.bottom <= this.bottom    );
1399
1400 };
1401
1402 /**
1403  * Returns the area of the region
1404  * @method getArea
1405  * @return {Int} the region's area
1406  */
1407 YAHOO.util.Region.prototype.getArea = function() {
1408     return ( (this.bottom - this.top) * (this.right - this.left) );
1409 };
1410
1411 /**
1412  * Returns the region where the passed in region overlaps with this one
1413  * @method intersect
1414  * @param  {Region} region The region that intersects
1415  * @return {Region}        The overlap region, or null if there is no overlap
1416  */
1417 YAHOO.util.Region.prototype.intersect = function(region) {
1418     var t = Math.max( this.top,    region.top    ),
1419         r = Math.min( this.right,  region.right  ),
1420         b = Math.min( this.bottom, region.bottom ),
1421         l = Math.max( this.left,   region.left   );
1422
1423     if (b >= t && r >= l) {
1424         return new YAHOO.util.Region(t, r, b, l);
1425     } else {
1426         return null;
1427     }
1428 };
1429
1430 /**
1431  * Returns the region representing the smallest region that can contain both
1432  * the passed in region and this region.
1433  * @method union
1434  * @param  {Region} region The region that to create the union with
1435  * @return {Region}        The union region
1436  */
1437 YAHOO.util.Region.prototype.union = function(region) {
1438     var t = Math.min( this.top,    region.top    ),
1439         r = Math.max( this.right,  region.right  ),
1440         b = Math.max( this.bottom, region.bottom ),
1441         l = Math.min( this.left,   region.left   );
1442
1443     return new YAHOO.util.Region(t, r, b, l);
1444 };
1445
1446 /**
1447  * toString
1448  * @method toString
1449  * @return string the region properties
1450  */
1451 YAHOO.util.Region.prototype.toString = function() {
1452     return ( "Region {"    +
1453              "top: "       + this.top    +
1454              ", right: "   + this.right  +
1455              ", bottom: "  + this.bottom +
1456              ", left: "    + this.left   +
1457              ", height: "  + this.height +
1458              ", width: "    + this.width   +
1459              "}" );
1460 };
1461
1462 /**
1463  * Returns a region that is occupied by the DOM element
1464  * @method getRegion
1465  * @param  {HTMLElement} el The element
1466  * @return {Region}         The region that the element occupies
1467  * @static
1468  */
1469 YAHOO.util.Region.getRegion = function(el) {
1470     var p = YAHOO.util.Dom.getXY(el),
1471         t = p[1],
1472         r = p[0] + el.offsetWidth,
1473         b = p[1] + el.offsetHeight,
1474         l = p[0];
1475
1476     return new YAHOO.util.Region(t, r, b, l);
1477 };
1478
1479 /////////////////////////////////////////////////////////////////////////////
1480
1481
1482 /**
1483  * A point is a region that is special in that it represents a single point on
1484  * the grid.
1485  * @namespace YAHOO.util
1486  * @class Point
1487  * @param {Int} x The X position of the point
1488  * @param {Int} y The Y position of the point
1489  * @constructor
1490  * @extends YAHOO.util.Region
1491  */
1492 YAHOO.util.Point = function(x, y) {
1493    if (YAHOO.lang.isArray(x)) { // accept input from Dom.getXY, Event.getXY, etc.
1494       y = x[1]; // dont blow away x yet
1495       x = x[0];
1496    }
1497
1498     YAHOO.util.Point.superclass.constructor.call(this, y, x, y, x);
1499 };
1500
1501 YAHOO.extend(YAHOO.util.Point, YAHOO.util.Region);
1502
1503 (function() {
1504 /**
1505  * Internal methods used to add style management functionality to DOM.
1506  * @module dom
1507  * @class IEStyle
1508  * @namespace YAHOO.util.Dom
1509  */
1510
1511 var Y = YAHOO.util,
1512     CLIENT_TOP = 'clientTop',
1513     CLIENT_LEFT = 'clientLeft',
1514     PARENT_NODE = 'parentNode',
1515     RIGHT = 'right',
1516     HAS_LAYOUT = 'hasLayout',
1517     PX = 'px',
1518     OPACITY = 'opacity',
1519     AUTO = 'auto',
1520     BORDER_LEFT_WIDTH = 'borderLeftWidth',
1521     BORDER_TOP_WIDTH = 'borderTopWidth',
1522     BORDER_RIGHT_WIDTH = 'borderRightWidth',
1523     BORDER_BOTTOM_WIDTH = 'borderBottomWidth',
1524     VISIBLE = 'visible',
1525     TRANSPARENT = 'transparent',
1526     HEIGHT = 'height',
1527     WIDTH = 'width',
1528     STYLE = 'style',
1529     CURRENT_STYLE = 'currentStyle',
1530
1531 // IE getComputedStyle
1532 // TODO: unit-less lineHeight (e.g. 1.22)
1533     re_size = /^width|height$/,
1534     re_unit = /^(\d[.\d]*)+(em|ex|px|gd|rem|vw|vh|vm|ch|mm|cm|in|pt|pc|deg|rad|ms|s|hz|khz|%){1}?/i,
1535
1536     ComputedStyle = {
1537         /**
1538         * @method get
1539         * @description Method used by DOM to get style information for IE
1540         * @param {HTMLElement} el The element to check
1541         * @param {String} property The property to check
1542         * @returns {String} The computed style
1543         */
1544         get: function(el, property) {
1545             var value = '',
1546                 current = el[CURRENT_STYLE][property];
1547
1548             if (property === OPACITY) {
1549                 value = Y.Dom.getStyle(el, OPACITY);
1550             } else if (!current || (current.indexOf && current.indexOf(PX) > -1)) { // no need to convert
1551                 value = current;
1552             } else if (Y.Dom.IE_COMPUTED[property]) { // use compute function
1553                 value = Y.Dom.IE_COMPUTED[property](el, property);
1554             } else if (re_unit.test(current)) { // convert to pixel
1555                 value = Y.Dom.IE.ComputedStyle.getPixel(el, property);
1556             } else {
1557                 value = current;
1558             }
1559
1560             return value;
1561         },
1562         /**
1563         * @method getOffset
1564         * @description Determine the offset of an element
1565         * @param {HTMLElement} el The element to check
1566         * @param {String} prop The property to check.
1567         * @return {String} The offset
1568         */
1569         getOffset: function(el, prop) {
1570             var current = el[CURRENT_STYLE][prop],                        // value of "width", "top", etc.
1571                 capped = prop.charAt(0).toUpperCase() + prop.substr(1), // "Width", "Top", etc.
1572                 offset = 'offset' + capped,                             // "offsetWidth", "offsetTop", etc.
1573                 pixel = 'pixel' + capped,                               // "pixelWidth", "pixelTop", etc.
1574                 value = '',
1575                 actual;
1576
1577             if (current == AUTO) {
1578                 actual = el[offset]; // offsetHeight/Top etc.
1579                 if (actual === undefined) { // likely "right" or "bottom"
1580                     value = 0;
1581                 }
1582
1583                 value = actual;
1584                 if (re_size.test(prop)) { // account for box model diff
1585                     el[STYLE][prop] = actual;
1586                     if (el[offset] > actual) {
1587                         // the difference is padding + border (works in Standards & Quirks modes)
1588                         value = actual - (el[offset] - actual);
1589                     }
1590                     el[STYLE][prop] = AUTO; // revert to auto
1591                 }
1592             } else { // convert units to px
1593                 if (!el[STYLE][pixel] && !el[STYLE][prop]) { // need to map style.width to currentStyle (no currentStyle.pixelWidth)
1594                     el[STYLE][prop] = current;              // no style.pixelWidth if no style.width
1595                 }
1596                 value = el[STYLE][pixel];
1597             }
1598             return value + PX;
1599         },
1600         /**
1601         * @method getBorderWidth
1602         * @description Try to determine the width of an elements border
1603         * @param {HTMLElement} el The element to check
1604         * @param {String} property The property to check
1605         * @return {String} The elements border width
1606         */
1607         getBorderWidth: function(el, property) {
1608             // clientHeight/Width = paddingBox (e.g. offsetWidth - borderWidth)
1609             // clientTop/Left = borderWidth
1610             var value = null;
1611             if (!el[CURRENT_STYLE][HAS_LAYOUT]) { // TODO: unset layout?
1612                 el[STYLE].zoom = 1; // need layout to measure client
1613             }
1614
1615             switch(property) {
1616                 case BORDER_TOP_WIDTH:
1617                     value = el[CLIENT_TOP];
1618                     break;
1619                 case BORDER_BOTTOM_WIDTH:
1620                     value = el.offsetHeight - el.clientHeight - el[CLIENT_TOP];
1621                     break;
1622                 case BORDER_LEFT_WIDTH:
1623                     value = el[CLIENT_LEFT];
1624                     break;
1625                 case BORDER_RIGHT_WIDTH:
1626                     value = el.offsetWidth - el.clientWidth - el[CLIENT_LEFT];
1627                     break;
1628             }
1629             return value + PX;
1630         },
1631         /**
1632         * @method getPixel
1633         * @description Get the pixel value from a style property
1634         * @param {HTMLElement} node The element to check
1635         * @param {String} att The attribute to check
1636         * @return {String} The pixel value
1637         */
1638         getPixel: function(node, att) {
1639             // use pixelRight to convert to px
1640             var val = null,
1641                 styleRight = node[CURRENT_STYLE][RIGHT],
1642                 current = node[CURRENT_STYLE][att];
1643
1644             node[STYLE][RIGHT] = current;
1645             val = node[STYLE].pixelRight;
1646             node[STYLE][RIGHT] = styleRight; // revert
1647
1648             return val + PX;
1649         },
1650
1651         /**
1652         * @method getMargin
1653         * @description Get the margin value from a style property
1654         * @param {HTMLElement} node The element to check
1655         * @param {String} att The attribute to check
1656         * @return {String} The margin value
1657         */
1658         getMargin: function(node, att) {
1659             var val;
1660             if (node[CURRENT_STYLE][att] == AUTO) {
1661                 val = 0 + PX;
1662             } else {
1663                 val = Y.Dom.IE.ComputedStyle.getPixel(node, att);
1664             }
1665             return val;
1666         },
1667
1668         /**
1669         * @method getVisibility
1670         * @description Get the visibility of an element
1671         * @param {HTMLElement} node The element to check
1672         * @param {String} att The attribute to check
1673         * @return {String} The value
1674         */
1675         getVisibility: function(node, att) {
1676             var current;
1677             while ( (current = node[CURRENT_STYLE]) && current[att] == 'inherit') { // NOTE: assignment in test
1678                 node = node[PARENT_NODE];
1679             }
1680             return (current) ? current[att] : VISIBLE;
1681         },
1682
1683         /**
1684         * @method getColor
1685         * @description Get the color of an element
1686         * @param {HTMLElement} node The element to check
1687         * @param {String} att The attribute to check
1688         * @return {String} The value
1689         */
1690         getColor: function(node, att) {
1691             return Y.Dom.Color.toRGB(node[CURRENT_STYLE][att]) || TRANSPARENT;
1692         },
1693
1694         /**
1695         * @method getBorderColor
1696         * @description Get the bordercolor of an element
1697         * @param {HTMLElement} node The element to check
1698         * @param {String} att The attribute to check
1699         * @return {String} The value
1700         */
1701         getBorderColor: function(node, att) {
1702             var current = node[CURRENT_STYLE],
1703                 val = current[att] || current.color;
1704             return Y.Dom.Color.toRGB(Y.Dom.Color.toHex(val));
1705         }
1706
1707     },
1708
1709 //fontSize: getPixelFont,
1710     IEComputed = {};
1711
1712 IEComputed.top = IEComputed.right = IEComputed.bottom = IEComputed.left =
1713         IEComputed[WIDTH] = IEComputed[HEIGHT] = ComputedStyle.getOffset;
1714
1715 IEComputed.color = ComputedStyle.getColor;
1716
1717 IEComputed[BORDER_TOP_WIDTH] = IEComputed[BORDER_RIGHT_WIDTH] =
1718         IEComputed[BORDER_BOTTOM_WIDTH] = IEComputed[BORDER_LEFT_WIDTH] =
1719         ComputedStyle.getBorderWidth;
1720
1721 IEComputed.marginTop = IEComputed.marginRight = IEComputed.marginBottom =
1722         IEComputed.marginLeft = ComputedStyle.getMargin;
1723
1724 IEComputed.visibility = ComputedStyle.getVisibility;
1725 IEComputed.borderColor = IEComputed.borderTopColor =
1726         IEComputed.borderRightColor = IEComputed.borderBottomColor =
1727         IEComputed.borderLeftColor = ComputedStyle.getBorderColor;
1728
1729 Y.Dom.IE_COMPUTED = IEComputed;
1730 Y.Dom.IE_ComputedStyle = ComputedStyle;
1731 })();
1732 (function() {
1733 /**
1734  * Add style management functionality to DOM.
1735  * @module dom
1736  * @class Color
1737  * @namespace YAHOO.util.Dom
1738  */
1739
1740 var TO_STRING = 'toString',
1741     PARSE_INT = parseInt,
1742     RE = RegExp,
1743     Y = YAHOO.util;
1744
1745 Y.Dom.Color = {
1746     /**
1747     * @property KEYWORDS
1748     * @type Object
1749     * @description Color keywords used when converting to Hex
1750     */
1751     KEYWORDS: {
1752         black: '000',
1753         silver: 'c0c0c0',
1754         gray: '808080',
1755         white: 'fff',
1756         maroon: '800000',
1757         red: 'f00',
1758         purple: '800080',
1759         fuchsia: 'f0f',
1760         green: '008000',
1761         lime: '0f0',
1762         olive: '808000',
1763         yellow: 'ff0',
1764         navy: '000080',
1765         blue: '00f',
1766         teal: '008080',
1767         aqua: '0ff'
1768     },
1769     /**
1770     * @property re_RGB
1771     * @private
1772     * @type Regex
1773     * @description Regex to parse rgb(0,0,0) formatted strings
1774     */
1775     re_RGB: /^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i,
1776     /**
1777     * @property re_hex
1778     * @private
1779     * @type Regex
1780     * @description Regex to parse #123456 formatted strings
1781     */
1782     re_hex: /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i,
1783     /**
1784     * @property re_hex3
1785     * @private
1786     * @type Regex
1787     * @description Regex to parse #123 formatted strings
1788     */
1789     re_hex3: /([0-9A-F])/gi,
1790     /**
1791     * @method toRGB
1792     * @description Converts a hex or color string to an rgb string: rgb(0,0,0)
1793     * @param {String} val The string to convert to RGB notation.
1794     * @returns {String} The converted string
1795     */
1796     toRGB: function(val) {
1797         if (!Y.Dom.Color.re_RGB.test(val)) {
1798             val = Y.Dom.Color.toHex(val);
1799         }
1800
1801         if(Y.Dom.Color.re_hex.exec(val)) {
1802             val = 'rgb(' + [
1803                 PARSE_INT(RE.$1, 16),
1804                 PARSE_INT(RE.$2, 16),
1805                 PARSE_INT(RE.$3, 16)
1806             ].join(', ') + ')';
1807         }
1808         return val;
1809     },
1810     /**
1811     * @method toHex
1812     * @description Converts an rgb or color string to a hex string: #123456
1813     * @param {String} val The string to convert to hex notation.
1814     * @returns {String} The converted string
1815     */
1816     toHex: function(val) {
1817         val = Y.Dom.Color.KEYWORDS[val] || val;
1818         if (Y.Dom.Color.re_RGB.exec(val)) {
1819             val = [
1820                 Number(RE.$1).toString(16),
1821                 Number(RE.$2).toString(16),
1822                 Number(RE.$3).toString(16)
1823             ];
1824
1825             for (var i = 0; i < val.length; i++) {
1826                 if (val[i].length < 2) {
1827                     val[i] = '0' + val[i];
1828                 }
1829             }
1830
1831             val = val.join('');
1832         }
1833
1834         if (val.length < 6) {
1835             val = val.replace(Y.Dom.Color.re_hex3, '$1$1');
1836         }
1837
1838         if (val !== 'transparent' && val.indexOf('#') < 0) {
1839             val = '#' + val;
1840         }
1841
1842         return val.toUpperCase();
1843     }
1844 };
1845 }());
1846 YAHOO.register("dom", YAHOO.util.Dom, {version: "2.9.0", build: "2800"});