/**
 * A Trigger that contains 2 clickable elements inside in the form of a "up" and a "down"
 * trigger.
 */
Ext.define('Ext.form.trigger.Spinner', {
    extend: 'Ext.form.trigger.Trigger',
    alias: 'trigger.spinner',
 
    cls: Ext.baseCSSPrefix + 'form-trigger-spinner',
    spinnerCls: Ext.baseCSSPrefix + 'form-spinner',
    spinnerUpCls: Ext.baseCSSPrefix + 'form-spinner-up',
    spinnerDownCls: Ext.baseCSSPrefix + 'form-spinner-down',
    focusCls: Ext.baseCSSPrefix + 'form-spinner-focus',
    overCls: Ext.baseCSSPrefix + 'form-spinner-over',
    clickCls: Ext.baseCSSPrefix + 'form-spinner-click',
 
    // restore focus to the input element on spin end. 
    focusFieldOnClick: true,
 
    /**
     * @cfg {Function/String} [upHandler=undefined]
     * The handler for the 'up' button
     * @controllable
     */
 
    /**
     * @cfg {Function/String} [downHandler=undefined]
     * The handler for the 'down' button
     * @controllable
     */
 
    /**
     * @cfg {Boolean} vertical 
     * True to layout the spinner in a vertical format.
     *
     * **Note:** This is not intended to be configured on an instance level, but is
     * meant to be overridden by mobile-friendly themes that provide styling for
     * vertically oriented triggers.
     */
    vertical: true,
 
    bodyTpl:
        '<tpl if="vertical">' +
            '<div class="{spinnerCls} {spinnerCls}-{ui} {spinnerUpCls} {spinnerUpCls}-{ui}' +
                ' {childElCls} {upDisabledCls}"></div>' +
        '</tpl>' +
        '<div class="{spinnerCls} {spinnerCls}-{ui} {spinnerDownCls} {spinnerDownCls}-{ui}' +
                ' {childElCls} {downDisabledCls}"></div>' +
        '<tpl if="!vertical">' +
            '<div class="{spinnerCls} {spinnerCls}-{ui} {spinnerUpCls} {spinnerUpCls}-{ui}' +
                ' {childElCls} {upDisabledCls}"></div>' +
        '</tpl>',
 
    destroy: function() {
        var me = this;
 
        if (me.spinnerEl) {
            me.spinnerEl.destroy();
            me.spinnerEl = me.upEl = me.downEl = null;
        }
 
        me.callParent();
    },
 
    getBodyRenderData: function() {
        var me = this;
 
        return {
            vertical: me.vertical,
            upDisabledCls: me.upEnabled ? '' : (me.spinnerUpCls + '-disabled'),
            downDisabledCls: me.downEnabled ? '' : (me.spinnerDownCls + '-disabled'),
            spinnerCls: me.spinnerCls,
            spinnerUpCls: me.spinnerUpCls,
            spinnerDownCls: me.spinnerDownCls
        };
    },
 
    getStateEl: function() {
        return this.spinnerEl;
    },
 
    onClick: function () {
        var me = this,
            args = arguments,
            e = me.clickRepeater ? args[1] : args[0],
            field = me.field;
 
        if (!field.readOnly && !field.disabled) {
            if (me.upEl.contains(e.target)) {
                Ext.callback(me.upHandler, me.scope, [field, me, e], 0, field);
            } else if (me.downEl.contains(e.target)) {
                Ext.callback(me.downHandler, me.scope, [field, me, e], 0, field);
            }
        }
 
        field.inputEl.focus();
    },
 
    onFieldRender: function() {
        var me = this,
            vertical = me.vertical,
            spinnerEl, elements;
 
        me.callParent();
 
        /**
         * @property {Ext.dom.CompositeElement} spinnerEl
         * @private
         * The "up" spinner element
         */
        spinnerEl = me.spinnerEl = me.el.select('.' + me.spinnerCls, true);
        elements = spinnerEl.elements;
 
        me.upEl = vertical ? elements[0] : elements[1];
        me.downEl = vertical ? elements[1] : elements[0];
    },
 
    /**
     * @private
     */
    setUpEnabled: function(enabled) {
        this.upEl[enabled ? 'removeCls' : 'addCls'](this.spinnerUpCls + '-disabled');
    },
 
    /**
     * @private
     */
    setDownEnabled: function(enabled) {
        this.downEl[enabled ? 'removeCls' : 'addCls'](this.spinnerDownCls + '-disabled');
    }
 
});