    /**
     * @class Ext.Layer
     * @extends Ext.core.Element
     * An extended {@link Ext.core.Element} object that supports a shadow and shim, constrain to viewport and
     * automatic maintaining of shadow/shim positions.
     * @cfg {Boolean} shim False to disable the iframe shim in browsers which need one (defaults to true)
     * @cfg {String/Boolean} shadow True to automatically create an {@link Ext.Shadow}, or a string indicating the
     * shadow's display {@link Ext.Shadow#mode}. False to disable the shadow. (defaults to false)
     * @cfg {Object} dh DomHelper object config to create element with (defaults to {tag: 'div', cls: 'x-layer'}).
     * @cfg {Boolean} constrain False to disable constrain to viewport (defaults to true)
     * @cfg {String} cls CSS class to add to the element
     * @cfg {Number} zindex Starting z-index (defaults to 11000)
     * @cfg {Number} shadowOffset Number of pixels to offset the shadow (defaults to 4)
     * @cfg {Boolean} useDisplay
     * Defaults to use css offsets to hide the Layer. Specify <tt>true</tt>
     * to use css style <tt>'display:none;'</tt> to hide the Layer.
     * @cfg {String} visibilityCls The CSS class name to add in order to hide this Layer if this layer
     * is configured with <code>{@link #hideMode}: 'asclass'</code>
     * @cfg {String} hideMode
     * A String which specifies how this Layer will be hidden.
     * Values may be<div class="mdetail-params"><ul>
     * <li><code>'display'</code> : The Component will be hidden using the <code>display: none</code> style.</li>
     * <li><code>'visibility'</code> : The Component will be hidden using the <code>visibility: hidden</code> style.</li>
     * <li><code>'offsets'</code> : The Component will be hidden by absolutely positioning it out of the visible area of the document. This
     * is useful when a hidden Component must maintain measurable dimensions. Hiding using <code>display</code> results
     * in a Component having zero dimensions.</li></ul></div>
     */
    Ext.define('Ext.Layer', {
        uses: ['Ext.Shadow'],

        // shims are shared among layer to keep from having 100 iframes
        statics: {
            shims: []
        },

        extend: 'Ext.core.Element',

        /**
         * Creates new Layer.
         * @param {Object} config (optional) An object with config options.
         * @param {String/HTMLElement} existingEl (optional) Uses an existing DOM element.
         * If the element is not found it creates it.
         */
        constructor: function(config, existingEl) {
            config = config || {};
            var me = this,
                dh = Ext.core.DomHelper,
                cp = config.parentEl,
                pel = cp ? Ext.getDom(cp) : document.body,
            hm = config.hideMode;

            if (existingEl) {
                me.dom = Ext.getDom(existingEl);
            }
            if (!me.dom) {
                me.dom = dh.append(pel, config.dh || {
                    tag: 'div',
                    cls: Ext.baseCSSPrefix + 'layer'
                });
            } else {
                me.addCls(Ext.baseCSSPrefix + 'layer');
                if (!me.dom.parentNode) {
                    pel.appendChild(me.dom);
                }
            }

            if (config.cls) {
                me.addCls(config.cls);
            }
            me.constrain = config.constrain !== false;

            // Allow Components to pass their hide mode down to the Layer if they are floating.
            // Otherwise, allow useDisplay to override the default hiding method which is visibility.
            // TODO: Have ExtJS's Element implement visibilityMode by using classes as in Mobile.
            if (hm) {
                me.setVisibilityMode(Ext.core.Element[hm.toUpperCase()]);
                if (me.visibilityMode == Ext.core.Element.ASCLASS) {
                    me.visibilityCls = config.visibilityCls;
                }
            } else if (config.useDisplay) {
                me.setVisibilityMode(Ext.core.Element.DISPLAY);
            } else {
                me.setVisibilityMode(Ext.core.Element.VISIBILITY);
            }

            if (config.id) {
                me.id = me.dom.id = config.id;
            } else {
                me.id = Ext.id(me.dom);
            }
            me.position('absolute');
            if (config.shadow) {
                me.shadowOffset = config.shadowOffset || 4;
                me.shadow = Ext.create('Ext.Shadow', {
                    offset: me.shadowOffset,
                    mode: config.shadow
                });
                me.disableShadow();
            } else {
                me.shadowOffset = 0;
            }
            me.useShim = config.shim !== false && Ext.useShims;
            if (config.hidden === true) {
                me.hide();
            } else {
                this.show();
            }
        },

        getZIndex: function() {
            return parseInt((this.getShim() || this).getStyle('z-index'), 10);
        },

        getShim: function() {
            var me = this,
                shim, pn;

            if (!me.useShim) {
                return null;
            }
            if (!me.shim) {
                shim = me.self.shims.shift();
                if (!shim) {
                    shim = me.createShim();
                    shim.enableDisplayMode('block');
                    shim.hide();
                }
                pn = me.dom.parentNode;
                if (shim.dom.parentNode != pn) {
                    pn.insertBefore(shim.dom, me.dom);
                }
                me.shim = shim;
            }
            return me.shim;
        },

        hideShim: function() {
            if (this.shim) {
                this.shim.setDisplayed(false);
                this.self.shims.push(this.shim);
                delete this.shim;
            }
        },

        disableShadow: function() {
            if (this.shadow) {
                this.shadowDisabled = true;
                this.shadow.hide();
                this.lastShadowOffset = this.shadowOffset;
                this.shadowOffset = 0;
            }
        },

        enableShadow: function(show) {
            if (this.shadow) {
                this.shadowDisabled = false;
                this.shadowOffset = this.lastShadowOffset;
                delete this.lastShadowOffset;
                if (show) {
                    this.sync(true);
                }
            }
        },

        /**
         * @private
         * <p>Synchronize this Layer's associated elements, the shadow, and possibly the shim.</p>
         * <p>This code can execute repeatedly in milliseconds,
         * eg: dragging a Component configured liveDrag: true, or which has no ghost method
         * so code size was sacrificed for efficiency (e.g. no getBox/setBox, no XY calls)</p>
         * @param {Boolean} doShow Pass true to ensure that the shadow is shown.
         */
        sync: function(doShow) {
            var me = this,
                shadow = me.shadow,
                shadowPos, shimStyle, shadowSize;

            if (!this.updating && this.isVisible() && (shadow || this.useShim)) {
                var shim = this.getShim(),
                    l = this.getLeft(true),
                    t = this.getTop(true),
                    w = this.getWidth(),
                    h = this.getHeight(),
                    shimIndex;

                if (shadow && !this.shadowDisabled) {
                    if (doShow && !shadow.isVisible()) {
                        shadow.show(this);
                    } else {
                        shadow.realign(l, t, w, h);
                    }
                    if (shim) {
                        // TODO: Determine how the shims zIndex is above the layer zIndex at this point
                        shimIndex = shim.getStyle('z-index');
                        if (shimIndex > me.zindex) {
                            me.shim.setStyle('z-index', me.zindex - 2);
                        }
                        shim.show();
                        // fit the shim behind the shadow, so it is shimmed too
                        if (shadow.isVisible()) {
                            shadowPos = shadow.el.getXY();
                            shimStyle = shim.dom.style;
                            shadowSize = shadow.el.getSize();
                            shimStyle.left = (shadowPos[0]) + 'px';
                            shimStyle.top = (shadowPos[1]) + 'px';
                            shimStyle.width = (shadowSize.width) + 'px';
                            shimStyle.height = (shadowSize.height) + 'px';
                        } else {
                            shim.setSize(w, h);
                            shim.setLeftTop(l, t);
                        }
                    }
                } else if (shim) {
                    // TODO: Determine how the shims zIndex is above the layer zIndex at this point
                    shimIndex = shim.getStyle('z-index');
                    if (shimIndex > me.zindex) {
                        me.shim.setStyle('z-index', me.zindex - 2);
                    }
                    shim.show();
                    shim.setSize(w, h);
                    shim.setLeftTop(l, t);
                }
            }
            return this;
        },

        remove: function() {
            this.hideUnders();
            this.callParent();
        },

        // private
        beginUpdate: function() {
            this.updating = true;
        },

        // private
        endUpdate: function() {
            this.updating = false;
            this.sync(true);
        },

        // private
        hideUnders: function() {
            if (this.shadow) {
                this.shadow.hide();
            }
            this.hideShim();
        },

        // private
        constrainXY: function() {
            if (this.constrain) {
                var vw = Ext.core.Element.getViewWidth(),
                    vh = Ext.core.Element.getViewHeight(),
                    s = Ext.getDoc().getScroll(),
                    xy = this.getXY(),
                    x = xy[0],
                    y = xy[1],
                    so = this.shadowOffset,
                    w = this.dom.offsetWidth + so,
                    h = this.dom.offsetHeight + so,
                    moved = false; // only move it if it needs it
                // first validate right/bottom
                if ((x + w) > vw + s.left) {
                    x = vw - w - so;
                    moved = true;
                }
                if ((y + h) > vh + s.top) {
                    y = vh - h - so;
                    moved = true;
                }
                // then make sure top/left isn't negative
                if (x < s.left) {
                    x = s.left;
                    moved = true;
                }
                if (y < s.top) {
                    y = s.top;
                    moved = true;
                }
                if (moved) {
                    Ext.Layer.superclass.setXY.call(this, [x, y]);
                    this.sync();
                }
            }
            return this;
        },

        getConstrainOffset: function() {
            return this.shadowOffset;
        },

        // overridden Element method
        setVisible: function(visible, animate, duration, callback, easing) {
            var me = this,
                cb;

            // post operation processing
            cb = function() {
                if (visible) {
                    me.sync(true);
                }
                if (callback) {
                    callback();
                }
            };

            // Hide shadow and shim if hiding
            if (!visible) {
                this.hideUnders(true);
            }
            this.callParent([visible, animate, duration, callback, easing]);
            if (!animate) {
                cb();
            }
            return this;
        },

        // private
        beforeFx: function() {
            this.beforeAction();
            return this.callParent(arguments);
        },

        // private
        afterFx: function() {
            this.callParent(arguments);
            this.sync(this.isVisible());
        },

        // private
        beforeAction: function() {
            if (!this.updating && this.shadow) {
                this.shadow.hide();
            }
        },

        // overridden Element method
        setLeft: function(left) {
            this.callParent(arguments);
            return this.sync();
        },

        setTop: function(top) {
            this.callParent(arguments);
            return this.sync();
        },

        setLeftTop: function(left, top) {
            this.callParent(arguments);
            return this.sync();
        },

        setXY: function(xy, animate, duration, callback, easing) {

            // Callback will restore shadow state and call the passed callback
            callback = this.createCB(callback);

            this.fixDisplay();
            this.beforeAction();
            this.callParent([xy, animate, duration, callback, easing]);
            if (!animate) {
                callback();
            }
            return this;
        },

        // private
        createCB: function(callback) {
            var me = this,
                showShadow = me.shadow && me.shadow.isVisible();

            return function() {
                me.constrainXY();
                me.sync(showShadow);
                if (callback) {
                    callback();
                }
            };
        },

        // overridden Element method
        setX: function(x, animate, duration, callback, easing) {
            this.setXY([x, this.getY()], animate, duration, callback, easing);
            return this;
        },

        // overridden Element method
        setY: function(y, animate, duration, callback, easing) {
            this.setXY([this.getX(), y], animate, duration, callback, easing);
            return this;
        },

        // overridden Element method
        setSize: function(w, h, animate, duration, callback, easing) {
            // Callback will restore shadow state and call the passed callback
            callback = this.createCB(callback);

            this.beforeAction();
            this.callParent([w, h, animate, duration, callback, easing]);
            if (!animate) {
                callback();
            }
            return this;
        },

        // overridden Element method
        setWidth: function(w, animate, duration, callback, easing) {
            // Callback will restore shadow state and call the passed callback
            callback = this.createCB(callback);

            this.beforeAction();
            this.callParent([w, animate, duration, callback, easing]);
            if (!animate) {
                callback();
            }
            return this;
        },

        // overridden Element method
        setHeight: function(h, animate, duration, callback, easing) {
            // Callback will restore shadow state and call the passed callback
            callback = this.createCB(callback);

            this.beforeAction();
            this.callParent([h, animate, duration, callback, easing]);
            if (!animate) {
                callback();
            }
            return this;
        },

        // overridden Element method
        setBounds: function(x, y, width, height, animate, duration, callback, easing) {
            // Callback will restore shadow state and call the passed callback
            callback = this.createCB(callback);

            this.beforeAction();
            if (!animate) {
                Ext.Layer.superclass.setXY.call(this, [x, y]);
                Ext.Layer.superclass.setSize.call(this, width, height);
                callback();
            } else {
                this.callParent([x, y, width, height, animate, duration, callback, easing]);
            }
            return this;
        },

        /**
         * <p>Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
         * incremented depending upon the presence of a shim or a shadow in so that it always shows above those two associated elements.</p>
         * <p>Any shim, will be assigned the passed z-index. A shadow will be assigned the next highet z-index, and the Layer's
         * element will receive the highest  z-index.
         * @param {Number} zindex The new z-index to set
         * @return {this} The Layer
         */
        setZIndex: function(zindex) {
            this.zindex = zindex;
            if (this.getShim()) {
                this.shim.setStyle('z-index', zindex++);
            }
            if (this.shadow) {
                this.shadow.setZIndex(zindex++);
            }
            this.setStyle('z-index', zindex);
            return this;
        }
    });