Upgrade to ExtJS 3.2.1 - Released 04/27/2010
[extjs.git] / docs / source / Fx.html
index 0ffd66c..d360de6 100644 (file)
 <html>
 <head>
 <html>
 <head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
   <title>The source code</title>
     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
 </head>
 <body  onload="prettyPrint();">
     <pre class="prettyprint lang-js">/*!
   <title>The source code</title>
     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
 </head>
 <body  onload="prettyPrint();">
     <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.2.1
+ * Copyright(c) 2006-2010 Ext JS, Inc.
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
-(function(){\r
-    // contants\r
-    var NULL = null,\r
-        UNDEFINED = undefined,\r
-        TRUE = true,\r
-        FALSE = false,\r
-        SETX = "setX",\r
-        SETY = "setY",\r
-        SETXY = "setXY",\r
-        LEFT = "left",\r
-        BOTTOM = "bottom",\r
-        TOP = "top",\r
-        RIGHT = "right",\r
-        HEIGHT = "height",\r
-        WIDTH = "width",\r
-        POINTS = "points",\r
-        HIDDEN = "hidden",\r
-        ABSOLUTE = "absolute",\r
-        VISIBLE = "visible",\r
-        MOTION = "motion",\r
-        POSITION = "position",\r
-        EASEOUT = "easeOut",\r
-        /*\r
-         * Use a light flyweight here since we are using so many callbacks and are always assured a DOM element\r
-         */\r
-        flyEl = new Ext.Element.Flyweight(),\r
-        queues = {},\r
-        getObject = function(o){\r
-            return o || {};\r
-        },\r
-        fly = function(dom){\r
-            flyEl.dom = dom;\r
-            flyEl.id = Ext.id(dom);\r
-            return flyEl;\r
-        },\r
-        /*\r
-         * Queueing now stored outside of the element due to closure issues\r
-         */\r
-        getQueue = function(id){\r
-            if(!queues[id]){\r
-                queues[id] = [];\r
-            }\r
-            return queues[id];\r
-        },\r
-        setQueue = function(id, value){\r
-            queues[id] = value;\r
-        };\r
-        \r
-//Notifies Element that fx methods are available\r
-Ext.enableFx = TRUE;\r
-\r
-<div id="cls-Ext.Fx"></div>/**\r
- * @class Ext.Fx\r
- * <p>A class to provide basic animation and visual effects support.  <b>Note:</b> This class is automatically applied\r
- * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}.\r
- * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx <b>must</b> be\r
- * {@link Ext#enableFx included} in order for the Element effects to work.</p><br/>\r
- * \r
- * <p><b><u>Method Chaining</u></b></p>\r
- * <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that\r
- * they return the Element object itself as the method return value, it is not always possible to mix the two in a single\r
- * method chain.  The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.\r
- * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately.  For this reason,\r
- * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the\r
- * expected results and should be done with care.  Also see <tt>{@link #callback}</tt>.</p><br/>\r
- *\r
- * <p><b><u>Anchor Options for Motion Effects</u></b></p>\r
- * <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element\r
- * that will serve as either the start or end point of the animation.  Following are all of the supported anchor positions:</p>\r
-<pre>\r
-Value  Description\r
------  -----------------------------\r
-tl     The top left corner\r
-t      The center of the top edge\r
-tr     The top right corner\r
-l      The center of the left edge\r
-r      The center of the right edge\r
-bl     The bottom left corner\r
-b      The center of the bottom edge\r
-br     The bottom right corner\r
-</pre>\r
- * <b>Note</b>: some Fx methods accept specific custom config parameters.  The options shown in the Config Options\r
- * section below are common options that can be passed to any Fx method unless otherwise noted.</b>\r
- * \r
- * @cfg {Function} callback A function called when the effect is finished.  Note that effects are queued internally by the\r
- * Fx class, so a callback is not required to specify another effect -- effects can simply be chained together\r
- * and called in sequence (see note for <b><u>Method Chaining</u></b> above), for example:<pre><code>\r
- * el.slideIn().highlight();\r
- * </code></pre>\r
- * The callback is intended for any additional code that should run once a particular effect has completed. The Element\r
- * being operated upon is passed as the first parameter.\r
- * \r
- * @cfg {Object} scope The scope (<code>this</code> reference) in which the <tt>{@link #callback}</tt> function is executed. Defaults to the browser window.\r
- * \r
- * @cfg {String} easing A valid Ext.lib.Easing value for the effect:</p><div class="mdetail-params"><ul>\r
- * <li><b><tt>backBoth</tt></b></li>\r
- * <li><b><tt>backIn</tt></b></li>\r
- * <li><b><tt>backOut</tt></b></li>\r
- * <li><b><tt>bounceBoth</tt></b></li>\r
- * <li><b><tt>bounceIn</tt></b></li>\r
- * <li><b><tt>bounceOut</tt></b></li>\r
- * <li><b><tt>easeBoth</tt></b></li>\r
- * <li><b><tt>easeBothStrong</tt></b></li>\r
- * <li><b><tt>easeIn</tt></b></li>\r
- * <li><b><tt>easeInStrong</tt></b></li>\r
- * <li><b><tt>easeNone</tt></b></li>\r
- * <li><b><tt>easeOut</tt></b></li>\r
- * <li><b><tt>easeOutStrong</tt></b></li>\r
- * <li><b><tt>elasticBoth</tt></b></li>\r
- * <li><b><tt>elasticIn</tt></b></li>\r
- * <li><b><tt>elasticOut</tt></b></li>\r
- * </ul></div>\r
- *\r
- * @cfg {String} afterCls A css class to apply after the effect\r
- * @cfg {Number} duration The length of time (in seconds) that the effect should last\r
- * \r
- * @cfg {Number} endOpacity Only applicable for {@link #fadeIn} or {@link #fadeOut}, a number between\r
- * <tt>0</tt> and <tt>1</tt> inclusive to configure the ending opacity value.\r
- *  \r
- * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes\r
- * @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to \r
- * effects that end with the element being visually hidden, ignored otherwise)\r
- * @cfg {String/Object/Function} afterStyle A style specification string, e.g. <tt>"width:100px"</tt>, or an object\r
- * in the form <tt>{width:"100px"}</tt>, or a function which returns such a specification that will be applied to the\r
- * Element after the effect finishes.\r
- * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs\r
- * @cfg {Boolean} concurrent Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence\r
- * @cfg {Boolean} stopFx Whether preceding effects should be stopped and removed before running current effect (only applies to non blocking effects)\r
- */\r
-Ext.Fx = {\r
-    \r
-    // private - calls the function taking arguments from the argHash based on the key.  Returns the return value of the function.\r
-    //           this is useful for replacing switch statements (for example).\r
-    switchStatements : function(key, fn, argHash){\r
-        return fn.apply(this, argHash[key]);\r
-    },\r
-    \r
-    /**\r
-     * Slides the element into view.  An anchor point can be optionally passed to set the point of\r
-     * origin for the slide effect.  This function automatically handles wrapping the element with\r
-     * a fixed-size container if needed.  See the Fx class overview for valid anchor point options.\r
-     * Usage:\r
-     *<pre><code>\r
-// default: slide the element in from the top\r
-el.slideIn();\r
-\r
-// custom: slide the element in from the right with a 2-second duration\r
-el.slideIn('r', { duration: 2 });\r
-\r
-// common config options shown with default values\r
-el.slideIn('t', {\r
-    easing: 'easeOut',\r
-    duration: .5\r
-});\r
-</code></pre>\r
-     * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')\r
-     * @param {Object} options (optional) Object literal with any of the Fx config options\r
-     * @return {Ext.Element} The Element\r
-     */\r
-    slideIn : function(anchor, o){ \r
-        o = getObject(o);\r
-        var me = this,\r
-            dom = me.dom,\r
-            st = dom.style,\r
-            xy,\r
-            r,\r
-            b,              \r
-            wrap,               \r
-            after,\r
-            st,\r
-            args, \r
-            pt,\r
-            bw,\r
-            bh;\r
-            \r
-        anchor = anchor || "t";\r
-\r
-        me.queueFx(o, function(){            \r
-            xy = fly(dom).getXY();\r
-            // fix display to visibility\r
-            fly(dom).fixDisplay();            \r
-            \r
-            // restore values after effect\r
-            r = fly(dom).getFxRestore();      \r
-            b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};\r
-            b.right = b.x + b.width;\r
-            b.bottom = b.y + b.height;\r
-            \r
-            // fixed size for slide\r
-            fly(dom).setWidth(b.width).setHeight(b.height);            \r
-            \r
-            // wrap if needed\r
-            wrap = fly(dom).fxWrap(r.pos, o, HIDDEN);\r
-            \r
-            st.visibility = VISIBLE;\r
-            st.position = ABSOLUTE;\r
-            \r
-            // clear out temp styles after slide and unwrap\r
-            function after(){\r
-                 fly(dom).fxUnwrap(wrap, r.pos, o);\r
-                 st.width = r.width;\r
-                 st.height = r.height;\r
-                 fly(dom).afterFx(o);\r
-            }\r
-            \r
-            // time to calculate the positions        \r
-            pt = {to: [b.x, b.y]}; \r
-            bw = {to: b.width};\r
-            bh = {to: b.height};\r
-                \r
-            function argCalc(wrap, style, ww, wh, sXY, sXYval, s1, s2, w, h, p){                    \r
-                var ret = {};\r
-                fly(wrap).setWidth(ww).setHeight(wh);\r
-                if(fly(wrap)[sXY]){\r
-                    fly(wrap)[sXY](sXYval);                  \r
-                }\r
-                style[s1] = style[s2] = "0";                    \r
-                if(w){\r
-                    ret.width = w\r
-                };\r
-                if(h){\r
-                    ret.height = h;\r
-                }\r
-                if(p){\r
-                    ret.points = p;\r
-                }\r
-                return ret;\r
-            };\r
-\r
-            args = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {\r
-                    t  : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL],\r
-                    l  : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL],\r
-                    r  : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, NULL, NULL, pt],\r
-                    b  : [wrap, st, b.width, b.height, SETY, b.bottom, LEFT, TOP, NULL, bh, pt],\r
-                    tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, bh, pt],\r
-                    bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt],\r
-                    br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt],\r
-                    tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt]\r
-                });\r
-            \r
-            st.visibility = VISIBLE;\r
-            fly(wrap).show();\r
-\r
-            arguments.callee.anim = fly(wrap).fxanim(args,\r
-                o,\r
-                MOTION,\r
-                .5,\r
-                EASEOUT, \r
-                after);\r
-        });\r
-        return me;\r
-    },\r
-    \r
-    /**\r
-     * Slides the element out of view.  An anchor point can be optionally passed to set the end point\r
-     * for the slide effect.  When the effect is completed, the element will be hidden (visibility = \r
-     * 'hidden') but block elements will still take up space in the document.  The element must be removed\r
-     * from the DOM using the 'remove' config option if desired.  This function automatically handles \r
-     * wrapping the element with a fixed-size container if needed.  See the Fx class overview for valid anchor point options.\r
-     * Usage:\r
-     *<pre><code>\r
-// default: slide the element out to the top\r
-el.slideOut();\r
-\r
-// custom: slide the element out to the right with a 2-second duration\r
-el.slideOut('r', { duration: 2 });\r
-\r
-// common config options shown with default values\r
-el.slideOut('t', {\r
-    easing: 'easeOut',\r
-    duration: .5,\r
-    remove: false,\r
-    useDisplay: false\r
-});\r
-</code></pre>\r
-     * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')\r
-     * @param {Object} options (optional) Object literal with any of the Fx config options\r
-     * @return {Ext.Element} The Element\r
-     */\r
-    slideOut : function(anchor, o){\r
-        o = getObject(o);\r
-        var me = this,\r
-            dom = me.dom,\r
-            st = dom.style,\r
-            xy = me.getXY(),\r
-            wrap,\r
-            r,\r
-            b,\r
-            a,\r
-            zero = {to: 0}; \r
-                    \r
-        anchor = anchor || "t";\r
-\r
-        me.queueFx(o, function(){\r
-            \r
-            // restore values after effect\r
-            r = fly(dom).getFxRestore(); \r
-            b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};\r
-            b.right = b.x + b.width;\r
-            b.bottom = b.y + b.height;\r
-                \r
-            // fixed size for slide   \r
-            fly(dom).setWidth(b.width).setHeight(b.height);\r
-\r
-            // wrap if needed\r
-            wrap = fly(dom).fxWrap(r.pos, o, VISIBLE);\r
-                \r
-            st.visibility = VISIBLE;\r
-            st.position = ABSOLUTE;\r
-            fly(wrap).setWidth(b.width).setHeight(b.height);            \r
-\r
-            function after(){\r
-                o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();                \r
-                fly(dom).fxUnwrap(wrap, r.pos, o);\r
-                st.width = r.width;\r
-                st.height = r.height;\r
-                fly(dom).afterFx(o);\r
-            }            \r
-            \r
-            function argCalc(style, s1, s2, p1, v1, p2, v2, p3, v3){                    \r
-                var ret = {};\r
-                \r
-                style[s1] = style[s2] = "0";\r
-                ret[p1] = v1;               \r
-                if(p2){\r
-                    ret[p2] = v2;               \r
-                }\r
-                if(p3){\r
-                    ret[p3] = v3;\r
-                }\r
-                \r
-                return ret;\r
-            };\r
-            \r
-            a = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {\r
-                t  : [st, LEFT, BOTTOM, HEIGHT, zero],\r
-                l  : [st, RIGHT, TOP, WIDTH, zero],\r
-                r  : [st, LEFT, TOP, WIDTH, zero, POINTS, {to : [b.right, b.y]}],\r
-                b  : [st, LEFT, TOP, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],\r
-                tl : [st, RIGHT, BOTTOM, WIDTH, zero, HEIGHT, zero],\r
-                bl : [st, RIGHT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],\r
-                br : [st, LEFT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x + b.width, b.bottom]}],\r
-                tr : [st, LEFT, BOTTOM, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.right, b.y]}]\r
-            });\r
-            \r
-            arguments.callee.anim = fly(wrap).fxanim(a,\r
-                o,\r
-                MOTION,\r
-                .5,\r
-                EASEOUT, \r
-                after);\r
-        });\r
-        return me;\r
-    },\r
-\r
-    /**\r
-     * Fades the element out while slowly expanding it in all directions.  When the effect is completed, the \r
-     * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. \r
-     * The element must be removed from the DOM using the 'remove' config option if desired.\r
-     * Usage:\r
-     *<pre><code>\r
-// default\r
-el.puff();\r
-\r
-// common config options shown with default values\r
-el.puff({\r
-    easing: 'easeOut',\r
-    duration: .5,\r
-    remove: false,\r
-    useDisplay: false\r
-});\r
-</code></pre>\r
-     * @param {Object} options (optional) Object literal with any of the Fx config options\r
-     * @return {Ext.Element} The Element\r
-     */\r
-    puff : function(o){\r
-        o = getObject(o);\r
-        var me = this,\r
-            dom = me.dom,\r
-            st = dom.style,\r
-            width,\r
-            height,\r
-            r;\r
-\r
-        me.queueFx(o, function(){\r
-            width = fly(dom).getWidth();\r
-            height = fly(dom).getHeight();\r
-            fly(dom).clearOpacity();\r
-            fly(dom).show();\r
-\r
-            // restore values after effect\r
-            r = fly(dom).getFxRestore();                   \r
-            \r
-            function after(){\r
-                o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();                  \r
-                fly(dom).clearOpacity();  \r
-                fly(dom).setPositioning(r.pos);\r
-                st.width = r.width;\r
-                st.height = r.height;\r
-                st.fontSize = '';\r
-                fly(dom).afterFx(o);\r
-            }   \r
-\r
-            arguments.callee.anim = fly(dom).fxanim({\r
-                    width : {to : fly(dom).adjustWidth(width * 2)},\r
-                    height : {to : fly(dom).adjustHeight(height * 2)},\r
-                    points : {by : [-width * .5, -height * .5]},\r
-                    opacity : {to : 0},\r
-                    fontSize: {to : 200, unit: "%"}\r
-                },\r
-                o,\r
-                MOTION,\r
-                .5,\r
-                EASEOUT,\r
-                 after);\r
-        });\r
-        return me;\r
-    },\r
-\r
-    /**\r
-     * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).\r
-     * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still \r
-     * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.\r
-     * Usage:\r
-     *<pre><code>\r
-// default\r
-el.switchOff();\r
-\r
-// all config options shown with default values\r
-el.switchOff({\r
-    easing: 'easeIn',\r
-    duration: .3,\r
-    remove: false,\r
-    useDisplay: false\r
-});\r
-</code></pre>\r
-     * @param {Object} options (optional) Object literal with any of the Fx config options\r
-     * @return {Ext.Element} The Element\r
-     */\r
-    switchOff : function(o){\r
-        o = getObject(o);\r
-        var me = this,\r
-            dom = me.dom,\r
-            st = dom.style,\r
-            r;\r
-\r
-        me.queueFx(o, function(){\r
-            fly(dom).clearOpacity();\r
-            fly(dom).clip();\r
-\r
-            // restore values after effect\r
-            r = fly(dom).getFxRestore();\r
-                \r
-            function after(){\r
-                o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();  \r
-                fly(dom).clearOpacity();\r
-                fly(dom).setPositioning(r.pos);\r
-                st.width = r.width;\r
-                st.height = r.height;   \r
-                fly(dom).afterFx(o);\r
-            };\r
-\r
-            fly(dom).fxanim({opacity : {to : 0.3}}, \r
-                NULL, \r
-                NULL, \r
-                .1, \r
-                NULL, \r
-                function(){                                 \r
-                    fly(dom).clearOpacity();\r
-                        (function(){                            \r
-                            fly(dom).fxanim({\r
-                                height : {to : 1},\r
-                                points : {by : [0, fly(dom).getHeight() * .5]}\r
-                            }, \r
-                            o, \r
-                            MOTION, \r
-                            0.3, \r
-                            'easeIn', \r
-                            after);\r
-                        }).defer(100);\r
-                });\r
-        });\r
-        return me;\r
-    },\r
-\r
-    /**\r
-     * Highlights the Element by setting a color (applies to the background-color by default, but can be\r
-     * changed using the "attr" config option) and then fading back to the original color. If no original\r
-     * color is available, you should provide the "endColor" config option which will be cleared after the animation.\r
-     * Usage:\r
-<pre><code>\r
-// default: highlight background to yellow\r
-el.highlight();\r
-\r
-// custom: highlight foreground text to blue for 2 seconds\r
-el.highlight("0000ff", { attr: 'color', duration: 2 });\r
-\r
-// common config options shown with default values\r
-el.highlight("ffff9c", {\r
-    attr: "background-color", //can be any valid CSS property (attribute) that supports a color value\r
-    endColor: (current color) or "ffffff",\r
-    easing: 'easeIn',\r
-    duration: 1\r
-});\r
-</code></pre>\r
-     * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')\r
-     * @param {Object} options (optional) Object literal with any of the Fx config options\r
-     * @return {Ext.Element} The Element\r
-     */ \r
-    highlight : function(color, o){\r
-        o = getObject(o);\r
-        var me = this,\r
-            dom = me.dom,\r
-            attr = o.attr || "backgroundColor",\r
-            a = {},\r
-            restore;\r
-\r
-        me.queueFx(o, function(){\r
-            fly(dom).clearOpacity();\r
-            fly(dom).show();\r
-\r
-            function after(){\r
-                dom.style[attr] = restore;\r
-                fly(dom).afterFx(o);\r
-            }            \r
-            restore = dom.style[attr];\r
-            a[attr] = {from: color || "ffff9c", to: o.endColor || fly(dom).getColor(attr) || "ffffff"};\r
-            arguments.callee.anim = fly(dom).fxanim(a,\r
-                o,\r
-                'color',\r
-                1,\r
-                'easeIn', \r
-                after);\r
-        });\r
-        return me;\r
-    },\r
-\r
-   /**\r
-    * Shows a ripple of exploding, attenuating borders to draw attention to an Element.\r
-    * Usage:\r
-<pre><code>\r
-// default: a single light blue ripple\r
-el.frame();\r
-\r
-// custom: 3 red ripples lasting 3 seconds total\r
-el.frame("ff0000", 3, { duration: 3 });\r
-\r
-// common config options shown with default values\r
-el.frame("C3DAF9", 1, {\r
-    duration: 1 //duration of each individual ripple.\r
-    // Note: Easing is not configurable and will be ignored if included\r
-});\r
-</code></pre>\r
-    * @param {String} color (optional) The color of the border.  Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').\r
-    * @param {Number} count (optional) The number of ripples to display (defaults to 1)\r
-    * @param {Object} options (optional) Object literal with any of the Fx config options\r
-    * @return {Ext.Element} The Element\r
-    */\r
-    frame : function(color, count, o){\r
-        o = getObject(o);\r
-        var me = this,\r
-            dom = me.dom,\r
-            proxy,\r
-            active;\r
-\r
-        me.queueFx(o, function(){\r
-            color = color || '#C3DAF9'\r
-            if(color.length == 6){\r
-                color = '#' + color;\r
-            }            \r
-            count = count || 1;\r
-            fly(dom).show();\r
-\r
-            var xy = fly(dom).getXY(),\r
-                b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight},\r
-                queue = function(){\r
-                    proxy = fly(document.body || document.documentElement).createChild({\r
-                        style:{\r
-                            position : ABSOLUTE,\r
-                            'z-index': 35000, // yee haw\r
-                            border : '0px solid ' + color\r
-                        }\r
-                    });\r
-                    return proxy.queueFx({}, animFn);\r
-                };\r
-            \r
-            \r
-            arguments.callee.anim = {\r
-                isAnimated: true,\r
-                stop: function() {\r
-                    count = 0;\r
-                    proxy.stopFx();\r
-                }\r
-            };\r
-            \r
-            function animFn(){\r
-                var scale = Ext.isBorderBox ? 2 : 1;\r
-                active = proxy.anim({\r
-                    top : {from : b.y, to : b.y - 20},\r
-                    left : {from : b.x, to : b.x - 20},\r
-                    borderWidth : {from : 0, to : 10},\r
-                    opacity : {from : 1, to : 0},\r
-                    height : {from : b.height, to : b.height + 20 * scale},\r
-                    width : {from : b.width, to : b.width + 20 * scale}\r
-                },{\r
-                    duration: o.duration || 1,\r
-                    callback: function() {\r
-                        proxy.remove();\r
-                        --count > 0 ? queue() : fly(dom).afterFx(o);\r
-                    }\r
-                });\r
-                arguments.callee.anim = {\r
-                    isAnimated: true,\r
-                    stop: function(){\r
-                        active.stop();\r
-                    }\r
-                };\r
-            };\r
-            queue();\r
-        });\r
-        return me;\r
-    },\r
-\r
-   /**\r
-    * Creates a pause before any subsequent queued effects begin.  If there are\r
-    * no effects queued after the pause it will have no effect.\r
-    * Usage:\r
-<pre><code>\r
-el.pause(1);\r
-</code></pre>\r
-    * @param {Number} seconds The length of time to pause (in seconds)\r
-    * @return {Ext.Element} The Element\r
-    */\r
-    pause : function(seconds){        \r
-        var dom = this.dom,\r
-            t;\r
-\r
-        this.queueFx({}, function(){\r
-            t = setTimeout(function(){\r
-                fly(dom).afterFx({});\r
-            }, seconds * 1000);\r
-            arguments.callee.anim = {\r
-                isAnimated: true,\r
-                stop: function(){\r
-                    clearTimeout(t);\r
-                    fly(dom).afterFx({});\r
-                }\r
-            };\r
-        });\r
-        return this;\r
-    },\r
-\r
-   /**\r
-    * Fade an element in (from transparent to opaque).  The ending opacity can be specified\r
-    * using the <tt>{@link #endOpacity}</tt> config option.\r
-    * Usage:\r
-<pre><code>\r
-// default: fade in from opacity 0 to 100%\r
-el.fadeIn();\r
-\r
-// custom: fade in from opacity 0 to 75% over 2 seconds\r
-el.fadeIn({ endOpacity: .75, duration: 2});\r
-\r
-// common config options shown with default values\r
-el.fadeIn({\r
-    endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)\r
-    easing: 'easeOut',\r
-    duration: .5\r
-});\r
-</code></pre>\r
-    * @param {Object} options (optional) Object literal with any of the Fx config options\r
-    * @return {Ext.Element} The Element\r
-    */\r
-    fadeIn : function(o){\r
-        o = getObject(o);\r
-        var me = this,\r
-            dom = me.dom,\r
-            to = o.endOpacity || 1;\r
-        \r
-        me.queueFx(o, function(){\r
-            fly(dom).setOpacity(0);\r
-            fly(dom).fixDisplay();\r
-            dom.style.visibility = VISIBLE;\r
-            arguments.callee.anim = fly(dom).fxanim({opacity:{to:to}},\r
-                o, NULL, .5, EASEOUT, function(){\r
-                if(to == 1){\r
-                    fly(dom).clearOpacity();\r
-                }\r
-                fly(dom).afterFx(o);\r
-            });\r
-        });\r
-        return me;\r
-    },\r
-\r
-   /**\r
-    * Fade an element out (from opaque to transparent).  The ending opacity can be specified\r
-    * using the <tt>{@link #endOpacity}</tt> config option.  Note that IE may require\r
-    * <tt>{@link #useDisplay}:true</tt> in order to redisplay correctly.\r
-    * Usage:\r
-<pre><code>\r
-// default: fade out from the element's current opacity to 0\r
-el.fadeOut();\r
-\r
-// custom: fade out from the element's current opacity to 25% over 2 seconds\r
-el.fadeOut({ endOpacity: .25, duration: 2});\r
-\r
-// common config options shown with default values\r
-el.fadeOut({\r
-    endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)\r
-    easing: 'easeOut',\r
-    duration: .5,\r
-    remove: false,\r
-    useDisplay: false\r
-});\r
-</code></pre>\r
-    * @param {Object} options (optional) Object literal with any of the Fx config options\r
-    * @return {Ext.Element} The Element\r
-    */\r
-    fadeOut : function(o){\r
-        o = getObject(o);\r
-        var me = this,\r
-            dom = me.dom,\r
-            style = dom.style,\r
-            to = o.endOpacity || 0;         \r
-        \r
-        me.queueFx(o, function(){  \r
-            arguments.callee.anim = fly(dom).fxanim({ \r
-                opacity : {to : to}},\r
-                o, \r
-                NULL, \r
-                .5, \r
-                EASEOUT, \r
-                function(){\r
-                    if(to == 0){\r
-                        Ext.Element.data(dom, 'visibilityMode') == Ext.Element.DISPLAY || o.useDisplay ? \r
-                            style.display = "none" :\r
-                            style.visibility = HIDDEN;\r
-                            \r
-                        fly(dom).clearOpacity();\r
-                    }\r
-                    fly(dom).afterFx(o);\r
-            });\r
-        });\r
-        return me;\r
-    },\r
-\r
-   /**\r
-    * Animates the transition of an element's dimensions from a starting height/width\r
-    * to an ending height/width.  This method is a convenience implementation of {@link shift}.\r
-    * Usage:\r
-<pre><code>\r
-// change height and width to 100x100 pixels\r
-el.scale(100, 100);\r
-\r
-// common config options shown with default values.  The height and width will default to\r
-// the element&#39;s existing values if passed as null.\r
-el.scale(\r
-    [element&#39;s width],\r
-    [element&#39;s height], {\r
-        easing: 'easeOut',\r
-        duration: .35\r
-    }\r
-);\r
-</code></pre>\r
-    * @param {Number} width  The new width (pass undefined to keep the original width)\r
-    * @param {Number} height  The new height (pass undefined to keep the original height)\r
-    * @param {Object} options (optional) Object literal with any of the Fx config options\r
-    * @return {Ext.Element} The Element\r
-    */\r
-    scale : function(w, h, o){\r
-        this.shift(Ext.apply({}, o, {\r
-            width: w,\r
-            height: h\r
-        }));\r
-        return this;\r
-    },\r
-\r
-   /**\r
-    * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.\r
-    * Any of these properties not specified in the config object will not be changed.  This effect \r
-    * requires that at least one new dimension, position or opacity setting must be passed in on\r
-    * the config object in order for the function to have any effect.\r
-    * Usage:\r
-<pre><code>\r
-// slide the element horizontally to x position 200 while changing the height and opacity\r
-el.shift({ x: 200, height: 50, opacity: .8 });\r
-\r
-// common config options shown with default values.\r
-el.shift({\r
-    width: [element&#39;s width],\r
-    height: [element&#39;s height],\r
-    x: [element&#39;s x position],\r
-    y: [element&#39;s y position],\r
-    opacity: [element&#39;s opacity],\r
-    easing: 'easeOut',\r
-    duration: .35\r
-});\r
-</code></pre>\r
-    * @param {Object} options  Object literal with any of the Fx config options\r
-    * @return {Ext.Element} The Element\r
-    */\r
-    shift : function(o){\r
-        o = getObject(o);\r
-        var dom = this.dom,\r
-            a = {};\r
-                \r
-        this.queueFx(o, function(){\r
-            for (var prop in o) {\r
-                if (o[prop] != UNDEFINED) {                                                 \r
-                    a[prop] = {to : o[prop]};                   \r
-                }\r
-            } \r
-            \r
-            a.width ? a.width.to = fly(dom).adjustWidth(o.width) : a;\r
-            a.height ? a.height.to = fly(dom).adjustWidth(o.height) : a;   \r
-            \r
-            if (a.x || a.y || a.xy) {\r
-                a.points = a.xy || \r
-                           {to : [ a.x ? a.x.to : fly(dom).getX(),\r
-                                   a.y ? a.y.to : fly(dom).getY()]};                  \r
-            }\r
-\r
-            arguments.callee.anim = fly(dom).fxanim(a,\r
-                o, \r
-                MOTION, \r
-                .35, \r
-                EASEOUT, \r
-                function(){\r
-                    fly(dom).afterFx(o);\r
-                });\r
-        });\r
-        return this;\r
-    },\r
-\r
-    /**\r
-     * Slides the element while fading it out of view.  An anchor point can be optionally passed to set the \r
-     * ending point of the effect.\r
-     * Usage:\r
-     *<pre><code>\r
-// default: slide the element downward while fading out\r
-el.ghost();\r
-\r
-// custom: slide the element out to the right with a 2-second duration\r
-el.ghost('r', { duration: 2 });\r
-\r
-// common config options shown with default values\r
-el.ghost('b', {\r
-    easing: 'easeOut',\r
-    duration: .5,\r
-    remove: false,\r
-    useDisplay: false\r
-});\r
-</code></pre>\r
-     * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')\r
-     * @param {Object} options (optional) Object literal with any of the Fx config options\r
-     * @return {Ext.Element} The Element\r
-     */\r
-    ghost : function(anchor, o){\r
-        o = getObject(o);\r
-        var me = this,\r
-            dom = me.dom,\r
-            st = dom.style,\r
-            a = {opacity: {to: 0}, points: {}},\r
-            pt = a.points,\r
-            r,\r
-            w,\r
-            h;\r
-            \r
-        anchor = anchor || "b";\r
-\r
-        me.queueFx(o, function(){\r
-            // restore values after effect\r
-            r = fly(dom).getFxRestore();\r
-            w = fly(dom).getWidth();\r
-            h = fly(dom).getHeight();\r
-            \r
-            function after(){\r
-                o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();   \r
-                fly(dom).clearOpacity();\r
-                fly(dom).setPositioning(r.pos);\r
-                st.width = r.width;\r
-                st.height = r.height;\r
-                fly(dom).afterFx(o);\r
-            }\r
-                \r
-            pt.by = fly(dom).switchStatements(anchor.toLowerCase(), function(v1,v2){ return [v1, v2];}, {\r
-               t  : [0, -h],\r
-               l  : [-w, 0],\r
-               r  : [w, 0],\r
-               b  : [0, h],\r
-               tl : [-w, -h],\r
-               bl : [-w, h],\r
-               br : [w, h],\r
-               tr : [w, -h] \r
-            });\r
-                \r
-            arguments.callee.anim = fly(dom).fxanim(a,\r
-                o,\r
-                MOTION,\r
-                .5,\r
-                EASEOUT, after);\r
-        });\r
-        return me;\r
-    },\r
-\r
-    /**\r
-     * Ensures that all effects queued after syncFx is called on the element are\r
-     * run concurrently.  This is the opposite of {@link #sequenceFx}.\r
-     * @return {Ext.Element} The Element\r
-     */\r
-    syncFx : function(){\r
-        var me = this;\r
-        me.fxDefaults = Ext.apply(me.fxDefaults || {}, {\r
-            block : FALSE,\r
-            concurrent : TRUE,\r
-            stopFx : FALSE\r
-        });\r
-        return me;\r
-    },\r
-\r
-    /**\r
-     * Ensures that all effects queued after sequenceFx is called on the element are\r
-     * run in sequence.  This is the opposite of {@link #syncFx}.\r
-     * @return {Ext.Element} The Element\r
-     */\r
-    sequenceFx : function(){\r
-        var me = this;\r
-        me.fxDefaults = Ext.apply(me.fxDefaults || {}, {\r
-            block : FALSE,\r
-            concurrent : FALSE,\r
-            stopFx : FALSE\r
-        });\r
-        return me;\r
-    },\r
-\r
-    /* @private */\r
-    nextFx : function(){        \r
-        var ef = getQueue(this.dom.id)[0];\r
-        if(ef){\r
-            ef.call(this);\r
-        }\r
-    },\r
-\r
-    /**\r
-     * Returns true if the element has any effects actively running or queued, else returns false.\r
-     * @return {Boolean} True if element has active effects, else false\r
-     */\r
-    hasActiveFx : function(){\r
-        return getQueue(this.dom.id)[0];\r
-    },\r
-\r
-    /**\r
-     * Stops any running effects and clears the element's internal effects queue if it contains\r
-     * any additional effects that haven't started yet.\r
-     * @return {Ext.Element} The Element\r
-     */\r
-    stopFx : function(finish){\r
-        var me = this,\r
-            id = me.dom.id;\r
-        if(me.hasActiveFx()){\r
-            var cur = getQueue(id)[0];\r
-            if(cur && cur.anim){\r
-                if(cur.anim.isAnimated){\r
-                    setQueue(id, [cur]); //clear\r
-                    cur.anim.stop(finish !== undefined ? finish : TRUE);\r
-                }else{\r
-                    setQueue(id, []);\r
-                }\r
-            }\r
-        }\r
-        return me;\r
-    },\r
-\r
-    /* @private */\r
-    beforeFx : function(o){\r
-        if(this.hasActiveFx() && !o.concurrent){\r
-           if(o.stopFx){\r
-               this.stopFx();\r
-               return TRUE;\r
-           }\r
-           return FALSE;\r
-        }\r
-        return TRUE;\r
-    },\r
-\r
-    /**\r
-     * Returns true if the element is currently blocking so that no other effect can be queued\r
-     * until this effect is finished, else returns false if blocking is not set.  This is commonly\r
-     * used to ensure that an effect initiated by a user action runs to completion prior to the\r
-     * same effect being restarted (e.g., firing only one effect even if the user clicks several times).\r
-     * @return {Boolean} True if blocking, else false\r
-     */\r
-    hasFxBlock : function(){\r
-        var q = getQueue(this.dom.id);\r
-        return q && q[0] && q[0].block;\r
-    },\r
-\r
-    /* @private */\r
-    queueFx : function(o, fn){\r
-        var me = fly(this.dom);\r
-        if(!me.hasFxBlock()){\r
-            Ext.applyIf(o, me.fxDefaults);\r
-            if(!o.concurrent){\r
-                var run = me.beforeFx(o);\r
-                fn.block = o.block;\r
-                getQueue(me.dom.id).push(fn);\r
-                if(run){\r
-                    me.nextFx();\r
-                }\r
-            }else{\r
-                fn.call(me);\r
-            }\r
-        }\r
-        return me;\r
-    },\r
-\r
-    /* @private */\r
-    fxWrap : function(pos, o, vis){ \r
-        var dom = this.dom,\r
-            wrap,\r
-            wrapXY;\r
-        if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){            \r
-            if(o.fixPosition){\r
-                wrapXY = fly(dom).getXY();\r
-            }\r
-            var div = document.createElement("div");\r
-            div.style.visibility = vis;\r
-            wrap = dom.parentNode.insertBefore(div, dom);\r
-            fly(wrap).setPositioning(pos);\r
-            if(fly(wrap).isStyle(POSITION, "static")){\r
-                fly(wrap).position("relative");\r
-            }\r
-            fly(dom).clearPositioning('auto');\r
-            fly(wrap).clip();\r
-            wrap.appendChild(dom);\r
-            if(wrapXY){\r
-                fly(wrap).setXY(wrapXY);\r
-            }\r
-        }\r
-        return wrap;\r
-    },\r
-\r
-    /* @private */\r
-    fxUnwrap : function(wrap, pos, o){      \r
-        var dom = this.dom;\r
-        fly(dom).clearPositioning();\r
-        fly(dom).setPositioning(pos);\r
-        if(!o.wrap){\r
+(function(){
+    // contants
+    var NULL = null,
+        UNDEFINED = undefined,
+        TRUE = true,
+        FALSE = false,
+        SETX = "setX",
+        SETY = "setY",
+        SETXY = "setXY",
+        LEFT = "left",
+        BOTTOM = "bottom",
+        TOP = "top",
+        RIGHT = "right",
+        HEIGHT = "height",
+        WIDTH = "width",
+        POINTS = "points",
+        HIDDEN = "hidden",
+        ABSOLUTE = "absolute",
+        VISIBLE = "visible",
+        MOTION = "motion",
+        POSITION = "position",
+        EASEOUT = "easeOut",
+        /*
+         * Use a light flyweight here since we are using so many callbacks and are always assured a DOM element
+         */
+        flyEl = new Ext.Element.Flyweight(),
+        queues = {},
+        getObject = function(o){
+            return o || {};
+        },
+        fly = function(dom){
+            flyEl.dom = dom;
+            flyEl.id = Ext.id(dom);
+            return flyEl;
+        },
+        /*
+         * Queueing now stored outside of the element due to closure issues
+         */
+        getQueue = function(id){
+            if(!queues[id]){
+                queues[id] = [];
+            }
+            return queues[id];
+        },
+        setQueue = function(id, value){
+            queues[id] = value;
+        };
+        
+//Notifies Element that fx methods are available
+Ext.enableFx = TRUE;
+
+<div id="cls-Ext.Fx"></div>/**
+ * @class Ext.Fx
+ * <p>A class to provide basic animation and visual effects support.  <b>Note:</b> This class is automatically applied
+ * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}.
+ * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx <b>must</b> be
+ * {@link Ext#enableFx included} in order for the Element effects to work.</p><br/>
+ * 
+ * <p><b><u>Method Chaining</u></b></p>
+ * <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that
+ * they return the Element object itself as the method return value, it is not always possible to mix the two in a single
+ * method chain.  The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
+ * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately.  For this reason,
+ * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
+ * expected results and should be done with care.  Also see <tt>{@link #callback}</tt>.</p><br/>
+ *
+ * <p><b><u>Anchor Options for Motion Effects</u></b></p>
+ * <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
+ * that will serve as either the start or end point of the animation.  Following are all of the supported anchor positions:</p>
+<pre>
+Value  Description
+-----  -----------------------------
+tl     The top left corner
+t      The center of the top edge
+tr     The top right corner
+l      The center of the left edge
+r      The center of the right edge
+bl     The bottom left corner
+b      The center of the bottom edge
+br     The bottom right corner
+</pre>
+ * <b>Note</b>: some Fx methods accept specific custom config parameters.  The options shown in the Config Options
+ * section below are common options that can be passed to any Fx method unless otherwise noted.</b>
+ * 
+ * @cfg {Function} callback A function called when the effect is finished.  Note that effects are queued internally by the
+ * Fx class, so a callback is not required to specify another effect -- effects can simply be chained together
+ * and called in sequence (see note for <b><u>Method Chaining</u></b> above), for example:<pre><code>
+ * el.slideIn().highlight();
+ * </code></pre>
+ * The callback is intended for any additional code that should run once a particular effect has completed. The Element
+ * being operated upon is passed as the first parameter.
+ * 
+ * @cfg {Object} scope The scope (<code>this</code> reference) in which the <tt>{@link #callback}</tt> function is executed. Defaults to the browser window.
+ * 
+ * @cfg {String} easing A valid Ext.lib.Easing value for the effect:</p><div class="mdetail-params"><ul>
+ * <li><b><tt>backBoth</tt></b></li>
+ * <li><b><tt>backIn</tt></b></li>
+ * <li><b><tt>backOut</tt></b></li>
+ * <li><b><tt>bounceBoth</tt></b></li>
+ * <li><b><tt>bounceIn</tt></b></li>
+ * <li><b><tt>bounceOut</tt></b></li>
+ * <li><b><tt>easeBoth</tt></b></li>
+ * <li><b><tt>easeBothStrong</tt></b></li>
+ * <li><b><tt>easeIn</tt></b></li>
+ * <li><b><tt>easeInStrong</tt></b></li>
+ * <li><b><tt>easeNone</tt></b></li>
+ * <li><b><tt>easeOut</tt></b></li>
+ * <li><b><tt>easeOutStrong</tt></b></li>
+ * <li><b><tt>elasticBoth</tt></b></li>
+ * <li><b><tt>elasticIn</tt></b></li>
+ * <li><b><tt>elasticOut</tt></b></li>
+ * </ul></div>
+ *
+ * @cfg {String} afterCls A css class to apply after the effect
+ * @cfg {Number} duration The length of time (in seconds) that the effect should last
+ * 
+ * @cfg {Number} endOpacity Only applicable for {@link #fadeIn} or {@link #fadeOut}, a number between
+ * <tt>0</tt> and <tt>1</tt> inclusive to configure the ending opacity value.
+ *  
+ * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes
+ * @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to 
+ * effects that end with the element being visually hidden, ignored otherwise)
+ * @cfg {String/Object/Function} afterStyle A style specification string, e.g. <tt>"width:100px"</tt>, or an object
+ * in the form <tt>{width:"100px"}</tt>, or a function which returns such a specification that will be applied to the
+ * Element after the effect finishes.
+ * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs
+ * @cfg {Boolean} concurrent Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence
+ * @cfg {Boolean} stopFx Whether preceding effects should be stopped and removed before running current effect (only applies to non blocking effects)
+ */
+Ext.Fx = {
+    
+    // private - calls the function taking arguments from the argHash based on the key.  Returns the return value of the function.
+    //           this is useful for replacing switch statements (for example).
+    switchStatements : function(key, fn, argHash){
+        return fn.apply(this, argHash[key]);
+    },
+    
+    /**
+     * Slides the element into view.  An anchor point can be optionally passed to set the point of
+     * origin for the slide effect.  This function automatically handles wrapping the element with
+     * a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
+     * Usage:
+     *<pre><code>
+// default: slide the element in from the top
+el.slideIn();
+
+// custom: slide the element in from the right with a 2-second duration
+el.slideIn('r', { duration: 2 });
+
+// common config options shown with default values
+el.slideIn('t', {
+    easing: 'easeOut',
+    duration: .5
+});
+</code></pre>
+     * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
+     * @param {Object} options (optional) Object literal with any of the Fx config options
+     * @return {Ext.Element} The Element
+     */
+    slideIn : function(anchor, o){ 
+        o = getObject(o);
+        var me = this,
+            dom = me.dom,
+            st = dom.style,
+            xy,
+            r,
+            b,              
+            wrap,               
+            after,
+            st,
+            args, 
+            pt,
+            bw,
+            bh;
+            
+        anchor = anchor || "t";
+
+        me.queueFx(o, function(){            
+            xy = fly(dom).getXY();
+            // fix display to visibility
+            fly(dom).fixDisplay();            
+            
+            // restore values after effect
+            r = fly(dom).getFxRestore();      
+            b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};
+            b.right = b.x + b.width;
+            b.bottom = b.y + b.height;
+            
+            // fixed size for slide
+            fly(dom).setWidth(b.width).setHeight(b.height);            
+            
+            // wrap if needed
+            wrap = fly(dom).fxWrap(r.pos, o, HIDDEN);
+            
+            st.visibility = VISIBLE;
+            st.position = ABSOLUTE;
+            
+            // clear out temp styles after slide and unwrap
+            function after(){
+                 fly(dom).fxUnwrap(wrap, r.pos, o);
+                 st.width = r.width;
+                 st.height = r.height;
+                 fly(dom).afterFx(o);
+            }
+            
+            // time to calculate the positions        
+            pt = {to: [b.x, b.y]}; 
+            bw = {to: b.width};
+            bh = {to: b.height};
+                
+            function argCalc(wrap, style, ww, wh, sXY, sXYval, s1, s2, w, h, p){                    
+                var ret = {};
+                fly(wrap).setWidth(ww).setHeight(wh);
+                if(fly(wrap)[sXY]){
+                    fly(wrap)[sXY](sXYval);                  
+                }
+                style[s1] = style[s2] = "0";                    
+                if(w){
+                    ret.width = w
+                };
+                if(h){
+                    ret.height = h;
+                }
+                if(p){
+                    ret.points = p;
+                }
+                return ret;
+            };
+
+            args = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {
+                    t  : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL],
+                    l  : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL],
+                    r  : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, NULL, NULL, pt],
+                    b  : [wrap, st, b.width, b.height, SETY, b.bottom, LEFT, TOP, NULL, bh, pt],
+                    tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, bh, pt],
+                    bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt],
+                    br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt],
+                    tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt]
+                });
+            
+            st.visibility = VISIBLE;
+            fly(wrap).show();
+
+            arguments.callee.anim = fly(wrap).fxanim(args,
+                o,
+                MOTION,
+                .5,
+                EASEOUT, 
+                after);
+        });
+        return me;
+    },
+    
+    /**
+     * Slides the element out of view.  An anchor point can be optionally passed to set the end point
+     * for the slide effect.  When the effect is completed, the element will be hidden (visibility = 
+     * 'hidden') but block elements will still take up space in the document.  The element must be removed
+     * from the DOM using the 'remove' config option if desired.  This function automatically handles 
+     * wrapping the element with a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
+     * Usage:
+     *<pre><code>
+// default: slide the element out to the top
+el.slideOut();
+
+// custom: slide the element out to the right with a 2-second duration
+el.slideOut('r', { duration: 2 });
+
+// common config options shown with default values
+el.slideOut('t', {
+    easing: 'easeOut',
+    duration: .5,
+    remove: false,
+    useDisplay: false
+});
+</code></pre>
+     * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
+     * @param {Object} options (optional) Object literal with any of the Fx config options
+     * @return {Ext.Element} The Element
+     */
+    slideOut : function(anchor, o){
+        o = getObject(o);
+        var me = this,
+            dom = me.dom,
+            st = dom.style,
+            xy = me.getXY(),
+            wrap,
+            r,
+            b,
+            a,
+            zero = {to: 0}; 
+                    
+        anchor = anchor || "t";
+
+        me.queueFx(o, function(){
+            
+            // restore values after effect
+            r = fly(dom).getFxRestore(); 
+            b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};
+            b.right = b.x + b.width;
+            b.bottom = b.y + b.height;
+                
+            // fixed size for slide   
+            fly(dom).setWidth(b.width).setHeight(b.height);
+
+            // wrap if needed
+            wrap = fly(dom).fxWrap(r.pos, o, VISIBLE);
+                
+            st.visibility = VISIBLE;
+            st.position = ABSOLUTE;
+            fly(wrap).setWidth(b.width).setHeight(b.height);            
+
+            function after(){
+                o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();                
+                fly(dom).fxUnwrap(wrap, r.pos, o);
+                st.width = r.width;
+                st.height = r.height;
+                fly(dom).afterFx(o);
+            }            
+            
+            function argCalc(style, s1, s2, p1, v1, p2, v2, p3, v3){                    
+                var ret = {};
+                
+                style[s1] = style[s2] = "0";
+                ret[p1] = v1;               
+                if(p2){
+                    ret[p2] = v2;               
+                }
+                if(p3){
+                    ret[p3] = v3;
+                }
+                
+                return ret;
+            };
+            
+            a = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {
+                t  : [st, LEFT, BOTTOM, HEIGHT, zero],
+                l  : [st, RIGHT, TOP, WIDTH, zero],
+                r  : [st, LEFT, TOP, WIDTH, zero, POINTS, {to : [b.right, b.y]}],
+                b  : [st, LEFT, TOP, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],
+                tl : [st, RIGHT, BOTTOM, WIDTH, zero, HEIGHT, zero],
+                bl : [st, RIGHT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],
+                br : [st, LEFT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x + b.width, b.bottom]}],
+                tr : [st, LEFT, BOTTOM, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.right, b.y]}]
+            });
+            
+            arguments.callee.anim = fly(wrap).fxanim(a,
+                o,
+                MOTION,
+                .5,
+                EASEOUT, 
+                after);
+        });
+        return me;
+    },
+
+    /**
+     * Fades the element out while slowly expanding it in all directions.  When the effect is completed, the 
+     * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. 
+     * The element must be removed from the DOM using the 'remove' config option if desired.
+     * Usage:
+     *<pre><code>
+// default
+el.puff();
+
+// common config options shown with default values
+el.puff({
+    easing: 'easeOut',
+    duration: .5,
+    remove: false,
+    useDisplay: false
+});
+</code></pre>
+     * @param {Object} options (optional) Object literal with any of the Fx config options
+     * @return {Ext.Element} The Element
+     */
+    puff : function(o){
+        o = getObject(o);
+        var me = this,
+            dom = me.dom,
+            st = dom.style,
+            width,
+            height,
+            r;
+
+        me.queueFx(o, function(){
+            width = fly(dom).getWidth();
+            height = fly(dom).getHeight();
+            fly(dom).clearOpacity();
+            fly(dom).show();
+
+            // restore values after effect
+            r = fly(dom).getFxRestore();                   
+            
+            function after(){
+                o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();                  
+                fly(dom).clearOpacity();  
+                fly(dom).setPositioning(r.pos);
+                st.width = r.width;
+                st.height = r.height;
+                st.fontSize = '';
+                fly(dom).afterFx(o);
+            }   
+
+            arguments.callee.anim = fly(dom).fxanim({
+                    width : {to : fly(dom).adjustWidth(width * 2)},
+                    height : {to : fly(dom).adjustHeight(height * 2)},
+                    points : {by : [-width * .5, -height * .5]},
+                    opacity : {to : 0},
+                    fontSize: {to : 200, unit: "%"}
+                },
+                o,
+                MOTION,
+                .5,
+                EASEOUT,
+                 after);
+        });
+        return me;
+    },
+
+    /**
+     * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
+     * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still 
+     * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
+     * Usage:
+     *<pre><code>
+// default
+el.switchOff();
+
+// all config options shown with default values
+el.switchOff({
+    easing: 'easeIn',
+    duration: .3,
+    remove: false,
+    useDisplay: false
+});
+</code></pre>
+     * @param {Object} options (optional) Object literal with any of the Fx config options
+     * @return {Ext.Element} The Element
+     */
+    switchOff : function(o){
+        o = getObject(o);
+        var me = this,
+            dom = me.dom,
+            st = dom.style,
+            r;
+
+        me.queueFx(o, function(){
+            fly(dom).clearOpacity();
+            fly(dom).clip();
+
+            // restore values after effect
+            r = fly(dom).getFxRestore();
+                
+            function after(){
+                o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();  
+                fly(dom).clearOpacity();
+                fly(dom).setPositioning(r.pos);
+                st.width = r.width;
+                st.height = r.height;   
+                fly(dom).afterFx(o);
+            };
+
+            fly(dom).fxanim({opacity : {to : 0.3}}, 
+                NULL, 
+                NULL, 
+                .1, 
+                NULL, 
+                function(){                                 
+                    fly(dom).clearOpacity();
+                        (function(){                            
+                            fly(dom).fxanim({
+                                height : {to : 1},
+                                points : {by : [0, fly(dom).getHeight() * .5]}
+                            }, 
+                            o, 
+                            MOTION, 
+                            0.3, 
+                            'easeIn', 
+                            after);
+                        }).defer(100);
+                });
+        });
+        return me;
+    },
+
+    /**
+     * Highlights the Element by setting a color (applies to the background-color by default, but can be
+     * changed using the "attr" config option) and then fading back to the original color. If no original
+     * color is available, you should provide the "endColor" config option which will be cleared after the animation.
+     * Usage:
+<pre><code>
+// default: highlight background to yellow
+el.highlight();
+
+// custom: highlight foreground text to blue for 2 seconds
+el.highlight("0000ff", { attr: 'color', duration: 2 });
+
+// common config options shown with default values
+el.highlight("ffff9c", {
+    attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
+    endColor: (current color) or "ffffff",
+    easing: 'easeIn',
+    duration: 1
+});
+</code></pre>
+     * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
+     * @param {Object} options (optional) Object literal with any of the Fx config options
+     * @return {Ext.Element} The Element
+     */ 
+    highlight : function(color, o){
+        o = getObject(o);
+        var me = this,
+            dom = me.dom,
+            attr = o.attr || "backgroundColor",
+            a = {},
+            restore;
+
+        me.queueFx(o, function(){
+            fly(dom).clearOpacity();
+            fly(dom).show();
+
+            function after(){
+                dom.style[attr] = restore;
+                fly(dom).afterFx(o);
+            }            
+            restore = dom.style[attr];
+            a[attr] = {from: color || "ffff9c", to: o.endColor || fly(dom).getColor(attr) || "ffffff"};
+            arguments.callee.anim = fly(dom).fxanim(a,
+                o,
+                'color',
+                1,
+                'easeIn', 
+                after);
+        });
+        return me;
+    },
+
+   /**
+    * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
+    * Usage:
+<pre><code>
+// default: a single light blue ripple
+el.frame();
+
+// custom: 3 red ripples lasting 3 seconds total
+el.frame("ff0000", 3, { duration: 3 });
+
+// common config options shown with default values
+el.frame("C3DAF9", 1, {
+    duration: 1 //duration of each individual ripple.
+    // Note: Easing is not configurable and will be ignored if included
+});
+</code></pre>
+    * @param {String} color (optional) The color of the border.  Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
+    * @param {Number} count (optional) The number of ripples to display (defaults to 1)
+    * @param {Object} options (optional) Object literal with any of the Fx config options
+    * @return {Ext.Element} The Element
+    */
+    frame : function(color, count, o){
+        o = getObject(o);
+        var me = this,
+            dom = me.dom,
+            proxy,
+            active;
+
+        me.queueFx(o, function(){
+            color = color || '#C3DAF9';
+            if(color.length == 6){
+                color = '#' + color;
+            }            
+            count = count || 1;
+            fly(dom).show();
+
+            var xy = fly(dom).getXY(),
+                b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight},
+                queue = function(){
+                    proxy = fly(document.body || document.documentElement).createChild({
+                        style:{
+                            position : ABSOLUTE,
+                            'z-index': 35000, // yee haw
+                            border : '0px solid ' + color
+                        }
+                    });
+                    return proxy.queueFx({}, animFn);
+                };
+            
+            
+            arguments.callee.anim = {
+                isAnimated: true,
+                stop: function() {
+                    count = 0;
+                    proxy.stopFx();
+                }
+            };
+            
+            function animFn(){
+                var scale = Ext.isBorderBox ? 2 : 1;
+                active = proxy.anim({
+                    top : {from : b.y, to : b.y - 20},
+                    left : {from : b.x, to : b.x - 20},
+                    borderWidth : {from : 0, to : 10},
+                    opacity : {from : 1, to : 0},
+                    height : {from : b.height, to : b.height + 20 * scale},
+                    width : {from : b.width, to : b.width + 20 * scale}
+                },{
+                    duration: o.duration || 1,
+                    callback: function() {
+                        proxy.remove();
+                        --count > 0 ? queue() : fly(dom).afterFx(o);
+                    }
+                });
+                arguments.callee.anim = {
+                    isAnimated: true,
+                    stop: function(){
+                        active.stop();
+                    }
+                };
+            };
+            queue();
+        });
+        return me;
+    },
+
+   /**
+    * Creates a pause before any subsequent queued effects begin.  If there are
+    * no effects queued after the pause it will have no effect.
+    * Usage:
+<pre><code>
+el.pause(1);
+</code></pre>
+    * @param {Number} seconds The length of time to pause (in seconds)
+    * @return {Ext.Element} The Element
+    */
+    pause : function(seconds){        
+        var dom = this.dom,
+            t;
+
+        this.queueFx({}, function(){
+            t = setTimeout(function(){
+                fly(dom).afterFx({});
+            }, seconds * 1000);
+            arguments.callee.anim = {
+                isAnimated: true,
+                stop: function(){
+                    clearTimeout(t);
+                    fly(dom).afterFx({});
+                }
+            };
+        });
+        return this;
+    },
+
+   /**
+    * Fade an element in (from transparent to opaque).  The ending opacity can be specified
+    * using the <tt>{@link #endOpacity}</tt> config option.
+    * Usage:
+<pre><code>
+// default: fade in from opacity 0 to 100%
+el.fadeIn();
+
+// custom: fade in from opacity 0 to 75% over 2 seconds
+el.fadeIn({ endOpacity: .75, duration: 2});
+
+// common config options shown with default values
+el.fadeIn({
+    endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
+    easing: 'easeOut',
+    duration: .5
+});
+</code></pre>
+    * @param {Object} options (optional) Object literal with any of the Fx config options
+    * @return {Ext.Element} The Element
+    */
+    fadeIn : function(o){
+        o = getObject(o);
+        var me = this,
+            dom = me.dom,
+            to = o.endOpacity || 1;
+        
+        me.queueFx(o, function(){
+            fly(dom).setOpacity(0);
+            fly(dom).fixDisplay();
+            dom.style.visibility = VISIBLE;
+            arguments.callee.anim = fly(dom).fxanim({opacity:{to:to}},
+                o, NULL, .5, EASEOUT, function(){
+                if(to == 1){
+                    fly(dom).clearOpacity();
+                }
+                fly(dom).afterFx(o);
+            });
+        });
+        return me;
+    },
+
+   /**
+    * Fade an element out (from opaque to transparent).  The ending opacity can be specified
+    * using the <tt>{@link #endOpacity}</tt> config option.  Note that IE may require
+    * <tt>{@link #useDisplay}:true</tt> in order to redisplay correctly.
+    * Usage:
+<pre><code>
+// default: fade out from the element's current opacity to 0
+el.fadeOut();
+
+// custom: fade out from the element's current opacity to 25% over 2 seconds
+el.fadeOut({ endOpacity: .25, duration: 2});
+
+// common config options shown with default values
+el.fadeOut({
+    endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
+    easing: 'easeOut',
+    duration: .5,
+    remove: false,
+    useDisplay: false
+});
+</code></pre>
+    * @param {Object} options (optional) Object literal with any of the Fx config options
+    * @return {Ext.Element} The Element
+    */
+    fadeOut : function(o){
+        o = getObject(o);
+        var me = this,
+            dom = me.dom,
+            style = dom.style,
+            to = o.endOpacity || 0;         
+        
+        me.queueFx(o, function(){  
+            arguments.callee.anim = fly(dom).fxanim({ 
+                opacity : {to : to}},
+                o, 
+                NULL, 
+                .5, 
+                EASEOUT, 
+                function(){
+                    if(to == 0){
+                        Ext.Element.data(dom, 'visibilityMode') == Ext.Element.DISPLAY || o.useDisplay ? 
+                            style.display = "none" :
+                            style.visibility = HIDDEN;
+                            
+                        fly(dom).clearOpacity();
+                    }
+                    fly(dom).afterFx(o);
+            });
+        });
+        return me;
+    },
+
+   /**
+    * Animates the transition of an element's dimensions from a starting height/width
+    * to an ending height/width.  This method is a convenience implementation of {@link shift}.
+    * Usage:
+<pre><code>
+// change height and width to 100x100 pixels
+el.scale(100, 100);
+
+// common config options shown with default values.  The height and width will default to
+// the element&#39;s existing values if passed as null.
+el.scale(
+    [element&#39;s width],
+    [element&#39;s height], {
+        easing: 'easeOut',
+        duration: .35
+    }
+);
+</code></pre>
+    * @param {Number} width  The new width (pass undefined to keep the original width)
+    * @param {Number} height  The new height (pass undefined to keep the original height)
+    * @param {Object} options (optional) Object literal with any of the Fx config options
+    * @return {Ext.Element} The Element
+    */
+    scale : function(w, h, o){
+        this.shift(Ext.apply({}, o, {
+            width: w,
+            height: h
+        }));
+        return this;
+    },
+
+   /**
+    * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
+    * Any of these properties not specified in the config object will not be changed.  This effect 
+    * requires that at least one new dimension, position or opacity setting must be passed in on
+    * the config object in order for the function to have any effect.
+    * Usage:
+<pre><code>
+// slide the element horizontally to x position 200 while changing the height and opacity
+el.shift({ x: 200, height: 50, opacity: .8 });
+
+// common config options shown with default values.
+el.shift({
+    width: [element&#39;s width],
+    height: [element&#39;s height],
+    x: [element&#39;s x position],
+    y: [element&#39;s y position],
+    opacity: [element&#39;s opacity],
+    easing: 'easeOut',
+    duration: .35
+});
+</code></pre>
+    * @param {Object} options  Object literal with any of the Fx config options
+    * @return {Ext.Element} The Element
+    */
+    shift : function(o){
+        o = getObject(o);
+        var dom = this.dom,
+            a = {};
+                
+        this.queueFx(o, function(){
+            for (var prop in o) {
+                if (o[prop] != UNDEFINED) {                                                 
+                    a[prop] = {to : o[prop]};                   
+                }
+            } 
+            
+            a.width ? a.width.to = fly(dom).adjustWidth(o.width) : a;
+            a.height ? a.height.to = fly(dom).adjustWidth(o.height) : a;   
+            
+            if (a.x || a.y || a.xy) {
+                a.points = a.xy || 
+                           {to : [ a.x ? a.x.to : fly(dom).getX(),
+                                   a.y ? a.y.to : fly(dom).getY()]};                  
+            }
+
+            arguments.callee.anim = fly(dom).fxanim(a,
+                o, 
+                MOTION, 
+                .35, 
+                EASEOUT, 
+                function(){
+                    fly(dom).afterFx(o);
+                });
+        });
+        return this;
+    },
+
+    /**
+     * Slides the element while fading it out of view.  An anchor point can be optionally passed to set the 
+     * ending point of the effect.
+     * Usage:
+     *<pre><code>
+// default: slide the element downward while fading out
+el.ghost();
+
+// custom: slide the element out to the right with a 2-second duration
+el.ghost('r', { duration: 2 });
+
+// common config options shown with default values
+el.ghost('b', {
+    easing: 'easeOut',
+    duration: .5,
+    remove: false,
+    useDisplay: false
+});
+</code></pre>
+     * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
+     * @param {Object} options (optional) Object literal with any of the Fx config options
+     * @return {Ext.Element} The Element
+     */
+    ghost : function(anchor, o){
+        o = getObject(o);
+        var me = this,
+            dom = me.dom,
+            st = dom.style,
+            a = {opacity: {to: 0}, points: {}},
+            pt = a.points,
+            r,
+            w,
+            h;
+            
+        anchor = anchor || "b";
+
+        me.queueFx(o, function(){
+            // restore values after effect
+            r = fly(dom).getFxRestore();
+            w = fly(dom).getWidth();
+            h = fly(dom).getHeight();
+            
+            function after(){
+                o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();   
+                fly(dom).clearOpacity();
+                fly(dom).setPositioning(r.pos);
+                st.width = r.width;
+                st.height = r.height;
+                fly(dom).afterFx(o);
+            }
+                
+            pt.by = fly(dom).switchStatements(anchor.toLowerCase(), function(v1,v2){ return [v1, v2];}, {
+               t  : [0, -h],
+               l  : [-w, 0],
+               r  : [w, 0],
+               b  : [0, h],
+               tl : [-w, -h],
+               bl : [-w, h],
+               br : [w, h],
+               tr : [w, -h] 
+            });
+                
+            arguments.callee.anim = fly(dom).fxanim(a,
+                o,
+                MOTION,
+                .5,
+                EASEOUT, after);
+        });
+        return me;
+    },
+
+    /**
+     * Ensures that all effects queued after syncFx is called on the element are
+     * run concurrently.  This is the opposite of {@link #sequenceFx}.
+     * @return {Ext.Element} The Element
+     */
+    syncFx : function(){
+        var me = this;
+        me.fxDefaults = Ext.apply(me.fxDefaults || {}, {
+            block : FALSE,
+            concurrent : TRUE,
+            stopFx : FALSE
+        });
+        return me;
+    },
+
+    /**
+     * Ensures that all effects queued after sequenceFx is called on the element are
+     * run in sequence.  This is the opposite of {@link #syncFx}.
+     * @return {Ext.Element} The Element
+     */
+    sequenceFx : function(){
+        var me = this;
+        me.fxDefaults = Ext.apply(me.fxDefaults || {}, {
+            block : FALSE,
+            concurrent : FALSE,
+            stopFx : FALSE
+        });
+        return me;
+    },
+
+    /* @private */
+    nextFx : function(){        
+        var ef = getQueue(this.dom.id)[0];
+        if(ef){
+            ef.call(this);
+        }
+    },
+
+    /**
+     * Returns true if the element has any effects actively running or queued, else returns false.
+     * @return {Boolean} True if element has active effects, else false
+     */
+    hasActiveFx : function(){
+        return getQueue(this.dom.id)[0];
+    },
+
+    /**
+     * Stops any running effects and clears the element's internal effects queue if it contains
+     * any additional effects that haven't started yet.
+     * @return {Ext.Element} The Element
+     */
+    stopFx : function(finish){
+        var me = this,
+            id = me.dom.id;
+        if(me.hasActiveFx()){
+            var cur = getQueue(id)[0];
+            if(cur && cur.anim){
+                if(cur.anim.isAnimated){
+                    setQueue(id, [cur]); //clear
+                    cur.anim.stop(finish !== undefined ? finish : TRUE);
+                }else{
+                    setQueue(id, []);
+                }
+            }
+        }
+        return me;
+    },
+
+    /* @private */
+    beforeFx : function(o){
+        if(this.hasActiveFx() && !o.concurrent){
+           if(o.stopFx){
+               this.stopFx();
+               return TRUE;
+           }
+           return FALSE;
+        }
+        return TRUE;
+    },
+
+    /**
+     * Returns true if the element is currently blocking so that no other effect can be queued
+     * until this effect is finished, else returns false if blocking is not set.  This is commonly
+     * used to ensure that an effect initiated by a user action runs to completion prior to the
+     * same effect being restarted (e.g., firing only one effect even if the user clicks several times).
+     * @return {Boolean} True if blocking, else false
+     */
+    hasFxBlock : function(){
+        var q = getQueue(this.dom.id);
+        return q && q[0] && q[0].block;
+    },
+
+    /* @private */
+    queueFx : function(o, fn){
+        var me = fly(this.dom);
+        if(!me.hasFxBlock()){
+            Ext.applyIf(o, me.fxDefaults);
+            if(!o.concurrent){
+                var run = me.beforeFx(o);
+                fn.block = o.block;
+                getQueue(me.dom.id).push(fn);
+                if(run){
+                    me.nextFx();
+                }
+            }else{
+                fn.call(me);
+            }
+        }
+        return me;
+    },
+
+    /* @private */
+    fxWrap : function(pos, o, vis){ 
+        var dom = this.dom,
+            wrap,
+            wrapXY;
+        if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){            
+            if(o.fixPosition){
+                wrapXY = fly(dom).getXY();
+            }
+            var div = document.createElement("div");
+            div.style.visibility = vis;
+            wrap = dom.parentNode.insertBefore(div, dom);
+            fly(wrap).setPositioning(pos);
+            if(fly(wrap).isStyle(POSITION, "static")){
+                fly(wrap).position("relative");
+            }
+            fly(dom).clearPositioning('auto');
+            fly(wrap).clip();
+            wrap.appendChild(dom);
+            if(wrapXY){
+                fly(wrap).setXY(wrapXY);
+            }
+        }
+        return wrap;
+    },
+
+    /* @private */
+    fxUnwrap : function(wrap, pos, o){      
+        var dom = this.dom;
+        fly(dom).clearPositioning();
+        fly(dom).setPositioning(pos);
+        if(!o.wrap){
             var pn = fly(wrap).dom.parentNode;
             var pn = fly(wrap).dom.parentNode;
-            pn.insertBefore(dom, wrap); \r
-            fly(wrap).remove();\r
-        }\r
-    },\r
-\r
-    /* @private */\r
-    getFxRestore : function(){\r
-        var st = this.dom.style;\r
-        return {pos: this.getPositioning(), width: st.width, height : st.height};\r
-    },\r
-\r
-    /* @private */\r
-    afterFx : function(o){\r
-        var dom = this.dom,\r
-            id = dom.id;\r
-        if(o.afterStyle){\r
-            fly(dom).setStyle(o.afterStyle);            \r
-        }\r
-        if(o.afterCls){\r
-            fly(dom).addClass(o.afterCls);\r
-        }\r
-        if(o.remove == TRUE){\r
-            fly(dom).remove();\r
-        }\r
-        if(o.callback){\r
-            o.callback.call(o.scope, fly(dom));\r
-        }\r
-        if(!o.concurrent){\r
-            getQueue(id).shift();\r
-            fly(dom).nextFx();\r
-        }\r
-    },\r
-\r
-    /* @private */\r
-    fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){\r
-        animType = animType || 'run';\r
-        opt = opt || {};\r
-        var anim = Ext.lib.Anim[animType](\r
-                this.dom, \r
-                args,\r
-                (opt.duration || defaultDur) || .35,\r
-                (opt.easing || defaultEase) || EASEOUT,\r
-                cb,            \r
-                this\r
-            );\r
-        opt.anim = anim;\r
-        return anim;\r
-    }\r
-};\r
-\r
-// backwards compat\r
-Ext.Fx.resize = Ext.Fx.scale;\r
-\r
-//When included, Ext.Fx is automatically applied to Element so that all basic\r
-//effects are available directly via the Element API\r
-Ext.Element.addMethods(Ext.Fx);\r
+            pn.insertBefore(dom, wrap); 
+            fly(wrap).remove();
+        }
+    },
+
+    /* @private */
+    getFxRestore : function(){
+        var st = this.dom.style;
+        return {pos: this.getPositioning(), width: st.width, height : st.height};
+    },
+
+    /* @private */
+    afterFx : function(o){
+        var dom = this.dom,
+            id = dom.id;
+        if(o.afterStyle){
+            fly(dom).setStyle(o.afterStyle);            
+        }
+        if(o.afterCls){
+            fly(dom).addClass(o.afterCls);
+        }
+        if(o.remove == TRUE){
+            fly(dom).remove();
+        }
+        if(o.callback){
+            o.callback.call(o.scope, fly(dom));
+        }
+        if(!o.concurrent){
+            getQueue(id).shift();
+            fly(dom).nextFx();
+        }
+    },
+
+    /* @private */
+    fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){
+        animType = animType || 'run';
+        opt = opt || {};
+        var anim = Ext.lib.Anim[animType](
+                this.dom, 
+                args,
+                (opt.duration || defaultDur) || .35,
+                (opt.easing || defaultEase) || EASEOUT,
+                cb,            
+                this
+            );
+        opt.anim = anim;
+        return anim;
+    }
+};
+
+// backwards compat
+Ext.Fx.resize = Ext.Fx.scale;
+
+//When included, Ext.Fx is automatically applied to Element so that all basic
+//effects are available directly via the Element API
+Ext.Element.addMethods(Ext.Fx);
 })();
 })();
-</pre>
+</pre>    
 </body>
 </html>
\ No newline at end of file
 </body>
 </html>
\ No newline at end of file