/**
 * @class Ext.panel.Tool
 * @extends Ext.Component

This class is used to display small visual icons in the header of a panel. There are a set of
25 icons that can be specified by using the {@link #type} config. The {@link #handler} config
can be used to provide a function that will respond to any click events. In general, this class
will not be instantiated directly, rather it will be created by specifying the {@link Ext.panel.Panel#tools}
configuration on the Panel itself.

__Example Usage__

    Ext.create('Ext.panel.Panel', {
       width: 200,
       height: 200,
       renderTo: document.body,
       title: 'A Panel',
       tools: [{
           type: 'help',
           handler: function(){
               // show help here
           }
       }, {
           itemId: 'refresh',
           type: 'refresh',
           hidden: true,
           handler: function(){
               // do refresh
           }
       }, {
           type: 'search',
           handler: function(event, target, owner, tool){
               // do search
               owner.child('#refresh').show();
           }
       }]
    });

 * @markdown
 * @xtype tool
 */
Ext.define('Ext.panel.Tool', {
    extend: 'Ext.Component',
    requires: ['Ext.tip.QuickTipManager'],
    alias: 'widget.tool',

    baseCls: Ext.baseCSSPrefix + 'tool',
    disabledCls: Ext.baseCSSPrefix + 'tool-disabled',
    toolPressedCls: Ext.baseCSSPrefix + 'tool-pressed',
    toolOverCls: Ext.baseCSSPrefix + 'tool-over',
    ariaRole: 'button',
    renderTpl: ['<img src="{blank}" class="{baseCls}-{type}" role="presentation"/>'],
    
    /**
     * @cfg {Function} handler
     * A function to execute when the tool is clicked.
     * Arguments passed are:
     * <ul>
     * <li><b>event</b> : Ext.EventObject<div class="sub-desc">The click event.</div></li>
     * <li><b>toolEl</b> : Ext.core.Element<div class="sub-desc">The tool Element.</div></li>
     * <li><b>panel</b> : Ext.panel.Panel<div class="sub-desc">The host Panel</div></li>
     * <li><b>tool</b> : Ext.panel.Tool<div class="sub-desc">The tool object</div></li>
     * </ul>
     */
    
    /**
     * @cfg {Object} scope
     * The scope to execute the {@link #handler} function. Defaults to the tool.
     */
    
    /**
     * @cfg {String} type
     * The type of tool to render. The following types are available:
     * <ul>
     * <li>close</li>
     * <li>collapse</li>
     * <li>down</li>
     * <li>expand</li>
     * <li>gear</li>
     * <li>help</li>
     * <li>left</li>
     * <li>maximize</li>
     * <li>minimize</li>
     * <li>minus</li>
     * <li>move</li>
     * <li>next</li>
     * <li>pin</li>
     * <li>plus</li>
     * <li>prev</li>
     * <li>print</li>
     * <li>refresh</li>
     * <li>resize</li>
     * <li>restore</li>
     * <li>right</li>
     * <li>save</li>
     * <li>search</li>
     * <li>toggle</li>
     * <li>unpin</li>
     * <li>up</li>
     * </ul>
     */
    
    /**
     * @cfg {String/Object} tooltip 
     * The tooltip for the tool - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config object
     */
    
    /**
     * @cfg {Boolean} stopEvent
     * Defaults to true. Specify as false to allow click event to propagate.
     */
    stopEvent: true,

    initComponent: function() {
        var me = this;
        me.addEvents(
            /**
             * @event click
             * Fires when the tool is clicked
             * @param {Ext.panel.Tool} this
             * @param {Ext.EventObject} e The event object
             */
            'click'
        );
        
        //<debug>
        var types = [
            'close', 
            'collapse', 
            'down', 
            'expand', 
            'gear', 
            'help', 
            'left', 
            'maximize', 
            'minimize', 
            'minus', 
            'move', 
            'next', 
            'pin', 
            'plus', 
            'prev', 
            'print', 
            'refresh', 
            'resize', 
            'restore', 
            'right', 
            'save', 
            'search', 
            'toggle',
            'unpin', 
            'up'
        ];
        
        if (me.id && Ext.Array.indexOf(types, me.id) > -1) {
            Ext.global.console.warn('When specifying a tool you should use the type option, the id can conflict now that tool is a Component');
        }
        //</debug>
        
        me.type = me.type || me.id;

        Ext.applyIf(me.renderData, {
            baseCls: me.baseCls,
            blank: Ext.BLANK_IMAGE_URL,
            type: me.type
        });
        me.renderSelectors.toolEl = '.' + me.baseCls + '-' + me.type;
        me.callParent();
    },

    // inherit docs
    afterRender: function() {
        var me = this;
        me.callParent(arguments);
        if (me.qtip) {
            if (Ext.isObject(me.qtip)) {
                Ext.tip.QuickTipManager.register(Ext.apply({
                    target: me.id
                }, me.qtip));
            }
            else {
                me.toolEl.dom.qtip = me.qtip;
            }
        }

        me.mon(me.toolEl, {
            click: me.onClick,
            mousedown: me.onMouseDown,
            mouseover: me.onMouseOver,
            mouseout: me.onMouseOut,
            scope: me
        });
    },

    /**
     * Set the type of the tool. Allows the icon to be changed.
     * @param {String} type The new type. See the {@link #type} config.
     * @return {Ext.panel.Tool} this
     */
    setType: function(type) {
        var me = this;
        
        me.type = type;
        if (me.rendered) {
            me.toolEl.dom.className = me.baseCls + '-' + type;
        }
        return me;
    },

    /**
     * Binds this tool to a component.
     * @private
     * @param {Ext.Component} component The component
     */
    bindTo: function(component) {
        this.owner = component;
    },

    /**
     * Fired when the tool element is clicked
     * @private
     * @param {Ext.EventObject} e
     * @param {HTMLElement} target The target element
     */
    onClick: function(e, target) {
        var me = this,
            owner;
            
        if (me.disabled) {
            return false;
        }
        owner = me.owner || me.ownerCt;

        //remove the pressed + over class
        me.el.removeCls(me.toolPressedCls);
        me.el.removeCls(me.toolOverCls);

        if (me.stopEvent !== false) {
            e.stopEvent();
        }

        Ext.callback(me.handler, me.scope || me, [e, target, owner, me]);
        me.fireEvent('click', me, e);
        return true;
    },
    
    // inherit docs
    onDestroy: function(){
        if (Ext.isObject(this.tooltip)) {
            Ext.tip.QuickTipManager.unregister(this.id);
        }    
        this.callParent();
    },

    /**
     * Called then the user pressing their mouse button down on a tool
     * Adds the press class ({@link #toolPressedCls})
     * @private
     */
    onMouseDown: function() {
        if (this.disabled) {
            return false;
        }

        this.el.addCls(this.toolPressedCls);
    },

    /**
     * Called when the user rolls over a tool
     * Adds the over class ({@link #toolOverCls})
     * @private
     */
    onMouseOver: function() {
        if (this.disabled) {
            return false;
        }
        this.el.addCls(this.toolOverCls);
    },

    /**
     * Called when the user rolls out from a tool.
     * Removes the over class ({@link #toolOverCls})
     * @private
     */
    onMouseOut: function() {
        this.el.removeCls(this.toolOverCls);
    }
});