    /** * Simple class that can provide a shadow effect for any absolutely positioned {@link * Ext.dom.Element Element}. *  * Not meant to be used directly. To apply a shadow to an Element use the  * {@link Ext.dom.Element#enableShadow enableShadow} method. *  * @private */Ext.define('Ext.dom.Shadow', {    extend: 'Ext.dom.Underlay',    alternateClassName: 'Ext.Shadow',     /**     * @cfg {String} mode      * The shadow display mode.  Supports the following options:     *     * - sides : Shadow displays on both sides and bottom only     * - frame : Shadow displays equally on all four sides     * - drop : Traditional bottom-right drop shadow     */    mode: 'drop',     /**     * @cfg {Number} offset      * The number of pixels to offset the shadow from the element     */    offset: 4,     cls: Ext.baseCSSPrefix + (!Ext.supports.CSS3BoxShadow ? 'ie' : 'css') + '-shadow',     /**     * Creates new Shadow.     * @param {Object} config (optional) Config object.     */    constructor: function(config) {        var me = this,            outerOffsets, offsets, offset, rad;         me.callParent([config]);         me.elementConfig = {            cls: me.cls,            role: 'presentation'        };         offset = me.offset;        rad = Math.floor(offset / 2);        me.opacity = 50;        switch (me.mode.toLowerCase()) {            case "drop":                outerOffsets = {                    x: 0,                    y: 0,                    w: offset,                    h: offset                };                if (Ext.supports.CSS3BoxShadow) {                    offsets = {                        x: offset,                        y: offset,                        h: -offset,                        w: -offset                    };                }                else {                    offsets = {                        x: -rad,                        y: -rad,                        h: -rad,                        w: -rad                    };                }                break;            case "sides":                outerOffsets = {                    x: -offset,                    y: 0,                    w: offset * 2,                    h: offset                };                if (Ext.supports.CSS3BoxShadow) {                    offsets = {                        x: 0,                        y: offset,                        h: -offset,                        w: 0                    };                }                else {                    offsets = {                        x: 1 + rad - 2 * offset,                        y: - (1 + rad),                        h: -1,                        w: rad - 1                    };                }                break;            case "frame":                outerOffsets = {                    x: -offset,                    y: -offset,                    w: offset * 2,                    h: offset * 2                };                if (Ext.supports.CSS3BoxShadow) {                    offsets = {                        x: 0,                        y: 0,                        h: 0,                        w: 0                    };                }                else {                    offsets = {                        x: 1 + rad - 2 * offset,                        y: 1 + rad - 2 * offset,                        h: offset - rad - 1,                        w: offset - rad - 1                    };                }                break;            case "bottom":                outerOffsets = {                    x: -offset,                    y: 0,                    w: offset * 2,                    h: offset                };                if (Ext.supports.CSS3BoxShadow) {                    offsets = {                        x: 0,                        y: offset,                        h: -offset,                        w: 0                    };                }                else {                    offsets = {                        x: 0,                        y: offset,                        h: 0,                        w: 0                    };                }                break;        }         /**         * @property {Object} offsets The offsets used for positioning the shadow element         * relative to its target element         */        me.offsets = offsets;         /**         * @property {Object} outerOffsets Offsets that represent the union of the areas         * of the target element and the shadow combined.  Used by Ext.dom.Element for         * ensuring that the shim (if present) extends under the full area of both elements.         */        me.outerOffsets = outerOffsets;    },     /**     * @private     * Returns the shadow size on each side of the element in standard CSS order: top, right, bottom, left;     * @return {Number[]} Top, right, bottom and left shadow size.     */    getShadowSize: function() {        var me = this,            offset = me.el ? me.offset : 0,            result = [offset, offset, offset, offset],            mode = me.mode.toLowerCase();         // There are only offsets if the shadow element is present.         if (me.el && mode !== 'frame') {            result[0] = 0;            if (mode == 'drop') {                result[3] = 0;            }        }        return result;    },      /**     * @private     * CSS property used to set the box shadow.     */    boxShadowProperty: (function() {        var property = 'boxShadow',            style = document.documentElement.style;         if (!('boxShadow' in style)) {            if ('WebkitBoxShadow' in style) {                // Safari prior to version 5.1 and Chrome prior to version 10                 property = 'WebkitBoxShadow';            }            else if ('MozBoxShadow' in style) {                // FF 3.5 & 3.6                 property = 'MozBoxShadow';            }        }         return property;    }()),     beforeShow: function() {        var me = this,            style = me.el.dom.style,            shim = me.shim;         if (Ext.supports.CSS3BoxShadow) {            style[me.boxShadowProperty] = '0 0 ' + (me.offset + 2) + 'px #888';        } else {            style.filter = "progid:DXImageTransform.Microsoft.alpha(opacity=" + me.opacity + ") progid:DXImageTransform.Microsoft.Blur(pixelradius=" + (me.offset) + ")";        }         // if we are showing a shadow, and we already have a visible shim, we need to         // realign the shim to ensure that it includes the size of target and shadow els         if (shim) {            shim.realign();        }    },     /**     * Sets the opacity of the shadow     * @param {Number} opacity The opacity     */    setOpacity: function(opacity){        var el = this.el;         if (el) {            if (Ext.isIE && !Ext.supports.CSS3BoxShadow) {                opacity = Math.floor(opacity * 100 / 2) / 100;            }            this.opacity = opacity;            el.setOpacity(opacity);        }    }});