/**
 * {@link Ext.Menu}'s are used with {@link Ext.Viewport#setMenu}. A menu can be linked with any side of the screen (top, left, bottom or right)
 *  and will simply describe the contents of your menu. To use this menu you will call various menu related functions on the {@link Ext.Viewport}
 * such as {@link Ext.Viewport#showMenu}, {@link Ext.Viewport#hideMenu}, {@link Ext.Viewport#toggleMenu}, {@link Ext.Viewport#hideOtherMenus},
 * or {@link Ext.Viewport#hideAllMenus}.
 *
 *      @example preview
 *      var menu = Ext.create('Ext.Menu', {
 *          items: [
 *              {
 *                  text: 'Settings',
 *                  iconCls: 'settings'
 *              },
 *              {
 *                  text: 'New Item',
 *                  iconCls: 'compose'
 *              },
 *              {
 *                  text: 'Star',
 *                  iconCls: 'star'
 *              }
 *          ]
 *      });
 *
 *      Ext.Viewport.setMenu(menu, {
 *          side: 'left',
 *          reveal: true
 *      });
 *
 *      Ext.Viewport.showMenu('left');
 *
 * The {@link #defaultType} of a Menu item is a {@link Ext.Button button}.
 */
Ext.define('Ext.Menu', {
    extend: 'Ext.Sheet',
    xtype: 'menu',
    requires: ['Ext.Button'],
 
    config: {
        /**
         * @cfg
         * @inheritdoc
         */
        baseCls: Ext.baseCSSPrefix + 'menu',
 
        /**
         * @cfg
         * @inheritdoc
         */
        left: 0,
 
        /**
         * @cfg
         * @inheritdoc
         */
        right: 0,
 
        /**
         * @cfg
         * @inheritdoc
         */
        bottom: 0,
 
        /**
         * @cfg
         * @inheritdoc
         */
        height: 'auto',
 
        /**
         * @cfg
         * @inheritdoc
         */
        width: 'auto',
 
        /**
         * @cfg
         * @inheritdoc
         */
        defaultType: 'button',
 
        /**
         * @hide
         */
        showAnimation: null,
 
        /**
         * @hide
         */
        hideAnimation: null,
 
        /**
         * @hide
         */
        centered: false,
 
        /**
         * @hide
         */
        modal: true,
 
        /**
         * @hide
         */
        hidden: true,
 
        /**
         * @hide
         */
        hideOnMaskTap: true,
 
        /**
         * @hide
         */
        translatable: {
            translationMethod: null
        }
    },
 
    constructor: function() {
        this.config.translatable.translationMethod = 'csstransform';
        this.callParent(arguments);
    },
 
    updateUi: function(newUi, oldUi) {
        this.callParent(arguments);
 
        if (newUi != oldUi && Ext.theme.is.Blackberry) {
            if (newUi == 'context') {
                this.innerElement.swapCls('x-vertical', 'x-horizontal');
            }
            else if (newUi == 'application') {
                this.innerElement.swapCls('x-horizontal', 'x-vertical');
            }
        }
    },
 
    updateHideOnMaskTap : function(hide) {
        var mask = this.getModal();
 
        if (mask) {
            mask[hide ? 'on' : 'un'].call(mask, 'tap', function() {
                Ext.Viewport.hideMenu(this.$side);
            }, this);
        }
    },
 
    /**
     * Only fire the hide event if it is initialized
     */
    updateHidden: function() {
        if (this.initialized) {
            this.callParent(arguments);
        }
    }
});