/**
 * A sprite is a basic primitive from the charts package which represents a graphical 
 * object that can be drawn. Sprites are used extensively in the charts package to 
 * create the visual elements of each chart.  You can also create a desired image by 
 * adding one or more sprites to a {@link Ext.draw.Container draw container}.
 * 
 * The Sprite class itself is an abstract class and is not meant to be used directly.  
 * There are many different kinds of sprites available in the charts package that extend 
 * Ext.draw.sprite.Sprite. Each sprite type has various attributes that define how that 
 * sprite should look. For example, this is a {@link Ext.draw.sprite.Rect rect} sprite:
 * 
 *     @example
 *     Ext.create({
 *         xtype: 'draw', 
 *         renderTo: document.body,
 *         width: 400,
 *         height: 400,
 *         sprites: [{
 *             type: 'rect',
 *             x: 50,
 *             y: 50,
 *             width: 100,
 *             height: 100,
 *             fillStyle: '#1F6D91'
 *         }]
 *     });
 * 
 * By default, sprites are added to the default 'main' {@link Ext.draw.Surface surface} 
 * of the draw container.  However, sprites may also be configured with a reference to a 
 * specific Ext.draw.Surface when set in the draw container's 
 * {@link Ext.draw.Container#cfg-sprites sprites} config.  Specifying a surface 
 * other than 'main' will create a surface by that name if it does not already exist.
 * 
 *     @example
 *     Ext.create({
 *         xtype: 'draw', 
 *         renderTo: document.body,
 *         width: 400,
 *         height: 400,
 *         sprites: [{
 *             type: 'rect',
 *             surface: 'anim',  // a surface with id "anim" will be created automatically
 *             x: 50,
 *             y: 50,
 *             width: 100,
 *             height: 100,
 *             fillStyle: '#1F6D91'
 *         }]
 *     });
 * 
 * The ability to have multiple surfaces is useful for performance (and battery life) 
 * reasons. Because changes to sprite attributes cause the whole surface (and all 
 * sprites in it) to re-render, it makes sense to group sprites by surface, so changes 
 * to one group of sprites will only trigger the surface they are in to re-render.
 * 
 * You can add a sprite to an existing drawing by adding the sprite to a draw surface.  
 * 
 *     @example
 *     var drawCt = Ext.create({
 *         xtype: 'draw',
 *         renderTo: document.body,
 *         width: 400,
 *         height: 400
 *     });
 *     
 *     // If the surface name is not specified then 'main' will be used
 *     var surface = drawCt.getSurface();
 *     
 *     surface.add({
 *         type: 'rect',
 *         x: 50,
 *         y: 50,
 *         width: 100,
 *         height: 100,
 *         fillStyle: '#1F6D91'
 *     });
 *     
 *     surface.renderFrame();
 * 
 * **Note:** Changes to the sprites on a surface will be not be reflected in the DOM 
 * until you call the surface's {@link Ext.draw.Surface#method-renderFrame renderFrame} 
 * method.  This must be done after adding, removing, or modifying sprites in order to 
 * see the changes on-screen.
 * 
 * For information on configuring a sprite with an initial transformation see 
 * {@link #scaling}, {@link rotation}, and {@link translation}.
 * 
 * For information on applying a transformation to an existing sprite see the 
 * Ext.draw.Matrix class.
 */
Ext.define('Ext.draw.sprite.Sprite', {
    alias: 'sprite.sprite',
 
    mixins: {
        observable: 'Ext.mixin.Observable'
    },
 
    requires: [
        'Ext.draw.Draw',
        'Ext.draw.gradient.Gradient',
        'Ext.draw.sprite.AttributeDefinition',
        'Ext.draw.modifier.Target',
        'Ext.draw.modifier.Animation',
        'Ext.draw.modifier.Highlight'
    ],
 
    isSprite: true,
 
    $configStrict: false,
 
    statics: {
        defaultHitTestOptions: {
            fill: true,
            stroke: true
        }
        //<debug> 
        /**
         * Debug rendering options:
         *
         * debug: {
         *     bbox: true, // renders the bounding box of the sprite
         *     xray: true  // renders control points of the path (for Ext.draw.sprite.Path and descendants only)
         * }
         *
         */
        ,debug: false
        //</debug> 
    },
 
    inheritableStatics: {
        def: {
            processors: {
                //<debug> 
                debug: 'default',
                //</debug> 
 
                /**
                 * @cfg {String} [strokeStyle="none"] The color of the stroke (a CSS color value).
                 */
                strokeStyle: "color",
 
                /**
                 * @cfg {String} [fillStyle="none"] The color of the shape (a CSS color value).
                 */
                fillStyle: "color",
 
                /**
                 * @cfg {Number} [strokeOpacity=1] The opacity of the stroke. Limited from 0 to 1.
                 */
                strokeOpacity: "limited01",
 
                /**
                 * @cfg {Number} [fillOpacity=1] The opacity of the fill. Limited from 0 to 1.
                 */
                fillOpacity: "limited01",
 
                /**
                 * @cfg {Number} [lineWidth=1] The width of the line stroke.
                 */
                lineWidth: "number",
 
                /**
                 * @cfg {String} [lineCap="butt"] The style of the line caps.
                 */
                lineCap: "enums(butt,round,square)",
 
                /**
                 * @cfg {String} [lineJoin="miter"] The style of the line join.
                 */
                lineJoin: "enums(round,bevel,miter)",
 
                /**
                 * @cfg {Array} [lineDash=[]]
                 * An even number of non-negative numbers specifying a dash/space sequence.
                 * Note that while this is supported in IE8 (VML engine), the behavior is
                 * different from Canvas and SVG. Please refer to this document for details:
                 * http://msdn.microsoft.com/en-us/library/bb264085(v=vs.85).aspx
                 * Although IE9 and IE10 have Canvas support, the 'lineDash'
                 * attribute is not supported in those browsers.
                 */
                lineDash: "data",
 
                /**
                 * @cfg {Number} [lineDashOffset=0]
                 * A number specifying how far into the line dash sequence drawing commences.
                 */
                lineDashOffset: "number",
 
                /**
                 * @cfg {Number} [miterLimit=10]
                 * Sets the distance between the inner corner and the outer corner where two lines meet.
                 */
                miterLimit: "number",
 
                /**
                 * @cfg {String} [shadowColor="none"] The color of the shadow (a CSS color value).
                 */
                shadowColor: "color",
 
                /**
                 * @cfg {Number} [shadowOffsetX=0] The offset of the sprite's shadow on the x-axis.
                 */
                shadowOffsetX: "number",
 
                /**
                 * @cfg {Number} [shadowOffsetY=0] The offset of the sprite's shadow on the y-axis.
                 */
                shadowOffsetY: "number",
 
                /**
                 * @cfg {Number} [shadowBlur=0] The amount blur used on the shadow.
                 */
                shadowBlur: "number",
 
                /**
                 * @cfg {Number} [globalAlpha=1] The opacity of the sprite. Limited from 0 to 1.
                 */
                globalAlpha: "limited01",
 
                /**
                 * @cfg {String} [globalCompositeOperation=source-over]
                 * Indicates how source images are drawn onto a destination image.
                 * globalCompositeOperation attribute is not supported by the SVG and VML (excanvas) engines.
                 */
                globalCompositeOperation: "enums(source-over,destination-over,source-in,destination-in,source-out,destination-out,source-atop,destination-atop,lighter,xor,copy)",
 
                /**
                 * @cfg {Boolean} [hidden=false] Determines whether or not the sprite is hidden.
                 */
                hidden: "bool",
 
                /**
                 * @cfg {Boolean} [transformFillStroke=false]
                 * Determines whether the fill and stroke are affected by sprite transformations.
                 */
                transformFillStroke: "bool",
 
                /**
                 * @cfg {Number} [zIndex=0]
                 * The stacking order of the sprite.
                 */
                zIndex: "number",
 
                /**
                 * @cfg {Number} [translationX=0]
                 * The translation, position offset, of the sprite on the x-axis.
                 * 
                 * **Note:** Transform configs are *always* performed in the following 
                 * order:
                 * 
                 *  1. Scaling
                 *  2. Rotation
                 *  3. Translation
                 * 
                 * See also: {@link #translation} and {@link #translationY}
                 */
                translationX: "number",
 
                /**
                 * @cfg {Number} [translationY=0]
                 * The translation, position offset, of the sprite on the y-axis.
                 * 
                 * **Note:** Transform configs are *always* performed in the following 
                 * order:
                 * 
                 *  1. Scaling
                 *  2. Rotation
                 *  3. Translation
                 * 
                 * See also: {@link #translation} and {@link #translationX}
                 */
                translationY: "number",
 
                /**
                 * @cfg {Number} [rotationRads=0]
                 * The angle of rotation of the sprite in radians.
                 * 
                 * **Note:** Transform configs are *always* performed in the following 
                 * order:
                 * 
                 *  1. Scaling
                 *  2. Rotation
                 *  3. Translation
                 * 
                 * See also: {@link #rotation}, {@link #rotationCenterX}, and 
                 * {@link #rotationCenterY}
                 */
                rotationRads: "number",
 
                /**
                 * @cfg {Number} [rotationCenterX=null]
                 * The central coordinate of the sprite's scale operation on the x-axis.  
                 * Unless explicitly set, will default to the calculated center of the 
                 * sprite along the x-axis.
                 * 
                 * **Note:** Transform configs are *always* performed in the following 
                 * order:
                 * 
                 *  1. Scaling
                 *  2. Rotation
                 *  3. Translation
                 * 
                 * See also: {@link #rotation}, {@link #rotationRads}, and 
                 * {@link #rotationCenterY}
                 */
                rotationCenterX: "number",
 
                /**
                 * @cfg {Number} [rotationCenterY=null]
                 * The central coordinate of the sprite's rotate operation on the y-axis.
                 * Unless explicitly set, will default to the calculated center of the 
                 * sprite along the y-axis.
                 * 
                 * **Note:** Transform configs are *always* performed in the following 
                 * order:
                 * 
                 *  1. Scaling
                 *  2. Rotation
                 *  3. Translation
                 * 
                 * See also: {@link #rotation}, {@link #rotationRads}, and 
                 * {@link #rotationCenterX}
                 */
                rotationCenterY: "number",
 
                /**
                 * @cfg {Number} [scalingX=1] The scaling of the sprite on the x-axis.
                 * The number value represents a percentage by which to scale the 
                 * sprite.  **1** is equal to 100%, **2** would be 200%, etc.
                 * 
                 * **Note:** Transform configs are *always* performed in the following 
                 * order:
                 * 
                 *  1. Scaling
                 *  2. Rotation
                 *  3. Translation
                 * 
                 * See also: {@link #scaling}, {@link #scalingY}, 
                 * {@link #scalingCenterX}, and {@link #scalingCenterY}
                 */
                scalingX: "number",
 
                /**
                 * @cfg {Number} [scalingY=1] The scaling of the sprite on the y-axis.  
                 * The number value represents a percentage by which to scale the 
                 * sprite.  **1** is equal to 100%, **2** would be 200%, etc.
                 * 
                 * **Note:** Transform configs are *always* performed in the following 
                 * order:
                 * 
                 *  1. Scaling
                 *  2. Rotation
                 *  3. Translation
                 * 
                 * See also: {@link #scaling}, {@link #scalingX}, 
                 * {@link #scalingCenterX}, and {@link #scalingCenterY}
                 */
                scalingY: "number",
 
                /**
                 * @cfg {Number} [scalingCenterX=null]
                 * The central coordinate of the sprite's scale operation on the x-axis.
                 * 
                 * **Note:** Transform configs are *always* performed in the following 
                 * order:
                 * 
                 *  1. Scaling
                 *  2. Rotation
                 *  3. Translation
                 * 
                 * See also: {@link #scaling}, {@link #scalingX}, 
                 * {@link #scalingY}, and {@link #scalingCenterY}
                 */
                scalingCenterX: "number",
 
                /**
                 * @cfg {Number} [scalingCenterY=null]
                 * The central coordinate of the sprite's scale operation on the y-axis.
                 * 
                 * **Note:** Transform configs are *always* performed in the following 
                 * order:
                 * 
                 *  1. Scaling
                 *  2. Rotation
                 *  3. Translation
                 * 
                 * See also: {@link #scaling}, {@link #scalingX}, 
                 * {@link #scalingY}, and {@link #scalingCenterX}
                 */
                scalingCenterY: "number",
                
                constrainGradients: "bool"
                
                /**
                 * @cfg {Number/Object} rotation
                 * Applies an initial angle of rotation to the sprite.  May be a number 
                 * specifying the rotation in degrees.  Or may be a config object using 
                 * the below config options.
                 * 
                 * **Note:** Rotation config options will be overridden by values set on 
                 * the {@link #rotationRads}, {@link #rotationCenterX}, and 
                 * {@link #rotationCenterY} configs.  
                 * 
                 *     Ext.create({
                 *         xtype: 'draw',
                 *         renderTo: Ext.getBody(),
                 *         width: 600,
                 *         height: 400,
                 *         sprites: [{
                 *             type: 'rect',
                 *             x: 50,
                 *             y: 50,
                 *             width: 100,
                 *             height: 100,
                 *             fillStyle: '#1F6D91',
                 *             //rotation: 45
                 *             rotation: {
                 *                 degrees: 45,
                 *                 //rads: Math.PI / 4,
                 *                 //centerX: 50,
                 *                 //centerY: 50
                 *             }
                 *         }]
                 *     });
                 * 
                 * **Note:** Transform configs are *always* performed in the following 
                 * order:
                 * 
                 *  1. Scaling
                 *  2. Rotation
                 *  3. Translation
                 * 
                 * @cfg {Number} rotation.rads
                 * The angle in radians to rotate the sprite
                 * 
                 * @cfg {Number} rotation.degrees
                 * The angle in degrees to rotate the sprite (is ignored if rads or 
                 * {@link #rotationRads} is set
                 * 
                 * @cfg {Number} rotation.centerX
                 * The central coordinate of the sprite's rotation on the x-axis.  
                 * Unless explicitly set, will default to the calculated center of the 
                 * sprite along the x-axis.
                 * 
                 * @cfg {Number} rotation.centerY
                 * The central coordinate of the sprite's rotation on the y-axis.  
                 * Unless explicitly set, will default to the calculated center of the 
                 * sprite along the y-axis.
                 */
                
                /**
                 * @cfg {Number/Object} scaling
                 * Applies initial scaling to the sprite.  May be a number specifying 
                 * the amount to scale both the x and y-axis.  The number value 
                 * represents a percentage by which to scale the sprite.  **1** is equal 
                 * to 100%, **2** would be 200%, etc.  Or may be a config object using 
                 * the below config options.
                 * 
                 * **Note:** Scaling config options will be overridden by values set on 
                 * the {@link #scalingX}, {@link #scalingY}, {@link #scalingCenterX}, 
                 * and {@link #scalingCenterY} configs.
                 * 
                 *     Ext.create({
                 *         xtype: 'draw',
                 *         renderTo: Ext.getBody(),
                 *         width: 600,
                 *         height: 400,
                 *         sprites: [{
                 *             type: 'rect',
                 *             x: 50,
                 *             y: 50,
                 *             width: 100,
                 *             height: 100,
                 *             fillStyle: '#1F6D91',
                 *             //scaling: 2,
                 *             scaling: {
                 *                 x: 2,
             *                 y: 2
                 *                 //centerX: 100,
                 *                 //centerY: 100
                 *             }
                 *         }]
                 *     });
                 * 
                 * **Note:** Transform configs are *always* performed in the following 
                 * order:
                 * 
                 *  1. Scaling
                 *  2. Rotation
                 *  3. Translation
                 * 
                 * @cfg {Number} scaling.x
                 * The amount by which to scale the sprite along the x-axis.  The number 
                 * value represents a percentage by which to scale the sprite.  **1** is 
                 * equal to 100%, **2** would be 200%, etc.
                 * 
                 * @cfg {Number} scaling.y
                 * The amount by which to scale the sprite along the y-axis.  The number 
                 * value represents a percentage by which to scale the sprite.  **1** is 
                 * equal to 100%, **2** would be 200%, etc.
                 * 
                 * @cfg scaling.centerX
                 * The central coordinate of the sprite's scaling on the x-axis.  Unless 
                 * explicitly set, will default to the calculated center of the sprite 
                 * along the x-axis.
                 * 
                 * @cfg {Number} scaling.centerY
                 * The central coordinate of the sprite's scaling on the y-axis.  Unless 
                 * explicitly set, will default to the calculated center of the sprite 
                 * along the y-axis.
                 */
                
                /**
                 * @cfg {Object} translation 
                 * Applies an initial translation, adjustment in x/y positioning, to the 
                 * sprite.
                 * 
                 * **Note:** Translation config options will be overridden by values set 
                 * on the {@link #translationX} and {@link #translationY} configs.
                 * 
                 *     Ext.create({
                 *         xtype: 'draw',
                 *         renderTo: Ext.getBody(),
                 *         width: 600,
                 *         height: 400,
                 *             sprites: [{
                 *             type: 'rect',
                 *             x: 50,
                 *             y: 50,
                 *             width: 100,
                 *             height: 100,
                 *             fillStyle: '#1F6D91',
                 *             translation: {
                 *                 x: 50,
                 *                 y: 50
                 *             }
                 *         }]
                 *     });
                 * 
                 * **Note:** Transform configs are *always* performed in the following 
                 * order:
                 * 
                 *  1. Scaling
                 *  2. Rotation
                 *  3. Translation
                 * 
                 * @cfg {Number} translation.x
                 * The amount to translate the sprite along the x-axis.
                 * 
                 * @cfg {Number} translation.y
                 * The amount to translate the sprite along the y-axis.
                 */
            },
 
            aliases: {
                "stroke": "strokeStyle",
                "fill": "fillStyle",
                "color": "fillStyle",
                "stroke-width": "lineWidth",
                "stroke-linecap": "lineCap",
                "stroke-linejoin": "lineJoin",
                "stroke-miterlimit": "miterLimit",
                "text-anchor": "textAlign",
                "opacity": "globalAlpha",
 
                translateX: "translationX",
                translateY: "translationY",
                rotateRads: "rotationRads",
                rotateCenterX: "rotationCenterX",
                rotateCenterY: "rotationCenterY",
                scaleX: "scalingX",
                scaleY: "scalingY",
                scaleCenterX: "scalingCenterX",
                scaleCenterY: "scalingCenterY"
            },
 
            defaults: {
                hidden: false,
                zIndex: 0,
 
                strokeStyle: "none",
                fillStyle: "none",
                lineWidth: 1,
                lineDash: [],
                lineDashOffset: 0,
                lineCap: "butt",
                lineJoin: "miter",
                miterLimit: 10,
 
                shadowColor: "none",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 0,
 
                globalAlpha: 1,
                strokeOpacity: 1,
                fillOpacity: 1,
                transformFillStroke: false,
 
                translationX: 0,
                translationY: 0,
                rotationRads: 0,
                rotationCenterX: null,
                rotationCenterY: null,
                scalingX: 1,
                scalingY: 1,
                scalingCenterX: null,
                scalingCenterY: null,
                
                constrainGradients: false
            },
 
            triggers: {
                zIndex: "zIndex",
 
                globalAlpha: "canvas",
                globalCompositeOperation: "canvas",
 
                transformFillStroke: "canvas",
                strokeStyle: "canvas",
                fillStyle: "canvas",
                strokeOpacity: "canvas",
                fillOpacity: "canvas",
 
                lineWidth: "canvas",
                lineCap: "canvas",
                lineJoin: "canvas",
                lineDash: "canvas",
                lineDashOffset: "canvas",
                miterLimit: "canvas",
 
                shadowColor: "canvas",
                shadowOffsetX: "canvas",
                shadowOffsetY: "canvas",
                shadowBlur: "canvas",
 
                translationX: "transform",
                translationY: "transform",
                rotationRads: "transform",
                rotationCenterX: "transform",
                rotationCenterY: "transform",
                scalingX: "transform",
                scalingY: "transform",
                scalingCenterX: "transform",
                scalingCenterY: "transform",
                
                constrainGradients: "canvas"
            },
 
            updaters: {
                // 'bbox' updater is meant to be called by subclasses when changes 
                // to attributes are expected to result in a change in sprite's dimensions. 
                bbox: 'bboxUpdater',
 
                zIndex: function (attr) {
                    attr.dirtyZIndex = true;
                },
 
                transform: function (attr) {
                    attr.dirtyTransform = true;
                    attr.bbox.transform.dirty = true;
                }
            }
        }
    },
 
    /**
     * @property {Object} attr 
     * The visual attributes of the sprite, e.g. strokeStyle, fillStyle, lineWidth...
     */
 
    /**
     * @cfg {Ext.draw.modifier.Animation} animation
     * @accessor
     */
 
    config: {
        /**
         * @private
         * @cfg {Ext.draw.Surface/Ext.draw.sprite.Instancing/Ext.draw.sprite.Composite} parent
         * The immediate parent of the sprite. Not necessarily a surface.
         */
        parent: null,
        /**
         * @private
         * @cfg {Ext.draw.Surface} surface
         * The surface that this sprite is rendered into.
         * This config is not meant to be used directly.
         * Please use the {@link Ext.draw.Surface#add} method instead.
         */
        surface: null
    },
 
    onClassExtended: function (subClass, data) {
        // The `def` here is no longer a config, but an instance 
        // of the AttributeDefinition class created with that config, 
        // which can now be retrieved from `initialConfig`. 
        var superclassCfg = subClass.superclass.self.def.initialConfig,
            ownCfg = data.inheritableStatics && data.inheritableStatics.def,
            cfg;
 
        // If sprite defines attributes of its own, merge that with those of its parent. 
        if (ownCfg) {
            cfg = Ext.Object.merge({}, superclassCfg, ownCfg);
            subClass.def = new Ext.draw.sprite.AttributeDefinition(cfg);
            delete data.inheritableStatics.def;
        } else {
            subClass.def = new Ext.draw.sprite.AttributeDefinition(superclassCfg);
        }
 
        subClass.def.spriteClass = subClass;
    },
 
    constructor: function (config) {
        //<debug> 
        if (Ext.getClassName(this) === 'Ext.draw.sprite.Sprite') {
            throw 'Ext.draw.sprite.Sprite is an abstract class';
        }
        //</debug> 
        var me = this,
            attributeDefinition = me.self.def,
            // It is important to get defaults (make sure 
            // 'defaults' config applier of the AttributeDefinition is called, 
            // since it is initialized lazily) before the attributes 
            // are initialized ('initializeAttributes' call). 
            defaults = attributeDefinition.getDefaults(),
            processors = attributeDefinition.getProcessors(),
            modifiers, name;
 
        config = Ext.isObject(config) ? config : {};
 
        me.id = config.id || Ext.id(null, 'ext-sprite-');
        me.attr = {};
        // Observable's constructor also calls the initConfig for us. 
        me.mixins.observable.constructor.apply(me, arguments);
 
        modifiers = Ext.Array.from(config.modifiers, true);
        me.createModifiers(modifiers);
        me.initializeAttributes();
        me.setAttributes(defaults, true);
        //<debug> 
        for (name in config) {
            if (name in processors && me['get' + name.charAt(0).toUpperCase() + name.substr(1)]) {
                Ext.raise('The ' + me.$className +
                    ' sprite has both a config and an attribute with the same name: ' + name + '.');
            }
        }
        //</debug> 
        me.setAttributes(config);
    },
 
    updateSurface: function (surface, oldSurface) {
        if (oldSurface) {
            oldSurface.remove(this);
        }
    },
 
    /**
     * @private
     * Current state of the sprite.
     * Set to `true` if the sprite needs to be repainted.
     * @cfg {Boolean} dirty 
     * @accessor
     */
 
    getDirty: function () {
        return this.attr.dirty;
    },
 
    setDirty: function (dirty) {
        // This could have been a regular attribute. 
        // Instead, it's a hidden one, which is initialized inside in the 
        // Target's modifier `prepareAttributes` method and is exposed 
        // as a config. The idea is to skip the modifier chain when 
        // we simply need to change the sprite's state and notify 
        // the sprite's parent. 
        this.attr.dirty = dirty;
 
        if (dirty) {
            var parent = this.getParent();
            if (parent) {
                parent.setDirty(true);
            }
        }
    },
 
    addModifier: function (modifier, reinitializeAttributes) {
        var me = this,
            mods = me.modifiers,
            animation = mods.animation,
            target = mods.target,
            type;
 
        if (!(modifier instanceof Ext.draw.modifier.Modifier)) {
            type = typeof modifier === 'string' ? modifier : modifier.type;
            if (type && !mods[type]) {
                mods[type] = modifier = Ext.factory(modifier, null, null, 'modifier');
            }
        }
 
        modifier.setSprite(me);
 
        if (modifier.preFx || modifier.config && modifier.config.preFx) {
            if (animation._lower) {
                animation._lower.setUpper(modifier);
            }
            modifier.setUpper(animation);
        } else {
            target._lower.setUpper(modifier);
            modifier.setUpper(target);
        }
 
        if (reinitializeAttributes) {
            me.initializeAttributes();
        }
 
        return modifier;
    },
 
    createModifiers: function (modifiers) {
        var me = this,
            Modifier = Ext.draw.modifier,
            animation = me.getInitialConfig().animation,
            mods, i, ln;
 
        // Create default modifiers. 
        me.modifiers = mods = {
            target: new Modifier.Target({sprite: me}),
            animation: new Modifier.Animation(Ext.apply({sprite: me}, animation))
        };
 
        // Link modifiers. 
        mods.animation.setUpper(mods.target);
 
        for (= 0, ln = modifiers.length; i < ln; i++) {
            me.addModifier(modifiers[i], false);
        }
 
        return mods;
    },
 
    /**
     * Returns the current animation instance.
     * return {Ext.draw.modifier.Animation} The animation modifier used to animate the 
     * sprite
     */
    getAnimation: function () {
        return this.modifiers.animation;
    },
 
    /**
     * Sets the animation config used by the sprite when animating the sprite's 
     * attributes and transformation properties.
     * 
     *     var drawCt = Ext.create({
     *         xtype: 'draw',
     *         renderTo: document.body,
     *         width: 400,
     *         height: 400,
     *         sprites: [{
     *             type: 'rect',
     *             x: 50,
     *             y: 50,
     *             width: 100,
     *             height: 100,
     *             fillStyle: '#1F6D91'
     *         }]
     *     });
     *     
     *     var rect = drawCt.getSurface().getItems()[0];
     *     
     *     rect.setAnimation({
     *         duration: 1000,
     *         easing: 'elasticOut'
     *     });
     *     
     *     Ext.defer(function () {
     *         rect.setAttributes({
     *             width: 250
     *         });
     *     }, 500);
     * 
     * @param {Object} config The Ext.draw.modifier.Animation config for this sprite's 
     * animations.
     */
    setAnimation: function (config) {
        if (!this.isConfiguring) {
            this.modifiers.animation.setConfig(config || {duration: 0});
        }
    },
 
    initializeAttributes: function () {
        this.modifiers.target.prepareAttributes(this.attr);
    },
 
    /**
     * @private
     * Calls updaters triggered by changes to sprite attributes.
     * @param attr The attributes of a sprite or its instance.
     */
    callUpdaters: function (attr) {
        attr = attr || this.attr;
        
        var me = this,
            pendingUpdaters = attr.pendingUpdaters,
            updaters = me.self.def.getUpdaters(),
            any = false,
            dirty = false,
            flags, updater, fn;
 
        // If updaters set sprite attributes that trigger other updaters, 
        // those updaters are not called right away, but wait until all current 
        // updaters are called (till the next do/while loop iteration). 
 
        me.callUpdaters = Ext.emptyFn; // Hide class method from the instance. 
 
        do {
            any = false;
            for (updater in pendingUpdaters) {
                any = true;
                flags = pendingUpdaters[updater];
                delete pendingUpdaters[updater];
                fn = updaters[updater];
                if (typeof fn === 'string') {
                    fn = me[fn];
                }
                if (fn) {
                    fn.call(me, attr, flags);
                }
            }
            dirty = dirty || any;
        } while (any);
 
        delete me.callUpdaters; // Restore class method. 
 
        if (dirty) {
            me.setDirty(true);
        }
    },
 
    /**
     * @private
     */
    callUpdater: function (attr, updater, triggers) {
        this.scheduleUpdater(attr, updater, triggers);
        this.callUpdaters(attr);
    },
 
    /**
     * @private
     * Schedules specified updaters to be called.
     * Updaters are called implicitly as a result of a change to sprite attributes.
     * But sometimes it may be required to call an updater without setting an attribute,
     * and without messing up the updater call order (by calling the updater immediately).
     * For example:
     *
     *     updaters: {
     *          onDataX: function (attr) {
     *              this.processDataX();
     *              // Process data Y every time data X is processed.
     *              // Call the onDataY updater as if changes to dataY attribute itself
     *              // triggered the update.
     *              this.scheduleUpdaters(attr, {onDataY: ['dataY']});
     *              // Alternatively:
     *              // this.scheduleUpdaters(attr, ['onDataY'], ['dataY']);
     *          }
     *     }
     *
     * @param {Object} attr The attributes object (not necesseraly of a sprite, but of its instance).
     * @param {Object/String[]} updaters A map of updaters to be called to attributes that triggered the update.
     * @param {String[]} [triggers] Attributes that triggered the update. An optional parameter.
     * If used, the `updaters` parameter will be treated as an array of updaters to be called.
     */
    scheduleUpdaters: function (attr, updaters, triggers) {
        var updater;
 
        attr = attr || this.attr;
 
        if (triggers) {
            for (var i = 0, ln = updaters.length; i < ln; i++) {
                updater = updaters[i];
                this.scheduleUpdater(attr, updater, triggers);
            }
        } else {
            for (updater in updaters) {
                triggers = updaters[updater];
                this.scheduleUpdater(attr, updater, triggers);
            }
        }
    },
 
    /**
     * @private
     * @param attr {Object} The attributes object (not necesseraly of a sprite, but of its instance).
     * @param updater {String} Updater to be called.
     * @param {String[]} [triggers] Attributes that triggered the update.
     */
    scheduleUpdater: function (attr, updater, triggers) {
        triggers = triggers || [];
        attr = attr || this.attr;
 
        var pendingUpdaters = attr.pendingUpdaters;
 
        if (updater in pendingUpdaters) {
            if (triggers.length) {
                pendingUpdaters[updater] = Ext.Array.merge(pendingUpdaters[updater], triggers);
            }
        } else {
            pendingUpdaters[updater] = triggers;
        }
    },
 
    /**
     * Set attributes of the sprite.
     * By default only the attributes that have processors will be set
     * and all other attributes will be filtered out as a result of the
     * normalization process.
     * The normalization process can be skipped. In that case all the given
     * attributes will be set unprocessed. This will result in better
     * performance, but might also pollute the sprite's attributes with
     * unwanted attributes or attributes with invalid values, if one is not
     * careful. See also {@link #setAttributesBypassingNormalization}.
     * If normalization is skipped, one may also chose to avoid copying
     * the given object. This may result in even better performance, but
     * only in cases where most of the attributes have values that are
     * different from the old values, because copying additionally checks
     * if the value has changed.
     *
     * @param {Object} changes The content of the change.
     * @param {Boolean} [bypassNormalization] `true` to avoid normalization of the given changes.
     * @param {Boolean} [avoidCopy] `true` to avoid copying the `changes` object.
     * `bypassNormalization` should also be `true`. The content of object may be destroyed.
     */
    setAttributes: function (changes, bypassNormalization, avoidCopy) {
        var me = this,
            changesToPush;
 
        //<debug> 
        if (me.destroyed) {
            Ext.Error.raise("Setting attributes of a destroyed sprite.");
        }
        //</debug> 
 
        if (bypassNormalization) {
            if (avoidCopy) {
                changesToPush = changes;
            } else {
                changesToPush = Ext.apply({}, changes);
            }
        } else {
            changesToPush = me.self.def.normalize(changes);
        }
 
        me.modifiers.target.pushDown(me.attr, changesToPush);
    },
 
    /**
     * Set attributes of the sprite, assuming the names and values have already been
     * normalized.
     *
     * @deprecated 6.5.0 Use setAttributes directly with bypassNormalization argument being `true`.
     * @param {Object} changes The content of the change.
     * @param {Boolean} [avoidCopy] `true` to avoid copying the `changes` object.
     * The content of object may be destroyed.
     */
    setAttributesBypassingNormalization: function (changes, avoidCopy) {
        return this.setAttributes(changes, true, avoidCopy);
    },
 
    /**
     * @private
     */
    bboxUpdater: function (attr) {
        var hasRotation = attr.rotationRads !== 0,
            hasScaling = attr.scalingX !== 1 || attr.scalingY !== 1,
            noRotationCenter = attr.rotationCenterX === null || attr.rotationCenterY === null,
            noScalingCenter = attr.scalingCenterX === null || attr.scalingCenterY === null;
 
        // 'bbox' is not a standard attribute (in the sense that it doesn't have 
        // a processor = not explicitly declared and cannot be set by a user) 
        // and is calculated automatically by the 'getBBox' method. 
        // The 'bbox' attribute is created by the 'prepareAttributes' method 
        // of the Target modifier at construction time. 
 
        // Both plain and tranformed bounding boxes need to be updated. 
        // Mark them as such below. 
        attr.bbox.plain.dirty = true;      // updated by the 'updatePlainBBox' method 
 
        // Before transformed bounding box can be updated, 
        // we must ensure that we have correct forward and inverse 
        // transformation matrices (which are also created by the Target modifier), 
        // so that they reflect the current state of the scaling, rotation 
        // and other transformation attributes. 
        // The 'applyTransformations' method does just that. 
 
        // The 'dirtyTransform' flag (another implicit attribute) 
        // is set to true when any of the transformation attributes change, 
        // to let us know that transformation matrices need to be updated. 
 
        attr.bbox.transform.dirty = true;  // updated by the 'updateTransformedBBox' method 
 
        if (hasRotation && noRotationCenter || hasScaling && noScalingCenter) {
            this.scheduleUpdater(attr, 'transform');
        }
    },
 
    /**
     * Returns the bounding box for the given Sprite as calculated with the Canvas engine.
     *
     * @param {Boolean} [isWithoutTransform] Whether to calculate the bounding box with the current transforms or not.
     */
    getBBox: function (isWithoutTransform) {
        var me = this,
            attr = me.attr,
            bbox = attr.bbox,
            plain = bbox.plain,
            transform = bbox.transform;
 
        if (plain.dirty) {
            me.updatePlainBBox(plain);
            plain.dirty = false;
        }
 
        if (!isWithoutTransform) {
            // If tranformations are to be applied ('dirtyTransform' is true), 
            // then this will itself call the 'getBBox' method 
            // to get the plain untransformed bbox and calculate its center. 
            me.applyTransformations();
            if (transform.dirty) {
                me.updateTransformedBBox(transform, plain);
                transform.dirty = false;
            }
            return transform;
        }
 
        return plain;
    },
 
    /**
     * @method
     * @protected
     * Subclass will fill the plain object with `x`, `y`, `width`, `height` information
     * of the plain bounding box of this sprite.
     *
     * @param {Object} plain Target object.
     */
    updatePlainBBox: Ext.emptyFn,
 
    /**
     * @protected
     * Subclass will fill the plain object with `x`, `y`, `width`, `height` information
     * of the transformed bounding box of this sprite.
     *
     * @param {Object} transform Target object (transformed bounding box) to populate.
     * @param {Object} plain Untransformed bounding box.
     */
    updateTransformedBBox: function (transform, plain) {
        this.attr.matrix.transformBBox(plain, 0, transform);
    },
 
    /**
     * Subclass can rewrite this function to gain better performance.
     * @param {Boolean} isWithoutTransform 
     * @return {Array}
     */
    getBBoxCenter: function (isWithoutTransform) {
        var bbox = this.getBBox(isWithoutTransform);
        if (bbox) {
            return [
                bbox.x + bbox.width * 0.5,
                bbox.y + bbox.height * 0.5
            ];
        } else {
            return [0, 0];
        }
    },
 
    /**
     * Hide the sprite.
     * @return {Ext.draw.sprite.Sprite} this
     * @chainable
     */
    hide: function () {
        this.attr.hidden = true;
        this.setDirty(true);
        return this;
    },
 
    /**
     * Show the sprite.
     * @return {Ext.draw.sprite.Sprite} this
     * @chainable
     */
    show: function () {
        this.attr.hidden = false;
        this.setDirty(true);
        return this;
    },
 
    /**
     * Applies sprite's attributes to the given context.
     * @param {Object} ctx Context to apply sprite's attributes to.
     * @param {Array} rect The rect of the context to be affected by gradients.
     */
    useAttributes: function (ctx, rect) {
        // Always (force) apply transformation to sprite instances, 
        // even if their 'dirtyTransform' flag is false. 
        // The 'dirtyTransform' flag of an instance may never be set to 'true', as the 
        // 'transform' updater won't ever be called for sprite instances that have 
        // the same transform attributes as their template, because there's nothing to update 
        // (an instance is simply a prototype chained template's 'attr' object, that only 
        // has own properties for attributes whose values are different). 
        // Making the modifier recognize transform attributes set on sprite instances 
        // (see Ext.draw.modifier.Modifier's 'pushDown' method, where attributes with 
        // same values are removed from the 'changes' object) and making sure their 'dirtyTransform' 
        // flag is set to 'true' is not a correct solution here, because of the way instances 
        // are rendered (see Ext.draw.sprite.Instancing's 'render' method) - there is no way 
        // an instance wounldn't want its 'applyTransformations' method called. 
        this.applyTransformations(this.isSpriteInstance);
        var attr = this.attr,
            canvasAttributes = attr.canvasAttributes,
            strokeStyle = canvasAttributes.strokeStyle,
            fillStyle = canvasAttributes.fillStyle,
            lineDash = canvasAttributes.lineDash,
            lineDashOffset = canvasAttributes.lineDashOffset,
            id;
 
        if (strokeStyle) {
            if (strokeStyle.isGradient) {
                ctx.strokeStyle = 'black';
                ctx.strokeGradient = strokeStyle;
            } else {
                ctx.strokeGradient = false;
            }
        }
 
        if (fillStyle) {
            if (fillStyle.isGradient) {
                ctx.fillStyle = 'black';
                ctx.fillGradient = fillStyle;
            } else {
                ctx.fillGradient = false;
            }
        }
 
        if (lineDash) {
            ctx.setLineDash(lineDash);
        }
 
        // Only set lineDashOffset to contexts that support the property (excludes VML). 
        if ( Ext.isNumber(lineDashOffset) && Ext.isNumber(ctx.lineDashOffset) ) {
            ctx.lineDashOffset = lineDashOffset;
        }
 
        for (id in canvasAttributes) {
            if (canvasAttributes[id] !== undefined && canvasAttributes[id] !== ctx[id]) {
                ctx[id] = canvasAttributes[id];
            }
        }
 
        this.setGradientBBox(ctx, rect);
    },
 
    setGradientBBox: function (ctx, rect) {
        var attr = this.attr;
        if (attr.constrainGradients) {
            ctx.setGradientBBox({x: rect[0], y: rect[1], width: rect[2], height: rect[3]});
        } else {
            ctx.setGradientBBox(this.getBBox(attr.transformFillStroke));
        }
    },
 
    /**
     * @private
     *
     * Calculates forward and inverse transform matrices from sprite's attributes.
     * Transformations are applied in the following order: Scaling, Rotation, Translation.
     * @param {Boolean} [force=false] Forces recalculation of transform matrices even when
     * sprite's transform attributes supposedly haven't changed.
     */
    applyTransformations: function (force) {
        if (!force && !this.attr.dirtyTransform) {
            return;
        }
        var me = this,
            attr = me.attr,
            center = me.getBBoxCenter(true),
            centerX = center[0],
            centerY = center[1],
 
            tx = attr.translationX,
            ty = attr.translationY,
 
            sx = attr.scalingX,
            sy = attr.scalingY === null ? attr.scalingX : attr.scalingY,
            scx = attr.scalingCenterX === null ? centerX : attr.scalingCenterX,
            scy = attr.scalingCenterY === null ? centerY : attr.scalingCenterY,
 
            rad = attr.rotationRads,
            rcx = attr.rotationCenterX === null ? centerX : attr.rotationCenterX,
            rcy = attr.rotationCenterY === null ? centerY : attr.rotationCenterY,
 
            cos = Math.cos(rad),
            sin = Math.sin(rad),
 
            tx_4, ty_4;
 
        if (sx === 1 && sy === 1) {
            scx = 0;
            scy = 0;
        }
 
        if (rad === 0) {
            rcx = 0;
            rcy = 0;
        }
 
        // Translation component after steps 1-4 (see below). 
        // Saving it here to prevent double calculation. 
        tx_4 = scx * (1 - sx) - rcx;
        ty_4 = scy * (1 - sy) - rcy;
 
        // The matrix below is a result of: 
        //     (7)          (6)             (5)             (4)           (3)           (2)           (1) 
        // | 1 0 tx |   | 1 0 rcx |   | cos -sin 0 |   | 1 0 -rcx |   | 1 0 scx |   | sx 0 0 |   | 1 0 -scx | 
        // | 0 1 ty | * | 0 1 rcy | * | sin  cos 0 | * | 0 1 -rcy | * | 0 1 scy | * | 0 sy 0 | * | 0 1 -scy | 
        // | 0 0  1 |   | 0 0  1  |   |  0    0  1 |   | 0 0  1   |   | 0 0  1  |   | 0  0 0 |   | 0 0  1   | 
        attr.matrix.elements = [
            cos * sx, sin * sx,
            -sin * sy, cos * sy,
            cos * tx_4 - sin * ty_4 + rcx + tx,
            sin * tx_4 + cos * ty_4 + rcy + ty
        ];
        attr.matrix.inverse(attr.inverseMatrix);
        attr.dirtyTransform = false;
        attr.bbox.transform.dirty = true;
    },
 
    /**
     * Pre-multiplies the current transformation matrix of a sprite with the given matrix.
     * If `isSplit` parameter is `true`, the resulting matrix is also split into
     * individual components (scaling, rotation, translation) and corresponding sprite
     * attributes are updated. The shearing component is not extracted.
     * Note, that transformation attributes work as if transformations are applied to the
     * local coordinate system of a sprite, while matrix transformations transform
     * the global coordinate space or the surface grid.
     * Since the `transform` method returns the sprite itself, calls to the method
     * can be chained. And if updating sprite transformation attributes is desired,
     * it can be achieved by setting the `isSplit` parameter of the last call to `true`.
     * For example:
     *
     *     sprite.transform(matrixA).transform(matrixB).transform(matrixC, true);
     * 
     * See also: {@link #setTransform}
     *
     * @param {Ext.draw.Matrix/Number[]} matrix A transformation matrix or array of its elements.
     * @param {Boolean} [isSplit=false] If 'true', transformation attributes are updated.
     * @return {Ext.draw.sprite.Sprite} This sprite.
     */
    transform: function (matrix, isSplit) {
        var attr = this.attr,
            spriteMatrix = attr.matrix,
            elements;
 
        if (matrix && matrix.isMatrix) {
            elements = matrix.elements;
        } else {
            elements = matrix;
        }
        //<debug> 
        if (!(Ext.isArray(elements) && elements.length === 6)) {
            Ext.raise("An instance of Ext.draw.Matrix or an array of 6 numbers is expected.");
        }
        //</debug> 
 
        spriteMatrix.prepend.apply(spriteMatrix, elements.slice());
        spriteMatrix.inverse(attr.inverseMatrix);
 
        if (isSplit) {
            this.updateTransformAttributes();
        }
 
        attr.dirtyTransform = false;
        attr.bbox.transform.dirty = true;
 
        this.setDirty(true);
 
        return this;
    },
 
    /**
     * @private
     */
    updateTransformAttributes: function () {
        var attr = this.attr,
            split = attr.matrix.split();
 
        attr.rotationRads = split.rotate;
        attr.rotationCenterX = 0;
        attr.rotationCenterY = 0;
        attr.scalingX = split.scaleX;
        attr.scalingY = split.scaleY;
        attr.scalingCenterX = 0;
        attr.scalingCenterY = 0;
        attr.translationX = split.translateX;
        attr.translationY = split.translateY;
    },
 
    /**
     * Resets current transformation matrix of a sprite to the identify matrix.
     * @param {Boolean} [isSplit=false] If 'true', transformation attributes are updated.
     * @return {Ext.draw.sprite.Sprite} This sprite.
     */
    resetTransform: function (isSplit) {
        var attr = this.attr;
 
        attr.matrix.reset();
        attr.inverseMatrix.reset();
 
        if (!isSplit) {
            this.updateTransformAttributes();
        }
 
        attr.dirtyTransform = false;
        attr.bbox.transform.dirty = true;
 
        this.setDirty(true);
 
        return this;
    },
 
    /**
     * Resets current transformation matrix of a sprite to the identify matrix
     * and pre-multiplies it with the given matrix.
     * This is effectively the same as calling {@link #resetTransform},
     * followed by {@link #transform} with the same arguments.
     * 
     * See also: {@link #transform}
     * 
     *     var drawContainer = new Ext.draw.Container({
     *         renderTo: Ext.getBody(),
     *         width: 380,
     *         height: 380,
     *         sprites: [{
     *             type: 'rect',
     *             width: 100,
     *             height: 100,
     *             fillStyle: 'red'
     *         }]
     *     });
     *     
     *     var main = drawContainer.getSurface();
     *     var rect = main.getItems()[0];
     *     
     *     var m = new Ext.draw.Matrix().rotate(Math.PI, 100, 100);
     *     
     *     rect.setTransform(m);
     *     main.renderFrame();
     * 
     * There may be times where the transformation you need to apply cannot easily be 
     * accomplished using the sprite’s convenience transform methods.  Or, you may want 
     * to pass a matrix directly to the sprite in order to set a transformation.  The 
     * `setTransform` method allows for this sort of advanced usage as well.  The 
     * following tables show each transformation matrix used when applying 
     * transformations to a sprite.
     * 
     * ### Translate
     * <table style="text-align: center;">
     *     <tr>
     *         <td style="font-weight: normal;">1</td>
     *         <td style="font-weight: normal;">0</td>
     *         <td style="font-weight: normal;">tx</td>
     *     </tr>
     *     <tr>
     *         <td>0</td>
     *         <td>1</td>
     *         <td>ty</td>
     *     </tr>
     *     <tr>
     *         <td>0</td>
     *         <td>0</td>
     *         <td>1</td>
     *     </tr>
     * </table>
     * 
     * ### Rotate (θ is the angle of rotation)
     * <table style="text-align: center;">
     *     <tr>
     *         <td style="font-weight: normal;">cos(θ)</td>
     *         <td style="font-weight: normal;">-sin(θ)</td>
     *         <td style="font-weight: normal;">0</td>
     *     </tr>
     *     <tr>
     *         <td>0</td>
     *         <td>cos(θ)</td>
     *         <td>0</td>
     *     </tr>
     *     <tr>
     *         <td>0</td>
     *         <td>0</td>
     *         <td>1</td>
     *     </tr>
     * </table>
     * 
     * ### Scale
     * <table style="text-align: center;">
     *     <tr>
     *         <td style="font-weight: normal;">sx</td>
     *         <td style="font-weight: normal;">0</td>
     *         <td style="font-weight: normal;">0</td>
     *     </tr>
     *     <tr>
     *         <td>0</td>
     *         <td>cos(θ)</td>
     *         <td>0</td>
     *     </tr>
     *     <tr>
     *         <td>0</td>
     *         <td>0</td>
     *         <td>1</td>
     *     </tr>
     * </table>
     * 
     * ### Shear X _(λ is the distance on the x axis to shear by)_
     * <table style="text-align: center;">
     *     <tr>
     *         <td style="font-weight: normal;">1</td>
     *         <td style="font-weight: normal;">λx</td>
     *         <td style="font-weight: normal;">0</td>
     *     </tr>
     *     <tr>
     *         <td>0</td>
     *         <td>1</td>
     *         <td>0</td>
     *     </tr>
     *     <tr>
     *         <td>0</td>
     *         <td>0</td>
     *         <td>1</td>
     *     </tr>
     * </table>
     * 
     * ### Shear Y (λ is the distance on the y axis to shear by)
     * <table style="text-align: center;">
     *     <tr>
     *         <td style="font-weight: normal;">1</td>
     *         <td style="font-weight: normal;">0</td>
     *         <td style="font-weight: normal;">0</td>
     *     </tr>
     *     <tr>
     *         <td>λy</td>
     *         <td>1</td>
     *         <td>0</td>
     *     </tr>
     *     <tr>
     *         <td>0</td>
     *         <td>0</td>
     *         <td>1</td>
     *     </tr>
     * </table>
     * 
     * ### Skew X (θ is the angle to skew by)
     * <table style="text-align: center;">
     *     <tr>
     *         <td style="font-weight: normal;">1</td>
     *         <td style="font-weight: normal;">tan(θ)</td>
     *         <td style="font-weight: normal;">0</td>
     *     </tr>
     *     <tr>
     *         <td>0</td>
     *         <td>1</td>
     *         <td>0</td>
     *     </tr>
     *     <tr>
     *         <td>0</td>
     *         <td>0</td>
     *         <td>1</td>
     *     </tr>
     * </table>
     * 
     * ### Skew Y (θ is the angle to skew by)
     * <table style="text-align: center;">
     *     <tr>
     *         <td style="font-weight: normal;">1</td>
     *         <td style="font-weight: normal;">0</td>
     *         <td style="font-weight: normal;">0</td>
     *     </tr>
     *     <tr>
     *         <td>tan(θ)</td>
     *         <td>1</td>
     *         <td>0</td>
     *     </tr>
     *     <tr>
     *         <td>0</td>
     *         <td>0</td>
     *         <td>1</td>
     *     </tr>
     * </table>
     * 
     * Multiplying matrices for translation, rotation, scaling, and shearing / skewing 
     * any number of times in the desired order produces a single matrix for a composite 
     * transformation.  You can use the product as a value for the `setTransform`method 
     * of a sprite:
     * 
     *     mySprite.setTransform([a, b, c, d, e, f]);
     * 
     * Where `a`, `b`, `c`, `d`, `e`, `f` are numeric values that correspond to the 
     * following transformation matrix components:
     * 
     * <table style="text-align: center;">
     *     <tr>
     *         <td style="font-weight: normal;">a</td>
     *         <td style="font-weight: normal;">c</td>
     *         <td style="font-weight: normal;">e</td>
     *     </tr>
     *     <tr>
     *         <td>b</td>
     *         <td>d</td>
     *         <td>f</td>
     *     </tr>
     *     <tr>
     *         <td>0</td>
     *         <td>0</td>
     *         <td>1</td>
     *     </tr>
     * </table>
     * 
     * @param {Ext.draw.Matrix/Number[]} matrix The transformation matrix to apply or its 
     * raw elements as an array.
     * @param {Boolean} [isSplit=false] If `true`, transformation attributes are updated.
     * @return {Ext.draw.sprite.Sprite} This sprite.
     */
    setTransform: function (matrix, isSplit) {
        this.resetTransform(true);
        this.transform.call(this, matrix, isSplit);
 
        return this;
    },
 
    /**
     * @method
     * Called before rendering.
     */
    preRender: Ext.emptyFn,
 
    /**
     * @method
     * This is where the actual sprite rendering happens by calling `ctx` methods.
     * @param {Ext.draw.Surface} surface A draw container surface.
     * @param {CanvasRenderingContext2D} ctx A context object that is API compatible with the native
     * [CanvasRenderingContext2D](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D).
     * @param {Number[]} surfaceClipRect The clip rect: [left, top, width, height].
     * Not to be confused with the `surface.getRect()`, which represents the location
     * and size of the surface in a draw container, in draw container coordinates.
     * The clip rect on the other hand represents the portion of the surface that is being
     * rendered, in surface coordinates.
     *
     * @return {*} returns `false` to stop rendering in this frame.
     * All the sprites that haven't been rendered will have their dirty flag untouched.
     */
    render: Ext.emptyFn,
 
    //<debug> 
    /**
     * @private
     * Renders the bounding box of transformed sprite.
     */
    renderBBox: function (surface, ctx) {
        var bbox = this.getBBox();
 
        ctx.beginPath();
        ctx.moveTo(bbox.x, bbox.y);
        ctx.lineTo(bbox.x + bbox.width, bbox.y);
        ctx.lineTo(bbox.x + bbox.width, bbox.y + bbox.height);
        ctx.lineTo(bbox.x, bbox.y + bbox.height);
        ctx.closePath();
 
        ctx.strokeStyle = 'red';
        ctx.strokeOpacity = 1;
        ctx.lineWidth = 0.5;
 
        ctx.stroke();
    },
    //</debug> 
 
    /**
     * Performs a hit test on the sprite.
     * @param {Array} point A two-item array containing x and y coordinates of the point.
     * @param {Object} options Hit testing options.
     * @return {Object} A hit result object that contains more information about what
     * exactly was hit or null if nothing was hit.
     */
    hitTest: function (point, options) {
        // Meant to be overridden in subclasses for more precise hit testing. 
        // This version doesn't take any options and simply hit tests sprite's 
        // bounding box, if the sprite is visible. 
        if (this.isVisible()) {
            var x = point[0],
                y = point[1],
                bbox = this.getBBox(),
                isBBoxHit = bbox && x >= bbox.x && x <= (bbox.x + bbox.width) &&
                                    y >= bbox.y && y <= (bbox.y + bbox.height);
            if (isBBoxHit) {
                return {
                    sprite: this
                };
            }
        }
        return null;
    },
 
    /**
     * @private
     * Checks if the sprite can be seen.
     * This includes the `hidden` attribute check, alpha/opacity checks,
     * fill/stroke color checks and surface/parent checks.
     * The method doesn't check if the sprite is off-screen.
     * @return {Boolean} Returns `true`, if the sprite can be seen.
     */
    isVisible: function () {
        var attr = this.attr,
            parent = this.getParent(),
            hasParent = parent && (parent.isSurface || parent.isVisible()),
            isSeen = hasParent && !attr.hidden && attr.globalAlpha,
            none1 = Ext.util.Color.NONE,
            none2 = Ext.util.Color.RGBA_NONE,
            hasFill = attr.fillOpacity && attr.fillStyle !== none1 && attr.fillStyle !== none2,
            hasStroke = attr.strokeOpacity && attr.strokeStyle !== none1 && attr.strokeStyle !== none2,
            result = isSeen && (hasFill || hasStroke);
 
        return !!result;
    },
 
    repaint: function () {
        var surface = this.getSurface();
        if (surface) {
            surface.renderFrame();
        }
    },
 
    /**
     * Removes this sprite from its surface.
     * The sprite itself is not destroyed.
     * @return {Ext.draw.sprite.Sprite} Returns the removed sprite or `null` otherwise.
     */
    remove: function () {
        var surface = this.getSurface();
 
        if (surface && surface.isSurface) {
            return surface.remove(this);
        }
 
        return null;
    },
 
    /**
     * Removes the sprite and clears all listeners.
     */
    destroy: function () {
        var me = this,
            modifier = me.modifiers.target,
            currentModifier;
 
        while (modifier) {
            currentModifier = modifier;
            modifier = modifier._lower;
            currentModifier.destroy();
        }
 
        delete me.attr;
 
        me.remove();
 
        if (me.fireEvent('beforedestroy', me) !== false) {
            me.fireEvent('destroy', me);
        }
 
        me.callParent();
    }
}, function () { // onClassCreated 
    // Create one AttributeDefinition instance per sprite class when a class is created 
    // and replace the `def` config with the instance that was created using that config. 
    // Here we only create an AttributeDefinition instance for the base Sprite class, 
    // attribute definitions for subclasses are created inside onClassExtended method. 
    this.def = new Ext.draw.sprite.AttributeDefinition(this.def);
    this.def.spriteClass = this;
});