/**
 * @class Ext.dom.Element
 * @alternateClassName Ext.Element
 * @mixins Ext.util.Positionable
 * @mixins Ext.mixin.Observable
 *
 * Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.
 *
 * ## Usage
 *
 *     // by id
 *     var el = Ext.get("my-div");
 *
 *     // by DOM element reference
 *     var el = Ext.get(myDivElement);
 *
 * ## Selecting Descendant Elements
 *
 * Ext.dom.Element instances can be used to select descendant nodes using CSS selectors.
 * There are 3 methods that can be used for this purpose, each with a slightly different
 * twist:
 *
 * - {@link #query}
 * - {@link #selectNode}
 * - {@link #select}
 *
 * These methods can accept any valid CSS selector since they all use
 * [querySelectorAll](http://www.w3.org/TR/css3-selectors/) under the hood. The primary
 * difference between these three methods is their return type:
 *
 * To get an array of HTMLElement instances matching the selector '.foo' use the query
 * method:
 *
 *     element.query('.foo');
 *
 * This can easily be transformed into an array of Ext.dom.Element instances by setting
 * the `asDom` parameter to `false`:
 *
 *     element.query('.foo', false);
 *
 * If the desired result is only the first matching HTMLElement use the selectNode method:
 *
 *     element.selectNode('.foo');
 *
 * Once again, the dom node can be wrapped in an Ext.dom.Element by setting the `asDom`
 * parameter to `false`:
 *
 *     element.selectNode('.foo', false);
 *
 * The `select` method is used when the desired return type is a {@link
 * Ext.CompositeElementLite CompositeElementLite} or a {@link Ext.CompositeElement
 * CompositeElement}.  These are collections of elements that can be operated on as a
 * group using any of the methods of Ext.dom.Element.  The only difference between the two
 * is that CompositeElementLite is a collection of HTMLElement instances, while
 * CompositeElement is a collection of Ext.dom.Element instances.  To retrieve a
 * CompositeElementLite that represents a collection of HTMLElements for selector '.foo':
 *
 *     element.select('.foo');
 *
 * For a {@link Ext.CompositeElement CompositeElement} simply pass `true` as the
 * `composite` parameter:
 *
 *     element.select('.foo', true);
 *
 * The query selection methods can be used even if you don't have a Ext.dom.Element to
 * start with For example to select an array of all HTMLElements in the document that match the
 * selector '.foo', simply wrap the document object in an Ext.dom.Element instance using
 * {@link Ext#fly}:
 *
 *     Ext.fly(document).query('.foo');
 */
Ext.define('Ext.dom.Element', function(Element) {
    var WIN = window,
        DOC = document,
        windowId = 'ext-window',
        documentId = 'ext-document',
        WIDTH = 'width',
        HEIGHT = 'height',
        MIN_WIDTH = 'min-width',
        MIN_HEIGHT = 'min-height',
        MAX_WIDTH = 'max-width',
        MAX_HEIGHT = 'max-height',
        TOP = 'top',
        RIGHT = 'right',
        BOTTOM = 'bottom',
        LEFT = 'left',
        VISIBILITY = 'visibility',
        HIDDEN = 'hidden',
        DISPLAY = "display",
        NONE = "none",
        ZINDEX = "z-index",
        POSITION = "position",
        RELATIVE = "relative",
        STATIC = "static",
        SEPARATOR = '-',
        wordsRe = /\w/g,
        spacesRe = /\s+/,
        classNameSplitRegex = /[\s]+/,
        transparentRe = /^(?:transparent|(?:rgba[(](?:\s*\d+\s*[,]){3}\s*0\s*[)]))$/i,
        adjustDirect2DTableRe = /table-row|table-.*-group/,
        borders = {
            t: 'border-top-width',
            r: 'border-right-width',
            b: 'border-bottom-width',
            l: 'border-left-width'
        },
        paddings = {
            t: 'padding-top',
            r: 'padding-right',
            b: 'padding-bottom',
            l: 'padding-left'
        },
        margins = {
            t: 'margin-top',
            r: 'margin-right',
            b: 'margin-bottom',
            l: 'margin-left'
        },
        paddingsTLRB = [paddings.l, paddings.r, paddings.t, paddings.b],
        bordersTLRB = [borders.l,  borders.r,  borders.t,  borders.b],
        numberRe = /\d+$/,
        unitRe = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
        defaultUnit = 'px',
        camelRe = /(-[a-z])/gi,
        cssRe = /([a-z0-9-]+)\s*:\s*([^;\s]+(?:\s*[^;\s]+)*);?/gi,
        pxRe = /^\d+(?:\.\d*)?px$/i,
        propertyCache = {},
        camelReplaceFn = function(m, a) {
            return a.charAt(1).toUpperCase();
        },
        visibilityCls = Ext.baseCSSPrefix + 'hidden-visibility',
        displayCls = Ext.baseCSSPrefix + 'hidden-display',
        offsetsCls = Ext.baseCSSPrefix + 'hidden-offsets',
        noTouchScrollCls = Ext.baseCSSPrefix + 'no-touch-scroll',
        CREATE_ATTRIBUTES = {
            style: 'style',
            className: 'className',
            cls: 'cls',
            classList: 'classList',
            text: 'text',
            hidden: 'hidden',
            html: 'html',
            children: 'children'
        }, visFly;
 
    return {
        alternateClassName: 'Ext.Element',
 
        mixins: {
            positionable: 'Ext.util.Positionable',
            observable: 'Ext.mixin.Observable'
        },
 
        requires: [
        ],
 
        uses: [
            'Ext.dom.Helper',
            'Ext.dom.CompositeElement',
            'Ext.dom.Fly'
        ],
 
        observableType: 'element',
 
        isElement: true,
 
        skipGarbageCollection: true,
 
        identifiablePrefix: 'ext-element-',
 
        styleHooks: {},
 
        validIdRe: Ext.validIdRe,
 
        listenerOptionsRegex: /^(?:scope|order|delegate|delegated|single|delay|buffer|args|prepend|capture|destroyable|translate)$/,
 
        blockedEvents: Ext.supports.EmulatedMouseOver ? {
            // mobile safari emulates a mouseover event on clickable elmements such as 
            // anchors. This event is useless because it runs after touchend. We block 
            // this event to prevent mouseover handlers from running after tap events. It 
            // is up to the individual component to determine if it has an analog for 
            // mouseover, and implement the appropriate event handlers. 
            mouseover: 1
        } : {},
 
        longpressEvents: {
            longpress: 1,
            taphold: 1
        },
 
        /**
         * @property {Ext.Component} component
         * A reference to the `Component` that owns this element. This is `null` if there
         * is no direct owner.
         */
 
        /**
         * @event painted
         * Fires whenever this Element actually becomes visible (painted) on the screen. This is useful when you need to
         * perform 'read' operations on the DOM element, i.e: calculating natural sizes and positioning.
         *
         * __Note:__ This event is not available to be used with event delegation. Instead `painted` only fires if you explicitly
         * add at least one listener to it, for performance reasons.
         *
         * @param {Ext.dom.Element} this The component instance.
         */
 
        /**
         * @event resize
         * Important note: For the best performance on mobile devices, use this only when you absolutely need to monitor
         * a Element's size.
         *
         * __Note:__ This event is not available to be used with event delegation. Instead `resize` only fires if you explicitly
         * add at least one listener to it, for performance reasons.
         *
         * @param {Ext.dom.Element} this The component instance.
         */
 
        /**
         * Creates new Element directly by passing an id or the HTMLElement.  This
         * constructor should not be called directly.  Always use {@link Ext#get Ext.get()}
         * or {@link Ext#fly Ext#fly()} instead.
         *
         * In older versions of Ext JS and Sencha Touch this constructor checked to see if
         * there was already an instance of this element in the cache and if so, returned
         * the same instance. As of version 5 this behavior has been removed in order to
         * avoid a redundant cache lookup since the most common path is for the Element
         * constructor to be called from {@link Ext#get Ext.get()}, which has already
         * checked for a cache entry.
         *
         * Correct way of creating a new Ext.dom.Element (or retrieving it from the cache):
         *
         *     var el = Ext.get('foo'); // by id
         *
         *     var el = Ext.get(document.getElementById('foo')); // by DOM reference
         *
         * Incorrect way of creating a new Ext.dom.Element
         *
         *     var el = new Ext.dom.Element('foo');
         *
         * For quick and easy access to Ext.dom.Element methods use a flyweight:
         *
         *     Ext.fly('foo').addCls('foo-hovered');
         *
         * This simply attaches the DOM node with id='foo' to the global flyweight Element
         * instance to avoid allocating an extra Ext.dom.Element instance.  If, however,
         * the Element instance has already been cached by a previous call to Ext.get(),
         * then Ext.fly() will return the cached Element instance.  For more info see
         * {@link Ext#fly}.
         *
         * @param {String/HTMLElement} element
         * @private
         */
        constructor: function(dom, /* private */ noCache) {
            var me = this,
                id;
 
            if (typeof dom === 'string') {
                dom = DOC.getElementById(dom);
            }
 
            if (!dom) {
                //<debug> 
                Ext.Error.raise("Invalid domNode reference or an id of an existing domNode: " + dom);
                //</debug> 
                return null;
            }
            //<debug> 
            if (Ext.cache[dom.id]) {
                Ext.Error.raise("Element cache already contains an entry for id '" +
                    dom.id + "'.  Use Ext.get() to create or retrieve Element instances.");
            }
            //</debug> 
 
            /**
             * The DOM element
             * @property dom
             * @type HTMLElement
             */
            me.dom = dom;
 
            id = dom.id;
 
            if (id) {
                me.id = id;
            } else {
                id = dom.id = me.getUniqueId();
            }
 
            //<debug> 
            if (!me.validIdRe.test(me.id)) {
                Ext.Error.raise('Invalid Element "id": "' + me.id + '"');
            }
            //</debug> 
 
            // set an "el" property that references "this".  This allows 
            // Ext.util.Positionable methods to operate on this.el.dom since it 
            // gets mixed into both Element and Component 
            me.el = me;
 
            if (!noCache) {
                Ext.cache[id] = me;
            }
 
            me.mixins.observable.constructor.call(me);
        },
 
        inheritableStatics: {
            cache: Ext.cache = {},
 
            /**
             * @property {Number}
             * Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}.
             * Use the CSS 'visibility' property to hide the element.
             *
             * Note that in this mode, {@link Ext.dom.Element#isVisible isVisible} may return true
             * for an element even though it actually has a parent element that is hidden. For this
             * reason, and in most cases, using the {@link #OFFSETS} mode is a better choice.
             * @static
             */
            VISIBILITY: 1,
 
            /**
             * @property {Number}
             * Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}.
             * Use the CSS 'display' property to hide the element.
             * @static
             */
            DISPLAY: 2,
 
            /**
             * @property {Number}
             * Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}.
             * Use CSS absolute positioning and top/left offsets to hide the element.
             * @static
             */
            OFFSETS: 3,
 
            unitRe: unitRe,
 
            /**
             * @property {Boolean}
             * @private
             * @static
             * True to globally disable the delegated event system.  The results of
             * setting this to false are unpredictable since the Gesture publisher relies
             * on delegated events in order to work correctly.  Disabling delegated events
             * may cause Gestures to function incorrectly or to stop working completely.
             * Use at your own risk!
             */
            useDelegatedEvents: true,
 
            /**
             * @property {Object}
             * @private
             * @static
             * The list of valid nodeTypes that are allowed to be wrapped
             */
            validNodeTypes: {
                1: 1, // ELEMENT_NODE 
                9: 1 // DOCUMENT_NODE 
            },
 
            /**
             * Test if size has a unit, otherwise appends the passed unit string, or the default for this Element.
             * @param {Object} size The size to set.
             * @param {String} units The units to append to a numeric size value.
             * @return {String}
             * @private
             * @static
             */
            addUnits: function(size, units) {
                // Most common case first: Size is set to a number 
                if (typeof size === 'number') {
                    return size + (units || defaultUnit);
                }
 
                // Values which mean "auto" 
                // - "" 
                // - "auto" 
                // - undefined 
                // - null 
                if (size === "" || size === "auto" || size == null) {
                    return size || '';
                }
 
                // less common use case: number formatted as a string.  save this case until 
                // last to avoid regex execution if possible. 
                if (numberRe.test(size)) {
                    return size + (units || defaultUnit);
                }
 
                // Warn if it's not a valid CSS measurement 
                if (!unitRe.test(size)) {
                    //<debug> 
                    Ext.Logger.warn("Warning, size detected (" + size + ") not a valid property value on Element.addUnits.");
                    //</debug> 
                    return size || '';
                }
 
                return size;
            },
 
            // private overridden create method to add support a DomHelper config. Creates 
            // and appends elements/children using document.createElement/appendChild. 
            // This method is used by Sencha Touch for a significant performance gain 
            // in webkit browsers as opposed to using DomQuery which generates HTML 
            // markup and sets it as innerHTML.  However, the createElement/appendChild 
            // method of creating elements is significantly slower in all versions of IE 
            // at the time of this writing (6 - 11), so Ext JS should not use this method, 
            // but should instead use DomHelper methods, or Element methods that use 
            // DomHelper under the hood (e.g. createChild). 
            // see https://fiddle.sencha.com/#fiddle/tj 
            create: function(attributes, domNode) {
                var me = this,
                    hidden = CREATE_ATTRIBUTES.hidden,
                    element, elementStyle, tag, value, name, i, ln, className;
 
                if (!attributes) {
                    attributes = {};
                }
 
                if (attributes.isElement) {
                    return domNode ? attributes.dom : attributes;
                }
                else if ('nodeType' in attributes) {
                    return domNode ? attributes : Ext.get(attributes);
                }
 
                if (typeof attributes === 'string') {
                    return DOC.createTextNode(attributes);
                }
 
                tag = attributes.tag;
 
                if (!tag) {
                    tag = 'div';
                }
                if (attributes.namespace) {
                    element = DOC.createElementNS(attributes.namespace, tag);
                } else {
                    element = DOC.createElement(tag);
                }
                elementStyle = element.style;
 
                if (attributes[hidden]) {
                    className = attributes.className;
                    className = (className == null) ? '' : className + ' ';
                    attributes.className = className + displayCls;
                    delete attributes[hidden];
                }
 
                for (name in attributes) {
                    if (name !== 'tag') {
                        value = attributes[name];
 
                        switch (name) {
                            case CREATE_ATTRIBUTES.style:
                                if (typeof value === 'string') {
                                    element.setAttribute(name, value);
                                }
                                else {
                                    for (in value) {
                                        if (value.hasOwnProperty(i)) {
                                            elementStyle[i] = value[i];
                                        }
                                    }
                                }
                                break;
 
                            case CREATE_ATTRIBUTES.className:
                            case CREATE_ATTRIBUTES.cls:
                                element.className = value;
                                break;
 
                            case CREATE_ATTRIBUTES.classList:
                                element.className = value.join(' ');
                                break;
 
                            case CREATE_ATTRIBUTES.text:
                                element.textContent = value;
                                break;
 
                            case CREATE_ATTRIBUTES.html:
                                element.innerHTML = value;
                                break;
 
                            case CREATE_ATTRIBUTES.children:
                                for (= 0,ln = value.length; i < ln; i++) {
                                    element.appendChild(me.create(value[i], true));
                                }
                                break;
 
                            default:
                                if (value != null) { // skip null or undefined values 
                                    element.setAttribute(name, value);
                                }
                        }
                    }
                }
 
                if (domNode) {
                    return element;
                }
                else {
                    return me.get(element);
                }
            },
 
            // private 
            detach: function() {
                var dom = this.dom;
 
                if (dom && dom.parentNode && dom.tagName !== 'BODY') {
                    dom.parentNode.removeChild(dom);
                }
 
                return this;
            },
 
            /**
             * @inheritdoc Ext#fly
             * @static
             */
            fly: function(dom, named) {
                return Ext.fly(dom, named);
            },
 
            /**
             * Returns the top Element that is located at the passed coordinates
             * @static
             * @inheritable
             * @method
             * @param {Number} x The x coordinate
             * @param {Number} y The y coordinate
             * @return {String} The found Element
             */
            fromPoint: function(x, y) {
                return Ext.get(DOC.elementFromPoint(x, y));
            },
 
            /**
             * Retrieves Ext.dom.Element objects. {@link Ext#get} is alias for {@link Ext.dom.Element#get}.
             *
             * **This method does not retrieve {@link Ext.Component Component}s.** This method retrieves Ext.dom.Element
             * objects which encapsulate DOM elements. To retrieve a Component by its ID, use {@link Ext.ComponentManager#get}.
             *
             * When passing an id, it should not include the `#` character that is used for a css selector.
             *
             *     // For an element with id 'foo'
             *     Ext.get('foo'); // Correct
             *     Ext.get('#foo'); // Incorrect
             *
             * Uses simple caching to consistently return the same object. Automatically fixes if an object was recreated with
             * the same id via AJAX or DOM.
             *
             * @param {String/HTMLElement/Ext.dom.Element} element The `id` of the node, a DOM Node or an existing Element.
             * @return {Ext.dom.Element} The Element object (or `null` if no matching element was found).
             * @static
             */
            get: function(el) {
                var me = this,
                    cache = Ext.cache,
                    nodeType, dom, id, entry, data, docEl, winEl;
 
                if (!el) {
                    return null;
                }
 
                //<debug> 
                function warnDuplicate(id) {
                    Ext.Error.raise("DOM element with id " + id +
                        " in Element cache is not the same as element in the DOM. " +
                        "Make sure to clean up Element instances using destroy()" );
                }
                //</debug> 
 
                // Ext.get(flyweight) must return an Element instance, not the flyweight 
                if (el.isFly) {
                    el = el.dom;
                    data = el._extData;
                }
 
                if (typeof el === 'string') {
                    id = el;
                    if (cache.hasOwnProperty(id)) {
                        entry = cache[id];
                        if (entry.skipGarbageCollection || !Ext.isGarbage(entry.dom)) {
                            //<debug> 
                            dom = Ext.getElementById ? Ext.getElementById(id) :
                                DOC.getElementById(id);
                            if (dom && (dom !== entry.dom)) {
                                warnDuplicate(id);
                            }
                            //</debug> 
                            return entry;
                        } else {
                            entry.destroy();
                        }
                    }
 
                    if (id === windowId) {
                        return Element.get(WIN);
                    } else if (id === documentId) {
                        return Element.get(DOC);
                    }
 
                    // using Ext.getElementById() allows us to check the detached 
                    // body in addition to the body (Ext JS only). 
                    dom = Ext.getElementById ? Ext.getElementById(id) :
                        DOC.getElementById(id);
                    if (dom) {
                        return new Element(dom);
                    }
                }
 
                // document and window are not added to the cache because they cannot be 
                // garbage collected.  Instead, they are cached as static properties 
                // of Ext.dom.Element. 
                if (el === DOC) {
                    if (!me.docEl) {
                        DOC.id = documentId;
                        me.docEl = new Element(DOC, true);
                    }
                    return me.docEl;
                }
                // Must use == here, otherwise IE fails to recognize the window 
                else if (el == WIN) {
                    if (!me.winEl) {
                        WIN.id = windowId;
                        me.winEl = new Element(WIN, true);
                    }
                    return me.winEl;
                }
 
                nodeType = el.nodeType;
 
                // check if we have a valid node type or if the el is a window object before 
                // proceeding. This allows elements, document fragments, and document/window 
                // objects (even those inside iframes) to be wrapped. 
                if (me.validNodeTypes[nodeType] || (!nodeType && (el.window === el))) {
                    id = el.id;
 
                    if (cache.hasOwnProperty(id)) {
                        entry = cache[id];
                        if (entry.skipGarbageCollection || el === entry.dom ||
                            !Ext.isGarbage(entry.dom)) {
                            //<debug> 
                            if (el !== entry.dom) {
                                warnDuplicate(id);
                            }
                            //</debug> 
                            return entry;
                        } else {
                            entry.destroy();
                        }
                    }
 
                    return new Element(el);
                }
 
                if (el.isElement) {
                    return el;
                }
 
                if (el.isComposite) {
                    return el;
                }
 
                // Test for iterable. 
                // Allow the resulting Composite to be based upon an Array or HtmlCollection of nodes. 
                if (Ext.isIterable(el)) {
                    return me.select(el);
                }
 
                return null;
            },
 
            /**
             * Returns the active element in the DOM. If the browser supports activeElement
             * on the document, this is returned. If not, the focus is tracked and the active
             * element is maintained internally.
             * @return {HTMLElement} The active (focused) element in the document.
             */
            getActiveElement: function () {
                var active = DOC.activeElement;
                // The activeElement can be null, however there also appears to be a very odd 
                // and inconsistent bug in IE where the activeElement is simply an empty object 
                // literal. Test if the returned active element has focus, if not, we've hit the bug 
                // so just default back to the document body. 
                if (!active || !active.focus) {
                    active = DOC.body;
                }
                return active;
            },
 
            /**
             * Retrieves the document height
             * @static
             * @return {Number} documentHeight 
             */
            getDocumentHeight: function() {
                return Math.max(!Ext.isStrict ? DOC.body.scrollHeight : DOC.documentElement.scrollHeight, this.getViewportHeight());
            },
 
            /**
             * Retrieves the document width
             * @static
             * @return {Number} documentWidth 
             */
            getDocumentWidth: function() {
                return Math.max(!Ext.isStrict ? DOC.body.scrollWidth : DOC.documentElement.scrollWidth, this.getViewportWidth());
            },
 
            /**
             * Retrieves the current orientation of the window. This is calculated by
             * determining if the height is greater than the width.
             * @static
             * @return {String} Orientation of window: 'portrait' or 'landscape'
             */
            getOrientation: function() {
                if (Ext.supports.OrientationChange) {
                    return (WIN.orientation == 0) ? 'portrait' : 'landscape';
                }
 
                return (WIN.innerHeight > WIN.innerWidth) ? 'portrait' : 'landscape';
            },
 
            /**
             * Retrieves the viewport height of the window.
             * @static
             * @return {Number} viewportHeight 
             */
            getViewportHeight: function() {
                return WIN.innerHeight;
            },
 
            /**
             * Retrieves the viewport width of the window.
             * @static
             * @return {Number} viewportWidth 
             */
            getViewportWidth: function() {
                return WIN.innerWidth;
            },
 
            /**
             * Retrieves the viewport size of the window.
             * @static
             * @return {Object} object containing width and height properties
             */
            getViewSize: function() {
                return {
                    width: Element.getViewportWidth(),
                    height: Element.getViewportHeight()
                };
            },
 
            /**
             * Normalizes CSS property keys from dash delimited to camel case JavaScript Syntax.
             * For example:
             *
             * - border-width -> borderWidth
             * - padding-top -> paddingTop
             *
             * @static
             * @param {String} prop The property to normalize
             * @return {String} The normalized string
             */
            normalize: function(prop) {
                return propertyCache[prop] || (propertyCache[prop] = prop.replace(camelRe, camelReplaceFn));
            },
 
            /**
             * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
             * (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
             * @static
             * @param {Number/String} box The encoded margins
             * @return {Object} An object with margin sizes for top, right, bottom and left containing the unit
             */
            parseBox: function(box) {
                box = box || 0;
 
                var type = typeof box,
                    parts,
                    ln;
 
                if (type === 'number') {
                    return {
                        top: box,
                        right: box,
                        bottom: box,
                        left: box
                    };
                } else if (type !== 'string') {
                    // If not a number or a string, assume we've been given a box config. 
                    return box;
                }
 
                parts  = box.split(' ');
                ln = parts.length;
 
                if (ln === 1) {
                    parts[1] = parts[2] = parts[3] = parts[0];
                } else if (ln === 2) {
                    parts[2] = parts[0];
                    parts[3] = parts[1];
                } else if (ln === 3) {
                    parts[3] = parts[1];
                }
 
                return {
                    top: parseFloat(parts[0]) || 0,
                    right: parseFloat(parts[1]) || 0,
                    bottom: parseFloat(parts[2]) || 0,
                    left: parseFloat(parts[3]) || 0
                };
            },
 
            /**
             * Converts a CSS string into an object with a property for each style.
             *
             * The sample code below would return an object with 2 properties, one
             * for background-color and one for color.
             *
             *     var css = 'background-color: red; color: blue;';
             *     console.log(Ext.dom.Element.parseStyles(css));
             *
             * @static
             * @param {String} styles A CSS string
             * @return {Object} styles 
             */
            parseStyles: function(styles) {
                var out = {},
                    matches;
 
                if (styles) {
                    // Since we're using the g flag on the regex, we need to set the lastIndex. 
                    // This automatically happens on some implementations, but not others, see: 
                    // http://stackoverflow.com/questions/2645273/javascript-regular-expression-literal-persists-between-function-calls 
                    // http://blog.stevenlevithan.com/archives/fixing-javascript-regexp 
                    cssRe.lastIndex = 0;
                    while ((matches = cssRe.exec(styles))) {
                        out[matches[1]] = matches[2] || '';
                    }
                }
                return out;
            },
 
            /**
             * Selects elements based on the passed CSS selector to enable
             * {@link Ext.dom.Element Element} methods to be applied to many related
             * elements in one statement through the returned
             * {@link Ext.dom.CompositeElementLite CompositeElementLite} object.
             * @param {String/HTMLElement[]} selector The CSS selector or an array of
             * elements
             * @param {Boolean} [composite=false] Return a CompositeElement as opposed to
             * a CompositeElementLite. Defaults to false.
             * @param {HTMLElement/String} [root] The root element of the query or id of
             * the root
             * @return {Ext.dom.CompositeElementLite/Ext.dom.CompositeElement}
             */
            select: function(selector, composite, root) {
                return Ext.fly(root || DOC).select(selector, composite);
            },
 
            /**
             * Selects child nodes of a given root based on the passed CSS selector.
             * For details on selectors see {@link #method-query}.
             * @static
             * @param {String} selector The CSS selector.
             * @param {Boolean} [asDom=true] `false` to return an array of Ext.dom.Element
             * @param {HTMLElement/String} [root] The root element of the query or id of
             * the root
             * @return {HTMLElement[]/Ext.dom.Element[]} An Array of elements that match
             * the selector.  If there are no matches, an empty Array is returned.
             */
            query: function(selector, asDom, root) {
                return Ext.fly(root || DOC).query(selector, asDom);
            },
 
            /**
             * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
             * (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
             * @static
             * @param {Number/String/Object} box The encoded margins, or an object with top, right,
             * @param {String} units The type of units to add
             * @return {String} An string with unitized (px if units is not specified) metrics for top, right, bottom and left
             */
            unitizeBox: function(box, units) {
                var me = this;
                box = me.parseBox(box);
 
                return me.addUnits(box.top, units) + ' ' +
                    me.addUnits(box.right, units) + ' ' +
                    me.addUnits(box.bottom, units) + ' ' +
                    me.addUnits(box.left, units);
            },
 
            /**
             * Serializes a DOM form into a url encoded string
             * @param {Object} form The form
             * @return {String} The url encoded form
             * @static
             */
            serializeForm: function(form) {
                var fElements = form.elements || (DOC.forms[form] || Ext.getDom(form)).elements,
                    hasSubmit = false,
                    encoder = encodeURIComponent,
                    data = '',
                    eLen = fElements.length,
                    element, name, type, options, hasValue, e,
                    o, oLen, opt;
 
                for (= 0; e < eLen; e++) {
                    element = fElements[e];
                    name = element.name;
                    type = element.type;
                    options = element.options;
 
                    if (!element.disabled && name) {
                        if (/select-(one|multiple)/i.test(type)) {
                            oLen = options.length;
                            for (= 0; o < oLen; o++) {
                                opt = options[o];
                                if (opt.selected) {
                                    hasValue = opt.hasAttribute('value');
                                    data += Ext.String.format('{0}={1}&', encoder(name), encoder(hasValue ? opt.value : opt.text));
                                }
                            }
                        } else if (!(/file|undefined|reset|button/i.test(type))) {
                            if (!(/radio|checkbox/i.test(type) && !element.checked) && !(type == 'submit' && hasSubmit)) {
                                data += encoder(name) + '=' + encoder(element.value) + '&';
                                hasSubmit = /submit/i.test(type);
                            }
                        }
                    }
                }
                return data.substr(0, data.length - 1);
            }
        }, // statics 
 
        /**
         * Adds the given CSS class(es) to this Element.
         * @param {String/String[]} names The CSS classes to add separated by space,
         * or an array of classes
         * @param {String} [prefix] (optional) Prefix to prepend to each class.
         * @param {String} [suffix] (optional) Suffix to append to each class.
         */
        addCls: function(names, prefix, suffix) {
            var me = this,
                hasNewCls, dom, map, classList, i, ln, name,
                elementData = me.getData();
 
            if (!names) {
                return me;
            }
 
            if (!elementData.isSynchronized) {
                me.synchronize();
            }
 
            dom = me.dom;
            map = elementData.classMap;
            classList = elementData.classList;
 
            prefix = prefix ? prefix + SEPARATOR : '';
            suffix = suffix ? SEPARATOR + suffix : '';
 
            if (typeof names === 'string') {
                names = names.split(spacesRe);
            }
 
            for (= 0, ln = names.length; i < ln; i++) {
                name = prefix + names[i] + suffix;
 
                if (!map[name]) {
                    map[name] = true;
                    classList.push(name);
                    hasNewCls = true;
                }
            }
 
            if (hasNewCls) {
                dom.className = classList.join(' ');
            }
 
            return me;
        },
 
        addStyles: function(sides, styles){
            var totalSize = 0,
                sidesArr = (sides || '').match(wordsRe),
                i,
                len = sidesArr.length,
                side,
                styleSides = [];
 
            if (len === 1) {
                totalSize = Math.abs(parseFloat(this.getStyle(styles[sidesArr[0]])) || 0);
            } else if (len) {
                for (= 0; i < len; i++) {
                    side = sidesArr[i];
                    styleSides.push(styles[side]);
                }
                //Gather all at once, returning a hash 
                styleSides = this.getStyle(styleSides);
 
                for (i=0; i < len; i++) {
                    side = sidesArr[i];
                    totalSize += parseFloat(styleSides[styles[side]]) || 0;
                }
            }
 
            return totalSize;
        },
 
        addUnits: function(size, units) {
            return Element.addUnits(size, units);
        },
 
        /**
         * @private
         * Returns the fractional portion of this element's measurement in the given dimension.
         * (IE9+ only)
         * @return {Number}
         */
        adjustDirect2DDimension: function(dimension) {
            var me = this,
                dom = me.dom,
                display = me.getStyle('display'),
                inlineDisplay = dom.style.display,
                inlinePosition = dom.style.position,
                originIndex = dimension === WIDTH ? 0 : 1,
                currentStyle = dom.currentStyle,
                floating;
 
            if (display === 'inline') {
                dom.style.display = 'inline-block';
            }
 
            dom.style.position = display.match(adjustDirect2DTableRe) ? 'absolute' : 'static';
 
            // floating will contain digits that appears after the decimal point 
            // if height or width are set to auto we fallback to msTransformOrigin calculation 
 
            // Use currentStyle here instead of getStyle. In some difficult to reproduce  
            // instances it resets the scrollWidth of the element 
            floating = (parseFloat(currentStyle[dimension]) || parseFloat(currentStyle.msTransformOrigin.split(' ')[originIndex]) * 2) % 1;
 
            dom.style.position = inlinePosition;
 
            if (display === 'inline') {
                dom.style.display = inlineDisplay;
            }
 
            return floating;
        },
 
        append: function() {
            this.appendChild.apply(this, arguments);
        },
 
        /**
         * Appends the passed element(s) to this element
         * @param {String/HTMLElement/Ext.dom.Element/Object} el The id or element to insert
         * or a DomHelper config
         * @param {Boolean} [returnDom=false] True to return the raw DOM element instead
         * of Ext.dom.Element
         * @return {Ext.dom.Element} The inserted Element.
         */
        appendChild: function(el, returnDom) {
            var me = this,
                insertEl,
                eLen, e;
 
            if (el.nodeType || el.dom || typeof el === 'string') { // element 
                el = Ext.getDom(el);
                me.dom.appendChild(el);
                return !returnDom ? Ext.get(el) : el;
            } else if (el.length) {
                // append all elements to a documentFragment 
                insertEl = Ext.fly(document.createDocumentFragment());
                eLen = el.length;
 
                for (= 0; e < eLen; e++) {
                    insertEl.appendChild(el[e], returnDom);
                }
                me.dom.appendChild(insertEl.dom);
                return returnDom ? insertEl.dom : insertEl;
            }
            else { // dh config 
                return me.createChild(el, null, returnDom);
            }
        },
 
        /**
         * Appends this element to the passed element.
         * @param {String/HTMLElement/Ext.dom.Element} el The new parent element.
         * The id of the node, a DOM Node or an existing Element.
         * @return {Ext.dom.Element} This element.
         */
        appendTo: function(el) {
            Ext.getDom(el).appendChild(this.dom);
            return this;
        },
 
        /**
         * More flexible version of {@link #setStyle} for setting style properties.
         * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form `{width:"100px"}`, or
         * a function which returns such a specification.
         * @return {Ext.dom.Element} this
         */
        applyStyles: function(styles) {
            if (styles) {
                if (typeof styles === "function") {
                    styles = styles.call();
                }
                if (typeof styles === "string") {
                    styles = Element.parseStyles(styles);
                }
                if (typeof styles === "object") {
                    this.setStyle(styles);
                }
            }
            return this;
        },
 
        /**
         * Tries to blur the element. Any exceptions are caught and ignored.
         * @return {Ext.dom.Element} this
         */
        blur: function() {
            var me = this,
                dom = me.dom;
            // In IE, blurring the body can cause the browser window to hide. 
            // Blurring the body is redundant, so instead we just focus it 
            if (dom !== DOC.body) {
                try {
                    dom.blur();
                } catch(e) {
                }
                return me;
            } else {
                return me.focus(undefined, dom);
            }
        },
 
        /**
         * Centers the Element in either the viewport, or another Element.
         * @param {String/HTMLElement/Ext.dom.Element} centerIn element in
         * which to center the element.
         */
        center: function(centerIn){
            return this.alignTo(centerIn || DOC, 'c-c');
        },
 
        /**
         * Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).
         * @param {String} selector The CSS selector.
         * @param {Boolean} [returnDom=false] `true` to return the DOM node instead of Ext.dom.Element.
         * @return {HTMLElement/Ext.dom.Element} The child Ext.dom.Element (or DOM node if `returnDom` is `true`)
         */
        child: function(selector, returnDom) {
            var me = this,
            // Pull the ID from the DOM (Ext.id also ensures that there *is* an ID). 
            // If this object is a Flyweight, it will not have an ID 
                id = Ext.get(me).id;
 
            return me.selectNode(Ext.makeIdSelector(id) + " > " + selector, !!returnDom);
        },
 
        /**
         * Creates the passed DomHelper config and appends it to this element or optionally
         * inserts it before the passed child element.
         * @param {Object} config DomHelper element config object.  If no tag is specified
         * (e.g., {tag:'input'}) then a div will be automatically generated with the specified
         * attributes.
         * @param {HTMLElement} [insertBefore] a child element of this element
         * @param {Boolean} [returnDom=false] true to return the dom node instead of creating
         * an Element
         * @return {Ext.dom.Element} The new child element
         */
        createChild: function(config, insertBefore, returnDom) {
            config = config || {tag:'div'};
            if (insertBefore) {
                return Ext.DomHelper.insertBefore(insertBefore, config, returnDom !== true);
            }
            else {
                return Ext.DomHelper.append(this.dom, config,  returnDom !== true);
            }
        },
 
        /**
         * Creates an iframe shim for this element to keep windowed objects from
         * showing through.
         * @return {Ext.dom.Element} The new shim element
         */
        createShim: function() {
            var el = DOC.createElement('iframe'),
                shim;
 
            el.frameBorder = '0';
            el.className = Ext.baseCSSPrefix + 'shim';
            el.src = Ext.SSL_SECURE_URL;
            el.setAttribute('role', 'presentation');
            el.setAttribute('tabindex', -1);
            shim = Ext.get(this.dom.parentNode.insertBefore(el, this.dom));
            return shim;
        },
 
        /**
         * Returns `true` if this element is an ancestor of the passed element, or is
         * the element.
         * @param {HTMLElement/String} element The element to check.
         * @return {Boolean} True if this element is an ancestor of el or the el itself, else false
         */
        contains: function(element) {
            if (!element) {
                return false;
            }
 
            var me = this,
                dom = Ext.getDom(element);
 
            // we need el-contains-itself logic here because isAncestor does not do that: 
            // https://developer.mozilla.org/en-US/docs/Web/API/Node.contains 
            return (dom === me.dom) || me.isAncestor(dom);
        },
 
        /**
         * Destroys this element by removing it from the cache, removing its DOM reference,
         * and removing all of its event listeners.
         */
        destroy: function() {
            var me = this,
                dom = me.dom;
 
            //<debug> 
            if (me.isDestroyed) {
                Ext.Logger.warn("Cannot destroy Element \"" + me.id + "\". Already destroyed.");
                return;
            }
 
            if (dom) {
                if (dom.tagName === 'BODY') {
                    Ext.Error.raise("Cannot destroy body element.");
                } else if (dom === DOC) {
                    Ext.Error.raise("Cannot destroy document object.");
                } else if (dom === WIN) {
                    Ext.Error.raise("Cannot destroy window object");
                }
            }
            //</debug> 
 
            if (!me.isFly) {
                me.clearListeners();
                delete Ext.cache[me.id];
                me.isDestroyed = true;
            }
 
            if (dom) {
                if (dom.parentNode) {
                    dom.parentNode.removeChild(dom);
                }
                dom._extData = me.dom = null;
            }
        },
 
        detach: function() {
            var dom = this.dom;
 
            if (dom && dom.parentNode && dom.tagName !== 'BODY') {
                dom.parentNode.removeChild(dom);
            }
 
            return this;
        },
 
        /**
         * @private
         */
        disableTouchContextMenu: function() {
            this._contextMenuListenerRemover = this.on({
                MSHoldVisual: function(e) {
                    // disables the visual indicator in IE that precedes contextmenu 
                    e.preventDefault();
                },
                destroyable: true,
                delegated: false
            });
        },
 
        /**
         * Disables native scrolling of an overflowing element using touch-screen input
         * @private
         */
        disableTouchScroll: function() {
            // The x-no-touch-scroll cls disables touch scrolling on IE10+ 
            this.addCls(noTouchScrollCls);
            // Some browsers (e.g. Chrome on Win8 with touch-sreen) don't yet support 
            // touch-action:none, and so require cancellation of touchmove to prevent 
            // the default scrolling action 
            this.on({
                touchmove: function(e) {
                    e.preventDefault();
                },
                translate: false
            });
        },
 
        doAddListener: function(eventName, fn, scope, options) {
            var me = this,
                normalizedEvent, observableDoAddListener, additiveEventName,
                translatedEventName;
 
            // Blocked events (such as emulated mouseover in mobile webkit) are prevented 
            // from firing 
            if (!me.blockedEvents[eventName]) {
                observableDoAddListener = me.mixins.observable.doAddListener;
                options = options || {};
 
                if (me.longpressEvents[eventName]) {
                    me.disableTouchContextMenu();
                }
 
                if (me.normalizeEvent) {
                    // hook for overrides to create event interceptors. Useful when 
                    // additional logic needs to be applied to normalize event behavior 
                    normalizedEvent = me.normalizeEvent(eventName);
                    if (normalizedEvent) {
                        eventName =  normalizedEvent.eventName;
                        options.beforeFn = normalizedEvent.normalizeFn;
                    }
                }
 
                if (Element.useDelegatedEvents === false) {
                    options.delegated = options.delegated || false;
                }
 
                if (options.translate !== false) {
                    // translate events where applicable.  This allows applications that 
                    // were written for desktop to work on mobile devices and vice versa. 
                    additiveEventName = me.additiveEvents[eventName];
                    if (additiveEventName) {
                        // additiveEvents means the translation is "additive" - meaning we 
                        // need to attach the original event in addition to the translated 
                        // one.  An example of this is devices that have both mousedown 
                        // and touchstart 
                        options.type = eventName;
                        eventName = additiveEventName;
                        observableDoAddListener.apply(me, arguments);
                    }
 
                    translatedEventName = me.eventMap[eventName];
                    if (translatedEventName) {
                        // options.type may have already been set above 
                        options.type = options.type || eventName;
                        eventName = translatedEventName;
                    }
                }
                observableDoAddListener.apply(me, arguments);
 
                // after the listener has been added to the ListenerStack, it's original 
                // "type" (for translated events) will be stored on the listener object in 
                // the ListenerStack.  We can now delete type from the options object 
                // since it is not a user-supplied option 
                delete options.type;
            }
            return me;
        },
 
        doRemoveListener: function(eventName, fn, scope, options) {
            var me = this,
                normalizedEvent, observableDoRemoveListener, additiveEventName,
                contextMenuListenerRemover;
 
            // Blocked events (such as emulated mouseover in mobile webkit) are prevented 
            // from firing 
            if (!me.blockedEvents[eventName]) {
                observableDoRemoveListener = me.mixins.observable.doRemoveListener;
                options = options || {};
 
                if (me.longpressEvents[eventName]) {
                    contextMenuListenerRemover = this._contextMenuListenerRemover;
                    if (contextMenuListenerRemover) {
                        contextMenuListenerRemover.destroy();
                    }
                }
 
                if (me.normalizeEvent) {
                    // hook for overrides to create event interceptors. Useful when 
                    // additional logic needs to be applied to normalize event behavior 
                    normalizedEvent = me.normalizeEvent(eventName);
                    if (normalizedEvent) {
                        eventName = normalizedEvent.eventName;
                    }
                }
 
                if (Element.useDelegatedEvents === false) {
                    options.delegated = options.delegated || false;
                }
 
                if (options.translate !== false) {
                    // translate events where applicable.  This allows applications that 
                    // were written for desktop to work on mobile devices and vice versa. 
                    additiveEventName = me.additiveEvents[eventName];
                    if (additiveEventName) {
                        // additiveEvents means the translation is "additive" - meaning we 
                        // need to remove the original event in addition to the translated 
                        // one.  An example of this is devices that have both mousedown 
                        // and touchstart 
                        eventName = additiveEventName;
                        observableDoRemoveListener.apply(me, arguments);
                    }
                    eventName = me.eventMap[eventName] || eventName;
                }
                observableDoRemoveListener.apply(me, arguments);
            }
            return me;
        },
 
        // private 
        doReplaceWith: function(element) {
            var dom = this.dom;
            dom.parentNode.replaceChild(Ext.getDom(element), dom);
        },
 
        /**
         * Selects a single child at any depth below this element based on the passed
         * CSS selector (the selector should not contain an id).
         *
         * Use {@link #getById} if you need to get a reference to a child element via id.
         *
         * @param {String} selector The CSS selector
         * @param {Boolean} [returnDom=false] `true` to return the DOM node instead of Ext.dom.Element
         * @return {HTMLElement/Ext.dom.Element} The child Ext.dom.Element (or DOM node if `returnDom` is `true`)
         */
        down: function(selector, returnDom) {
            return this.selectNode(selector, !!returnDom);
        },
 
        /**
         * Looks at this node and then at parent nodes for a match of the passed simple selector.
         * @param {String} selector The simple selector to test. See {@link Ext.dom.Query} for information about simple selectors.
         * @param {Number/String/HTMLElement/Ext.dom.Element} [limit]
         * The max depth to search as a number or an element which causes the upward traversal to stop
         * and is <b>not</b> considered for inclusion as the result. (defaults to 50 || document.documentElement)
         * @param {Boolean} [returnEl=false] True to return a Ext.dom.Element object instead of DOM node
         * @return {HTMLElement} The matching DOM node (or null if no match was found)
         */
        findParent: function(simpleSelector, limit, returnEl) {
            var me = this,
                target = me.dom,
                topmost = DOC.documentElement,
                depth = 0;
 
            limit = limit || 50;
            if (isNaN(limit)) {
                limit = Number.MAX_VALUE;
            }
            while (target && target.nodeType === 1 && depth < limit && target !== topmost) {
                if (Ext.fly(target).is(simpleSelector)) {
                    return returnEl ? Ext.get(target) : target;
                }
                depth++;
                target = target.parentNode;
            }
            return null;
        },
 
        /**
         * Looks at parent nodes for a match of the passed simple selector.
         * @param {String} selector The simple selector to test. See {@link Ext.dom.Query} for information about simple selectors.
         * @param {Number/String/HTMLElement/Ext.dom.Element} [limit]
         * The max depth to search as a number or an element which causes the upward traversal to stop
         * and is not</b> considered for inclusion as the result. (defaults to 50 || document.documentElement)
         * @param {Boolean} [returnEl=false] True to return a Ext.dom.Element object instead of DOM node
         * @return {HTMLElement} The matching DOM node (or null if no match was found)
         */
        findParentNode: function(simpleSelector, limit, returnEl) {
            var p = Ext.fly(this.dom.parentNode);
            return p ? p.findParent(simpleSelector, limit, returnEl) : null;
        },
 
        /**
         * Gets the first child, skipping text nodes
         * @param {String} [selector] Find the next sibling that matches the passed simple selector.
         * See {@link Ext.dom.Query} for information about simple selectors.
         * @param {Boolean} [returnDom=false] `true` to return a raw DOM node instead of an Ext.dom.Element
         * @return {Ext.dom.Element/HTMLElement} The first child or null
         */
        first: function(selector, returnDom) {
            return this.matchNode('nextSibling', 'firstChild', selector, returnDom);
        },
 
        /**
         * Tries to focus the element. Any exceptions are caught and ignored.
         * @param {Number} [defer] Milliseconds to defer the focus
         * @return {Ext.dom.Element} this
         */
        focus: function(defer, /* private */ dom) {
            var me = this;
 
            dom = dom || me.dom;
            try {
                if (Number(defer)) {
                    Ext.defer(me.focus, defer, me, [null, dom]);
                } else {
                    Ext.GlobalEvents.fireEvent('beforefocus', dom);
                    dom.focus();
                }
            } catch(e) {
            }
            return me;
        },
 
        getAnchorToXY: function(el, anchor, local, mySize) {
            return el.getAnchorXY(anchor, local, mySize);
        },
 
        /**
         * Returns the value of an attribute from the element's underlying DOM node.
         * @param {String} name The attribute name.
         * @param {String} [namespace] The namespace in which to look for the attribute.
         * @return {String} The attribute value.
         */
        getAttribute: function(name, namespace) {
            var dom = this.dom;
 
            return namespace ?
                (dom.getAttributeNS(namespace, name) || dom.getAttribute(namespace + ":" + name)) :
                (dom.getAttribute(name) || dom[name] || null);
        },
 
        /**
         * Gets the bottom Y coordinate of the element (element Y position + element height)
         * @param {Boolean} local True to get the local css position instead of page
         * coordinate
         * @return {Number}
         */
        getBottom: function(local) {
            return (local ? this.getLocalY() : this.getY()) + this.getHeight();
        },
 
        /**
         * Returns a child element of this element given its `id`.
         * @param {String} id The id of the desired child element.
         * @param {Boolean} [asDom=false] True to return the DOM element, false to return a
         * wrapped Element object.
         */
        getById: function (id, asDom) {
            // for normal elements getElementById is the best solution, but if the el is 
            // not part of the document.body, we have to resort to querySelector 
            var dom = DOC.getElementById(id) ||
                this.dom.querySelector(Ext.makeIdSelector(id));
            return asDom ? dom : (dom ? Ext.get(dom) : null);
        },
 
        getBorderPadding: function() {
            var paddingWidth = this.getStyle(paddingsTLRB),
                bordersWidth = this.getStyle(bordersTLRB);
 
            return {
                beforeX: (parseFloat(bordersWidth[borders.l]) || 0) + (parseFloat(paddingWidth[paddings.l]) || 0),
                afterX: (parseFloat(bordersWidth[borders.r]) || 0) + (parseFloat(paddingWidth[paddings.r]) || 0),
                beforeY: (parseFloat(bordersWidth[borders.t]) || 0) + (parseFloat(paddingWidth[paddings.t]) || 0),
                afterY: (parseFloat(bordersWidth[borders.b]) || 0) + (parseFloat(paddingWidth[paddings.b]) || 0)
            };
        },
 
        /**
         * Gets the width of the border(s) for the specified side(s)
         * @param {String} side Can be t, l, r, b or any combination of those to add
         * multiple values. For example, passing `'lr'` would get the border **l**eft
         * width + the border **r**ight width.
         * @return {Number} The width of the sides passed added together
         */
        getBorderWidth: function(side) {
            return this.addStyles(side, borders);
        },
 
        getData: function() {
            var dom = this.dom;
 
            return (dom._extData || (dom._extData = {}));
        },
 
        getFirstChild: function() {
            return Ext.get(this.dom.firstElementChild);
        },
 
        /**
         * Returns the offset height of the element.
         * @param {Boolean} [contentHeight] `true` to get the height minus borders and padding.
         * @return {Number} The element's height.
         */
        getHeight: function(contentHeight, preciseHeight) {
            var me = this,
                hidden = me.isStyle('display', 'none'),
                height,
                floating;
 
            if (hidden) {
                return 0;
            }
 
            height = me.dom.offsetHeight;
 
            // IE9/10 Direct2D dimension rounding bug 
            if (Ext.supports.Direct2DBug) {
                floating = me.adjustDirect2DDimension(HEIGHT);
                if (preciseHeight) {
                    height += floating;
                }
                else if (floating > 0 && floating < 0.5) {
                    height++;
                }
            }
 
            if (contentHeight) {
                height -= me.getBorderWidth("tb") + me.getPadding("tb");
            }
 
            return (height < 0) ? 0 : height;
        },
 
        /**
         * Returns the `innerHTML` of an Element or an empty string if the element's
         * dom no longer exists.
         * @return {String}
         */
        getHtml: function() {
            return this.dom ? this.dom.innerHTML : '';
        },
 
        /**
         * Gets the left X coordinate
         * @param {Boolean} local True to get the local css position instead of
         * page coordinate
         * @return {Number}
         */
        getLeft: function(local) {
            return local ? this.getLocalX() : this.getX();
        },
 
        getLocalX: function() {
            var me = this,
                offsetParent,
                x = me.getStyle('left');
 
            if (!|| x === 'auto') {
                x = 0;
            } else if (pxRe.test(x)) {
                x = parseFloat(x);
            } else {
                x = me.getX();
 
                // Reading offsetParent causes forced async layout. 
                // Do not do it unless needed. 
                offsetParent = me.dom.offsetParent;
                if (offsetParent) {
                    x -= Ext.fly(offsetParent).getX();
                }
            }
 
            return x;
        },
 
        getLocalXY: function() {
            var me = this,
                offsetParent,
                style = me.getStyle(['left', 'top']),
                x = style.left,
                y = style.top;
 
            if (!|| x === 'auto') {
                x = 0;
            } else if (pxRe.test(x)) {
                x = parseFloat(x);
            } else {
                x = me.getX();
 
                // Reading offsetParent causes forced async layout. 
                // Do not do it unless needed. 
                offsetParent = me.dom.offsetParent;
                if (offsetParent) {
                    x -= Ext.fly(offsetParent).getX();
                }
            }
 
            if (!|| y === 'auto') {
                y = 0;
            } else if (pxRe.test(y)) {
                y = parseFloat(y);
            } else {
                y = me.getY();
 
                // Reading offsetParent causes forced async layout. 
                // Do not do it unless needed. 
                offsetParent = me.dom.offsetParent;
                if (offsetParent) {
                    y -= Ext.fly(offsetParent).getY();
                }
            }
 
            return [x, y];
        },
 
        getLocalY: function() {
            var me = this,
                offsetParent,
                y = me.getStyle('top');
 
            if (!|| y === 'auto') {
                y = 0;
            } else if (pxRe.test(y)) {
                y = parseFloat(y);
            } else {
                y = me.getY();
 
                // Reading offsetParent causes forced async layout. 
                // Do not do it unless needed. 
                offsetParent = me.dom.offsetParent;
                if (offsetParent) {
                    y -= Ext.fly(offsetParent).getY();
                }
            }
 
            return y;
        },
 
        /**
         * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
         * then it returns the calculated width of the sides (see {@link #getPadding}).
         * @param {String} [sides] Any combination of 'l', 'r', 't', 'b' to get the sum of those sides.
         * @return {Object/Number}
         */
        getMargin: function(side) {
            var me = this,
                hash = {t: "top", l: "left", r: "right", b: "bottom"},
                key, o, m;
 
            if (!side) {
                m = [];
                for (key in margins) {
                    m.push(margins[key]);
                }
                o = me.getStyle(margins);
                if(&& typeof o === 'object') {
                    for (key in margins) {
                        o[hash[key]] = parseFloat(o[margins[key]]) || 0;
                    }
                }
 
                return o;
            } else {
                return me.addStyles(side, margins);
            }
        },
 
        /**
         * Gets the width of the padding(s) for the specified side(s).
         * @param {String} side Can be t, l, r, b or any combination of those to add
         * multiple values. For example, passing `'lr'` would get the padding **l**eft +
         * the padding **r**ight.
         * @return {Number} The padding of the sides passed added together.
         */
        getPadding: function(side) {
            return this.addStyles(side, paddings);
        },
 
        getParent: function() {
            return Ext.get(this.dom.parentNode);
        },
 
        /**
         * Gets the right X coordinate of the element (element X position + element width)
         * @param {Boolean} local True to get the local css position instead of page
         * coordinates
         * @return {Number}
         */
        getRight: function(local) {
            return (local ? this.getLocalX() : this.getX()) + this.getWidth();
        },
 
        /**
         * Returns the size of the element.
         * @param {Boolean} [contentSize] `true` to get the width/size minus borders and padding.
         * @return {Object} An object containing the element's size:
         * @return {Number} return.width
         * @return {Number} return.height
         */
        getSize: function(contentSize) {
            return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
        },
 
        /**
         * Returns a named style property based on computed/currentStyle (primary) and
         * inline-style if primary is not available.
         *
         * @param {String/String[]} property The style property (or multiple property names
         * in an array) whose value is returned.
         * @param {Boolean} [inline=false] if `true` only inline styles will be returned.
         * @return {String/Object} The current value of the style property for this element
         * (or a hash of named style values if multiple property arguments are requested).
         * @method
         */
        getStyle: function (property, inline) {
            var me = this,
                dom = me.dom,
                multiple = typeof property !== 'string',
                hooks = me.styleHooks,
                prop = property,
                props = prop,
                len = 1,
                domStyle, camel, values, hook, out, style, i;
 
            if (multiple) {
                values = {};
                prop = props[0];
                i = 0;
                if (!(len = props.length)) {
                    return values;
                }
            }
 
            if (!dom || dom.documentElement) {
                return values || '';
            }
 
            domStyle = dom.style;
 
            if (inline) {
                style = domStyle;
            } else {
                // Caution: Firefox will not render "presentation" (ie. computed styles) in 
                // iframes that are display:none or those inheriting display:none. Similar 
                // issues with legacy Safari. 
                // 
                style = dom.ownerDocument.defaultView.getComputedStyle(dom, null);
 
                // fallback to inline style if rendering context not available 
                if (!style) {
                    inline = true;
                    style = domStyle;
                }
            }
 
            do {
                hook = hooks[prop];
 
                if (!hook) {
                    hooks[prop] = hook = { name: Element.normalize(prop) };
                }
 
                if (hook.get) {
                    out = hook.get(dom, me, inline, style);
                } else {
                    camel = hook.name;
                    out = style[camel];
                }
 
                if (!multiple) {
                    return out;
                }
 
                values[prop] = out;
                prop = props[++i];
            } while (< len);
 
            return values;
        },
 
        getStyleValue: function(name) {
            return this.dom.style.getPropertyValue(name);
        },
 
        /**
         * Gets the top Y coordinate