    /**
     * A Surface is an interface to render methods inside a draw {@link Ext.draw.Component}.
     * A Surface contains methods to render sprites, get bounding boxes of sprites, add
     * sprites to the canvas, initialize other graphic components, etc. One of the most used
     * methods for this class is the `add` method, to add Sprites to the surface.
     *
     * Most of the Surface methods are abstract and they have a concrete implementation
     * in VML or SVG engines.
     *
     * A Surface instance can be accessed as a property of a draw component. For example:
     *
     *     drawComponent.surface.add({
     *         type: 'circle',
     *         fill: '#ffc',
     *         radius: 100,
     *         x: 100,
     *         y: 100
     *     });
     *
     * The configuration object passed in the `add` method is the same as described in the {@link Ext.draw.Sprite}
     * class documentation.
     *
     * # Listeners
     *
     * You can also add event listeners to the surface using the `Observable` listener syntax. Supported events are:
     *
     * - mousedown
     * - mouseup
     * - mouseover
     * - mouseout
     * - mousemove
     * - mouseenter
     * - mouseleave
     * - click
     *
     * For example:
     *
     *     drawComponent.surface.on({
     *        'mousemove': function() {
     *             console.log('moving the mouse over the surface');
     *         }
     *     });
     *
     * # Example
     *
     *     var drawComponent = Ext.create('Ext.draw.Component', {
     *         width: 800,
     *         height: 600,
     *         renderTo: document.body
     *     }), surface = drawComponent.surface;
     *
     *     surface.add([{
     *         type: 'circle',
     *         radius: 10,
     *         fill: '#f00',
     *         x: 10,
     *         y: 10,
     *         group: 'circles'
     *     }, {
     *         type: 'circle',
     *         radius: 10,
     *         fill: '#0f0',
     *         x: 50,
     *         y: 50,
     *         group: 'circles'
     *     }, {
     *         type: 'circle',
     *         radius: 10,
     *         fill: '#00f',
     *         x: 100,
     *         y: 100,
     *         group: 'circles'
     *     }, {
     *         type: 'rect',
     *         width: 20,
     *         height: 20,
     *         fill: '#f00',
     *         x: 10,
     *         y: 10,
     *         group: 'rectangles'
     *     }, {
     *         type: 'rect',
     *         width: 20,
     *         height: 20,
     *         fill: '#0f0',
     *         x: 50,
     *         y: 50,
     *         group: 'rectangles'
     *     }, {
     *         type: 'rect',
     *         width: 20,
     *         height: 20,
     *         fill: '#00f',
     *         x: 100,
     *         y: 100,
     *         group: 'rectangles'
     *     }]);
     *
     *     // Get references to my groups
     *     circles = surface.getGroup('circles');
     *     rectangles = surface.getGroup('rectangles');
     *
     *     // Animate the circles down
     *     circles.animate({
     *         duration: 1000,
     *         to: {
     *             translate: {
     *                 y: 200
     *             }
     *         }
     *     });
     *
     *     // Animate the rectangles across
     *     rectangles.animate({
     *         duration: 1000,
     *         to: {
     *             translate: {
     *                 x: 200
     *             }
     *         }
     *     });
     */
    Ext.define('Ext.draw.Surface', {

        /* Begin Definitions */

        mixins: {
            observable: 'Ext.util.Observable'
        },

        requires: ['Ext.draw.CompositeSprite'],
        uses: ['Ext.draw.engine.Svg', 'Ext.draw.engine.Vml'],

        separatorRe: /[, ]+/,

        statics: {
            /**
             * Creates and returns a new concrete Surface instance appropriate for the current environment.
             * @param {Object} config Initial configuration for the Surface instance
             * @param {[String]} enginePriority Optional order of implementations to use; the first one that is
             * available in the current environment will be used. Defaults to `['Svg', 'Vml']`.
             * @return {Object} The created Surface or false.
             * @static
             */
            create: function(config, enginePriority) {
                enginePriority = enginePriority || ['Svg', 'Vml'];

                var i = 0,
                    len = enginePriority.length,
                    surfaceClass;

                for (; i < len; i++) {
                    if (Ext.supports[enginePriority[i]]) {
                        return Ext.create('Ext.draw.engine.' + enginePriority[i], config);
                    }
                }
                return false;
            }
        },

        /* End Definitions */

        // @private
        availableAttrs: {
            blur: 0,
            "clip-rect": "0 0 1e9 1e9",
            cursor: "default",
            cx: 0,
            cy: 0,
            'dominant-baseline': 'auto',
            fill: "none",
            "fill-opacity": 1,
            font: '10px "Arial"',
            "font-family": '"Arial"',
            "font-size": "10",
            "font-style": "normal",
            "font-weight": 400,
            gradient: "",
            height: 0,
            hidden: false,
            href: "http://sencha.com/",
            opacity: 1,
            path: "M0,0",
            radius: 0,
            rx: 0,
            ry: 0,
            scale: "1 1",
            src: "",
            stroke: "#000",
            "stroke-dasharray": "",
            "stroke-linecap": "butt",
            "stroke-linejoin": "butt",
            "stroke-miterlimit": 0,
            "stroke-opacity": 1,
            "stroke-width": 1,
            target: "_blank",
            text: "",
            "text-anchor": "middle",
            title: "Ext Draw",
            width: 0,
            x: 0,
            y: 0,
            zIndex: 0
        },

        /**
         * @cfg {Number} height
         * The height of this component in pixels (defaults to auto).
         * **Note** to express this dimension as a percentage or offset see {@link Ext.Component#anchor}.
         */
        /**
         * @cfg {Number} width
         * The width of this component in pixels (defaults to auto).
         * **Note** to express this dimension as a percentage or offset see {@link Ext.Component#anchor}.
         */

        container: undefined,
        height: 352,
        width: 512,
        x: 0,
        y: 0,

        /**
         * Creates new Surface.
         * @param {Object} config (optional) Config object.
         */
        constructor: function(config) {
            var me = this;
            config = config || {};
            Ext.apply(me, config);

            me.domRef = Ext.getDoc().dom;

            me.customAttributes = {};

            me.addEvents(
                'mousedown',
                'mouseup',
                'mouseover',
                'mouseout',
                'mousemove',
                'mouseenter',
                'mouseleave',
                'click'
            );

            me.mixins.observable.constructor.call(me);

            me.getId();
            me.initGradients();
            me.initItems();
            if (me.renderTo) {
                me.render(me.renderTo);
                delete me.renderTo;
            }
            me.initBackground(config.background);
        },

        // @private called to initialize components in the surface
        // this is dependent on the underlying implementation.
        initSurface: Ext.emptyFn,

        // @private called to setup the surface to render an item
        //this is dependent on the underlying implementation.
        renderItem: Ext.emptyFn,

        // @private
        renderItems: Ext.emptyFn,

        // @private
        setViewBox: Ext.emptyFn,

        /**
         * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
         *
         * For example:
         *
         *     drawComponent.surface.addCls(sprite, 'x-visible');
         *
         * @param {Object} sprite The sprite to add the class to.
         * @param {String/[String]} className The CSS class to add, or an array of classes
         * @method
         */
        addCls: Ext.emptyFn,

        /**
         * Removes one or more CSS classes from the element.
         *
         * For example:
         *
         *     drawComponent.surface.removeCls(sprite, 'x-visible');
         *
         * @param {Object} sprite The sprite to remove the class from.
         * @param {String/[String]} className The CSS class to remove, or an array of classes
         * @method
         */
        removeCls: Ext.emptyFn,

        /**
         * Sets CSS style attributes to an element.
         *
         * For example:
         *
         *     drawComponent.surface.setStyle(sprite, {
         *         'cursor': 'pointer'
         *     });
         *
         * @param {Object} sprite The sprite to add, or an array of classes to
         * @param {Object} styles An Object with CSS styles.
         * @method
         */
        setStyle: Ext.emptyFn,

        // @private
        initGradients: function() {
            var gradients = this.gradients;
            if (gradients) {
                Ext.each(gradients, this.addGradient, this);
            }
        },

        // @private
        initItems: function() {
            var items = this.items;
            this.items = Ext.create('Ext.draw.CompositeSprite');
            this.groups = Ext.create('Ext.draw.CompositeSprite');
            if (items) {
                this.add(items);
            }
        },

        // @private
        initBackground: function(config) {
            var me = this,
                width = me.width,
                height = me.height,
                gradientId, gradient, backgroundSprite;
            if (config) {
                if (config.gradient) {
                    gradient = config.gradient;
                    gradientId = gradient.id;
                    me.addGradient(gradient);
                    me.background = me.add({
                        type: 'rect',
                        x: 0,
                        y: 0,
                        width: width,
                        height: height,
                        fill: 'url(#' + gradientId + ')'
                    });
                } else if (config.fill) {
                    me.background = me.add({
                        type: 'rect',
                        x: 0,
                        y: 0,
                        width: width,
                        height: height,
                        fill: config.fill
                    });
                } else if (config.image) {
                    me.background = me.add({
                        type: 'image',
                        x: 0,
                        y: 0,
                        width: width,
                        height: height,
                        src: config.image
                    });
                }
            }
        },

        /**
         * Sets the size of the surface. Accomodates the background (if any) to fit the new size too.
         *
         * For example:
         *
         *     drawComponent.surface.setSize(500, 500);
         *
         * This method is generally called when also setting the size of the draw Component.
         *
         * @param {Number} w The new width of the canvas.
         * @param {Number} h The new height of the canvas.
         */
        setSize: function(w, h) {
            if (this.background) {
                this.background.setAttributes({
                    width: w,
                    height: h,
                    hidden: false
                }, true);
            }
        },

        // @private
        scrubAttrs: function(sprite) {
            var i,
                attrs = {},
                exclude = {},
                sattr = sprite.attr;
            for (i in sattr) {
                // Narrow down attributes to the main set
                if (this.translateAttrs.hasOwnProperty(i)) {
                    // Translated attr
                    attrs[this.translateAttrs[i]] = sattr[i];
                    exclude[this.translateAttrs[i]] = true;
                }
                else if (this.availableAttrs.hasOwnProperty(i) && !exclude[i]) {
                    // Passtrhough attr
                    attrs[i] = sattr[i];
                }
            }
            return attrs;
        },

        // @private
        onClick: function(e) {
            this.processEvent('click', e);
        },

        // @private
        onMouseUp: function(e) {
            this.processEvent('mouseup', e);
        },

        // @private
        onMouseDown: function(e) {
            this.processEvent('mousedown', e);
        },

        // @private
        onMouseOver: function(e) {
            this.processEvent('mouseover', e);
        },

        // @private
        onMouseOut: function(e) {
            this.processEvent('mouseout', e);
        },

        // @private
        onMouseMove: function(e) {
            this.fireEvent('mousemove', e);
        },

        // @private
        onMouseEnter: Ext.emptyFn,

        // @private
        onMouseLeave: Ext.emptyFn,

        /**
         * Adds a gradient definition to the Surface. Note that in some surface engines, adding
         * a gradient via this method will not take effect if the surface has already been rendered.
         * Therefore, it is preferred to pass the gradients as an item to the surface config, rather
         * than calling this method, especially if the surface is rendered immediately (e.g. due to
         * 'renderTo' in its config). For more information on how to create gradients in the Chart
         * configuration object please refer to {@link Ext.chart.Chart}.
         *
         * The gradient object to be passed into this method is composed by:
         *
         * - **id** - string - The unique name of the gradient.
         * - **angle** - number, optional - The angle of the gradient in degrees.
         * - **stops** - object - An object with numbers as keys (from 0 to 100) and style objects as values.
         *
         * For example:
         *
         *    drawComponent.surface.addGradient({
         *        id: 'gradientId',
         *        angle: 45,
         *        stops: {
         *            0: {
         *                color: '#555'
         *            },
         *            100: {
         *                color: '#ddd'
         *            }
         *        }
         *    });
         *
         * @method
         */
        addGradient: Ext.emptyFn,

        /**
         * Adds a Sprite to the surface. See {@link Ext.draw.Sprite} for the configuration object to be
         * passed into this method.
         *
         * For example:
         *
         *     drawComponent.surface.add({
         *         type: 'circle',
         *         fill: '#ffc',
         *         radius: 100,
         *         x: 100,
         *         y: 100
         *     });
         *
         */
        add: function() {
            var args = Array.prototype.slice.call(arguments),
                sprite,
                index;

            var hasMultipleArgs = args.length > 1;
            if (hasMultipleArgs || Ext.isArray(args[0])) {
                var items = hasMultipleArgs ? args : args[0],
                    results = [],
                    i, ln, item;

                for (i = 0, ln = items.length; i < ln; i++) {
                    item = items[i];
                    item = this.add(item);
                    results.push(item);
                }

                return results;
            }
            sprite = this.prepareItems(args[0], true)[0];
            this.normalizeSpriteCollection(sprite);
            this.onAdd(sprite);
            return sprite;
        },

        /**
         * @private
         * Inserts or moves a given sprite into the correct position in the items
         * MixedCollection, according to its zIndex. Will be inserted at the end of
         * an existing series of sprites with the same or lower zIndex. If the sprite
         * is already positioned within an appropriate zIndex group, it will not be moved.
         * This ordering can be used by subclasses to assist in rendering the sprites in
         * the correct order for proper z-index stacking.
         * @param {Ext.draw.Sprite} sprite
         * @return {Number} the sprite's new index in the list
         */
        normalizeSpriteCollection: function(sprite) {
            var items = this.items,
                zIndex = sprite.attr.zIndex,
                idx = items.indexOf(sprite);

            if (idx < 0 || (idx > 0 && items.getAt(idx - 1).attr.zIndex > zIndex) ||
                    (idx < items.length - 1 && items.getAt(idx + 1).attr.zIndex < zIndex)) {
                items.removeAt(idx);
                idx = items.findIndexBy(function(otherSprite) {
                    return otherSprite.attr.zIndex > zIndex;
                });
                if (idx < 0) {
                    idx = items.length;
                }
                items.insert(idx, sprite);
            }
            return idx;
        },

        onAdd: function(sprite) {
            var group = sprite.group,
                draggable = sprite.draggable,
                groups, ln, i;
            if (group) {
                groups = [].concat(group);
                ln = groups.length;
                for (i = 0; i < ln; i++) {
                    group = groups[i];
                    this.getGroup(group).add(sprite);
                }
                delete sprite.group;
            }
            if (draggable) {
                sprite.initDraggable();
            }
        },

        /**
         * Removes a given sprite from the surface, optionally destroying the sprite in the process.
         * You can also call the sprite own `remove` method.
         *
         * For example:
         *
         *     drawComponent.surface.remove(sprite);
         *     //or...
         *     sprite.remove();
         *
         * @param {Ext.draw.Sprite} sprite
         * @param {Boolean} destroySprite
         * @return {Number} the sprite's new index in the list
         */
        remove: function(sprite, destroySprite) {
            if (sprite) {
                this.items.remove(sprite);
                this.groups.each(function(item) {
                    item.remove(sprite);
                });
                sprite.onRemove();
                if (destroySprite === true) {
                    sprite.destroy();
                }
            }
        },

        /**
         * Removes all sprites from the surface, optionally destroying the sprites in the process.
         *
         * For example:
         *
         *     drawComponent.surface.removeAll();
         *
         * @param {Boolean} destroySprites Whether to destroy all sprites when removing them.
         * @return {Number} The sprite's new index in the list.
         */
        removeAll: function(destroySprites) {
            var items = this.items.items,
                ln = items.length,
                i;
            for (i = ln - 1; i > -1; i--) {
                this.remove(items[i], destroySprites);
            }
        },

        onRemove: Ext.emptyFn,

        onDestroy: Ext.emptyFn,

        // @private
        applyTransformations: function(sprite) {
                sprite.bbox.transform = 0;
                this.transform(sprite);

            var me = this,
                dirty = false,
                attr = sprite.attr;

            if (attr.translation.x != null || attr.translation.y != null) {
                me.translate(sprite);
                dirty = true;
            }
            if (attr.scaling.x != null || attr.scaling.y != null) {
                me.scale(sprite);
                dirty = true;
            }
            if (attr.rotation.degrees != null) {
                me.rotate(sprite);
                dirty = true;
            }
            if (dirty) {
                sprite.bbox.transform = 0;
                this.transform(sprite);
                sprite.transformations = [];
            }
        },

        // @private
        rotate: function (sprite) {
            var bbox,
                deg = sprite.attr.rotation.degrees,
                centerX = sprite.attr.rotation.x,
                centerY = sprite.attr.rotation.y;
            if (!Ext.isNumber(centerX) || !Ext.isNumber(centerY)) {
                bbox = this.getBBox(sprite);
                centerX = !Ext.isNumber(centerX) ? bbox.x + bbox.width / 2 : centerX;
                centerY = !Ext.isNumber(centerY) ? bbox.y + bbox.height / 2 : centerY;
            }
            sprite.transformations.push({
                type: "rotate",
                degrees: deg,
                x: centerX,
                y: centerY
            });
        },

        // @private
        translate: function(sprite) {
            var x = sprite.attr.translation.x || 0,
                y = sprite.attr.translation.y || 0;
            sprite.transformations.push({
                type: "translate",
                x: x,
                y: y
            });
        },

        // @private
        scale: function(sprite) {
            var bbox,
                x = sprite.attr.scaling.x || 1,
                y = sprite.attr.scaling.y || 1,
                centerX = sprite.attr.scaling.centerX,
                centerY = sprite.attr.scaling.centerY;

            if (!Ext.isNumber(centerX) || !Ext.isNumber(centerY)) {
                bbox = this.getBBox(sprite);
                centerX = !Ext.isNumber(centerX) ? bbox.x + bbox.width / 2 : centerX;
                centerY = !Ext.isNumber(centerY) ? bbox.y + bbox.height / 2 : centerY;
            }
            sprite.transformations.push({
                type: "scale",
                x: x,
                y: y,
                centerX: centerX,
                centerY: centerY
            });
        },

        // @private
        rectPath: function (x, y, w, h, r) {
            if (r) {
                return [["M", x + r, y], ["l", w - r * 2, 0], ["a", r, r, 0, 0, 1, r, r], ["l", 0, h - r * 2], ["a", r, r, 0, 0, 1, -r, r], ["l", r * 2 - w, 0], ["a", r, r, 0, 0, 1, -r, -r], ["l", 0, r * 2 - h], ["a", r, r, 0, 0, 1, r, -r], ["z"]];
            }
            return [["M", x, y], ["l", w, 0], ["l", 0, h], ["l", -w, 0], ["z"]];
        },

        // @private
        ellipsePath: function (x, y, rx, ry) {
            if (ry == null) {
                ry = rx;
            }
            return [["M", x, y], ["m", 0, -ry], ["a", rx, ry, 0, 1, 1, 0, 2 * ry], ["a", rx, ry, 0, 1, 1, 0, -2 * ry], ["z"]];
        },

        // @private
        getPathpath: function (el) {
            return el.attr.path;
        },

        // @private
        getPathcircle: function (el) {
            var a = el.attr;
            return this.ellipsePath(a.x, a.y, a.radius, a.radius);
        },

        // @private
        getPathellipse: function (el) {
            var a = el.attr;
            return this.ellipsePath(a.x, a.y,
                                    a.radiusX || (a.width / 2) || 0,
                                    a.radiusY || (a.height / 2) || 0);
        },

        // @private
        getPathrect: function (el) {
            var a = el.attr;
            return this.rectPath(a.x, a.y, a.width, a.height, a.r);
        },

        // @private
        getPathimage: function (el) {
            var a = el.attr;
            return this.rectPath(a.x || 0, a.y || 0, a.width, a.height);
        },

        // @private
        getPathtext: function (el) {
            var bbox = this.getBBoxText(el);
            return this.rectPath(bbox.x, bbox.y, bbox.width, bbox.height);
        },

        createGroup: function(id) {
            var group = this.groups.get(id);
            if (!group) {
                group = Ext.create('Ext.draw.CompositeSprite', {
                    surface: this
                });
                group.id = id || Ext.id(null, 'ext-surface-group-');
                this.groups.add(group);
            }
            return group;
        },

        /**
         * Returns a new group or an existent group associated with the current surface.
         * The group returned is a {@link Ext.draw.CompositeSprite} group.
         *
         * For example:
         *
         *     var spriteGroup = drawComponent.surface.getGroup('someGroupId');
         *
         * @param {String} id The unique identifier of the group.
         * @return {Object} The {@link Ext.draw.CompositeSprite}.
         */
        getGroup: function(id) {
            if (typeof id == "string") {
                var group = this.groups.get(id);
                if (!group) {
                    group = this.createGroup(id);
                }
            } else {
                group = id;
            }
            return group;
        },

        // @private
        prepareItems: function(items, applyDefaults) {
            items = [].concat(items);
            // Make sure defaults are applied and item is initialized
            var item, i, ln;
            for (i = 0, ln = items.length; i < ln; i++) {
                item = items[i];
                if (!(item instanceof Ext.draw.Sprite)) {
                    // Temporary, just take in configs...
                    item.surface = this;
                    items[i] = this.createItem(item);
                } else {
                    item.surface = this;
                }
            }
            return items;
        },

        /**
         * Changes the text in the sprite element. The sprite must be a `text` sprite.
         * This method can also be called from {@link Ext.draw.Sprite}.
         *
         * For example:
         *
         *     var spriteGroup = drawComponent.surface.setText(sprite, 'my new text');
         *
         * @param {Object} sprite The Sprite to change the text.
         * @param {String} text The new text to be set.
         * @method
         */
        setText: Ext.emptyFn,

        //@private Creates an item and appends it to the surface. Called
        //as an internal method when calling `add`.
        createItem: Ext.emptyFn,

        /**
         * Retrieves the id of this component.
         * Will autogenerate an id if one has not already been set.
         */
        getId: function() {
            return this.id || (this.id = Ext.id(null, 'ext-surface-'));
        },

        /**
         * Destroys the surface. This is done by removing all components from it and
         * also removing its reference to a DOM element.
         *
         * For example:
         *
         *      drawComponent.surface.destroy();
         */
        destroy: function() {
            delete this.domRef;
            this.removeAll();
        }
    });