/**
 * A simple class used to mask any {@link Ext.Container}.
 *
 * This should rarely be used directly, instead look at the {@link Ext.Container#masked}
 * configuration.
 *
 * ## Example
 *
 * ```javascript
 * @example({framework: 'extjs'})
 * var container = Ext.create('Ext.Container', {
 *    html: 'My container!'
 * });
 *
 * // Add the container to the Viewport
 * Ext.Viewport.add(container);
 *
 * // Mask the container
 * container.setMasked(true);
 * ```
 */
Ext.define('Ext.Mask', {
    extend: 'Ext.Component',
    xtype: 'mask',
    requires: ['Ext.util.InputBlocker'],
 
    config: {
        /**
         * @cfg {Boolean} transparent True to make this mask transparent.
         */
        transparent: false,
 
        /**
         * @cfg
         * @hide
         */
        top: 0,
 
        /**
         * @cfg
         * @hide
         */
        left: 0,
 
        /**
         * @cfg
         * @hide
         */
        right: 0,
 
        /**
         * @cfg
         * @hide
         */
        bottom: 0
    },
 
    baseCls: Ext.baseCSSPrefix + 'mask',
 
    /**
     * @event tap
     * A tap event fired when a user taps on this mask
     * @param {Ext.Mask} this The mask instance
     * @param {Ext.EventObject} e The event object
     */
    initialize: function() {
        var me = this;
 
        me.callParent();
        me.element.on('tap', 'onTap', me);
        me.on('hide', 'onHide', me);
        me.on('show', 'onShow', me);
    },
 
    onHide: function(me) {
        var firstChild;
 
        // Enable Tabbing only if tabbing is disabled
        if (me.sender && me.tabbingDisabled) {
            me.sender.enableTabbing();
            me.tabbingDisabled = false;
        }
 
        Ext.util.InputBlocker.unblockInputs();
 
        // Oh how I loves the Android
        if (Ext.browser.is.AndroidStock4 && Ext.os.version.getMinor() === 0) {
            firstChild = this.element.getFirstChild();
 
            if (firstChild) {
                firstChild.redraw();
            }
        }
    },
 
    onShow: function(me) {
        // Disable Tabbing only if tabbing is enabled
        if (me.sender && !me.tabbingDisabled) {
            me.sender.disableTabbing();
            me.tabbingDisabled = true;
        }
    },
 
    onTap: function(e) {
        this.fireEvent('tap', this, e);
    },
 
    updateTransparent: function(transparent) {
        this.toggleCls(this.baseCls + '-transparent', transparent);
    }
});