/**
 * @class Ext.draw.Matrix
 * @extend Ext.Base
 *
 * Ext.draw.Matix is a utility class used to calculate 
 * [affine transformation](http://en.wikipedia.org/wiki/Affine_transformation) matrix.  
 * The matrix class is used to apply transformations to existing 
 * {@link Ext.draw.sprite.Sprite sprites} using a number of convenience transform 
 * methods.
 * 
 * Transformations configured directly on a sprite are processed in the following order: 
 * scaling, rotation, and translation.  The matrix class offers additional flexibility.  
 * Once a sprite is created, you can use the matrix class's transform methods as many 
 * times as needed and in any order you choose. 
 *
 * To demonstrate, we'll start with a simple {@link Ext.draw.sprite.Rect rect} sprite 
 * with the intent of rotating it 180 degrees with the bottom right corner being the 
 * center of rotation.  To begin, let's look at the initial, untransformed sprite:
 * 
 *     @example
 *     var drawContainer = new Ext.draw.Container({
 *         renderTo: Ext.getBody(),
 *         width: 380,
 *         height: 380,
 *         sprites: [{
 *             type: 'rect',
 *             width: 100,
 *             height: 100,
 *             fillStyle: 'red'
 *         }]
 *     });
 * 
 * Next, we'll use the {@link #rotate} and {@link #translate} methods from our matrix 
 * class to position the rect sprite.
 * 
 *     @example
 *     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().translate(100, 100).
 *     rotate(Math.PI).
 *     translate(-100, - 100);
 *     
 *     rect.setTransform(m);
 *     main.renderFrame();
 * 
 * In the previous example we perform the following steps in order to achieve our 
 * desired rotated output:
 * 
 *  - translate the rect to the right and down by 100
 *  - rotate by 180 degrees
 *  - translate the rect to the right and down by 100
 * 
 * **Note:** A couple of things to note at this stage; 1) the rotation center point is 
 * the upper left corner of the sprite by default and 2) with transformations, the 
 * sprite itself isn't transformed, but rather the entire coordinate plane of the sprite 
 * is transformed.  The coordinate plane itself is translated by 100 and then rotated 
 * 180 degrees.  And that is why in the third step we translate the sprite using 
 * negative values.  Translating by -100 in the third step results in the sprite 
 * visually moving to the right and down within the draw container.
 * 
 * Fortunately there is a shortcut we can apply using two optional params of the rotate 
 * method allowing us to specify the center point of rotation:
 * 
 *     @example
 *     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();
 * 
 * 
 * This class is compatible with 
 * [SVGMatrix](http://www.w3.org/TR/SVG11/coords.html#InterfaceSVGMatrix) except:
 *
 *   1. Ext.draw.Matrix is not read only
 *   2. Using Number as its values rather than floats
 * 
 * Using this class helps to reduce the severe numeric 
 * [problem with HTML Canvas and SVG transformation](http://stackoverflow.com/questions/8784405/large-numbers-in-html-canvas-translate-result-in-strange-behavior)
 * 
 * Additionally, there's no way to get the current transformation matrix 
 * [in Canvas](http://stackoverflow.com/questions/7395813/html5-canvas-get-transform-matrix).
 */
 
/**
 * @property {Number} a 
 * Get x-to-x component of the matrix. Avoid using it for performance consideration.
 * Use {@link #getXX} instead.
 */