# Fx.js

    //Notifies Element that fx methods are available
    Ext.enableFx = true;

    /**
     * @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 Element.
     * Conversely, since the effects are not actually defined in Element, Ext.Fx <b>must</b> be included in order for the
     * Element effects to work.</p><br/>
     *
     * <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.</p><br/>
     *
     * <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>Although some Fx methods accept specific custom config parameters, the ones shown in the Config Options section
     * below are common options that can be passed to any Fx method.</b>
     *
     * @cfg {Function} callback A function called when the effect is finished.  Note that effects are queued internally by the
     * Fx class, so do not need to use the callback parameter to specify another effect -- effects can simply be chained together
     * and called in sequence (e.g., el.slideIn().highlight();).  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 of the effect function
     * @cfg {String} easing A valid Easing value for the effect
     * @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 {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. "width:100px", or an object in the form {width:"100px"}, 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 subsequent effects should be stopped and removed after the current effect finishes
     */
    Ext.Fx = {
    	/**
    	 * 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){
            var el = this.getFxEl();
            o = o || {};

            el.queueFx(o, function(){

                anchor = anchor || "t";

                // fix display to visibility
                this.fixDisplay();

                // restore values after effect
                var r = this.getFxRestore();
                var b = this.getBox();
                // fixed size for slide
                this.setSize(b);

                // wrap if needed
                var wrap = this.fxWrap(r.pos, o, "hidden");

                var st = this.dom.style;
                st.visibility = "visible";
                st.position = "absolute";

                // clear out temp styles after slide and unwrap
                var after = function(){
                    el.fxUnwrap(wrap, r.pos, o);
                    st.width = r.width;
                    st.height = r.height;
                    el.afterFx(o);
                };
                // time to calc the positions
                var a, pt = {to: [b.x, b.y]}, bw = {to: b.width}, bh = {to: b.height};

                switch(anchor.toLowerCase()){
                    case "t":
                        wrap.setSize(b.width, 0);
                        st.left = st.bottom = "0";
                        a = {height: bh};
                    break;
                    case "l":
                        wrap.setSize(0, b.height);
                        st.right = st.top = "0";
                        a = {width: bw};
                    break;
                    case "r":
                        wrap.setSize(0, b.height);
                        wrap.setX(b.right);
                        st.left = st.top = "0";
                        a = {width: bw, points: pt};
                    break;
                    case "b":
                        wrap.setSize(b.width, 0);
                        wrap.setY(b.bottom);
                        st.left = st.top = "0";
                        a = {height: bh, points: pt};
                    break;
                    case "tl":
                        wrap.setSize(0, 0);
                        st.right = st.bottom = "0";
                        a = {width: bw, height: bh};
                    break;
                    case "bl":
                        wrap.setSize(0, 0);
                        wrap.setY(b.y+b.height);
                        st.right = st.top = "0";
                        a = {width: bw, height: bh, points: pt};
                    break;
                    case "br":
                        wrap.setSize(0, 0);
                        wrap.setXY([b.right, b.bottom]);
                        st.left = st.top = "0";
                        a = {width: bw, height: bh, points: pt};
                    break;
                    case "tr":
                        wrap.setSize(0, 0);
                        wrap.setX(b.x+b.width);
                        st.left = st.bottom = "0";
                        a = {width: bw, height: bh, points: pt};
                    break;
                }
                this.dom.style.visibility = "visible";
                wrap.show();

                arguments.callee.anim = wrap.fxanim(a,
                    o,
                    'motion',
                    .5,
                    'easeOut', after);
            });
            return this;
        },

    	/**
    	 * 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){
            var el = this.getFxEl();
            o = o || {};

            el.queueFx(o, function(){

                anchor = anchor || "t";

                // restore values after effect
                var r = this.getFxRestore();

                var b = this.getBox();
                // fixed size for slide
                this.setSize(b);

                // wrap if needed
                var wrap = this.fxWrap(r.pos, o, "visible");

                var st = this.dom.style;
                st.visibility = "visible";
                st.position = "absolute";

                wrap.setSize(b);

                var after = function(){
                    if(o.useDisplay){
                        el.setDisplayed(false);
                    }else{
                        el.hide();
                    }

                    el.fxUnwrap(wrap, r.pos, o);

                    st.width = r.width;
                    st.height = r.height;

                    el.afterFx(o);
                };

                var a, zero = {to: 0};
                switch(anchor.toLowerCase()){
                    case "t":
                        st.left = st.bottom = "0";
                        a = {height: zero};
                    break;
                    case "l":
                        st.right = st.top = "0";
                        a = {width: zero};
                    break;
                    case "r":
                        st.left = st.top = "0";
                        a = {width: zero, points: {to:[b.right, b.y]}};
                    break;
                    case "b":
                        st.left = st.top = "0";
                        a = {height: zero, points: {to:[b.x, b.bottom]}};
                    break;
                    case "tl":
                        st.right = st.bottom = "0";
                        a = {width: zero, height: zero};
                    break;
                    case "bl":
                        st.right = st.top = "0";
                        a = {width: zero, height: zero, points: {to:[b.x, b.bottom]}};
                    break;
                    case "br":
                        st.left = st.top = "0";
                        a = {width: zero, height: zero, points: {to:[b.x+b.width, b.bottom]}};
                    break;
                    case "tr":
                        st.left = st.bottom = "0";
                        a = {width: zero, height: zero, points: {to:[b.right, b.y]}};
                    break;
                }

                arguments.callee.anim = wrap.fxanim(a,
                    o,
                    'motion',
                    .5,
                    "easeOut", after);
            });
            return this;
        },

    	/**
    	 * 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){
            var el = this.getFxEl();
            o = o || {};

            el.queueFx(o, function(){
                this.clearOpacity();
                this.show();

                // restore values after effect
                var r = this.getFxRestore();
                var st = this.dom.style;

                var after = function(){
                    if(o.useDisplay){
                        el.setDisplayed(false);
                    }else{
                        el.hide();
                    }

                    el.clearOpacity();

                    el.setPositioning(r.pos);
                    st.width = r.width;
                    st.height = r.height;
                    st.fontSize = '';
                    el.afterFx(o);
                };

                var width = this.getWidth();
                var height = this.getHeight();

                arguments.callee.anim = this.fxanim({
                        width : {to: this.adjustWidth(width * 2)},
                        height : {to: this.adjustHeight(height * 2)},
                        points : {by: [-(width * .5), -(height * .5)]},
                        opacity : {to: 0},
                        fontSize: {to:200, unit: "%"}
                    },
                    o,
                    'motion',
                    .5,
                    "easeOut", after);
            });
            return this;
        },

    	/**
    	 * 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){
            var el = this.getFxEl();
            o = o || {};

            el.queueFx(o, function(){
                this.clearOpacity();
                this.clip();

                // restore values after effect
                var r = this.getFxRestore();
                var st = this.dom.style;

                var after = function(){
                    if(o.useDisplay){
                        el.setDisplayed(false);
                    }else{
                        el.hide();
                    }

                    el.clearOpacity();
                    el.setPositioning(r.pos);
                    st.width = r.width;
                    st.height = r.height;

                    el.afterFx(o);
                };

                this.fxanim({opacity:{to:0.3}}, null, null, .1, null, function(){
                    this.clearOpacity();
                    (function(){
                        this.fxanim({
                            height:{to:1},
                            points:{by:[0, this.getHeight() * .5]}
                        }, o, 'motion', 0.3, 'easeIn', after);
                    }).defer(100, this);
                });
            });
            return this;
        },

        /**
         * 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){
            var el = this.getFxEl();
            o = o || {};

            el.queueFx(o, function(){
                color = color || "ffff9c";
                var attr = o.attr || "backgroundColor";

                this.clearOpacity();
                this.show();

                var origColor = this.getColor(attr);
                var restoreColor = this.dom.style[attr];
                var endColor = (o.endColor || origColor) || "ffffff";

                var after = function(){
                    el.dom.style[attr] = restoreColor;
                    el.afterFx(o);
                };

                var a = {};
                a[attr] = {from: color, to: endColor};
                arguments.callee.anim = this.fxanim(a,
                    o,
                    'color',
                    1,
                    'easeIn', after);
            });
            return this;
        },

       /**
        * 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){
            var el = this.getFxEl(),
                proxy,
                active;

            o = o || {};

            el.queueFx(o, function(){
                color = color || "#C3DAF9"
                if(color.length == 6){
                    color = "#" + color;
                }
                count = count || 1;
                this.show();

                var xy = this.getXY(),
                    dom = this.dom,
                    b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight},
                    proxy,
                    queue = function(){
                        proxy = Ext.get(document.body || document.documentElement).createChild({
                            style:{
                                visbility: 'hidden',
                                position : 'absolute',
                                "z-index": 35000, // yee haw
                                border : "0px solid " + color
                            }
                        });
                        return proxy.queueFx({}, animFn);
                    };

                arguments.callee.anim = {
                    isAnimated: function(){
                        return 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() : el.afterFx(o);
                        }
                    });
                    arguments.callee.anim = {
                        isAnimated: function(){
                            return true;
                        },
                        stop: function(){
                            active.stop();
                        }
                    };
                };
                queue();
            });
            return this;
        },

       /**
        * 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 el = this.getFxEl(),
                t;

            el.queueFx({}, function(){
                t = setTimeout(function(){
                    el.afterFx({});
                }, seconds * 1000);
                arguments.callee.anim = {
                    isAnimated: function(){
                        return true;
                    },
                    stop: function(){
                        clearTimeout(t);
                        el.afterFx({});
                    }
                };
            });
            return this;
        },

       /**
        * Fade an element in (from transparent to opaque).  The ending opacity can be specified
        * using the "endOpacity" 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){
            var el = this.getFxEl();
            o = o || {};
            el.queueFx(o, function(){
                this.setOpacity(0);
                this.fixDisplay();
                this.dom.style.visibility = 'visible';
                var to = o.endOpacity || 1;
                arguments.callee.anim = this.fxanim({opacity:{to:to}},
                    o, null, .5, "easeOut", function(){
                    if(to == 1){
                        this.clearOpacity();
                    }
                    el.afterFx(o);
                });
            });
            return this;
        },

       /**
        * Fade an element out (from opaque to transparent).  The ending opacity can be specified
        * using the "endOpacity" config option.  Note that IE may require useDisplay:true 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){
            var el = this.getFxEl();
            o = o || {};
            el.queueFx(o, function(){
                var to = o.endOpacity || 0;
                arguments.callee.anim = this.fxanim({opacity:{to:to}},
                    o, null, .5, "easeOut", function(){
                    if(to === 0){
                        if(this.visibilityMode == Ext.Element.DISPLAY || o.useDisplay){
                             this.dom.style.display = "none";
                        }else{
                             this.dom.style.visibility = "hidden";
                        }
                        this.clearOpacity();
                    }
                    el.afterFx(o);
                });
            });
            return this;
        },

       /**
        * Animates the transition of an element's dimensions from a starting height/width
        * to an ending height/width.
        * 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's existing values if passed as null.
    el.scale(
        [element's width],
        [element'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's width],
        height: [element's height],
        x: [element's x position],
        y: [element's y position],
        opacity: [element'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){
            var el = this.getFxEl();
            o = o || {};
            el.queueFx(o, function(){
                var a = {}, w = o.width, h = o.height, x = o.x, y = o.y,  op = o.opacity;
                if(w !== undefined){
                    a.width = {to: this.adjustWidth(w)};
                }
                if(h !== undefined){
                    a.height = {to: this.adjustHeight(h)};
                }
                if(o.left !== undefined){
                    a.left = {to: o.left};
                }
                if(o.top !== undefined){
                    a.top = {to: o.top};
                }
                if(o.right !== undefined){
                    a.right = {to: o.right};
                }
                if(o.bottom !== undefined){
                    a.bottom = {to: o.bottom};
                }
                if(x !== undefined || y !== undefined){
                    a.points = {to: [
                        x !== undefined ? x : this.getX(),
                        y !== undefined ? y : this.getY()
                    ]};
                }
                if(op !== undefined){
                    a.opacity = {to: op};
                }
                if(o.xy !== undefined){
                    a.points = {to: o.xy};
                }
                arguments.callee.anim = this.fxanim(a,
                    o, 'motion', .35, "easeOut", function(){
                    el.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){
            var el = this.getFxEl();
            o = o || {};

            el.queueFx(o, function(){
                anchor = anchor || "b";

                // restore values after effect
                var r = this.getFxRestore();
                var w = this.getWidth(),
                    h = this.getHeight();

                var st = this.dom.style;

                var after = function(){
                    if(o.useDisplay){
                        el.setDisplayed(false);
                    }else{
                        el.hide();
                    }

                    el.clearOpacity();
                    el.setPositioning(r.pos);
                    st.width = r.width;
                    st.height = r.height;

                    el.afterFx(o);
                };

                var a = {opacity: {to: 0}, points: {}}, pt = a.points;
                switch(anchor.toLowerCase()){
                    case "t":
                        pt.by = [0, -h];
                    break;
                    case "l":
                        pt.by = [-w, 0];
                    break;
                    case "r":
                        pt.by = [w, 0];
                    break;
                    case "b":
                        pt.by = [0, h];
                    break;
                    case "tl":
                        pt.by = [-w, -h];
                    break;
                    case "bl":
                        pt.by = [-w, h];
                    break;
                    case "br":
                        pt.by = [w, h];
                    break;
                    case "tr":
                        pt.by = [w, -h];
                    break;
                }

                arguments.callee.anim = this.fxanim(a,
                    o,
                    'motion',
                    .5,
                    "easeOut", after);
            });
            return this;
        },

    	/**
    	 * 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(){
            this.fxDefaults = Ext.apply(this.fxDefaults || {}, {
                block : false,
                concurrent : true,
                stopFx : false
            });
            return this;
        },

    	/**
    	 * 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(){
            this.fxDefaults = Ext.apply(this.fxDefaults || {}, {
                block : false,
                concurrent : false,
                stopFx : false
            });
            return this;
        },

    	/* @private */
        nextFx : function(){
            var ef = this.fxQueue[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 this.fxQueue && this.fxQueue[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(){
            if(this.hasActiveFx()){
                var cur = this.fxQueue[0];
                if(cur && cur.anim && cur.anim.isAnimated()){
                    this.fxQueue = [cur]; // clear out others
                    cur.anim.stop(true);
                }
            }
            return this;
        },

    	/* @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 = this.fxQueue;
            return q && q[0] && q[0].block;
        },

    	/* @private */
        queueFx : function(o, fn){
            if(!this.fxQueue){
                this.fxQueue = [];
            }
            if(!this.hasFxBlock()){
                Ext.applyIf(o, this.fxDefaults);
                if(!o.concurrent){
                    var run = this.beforeFx(o);
                    fn.block = o.block;
                    this.fxQueue.push(fn);
                    if(run){
                        this.nextFx();
                    }
                }else{
                    fn.call(this);
                }
            }
            return this;
        },

    	/* @private */
        fxWrap : function(pos, o, vis){
            var wrap;
            if(!o.wrap || !(wrap = Ext.get(o.wrap))){
                var wrapXY;
                if(o.fixPosition){
                    wrapXY = this.getXY();
                }
                var div = document.createElement("div");
                div.style.visibility = vis;
                wrap = Ext.get(this.dom.parentNode.insertBefore(div, this.dom));
                wrap.setPositioning(pos);
                if(wrap.getStyle("position") == "static"){
                    wrap.position("relative");
                }
                this.clearPositioning('auto');
                wrap.clip();
                wrap.dom.appendChild(this.dom);
                if(wrapXY){
                    wrap.setXY(wrapXY);
                }
            }
            return wrap;
        },

    	/* @private */
        fxUnwrap : function(wrap, pos, o){
            this.clearPositioning();
            this.setPositioning(pos);
            if(!o.wrap){
                wrap.dom.parentNode.insertBefore(this.dom, wrap.dom);
                wrap.remove();
            }
        },

    	/* @private */
        getFxRestore : function(){
            var st = this.dom.style;
            return {pos: this.getPositioning(), width: st.width, height : st.height};
        },

    	/* @private */
        afterFx : function(o){
            if(o.afterStyle){
                this.applyStyles(o.afterStyle);
            }
            if(o.afterCls){
                this.addClass(o.afterCls);
            }
            if(o.remove === true){
                this.remove();
            }
            Ext.callback(o.callback, o.scope, [this]);
            if(!o.concurrent){
                this.fxQueue.shift();
                this.nextFx();
            }
        },

    	/* @private */
        getFxEl : function(){ // support for composite element fx
            return Ext.get(this.dom);
        },

    	/* @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',
                function(){
                    Ext.callback(cb, this);
                },
                this
            );
            opt.anim = anim;
            return anim;
        }
    };

    // backwords 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.apply(Ext.Element.prototype, Ext.Fx);

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.