    /**
     * @class Ext.Resizable
     * @extends Ext.util.Observable
     * <p>Applies drag handles to an element to make it resizable. The drag handles are inserted into the element
     * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap
     * the textarea in a div and set 'resizeChild' to true (or to the id of the element), <b>or</b> set wrap:true in your config and
     * the element will be wrapped for you automatically.</p>
     * <p>Here is the list of valid resize handles:</p>
     * <pre>
    Value   Description
    ------  -------------------
     'n'     north
     's'     south
     'e'     east
     'w'     west
     'nw'    northwest
     'sw'    southwest
     'se'    southeast
     'ne'    northeast
     'all'   all
    </pre>
     * <p>Here's an example showing the creation of a typical Resizable:</p>
     * <pre><code>
    var resizer = new Ext.Resizable('element-id', {
        handles: 'all',
        minWidth: 200,
        minHeight: 100,
        maxWidth: 500,
        maxHeight: 400,
        pinned: true
    });
    resizer.on('resize', myHandler);
    </code></pre>
     * <p>To hide a particular handle, set its display to none in CSS, or through script:<br>
     * resizer.east.setDisplayed(false);</p>
     * @constructor
     * Create a new resizable component
     * @param {Mixed} el The id or element to resize
     * @param {Object} config configuration options
      */
    Ext.Resizable = Ext.extend(Ext.util.Observable, {

        constructor: function(el, config){
            this.el = Ext.get(el);
            if(config && config.wrap){
                config.resizeChild = this.el;
                this.el = this.el.wrap(typeof config.wrap == 'object' ? config.wrap : {cls:'xresizable-wrap'});
                this.el.id = this.el.dom.id = config.resizeChild.id + '-rzwrap';
                this.el.setStyle('overflow', 'hidden');
                this.el.setPositioning(config.resizeChild.getPositioning());
                config.resizeChild.clearPositioning();
                if(!config.width || !config.height){
                    var csize = config.resizeChild.getSize();
                    this.el.setSize(csize.width, csize.height);
                }
                if(config.pinned && !config.adjustments){
                    config.adjustments = 'auto';
                }
            }

            /**
             * The proxy Element that is resized in place of the real Element during the resize operation.
             * This may be queried using {@link Ext.Element#getBox} to provide the new area to resize to.
             * Read only.
             * @type Ext.Element
             * @property proxy
             */
            this.proxy = this.el.createProxy({tag: 'div', cls: 'x-resizable-proxy', id: this.el.id + '-rzproxy'}, Ext.getBody());
            this.proxy.unselectable();
            this.proxy.enableDisplayMode('block');

            Ext.apply(this, config);

            if(this.pinned){
                this.disableTrackOver = true;
                this.el.addClass('x-resizable-pinned');
            }
            // if the element isn't positioned, make it relative
            var position = this.el.getStyle('position');
            if(position != 'absolute' && position != 'fixed'){
                this.el.setStyle('position', 'relative');
            }
            if(!this.handles){ // no handles passed, must be legacy style
                this.handles = 's,e,se';
                if(this.multiDirectional){
                    this.handles += ',n,w';
                }
            }
            if(this.handles == 'all'){
                this.handles = 'n s e w ne nw se sw';
            }
            var hs = this.handles.split(/\s*?[,;]\s*?| /);
            var ps = Ext.Resizable.positions;
            for(var i = 0, len = hs.length; i < len; i++){
                if(hs[i] && ps[hs[i]]){
                    var pos = ps[hs[i]];
                    this[pos] = new Ext.Resizable.Handle(this, pos, this.disableTrackOver, this.transparent, this.handleCls);
                }
            }
            // legacy
            this.corner = this.southeast;

            if(this.handles.indexOf('n') != -1 || this.handles.indexOf('w') != -1){
                this.updateBox = true;
            }

            this.activeHandle = null;

            if(this.resizeChild){
                if(typeof this.resizeChild == 'boolean'){
                    this.resizeChild = Ext.get(this.el.dom.firstChild, true);
                }else{
                    this.resizeChild = Ext.get(this.resizeChild, true);
                }
            }

            if(this.adjustments == 'auto'){
                var rc = this.resizeChild;
                var hw = this.west, he = this.east, hn = this.north, hs = this.south;
                if(rc && (hw || hn)){
                    rc.position('relative');
                    rc.setLeft(hw ? hw.el.getWidth() : 0);
                    rc.setTop(hn ? hn.el.getHeight() : 0);
                }
                this.adjustments = [
                    (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0),
                    (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1
                ];
            }

            if(this.draggable){
                this.dd = this.dynamic ?
                    this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
                this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
                if(this.constrainTo){
                    this.dd.constrainTo(this.constrainTo);
                }
            }

            this.addEvents(
                /**
                 * @event beforeresize
                 * Fired before resize is allowed. Set {@link #enabled} to false to cancel resize.
                 * @param {Ext.Resizable} this
                 * @param {Ext.EventObject} e The mousedown event
                 */
                'beforeresize',
                /**
                 * @event resize
                 * Fired after a resize.
                 * @param {Ext.Resizable} this
                 * @param {Number} width The new width
                 * @param {Number} height The new height
                 * @param {Ext.EventObject} e The mouseup event
                 */
                'resize'
            );

            if(this.width !== null && this.height !== null){
                this.resizeTo(this.width, this.height);
            }else{
                this.updateChildSize();
            }
            if(Ext.isIE){
                this.el.dom.style.zoom = 1;
            }
            Ext.Resizable.superclass.constructor.call(this);
        },

        /**
         * @cfg {Array/String} adjustments String 'auto' or an array [width, height] with values to be <b>added</b> to the
         * resize operation's new size (defaults to <tt>[0, 0]</tt>)
         */
        adjustments : [0, 0],
        /**
         * @cfg {Boolean} animate True to animate the resize (not compatible with dynamic sizing, defaults to false)
         */
        animate : false,
        /**
         * @cfg {Mixed} constrainTo Constrain the resize to a particular element
         */
        /**
         * @cfg {Boolean} disableTrackOver True to disable mouse tracking. This is only applied at config time. (defaults to false)
         */
        disableTrackOver : false,
        /**
         * @cfg {Boolean} draggable Convenience to initialize drag drop (defaults to false)
         */
        draggable: false,
        /**
         * @cfg {Number} duration Animation duration if animate = true (defaults to 0.35)
         */
        duration : 0.35,
        /**
         * @cfg {Boolean} dynamic True to resize the element while dragging instead of using a proxy (defaults to false)
         */
        dynamic : false,
        /**
         * @cfg {String} easing Animation easing if animate = true (defaults to <tt>'easingOutStrong'</tt>)
         */
        easing : 'easeOutStrong',
        /**
         * @cfg {Boolean} enabled False to disable resizing (defaults to true)
         */
        enabled : true,
        /**
         * @property enabled Writable. False if resizing is disabled.
         * @type Boolean
         */
        /**
         * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined).
         * Specify either <tt>'all'</tt> or any of <tt>'n s e w ne nw se sw'</tt>.
         */
        handles : false,
        /**
         * @cfg {Boolean} multiDirectional <b>Deprecated</b>.  Deprecated style of adding multi-direction resize handles.
         */
        multiDirectional : false,
        /**
         * @cfg {Number} height The height of the element in pixels (defaults to null)
         */
        height : null,
        /**
         * @cfg {Number} width The width of the element in pixels (defaults to null)
         */
        width : null,
        /**
         * @cfg {Number} heightIncrement The increment to snap the height resize in pixels
         * (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.
         */
        heightIncrement : 0,
        /**
         * @cfg {Number} widthIncrement The increment to snap the width resize in pixels
         * (only applies if <code>{@link #dynamic}==true</code>). Defaults to <tt>0</tt>.
         */
        widthIncrement : 0,
        /**
         * @cfg {Number} minHeight The minimum height for the element (defaults to 5)
         */
        minHeight : 5,
        /**
         * @cfg {Number} minWidth The minimum width for the element (defaults to 5)
         */
        minWidth : 5,
        /**
         * @cfg {Number} maxHeight The maximum height for the element (defaults to 10000)
         */
        maxHeight : 10000,
        /**
         * @cfg {Number} maxWidth The maximum width for the element (defaults to 10000)
         */
        maxWidth : 10000,
        /**
         * @cfg {Number} minX The minimum x for the element (defaults to 0)
         */
        minX: 0,
        /**
         * @cfg {Number} minY The minimum x for the element (defaults to 0)
         */
        minY: 0,
        /**
         * @cfg {Boolean} pinned True to ensure that the resize handles are always visible, false to display them only when the
         * user mouses over the resizable borders. This is only applied at config time. (defaults to false)
         */
        pinned : false,
        /**
         * @cfg {Boolean} preserveRatio True to preserve the original ratio between height
         * and width during resize (defaults to false)
         */
        preserveRatio : false,
        /**
         * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false)
         */
        resizeChild : false,
        /**
         * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false)
         */
        transparent: false,
        /**
         * @cfg {Ext.lib.Region} resizeRegion Constrain the resize to a particular region
         */
        /**
         * @cfg {Boolean} wrap True to wrap an element with a div if needed (required for textareas and images, defaults to false)
         * in favor of the handles config option (defaults to false)
         */
        /**
         * @cfg {String} handleCls A css class to add to each handle. Defaults to <tt>''</tt>.
         */

        /**
         * Perform a manual resize and fires the 'resize' event.
         * @param {Number} width
         * @param {Number} height
         */
        resizeTo : function(width, height){
            this.el.setSize(width, height);
            this.updateChildSize();
            this.fireEvent('resize', this, width, height, null);
        },

        // private
        startSizing : function(e, handle){
            this.fireEvent('beforeresize', this, e);
            if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler

                if(!this.overlay){
                    this.overlay = this.el.createProxy({tag: 'div', cls: 'x-resizable-overlay', html: '&#160;'}, Ext.getBody());
                    this.overlay.unselectable();
                    this.overlay.enableDisplayMode('block');
                    this.overlay.on({
                        scope: this,
                        mousemove: this.onMouseMove,
                        mouseup: this.onMouseUp
                    });
                }
                this.overlay.setStyle('cursor', handle.el.getStyle('cursor'));

                this.resizing = true;
                this.startBox = this.el.getBox();
                this.startPoint = e.getXY();
                this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
                                (this.startBox.y + this.startBox.height) - this.startPoint[1]];

                this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
                this.overlay.show();

                if(this.constrainTo) {
                    var ct = Ext.get(this.constrainTo);
                    this.resizeRegion = ct.getRegion().adjust(
                        ct.getFrameWidth('t'),
                        ct.getFrameWidth('l'),
                        -ct.getFrameWidth('b'),
                        -ct.getFrameWidth('r')
                    );
                }

                this.proxy.setStyle('visibility', 'hidden'); // workaround display none
                this.proxy.show();
                this.proxy.setBox(this.startBox);
                if(!this.dynamic){
                    this.proxy.setStyle('visibility', 'visible');
                }
            }
        },

        // private
        onMouseDown : function(handle, e){
            if(this.enabled){
                e.stopEvent();
                this.activeHandle = handle;
                this.startSizing(e, handle);
            }
        },

        // private
        onMouseUp : function(e){
            this.activeHandle = null;
            var size = this.resizeElement();
            this.resizing = false;
            this.handleOut();
            this.overlay.hide();
            this.proxy.hide();
            this.fireEvent('resize', this, size.width, size.height, e);
        },

        // private
        updateChildSize : function(){
            if(this.resizeChild){
                var el = this.el;
                var child = this.resizeChild;
                var adj = this.adjustments;
                if(el.dom.offsetWidth){
                    var b = el.getSize(true);
                    child.setSize(b.width+adj[0], b.height+adj[1]);
                }
                // Second call here for IE
                // The first call enables instant resizing and
                // the second call corrects scroll bars if they
                // exist
                if(Ext.isIE9m){
                    setTimeout(function(){
                        if(el.dom.offsetWidth){
                            var b = el.getSize(true);
                            child.setSize(b.width+adj[0], b.height+adj[1]);
                        }
                    }, 10);
                }
            }
        },

        // private
        snap : function(value, inc, min){
            if(!inc || !value){
                return value;
            }
            var newValue = value;
            var m = value % inc;
            if(m > 0){
                if(m > (inc/2)){
                    newValue = value + (inc-m);
                }else{
                    newValue = value - m;
                }
            }
            return Math.max(min, newValue);
        },

        /**
         * <p>Performs resizing of the associated Element. This method is called internally by this
         * class, and should not be called by user code.</p>
         * <p>If a Resizable is being used to resize an Element which encapsulates a more complex UI
         * component such as a Panel, this method may be overridden by specifying an implementation
         * as a config option to provide appropriate behaviour at the end of the resize operation on
         * mouseup, for example resizing the Panel, and relaying the Panel's content.</p>
         * <p>The new area to be resized to is available by examining the state of the {@link #proxy}
         * Element. Example:
    <pre><code>
    new Ext.Panel({
        title: 'Resize me',
        x: 100,
        y: 100,
        renderTo: Ext.getBody(),
        floating: true,
        frame: true,
        width: 400,
        height: 200,
        listeners: {
            render: function(p) {
                new Ext.Resizable(p.getEl(), {
                    handles: 'all',
                    pinned: true,
                    transparent: true,
                    resizeElement: function() {
                        var box = this.proxy.getBox();
                        p.updateBox(box);
                        if (p.layout) {
                            p.doLayout();
                        }
                        return box;
                    }
               });
           }
        }
    }).show();
    </code></pre>
         */
        resizeElement : function(){
            var box = this.proxy.getBox();
            if(this.updateBox){
                this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
            }else{
                this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
            }
            this.updateChildSize();
            if(!this.dynamic){
                this.proxy.hide();
            }
            if(this.draggable && this.constrainTo){
                this.dd.resetConstraints();
                this.dd.constrainTo(this.constrainTo);
            }
            return box;
        },

        // private
        constrain : function(v, diff, m, mx){
            if(v - diff < m){
                diff = v - m;
            }else if(v - diff > mx){
                diff = v - mx;
            }
            return diff;
        },

        // private
        onMouseMove : function(e){
            if(this.enabled && this.activeHandle){
                try{// try catch so if something goes wrong the user doesn't get hung

                if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {
                    return;
                }

                //var curXY = this.startPoint;
                var curSize = this.curSize || this.startBox,
                    x = this.startBox.x, y = this.startBox.y,
                    ox = x,
                    oy = y,
                    w = curSize.width,
                    h = curSize.height,
                    ow = w,
                    oh = h,
                    mw = this.minWidth,
                    mh = this.minHeight,
                    mxw = this.maxWidth,
                    mxh = this.maxHeight,
                    wi = this.widthIncrement,
                    hi = this.heightIncrement,
                    eventXY = e.getXY(),
                    diffX = -(this.startPoint[0] - Math.max(this.minX, eventXY[0])),
                    diffY = -(this.startPoint[1] - Math.max(this.minY, eventXY[1])),
                    pos = this.activeHandle.position,
                    tw,
                    th;

                switch(pos){
                    case 'east':
                        w += diffX;
                        w = Math.min(Math.max(mw, w), mxw);
                        break;
                    case 'south':
                        h += diffY;
                        h = Math.min(Math.max(mh, h), mxh);
                        break;
                    case 'southeast':
                        w += diffX;
                        h += diffY;
                        w = Math.min(Math.max(mw, w), mxw);
                        h = Math.min(Math.max(mh, h), mxh);
                        break;
                    case 'north':
                        diffY = this.constrain(h, diffY, mh, mxh);
                        y += diffY;
                        h -= diffY;
                        break;
                    case 'west':
                        diffX = this.constrain(w, diffX, mw, mxw);
                        x += diffX;
                        w -= diffX;
                        break;
                    case 'northeast':
                        w += diffX;
                        w = Math.min(Math.max(mw, w), mxw);
                        diffY = this.constrain(h, diffY, mh, mxh);
                        y += diffY;
                        h -= diffY;
                        break;
                    case 'northwest':
                        diffX = this.constrain(w, diffX, mw, mxw);
                        diffY = this.constrain(h, diffY, mh, mxh);
                        y += diffY;
                        h -= diffY;
                        x += diffX;
                        w -= diffX;
                        break;
                   case 'southwest':
                        diffX = this.constrain(w, diffX, mw, mxw);
                        h += diffY;
                        h = Math.min(Math.max(mh, h), mxh);
                        x += diffX;
                        w -= diffX;
                        break;
                }

                var sw = this.snap(w, wi, mw);
                var sh = this.snap(h, hi, mh);
                if(sw != w || sh != h){
                    switch(pos){
                        case 'northeast':
                            y -= sh - h;
                        break;
                        case 'north':
                            y -= sh - h;
                            break;
                        case 'southwest':
                            x -= sw - w;
                        break;
                        case 'west':
                            x -= sw - w;
                            break;
                        case 'northwest':
                            x -= sw - w;
                            y -= sh - h;
                        break;
                    }
                    w = sw;
                    h = sh;
                }

                if(this.preserveRatio){
                    switch(pos){
                        case 'southeast':
                        case 'east':
                            h = oh * (w/ow);
                            h = Math.min(Math.max(mh, h), mxh);
                            w = ow * (h/oh);
                           break;
                        case 'south':
                            w = ow * (h/oh);
                            w = Math.min(Math.max(mw, w), mxw);
                            h = oh * (w/ow);
                            break;
                        case 'northeast':
                            w = ow * (h/oh);
                            w = Math.min(Math.max(mw, w), mxw);
                            h = oh * (w/ow);
                        break;
                        case 'north':
                            tw = w;
                            w = ow * (h/oh);
                            w = Math.min(Math.max(mw, w), mxw);
                            h = oh * (w/ow);
                            x += (tw - w) / 2;
                            break;
                        case 'southwest':
                            h = oh * (w/ow);
                            h = Math.min(Math.max(mh, h), mxh);
                            tw = w;
                            w = ow * (h/oh);
                            x += tw - w;
                            break;
                        case 'west':
                            th = h;
                            h = oh * (w/ow);
                            h = Math.min(Math.max(mh, h), mxh);
                            y += (th - h) / 2;
                            tw = w;
                            w = ow * (h/oh);
                            x += tw - w;
                           break;
                        case 'northwest':
                            tw = w;
                            th = h;
                            h = oh * (w/ow);
                            h = Math.min(Math.max(mh, h), mxh);
                            w = ow * (h/oh);
                            y += th - h;
                            x += tw - w;
                            break;

                    }
                }
                this.proxy.setBounds(x, y, w, h);
                if(this.dynamic){
                    this.resizeElement();
                }
                }catch(ex){}
            }
        },

        // private
        handleOver : function(){
            if(this.enabled){
                this.el.addClass('x-resizable-over');
            }
        },

        // private
        handleOut : function(){
            if(!this.resizing){
                this.el.removeClass('x-resizable-over');
            }
        },

        /**
         * Returns the element this component is bound to.
         * @return {Ext.Element}
         */
        getEl : function(){
            return this.el;
        },

        /**
         * Returns the resizeChild element (or null).
         * @return {Ext.Element}
         */
        getResizeChild : function(){
            return this.resizeChild;
        },

        /**
         * Destroys this resizable. If the element was wrapped and
         * removeEl is not true then the element remains.
         * @param {Boolean} removeEl (optional) true to remove the element from the DOM
         */
        destroy : function(removeEl){
            Ext.destroy(this.dd, this.overlay, this.proxy);
            this.overlay = null;
            this.proxy = null;

            var ps = Ext.Resizable.positions;
            for(var k in ps){
                if(typeof ps[k] != 'function' && this[ps[k]]){
                    this[ps[k]].destroy();
                }
            }
            if(removeEl){
                this.el.update('');
                Ext.destroy(this.el);
                this.el = null;
            }
            this.purgeListeners();
        },

        syncHandleHeight : function(){
            var h = this.el.getHeight(true);
            if(this.west){
                this.west.el.setHeight(h);
            }
            if(this.east){
                this.east.el.setHeight(h);
            }
        }
    });

    // private
    // hash to map config positions to true positions
    Ext.Resizable.positions = {
        n: 'north', s: 'south', e: 'east', w: 'west', se: 'southeast', sw: 'southwest', nw: 'northwest', ne: 'northeast'
    };

    Ext.Resizable.Handle = Ext.extend(Object, {
        constructor : function(rz, pos, disableTrackOver, transparent, cls){
           if(!this.tpl){
                // only initialize the template if resizable is used
                var tpl = Ext.DomHelper.createTemplate(
                    {tag: 'div', cls: 'x-resizable-handle x-resizable-handle-{0}'}
                );
                tpl.compile();
                Ext.Resizable.Handle.prototype.tpl = tpl;
            }
            this.position = pos;
            this.rz = rz;
            this.el = this.tpl.append(rz.el.dom, [this.position], true);
            this.el.unselectable();
            if(transparent){
                this.el.setOpacity(0);
            }
            if(!Ext.isEmpty(cls)){
                this.el.addClass(cls);
            }
            this.el.on('mousedown', this.onMouseDown, this);
            if(!disableTrackOver){
                this.el.on({
                    scope: this,
                    mouseover: this.onMouseOver,
                    mouseout: this.onMouseOut
                });
            }
        },

        // private
        afterResize : function(rz){
            // do nothing
        },
        // private
        onMouseDown : function(e){
            this.rz.onMouseDown(this, e);
        },
        // private
        onMouseOver : function(e){
            this.rz.handleOver(this, e);
        },
        // private
        onMouseOut : function(e){
            this.rz.handleOut(this, e);
        },
        // private
        destroy : function(){
            Ext.destroy(this.el);
            this.el = null;
        }
    });