/*
 * Ext JS Library 2.3.0
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

/** * @class Ext.Element * <p>Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.</p> * <p>All instances of this class inherit the methods of {@link Ext.Fx} making visual effects easily available to all DOM elements.</p> * <p>Note that the events documented in this class are not Ext events, they encapsulate browser events. To * access the underlying browser event, see {@link Ext.EventObject#browserEvent}. Some older * browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.</p> * <p>Usage:</p><pre><code>// by idvar el = Ext.get("my-div");// by DOM element referencevar el = Ext.get(myDivElement);</code></pre> * <b>Animations</b><br /> * Many of the functions for manipulating an element have an optional "animate" parameter. The animate parameter * should either be a boolean (true) or an object literal with animation options. Note that the supported Element animation * options are a subset of the {@link Ext.Fx} animation options specific to Fx effects.  The Element animation options are:<pre>Option    Default   Description--------- --------  ---------------------------------------------duration  .35       The duration of the animation in secondseasing    easeOut   The easing methodcallback  none      A function to execute when the anim completesscope     this      The scope (this) of the callback function</pre> * Also, the Anim object being used for the animation will be set on your options object as "anim", which allows you to stop or * manipulate the animation. Here's an example:<pre><code>var el = Ext.get("my-div");// no animationel.setWidth(100);// default animationel.setWidth(100, true);// animation with some options setel.setWidth(100, {    duration: 1,    callback: this.foo,    scope: this});// using the "anim" property to get the Anim objectvar opt = {    duration: 1,    callback: this.foo,    scope: this};el.setWidth(100, opt);...if(opt.anim.isAnimated()){    opt.anim.stop();}</code></pre> * <b> Composite (Collections of) Elements</b><br /> * For working with collections of Elements, see {@link Ext.CompositeElement} * @constructor Create a new Element directly. * @param {String/HTMLElement} element * @param {Boolean} forceNew (optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class). */(function(){var D = Ext.lib.Dom;var E = Ext.lib.Event;var A = Ext.lib.Anim;// local style camelizing for speedvar propCache = {};var camelRe = /(-[a-z])/gi;var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };var view = document.defaultView;Ext.Element = function(element, forceNew){    var dom = typeof element == "string" ?            document.getElementById(element) : element;    if(!dom){ // invalid id/element        return null;    }    var id = dom.id;    if(forceNew !== true && id && Ext.Element.cache[id]){ // element object already exists        return Ext.Element.cache[id];    }    /**     * The DOM element     * @type HTMLElement     */    this.dom = dom;    /**     * The DOM element ID     * @type String     */    this.id = id || Ext.id(dom);};var El = Ext.Element;El.prototype = {//  Mouse events    /**     * @event click     * Fires when a mouse click is detected with the element.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event dblclick     * Fires when a mouse double click is detected with the element.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event mousedown     * Fires when a mousedown is detected with the element.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event mouseup     * Fires when a mouseup is detected with the element.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event mouseover     * Fires when a mouseover is detected with the element.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event mousemove     * Fires when a mousemove is detected with the element.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event mouseout     * Fires when a mouseout is detected with the element.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     *///  Keyboard events    /**     * @event keypress     * Fires when a keypress is detected with the element.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event keydown     * Fires when a keydown is detected with the element.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event keyup     * Fires when a keyup is detected with the element.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     *///  HTML frame/object events    /**     * @event load     * Fires when the user agent finishes loading all content within the element. Only supported by window, frames, objects and images.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event unload     * Fires when the user agent removes all content from a window or frame. For elements, it fires when the target element or any of its content has been removed.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event abort     * Fires when an object/image is stopped from loading before completely loaded.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event error     * Fires when an object/image/frame cannot be loaded properly.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event resize     * Fires when a document view is resized.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event scroll     * Fires when a document view is scrolled.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     *///  Form events    /**     * @event select     * Fires when a user selects some text in a text field, including input and textarea.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event change     * Fires when a control loses the input focus and its value has been modified since gaining focus.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event submit     * Fires when a form is submitted.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event reset     * Fires when a form is reset.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event focus     * Fires when an element receives focus either via the pointing device or by tab navigation.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event blur     * Fires when an element loses focus either via the pointing device or by tabbing navigation.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     *///  User Interface events    /**     * @event DOMFocusIn     * Where supported. Similar to HTML focus event, but can be applied to any focusable element.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.     */    /**     * @event DOMFocusOut     * Where supported. Similar to HTML blur event, but can be applied to any focusable element.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event DOMActivate     * Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     *///  DOM Mutation events    /**     * @event DOMSubtreeModified     * Where supported. Fires when the subtree is modified.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event DOMNodeInserted     * Where supported. Fires when a node has been added as a child of another node.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event DOMNodeRemoved     * Where supported. Fires when a descendant node of the element is removed.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event DOMNodeRemovedFromDocument     * Where supported. Fires when a node is being removed from a document.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event DOMNodeInsertedIntoDocument     * Where supported. Fires when a node is being inserted into a document.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event DOMAttrModified     * Where supported. Fires when an attribute has been modified.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * @event DOMCharacterDataModified     * Where supported. Fires when the character data has been modified.     * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event     */    /**     * The element's default display mode  (defaults to "")     * @type String     */    originalDisplay : "",    visibilityMode : 1,    /**     * The default unit to append to CSS values where a unit isn't provided (defaults to px).     * @type String     */    defaultUnit : "px",    /**     * Sets the element's visibility mode. When setVisible() is called it     * will use this to determine whether to set the visibility or the display property.     * @param visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY     * @return {Ext.Element} this     */    setVisibilityMode : function(visMode){        this.visibilityMode = visMode;        return this;    },    /**     * Convenience method for setVisibilityMode(Element.DISPLAY)     * @param {String} display (optional) What to set display to when visible     * @return {Ext.Element} this     */    enableDisplayMode : function(display){        this.setVisibilityMode(El.DISPLAY);        if(typeof display != "undefined") this.originalDisplay = display;        return this;    },    /**     * Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)     * @param {String} selector The simple selector to test     * @param {Number/Mixed} maxDepth (optional) The max depth to search as a number or element (defaults to 50 || document.body)     * @param {Boolean} returnEl (optional) True to return a Ext.Element object instead of DOM node     * @return {HTMLElement} The matching DOM node (or null if no match was found)     */    findParent : function(simpleSelector, maxDepth, returnEl){        var p = this.dom, b = document.body, depth = 0, dq = Ext.DomQuery, stopEl;        maxDepth = maxDepth || 50;        if(typeof maxDepth != "number"){            stopEl = Ext.getDom(maxDepth);            maxDepth = Number.MAX_VALUE;        }        while(p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl){            if(dq.is(p, simpleSelector)){                return returnEl ? Ext.get(p) : p;            }            depth++;            p = p.parentNode;        }        return null;    },