capture phase: starting from the top parent to the target
at target phase: currently being dispatched from the target
bubbling phase: from the target to the top parent

\n\t\t * @property eventPhase\n\t\t * @type Number\n\t\t * @default 0\n\t\t * @readonly\n\t\t*/\n\t\tthis.eventPhase = 0;\n\t\n\t\t/**\n\t\t * Indicates whether the event will bubble through the display list.\n\t\t * @property bubbles\n\t\t * @type Boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t*/\n\t\tthis.bubbles = !!bubbles;\n\t\n\t\t/**\n\t\t * Indicates whether the default behaviour of this event can be cancelled via\n\t\t * {{#crossLink \"Event/preventDefault\"}}{{/crossLink}}. This is set via the Event constructor.\n\t\t * @property cancelable\n\t\t * @type Boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t*/\n\t\tthis.cancelable = !!cancelable;\n\t\n\t\t/**\n\t\t * The epoch time at which this event was created.\n\t\t * @property timeStamp\n\t\t * @type Number\n\t\t * @default 0\n\t\t * @readonly\n\t\t*/\n\t\tthis.timeStamp = (new Date()).getTime();\n\t\n\t\t/**\n\t\t * Indicates if {{#crossLink \"Event/preventDefault\"}}{{/crossLink}} has been called\n\t\t * on this event.\n\t\t * @property defaultPrevented\n\t\t * @type Boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t*/\n\t\tthis.defaultPrevented = false;\n\t\n\t\t/**\n\t\t * Indicates if {{#crossLink \"Event/stopPropagation\"}}{{/crossLink}} or\n\t\t * {{#crossLink \"Event/stopImmediatePropagation\"}}{{/crossLink}} has been called on this event.\n\t\t * @property propagationStopped\n\t\t * @type Boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t*/\n\t\tthis.propagationStopped = false;\n\t\n\t\t/**\n\t\t * Indicates if {{#crossLink \"Event/stopImmediatePropagation\"}}{{/crossLink}} has been called\n\t\t * on this event.\n\t\t * @property immediatePropagationStopped\n\t\t * @type Boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t*/\n\t\tthis.immediatePropagationStopped = false;\n\t\t\n\t\t/**\n\t\t * Indicates if {{#crossLink \"Event/remove\"}}{{/crossLink}} has been called on this event.\n\t\t * @property removed\n\t\t * @type Boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t*/\n\t\tthis.removed = false;\n\t}\n\tvar p = Event.prototype;\n\n// public methods:\n\t/**\n\t * Sets {{#crossLink \"Event/defaultPrevented\"}}{{/crossLink}} to true if the event is cancelable.\n\t * Mirrors the DOM level 2 event standard. In general, cancelable events that have `preventDefault()` called will\n\t * cancel the default behaviour associated with the event.\n\t * @method preventDefault\n\t **/\n\tp.preventDefault = function() {\n\t\tthis.defaultPrevented = this.cancelable&&true;\n\t};\n\n\t/**\n\t * Sets {{#crossLink \"Event/propagationStopped\"}}{{/crossLink}} to true.\n\t * Mirrors the DOM event standard.\n\t * @method stopPropagation\n\t **/\n\tp.stopPropagation = function() {\n\t\tthis.propagationStopped = true;\n\t};\n\n\t/**\n\t * Sets {{#crossLink \"Event/propagationStopped\"}}{{/crossLink}} and\n\t * {{#crossLink \"Event/immediatePropagationStopped\"}}{{/crossLink}} to true.\n\t * Mirrors the DOM event standard.\n\t * @method stopImmediatePropagation\n\t **/\n\tp.stopImmediatePropagation = function() {\n\t\tthis.immediatePropagationStopped = this.propagationStopped = true;\n\t};\n\t\n\t/**\n\t * Causes the active listener to be removed via removeEventListener();\n\t * \n\t * \t\tmyBtn.addEventListener(\"click\", function(evt) {\n\t * \t\t\t// do stuff...\n\t * \t\t\tevt.remove(); // removes this listener.\n\t * \t\t});\n\t * \n\t * @method remove\n\t **/\n\tp.remove = function() {\n\t\tthis.removed = true;\n\t};\n\t\n\t/**\n\t * Returns a clone of the Event instance.\n\t * @method clone\n\t * @return {Event} a clone of the Event instance.\n\t **/\n\tp.clone = function() {\n\t\treturn new Event(this.type, this.bubbles, this.cancelable);\n\t};\n\t\n\t/**\n\t * Provides a chainable shortcut method for setting a number of properties on the instance.\n\t *\n\t * @method set\n\t * @param {Object} props A generic object containing properties to copy to the instance.\n\t * @return {Event} Returns the instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t*/\n\tp.set = function(props) {\n\t\tfor (var n in props) { this[n] = props[n]; }\n\t\treturn this;\n\t};\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t **/\n\tp.toString = function() {\n\t\treturn \"[Event (type=\"+this.type+\")]\";\n\t};\n\n\tcreatejs.Event = Event;\n}());\n\n//##############################################################################\n// EventDispatcher.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * EventDispatcher provides methods for managing queues of event listeners and dispatching events.\n\t *\n\t * You can either extend EventDispatcher or mix its methods into an existing prototype or instance by using the\n\t * EventDispatcher {{#crossLink \"EventDispatcher/initialize\"}}{{/crossLink}} method.\n\t * \n\t * Together with the CreateJS Event class, EventDispatcher provides an extended event model that is based on the\n\t * DOM Level 2 event model, including addEventListener, removeEventListener, and dispatchEvent. It supports\n\t * bubbling / capture, preventDefault, stopPropagation, stopImmediatePropagation, and handleEvent.\n\t * \n\t * EventDispatcher also exposes a {{#crossLink \"EventDispatcher/on\"}}{{/crossLink}} method, which makes it easier\n\t * to create scoped listeners, listeners that only run once, and listeners with associated arbitrary data. The \n\t * {{#crossLink \"EventDispatcher/off\"}}{{/crossLink}} method is merely an alias to\n\t * {{#crossLink \"EventDispatcher/removeEventListener\"}}{{/crossLink}}.\n\t * \n\t * Another addition to the DOM Level 2 model is the {{#crossLink \"EventDispatcher/removeAllEventListeners\"}}{{/crossLink}}\n\t * method, which can be used to listeners for all events, or listeners for a specific event. The Event object also \n\t * includes a {{#crossLink \"Event/remove\"}}{{/crossLink}} method which removes the active listener.\n\t *\n\t *

Example

\n\t * Add EventDispatcher capabilities to the \"MyClass\" class.\n\t *\n\t * EventDispatcher.initialize(MyClass.prototype);\n\t *\n\t * Add an event (see {{#crossLink \"EventDispatcher/addEventListener\"}}{{/crossLink}}).\n\t *\n\t * instance.addEventListener(\"eventName\", handlerMethod);\n\t * function handlerMethod(event) {\n\t * console.log(event.target + \" Was Clicked\");\n\t * }\n\t *\n\t * Maintaining proper scope
\n\t * Scope (ie. \"this\") can be be a challenge with events. Using the {{#crossLink \"EventDispatcher/on\"}}{{/crossLink}}\n\t * method to subscribe to events simplifies this.\n\t *\n\t * instance.addEventListener(\"click\", function(event) {\n\t * console.log(instance == this); // false, scope is ambiguous.\n\t * });\n\t * \n\t * instance.on(\"click\", function(event) {\n\t * console.log(instance == this); // true, \"on\" uses dispatcher scope by default.\n\t * });\n\t * \n\t * If you want to use addEventListener instead, you may want to use function.bind() or a similar proxy to manage\n\t * scope.\n\t *\n\t * Browser support\n\t * The event model in CreateJS can be used separately from the suite in any project, however the inheritance model\n\t * requires modern browsers (IE9+).\n\t * \n\t *\n\t * @class EventDispatcher\n\t * @constructor\n\t **/\n\tfunction EventDispatcher() {\n\t\n\t\n\t// private properties:\n\t\t/**\n\t\t * @protected\n\t\t * @property _listeners\n\t\t * @type Object\n\t\t **/\n\t\tthis._listeners = null;\n\t\t\n\t\t/**\n\t\t * @protected\n\t\t * @property _captureListeners\n\t\t * @type Object\n\t\t **/\n\t\tthis._captureListeners = null;\n\t}\n\tvar p = EventDispatcher.prototype;\n\n// static public methods:\n\t/**\n\t * Static initializer to mix EventDispatcher methods into a target object or prototype.\n\t * \n\t * \t\tEventDispatcher.initialize(MyClass.prototype); // add to the prototype of the class\n\t * \t\tEventDispatcher.initialize(myObject); // add to a specific instance\n\t * \n\t * @method initialize\n\t * @static\n\t * @param {Object} target The target object to inject EventDispatcher methods into. This can be an instance or a\n\t * prototype.\n\t **/\n\tEventDispatcher.initialize = function(target) {\n\t\ttarget.addEventListener = p.addEventListener;\n\t\ttarget.on = p.on;\n\t\ttarget.removeEventListener = target.off = p.removeEventListener;\n\t\ttarget.removeAllEventListeners = p.removeAllEventListeners;\n\t\ttarget.hasEventListener = p.hasEventListener;\n\t\ttarget.dispatchEvent = p.dispatchEvent;\n\t\ttarget._dispatchEvent = p._dispatchEvent;\n\t\ttarget.willTrigger = p.willTrigger;\n\t};\n\t\n\n// public methods:\n\t/**\n\t * Adds the specified event listener. Note that adding multiple listeners to the same function will result in\n\t * multiple callbacks getting fired.\n\t *\n\t *

Example

\n\t *\n\t * displayObject.addEventListener(\"click\", handleClick);\n\t * function handleClick(event) {\n\t * // Click happened.\n\t * }\n\t *\n\t * @method addEventListener\n\t * @param {String} type The string type of the event.\n\t * @param {Function | Object} listener An object with a handleEvent method, or a function that will be called when\n\t * the event is dispatched.\n\t * @param {Boolean} [useCapture] For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.\n\t * @return {Function | Object} Returns the listener for chaining or assignment.\n\t **/\n\tp.addEventListener = function(type, listener, useCapture) {\n\t\tvar listeners;\n\t\tif (useCapture) {\n\t\t\tlisteners = this._captureListeners = this._captureListeners||{};\n\t\t} else {\n\t\t\tlisteners = this._listeners = this._listeners||{};\n\t\t}\n\t\tvar arr = listeners[type];\n\t\tif (arr) { this.removeEventListener(type, listener, useCapture); }\n\t\tarr = listeners[type]; // remove may have deleted the array\n\t\tif (!arr) { listeners[type] = [listener]; }\n\t\telse { arr.push(listener); }\n\t\treturn listener;\n\t};\n\t\n\t/**\n\t * A shortcut method for using addEventListener that makes it easier to specify an execution scope, have a listener\n\t * only run once, associate arbitrary data with the listener, and remove the listener.\n\t * \n\t * This method works by creating an anonymous wrapper function and subscribing it with addEventListener.\n\t * The wrapper function is returned for use with `removeEventListener` (or `off`).\n\t * \n\t * IMPORTANT: To remove a listener added with `on`, you must pass in the returned wrapper function as the listener, or use\n\t * {{#crossLink \"Event/remove\"}}{{/crossLink}}. Likewise, each time you call `on` a NEW wrapper function is subscribed, so multiple calls\n\t * to `on` with the same params will create multiple listeners.\n\t * \n\t *

Example

\n\t * \n\t * \t\tvar listener = myBtn.on(\"click\", handleClick, null, false, {count:3});\n\t * \t\tfunction handleClick(evt, data) {\n\t * \t\t\tdata.count -= 1;\n\t * \t\t\tconsole.log(this == myBtn); // true - scope defaults to the dispatcher\n\t * \t\t\tif (data.count == 0) {\n\t * \t\t\t\talert(\"clicked 3 times!\");\n\t * \t\t\t\tmyBtn.off(\"click\", listener);\n\t * \t\t\t\t// alternately: evt.remove();\n\t * \t\t\t}\n\t * \t\t}\n\t * \n\t * @method on\n\t * @param {String} type The string type of the event.\n\t * @param {Function | Object} listener An object with a handleEvent method, or a function that will be called when\n\t * the event is dispatched.\n\t * @param {Object} [scope] The scope to execute the listener in. Defaults to the dispatcher/currentTarget for function listeners, and to the listener itself for object listeners (ie. using handleEvent).\n\t * @param {Boolean} [once=false] If true, the listener will remove itself after the first time it is triggered.\n\t * @param {*} [data] Arbitrary data that will be included as the second parameter when the listener is called.\n\t * @param {Boolean} [useCapture=false] For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.\n\t * @return {Function} Returns the anonymous function that was created and assigned as the listener. This is needed to remove the listener later using .removeEventListener.\n\t **/\n\tp.on = function(type, listener, scope, once, data, useCapture) {\n\t\tif (listener.handleEvent) {\n\t\t\tscope = scope||listener;\n\t\t\tlistener = listener.handleEvent;\n\t\t}\n\t\tscope = scope||this;\n\t\treturn this.addEventListener(type, function(evt) {\n\t\t\t\tlistener.call(scope, evt, data);\n\t\t\t\tonce&&evt.remove();\n\t\t\t}, useCapture);\n\t};\n\n\t/**\n\t * Removes the specified event listener.\n\t *\n\t * Important Note: that you must pass the exact function reference used when the event was added. If a proxy\n\t * function, or function closure is used as the callback, the proxy/closure reference must be used - a new proxy or\n\t * closure will not work.\n\t *\n\t *

Example

\n\t *\n\t * displayObject.removeEventListener(\"click\", handleClick);\n\t *\n\t * @method removeEventListener\n\t * @param {String} type The string type of the event.\n\t * @param {Function | Object} listener The listener function or object.\n\t * @param {Boolean} [useCapture] For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.\n\t **/\n\tp.removeEventListener = function(type, listener, useCapture) {\n\t\tvar listeners = useCapture ? this._captureListeners : this._listeners;\n\t\tif (!listeners) { return; }\n\t\tvar arr = listeners[type];\n\t\tif (!arr) { return; }\n\t\tfor (var i=0,l=arr.length; iIMPORTANT: To remove a listener added with `on`, you must pass in the returned wrapper function as the listener. See \n\t * {{#crossLink \"EventDispatcher/on\"}}{{/crossLink}} for an example.\n\t *\n\t * @method off\n\t * @param {String} type The string type of the event.\n\t * @param {Function | Object} listener The listener function or object.\n\t * @param {Boolean} [useCapture] For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.\n\t **/\n\tp.off = p.removeEventListener;\n\n\t/**\n\t * Removes all listeners for the specified type, or all listeners of all types.\n\t *\n\t *

Example

\n\t *\n\t * // Remove all listeners\n\t * displayObject.removeAllEventListeners();\n\t *\n\t * // Remove all click listeners\n\t * displayObject.removeAllEventListeners(\"click\");\n\t *\n\t * @method removeAllEventListeners\n\t * @param {String} [type] The string type of the event. If omitted, all listeners for all types will be removed.\n\t **/\n\tp.removeAllEventListeners = function(type) {\n\t\tif (!type) { this._listeners = this._captureListeners = null; }\n\t\telse {\n\t\t\tif (this._listeners) { delete(this._listeners[type]); }\n\t\t\tif (this._captureListeners) { delete(this._captureListeners[type]); }\n\t\t}\n\t};\n\n\t/**\n\t * Dispatches the specified event to all listeners.\n\t *\n\t *

Example

\n\t *\n\t * // Use a string event\n\t * this.dispatchEvent(\"complete\");\n\t *\n\t * // Use an Event instance\n\t * var event = new createjs.Event(\"progress\");\n\t * this.dispatchEvent(event);\n\t *\n\t * @method dispatchEvent\n\t * @param {Object | String | Event} eventObj An object with a \"type\" property, or a string type.\n\t * While a generic object will work, it is recommended to use a CreateJS Event instance. If a string is used,\n\t * dispatchEvent will construct an Event instance if necessary with the specified type. This latter approach can\n\t * be used to avoid event object instantiation for non-bubbling events that may not have any listeners.\n\t * @param {Boolean} [bubbles] Specifies the `bubbles` value when a string was passed to eventObj.\n\t * @param {Boolean} [cancelable] Specifies the `cancelable` value when a string was passed to eventObj.\n\t * @return {Boolean} Returns false if `preventDefault()` was called on a cancelable event, true otherwise.\n\t **/\n\tp.dispatchEvent = function(eventObj, bubbles, cancelable) {\n\t\tif (typeof eventObj == \"string\") {\n\t\t\t// skip everything if there's no listeners and it doesn't bubble:\n\t\t\tvar listeners = this._listeners;\n\t\t\tif (!bubbles && (!listeners || !listeners[eventObj])) { return true; }\n\t\t\teventObj = new createjs.Event(eventObj, bubbles, cancelable);\n\t\t} else if (eventObj.target && eventObj.clone) {\n\t\t\t// redispatching an active event object, so clone it:\n\t\t\teventObj = eventObj.clone();\n\t\t}\n\t\t\n\t\t// TODO: it would be nice to eliminate this. Maybe in favour of evtObj instanceof Event? Or !!evtObj.createEvent\n\t\ttry { eventObj.target = this; } catch (e) {} // try/catch allows redispatching of native events\n\n\t\tif (!eventObj.bubbles || !this.parent) {\n\t\t\tthis._dispatchEvent(eventObj, 2);\n\t\t} else {\n\t\t\tvar top=this, list=[top];\n\t\t\twhile (top.parent) { list.push(top = top.parent); }\n\t\t\tvar i, l=list.length;\n\n\t\t\t// capture & atTarget\n\t\t\tfor (i=l-1; i>=0 && !eventObj.propagationStopped; i--) {\n\t\t\t\tlist[i]._dispatchEvent(eventObj, 1+(i==0));\n\t\t\t}\n\t\t\t// bubbling\n\t\t\tfor (i=1; iExample\n\t *\n\t * createjs.Ticker.addEventListener(\"tick\", handleTick);\n\t * function handleTick(event) {\n\t * // Actions carried out each tick (aka frame)\n\t * if (!event.paused) {\n\t * // Actions carried out when the Ticker is not paused.\n\t * }\n\t * }\n\t *\n\t * @class Ticker\n\t * @uses EventDispatcher\n\t * @static\n\t **/\n\tfunction Ticker() {\n\t\tthrow \"Ticker cannot be instantiated.\";\n\t}\n\n\n// constants:\n\t/**\n\t * In this mode, Ticker uses the requestAnimationFrame API, but attempts to synch the ticks to target framerate. It\n\t * uses a simple heuristic that compares the time of the RAF return to the target time for the current frame and\n\t * dispatches the tick when the time is within a certain threshold.\n\t *\n\t * This mode has a higher variance for time between frames than {{#crossLink \"Ticker/TIMEOUT:property\"}}{{/crossLink}},\n\t * but does not require that content be time based as with {{#crossLink \"Ticker/RAF:property\"}}{{/crossLink}} while\n\t * gaining the benefits of that API (screen synch, background throttling).\n\t *\n\t * Variance is usually lowest for framerates that are a divisor of the RAF frequency. This is usually 60, so\n\t * framerates of 10, 12, 15, 20, and 30 work well.\n\t *\n\t * Falls back to {{#crossLink \"Ticker/TIMEOUT:property\"}}{{/crossLink}} if the requestAnimationFrame API is not\n\t * supported.\n\t * @property RAF_SYNCHED\n\t * @static\n\t * @type {String}\n\t * @default \"synched\"\n\t * @readonly\n\t **/\n\tTicker.RAF_SYNCHED = \"synched\";\n\n\t/**\n\t * In this mode, Ticker passes through the requestAnimationFrame heartbeat, ignoring the target framerate completely.\n\t * Because requestAnimationFrame frequency is not deterministic, any content using this mode should be time based.\n\t * You can leverage {{#crossLink \"Ticker/getTime\"}}{{/crossLink}} and the {{#crossLink \"Ticker/tick:event\"}}{{/crossLink}}\n\t * event object's \"delta\" properties to make this easier.\n\t *\n\t * Falls back on {{#crossLink \"Ticker/TIMEOUT:property\"}}{{/crossLink}} if the requestAnimationFrame API is not\n\t * supported.\n\t * @property RAF\n\t * @static\n\t * @type {String}\n\t * @default \"raf\"\n\t * @readonly\n\t **/\n\tTicker.RAF = \"raf\";\n\n\t/**\n\t * In this mode, Ticker uses the setTimeout API. This provides predictable, adaptive frame timing, but does not\n\t * provide the benefits of requestAnimationFrame (screen synch, background throttling).\n\t * @property TIMEOUT\n\t * @static\n\t * @type {String}\n\t * @default \"timeout\"\n\t * @readonly\n\t **/\n\tTicker.TIMEOUT = \"timeout\";\n\n\n// static events:\n\t/**\n\t * Dispatched each tick. The event will be dispatched to each listener even when the Ticker has been paused using\n\t * {{#crossLink \"Ticker/paused:property\"}}{{/crossLink}}.\n\t *\n\t *

Example

\n\t *\n\t * createjs.Ticker.addEventListener(\"tick\", handleTick);\n\t * function handleTick(event) {\n\t * console.log(\"Paused:\", event.paused, event.delta);\n\t * }\n\t *\n\t * @event tick\n\t * @param {Object} target The object that dispatched the event.\n\t * @param {String} type The event type.\n\t * @param {Boolean} paused Indicates whether the ticker is currently paused.\n\t * @param {Number} delta The time elapsed in ms since the last tick.\n\t * @param {Number} time The total time in ms since Ticker was initialized.\n\t * @param {Number} runTime The total time in ms that Ticker was not paused since it was initialized. For example,\n\t * \tyou could determine the amount of time that the Ticker has been paused since initialization with `time-runTime`.\n\t * @since 0.6.0\n\t */\n\n\n// public static properties:\n\t/**\n\t * Specifies the timing api (setTimeout or requestAnimationFrame) and mode to use. See\n\t * {{#crossLink \"Ticker/TIMEOUT:property\"}}{{/crossLink}}, {{#crossLink \"Ticker/RAF:property\"}}{{/crossLink}}, and\n\t * {{#crossLink \"Ticker/RAF_SYNCHED:property\"}}{{/crossLink}} for mode details.\n\t * @property timingMode\n\t * @static\n\t * @type {String}\n\t * @default Ticker.TIMEOUT\n\t **/\n\tTicker.timingMode = null;\n\n\t/**\n\t * Specifies a maximum value for the delta property in the tick event object. This is useful when building time\n\t * based animations and systems to prevent issues caused by large time gaps caused by background tabs, system sleep,\n\t * alert dialogs, or other blocking routines. Double the expected frame duration is often an effective value\n\t * (ex. maxDelta=50 when running at 40fps).\n\t * \n\t * This does not impact any other values (ex. time, runTime, etc), so you may experience issues if you enable maxDelta\n\t * when using both delta and other values.\n\t * \n\t * If 0, there is no maximum.\n\t * @property maxDelta\n\t * @static\n\t * @type {number}\n\t * @default 0\n\t */\n\tTicker.maxDelta = 0;\n\t\n\t/**\n\t * When the ticker is paused, all listeners will still receive a tick event, but the paused property\n\t * of the event will be `true`. Also, while paused the `runTime` will not increase. See {{#crossLink \"Ticker/tick:event\"}}{{/crossLink}},\n\t * {{#crossLink \"Ticker/getTime\"}}{{/crossLink}}, and {{#crossLink \"Ticker/getEventTime\"}}{{/crossLink}} for more\n\t * info.\n\t *\n\t *

Example

\n\t *\n\t * createjs.Ticker.addEventListener(\"tick\", handleTick);\n\t * createjs.Ticker.paused = true;\n\t * function handleTick(event) {\n\t * console.log(event.paused,\n\t * \tcreatejs.Ticker.getTime(false),\n\t * \tcreatejs.Ticker.getTime(true));\n\t * }\n\t *\n\t * @property paused\n\t * @static\n\t * @type {Boolean}\n\t * @default false\n\t **/\n\tTicker.paused = false;\n\n\n// mix-ins:\n\t// EventDispatcher methods:\n\tTicker.removeEventListener = null;\n\tTicker.removeAllEventListeners = null;\n\tTicker.dispatchEvent = null;\n\tTicker.hasEventListener = null;\n\tTicker._listeners = null;\n\tcreatejs.EventDispatcher.initialize(Ticker); // inject EventDispatcher methods.\n\tTicker._addEventListener = Ticker.addEventListener;\n\tTicker.addEventListener = function() {\n\t\t!Ticker._inited&&Ticker.init();\n\t\treturn Ticker._addEventListener.apply(Ticker, arguments);\n\t};\n\n\n// private static properties:\n\t/**\n\t * @property _inited\n\t * @static\n\t * @type {Boolean}\n\t * @private\n\t **/\n\tTicker._inited = false;\n\n\t/**\n\t * @property _startTime\n\t * @static\n\t * @type {Number}\n\t * @private\n\t **/\n\tTicker._startTime = 0;\n\n\t/**\n\t * @property _pausedTime\n\t * @static\n\t * @type {Number}\n\t * @private\n\t **/\n\tTicker._pausedTime=0;\n\n\t/**\n\t * The number of ticks that have passed\n\t * @property _ticks\n\t * @static\n\t * @type {Number}\n\t * @private\n\t **/\n\tTicker._ticks = 0;\n\n\t/**\n\t * The number of ticks that have passed while Ticker has been paused\n\t * @property _pausedTicks\n\t * @static\n\t * @type {Number}\n\t * @private\n\t **/\n\tTicker._pausedTicks = 0;\n\n\t/**\n\t * @property _interval\n\t * @static\n\t * @type {Number}\n\t * @private\n\t **/\n\tTicker._interval = 50;\n\n\t/**\n\t * @property _lastTime\n\t * @static\n\t * @type {Number}\n\t * @private\n\t **/\n\tTicker._lastTime = 0;\n\n\t/**\n\t * @property _times\n\t * @static\n\t * @type {Array}\n\t * @private\n\t **/\n\tTicker._times = null;\n\n\t/**\n\t * @property _tickTimes\n\t * @static\n\t * @type {Array}\n\t * @private\n\t **/\n\tTicker._tickTimes = null;\n\n\t/**\n\t * Stores the timeout or requestAnimationFrame id.\n\t * @property _timerId\n\t * @static\n\t * @type {Number}\n\t * @private\n\t **/\n\tTicker._timerId = null;\n\t\n\t/**\n\t * True if currently using requestAnimationFrame, false if using setTimeout. This may be different than timingMode\n\t * if that property changed and a tick hasn't fired.\n\t * @property _raf\n\t * @static\n\t * @type {Boolean}\n\t * @private\n\t **/\n\tTicker._raf = true;\n\t\n\n// static getter / setters:\n\t/**\n\t * Use the {{#crossLink \"Ticker/interval:property\"}}{{/crossLink}} property instead.\n\t * @method _setInterval\n\t * @private\n\t * @static\n\t * @param {Number} interval\n\t **/\n\tTicker._setInterval = function(interval) {\n\t\tTicker._interval = interval;\n\t\tif (!Ticker._inited) { return; }\n\t\tTicker._setupTick();\n\t};\n\t// Ticker.setInterval is @deprecated. Remove for 1.1+\n\tTicker.setInterval = createjs.deprecate(Ticker._setInterval, \"Ticker.setInterval\");\n\n\t/**\n\t * Use the {{#crossLink \"Ticker/interval:property\"}}{{/crossLink}} property instead.\n\t * @method _getInterval\n\t * @private\n\t * @static\n\t * @return {Number}\n\t **/\n\tTicker._getInterval = function() {\n\t\treturn Ticker._interval;\n\t};\n\t// Ticker.getInterval is @deprecated. Remove for 1.1+\n\tTicker.getInterval = createjs.deprecate(Ticker._getInterval, \"Ticker.getInterval\");\n\n\t/**\n\t * Use the {{#crossLink \"Ticker/framerate:property\"}}{{/crossLink}} property instead.\n\t * @method _setFPS\n\t * @private\n\t * @static\n\t * @param {Number} value\n\t **/\n\tTicker._setFPS = function(value) {\n\t\tTicker._setInterval(1000/value);\n\t};\n\t// Ticker.setFPS is @deprecated. Remove for 1.1+\n\tTicker.setFPS = createjs.deprecate(Ticker._setFPS, \"Ticker.setFPS\");\n\n\t/**\n\t * Use the {{#crossLink \"Ticker/framerate:property\"}}{{/crossLink}} property instead.\n\t * @method _getFPS\n\t * @static\n\t * @private\n\t * @return {Number}\n\t **/\n\tTicker._getFPS = function() {\n\t\treturn 1000/Ticker._interval;\n\t};\n\t// Ticker.getFPS is @deprecated. Remove for 1.1+\n\tTicker.getFPS = createjs.deprecate(Ticker._getFPS, \"Ticker.getFPS\");\n\n\t/**\n\t * Indicates the target time (in milliseconds) between ticks. Default is 50 (20 FPS).\n\t * Note that actual time between ticks may be more than specified depending on CPU load.\n\t * This property is ignored if the ticker is using the `RAF` timing mode.\n\t * @property interval\n\t * @static\n\t * @type {Number}\n\t **/\n\t \n\t/**\n\t * Indicates the target frame rate in frames per second (FPS). Effectively just a shortcut to `interval`, where\n\t * `framerate == 1000/interval`.\n\t * @property framerate\n\t * @static\n\t * @type {Number}\n\t **/\n\ttry {\n\t\tObject.defineProperties(Ticker, {\n\t\t\tinterval: { get: Ticker._getInterval, set: Ticker._setInterval },\n\t\t\tframerate: { get: Ticker._getFPS, set: Ticker._setFPS }\n\t\t});\n\t} catch (e) { console.log(e); }\n\n\n// public static methods:\n\t/**\n\t * Starts the tick. This is called automatically when the first listener is added.\n\t * @method init\n\t * @static\n\t **/\n\tTicker.init = function() {\n\t\tif (Ticker._inited) { return; }\n\t\tTicker._inited = true;\n\t\tTicker._times = [];\n\t\tTicker._tickTimes = [];\n\t\tTicker._startTime = Ticker._getTime();\n\t\tTicker._times.push(Ticker._lastTime = 0);\n\t\tTicker.interval = Ticker._interval;\n\t};\n\t\n\t/**\n\t * Stops the Ticker and removes all listeners. Use init() to restart the Ticker.\n\t * @method reset\n\t * @static\n\t **/\n\tTicker.reset = function() {\n\t\tif (Ticker._raf) {\n\t\t\tvar f = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || window.msCancelAnimationFrame;\n\t\t\tf&&f(Ticker._timerId);\n\t\t} else {\n\t\t\tclearTimeout(Ticker._timerId);\n\t\t}\n\t\tTicker.removeAllEventListeners(\"tick\");\n\t\tTicker._timerId = Ticker._times = Ticker._tickTimes = null;\n\t\tTicker._startTime = Ticker._lastTime = Ticker._ticks = Ticker._pausedTime = 0;\n\t\tTicker._inited = false;\n\t};\n\n\t/**\n\t * Returns the average time spent within a tick. This can vary significantly from the value provided by getMeasuredFPS\n\t * because it only measures the time spent within the tick execution stack. \n\t * \n\t * Example 1: With a target FPS of 20, getMeasuredFPS() returns 20fps, which indicates an average of 50ms between \n\t * the end of one tick and the end of the next. However, getMeasuredTickTime() returns 15ms. This indicates that \n\t * there may be up to 35ms of \"idle\" time between the end of one tick and the start of the next.\n\t *\n\t * Example 2: With a target FPS of 30, {{#crossLink \"Ticker/framerate:property\"}}{{/crossLink}} returns 10fps, which\n\t * indicates an average of 100ms between the end of one tick and the end of the next. However, {{#crossLink \"Ticker/getMeasuredTickTime\"}}{{/crossLink}}\n\t * returns 20ms. This would indicate that something other than the tick is using ~80ms (another script, DOM\n\t * rendering, etc).\n\t * @method getMeasuredTickTime\n\t * @static\n\t * @param {Number} [ticks] The number of previous ticks over which to measure the average time spent in a tick.\n\t * Defaults to the number of ticks per second. To get only the last tick's time, pass in 1.\n\t * @return {Number} The average time spent in a tick in milliseconds.\n\t **/\n\tTicker.getMeasuredTickTime = function(ticks) {\n\t\tvar ttl=0, times=Ticker._tickTimes;\n\t\tif (!times || times.length < 1) { return -1; }\n\n\t\t// by default, calculate average for the past ~1 second:\n\t\tticks = Math.min(times.length, ticks||(Ticker._getFPS()|0));\n\t\tfor (var i=0; i= (Ticker._interval-1)*0.97) {\n\t\t\tTicker._tick();\n\t\t}\n\t};\n\n\t/**\n\t * @method _handleRAF\n\t * @static\n\t * @private\n\t **/\n\tTicker._handleRAF = function() {\n\t\tTicker._timerId = null;\n\t\tTicker._setupTick();\n\t\tTicker._tick();\n\t};\n\n\t/**\n\t * @method _handleTimeout\n\t * @static\n\t * @private\n\t **/\n\tTicker._handleTimeout = function() {\n\t\tTicker._timerId = null;\n\t\tTicker._setupTick();\n\t\tTicker._tick();\n\t};\n\n\t/**\n\t * @method _setupTick\n\t * @static\n\t * @private\n\t **/\n\tTicker._setupTick = function() {\n\t\tif (Ticker._timerId != null) { return; } // avoid duplicates\n\n\t\tvar mode = Ticker.timingMode;\n\t\tif (mode == Ticker.RAF_SYNCHED || mode == Ticker.RAF) {\n\t\t\tvar f = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;\n\t\t\tif (f) {\n\t\t\t\tTicker._timerId = f(mode == Ticker.RAF ? Ticker._handleRAF : Ticker._handleSynch);\n\t\t\t\tTicker._raf = true;\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t\tTicker._raf = false;\n\t\tTicker._timerId = setTimeout(Ticker._handleTimeout, Ticker._interval);\n\t};\n\n\t/**\n\t * @method _tick\n\t * @static\n\t * @private\n\t **/\n\tTicker._tick = function() {\n\t\tvar paused = Ticker.paused;\n\t\tvar time = Ticker._getTime();\n\t\tvar elapsedTime = time-Ticker._lastTime;\n\t\tTicker._lastTime = time;\n\t\tTicker._ticks++;\n\t\t\n\t\tif (paused) {\n\t\t\tTicker._pausedTicks++;\n\t\t\tTicker._pausedTime += elapsedTime;\n\t\t}\n\t\t\n\t\tif (Ticker.hasEventListener(\"tick\")) {\n\t\t\tvar event = new createjs.Event(\"tick\");\n\t\t\tvar maxDelta = Ticker.maxDelta;\n\t\t\tevent.delta = (maxDelta && elapsedTime > maxDelta) ? maxDelta : elapsedTime;\n\t\t\tevent.paused = paused;\n\t\t\tevent.time = time;\n\t\t\tevent.runTime = time-Ticker._pausedTime;\n\t\t\tTicker.dispatchEvent(event);\n\t\t}\n\t\t\n\t\tTicker._tickTimes.unshift(Ticker._getTime()-time);\n\t\twhile (Ticker._tickTimes.length > 100) { Ticker._tickTimes.pop(); }\n\n\t\tTicker._times.unshift(time);\n\t\twhile (Ticker._times.length > 100) { Ticker._times.pop(); }\n\t};\n\n\t/**\n\t * @method _getTime\n\t * @static\n\t * @private\n\t **/\n\tvar w=window, now=w.performance.now || w.performance.mozNow || w.performance.msNow || w.performance.oNow || w.performance.webkitNow;\n\tTicker._getTime = function() {\n\t\treturn ((now&&now.call(w.performance))||(new Date().getTime())) - Ticker._startTime;\n\t};\n\n\n\tcreatejs.Ticker = Ticker;\n}());\n\n//##############################################################################\n// VideoBuffer.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * When an HTML video seeks, including when looping, there is an indeterminate period before a new frame is available.\n\t * This can result in the video blinking or flashing when it is drawn to a canvas. The VideoBuffer class resolves\n\t * this issue by drawing each frame to an off-screen canvas and preserving the prior frame during a seek.\n\t * \n\t * \tvar myBuffer = new createjs.VideoBuffer(myVideo);\n\t * \tvar myBitmap = new Bitmap(myBuffer);\n\t * \n\t * @class VideoBuffer\n\t * @param {HTMLVideoElement} video The HTML video element to buffer.\n\t * @constructor\n\t **/\n\tfunction VideoBuffer(video) {\n\t\t\n\t// private properties:\n\t\t/**\n\t\t * Used by Bitmap to determine when the video buffer is ready to be drawn. Not intended for general use.\n\t\t * @property readyState\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis.readyState = video.readyState;\n\t\t\n\t\t/**\n\t\t * @property _video\n\t\t * @protected\n\t\t * @type {HTMLVideoElement}\n\t\t * @default 0\n\t\t **/\n\t\tthis._video = video;\n\t\t\n\t\t/**\n\t\t * @property _canvas\n\t\t * @protected\n\t\t * @type {HTMLCanvasElement}\n\t\t * @default 0\n\t\t **/\n\t\tthis._canvas = null;\n\t\t\n\t\t/**\n\t\t * @property _lastTime\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default -1\n\t\t **/\n\t\tthis._lastTime = -1;\n\t\t\n\t\tif (this.readyState < 2) { video.addEventListener(\"canplaythrough\", this._videoReady.bind(this)); } //once:true isn't supported everywhere, but its a non-critical optimization here.\n\t}\n\tvar p = VideoBuffer.prototype;\n\t\n\t\n// public methods:\n\t/**\n\t * Gets an HTML canvas element showing the current video frame, or the previous frame if in a seek / loop.\n\t * Primarily for use by {{#crossLink \"Bitmap\"}}{{/crossLink}}.\n\t * @method getImage\n\t **/\n\tp.getImage = function() {\n\t\tif (this.readyState < 2) { return; }\n\t\tvar canvas=this._canvas, video = this._video;\n\t\tif (!canvas) {\n\t\t\tcanvas = this._canvas = createjs.createCanvas?createjs.createCanvas():document.createElement(\"canvas\");\n\t\t\tcanvas.width = video.videoWidth;\n\t\t\tcanvas.height = video.videoHeight;\n\t\t}\n\t\tif (video.readyState >= 2 && video.currentTime !== this._lastTime) {\n\t\t\tvar ctx = canvas.getContext(\"2d\");\n\t\t\tctx.clearRect(0,0,canvas.width,canvas.height);\n\t\t\tctx.drawImage(video,0,0,canvas.width,canvas.height);\n\t\t\tthis._lastTime = video.currentTime;\n\t\t}\n\t\treturn canvas;\n\t};\n\t\n// private methods:\n\t/**\n\t * @method _videoReady\n\t * @protected\n\t **/\n\tp._videoReady = function() {\n\t\tthis.readyState = 2;\n\t};\n\n\n\tcreatejs.VideoBuffer = VideoBuffer;\n}());\n\n//##############################################################################\n// MouseEvent.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * Passed as the parameter to all mouse/pointer/touch related events. For a listing of mouse events and their properties,\n\t * see the {{#crossLink \"DisplayObject\"}}{{/crossLink}} and {{#crossLink \"Stage\"}}{{/crossLink}} event listings.\n\t * @class MouseEvent\n\t * @param {String} type The event type.\n\t * @param {Boolean} bubbles Indicates whether the event will bubble through the display list.\n\t * @param {Boolean} cancelable Indicates whether the default behaviour of this event can be cancelled.\n\t * @param {Number} stageX The normalized x position relative to the stage.\n\t * @param {Number} stageY The normalized y position relative to the stage.\n\t * @param {MouseEvent} nativeEvent The native DOM event related to this mouse event.\n\t * @param {Number} pointerID The unique id for the pointer.\n\t * @param {Boolean} primary Indicates whether this is the primary pointer in a multitouch environment.\n\t * @param {Number} rawX The raw x position relative to the stage.\n\t * @param {Number} rawY The raw y position relative to the stage.\n\t * @param {DisplayObject} relatedTarget The secondary target for the event.\n\t * @extends Event\n\t * @constructor\n\t **/\n\tfunction MouseEvent(type, bubbles, cancelable, stageX, stageY, nativeEvent, pointerID, primary, rawX, rawY, relatedTarget) {\n\t\tthis.Event_constructor(type, bubbles, cancelable);\n\t\t\n\t\t\n\t// public properties:\n\t\t/**\n\t\t * The normalized x position on the stage. This will always be within the range 0 to stage width.\n\t\t * @property stageX\n\t\t * @type Number\n\t\t*/\n\t\tthis.stageX = stageX;\n\t\n\t\t/**\n\t\t * The normalized y position on the stage. This will always be within the range 0 to stage height.\n\t\t * @property stageY\n\t\t * @type Number\n\t\t **/\n\t\tthis.stageY = stageY;\n\t\n\t\t/**\n\t\t * The raw x position relative to the stage. Normally this will be the same as the stageX value, unless\n\t\t * stage.mouseMoveOutside is true and the pointer is outside of the stage bounds.\n\t\t * @property rawX\n\t\t * @type Number\n\t\t*/\n\t\tthis.rawX = (rawX==null)?stageX:rawX;\n\t\n\t\t/**\n\t\t * The raw y position relative to the stage. Normally this will be the same as the stageY value, unless\n\t\t * stage.mouseMoveOutside is true and the pointer is outside of the stage bounds.\n\t\t * @property rawY\n\t\t * @type Number\n\t\t*/\n\t\tthis.rawY = (rawY==null)?stageY:rawY;\n\t\n\t\t/**\n\t\t * The native MouseEvent generated by the browser. The properties and API for this\n\t\t * event may differ between browsers. This property will be null if the\n\t\t * EaselJS property was not directly generated from a native MouseEvent.\n\t\t * @property nativeEvent\n\t\t * @type HtmlMouseEvent\n\t\t * @default null\n\t\t **/\n\t\tthis.nativeEvent = nativeEvent;\n\t\n\t\t/**\n\t\t * The unique id for the pointer (touch point or cursor). This will be either -1 for the mouse, or the system\n\t\t * supplied id value.\n\t\t * @property pointerID\n\t\t * @type {Number}\n\t\t */\n\t\tthis.pointerID = pointerID;\n\t\n\t\t/**\n\t\t * Indicates whether this is the primary pointer in a multitouch environment. This will always be true for the mouse.\n\t\t * For touch pointers, the first pointer in the current stack will be considered the primary pointer.\n\t\t * @property primary\n\t\t * @type {Boolean}\n\t\t */\n\t\tthis.primary = !!primary;\n\t\t\n\t\t/**\n\t\t * The secondary target for the event, if applicable. This is used for mouseout/rollout\n\t\t * events to indicate the object that the mouse entered from, mouseover/rollover for the object the mouse exited,\n\t\t * and stagemousedown/stagemouseup events for the object that was the under the cursor, if any.\n\t\t * \n\t\t * Only valid interaction targets will be returned (ie. objects with mouse listeners or a cursor set).\n\t\t * @property relatedTarget\n\t\t * @type {DisplayObject}\n\t\t */\n\t\tthis.relatedTarget = relatedTarget;\n\t}\n\tvar p = createjs.extend(MouseEvent, createjs.Event);\n\n\t// TODO: deprecated\n\t// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.\n\t\n\t\n// getter / setters:\n\t/**\n\t * Returns the x position of the mouse in the local coordinate system of the current target (ie. the dispatcher).\n\t * @property localX\n\t * @type {Number}\n\t * @readonly\n\t */\n\tp._get_localX = function() {\n\t\treturn this.currentTarget.globalToLocal(this.rawX, this.rawY).x;\n\t};\n\t\n\t/**\n\t * Returns the y position of the mouse in the local coordinate system of the current target (ie. the dispatcher).\n\t * @property localY\n\t * @type {Number}\n\t * @readonly\n\t */\n\tp._get_localY = function() {\n\t\treturn this.currentTarget.globalToLocal(this.rawX, this.rawY).y;\n\t};\n\t\n\t/**\n\t * Indicates whether the event was generated by a touch input (versus a mouse input).\n\t * @property isTouch\n\t * @type {Boolean}\n\t * @readonly\n\t */\n\tp._get_isTouch = function() {\n\t\treturn this.pointerID !== -1;\n\t};\n\t\n\t\n\ttry {\n\t\tObject.defineProperties(p, {\n\t\t\tlocalX: { get: p._get_localX },\n\t\t\tlocalY: { get: p._get_localY },\n\t\t\tisTouch: { get: p._get_isTouch }\n\t\t});\n\t} catch (e) {} // TODO: use Log\n\n\n// public methods:\n\t/**\n\t * Returns a clone of the MouseEvent instance.\n\t * @method clone\n\t * @return {MouseEvent} a clone of the MouseEvent instance.\n\t **/\n\tp.clone = function() {\n\t\treturn new MouseEvent(this.type, this.bubbles, this.cancelable, this.stageX, this.stageY, this.nativeEvent, this.pointerID, this.primary, this.rawX, this.rawY);\n\t};\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t **/\n\tp.toString = function() {\n\t\treturn \"[MouseEvent (type=\"+this.type+\" stageX=\"+this.stageX+\" stageY=\"+this.stageY+\")]\";\n\t};\n\n\n\tcreatejs.MouseEvent = createjs.promote(MouseEvent, \"Event\");\n}());\n\n//##############################################################################\n// Matrix2D.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * Represents an affine transformation matrix, and provides tools for constructing and concatenating matrices.\n\t *\n\t * This matrix can be visualized as:\n\t *\n\t * \t[ a c tx\n\t * \t b d ty\n\t * \t 0 0 1 ]\n\t *\n\t * Note the locations of b and c.\n\t *\n\t * @class Matrix2D\n\t * @param {Number} [a=1] Specifies the a property for the new matrix.\n\t * @param {Number} [b=0] Specifies the b property for the new matrix.\n\t * @param {Number} [c=0] Specifies the c property for the new matrix.\n\t * @param {Number} [d=1] Specifies the d property for the new matrix.\n\t * @param {Number} [tx=0] Specifies the tx property for the new matrix.\n\t * @param {Number} [ty=0] Specifies the ty property for the new matrix.\n\t * @constructor\n\t **/\n\tfunction Matrix2D(a, b, c, d, tx, ty) {\n\t\tthis.setValues(a,b,c,d,tx,ty);\n\t\t\n\t// public properties:\n\t\t// assigned in the setValues method.\n\t\t/**\n\t\t * Position (0, 0) in a 3x3 affine transformation matrix.\n\t\t * @property a\n\t\t * @type Number\n\t\t **/\n\t\n\t\t/**\n\t\t * Position (0, 1) in a 3x3 affine transformation matrix.\n\t\t * @property b\n\t\t * @type Number\n\t\t **/\n\t\n\t\t/**\n\t\t * Position (1, 0) in a 3x3 affine transformation matrix.\n\t\t * @property c\n\t\t * @type Number\n\t\t **/\n\t\n\t\t/**\n\t\t * Position (1, 1) in a 3x3 affine transformation matrix.\n\t\t * @property d\n\t\t * @type Number\n\t\t **/\n\t\n\t\t/**\n\t\t * Position (2, 0) in a 3x3 affine transformation matrix.\n\t\t * @property tx\n\t\t * @type Number\n\t\t **/\n\t\n\t\t/**\n\t\t * Position (2, 1) in a 3x3 affine transformation matrix.\n\t\t * @property ty\n\t\t * @type Number\n\t\t **/\n\t}\n\tvar p = Matrix2D.prototype;\n\n// constants:\n\t/**\n\t * Multiplier for converting degrees to radians. Used internally by Matrix2D.\n\t * @property DEG_TO_RAD\n\t * @static\n\t * @final\n\t * @type Number\n\t * @readonly\n\t **/\n\tMatrix2D.DEG_TO_RAD = Math.PI/180;\n\n\n// static public properties:\n\t/**\n\t * An identity matrix, representing a null transformation.\n\t * @property identity\n\t * @static\n\t * @type Matrix2D\n\t * @readonly\n\t **/\n\tMatrix2D.identity = null; // set at bottom of class definition.\n\t\n\n// public methods:\n\t/**\n\t * Sets the specified values on this instance. \n\t * @method setValues\n\t * @param {Number} [a=1] Specifies the a property for the new matrix.\n\t * @param {Number} [b=0] Specifies the b property for the new matrix.\n\t * @param {Number} [c=0] Specifies the c property for the new matrix.\n\t * @param {Number} [d=1] Specifies the d property for the new matrix.\n\t * @param {Number} [tx=0] Specifies the tx property for the new matrix.\n\t * @param {Number} [ty=0] Specifies the ty property for the new matrix.\n\t * @return {Matrix2D} This instance. Useful for chaining method calls.\n\t*/\n\tp.setValues = function(a, b, c, d, tx, ty) {\n\t\t// don't forget to update docs in the constructor if these change:\n\t\tthis.a = (a == null) ? 1 : a;\n\t\tthis.b = b || 0;\n\t\tthis.c = c || 0;\n\t\tthis.d = (d == null) ? 1 : d;\n\t\tthis.tx = tx || 0;\n\t\tthis.ty = ty || 0;\n\t\treturn this;\n\t};\n\n\t/**\n\t * Appends the specified matrix properties to this matrix. All parameters are required.\n\t * This is the equivalent of multiplying `(this matrix) * (specified matrix)`.\n\t * @method append\n\t * @param {Number} a\n\t * @param {Number} b\n\t * @param {Number} c\n\t * @param {Number} d\n\t * @param {Number} tx\n\t * @param {Number} ty\n\t * @return {Matrix2D} This matrix. Useful for chaining method calls.\n\t **/\n\tp.append = function(a, b, c, d, tx, ty) {\n\t\tvar a1 = this.a;\n\t\tvar b1 = this.b;\n\t\tvar c1 = this.c;\n\t\tvar d1 = this.d;\n\t\tif (a != 1 || b != 0 || c != 0 || d != 1) {\n\t\t\tthis.a = a1*a+c1*b;\n\t\t\tthis.b = b1*a+d1*b;\n\t\t\tthis.c = a1*c+c1*d;\n\t\t\tthis.d = b1*c+d1*d;\n\t\t}\n\t\tthis.tx = a1*tx+c1*ty+this.tx;\n\t\tthis.ty = b1*tx+d1*ty+this.ty;\n\t\treturn this;\n\t};\n\n\t/**\n\t * Prepends the specified matrix properties to this matrix.\n\t * This is the equivalent of multiplying `(specified matrix) * (this matrix)`.\n\t * All parameters are required.\n\t * @method prepend\n\t * @param {Number} a\n\t * @param {Number} b\n\t * @param {Number} c\n\t * @param {Number} d\n\t * @param {Number} tx\n\t * @param {Number} ty\n\t * @return {Matrix2D} This matrix. Useful for chaining method calls.\n\t **/\n\tp.prepend = function(a, b, c, d, tx, ty) {\n\t\tvar a1 = this.a;\n\t\tvar c1 = this.c;\n\t\tvar tx1 = this.tx;\n\n\t\tthis.a = a*a1+c*this.b;\n\t\tthis.b = b*a1+d*this.b;\n\t\tthis.c = a*c1+c*this.d;\n\t\tthis.d = b*c1+d*this.d;\n\t\tthis.tx = a*tx1+c*this.ty+tx;\n\t\tthis.ty = b*tx1+d*this.ty+ty;\n\t\treturn this;\n\t};\n\n\t/**\n\t * Appends the specified matrix to this matrix.\n\t * This is the equivalent of multiplying `(this matrix) * (specified matrix)`.\n\t * @method appendMatrix\n\t * @param {Matrix2D} matrix\n\t * @return {Matrix2D} This matrix. Useful for chaining method calls.\n\t **/\n\tp.appendMatrix = function(matrix) {\n\t\treturn this.append(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);\n\t};\n\n\t/**\n\t * Prepends the specified matrix to this matrix.\n\t * This is the equivalent of multiplying `(specified matrix) * (this matrix)`.\n\t * For example, you could calculate the combined transformation for a child object using:\n\t * \n\t * \tvar o = myDisplayObject;\n\t * \tvar mtx = o.getMatrix();\n\t * \twhile (o = o.parent) {\n\t * \t\t// prepend each parent's transformation in turn:\n\t * \t\to.prependMatrix(o.getMatrix());\n\t * \t}\n\t * @method prependMatrix\n\t * @param {Matrix2D} matrix\n\t * @return {Matrix2D} This matrix. Useful for chaining method calls.\n\t **/\n\tp.prependMatrix = function(matrix) {\n\t\treturn this.prepend(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);\n\t};\n\n\t/**\n\t * Generates matrix properties from the specified display object transform properties, and appends them to this matrix.\n\t * For example, you can use this to generate a matrix representing the transformations of a display object:\n\t * \n\t * \tvar mtx = new createjs.Matrix2D();\n\t * \tmtx.appendTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation);\n\t * @method appendTransform\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} scaleX\n\t * @param {Number} scaleY\n\t * @param {Number} rotation\n\t * @param {Number} skewX\n\t * @param {Number} skewY\n\t * @param {Number} regX Optional.\n\t * @param {Number} regY Optional.\n\t * @return {Matrix2D} This matrix. Useful for chaining method calls.\n\t **/\n\tp.appendTransform = function(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) {\n\t\tif (rotation%360) {\n\t\t\tvar r = rotation*Matrix2D.DEG_TO_RAD;\n\t\t\tvar cos = Math.cos(r);\n\t\t\tvar sin = Math.sin(r);\n\t\t} else {\n\t\t\tcos = 1;\n\t\t\tsin = 0;\n\t\t}\n\n\t\tif (skewX || skewY) {\n\t\t\t// TODO: can this be combined into a single append operation?\n\t\t\tskewX *= Matrix2D.DEG_TO_RAD;\n\t\t\tskewY *= Matrix2D.DEG_TO_RAD;\n\t\t\tthis.append(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y);\n\t\t\tthis.append(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, 0, 0);\n\t\t} else {\n\t\t\tthis.append(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, x, y);\n\t\t}\n\t\t\n\t\tif (regX || regY) {\n\t\t\t// append the registration offset:\n\t\t\tthis.tx -= regX*this.a+regY*this.c; \n\t\t\tthis.ty -= regX*this.b+regY*this.d;\n\t\t}\n\t\treturn this;\n\t};\n\n\t/**\n\t * Generates matrix properties from the specified display object transform properties, and prepends them to this matrix.\n\t * For example, you could calculate the combined transformation for a child object using:\n\t * \n\t * \tvar o = myDisplayObject;\n\t * \tvar mtx = new createjs.Matrix2D();\n\t * \tdo {\n\t * \t\t// prepend each parent's transformation in turn:\n\t * \t\tmtx.prependTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation, o.skewX, o.skewY, o.regX, o.regY);\n\t * \t} while (o = o.parent);\n\t * \t\n\t * \tNote that the above example would not account for {{#crossLink \"DisplayObject/transformMatrix:property\"}}{{/crossLink}}\n\t * \tvalues. See {{#crossLink \"Matrix2D/prependMatrix\"}}{{/crossLink}} for an example that does.\n\t * @method prependTransform\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} scaleX\n\t * @param {Number} scaleY\n\t * @param {Number} rotation\n\t * @param {Number} skewX\n\t * @param {Number} skewY\n\t * @param {Number} regX Optional.\n\t * @param {Number} regY Optional.\n\t * @return {Matrix2D} This matrix. Useful for chaining method calls.\n\t **/\n\tp.prependTransform = function(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) {\n\t\tif (rotation%360) {\n\t\t\tvar r = rotation*Matrix2D.DEG_TO_RAD;\n\t\t\tvar cos = Math.cos(r);\n\t\t\tvar sin = Math.sin(r);\n\t\t} else {\n\t\t\tcos = 1;\n\t\t\tsin = 0;\n\t\t}\n\n\t\tif (regX || regY) {\n\t\t\t// prepend the registration offset:\n\t\t\tthis.tx -= regX; this.ty -= regY;\n\t\t}\n\t\tif (skewX || skewY) {\n\t\t\t// TODO: can this be combined into a single prepend operation?\n\t\t\tskewX *= Matrix2D.DEG_TO_RAD;\n\t\t\tskewY *= Matrix2D.DEG_TO_RAD;\n\t\t\tthis.prepend(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, 0, 0);\n\t\t\tthis.prepend(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), x, y);\n\t\t} else {\n\t\t\tthis.prepend(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, x, y);\n\t\t}\n\t\treturn this;\n\t};\n\n\t/**\n\t * Applies a clockwise rotation transformation to the matrix.\n\t * @method rotate\n\t * @param {Number} angle The angle to rotate by, in degrees. To use a value in radians, multiply it by `180/Math.PI`.\n\t * @return {Matrix2D} This matrix. Useful for chaining method calls.\n\t **/\n\tp.rotate = function(angle) {\n\t\tangle = angle*Matrix2D.DEG_TO_RAD;\n\t\tvar cos = Math.cos(angle);\n\t\tvar sin = Math.sin(angle);\n\n\t\tvar a1 = this.a;\n\t\tvar b1 = this.b;\n\n\t\tthis.a = a1*cos+this.c*sin;\n\t\tthis.b = b1*cos+this.d*sin;\n\t\tthis.c = -a1*sin+this.c*cos;\n\t\tthis.d = -b1*sin+this.d*cos;\n\t\treturn this;\n\t};\n\n\t/**\n\t * Applies a skew transformation to the matrix.\n\t * @method skew\n\t * @param {Number} skewX The amount to skew horizontally in degrees. To use a value in radians, multiply it by `180/Math.PI`.\n\t * @param {Number} skewY The amount to skew vertically in degrees.\n\t * @return {Matrix2D} This matrix. Useful for chaining method calls.\n\t*/\n\tp.skew = function(skewX, skewY) {\n\t\tskewX = skewX*Matrix2D.DEG_TO_RAD;\n\t\tskewY = skewY*Matrix2D.DEG_TO_RAD;\n\t\tthis.append(Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX), 0, 0);\n\t\treturn this;\n\t};\n\n\t/**\n\t * Applies a scale transformation to the matrix.\n\t * @method scale\n\t * @param {Number} x The amount to scale horizontally. E.G. a value of 2 will double the size in the X direction, and 0.5 will halve it.\n\t * @param {Number} y The amount to scale vertically.\n\t * @return {Matrix2D} This matrix. Useful for chaining method calls.\n\t **/\n\tp.scale = function(x, y) {\n\t\tthis.a *= x;\n\t\tthis.b *= x;\n\t\tthis.c *= y;\n\t\tthis.d *= y;\n\t\t//this.tx *= x;\n\t\t//this.ty *= y;\n\t\treturn this;\n\t};\n\n\t/**\n\t * Translates the matrix on the x and y axes.\n\t * @method translate\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @return {Matrix2D} This matrix. Useful for chaining method calls.\n\t **/\n\tp.translate = function(x, y) {\n\t\tthis.tx += this.a*x + this.c*y;\n\t\tthis.ty += this.b*x + this.d*y;\n\t\treturn this;\n\t};\n\n\t/**\n\t * Sets the properties of the matrix to those of an identity matrix (one that applies a null transformation).\n\t * @method identity\n\t * @return {Matrix2D} This matrix. Useful for chaining method calls.\n\t **/\n\tp.identity = function() {\n\t\tthis.a = this.d = 1;\n\t\tthis.b = this.c = this.tx = this.ty = 0;\n\t\treturn this;\n\t};\n\n\t/**\n\t * Inverts the matrix, causing it to perform the opposite transformation.\n\t * @method invert\n\t * @return {Matrix2D} This matrix. Useful for chaining method calls.\n\t **/\n\tp.invert = function() {\n\t\tvar a1 = this.a;\n\t\tvar b1 = this.b;\n\t\tvar c1 = this.c;\n\t\tvar d1 = this.d;\n\t\tvar tx1 = this.tx;\n\t\tvar n = a1*d1-b1*c1;\n\n\t\tthis.a = d1/n;\n\t\tthis.b = -b1/n;\n\t\tthis.c = -c1/n;\n\t\tthis.d = a1/n;\n\t\tthis.tx = (c1*this.ty-d1*tx1)/n;\n\t\tthis.ty = -(a1*this.ty-b1*tx1)/n;\n\t\treturn this;\n\t};\n\n\t/**\n\t * Returns true if the matrix is an identity matrix.\n\t * @method isIdentity\n\t * @return {Boolean}\n\t **/\n\tp.isIdentity = function() {\n\t\treturn this.tx === 0 && this.ty === 0 && this.a === 1 && this.b === 0 && this.c === 0 && this.d === 1;\n\t};\n\t\n\t/**\n\t * Returns true if this matrix is equal to the specified matrix (all property values are equal).\n\t * @method equals\n\t * @param {Matrix2D} matrix The matrix to compare.\n\t * @return {Boolean}\n\t **/\n\tp.equals = function(matrix) {\n\t\treturn this.tx === matrix.tx && this.ty === matrix.ty && this.a === matrix.a && this.b === matrix.b && this.c === matrix.c && this.d === matrix.d;\n\t};\n\n\t/**\n\t * Transforms a point according to this matrix.\n\t * @method transformPoint\n\t * @param {Number} x The x component of the point to transform.\n\t * @param {Number} y The y component of the point to transform.\n\t * @param {Point | Object} [pt] An object to copy the result into. If omitted a generic object with x/y properties will be returned.\n\t * @return {Point} This matrix. Useful for chaining method calls.\n\t **/\n\tp.transformPoint = function(x, y, pt) {\n\t\tpt = pt||{};\n\t\tpt.x = x*this.a+y*this.c+this.tx;\n\t\tpt.y = x*this.b+y*this.d+this.ty;\n\t\treturn pt;\n\t};\n\n\t/**\n\t * Decomposes the matrix into transform properties (x, y, scaleX, scaleY, and rotation). Note that these values\n\t * may not match the transform properties you used to generate the matrix, though they will produce the same visual\n\t * results.\n\t * @method decompose\n\t * @param {Object} target The object to apply the transform properties to. If null, then a new object will be returned.\n\t * @return {Object} The target, or a new generic object with the transform properties applied.\n\t*/\n\tp.decompose = function(target) {\n\t\t// TODO: it would be nice to be able to solve for whether the matrix can be decomposed into only scale/rotation even when scale is negative\n\t\tif (target == null) { target = {}; }\n\t\ttarget.x = this.tx;\n\t\ttarget.y = this.ty;\n\t\ttarget.scaleX = Math.sqrt(this.a * this.a + this.b * this.b);\n\t\ttarget.scaleY = Math.sqrt(this.c * this.c + this.d * this.d);\n\n\t\tvar skewX = Math.atan2(-this.c, this.d);\n\t\tvar skewY = Math.atan2(this.b, this.a);\n\n\t\tvar delta = Math.abs(1-skewX/skewY);\n\t\tif (delta < 0.00001) { // effectively identical, can use rotation:\n\t\t\ttarget.rotation = skewY/Matrix2D.DEG_TO_RAD;\n\t\t\tif (this.a < 0 && this.d >= 0) {\n\t\t\t\ttarget.rotation += (target.rotation <= 0) ? 180 : -180;\n\t\t\t}\n\t\t\ttarget.skewX = target.skewY = 0;\n\t\t} else {\n\t\t\ttarget.skewX = skewX/Matrix2D.DEG_TO_RAD;\n\t\t\ttarget.skewY = skewY/Matrix2D.DEG_TO_RAD;\n\t\t}\n\t\treturn target;\n\t};\n\t\n\t/**\n\t * Copies all properties from the specified matrix to this matrix.\n\t * @method copy\n\t * @param {Matrix2D} matrix The matrix to copy properties from.\n\t * @return {Matrix2D} This matrix. Useful for chaining method calls.\n\t*/\n\tp.copy = function(matrix) {\n\t\treturn this.setValues(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);\n\t};\n\n\t/**\n\t * Returns a clone of the Matrix2D instance.\n\t * @method clone\n\t * @return {Matrix2D} a clone of the Matrix2D instance.\n\t **/\n\tp.clone = function() {\n\t\treturn new Matrix2D(this.a, this.b, this.c, this.d, this.tx, this.ty);\n\t};\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t **/\n\tp.toString = function() {\n\t\treturn \"[Matrix2D (a=\"+this.a+\" b=\"+this.b+\" c=\"+this.c+\" d=\"+this.d+\" tx=\"+this.tx+\" ty=\"+this.ty+\")]\";\n\t};\n\n\t// this has to be populated after the class is defined:\n\tMatrix2D.identity = new Matrix2D();\n\n\n\tcreatejs.Matrix2D = Matrix2D;\n}());\n\n//##############################################################################\n// DisplayProps.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\t/**\n\t * Used for calculating and encapsulating display related properties.\n\t * @class DisplayProps\n\t * @param {Number} [visible=true] Visible value.\n\t * @param {Number} [alpha=1] Alpha value.\n\t * @param {Number} [shadow=null] A Shadow instance or null.\n\t * @param {Number} [compositeOperation=null] A compositeOperation value or null.\n\t * @param {Number} [matrix] A transformation matrix. Defaults to a new identity matrix.\n\t * @constructor\n\t **/\n\tfunction DisplayProps(visible, alpha, shadow, compositeOperation, matrix) {\n\t\tthis.setValues(visible, alpha, shadow, compositeOperation, matrix);\n\t\t\n\t// public properties:\n\t\t// assigned in the setValues method.\n\t\t/**\n\t\t * Property representing the alpha that will be applied to a display object.\n\t\t * @property alpha\n\t\t * @type Number\n\t\t **/\n\t\n\t\t/**\n\t\t * Property representing the shadow that will be applied to a display object.\n\t\t * @property shadow\n\t\t * @type Shadow\n\t\t **/\n\t\n\t\t/**\n\t\t * Property representing the compositeOperation that will be applied to a display object.\n\t\t * You can find a list of valid composite operations at:\n\t\t * https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing\n\t\t * @property compositeOperation\n\t\t * @type String\n\t\t **/\n\t\t\n\t\t/**\n\t\t * Property representing the value for visible that will be applied to a display object.\n\t\t * @property visible\n\t\t * @type Boolean\n\t\t **/\n\t\t\n\t\t/**\n\t\t * The transformation matrix that will be applied to a display object.\n\t\t * @property matrix\n\t\t * @type Matrix2D\n\t\t **/\n\t}\n\tvar p = DisplayProps.prototype;\n\n// initialization:\n\t/**\n\t * Reinitializes the instance with the specified values.\n\t * @method setValues\n\t * @param {Number} [visible=true] Visible value.\n\t * @param {Number} [alpha=1] Alpha value.\n\t * @param {Number} [shadow=null] A Shadow instance or null.\n\t * @param {Number} [compositeOperation=null] A compositeOperation value or null.\n\t * @param {Number} [matrix] A transformation matrix. Defaults to an identity matrix.\n\t * @return {DisplayProps} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tp.setValues = function (visible, alpha, shadow, compositeOperation, matrix) {\n\t\tthis.visible = visible == null ? true : !!visible;\n\t\tthis.alpha = alpha == null ? 1 : alpha;\n\t\tthis.shadow = shadow;\n\t\tthis.compositeOperation = compositeOperation;\n\t\tthis.matrix = matrix || (this.matrix&&this.matrix.identity()) || new createjs.Matrix2D();\n\t\treturn this;\n\t};\n\n// public methods:\n\t/**\n\t * Appends the specified display properties. This is generally used to apply a child's properties its parent's.\n\t * @method append\n\t * @param {Boolean} visible desired visible value\n\t * @param {Number} alpha desired alpha value\n\t * @param {Shadow} shadow desired shadow value\n\t * @param {String} compositeOperation desired composite operation value\n\t * @param {Matrix2D} [matrix] a Matrix2D instance\n\t * @return {DisplayProps} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tp.append = function(visible, alpha, shadow, compositeOperation, matrix) {\n\t\tthis.alpha *= alpha;\n\t\tthis.shadow = shadow || this.shadow;\n\t\tthis.compositeOperation = compositeOperation || this.compositeOperation;\n\t\tthis.visible = this.visible && visible;\n\t\tmatrix&&this.matrix.appendMatrix(matrix);\n\t\treturn this;\n\t};\n\t\n\t/**\n\t * Prepends the specified display properties. This is generally used to apply a parent's properties to a child's.\n\t * For example, to get the combined display properties that would be applied to a child, you could use:\n\t * \n\t * \tvar o = myDisplayObject;\n\t * \tvar props = new createjs.DisplayProps();\n\t * \tdo {\n\t * \t\t// prepend each parent's props in turn:\n\t * \t\tprops.prepend(o.visible, o.alpha, o.shadow, o.compositeOperation, o.getMatrix());\n\t * \t} while (o = o.parent);\n\t * \t\n\t * @method prepend\n\t * @param {Boolean} visible desired visible value\n\t * @param {Number} alpha desired alpha value\n\t * @param {Shadow} shadow desired shadow value\n\t * @param {String} compositeOperation desired composite operation value\n\t * @param {Matrix2D} [matrix] a Matrix2D instance\n\t * @return {DisplayProps} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tp.prepend = function(visible, alpha, shadow, compositeOperation, matrix) {\n\t\tthis.alpha *= alpha;\n\t\tthis.shadow = this.shadow || shadow;\n\t\tthis.compositeOperation = this.compositeOperation || compositeOperation;\n\t\tthis.visible = this.visible && visible;\n\t\tmatrix&&this.matrix.prependMatrix(matrix);\n\t\treturn this;\n\t};\n\t\n\t/**\n\t * Resets this instance and its matrix to default values.\n\t * @method identity\n\t * @return {DisplayProps} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tp.identity = function() {\n\t\tthis.visible = true;\n\t\tthis.alpha = 1;\n\t\tthis.shadow = this.compositeOperation = null;\n\t\tthis.matrix.identity();\n\t\treturn this;\n\t};\n\t\n\t/**\n\t * Returns a clone of the DisplayProps instance. Clones the associated matrix.\n\t * @method clone\n\t * @return {DisplayProps} a clone of the DisplayProps instance.\n\t **/\n\tp.clone = function() {\n\t\treturn new DisplayProps(this.alpha, this.shadow, this.compositeOperation, this.visible, this.matrix.clone());\n\t};\n\n// private methods:\n\n\tcreatejs.DisplayProps = DisplayProps;\n})();\n\n//##############################################################################\n// Point.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * Represents a point on a 2 dimensional x / y coordinate system.\n\t *\n\t *

Example

\n\t * \n\t * var point = new createjs.Point(0, 100);\n\t * \n\t * @class Point\n\t * @param {Number} [x=0] X position.\n\t * @param {Number} [y=0] Y position.\n\t * @constructor\n\t **/\n\tfunction Point(x, y) {\n\t \tthis.setValues(x, y);\n\t \t\n\t \t\n\t// public properties:\n\t\t// assigned in the setValues method.\n\t\t/**\n\t\t * X position.\n\t\t * @property x\n\t\t * @type Number\n\t\t **/\n\t\n\t\t/**\n\t\t * Y position.\n\t\t * @property y\n\t\t * @type Number\n\t\t **/\n\t}\n\tvar p = Point.prototype;\n\t\n// public methods:\n\t/** \n\t * Sets the specified values on this instance.\n\t * @method setValues\n\t * @param {Number} [x=0] X position.\n\t * @param {Number} [y=0] Y position.\n\t * @return {Point} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tp.setValues = function(x, y) {\n\t\tthis.x = x||0;\n\t\tthis.y = y||0;\n\t\treturn this;\n\t};\n\t\n\t/**\n\t * Copies all properties from the specified point to this point.\n\t * @method copy\n\t * @param {Point} point The point to copy properties from.\n\t * @return {Point} This point. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tp.copy = function(point) {\n\t\tthis.x = point.x;\n\t\tthis.y = point.y;\n\t\treturn this;\n\t};\n\t\n\t/**\n\t * Returns a clone of the Point instance.\n\t * @method clone\n\t * @return {Point} a clone of the Point instance.\n\t **/\n\tp.clone = function() {\n\t\treturn new Point(this.x, this.y);\n\t};\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t **/\n\tp.toString = function() {\n\t\treturn \"[Point (x=\"+this.x+\" y=\"+this.y+\")]\";\n\t};\n\t\n\t\n\tcreatejs.Point = Point;\n}());\n\n//##############################################################################\n// Rectangle.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * Represents a rectangle as defined by the points (x, y) and (x+width, y+height).\n\t *\n\t *

Example

\n\t *\n\t * var rect = new createjs.Rectangle(0, 0, 100, 100);\n\t *\n\t * @class Rectangle\n\t * @param {Number} [x=0] X position.\n\t * @param {Number} [y=0] Y position.\n\t * @param {Number} [width=0] The width of the Rectangle.\n\t * @param {Number} [height=0] The height of the Rectangle.\n\t * @constructor\n\t **/\n\tfunction Rectangle(x, y, width, height) {\n\t\tthis.setValues(x, y, width, height);\n\t\t\n\t\t\n\t// public properties:\n\t\t// assigned in the setValues method.\n\t\t/**\n\t\t * X position.\n\t\t * @property x\n\t\t * @type Number\n\t\t **/\n\t\n\t\t/**\n\t\t * Y position.\n\t\t * @property y\n\t\t * @type Number\n\t\t **/\n\t\n\t\t/**\n\t\t * Width.\n\t\t * @property width\n\t\t * @type Number\n\t\t **/\n\t\n\t\t/**\n\t\t * Height.\n\t\t * @property height\n\t\t * @type Number\n\t\t **/\n\t}\n\tvar p = Rectangle.prototype;\n\n// public methods:\n\t/** \n\t * Sets the specified values on this instance.\n\t * @method setValues\n\t * @param {Number} [x=0] X position.\n\t * @param {Number} [y=0] Y position.\n\t * @param {Number} [width=0] The width of the Rectangle.\n\t * @param {Number} [height=0] The height of the Rectangle.\n\t * @return {Rectangle} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tp.setValues = function(x, y, width, height) {\n\t\t// don't forget to update docs in the constructor if these change:\n\t\tthis.x = x||0;\n\t\tthis.y = y||0;\n\t\tthis.width = width||0;\n\t\tthis.height = height||0;\n\t\treturn this;\n\t};\n\t\n\t/** \n\t * Extends the rectangle's bounds to include the described point or rectangle.\n\t * @method extend\n\t * @param {Number} x X position of the point or rectangle.\n\t * @param {Number} y Y position of the point or rectangle.\n\t * @param {Number} [width=0] The width of the rectangle.\n\t * @param {Number} [height=0] The height of the rectangle.\n\t * @return {Rectangle} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tp.extend = function(x, y, width, height) {\n\t\twidth = width||0;\n\t\theight = height||0;\n\t\tif (x+width > this.x+this.width) { this.width = x+width-this.x; }\n\t\tif (y+height > this.y+this.height) { this.height = y+height-this.y; }\n\t\tif (x < this.x) { this.width += this.x-x; this.x = x; }\n\t\tif (y < this.y) { this.height += this.y-y; this.y = y; }\n\t\treturn this;\n\t};\n\t\n\t/** \n\t * Adds the specified padding to the rectangle's bounds.\n\t * @method pad\n\t * @param {Number} top\n\t * @param {Number} left\n\t * @param {Number} bottom\n\t * @param {Number} right\n\t * @return {Rectangle} This instance. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tp.pad = function(top, left, bottom, right) {\n\t\tthis.x -= left;\n\t\tthis.y -= top;\n\t\tthis.width += left+right;\n\t\tthis.height += top+bottom;\n\t\treturn this;\n\t};\n\t\n\t/**\n\t * Copies all properties from the specified rectangle to this rectangle.\n\t * @method copy\n\t * @param {Rectangle} rectangle The rectangle to copy properties from.\n\t * @return {Rectangle} This rectangle. Useful for chaining method calls.\n\t * @chainable\n\t*/\n\tp.copy = function(rectangle) {\n\t\treturn this.setValues(rectangle.x, rectangle.y, rectangle.width, rectangle.height);\n\t};\n\t\n\t/** \n\t * Returns true if this rectangle fully encloses the described point or rectangle.\n\t * @method contains\n\t * @param {Number} x X position of the point or rectangle.\n\t * @param {Number} y Y position of the point or rectangle.\n\t * @param {Number} [width=0] The width of the rectangle.\n\t * @param {Number} [height=0] The height of the rectangle.\n\t * @return {Boolean} True if the described point or rectangle is contained within this rectangle.\n\t*/\n\tp.contains = function(x, y, width, height) {\n\t\twidth = width||0;\n\t\theight = height||0;\n\t\treturn (x >= this.x && x+width <= this.x+this.width && y >= this.y && y+height <= this.y+this.height);\n\t};\n\t\n\t/** \n\t * Returns a new rectangle which contains this rectangle and the specified rectangle.\n\t * @method union\n\t * @param {Rectangle} rect The rectangle to calculate a union with.\n\t * @return {Rectangle} A new rectangle describing the union.\n\t*/\n\tp.union = function(rect) {\n\t\treturn this.clone().extend(rect.x, rect.y, rect.width, rect.height);\n\t};\n\t\n\t/** \n\t * Returns a new rectangle which describes the intersection (overlap) of this rectangle and the specified rectangle,\n\t * or null if they do not intersect.\n\t * @method intersection\n\t * @param {Rectangle} rect The rectangle to calculate an intersection with.\n\t * @return {Rectangle} A new rectangle describing the intersection or null.\n\t*/\n\tp.intersection = function(rect) {\n\t\tvar x1 = rect.x, y1 = rect.y, x2 = x1+rect.width, y2 = y1+rect.height;\n\t\tif (this.x > x1) { x1 = this.x; }\n\t\tif (this.y > y1) { y1 = this.y; }\n\t\tif (this.x + this.width < x2) { x2 = this.x + this.width; }\n\t\tif (this.y + this.height < y2) { y2 = this.y + this.height; }\n\t\treturn (x2 <= x1 || y2 <= y1) ? null : new Rectangle(x1, y1, x2-x1, y2-y1);\n\t};\n\t\n\t/** \n\t * Returns true if the specified rectangle intersects (has any overlap) with this rectangle.\n\t * @method intersects\n\t * @param {Rectangle} rect The rectangle to compare.\n\t * @return {Boolean} True if the rectangles intersect.\n\t*/\n\tp.intersects = function(rect) {\n\t\treturn (rect.x <= this.x+this.width && this.x <= rect.x+rect.width && rect.y <= this.y+this.height && this.y <= rect.y + rect.height);\n\t};\n\t\n\t/** \n\t * Returns true if the width or height are equal or less than 0.\n\t * @method isEmpty\n\t * @return {Boolean} True if the rectangle is empty.\n\t*/\n\tp.isEmpty = function() {\n\t\treturn this.width <= 0 || this.height <= 0;\n\t};\n\t\n\t/**\n\t * Returns a clone of the Rectangle instance.\n\t * @method clone\n\t * @return {Rectangle} a clone of the Rectangle instance.\n\t **/\n\tp.clone = function() {\n\t\treturn new Rectangle(this.x, this.y, this.width, this.height);\n\t};\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t **/\n\tp.toString = function() {\n\t\treturn \"[Rectangle (x=\"+this.x+\" y=\"+this.y+\" width=\"+this.width+\" height=\"+this.height+\")]\";\n\t};\n\t\n\t\n\tcreatejs.Rectangle = Rectangle;\n}());\n\n//##############################################################################\n// ButtonHelper.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * The ButtonHelper is a helper class to create interactive buttons from {{#crossLink \"MovieClip\"}}{{/crossLink}} or\n\t * {{#crossLink \"Sprite\"}}{{/crossLink}} instances. This class will intercept mouse events from an object, and\n\t * automatically call {{#crossLink \"Sprite/gotoAndStop\"}}{{/crossLink}} or {{#crossLink \"Sprite/gotoAndPlay\"}}{{/crossLink}},\n\t * to the respective animation labels, add a pointer cursor, and allows the user to define a hit state frame.\n\t *\n\t * The ButtonHelper instance does not need to be added to the stage, but a reference should be maintained to prevent\n\t * garbage collection.\n\t * \n\t * Note that over states will not work unless you call {{#crossLink \"Stage/enableMouseOver\"}}{{/crossLink}}.\n\t *\n\t *

Example

\n\t *\n\t * var helper = new createjs.ButtonHelper(myInstance, \"out\", \"over\", \"down\", false, myInstance, \"hit\");\n\t * myInstance.addEventListener(\"click\", handleClick);\n\t * function handleClick(event) {\n\t * // Click Happened.\n\t * }\n\t *\n\t * @class ButtonHelper\n\t * @param {Sprite|MovieClip} target The instance to manage.\n\t * @param {String} [outLabel=\"out\"] The label or animation to go to when the user rolls out of the button.\n\t * @param {String} [overLabel=\"over\"] The label or animation to go to when the user rolls over the button.\n\t * @param {String} [downLabel=\"down\"] The label or animation to go to when the user presses the button.\n\t * @param {Boolean} [play=false] If the helper should call \"gotoAndPlay\" or \"gotoAndStop\" on the button when changing\n\t * states.\n\t * @param {DisplayObject} [hitArea] An optional item to use as the hit state for the button. If this is not defined,\n\t * then the button's visible states will be used instead. Note that the same instance as the \"target\" argument can be\n\t * used for the hitState.\n\t * @param {String} [hitLabel] The label or animation on the hitArea instance that defines the hitArea bounds. If this is\n\t * null, then the default state of the hitArea will be used. *\n\t * @constructor\n\t */\n\tfunction ButtonHelper(target, outLabel, overLabel, downLabel, play, hitArea, hitLabel) {\n\t\tif (!target.addEventListener) { return; }\n\t\n\t\n\t// public properties:\n\t\t/**\n\t\t * The target for this button helper.\n\t\t * @property target\n\t\t * @type MovieClip | Sprite\n\t\t * @readonly\n\t\t **/\n\t\tthis.target = target;\n\t\n\t\t/**\n\t\t * The label name or frame number to display when the user mouses out of the target. Defaults to \"over\".\n\t\t * @property overLabel\n\t\t * @type String | Number\n\t\t **/\n\t\tthis.overLabel = overLabel == null ? \"over\" : overLabel;\n\t\n\t\t/**\n\t\t * The label name or frame number to display when the user mouses over the target. Defaults to \"out\".\n\t\t * @property outLabel\n\t\t * @type String | Number\n\t\t **/\n\t\tthis.outLabel = outLabel == null ? \"out\" : outLabel;\n\t\n\t\t/**\n\t\t * The label name or frame number to display when the user presses on the target. Defaults to \"down\".\n\t\t * @property downLabel\n\t\t * @type String | Number\n\t\t **/\n\t\tthis.downLabel = downLabel == null ? \"down\" : downLabel;\n\t\n\t\t/**\n\t\t * If true, then ButtonHelper will call gotoAndPlay, if false, it will use gotoAndStop. Default is false.\n\t\t * @property play\n\t\t * @default false\n\t\t * @type Boolean\n\t\t **/\n\t\tthis.play = play;\n\t\t\n\t\t\n\t// private properties\n\t\t/**\n\t\t * @property _isPressed\n\t\t * @type Boolean\n\t\t * @protected\n\t\t **/\n\t\tthis._isPressed = false;\n\t\n\t\t/**\n\t\t * @property _isOver\n\t\t * @type Boolean\n\t\t * @protected\n\t\t **/\n\t\tthis._isOver = false;\n\t\n\t\t/**\n\t\t * @property _enabled\n\t\t * @type Boolean\n\t\t * @protected\n\t\t **/\n\t\tthis._enabled = false;\n\t\t\n\t// setup:\n\t\ttarget.mouseChildren = false; // prevents issues when children are removed from the display list when state changes.\n\t\tthis.enabled = true;\n\t\tthis.handleEvent({});\n\t\tif (hitArea) {\n\t\t\tif (hitLabel) {\n\t\t\t\thitArea.actionsEnabled = false;\n\t\t\t\thitArea.gotoAndStop&&hitArea.gotoAndStop(hitLabel);\n\t\t\t}\n\t\t\ttarget.hitArea = hitArea;\n\t\t}\n\t}\n\tvar p = ButtonHelper.prototype;\n\t\n// getter / setters:\n\t/**\n\t * Use the {{#crossLink \"ButtonHelper/enabled:property\"}}{{/crossLink}} property instead.\n\t * @method setEnabled\n\t * @param {Boolean} value The enabled property to set the instance to.\n\t * @[rptected\n\t * @protected\n\t **/\n\tp._setEnabled = function(value) {\n\t\tif (value == this._enabled) { return; }\n\t\tvar o = this.target;\n\t\tthis._enabled = value;\n\t\tif (value) {\n\t\t\to.cursor = \"pointer\";\n\t\t\to.addEventListener(\"rollover\", this);\n\t\t\to.addEventListener(\"rollout\", this);\n\t\t\to.addEventListener(\"mousedown\", this);\n\t\t\to.addEventListener(\"pressup\", this);\n\t\t\tif (o._reset) { o.__reset = o._reset; o._reset = this._reset;}\n\t\t} else {\n\t\t\to.cursor = null;\n\t\t\to.removeEventListener(\"rollover\", this);\n\t\t\to.removeEventListener(\"rollout\", this);\n\t\t\to.removeEventListener(\"mousedown\", this);\n\t\t\to.removeEventListener(\"pressup\", this);\n\t\t\tif (o.__reset) { o._reset = o.__reset; delete(o.__reset); }\n\t\t}\n\t};\n\t// ButtonHelper.setEnabled is @deprecated. Remove for 1.1+\n\tp.setEnabled = createjs.deprecate(p._setEnabled, \"ButtonHelper.setEnabled\");\n\n\t/**\n\t * Use the {{#crossLink \"ButtonHelper/enabled:property\"}}{{/crossLink}} property instead.\n\t * @method getEnabled\n\t * @protected\n\t * @return {Boolean}\n\t **/\n\tp._getEnabled = function() {\n\t\treturn this._enabled;\n\t};\n\t// ButtonHelper.getEnabled is @deprecated. Remove for 1.1+\n\tp.getEnabled = createjs.deprecate(p._getEnabled, \"ButtonHelper.getEnabled\");\n\n\t/**\n\t * Enables or disables the button functionality on the target.\n\t * @property enabled\n\t * @type {Boolean}\n\t **/\n\ttry {\n\t\tObject.defineProperties(p, {\n\t\t\tenabled: { get: p._getEnabled, set: p._setEnabled }\n\t\t});\n\t} catch (e) {} // TODO: use Log\n\n\n// public methods:\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t **/\n\tp.toString = function() {\n\t\treturn \"[ButtonHelper]\";\n\t};\n\n\n// private methods:\n\t/**\n\t * @method handleEvent\n\t * @param {Object} evt The mouse event to handle.\n\t * @protected\n\t **/\n\tp.handleEvent = function(evt) {\n\t\tvar label, t = this.target, type = evt.type;\n\t\tif (type == \"mousedown\") {\n\t\t\tthis._isPressed = true;\n\t\t\tlabel = this.downLabel;\n\t\t} else if (type == \"pressup\") {\n\t\t\tthis._isPressed = false;\n\t\t\tlabel = this._isOver ? this.overLabel : this.outLabel;\n\t\t} else if (type == \"rollover\") {\n\t\t\tthis._isOver = true;\n\t\t\tlabel = this._isPressed ? this.downLabel : this.overLabel;\n\t\t} else { // rollout and default\n\t\t\tthis._isOver = false;\n\t\t\tlabel = this._isPressed ? this.overLabel : this.outLabel;\n\t\t}\n\t\tif (this.play) {\n\t\t\tt.gotoAndPlay&&t.gotoAndPlay(label);\n\t\t} else {\n\t\t\tt.gotoAndStop&&t.gotoAndStop(label);\n\t\t}\n\t};\n\t\n\t/**\n\t * Injected into target. Preserves the paused state through a reset.\n\t * @method _reset\n\t * @protected\n\t **/\n\tp._reset = function() {\n\t\t// TODO: explore better ways to handle this issue. This is hacky & disrupts object signatures.\n\t\tvar p = this.paused;\n\t\tthis.__reset();\n\t\tthis.paused = p;\n\t};\n\n\n\tcreatejs.ButtonHelper = ButtonHelper;\n}());\n\n//##############################################################################\n// Shadow.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * This class encapsulates the properties required to define a shadow to apply to a {{#crossLink \"DisplayObject\"}}{{/crossLink}}\n\t * via its shadow property.\n\t *\n\t *

Example

\n\t *\n\t * myImage.shadow = new createjs.Shadow(\"#000000\", 5, 5, 10);\n\t *\n\t * @class Shadow\n\t * @constructor\n\t * @param {String} color The color of the shadow. This can be any valid CSS color value.\n\t * @param {Number} offsetX The x offset of the shadow in pixels.\n\t * @param {Number} offsetY The y offset of the shadow in pixels.\n\t * @param {Number} blur The size of the blurring effect.\n\t **/\n\tfunction Shadow(color, offsetX, offsetY, blur) {\n\t\t\n\t\t\n\t// public properties:\n\t\t/** \n\t\t * The color of the shadow. This can be any valid CSS color value.\n\t\t * @property color\n\t\t * @type String\n\t\t * @default null\n\t\t */\n\t\tthis.color = color||\"black\";\n\t\n\t\t/** The x offset of the shadow.\n\t\t * @property offsetX\n\t\t * @type Number\n\t\t * @default 0\n\t\t */\n\t\tthis.offsetX = offsetX||0;\n\t\n\t\t/** The y offset of the shadow.\n\t\t * @property offsetY\n\t\t * @type Number\n\t\t * @default 0\n\t\t */\n\t\tthis.offsetY = offsetY||0;\n\t\n\t\t/** The blur of the shadow.\n\t\t * @property blur\n\t\t * @type Number\n\t\t * @default 0\n\t\t */\n\t\tthis.blur = blur||0;\n\t}\n\tvar p = Shadow.prototype;\n\n// static public properties:\n\t/**\n\t * An identity shadow object (all properties are set to 0).\n\t * @property identity\n\t * @type Shadow\n\t * @static\n\t * @final\n\t * @readonly\n\t **/\n\tShadow.identity = new Shadow(\"transparent\", 0, 0, 0);\n\n\n// public methods:\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t **/\n\tp.toString = function() {\n\t\treturn \"[Shadow]\";\n\t};\n\n\t/**\n\t * Returns a clone of this Shadow instance.\n\t * @method clone\n\t * @return {Shadow} A clone of the current Shadow instance.\n\t **/\n\tp.clone = function() {\n\t\treturn new Shadow(this.color, this.offsetX, this.offsetY, this.blur);\n\t};\n\t\n\n\tcreatejs.Shadow = Shadow;\n}());\n\n//##############################################################################\n// SpriteSheet.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * Encapsulates the properties and methods associated with a sprite sheet. A sprite sheet is a series of images (usually\n\t * animation frames) combined into a larger image (or images). For example, an animation consisting of eight 100x100\n\t * images could be combined into a single 400x200 sprite sheet (4 frames across by 2 high).\n\t *\n\t * The data passed to the SpriteSheet constructor defines:\n\t *

The source image or images to use.
The positions of individual image frames.
Sequences of frames that form named animations. Optional.
The target playback framerate. Optional.

\n\t *

SpriteSheet Format

\n\t * SpriteSheets are an object with two required properties (`images` and `frames`), and two optional properties\n\t * (`framerate` and `animations`). This makes them easy to define in javascript code, or in JSON.\n\t *\n\t *

images

\n\t * An array of source images. Images can be either an HTMlimage\n\t * instance, or a uri to an image. The former is recommended to control preloading.\n\t *\n\t * \timages: [image1, \"path/to/image2.png\"],\n\t *\n\t *

frames

\n\t * Defines the individual frames. There are two supported formats for frame data:\n\t * When all of the frames are the same size (in a grid), use an object with `width`, `height`, `regX`, `regY`,\n\t * and `count` properties.\n\t *\n\t *

`width` & `height` are required and specify the dimensions of the frames
`regX` & `regY` indicate the registration point or \"origin\" of the frames
`spacing` indicate the spacing between frames
`margin` specify the margin around the image(s)
`count` allows you to specify the total number of frames in the spritesheet; if omitted, this will\n\t * be calculated based on the dimensions of the source images and the frames. Frames will be assigned\n\t * indexes based on their position in the source images (left to right, top to bottom).

\n\t *\n\t * \tframes: {width:64, height:64, count:20, regX: 32, regY:64, spacing:0, margin:0}\n\t *\n\t * If the frames are of different sizes, use an array of frame definitions. Each definition is itself an array\n\t * with 4 required and 3 optional entries, in the order:\n\t *\n\t *

The first four, `x`, `y`, `width`, and `height` are required and define the frame rectangle.
The fifth, `imageIndex`, specifies the index of the source image (defaults to 0)
The last two, `regX` and `regY` specify the registration point of the frame

\n\t *\n\t * \tframes: [\n\t * \t\t// x, y, width, height, imageIndex*, regX*, regY*\n\t * \t\t[64, 0, 96, 64],\n\t * \t\t[0, 0, 64, 64, 1, 32, 32]\n\t * \t\t// etc.\n\t * \t]\n\t *\n\t *

animations

\n\t * Optional. An object defining sequences of frames to play as named animations. Each property corresponds to an\n\t * animation of the same name. Each animation must specify the frames to play, and may\n\t * also include a relative playback `speed` (ex. 2 would playback at double speed, 0.5 at half), and\n\t * the name of the `next` animation to sequence to after it completes.\n\t *\n\t * There are three formats supported for defining the frames in an animation, which can be mixed and matched as appropriate:\n\t *

for a single frame animation, you can simply specify the frame index\n\t *\n\t * \t\tanimations: {\n\t * \t\t\tsit: 7\n\t * \t\t}\n\t *\n\t *
\n\t * for an animation of consecutive frames, you can use an array with two required, and two optional entries\n\t * \t\tin the order: `start`, `end`, `next`, and `speed`. This will play the frames from start to end inclusive.\n\t *\n\t * \t\tanimations: {\n\t * \t\t\t// start, end, next*, speed*\n\t * \t\t\trun: [0, 8],\n\t * \t\t\tjump: [9, 12, \"run\", 2]\n\t * \t\t}\n\t *\n\t *
\n\t * for non-consecutive frames, you can use an object with a `frames` property defining an array of frame\n\t * indexes to play in order. The object can also specify `next` and `speed` properties.\n\t *\n\t * \t\tanimations: {\n\t * \t\t\twalk: {\n\t * \t\t\t\tframes: [1,2,3,3,2,1]\n\t * \t\t\t},\n\t * \t\t\tshoot: {\n\t * \t\t\t\tframes: [1,4,5,6],\n\t * \t\t\t\tnext: \"walk\",\n\t * \t\t\t\tspeed: 0.5\n\t * \t\t\t}\n\t * \t\t}\n\t *\n\t *

\n\t * Note: the `speed` property was added in EaselJS 0.7.0. Earlier versions had a `frequency`\n\t * property instead, which was the inverse of `speed`. For example, a value of \"4\" would be 1/4 normal speed in\n\t * earlier versions, but is 4x normal speed in EaselJS 0.7.0+.\n\t *\n\t *

framerate

\n\t * Optional. Indicates the default framerate to play this spritesheet at in frames per second. See\n\t * {{#crossLink \"SpriteSheet/framerate:property\"}}{{/crossLink}} for more information.\n\t *\n\t * \t\tframerate: 20\n\t *\n\t * Note that the Sprite framerate will only work if the stage update method is provided with the {{#crossLink \"Ticker/tick:event\"}}{{/crossLink}}\n\t * event generated by the {{#crossLink \"Ticker\"}}{{/crossLink}}.\n\t *\n\t * \t\tcreatejs.Ticker.on(\"tick\", handleTick);\n\t * \t\tfunction handleTick(event) {\n\t *\t\t\tstage.update(event);\n\t *\t\t}\n\t *\n\t *

Example

\n\t * To define a simple sprite sheet, with a single image \"sprites.jpg\" arranged in a regular 50x50 grid with three\n\t * animations: \"stand\" showing the first frame, \"run\" looping frame 1-5 inclusive, and \"jump\" playing frame 6-8 and\n\t * sequencing back to run.\n\t *\n\t * \t\tvar data = {\n\t * \t\t\timages: [\"sprites.jpg\"],\n\t * \t\t\tframes: {width:50, height:50},\n\t * \t\t\tanimations: {\n\t * \t\t\t\tstand:0,\n\t * \t\t\t\trun:[1,5],\n\t * \t\t\t\tjump:[6,8,\"run\"]\n\t * \t\t\t}\n\t * \t\t};\n\t * \t\tvar spriteSheet = new createjs.SpriteSheet(data);\n\t * \t\tvar animation = new createjs.Sprite(spriteSheet, \"run\");\n\t *\n\t *

Generating SpriteSheet Images

\n\t * Spritesheets can be created manually by combining images in PhotoShop, and specifying the frame size or\n\t * coordinates manually, however there are a number of tools that facilitate this.\n\t *

Exporting SpriteSheets or HTML5 content from Adobe Flash/Animate supports the EaselJS SpriteSheet format.
The popular Texture Packer has\n\t * EaselJS support.\n\t *
SWF animations in Adobe Flash/Animate can be exported to SpriteSheets using Zoë

\n\t *\n\t *

Cross Origin Issues

\n\t * Warning: Images loaded cross-origin will throw cross-origin security errors when interacted with\n\t * using:\n\t *

a mouse
methods such as {{#crossLink \"Container/getObjectUnderPoint\"}}{{/crossLink}}
Filters (see {{#crossLink \"Filter\"}}{{/crossLink}})
caching (see {{#crossLink \"DisplayObject/cache\"}}{{/crossLink}})

\n\t * You can get around this by setting `crossOrigin` property on your images before passing them to EaselJS, or\n\t * setting the `crossOrigin` property on PreloadJS' LoadQueue or LoadItems.\n\t *\n\t * \t\tvar image = new Image();\n\t * \t\timg.crossOrigin=\"Anonymous\";\n\t * \t\timg.src = \"http://server-with-CORS-support.com/path/to/image.jpg\";\n\t *\n\t * If you pass string paths to SpriteSheets, they will not work cross-origin. The server that stores the image must\n\t * support cross-origin requests, or this will not work. For more information, check out\n\t * CORS overview on MDN.\n\t *\n\t * @class SpriteSheet\n\t * @constructor\n\t * @param {Object} data An object describing the SpriteSheet data.\n\t * @extends EventDispatcher\n\t **/\n\tfunction SpriteSheet(data) {\n\t\tthis.EventDispatcher_constructor();\n\n\n\t\t// public properties:\n\t\t/**\n\t\t * Indicates whether all images are finished loading.\n\t\t * @property complete\n\t\t * @type Boolean\n\t\t * @readonly\n\t\t **/\n\t\tthis.complete = true;\n\n\t\t/**\n\t\t * Specifies the framerate to use by default for Sprite instances using the SpriteSheet. See the Sprite class\n\t\t * {{#crossLink \"Sprite/framerate:property\"}}{{/crossLink}} for more information.\n\t\t * @property framerate\n\t\t * @type Number\n\t\t **/\n\t\tthis.framerate = 0;\n\n\n\t\t// private properties:\n\t\t/**\n\t\t * @property _animations\n\t\t * @protected\n\t\t * @type Array\n\t\t **/\n\t\tthis._animations = null;\n\n\t\t/**\n\t\t * @property _frames\n\t\t * @protected\n\t\t * @type Array\n\t\t **/\n\t\tthis._frames = null;\n\n\t\t/**\n\t\t * @property _images\n\t\t * @protected\n\t\t * @type Array\n\t\t **/\n\t\tthis._images = null;\n\n\t\t/**\n\t\t * @property _data\n\t\t * @protected\n\t\t * @type Object\n\t\t **/\n\t\tthis._data = null;\n\n\t\t/**\n\t\t * @property _loadCount\n\t\t * @protected\n\t\t * @type Number\n\t\t **/\n\t\tthis._loadCount = 0;\n\n\t\t// only used for simple frame defs:\n\t\t/**\n\t\t * @property _frameHeight\n\t\t * @protected\n\t\t * @type Number\n\t\t **/\n\t\tthis._frameHeight = 0;\n\n\t\t/**\n\t\t * @property _frameWidth\n\t\t * @protected\n\t\t * @type Number\n\t\t **/\n\t\tthis._frameWidth = 0;\n\n\t\t/**\n\t\t * @property _numFrames\n\t\t * @protected\n\t\t * @type Number\n\t\t **/\n\t\tthis._numFrames = 0;\n\n\t\t/**\n\t\t * @property _regX\n\t\t * @protected\n\t\t * @type Number\n\t\t **/\n\t\tthis._regX = 0;\n\n\t\t/**\n\t\t * @property _regY\n\t\t * @protected\n\t\t * @type Number\n\t\t **/\n\t\tthis._regY = 0;\n\n\t\t/**\n\t\t * @property _spacing\n\t\t * @protected\n\t\t * @type Number\n\t\t **/\n\t\tthis._spacing = 0;\n\n\t\t/**\n\t\t * @property _margin\n\t\t * @protected\n\t\t * @type Number\n\t\t **/\n\t\tthis._margin = 0;\n\n\t\t// setup:\n\t\tthis._parseData(data);\n\t}\n\tvar p = createjs.extend(SpriteSheet, createjs.EventDispatcher);\n\n\t// TODO: deprecated\n\t// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.\n\n\n// events:\n\t/**\n\t * Dispatched when all images are loaded. Note that this only fires if the images\n\t * were not fully loaded when the sprite sheet was initialized. You should check the complete property\n\t * to prior to adding a listener. Ex.\n\t *\n\t * \tvar sheet = new createjs.SpriteSheet(data);\n\t * \tif (!sheet.complete) {\n\t * \t\t// not preloaded, listen for the complete event:\n\t * \t\tsheet.addEventListener(\"complete\", handler);\n\t * \t}\n\t *\n\t * @event complete\n\t * @param {Object} target The object that dispatched the event.\n\t * @param {String} type The event type.\n\t * @since 0.6.0\n\t */\n\n\t/**\n\t * Dispatched when getFrame is called with a valid frame index. This is primarily intended for use by {{#crossLink \"SpriteSheetBuilder\"}}{{/crossLink}}\n\t * when doing on-demand rendering.\n\t * @event getframe\n\t * @param {Number} index The frame index.\n\t * @param {Object} frame The frame object that getFrame will return.\n\t */\n\n\t/**\n\t * Dispatched when an image encounters an error. A SpriteSheet will dispatch an error event for each image that\n\t * encounters an error, and will still dispatch a {{#crossLink \"SpriteSheet/complete:event\"}}{{/crossLink}}\n\t * event once all images are finished processing, even if an error is encountered.\n\t * @event error\n\t * @param {String} src The source of the image that failed to load.\n\t * @since 0.8.2\n\t */\n\n\n// getter / setters:\n\t/**\n\t * Use the {{#crossLink \"SpriteSheet/animations:property\"}}{{/crossLink}} property instead.\n\t * @method _getAnimations\n\t * @protected\n\t * @return {Array}\n\t **/\n\tp._getAnimations = function() {\n\t\treturn this._animations.slice();\n\t};\n\t// SpriteSheet.getAnimations is @deprecated. Remove for 1.1+\n\tp.getAnimations = createjs.deprecate(p._getAnimations, \"SpriteSheet.getAnimations\");\n\n\t/**\n\t * Returns an array of all available animation names available on this sprite sheet as strings.\n\t * @property animations\n\t * @type {Array}\n\t * @readonly\n\t **/\n\ttry {\n\t\tObject.defineProperties(p, {\n\t\t\tanimations: { get: p._getAnimations }\n\t\t});\n\t} catch (e) {}\n\n\n// public methods:\n\t/**\n\t * Returns the total number of frames in the specified animation, or in the whole sprite\n\t * sheet if the animation param is omitted. Returns 0 if the spritesheet relies on calculated frame counts, and\n\t * the images have not been fully loaded.\n\t * @method getNumFrames\n\t * @param {String} animation The name of the animation to get a frame count for.\n\t * @return {Number} The number of frames in the animation, or in the entire sprite sheet if the animation param is omitted.\n\t */\n\tp.getNumFrames = function(animation) {\n\t\tif (animation == null) {\n\t\t\treturn this._frames ? this._frames.length : this._numFrames || 0;\n\t\t} else {\n\t\t\tvar data = this._data[animation];\n\t\t\tif (data == null) { return 0; }\n\t\t\telse { return data.frames.length; }\n\t\t}\n\t};\n\n\t/**\n\t * Returns an object defining the specified animation. The returned object contains:

frames: an array of the frame ids in the animation
speed: the playback speed for this animation
name: the name of the animation
next: the default animation to play next. If the animation loops, the name and next property will be the\n\t * \tsame.

\n\t * @method getAnimation\n\t * @param {String} name The name of the animation to get.\n\t * @return {Object} a generic object with frames, speed, name, and next properties.\n\t **/\n\tp.getAnimation = function(name) {\n\t\treturn this._data[name];\n\t};\n\n\t/**\n\t * Returns an object specifying the image and source rect of the specified frame. The returned object has:

an image property holding a reference to the image object in which the frame is found
a rect property containing a Rectangle instance which defines the boundaries for the frame within that\n\t * \timage.
A regX and regY property corresponding to the regX/Y values for the frame.\n\t *

\n\t * @method getFrame\n\t * @param {Number} frameIndex The index of the frame.\n\t * @return {Object} a generic object with image and rect properties. Returns null if the frame does not exist.\n\t **/\n\tp.getFrame = function(frameIndex) {\n\t\tvar frame;\n\t\tif (this._frames && (frame=this._frames[frameIndex])) { return frame; }\n\t\treturn null;\n\t};\n\n\t/**\n\t * Returns a {{#crossLink \"Rectangle\"}}{{/crossLink}} instance defining the bounds of the specified frame relative\n\t * to the origin. For example, a 90 x 70 frame with a regX of 50 and a regY of 40 would return:\n\t *\n\t * \t[x=-50, y=-40, width=90, height=70]\n\t *\n\t * @method getFrameBounds\n\t * @param {Number} frameIndex The index of the frame.\n\t * @param {Rectangle} [rectangle] A Rectangle instance to copy the values into. By default a new instance is created.\n\t * @return {Rectangle} A Rectangle instance. Returns null if the frame does not exist, or the image is not fully loaded.\n\t **/\n\tp.getFrameBounds = function(frameIndex, rectangle) {\n\t\tvar frame = this.getFrame(frameIndex);\n\t\treturn frame ? (rectangle||new createjs.Rectangle()).setValues(-frame.regX, -frame.regY, frame.rect.width, frame.rect.height) : null;\n\t};\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t **/\n\tp.toString = function() {\n\t\treturn \"[SpriteSheet]\";\n\t};\n\n\t/**\n\t * SpriteSheet cannot be cloned. A SpriteSheet can be shared by multiple Sprite instances without cloning it.\n\t * @method clone\n\t **/\n\tp.clone = function() {\n\t\tthrow(\"SpriteSheet cannot be cloned.\")\n\t};\n\n// private methods:\n\t/**\n\t * @method _parseData\n\t * @param {Object} data An object describing the SpriteSheet data.\n\t * @protected\n\t **/\n\tp._parseData = function(data) {\n\t\tvar i,l,o,a;\n\t\tif (data == null) { return; }\n\n\t\tthis.framerate = data.framerate||0;\n\n\t\t// parse images:\n\t\tif (data.images && (l=data.images.length) > 0) {\n\t\t\ta = this._images = [];\n\t\t\tfor (i=0; i= maxFrames) { break imgLoop; }\n\t\t\t\t\tframeCount++;\n\t\t\t\t\tthis._frames.push({\n\t\t\t\t\t\t\timage: img,\n\t\t\t\t\t\t\trect: new createjs.Rectangle(x, y, frameWidth, frameHeight),\n\t\t\t\t\t\t\tregX: this._regX,\n\t\t\t\t\t\t\tregY: this._regY\n\t\t\t\t\t\t});\n\t\t\t\t\tx += frameWidth+spacing;\n\t\t\t\t}\n\t\t\t\ty += frameHeight+spacing;\n\t\t\t}\n\t\t}\n\t\tthis._numFrames = frameCount;\n\t};\n\n\n\tcreatejs.SpriteSheet = createjs.promote(SpriteSheet, \"EventDispatcher\");\n}());\n\n//##############################################################################\n// Graphics.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * The Graphics class exposes an easy to use API for generating vector drawing instructions and drawing them to a\n\t * specified context. Note that you can use Graphics without any dependency on the EaselJS framework by calling {{#crossLink \"Graphics/draw\"}}{{/crossLink}}\n\t * directly, or it can be used with the {{#crossLink \"Shape\"}}{{/crossLink}} object to draw vector graphics within the\n\t * context of an EaselJS display list.\n\t *\n\t * There are two approaches to working with Graphics object: calling methods on a Graphics instance (the \"Graphics API\"), or\n\t * instantiating Graphics command objects and adding them to the graphics queue via {{#crossLink \"Graphics/append\"}}{{/crossLink}}.\n\t * The former abstracts the latter, simplifying beginning and ending paths, fills, and strokes.\n\t *\n\t * var g = new createjs.Graphics();\n\t * g.setStrokeStyle(1);\n\t * g.beginStroke(\"#000000\");\n\t * g.beginFill(\"red\");\n\t * g.drawCircle(0,0,30);\n\t *\n\t * All drawing methods in Graphics return the Graphics instance, so they can be chained together. For example,\n\t * the following line of code would generate the instructions to draw a rectangle with a red stroke and blue fill:\n\t *\n\t * myGraphics.beginStroke(\"red\").beginFill(\"blue\").drawRect(20, 20, 100, 50);\n\t *\n\t * Each graphics API call generates a command object (see below). The last command to be created can be accessed via\n\t * {{#crossLink \"Graphics/command:property\"}}{{/crossLink}}:\n\t *\n\t * var fillCommand = myGraphics.beginFill(\"red\").command;\n\t * // ... later, update the fill style/color:\n\t * fillCommand.style = \"blue\";\n\t * // or change it to a bitmap fill:\n\t * fillCommand.bitmap(myImage);\n\t *\n\t * For more direct control of rendering, you can instantiate and append command objects to the graphics queue directly. In this case, you\n\t * need to manage path creation manually, and ensure that fill/stroke is applied to a defined path:\n\t *\n\t * // start a new path. Graphics.beginCmd is a reusable BeginPath instance:\n\t * myGraphics.append(createjs.Graphics.beginCmd);\n\t * // we need to define the path before applying the fill:\n\t * var circle = new createjs.Graphics.Circle(0,0,30);\n\t * myGraphics.append(circle);\n\t * // fill the path we just defined:\n\t * var fill = new createjs.Graphics.Fill(\"red\");\n\t * myGraphics.append(fill);\n\t *\n\t * These approaches can be used together, for example to insert a custom command:\n\t *\n\t * myGraphics.beginFill(\"red\");\n\t * var customCommand = new CustomSpiralCommand(etc);\n\t * myGraphics.append(customCommand);\n\t * myGraphics.beginFill(\"blue\");\n\t * myGraphics.drawCircle(0, 0, 30);\n\t *\n\t * See {{#crossLink \"Graphics/append\"}}{{/crossLink}} for more info on creating custom commands.\n\t *\n\t *

Tiny API

\n\t * The Graphics class also includes a \"tiny API\", which is one or two-letter methods that are shortcuts for all of the\n\t * Graphics methods. These methods are great for creating compact instructions, and is used by the Toolkit for CreateJS\n\t * to generate readable code. All tiny methods are marked as protected, so you can view them by enabling protected\n\t * descriptions in the docs.\n\t *\n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t * \n\t *

Tiny	Method	Tiny	Method
mt	{{#crossLink \"Graphics/moveTo\"}}{{/crossLink}}	lt	{{#crossLink \"Graphics/lineTo\"}}{{/crossLink}}
a/at	{{#crossLink \"Graphics/arc\"}}{{/crossLink}} / {{#crossLink \"Graphics/arcTo\"}}{{/crossLink}}	bt	{{#crossLink \"Graphics/bezierCurveTo\"}}{{/crossLink}}
qt	{{#crossLink \"Graphics/quadraticCurveTo\"}}{{/crossLink}} (also curveTo)	r	{{#crossLink \"Graphics/rect\"}}{{/crossLink}}
cp	{{#crossLink \"Graphics/closePath\"}}{{/crossLink}}	c	{{#crossLink \"Graphics/clear\"}}{{/crossLink}}
f	{{#crossLink \"Graphics/beginFill\"}}{{/crossLink}}	lf	{{#crossLink \"Graphics/beginLinearGradientFill\"}}{{/crossLink}}
rf	{{#crossLink \"Graphics/beginRadialGradientFill\"}}{{/crossLink}}	bf	{{#crossLink \"Graphics/beginBitmapFill\"}}{{/crossLink}}
ef	{{#crossLink \"Graphics/endFill\"}}{{/crossLink}}	ss / sd	{{#crossLink \"Graphics/setStrokeStyle\"}}{{/crossLink}} / {{#crossLink \"Graphics/setStrokeDash\"}}{{/crossLink}}
s	{{#crossLink \"Graphics/beginStroke\"}}{{/crossLink}}	ls	{{#crossLink \"Graphics/beginLinearGradientStroke\"}}{{/crossLink}}
rs	{{#crossLink \"Graphics/beginRadialGradientStroke\"}}{{/crossLink}}	bs	{{#crossLink \"Graphics/beginBitmapStroke\"}}{{/crossLink}}
es	{{#crossLink \"Graphics/endStroke\"}}{{/crossLink}}	dr	{{#crossLink \"Graphics/drawRect\"}}{{/crossLink}}
rr	{{#crossLink \"Graphics/drawRoundRect\"}}{{/crossLink}}	rc	{{#crossLink \"Graphics/drawRoundRectComplex\"}}{{/crossLink}}
dc	{{#crossLink \"Graphics/drawCircle\"}}{{/crossLink}}	de	{{#crossLink \"Graphics/drawEllipse\"}}{{/crossLink}}
dp	{{#crossLink \"Graphics/drawPolyStar\"}}{{/crossLink}}	p	{{#crossLink \"Graphics/decodePath\"}}{{/crossLink}}

\n\t *\n\t * Here is the above example, using the tiny API instead.\n\t *\n\t * myGraphics.s(\"red\").f(\"blue\").r(20, 20, 100, 50);\n\t *\n\t * @class Graphics\n\t * @constructor\n\t **/\n\tfunction Graphics() {\n\n\n\t// public properties\n\t\t/**\n\t\t * Holds a reference to the last command that was created or appended. For example, you could retain a reference\n\t\t * to a Fill command in order to dynamically update the color later by using:\n\t\t *\n\t\t * \t\tvar myFill = myGraphics.beginFill(\"red\").command;\n\t\t * \t\t// update color later:\n\t\t * \t\tmyFill.style = \"yellow\";\n\t\t *\n\t\t * @property command\n\t\t * @type Object\n\t\t **/\n\t\tthis.command = null;\n\n\n\t// private properties\n\t\t/**\n\t\t * @property _stroke\n\t\t * @protected\n\t\t * @type {Stroke}\n\t\t **/\n\t\tthis._stroke = null;\n\n\t\t/**\n\t\t * @property _strokeStyle\n\t\t * @protected\n\t\t * @type {StrokeStyle}\n\t\t **/\n\t\tthis._strokeStyle = null;\n\t\t\n\t\t/**\n\t\t * @property _oldStrokeStyle\n\t\t * @protected\n\t\t * @type {StrokeStyle}\n\t\t **/\n\t\tthis._oldStrokeStyle = null;\n\t\t\n\t\t/**\n\t\t * @property _strokeDash\n\t\t * @protected\n\t\t * @type {StrokeDash}\n\t\t **/\n\t\tthis._strokeDash = null;\n\t\t\n\t\t/**\n\t\t * @property _oldStrokeDash\n\t\t * @protected\n\t\t * @type {StrokeDash}\n\t\t **/\n\t\tthis._oldStrokeDash = null;\n\n\t\t/**\n\t\t * @property _strokeIgnoreScale\n\t\t * @protected\n\t\t * @type Boolean\n\t\t **/\n\t\tthis._strokeIgnoreScale = false;\n\n\t\t/**\n\t\t * @property _fill\n\t\t * @protected\n\t\t * @type {Fill}\n\t\t **/\n\t\tthis._fill = null;\n\n\t\t/**\n\t\t * @property _instructions\n\t\t * @protected\n\t\t * @type {Array}\n\t\t **/\n\t\tthis._instructions = [];\n\n\t\t/**\n\t\t * Indicates the last instruction index that was committed.\n\t\t * @property _commitIndex\n\t\t * @protected\n\t\t * @type {Number}\n\t\t **/\n\t\tthis._commitIndex = 0;\n\n\t\t/**\n\t\t * Uncommitted instructions.\n\t\t * @property _activeInstructions\n\t\t * @protected\n\t\t * @type {Array}\n\t\t **/\n\t\tthis._activeInstructions = [];\n\n\t\t/**\n\t\t * This indicates that there have been changes to the activeInstruction list since the last updateInstructions call.\n\t\t * @property _dirty\n\t\t * @protected\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t **/\n\t\tthis._dirty = false;\n\n\t\t/**\n\t\t * Index to draw from if a store operation has happened.\n\t\t * @property _storeIndex\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis._storeIndex = 0;\n\n\t// setup:\n\t\tthis.clear();\n\t}\n\tvar p = Graphics.prototype;\n\tvar G = Graphics; // shortcut\n\n// static public methods:\n\t/**\n\t * Returns a CSS compatible color string based on the specified RGB numeric color values in the format\n\t * \"rgba(255,255,255,1.0)\", or if alpha is null then in the format \"rgb(255,255,255)\". For example,\n\t *\n\t * createjs.Graphics.getRGB(50, 100, 150, 0.5);\n\t * // Returns \"rgba(50,100,150,0.5)\"\n\t *\n\t * It also supports passing a single hex color value as the first param, and an optional alpha value as the second\n\t * param. For example,\n\t *\n\t * createjs.Graphics.getRGB(0xFF00FF, 0.2);\n\t * // Returns \"rgba(255,0,255,0.2)\"\n\t *\n\t * @method getRGB\n\t * @static\n\t * @param {Number} r The red component for the color, between 0 and 0xFF (255).\n\t * @param {Number} g The green component for the color, between 0 and 0xFF (255).\n\t * @param {Number} b The blue component for the color, between 0 and 0xFF (255).\n\t * @param {Number} [alpha] The alpha component for the color where 0 is fully transparent and 1 is fully opaque.\n\t * @return {String} A CSS compatible color string based on the specified RGB numeric color values in the format\n\t * \"rgba(255,255,255,1.0)\", or if alpha is null then in the format \"rgb(255,255,255)\".\n\t **/\n\tGraphics.getRGB = function(r, g, b, alpha) {\n\t\tif (r != null && b == null) {\n\t\t\talpha = g;\n\t\t\tb = r&0xFF;\n\t\t\tg = r>>8&0xFF;\n\t\t\tr = r>>16&0xFF;\n\t\t}\n\t\tif (alpha == null) {\n\t\t\treturn \"rgb(\"+r+\",\"+g+\",\"+b+\")\";\n\t\t} else {\n\t\t\treturn \"rgba(\"+r+\",\"+g+\",\"+b+\",\"+alpha+\")\";\n\t\t}\n\t};\n\n\t/**\n\t * Returns a CSS compatible color string based on the specified HSL numeric color values in the format \"hsla(360,100,100,1.0)\",\n\t * or if alpha is null then in the format \"hsl(360,100,100)\".\n\t *\n\t * createjs.Graphics.getHSL(150, 100, 70);\n\t * // Returns \"hsl(150,100,70)\"\n\t *\n\t * @method getHSL\n\t * @static\n\t * @param {Number} hue The hue component for the color, between 0 and 360.\n\t * @param {Number} saturation The saturation component for the color, between 0 and 100.\n\t * @param {Number} lightness The lightness component for the color, between 0 and 100.\n\t * @param {Number} [alpha] The alpha component for the color where 0 is fully transparent and 1 is fully opaque.\n\t * @return {String} A CSS compatible color string based on the specified HSL numeric color values in the format\n\t * \"hsla(360,100,100,1.0)\", or if alpha is null then in the format \"hsl(360,100,100)\".\n\t **/\n\tGraphics.getHSL = function(hue, saturation, lightness, alpha) {\n\t\tif (alpha == null) {\n\t\t\treturn \"hsl(\"+(hue%360)+\",\"+saturation+\"%,\"+lightness+\"%)\";\n\t\t} else {\n\t\t\treturn \"hsla(\"+(hue%360)+\",\"+saturation+\"%,\"+lightness+\"%,\"+alpha+\")\";\n\t\t}\n\t};\n\n\n// static properties:\n\t/**\n\t * A reusable instance of {{#crossLink \"Graphics/BeginPath\"}}{{/crossLink}} to avoid\n\t * unnecessary instantiation.\n\t * @property beginCmd\n\t * @type {Graphics.BeginPath}\n\t * @static\n\t **/\n\t // defined at the bottom of this file.\n\n\t/**\n\t * Map of Base64 characters to values. Used by {{#crossLink \"Graphics/decodePath\"}}{{/crossLink}}.\n\t * @property BASE_64\n\t * @static\n\t * @final\n\t * @readonly\n\t * @type {Object}\n\t **/\n\tGraphics.BASE_64 = {\"A\":0,\"B\":1,\"C\":2,\"D\":3,\"E\":4,\"F\":5,\"G\":6,\"H\":7,\"I\":8,\"J\":9,\"K\":10,\"L\":11,\"M\":12,\"N\":13,\"O\":14,\"P\":15,\"Q\":16,\"R\":17,\"S\":18,\"T\":19,\"U\":20,\"V\":21,\"W\":22,\"X\":23,\"Y\":24,\"Z\":25,\"a\":26,\"b\":27,\"c\":28,\"d\":29,\"e\":30,\"f\":31,\"g\":32,\"h\":33,\"i\":34,\"j\":35,\"k\":36,\"l\":37,\"m\":38,\"n\":39,\"o\":40,\"p\":41,\"q\":42,\"r\":43,\"s\":44,\"t\":45,\"u\":46,\"v\":47,\"w\":48,\"x\":49,\"y\":50,\"z\":51,\"0\":52,\"1\":53,\"2\":54,\"3\":55,\"4\":56,\"5\":57,\"6\":58,\"7\":59,\"8\":60,\"9\":61,\"+\":62,\"/\":63};\n\n\t/**\n\t * Maps numeric values for the caps parameter of {{#crossLink \"Graphics/setStrokeStyle\"}}{{/crossLink}} to\n\t * corresponding string values. This is primarily for use with the tiny API. The mappings are as follows: 0 to\n\t * \"butt\", 1 to \"round\", and 2 to \"square\".\n\t * For example, to set the line caps to \"square\":\n\t *\n\t * myGraphics.ss(16, 2);\n\t *\n\t * @property STROKE_CAPS_MAP\n\t * @static\n\t * @final\n\t * @readonly\n\t * @type {Array}\n\t **/\n\tGraphics.STROKE_CAPS_MAP = [\"butt\", \"round\", \"square\"];\n\n\t/**\n\t * Maps numeric values for the joints parameter of {{#crossLink \"Graphics/setStrokeStyle\"}}{{/crossLink}} to\n\t * corresponding string values. This is primarily for use with the tiny API. The mappings are as follows: 0 to\n\t * \"miter\", 1 to \"round\", and 2 to \"bevel\".\n\t * For example, to set the line joints to \"bevel\":\n\t *\n\t * myGraphics.ss(16, 0, 2);\n\t *\n\t * @property STROKE_JOINTS_MAP\n\t * @static\n\t * @final\n\t * @readonly\n\t * @type {Array}\n\t **/\n\tGraphics.STROKE_JOINTS_MAP = [\"miter\", \"round\", \"bevel\"];\n\n\t/**\n\t * @property _ctx\n\t * @static\n\t * @protected\n\t * @type {CanvasRenderingContext2D}\n\t **/\n\tvar canvas = (createjs.createCanvas?createjs.createCanvas():document.createElement(\"canvas\"));\n\tif (canvas.getContext) {\n\t\tGraphics._ctx = canvas.getContext(\"2d\");\n\t\tcanvas.width = canvas.height = 1;\n\t}\n\n\n// getter / setters:\n\t/**\n\t * Use the {{#crossLink \"Graphics/instructions:property\"}}{{/crossLink}} property instead.\n\t * @method _getInstructions\n\t * @protected\n\t * @return {Array} The instructions array, useful for chaining\n\t **/\n\tp._getInstructions = function() {\n\t\tthis._updateInstructions();\n\t\treturn this._instructions;\n\t};\n\t// Graphics.getInstructions is @deprecated. Remove for 1.1+\n\tp.getInstructions = createjs.deprecate(p._getInstructions, \"Graphics.getInstructions\");\n\n\t/**\n\t * Returns the graphics instructions array. Each entry is a graphics command object (ex. Graphics.Fill, Graphics.Rect)\n\t * Modifying the returned array directly is not recommended, and is likely to result in unexpected behaviour.\n\t *\n\t * This property is mainly intended for introspection of the instructions (ex. for graphics export).\n\t * @property instructions\n\t * @type {Array}\n\t * @readonly\n\t **/\n\ttry {\n\t\tObject.defineProperties(p, {\n\t\t\tinstructions: { get: p._getInstructions }\n\t\t});\n\t} catch (e) {}\n\n\n// public methods:\n\t/**\n\t * Returns true if this Graphics instance has no drawing commands.\n\t * @method isEmpty\n\t * @return {Boolean} Returns true if this Graphics instance has no drawing commands.\n\t **/\n\tp.isEmpty = function() {\n\t\treturn !(this._instructions.length || this._activeInstructions.length);\n\t};\n\n\t/**\n\t * Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform.\n\t * Returns true if the draw was handled (useful for overriding functionality).\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method draw\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.\n\t * @param {Object} data Optional data that is passed to graphics command exec methods. When called from a Shape instance, the shape passes itself as the data parameter. This can be used by custom graphic commands to insert contextual data.\n\t **/\n\tp.draw = function(ctx, data) {\n\t\tthis._updateInstructions();\n\t\tvar instr = this._instructions;\n\t\tfor (var i=this._storeIndex, l=instr.length; iDisplayObject.mask to draw the clipping path, for example.\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method drawAsPath\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.\n\t **/\n\tp.drawAsPath = function(ctx) {\n\t\tthis._updateInstructions();\n\t\tvar instr, instrs = this._instructions;\n\t\tfor (var i=this._storeIndex, l=instrs.length; i\n\t * whatwg spec.\n\t * @method lineTo\n\t * @param {Number} x The x coordinate the drawing point should draw to.\n\t * @param {Number} y The y coordinate the drawing point should draw to.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.lineTo = function(x, y) {\n\t\treturn this.append(new G.LineTo(x,y));\n\t};\n\n\t/**\n\t * Draws an arc with the specified control points and radius. For detailed information, read the\n\t * \n\t * whatwg spec. A tiny API method \"at\" also exists.\n\t * @method arcTo\n\t * @param {Number} x1\n\t * @param {Number} y1\n\t * @param {Number} x2\n\t * @param {Number} y2\n\t * @param {Number} radius\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.arcTo = function(x1, y1, x2, y2, radius) {\n\t\treturn this.append(new G.ArcTo(x1, y1, x2, y2, radius));\n\t};\n\n\t/**\n\t * Draws an arc defined by the radius, startAngle and endAngle arguments, centered at the position (x, y). For\n\t * example, to draw a full circle with a radius of 20 centered at (100, 100):\n\t *\n\t * arc(100, 100, 20, 0, Math.PI*2);\n\t *\n\t * For detailed information, read the\n\t * whatwg spec.\n\t * A tiny API method \"a\" also exists.\n\t * @method arc\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} radius\n\t * @param {Number} startAngle Measured in radians.\n\t * @param {Number} endAngle Measured in radians.\n\t * @param {Boolean} anticlockwise\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.arc = function(x, y, radius, startAngle, endAngle, anticlockwise) {\n\t\treturn this.append(new G.Arc(x, y, radius, startAngle, endAngle, anticlockwise));\n\t};\n\n\t/**\n\t * Draws a quadratic curve from the current drawing point to (x, y) using the control point (cpx, cpy). For detailed\n\t * information, read the \n\t * whatwg spec. A tiny API method \"qt\" also exists.\n\t * @method quadraticCurveTo\n\t * @param {Number} cpx\n\t * @param {Number} cpy\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.quadraticCurveTo = function(cpx, cpy, x, y) {\n\t\treturn this.append(new G.QuadraticCurveTo(cpx, cpy, x, y));\n\t};\n\n\t/**\n\t * Draws a bezier curve from the current drawing point to (x, y) using the control points (cp1x, cp1y) and (cp2x,\n\t * cp2y). For detailed information, read the\n\t * \n\t * whatwg spec. A tiny API method \"bt\" also exists.\n\t * @method bezierCurveTo\n\t * @param {Number} cp1x\n\t * @param {Number} cp1y\n\t * @param {Number} cp2x\n\t * @param {Number} cp2y\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.bezierCurveTo = function(cp1x, cp1y, cp2x, cp2y, x, y) {\n\t\treturn this.append(new G.BezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y));\n\t};\n\n\t/**\n\t * Draws a rectangle at (x, y) with the specified width and height using the current fill and/or stroke.\n\t * For detailed information, read the\n\t * \n\t * whatwg spec. A tiny API method \"r\" also exists.\n\t * @method rect\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} w Width of the rectangle\n\t * @param {Number} h Height of the rectangle\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.rect = function(x, y, w, h) {\n\t\treturn this.append(new G.Rect(x, y, w, h));\n\t};\n\n\t/**\n\t * Closes the current path, effectively drawing a line from the current drawing point to the first drawing point specified\n\t * since the fill or stroke was last set. A tiny API method \"cp\" also exists.\n\t * @method closePath\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.closePath = function() {\n\t\treturn this._activeInstructions.length ? this.append(new G.ClosePath()) : this;\n\t};\n\n\n// public methods that roughly map to Adobe Flash/Animate graphics APIs:\n\t/**\n\t * Clears all drawing instructions, effectively resetting this Graphics instance. Any line and fill styles will need\n\t * to be redefined to draw shapes following a clear call. A tiny API method \"c\" also exists.\n\t * @method clear\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.clear = function() {\n\t\tthis._instructions.length = this._activeInstructions.length = this._commitIndex = 0;\n\t\tthis._strokeStyle = this._oldStrokeStyle = this._stroke = this._fill = this._strokeDash = this._oldStrokeDash = null;\n\t\tthis._dirty = this._strokeIgnoreScale = false;\n\t\treturn this;\n\t};\n\n\t/**\n\t * Begins a fill with the specified color. This ends the current sub-path. A tiny API method \"f\" also exists.\n\t * @method beginFill\n\t * @param {String} color A CSS compatible color value (ex. \"red\", \"#FF0000\", or \"rgba(255,0,0,0.5)\"). Setting to\n\t * null will result in no fill.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.beginFill = function(color) {\n\t\treturn this._setFill(color ? new G.Fill(color) : null);\n\t};\n\n\t/**\n\t * Begins a linear gradient fill defined by the line (x0, y0) to (x1, y1). This ends the current sub-path. For\n\t * example, the following code defines a black to white vertical gradient ranging from 20px to 120px, and draws a\n\t * square to display it:\n\t *\n\t * myGraphics.beginLinearGradientFill([\"#000\",\"#FFF\"], [0, 1], 0, 20, 0, 120).drawRect(20, 20, 120, 120);\n\t *\n\t * A tiny API method \"lf\" also exists.\n\t * @method beginLinearGradientFill\n\t * @param {Array} colors An array of CSS compatible color values. For example, [\"#F00\",\"#00F\"] would define a gradient\n\t * drawing from red to blue.\n\t * @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw\n\t * the first color to 10% then interpolating to the second color at 90%.\n\t * @param {Number} x0 The position of the first point defining the line that defines the gradient direction and size.\n\t * @param {Number} y0 The position of the first point defining the line that defines the gradient direction and size.\n\t * @param {Number} x1 The position of the second point defining the line that defines the gradient direction and size.\n\t * @param {Number} y1 The position of the second point defining the line that defines the gradient direction and size.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.beginLinearGradientFill = function(colors, ratios, x0, y0, x1, y1) {\n\t\treturn this._setFill(new G.Fill().linearGradient(colors, ratios, x0, y0, x1, y1));\n\t};\n\n\t/**\n\t * Begins a radial gradient fill. This ends the current sub-path. For example, the following code defines a red to\n\t * blue radial gradient centered at (100, 100), with a radius of 50, and draws a circle to display it:\n\t *\n\t * myGraphics.beginRadialGradientFill([\"#F00\",\"#00F\"], [0, 1], 100, 100, 0, 100, 100, 50).drawCircle(100, 100, 50);\n\t *\n\t * A tiny API method \"rf\" also exists.\n\t * @method beginRadialGradientFill\n\t * @param {Array} colors An array of CSS compatible color values. For example, [\"#F00\",\"#00F\"] would define\n\t * a gradient drawing from red to blue.\n\t * @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1,\n\t * 0.9] would draw the first color to 10% then interpolating to the second color at 90%.\n\t * @param {Number} x0 Center position of the inner circle that defines the gradient.\n\t * @param {Number} y0 Center position of the inner circle that defines the gradient.\n\t * @param {Number} r0 Radius of the inner circle that defines the gradient.\n\t * @param {Number} x1 Center position of the outer circle that defines the gradient.\n\t * @param {Number} y1 Center position of the outer circle that defines the gradient.\n\t * @param {Number} r1 Radius of the outer circle that defines the gradient.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.beginRadialGradientFill = function(colors, ratios, x0, y0, r0, x1, y1, r1) {\n\t\treturn this._setFill(new G.Fill().radialGradient(colors, ratios, x0, y0, r0, x1, y1, r1));\n\t};\n\n\t/**\n\t * Begins a pattern fill using the specified image. This ends the current sub-path. A tiny API method \"bf\" also\n\t * exists.\n\t * @method beginBitmapFill\n\t * @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement} image The Image, Canvas, or Video object to use\n\t * as the pattern. Must be loaded prior to creating a bitmap fill, or the fill will be empty.\n\t * @param {String} repetition Optional. Indicates whether to repeat the image in the fill area. One of \"repeat\",\n\t * \"repeat-x\", \"repeat-y\", or \"no-repeat\". Defaults to \"repeat\". Note that Firefox does not support \"repeat-x\" or\n\t * \"repeat-y\" (latest tests were in FF 20.0), and will default to \"repeat\".\n\t * @param {Matrix2D} matrix Optional. Specifies a transformation matrix for the bitmap fill. This transformation\n\t * will be applied relative to the parent transform.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.beginBitmapFill = function(image, repetition, matrix) {\n\t\treturn this._setFill(new G.Fill(null,matrix).bitmap(image, repetition));\n\t};\n\n\t/**\n\t * Ends the current sub-path, and begins a new one with no fill. Functionally identical to beginFill(null).\n\t * A tiny API method \"ef\" also exists.\n\t * @method endFill\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.endFill = function() {\n\t\treturn this.beginFill();\n\t};\n\n\t/**\n\t * Sets the stroke style. Like all drawing methods, this can be chained, so you can define\n\t * the stroke style and color in a single line of code like so:\n\t *\n\t * \tmyGraphics.setStrokeStyle(8,\"round\").beginStroke(\"#F00\");\n\t *\n\t * A tiny API method \"ss\" also exists.\n\t * @method setStrokeStyle\n\t * @param {Number} thickness The width of the stroke.\n\t * @param {String | Number} [caps=0] Indicates the type of caps to use at the end of lines. One of butt,\n\t * round, or square. Defaults to \"butt\". Also accepts the values 0 (butt), 1 (round), and 2 (square) for use with\n\t * the tiny API.\n\t * @param {String | Number} [joints=0] Specifies the type of joints that should be used where two lines meet.\n\t * One of bevel, round, or miter. Defaults to \"miter\". Also accepts the values 0 (miter), 1 (round), and 2 (bevel)\n\t * for use with the tiny API.\n\t * @param {Number} [miterLimit=10] If joints is set to \"miter\", then you can specify a miter limit ratio which\n\t * controls at what point a mitered joint will be clipped.\n\t * @param {Boolean} [ignoreScale=false] If true, the stroke will be drawn at the specified thickness regardless\n\t * of active transformations.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.setStrokeStyle = function(thickness, caps, joints, miterLimit, ignoreScale) {\n\t\tthis._updateInstructions(true);\n\t\tthis._strokeStyle = this.command = new G.StrokeStyle(thickness, caps, joints, miterLimit, ignoreScale);\n\n\t\t// ignoreScale lives on Stroke, not StrokeStyle, so we do a little trickery:\n\t\tif (this._stroke) { this._stroke.ignoreScale = ignoreScale; }\n\t\tthis._strokeIgnoreScale = ignoreScale;\n\t\treturn this;\n\t};\n\t\n\t/**\n\t * Sets or clears the stroke dash pattern.\n\t *\n\t * \tmyGraphics.setStrokeDash([20, 10], 0);\n\t *\n\t * A tiny API method `sd` also exists.\n\t * @method setStrokeDash\n\t * @param {Array} [segments] An array specifying the dash pattern, alternating between line and gap.\n\t * For example, `[20,10]` would create a pattern of 20 pixel lines with 10 pixel gaps between them.\n\t * Passing null or an empty array will clear the existing stroke dash.\n\t * @param {Number} [offset=0] The offset of the dash pattern. For example, you could increment this value to create a \"marching ants\" effect.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.setStrokeDash = function(segments, offset) {\n\t\tthis._updateInstructions(true);\n\t\tthis._strokeDash = this.command = new G.StrokeDash(segments, offset);\n\t\treturn this;\n\t};\n\n\t/**\n\t * Begins a stroke with the specified color. This ends the current sub-path. A tiny API method \"s\" also exists.\n\t * @method beginStroke\n\t * @param {String} color A CSS compatible color value (ex. \"#FF0000\", \"red\", or \"rgba(255,0,0,0.5)\"). Setting to\n\t * null will result in no stroke.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.beginStroke = function(color) {\n\t\treturn this._setStroke(color ? new G.Stroke(color) : null);\n\t};\n\n\t/**\n\t * Begins a linear gradient stroke defined by the line (x0, y0) to (x1, y1). This ends the current sub-path. For\n\t * example, the following code defines a black to white vertical gradient ranging from 20px to 120px, and draws a\n\t * square to display it:\n\t *\n\t * myGraphics.setStrokeStyle(10).\n\t * beginLinearGradientStroke([\"#000\",\"#FFF\"], [0, 1], 0, 20, 0, 120).drawRect(20, 20, 120, 120);\n\t *\n\t * A tiny API method \"ls\" also exists.\n\t * @method beginLinearGradientStroke\n\t * @param {Array} colors An array of CSS compatible color values. For example, [\"#F00\",\"#00F\"] would define\n\t * a gradient drawing from red to blue.\n\t * @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1,\n\t * 0.9] would draw the first color to 10% then interpolating to the second color at 90%.\n\t * @param {Number} x0 The position of the first point defining the line that defines the gradient direction and size.\n\t * @param {Number} y0 The position of the first point defining the line that defines the gradient direction and size.\n\t * @param {Number} x1 The position of the second point defining the line that defines the gradient direction and size.\n\t * @param {Number} y1 The position of the second point defining the line that defines the gradient direction and size.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.beginLinearGradientStroke = function(colors, ratios, x0, y0, x1, y1) {\n\t\treturn this._setStroke(new G.Stroke().linearGradient(colors, ratios, x0, y0, x1, y1));\n\t};\n\n\t/**\n\t * Begins a radial gradient stroke. This ends the current sub-path. For example, the following code defines a red to\n\t * blue radial gradient centered at (100, 100), with a radius of 50, and draws a rectangle to display it:\n\t *\n\t * myGraphics.setStrokeStyle(10)\n\t * .beginRadialGradientStroke([\"#F00\",\"#00F\"], [0, 1], 100, 100, 0, 100, 100, 50)\n\t * .drawRect(50, 90, 150, 110);\n\t *\n\t * A tiny API method \"rs\" also exists.\n\t * @method beginRadialGradientStroke\n\t * @param {Array} colors An array of CSS compatible color values. For example, [\"#F00\",\"#00F\"] would define\n\t * a gradient drawing from red to blue.\n\t * @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1,\n\t * 0.9] would draw the first color to 10% then interpolating to the second color at 90%, then draw the second color\n\t * to 100%.\n\t * @param {Number} x0 Center position of the inner circle that defines the gradient.\n\t * @param {Number} y0 Center position of the inner circle that defines the gradient.\n\t * @param {Number} r0 Radius of the inner circle that defines the gradient.\n\t * @param {Number} x1 Center position of the outer circle that defines the gradient.\n\t * @param {Number} y1 Center position of the outer circle that defines the gradient.\n\t * @param {Number} r1 Radius of the outer circle that defines the gradient.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.beginRadialGradientStroke = function(colors, ratios, x0, y0, r0, x1, y1, r1) {\n\t\treturn this._setStroke(new G.Stroke().radialGradient(colors, ratios, x0, y0, r0, x1, y1, r1));\n\t};\n\n\t/**\n\t * Begins a pattern fill using the specified image. This ends the current sub-path. Note that unlike bitmap fills,\n\t * strokes do not currently support a matrix parameter due to limitations in the canvas API. A tiny API method \"bs\"\n\t * also exists.\n\t * @method beginBitmapStroke\n\t * @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement} image The Image, Canvas, or Video object to use\n\t * as the pattern. Must be loaded prior to creating a bitmap fill, or the fill will be empty.\n\t * @param {String} [repetition=repeat] Optional. Indicates whether to repeat the image in the fill area. One of\n\t * \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". Defaults to \"repeat\".\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.beginBitmapStroke = function(image, repetition) {\n\t\t// NOTE: matrix is not supported for stroke because transforms on strokes also affect the drawn stroke width.\n\t\treturn this._setStroke(new G.Stroke().bitmap(image, repetition));\n\t};\n\n\t/**\n\t * Ends the current sub-path, and begins a new one with no stroke. Functionally identical to beginStroke(null).\n\t * A tiny API method \"es\" also exists.\n\t * @method endStroke\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.endStroke = function() {\n\t\treturn this.beginStroke();\n\t};\n\n\t/**\n\t * Maps the familiar ActionScript curveTo() method to the functionally similar {{#crossLink \"Graphics/quadraticCurveTo\"}}{{/crossLink}}\n\t * method.\n\t * @method curveTo\n\t * @param {Number} cpx\n\t * @param {Number} cpy\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.curveTo = p.quadraticCurveTo;\n\n\t/**\n\t *\n\t * Maps the familiar ActionScript drawRect() method to the functionally similar {{#crossLink \"Graphics/rect\"}}{{/crossLink}}\n\t * method.\n\t * @method drawRect\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} w Width of the rectangle\n\t * @param {Number} h Height of the rectangle\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.drawRect = p.rect;\n\n\t/**\n\t * Draws a rounded rectangle with all corners with the specified radius.\n\t * @method drawRoundRect\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} w\n\t * @param {Number} h\n\t * @param {Number} radius Corner radius.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.drawRoundRect = function(x, y, w, h, radius) {\n\t\treturn this.drawRoundRectComplex(x, y, w, h, radius, radius, radius, radius);\n\t};\n\n\t/**\n\t * Draws a rounded rectangle with different corner radii. Supports positive and negative corner radii. A tiny API\n\t * method \"rc\" also exists.\n\t * @method drawRoundRectComplex\n\t * @param {Number} x The horizontal coordinate to draw the round rect.\n\t * @param {Number} y The vertical coordinate to draw the round rect.\n\t * @param {Number} w The width of the round rect.\n\t * @param {Number} h The height of the round rect.\n\t * @param {Number} radiusTL Top left corner radius.\n\t * @param {Number} radiusTR Top right corner radius.\n\t * @param {Number} radiusBR Bottom right corner radius.\n\t * @param {Number} radiusBL Bottom left corner radius.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.drawRoundRectComplex = function(x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL) {\n\t\treturn this.append(new G.RoundRect(x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL));\n\t};\n\n\t/**\n\t * Draws a circle with the specified radius at (x, y).\n\t *\n\t * var g = new createjs.Graphics();\n\t *\t g.setStrokeStyle(1);\n\t *\t g.beginStroke(createjs.Graphics.getRGB(0,0,0));\n\t *\t g.beginFill(createjs.Graphics.getRGB(255,0,0));\n\t *\t g.drawCircle(0,0,3);\n\t *\n\t *\t var s = new createjs.Shape(g);\n\t *\t\ts.x = 100;\n\t *\t\ts.y = 100;\n\t *\n\t *\t stage.addChild(s);\n\t *\t stage.update();\n\t *\n\t * A tiny API method \"dc\" also exists.\n\t * @method drawCircle\n\t * @param {Number} x x coordinate center point of circle.\n\t * @param {Number} y y coordinate center point of circle.\n\t * @param {Number} radius Radius of circle.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.drawCircle = function(x, y, radius) {\n\t\treturn this.append(new G.Circle(x, y, radius));\n\t};\n\n\t/**\n\t * Draws an ellipse (oval) with a specified width (w) and height (h). Similar to {{#crossLink \"Graphics/drawCircle\"}}{{/crossLink}},\n\t * except the width and height can be different. A tiny API method \"de\" also exists.\n\t * @method drawEllipse\n\t * @param {Number} x The left coordinate point of the ellipse. Note that this is different from {{#crossLink \"Graphics/drawCircle\"}}{{/crossLink}}\n\t * which draws from center.\n\t * @param {Number} y The top coordinate point of the ellipse. Note that this is different from {{#crossLink \"Graphics/drawCircle\"}}{{/crossLink}}\n\t * which draws from the center.\n\t * @param {Number} w The height (horizontal diameter) of the ellipse. The horizontal radius will be half of this\n\t * number.\n\t * @param {Number} h The width (vertical diameter) of the ellipse. The vertical radius will be half of this number.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.drawEllipse = function(x, y, w, h) {\n\t\treturn this.append(new G.Ellipse(x, y, w, h));\n\t};\n\n\t/**\n\t * Draws a star if pointSize is greater than 0, or a regular polygon if pointSize is 0 with the specified number of\n\t * points. For example, the following code will draw a familiar 5 pointed star shape centered at 100, 100 and with a\n\t * radius of 50:\n\t *\n\t * myGraphics.beginFill(\"#FF0\").drawPolyStar(100, 100, 50, 5, 0.6, -90);\n\t * // Note: -90 makes the first point vertical\n\t *\n\t * A tiny API method \"dp\" also exists.\n\t *\n\t * @method drawPolyStar\n\t * @param {Number} x Position of the center of the shape.\n\t * @param {Number} y Position of the center of the shape.\n\t * @param {Number} radius The outer radius of the shape.\n\t * @param {Number} sides The number of points on the star or sides on the polygon.\n\t * @param {Number} pointSize The depth or \"pointy-ness\" of the star points. A pointSize of 0 will draw a regular\n\t * polygon (no points), a pointSize of 1 will draw nothing because the points are infinitely pointy.\n\t * @param {Number} angle The angle of the first point / corner. For example a value of 0 will draw the first point\n\t * directly to the right of the center.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.drawPolyStar = function(x, y, radius, sides, pointSize, angle) {\n\t\treturn this.append(new G.PolyStar(x, y, radius, sides, pointSize, angle));\n\t};\n\n\t/**\n\t * Appends a graphics command object to the graphics queue. Command objects expose an \"exec\" method\n\t * that accepts two parameters: the Context2D to operate on, and an arbitrary data object passed into\n\t * {{#crossLink \"Graphics/draw\"}}{{/crossLink}}. The latter will usually be the Shape instance that called draw.\n\t *\n\t * This method is used internally by Graphics methods, such as drawCircle, but can also be used directly to insert\n\t * built-in or custom graphics commands. For example:\n\t *\n\t * \t\t// attach data to our shape, so we can access it during the draw:\n\t * \t\tmyShape.color = \"red\";\n\t *\n\t * \t\t// append a Circle command object:\n\t * \t\tmyShape.graphics.append(new createjs.Graphics.Circle(50, 50, 30));\n\t *\n\t * \t\t// append a custom command object with an exec method that sets the fill style\n\t * \t\t// based on the shape's data, and then fills the circle.\n\t * \t\tmyShape.graphics.append({exec:function(ctx, shape) {\n\t * \t\t\tctx.fillStyle = shape.color;\n\t * \t\t\tctx.fill();\n\t * \t\t}});\n\t *\n\t * @method append\n\t * @param {Object} command A graphics command object exposing an \"exec\" method.\n\t * @param {boolean} clean The clean param is primarily for internal use. A value of true indicates that a command does not generate a path that should be stroked or filled.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.append = function(command, clean) {\n\t\tthis._activeInstructions.push(command);\n\t\tthis.command = command;\n\t\tif (!clean) { this._dirty = true; }\n\t\treturn this;\n\t};\n\n\t/**\n\t * Decodes a compact encoded path string into a series of draw instructions.\n\t * This format is not intended to be human readable, and is meant for use by authoring tools.\n\t * The format uses a base64 character set, with each character representing 6 bits, to define a series of draw\n\t * commands.\n\t *\n\t * Each command is comprised of a single \"header\" character followed by a variable number of alternating x and y\n\t * position values. Reading the header bits from left to right (most to least significant): bits 1 to 3 specify the\n\t * type of operation (0-moveTo, 1-lineTo, 2-quadraticCurveTo, 3-bezierCurveTo, 4-closePath, 5-7 unused). Bit 4\n\t * indicates whether position values use 12 bits (2 characters) or 18 bits (3 characters), with a one indicating the\n\t * latter. Bits 5 and 6 are currently unused.\n\t *\n\t * Following the header is a series of 0 (closePath), 2 (moveTo, lineTo), 4 (quadraticCurveTo), or 6 (bezierCurveTo)\n\t * parameters. These parameters are alternating x/y positions represented by 2 or 3 characters (as indicated by the\n\t * 4th bit in the command char). These characters consist of a 1 bit sign (1 is negative, 0 is positive), followed\n\t * by an 11 (2 char) or 17 (3 char) bit integer value. All position values are in tenths of a pixel. Except in the\n\t * case of move operations which are absolute, this value is a delta from the previous x or y position (as\n\t * appropriate).\n\t *\n\t * For example, the string \"A3cAAMAu4AAA\" represents a line starting at -150,0 and ending at 150,0.\n\t *
A - bits 000000. First 3 bits (000) indicate a moveTo operation. 4th bit (0) indicates 2 chars per\n\t * parameter.\n\t *
n0 - 110111011100. Absolute x position of -150.0px. First bit indicates a negative value, remaining bits\n\t * indicate 1500 tenths of a pixel.\n\t *
AA - 000000000000. Absolute y position of 0.\n\t *
I - 001100. First 3 bits (001) indicate a lineTo operation. 4th bit (1) indicates 3 chars per parameter.\n\t *
Au4 - 000000101110111000. An x delta of 300.0px, which is added to the previous x value of -150.0px to\n\t * provide an absolute position of +150.0px.\n\t *
AAA - 000000000000000000. A y delta value of 0.\n\t *\n\t * A tiny API method \"p\" also exists.\n\t * @method decodePath\n\t * @param {String} str The path string to decode.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.decodePath = function(str) {\n\t\tvar instructions = [this.moveTo, this.lineTo, this.quadraticCurveTo, this.bezierCurveTo, this.closePath];\n\t\tvar paramCount = [2, 2, 4, 6, 0];\n\t\tvar i=0, l=str.length;\n\t\tvar params = [];\n\t\tvar x=0, y=0;\n\t\tvar base64 = Graphics.BASE_64;\n\n\t\twhile (i>3; // highest order bits 1-3 code for operation.\n\t\t\tvar f = instructions[fi];\n\t\t\t// check that we have a valid instruction & that the unused bits are empty:\n\t\t\tif (!f || (n&3)) { throw(\"bad path data (@\"+i+\"): \"+c); }\n\t\t\tvar pl = paramCount[fi];\n\t\t\tif (!fi) { x=y=0; } // move operations reset the position.\n\t\t\tparams.length = 0;\n\t\t\ti++;\n\t\t\tvar charCount = (n>>2&1)+2; // 4th header bit indicates number size for this operation.\n\t\t\tfor (var p=0; p>5) ? -1 : 1;\n\t\t\t\tnum = ((num&31)<<6)|(base64[str.charAt(i+1)]);\n\t\t\t\tif (charCount == 3) { num = (num<<6)|(base64[str.charAt(i+2)]); }\n\t\t\t\tnum = sign*num/10;\n\t\t\t\tif (p%2) { x = (num += x); }\n\t\t\t\telse { y = (num += y); }\n\t\t\t\tparams[p] = num;\n\t\t\t\ti += charCount;\n\t\t\t}\n\t\t\tf.apply(this,params);\n\t\t}\n\t\treturn this;\n\t};\n\n\t/**\n\t * Stores all graphics commands so they won't be executed in future draws. Calling store() a second time adds to\n\t * the existing store. This also affects `drawAsPath()`.\n\t *\n\t * This is useful in cases where you are creating vector graphics in an iterative manner (ex. generative art), so\n\t * that only new graphics need to be drawn (which can provide huge performance benefits), but you wish to retain all\n\t * of the vector instructions for later use (ex. scaling, modifying, or exporting).\n\t *\n\t * Note that calling store() will force the active path (if any) to be ended in a manner similar to changing\n\t * the fill or stroke.\n\t *\n\t * For example, consider a application where the user draws lines with the mouse. As each line segment (or collection of\n\t * segments) are added to a Shape, it can be rasterized using {{#crossLink \"DisplayObject/updateCache\"}}{{/crossLink}},\n\t * and then stored, so that it can be redrawn at a different scale when the application is resized, or exported to SVG.\n\t *\n\t * \t// set up cache:\n\t * \tmyShape.cache(0,0,500,500,scale);\n\t *\n\t * \t// when the user drags, draw a new line:\n\t * \tmyShape.graphics.moveTo(oldX,oldY).lineTo(newX,newY);\n\t * \t// then draw it into the existing cache:\n\t * \tmyShape.updateCache(\"source-over\");\n\t * \t// store the new line, so it isn't redrawn next time:\n\t * \tmyShape.store();\n\t *\n\t * \t// then, when the window resizes, we can re-render at a different scale:\n\t * \t// first, unstore all our lines:\n\t * \tmyShape.unstore();\n\t * \t// then cache using the new scale:\n\t * \tmyShape.cache(0,0,500,500,newScale);\n\t * \t// finally, store the existing commands again:\n\t * \tmyShape.store();\n\t *\n\t * @method store\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.store = function() {\n\t\tthis._updateInstructions(true);\n\t\tthis._storeIndex = this._instructions.length;\n\t\treturn this;\n\t};\n\n\t/**\n\t * Unstores any graphics commands that were previously stored using {{#crossLink \"Graphics/store\"}}{{/crossLink}}\n\t * so that they will be executed in subsequent draw calls.\n\t *\n\t * @method unstore\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.unstore = function() {\n\t\tthis._storeIndex = 0;\n\t\treturn this;\n\t};\n\n\t/**\n\t * Returns a clone of this Graphics instance. Note that the individual command objects are not cloned.\n\t * @method clone\n\t * @return {Graphics} A clone of the current Graphics instance.\n\t **/\n\tp.clone = function() {\n\t\tvar o = new Graphics();\n\t\to.command = this.command;\n\t\to._stroke = this._stroke;\n\t\to._strokeStyle = this._strokeStyle;\n\t\to._strokeDash = this._strokeDash;\n\t\to._strokeIgnoreScale = this._strokeIgnoreScale;\n\t\to._fill = this._fill;\n\t\to._instructions = this._instructions.slice();\n\t\to._commitIndex = this._commitIndex;\n\t\to._activeInstructions = this._activeInstructions.slice();\n\t\to._dirty = this._dirty;\n\t\to._storeIndex = this._storeIndex;\n\t\treturn o;\n\t};\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t **/\n\tp.toString = function() {\n\t\treturn \"[Graphics]\";\n\t};\n\n\n// tiny API:\n\t/**\n\t * Shortcut to moveTo.\n\t * @method mt\n\t * @param {Number} x The x coordinate the drawing point should move to.\n\t * @param {Number} y The y coordinate the drawing point should move to.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls).\n\t * @chainable\n\t * @protected\n\t **/\n\tp.mt = p.moveTo;\n\n\t/**\n\t * Shortcut to lineTo.\n\t * @method lt\n\t * @param {Number} x The x coordinate the drawing point should draw to.\n\t * @param {Number} y The y coordinate the drawing point should draw to.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.lt = p.lineTo;\n\n\t/**\n\t * Shortcut to arcTo.\n\t * @method at\n\t * @param {Number} x1\n\t * @param {Number} y1\n\t * @param {Number} x2\n\t * @param {Number} y2\n\t * @param {Number} radius\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.at = p.arcTo;\n\n\t/**\n\t * Shortcut to bezierCurveTo.\n\t * @method bt\n\t * @param {Number} cp1x\n\t * @param {Number} cp1y\n\t * @param {Number} cp2x\n\t * @param {Number} cp2y\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.bt = p.bezierCurveTo;\n\n\t/**\n\t * Shortcut to quadraticCurveTo / curveTo.\n\t * @method qt\n\t * @param {Number} cpx\n\t * @param {Number} cpy\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @protected\n\t * @chainable\n\t **/\n\tp.qt = p.quadraticCurveTo;\n\n\t/**\n\t * Shortcut to arc.\n\t * @method a\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} radius\n\t * @param {Number} startAngle Measured in radians.\n\t * @param {Number} endAngle Measured in radians.\n\t * @param {Boolean} anticlockwise\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @protected\n\t * @chainable\n\t **/\n\tp.a = p.arc;\n\n\t/**\n\t * Shortcut to rect.\n\t * @method r\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} w Width of the rectangle\n\t * @param {Number} h Height of the rectangle\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.r = p.rect;\n\n\t/**\n\t * Shortcut to closePath.\n\t * @method cp\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.cp = p.closePath;\n\n\t/**\n\t * Shortcut to clear.\n\t * @method c\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.c = p.clear;\n\n\t/**\n\t * Shortcut to beginFill.\n\t * @method f\n\t * @param {String} color A CSS compatible color value (ex. \"red\", \"#FF0000\", or \"rgba(255,0,0,0.5)\"). Setting to\n\t * null will result in no fill.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.f = p.beginFill;\n\n\t/**\n\t * Shortcut to beginLinearGradientFill.\n\t * @method lf\n\t * @param {Array} colors An array of CSS compatible color values. For example, [\"#F00\",\"#00F\"] would define a gradient\n\t * drawing from red to blue.\n\t * @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw\n\t * the first color to 10% then interpolating to the second color at 90%.\n\t * @param {Number} x0 The position of the first point defining the line that defines the gradient direction and size.\n\t * @param {Number} y0 The position of the first point defining the line that defines the gradient direction and size.\n\t * @param {Number} x1 The position of the second point defining the line that defines the gradient direction and size.\n\t * @param {Number} y1 The position of the second point defining the line that defines the gradient direction and size.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.lf = p.beginLinearGradientFill;\n\n\t/**\n\t * Shortcut to beginRadialGradientFill.\n\t * @method rf\n\t * @param {Array} colors An array of CSS compatible color values. For example, [\"#F00\",\"#00F\"] would define\n\t * a gradient drawing from red to blue.\n\t * @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1,\n\t * 0.9] would draw the first color to 10% then interpolating to the second color at 90%.\n\t * @param {Number} x0 Center position of the inner circle that defines the gradient.\n\t * @param {Number} y0 Center position of the inner circle that defines the gradient.\n\t * @param {Number} r0 Radius of the inner circle that defines the gradient.\n\t * @param {Number} x1 Center position of the outer circle that defines the gradient.\n\t * @param {Number} y1 Center position of the outer circle that defines the gradient.\n\t * @param {Number} r1 Radius of the outer circle that defines the gradient.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.rf = p.beginRadialGradientFill;\n\n\t/**\n\t * Shortcut to beginBitmapFill.\n\t * @method bf\n\t * @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement} image The Image, Canvas, or Video object to use\n\t * as the pattern.\n\t * @param {String} repetition Optional. Indicates whether to repeat the image in the fill area. One of \"repeat\",\n\t * \"repeat-x\", \"repeat-y\", or \"no-repeat\". Defaults to \"repeat\". Note that Firefox does not support \"repeat-x\" or\n\t * \"repeat-y\" (latest tests were in FF 20.0), and will default to \"repeat\".\n\t * @param {Matrix2D} matrix Optional. Specifies a transformation matrix for the bitmap fill. This transformation\n\t * will be applied relative to the parent transform.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.bf = p.beginBitmapFill;\n\n\t/**\n\t * Shortcut to endFill.\n\t * @method ef\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.ef = p.endFill;\n\n\t/**\n\t * Shortcut to setStrokeStyle.\n\t * @method ss\n\t * @param {Number} thickness The width of the stroke.\n\t * @param {String | Number} [caps=0] Indicates the type of caps to use at the end of lines. One of butt,\n\t * round, or square. Defaults to \"butt\". Also accepts the values 0 (butt), 1 (round), and 2 (square) for use with\n\t * the tiny API.\n\t * @param {String | Number} [joints=0] Specifies the type of joints that should be used where two lines meet.\n\t * One of bevel, round, or miter. Defaults to \"miter\". Also accepts the values 0 (miter), 1 (round), and 2 (bevel)\n\t * for use with the tiny API.\n\t * @param {Number} [miterLimit=10] If joints is set to \"miter\", then you can specify a miter limit ratio which\n\t * controls at what point a mitered joint will be clipped.\n\t * @param {Boolean} [ignoreScale=false] If true, the stroke will be drawn at the specified thickness regardless\n\t * of active transformations.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.ss = p.setStrokeStyle;\n\t\n\t/**\n\t * Shortcut to setStrokeDash.\n\t * @method sd\n\t * @param {Array} [segments] An array specifying the dash pattern, alternating between line and gap.\n\t * For example, [20,10] would create a pattern of 20 pixel lines with 10 pixel gaps between them.\n\t * Passing null or an empty array will clear any existing dash.\n\t * @param {Number} [offset=0] The offset of the dash pattern. For example, you could increment this value to create a \"marching ants\" effect.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.sd = p.setStrokeDash;\n\n\t/**\n\t * Shortcut to beginStroke.\n\t * @method s\n\t * @param {String} color A CSS compatible color value (ex. \"#FF0000\", \"red\", or \"rgba(255,0,0,0.5)\"). Setting to\n\t * null will result in no stroke.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.s = p.beginStroke;\n\n\t/**\n\t * Shortcut to beginLinearGradientStroke.\n\t * @method ls\n\t * @param {Array} colors An array of CSS compatible color values. For example, [\"#F00\",\"#00F\"] would define\n\t * a gradient drawing from red to blue.\n\t * @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1,\n\t * 0.9] would draw the first color to 10% then interpolating to the second color at 90%.\n\t * @param {Number} x0 The position of the first point defining the line that defines the gradient direction and size.\n\t * @param {Number} y0 The position of the first point defining the line that defines the gradient direction and size.\n\t * @param {Number} x1 The position of the second point defining the line that defines the gradient direction and size.\n\t * @param {Number} y1 The position of the second point defining the line that defines the gradient direction and size.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.ls = p.beginLinearGradientStroke;\n\n\t/**\n\t * Shortcut to beginRadialGradientStroke.\n\t * @method rs\n\t * @param {Array} colors An array of CSS compatible color values. For example, [\"#F00\",\"#00F\"] would define\n\t * a gradient drawing from red to blue.\n\t * @param {Array} ratios An array of gradient positions which correspond to the colors. For example, [0.1,\n\t * 0.9] would draw the first color to 10% then interpolating to the second color at 90%, then draw the second color\n\t * to 100%.\n\t * @param {Number} x0 Center position of the inner circle that defines the gradient.\n\t * @param {Number} y0 Center position of the inner circle that defines the gradient.\n\t * @param {Number} r0 Radius of the inner circle that defines the gradient.\n\t * @param {Number} x1 Center position of the outer circle that defines the gradient.\n\t * @param {Number} y1 Center position of the outer circle that defines the gradient.\n\t * @param {Number} r1 Radius of the outer circle that defines the gradient.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.rs = p.beginRadialGradientStroke;\n\n\t/**\n\t * Shortcut to beginBitmapStroke.\n\t * @method bs\n\t * @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement} image The Image, Canvas, or Video object to use\n\t * as the pattern.\n\t * @param {String} [repetition=repeat] Optional. Indicates whether to repeat the image in the fill area. One of\n\t * \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". Defaults to \"repeat\".\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.bs = p.beginBitmapStroke;\n\n\t/**\n\t * Shortcut to endStroke.\n\t * @method es\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.es = p.endStroke;\n\n\t/**\n\t * Shortcut to drawRect.\n\t * @method dr\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} w Width of the rectangle\n\t * @param {Number} h Height of the rectangle\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.dr = p.drawRect;\n\n\t/**\n\t * Shortcut to drawRoundRect.\n\t * @method rr\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} w\n\t * @param {Number} h\n\t * @param {Number} radius Corner radius.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.rr = p.drawRoundRect;\n\n\t/**\n\t * Shortcut to drawRoundRectComplex.\n\t * @method rc\n\t * @param {Number} x The horizontal coordinate to draw the round rect.\n\t * @param {Number} y The vertical coordinate to draw the round rect.\n\t * @param {Number} w The width of the round rect.\n\t * @param {Number} h The height of the round rect.\n\t * @param {Number} radiusTL Top left corner radius.\n\t * @param {Number} radiusTR Top right corner radius.\n\t * @param {Number} radiusBR Bottom right corner radius.\n\t * @param {Number} radiusBL Bottom left corner radius.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.rc = p.drawRoundRectComplex;\n\n\t/**\n\t * Shortcut to drawCircle.\n\t * @method dc\n\t * @param {Number} x x coordinate center point of circle.\n\t * @param {Number} y y coordinate center point of circle.\n\t * @param {Number} radius Radius of circle.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.dc = p.drawCircle;\n\n\t/**\n\t * Shortcut to drawEllipse.\n\t * @method de\n\t * @param {Number} x The left coordinate point of the ellipse. Note that this is different from {{#crossLink \"Graphics/drawCircle\"}}{{/crossLink}}\n\t * which draws from center.\n\t * @param {Number} y The top coordinate point of the ellipse. Note that this is different from {{#crossLink \"Graphics/drawCircle\"}}{{/crossLink}}\n\t * which draws from the center.\n\t * @param {Number} w The height (horizontal diameter) of the ellipse. The horizontal radius will be half of this\n\t * number.\n\t * @param {Number} h The width (vertical diameter) of the ellipse. The vertical radius will be half of this number.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.de = p.drawEllipse;\n\n\t/**\n\t * Shortcut to drawPolyStar.\n\t * @method dp\n\t * @param {Number} x Position of the center of the shape.\n\t * @param {Number} y Position of the center of the shape.\n\t * @param {Number} radius The outer radius of the shape.\n\t * @param {Number} sides The number of points on the star or sides on the polygon.\n\t * @param {Number} pointSize The depth or \"pointy-ness\" of the star points. A pointSize of 0 will draw a regular\n\t * polygon (no points), a pointSize of 1 will draw nothing because the points are infinitely pointy.\n\t * @param {Number} angle The angle of the first point / corner. For example a value of 0 will draw the first point\n\t * directly to the right of the center.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.dp = p.drawPolyStar;\n\n\t/**\n\t * Shortcut to decodePath.\n\t * @method p\n\t * @param {String} str The path string to decode.\n\t * @return {Graphics} The Graphics instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t * @protected\n\t **/\n\tp.p = p.decodePath;\n\n\n// private methods:\n\t/**\n\t * @method _updateInstructions\n\t * @param commit\n\t * @protected\n\t **/\n\tp._updateInstructions = function(commit) {\n\t\tvar instr = this._instructions, active = this._activeInstructions, commitIndex = this._commitIndex;\n\n\t\tif (this._dirty && active.length) {\n\t\t\tinstr.length = commitIndex; // remove old, uncommitted commands\n\t\t\tinstr.push(Graphics.beginCmd);\n\n\t\t\tvar l = active.length, ll = instr.length;\n\t\t\tinstr.length = ll+l;\n\t\t\tfor (var i=0; i= 2) {\n\t\t\tvar o = this.style = Graphics._ctx.createPattern(image, repetition || \"\");\n\t\t\to.props = {image: image, repetition: repetition, type: \"bitmap\"};\n\t\t}\n\t\treturn this;\n\t};\n\tp.path = false;\n\n\t/**\n\t * Graphics command object. See {{#crossLink \"Graphics/beginStroke\"}}{{/crossLink}} and {{#crossLink \"Graphics/append\"}}{{/crossLink}} for more information.\n\t * @class Stroke\n\t * @constructor\n\t * @param {Object} style A valid Context2D fillStyle.\n\t * @param {Boolean} ignoreScale\n\t **/\n\t/**\n\t * A valid Context2D strokeStyle.\n\t * @property style\n\t * @type Object\n\t */\n\t/**\n\t * @property ignoreScale\n\t * @type Boolean\n\t */\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @method exec\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n\tp = (G.Stroke = function(style, ignoreScale) {\n\t\tthis.style = style;\n\t\tthis.ignoreScale = ignoreScale;\n\t}).prototype;\n\tp.exec = function(ctx) {\n\t\tif (!this.style) { return; }\n\t\tctx.strokeStyle = this.style;\n\t\tif (this.ignoreScale) { ctx.save(); ctx.setTransform(1,0,0,1,0,0); }\n\t\tctx.stroke();\n\t\tif (this.ignoreScale) { ctx.restore(); }\n\t};\n\t/**\n\t * Creates a linear gradient style and assigns it to {{#crossLink \"Stroke/style:property\"}}{{/crossLink}}.\n\t * See {{#crossLink \"Graphics/beginLinearGradientStroke\"}}{{/crossLink}} for more information.\n\t * @method linearGradient\n\t * @param {Array} colors\n\t * @param {Array} ratios\n\t * @param {Number} x0\n\t * @param {Number} y0\n\t * @param {Number} x1\n\t * @param {Number} y1\n\t * @return {Fill} Returns this Stroke object for chaining or assignment.\n\t */\n\tp.linearGradient = G.Fill.prototype.linearGradient;\n\t/**\n\t * Creates a radial gradient style and assigns it to {{#crossLink \"Stroke/style:property\"}}{{/crossLink}}.\n\t * See {{#crossLink \"Graphics/beginRadialGradientStroke\"}}{{/crossLink}} for more information.\n\t * @method radialGradient\n\t * @param {Array} colors\n\t * @param {Array} ratios\n\t * @param {Number} x0\n\t * @param {Number} y0\n\t * @param {Number} r0\n\t * @param {Number} x1\n\t * @param {Number} y1\n\t * @param {Number} r1\n\t * @return {Fill} Returns this Stroke object for chaining or assignment.\n\t */\n\tp.radialGradient = G.Fill.prototype.radialGradient;\n\t/**\n\t * Creates a bitmap fill style and assigns it to {{#crossLink \"Stroke/style:property\"}}{{/crossLink}}.\n\t * See {{#crossLink \"Graphics/beginBitmapStroke\"}}{{/crossLink}} for more information.\n\t * @method bitmap\n\t * @param {HTMLImageElement} image\n\t * @param {String} [repetition] One of: repeat, repeat-x, repeat-y, or no-repeat.\n\t * @return {Fill} Returns this Stroke object for chaining or assignment.\n\t */\n\tp.bitmap = G.Fill.prototype.bitmap;\n\tp.path = false;\n\n\t/**\n\t * Graphics command object. See {{#crossLink \"Graphics/setStrokeStyle\"}}{{/crossLink}} and {{#crossLink \"Graphics/append\"}}{{/crossLink}} for more information.\n\t * @class StrokeStyle\n\t * @constructor\n\t * @param {Number} width\n\t * @param {String} [caps=butt]\n\t * @param {String} [joints=miter]\n\t * @param {Number} [miterLimit=10]\n\t * @param {Boolean} [ignoreScale=false]\n\t **/\n\t/**\n\t * @property width\n\t * @type Number\n\t */\n\t/**\n\t * One of: butt, round, square\n\t * @property caps\n\t * @type String\n\t */\n\t/**\n\t * One of: round, bevel, miter\n\t * @property joints\n\t * @type String\n\t */\n\t/**\n\t * @property miterLimit\n\t * @type Number\n\t */\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @method exec\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n\tp = (G.StrokeStyle = function(width, caps, joints, miterLimit, ignoreScale) {\n\t\tthis.width = width;\n\t\tthis.caps = caps;\n\t\tthis.joints = joints;\n\t\tthis.miterLimit = miterLimit;\n\t\tthis.ignoreScale = ignoreScale;\n\t}).prototype;\n\tp.exec = function(ctx) {\n\t\tctx.lineWidth = (this.width == null ? \"1\" : this.width);\n\t\tctx.lineCap = (this.caps == null ? \"butt\" : (isNaN(this.caps) ? this.caps : Graphics.STROKE_CAPS_MAP[this.caps]));\n\t\tctx.lineJoin = (this.joints == null ? \"miter\" : (isNaN(this.joints) ? this.joints : Graphics.STROKE_JOINTS_MAP[this.joints]));\n\t\tctx.miterLimit = (this.miterLimit == null ? \"10\" : this.miterLimit);\n\t\tctx.ignoreScale = (this.ignoreScale == null ? false : this.ignoreScale);\n\t};\n\tp.path = false;\n\t\n\t/**\n\t * Graphics command object. See {{#crossLink \"Graphics/setStrokeDash\"}}{{/crossLink}} and {{#crossLink \"Graphics/append\"}}{{/crossLink}} for more information.\n\t * @class StrokeDash\n\t * @constructor\n\t * @param {Array} [segments]\n\t * @param {Number} [offset=0]\n\t **/\n\t/**\n\t * @property segments\n\t * @type Array\n\t */\n\t/**\n\t * @property offset\n\t * @type Number\n\t */\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @method exec\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n\t(G.StrokeDash = function(segments, offset) {\n\t\tthis.segments = segments;\n\t\tthis.offset = offset||0;\n\t}).prototype.exec = function(ctx) {\n\t\tif (ctx.setLineDash) { // feature detection.\n\t\t\tctx.setLineDash(this.segments|| G.StrokeDash.EMPTY_SEGMENTS); // instead of [] to reduce churn.\n\t\t\tctx.lineDashOffset = this.offset||0;\n\t\t}\n\t};\n\t/**\n\t * The default value for segments (ie. no dash).\n\t * @property EMPTY_SEGMENTS\n\t * @static\n\t * @final\n\t * @readonly\n\t * @protected\n\t * @type {Array}\n\t **/\n\tG.StrokeDash.EMPTY_SEGMENTS = [];\n\n\t/**\n\t * Graphics command object. See {{#crossLink \"Graphics/drawRoundRectComplex\"}}{{/crossLink}} and {{#crossLink \"Graphics/append\"}}{{/crossLink}} for more information.\n\t * @class RoundRect\n\t * @constructor\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} w\n\t * @param {Number} h\n\t * @param {Number} radiusTL\n\t * @param {Number} radiusTR\n\t * @param {Number} radiusBR\n\t * @param {Number} radiusBL\n\t **/\n\t/**\n\t * @property x\n\t * @type Number\n\t */\n\t/**\n\t * @property y\n\t * @type Number\n\t */\n\t/**\n\t * @property w\n\t * @type Number\n\t */\n\t/**\n\t * @property h\n\t * @type Number\n\t */\n\t/**\n\t * @property radiusTL\n\t * @type Number\n\t */\n\t/**\n\t * @property radiusTR\n\t * @type Number\n\t */\n\t/**\n\t * @property radiusBR\n\t * @type Number\n\t */\n\t/**\n\t * @property radiusBL\n\t * @type Number\n\t */\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @method exec\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n\t(G.RoundRect = function(x, y, w, h, radiusTL, radiusTR, radiusBR, radiusBL) {\n\t\tthis.x = x; this.y = y;\n\t\tthis.w = w; this.h = h;\n\t\tthis.radiusTL = radiusTL; this.radiusTR = radiusTR;\n\t\tthis.radiusBR = radiusBR; this.radiusBL = radiusBL;\n\t}).prototype.exec = function(ctx) {\n\t\tvar max = (w max) { rTL = max; }\n\t\tif (rTR < 0) { rTR *= (mTR=-1); }\n\t\tif (rTR > max) { rTR = max; }\n\t\tif (rBR < 0) { rBR *= (mBR=-1); }\n\t\tif (rBR > max) { rBR = max; }\n\t\tif (rBL < 0) { rBL *= (mBL=-1); }\n\t\tif (rBL > max) { rBL = max; }\n\n\t\tctx.moveTo(x+w-rTR, y);\n\t\tctx.arcTo(x+w+rTR*mTR, y-rTR*mTR, x+w, y+rTR, rTR);\n\t\tctx.lineTo(x+w, y+h-rBR);\n\t\tctx.arcTo(x+w+rBR*mBR, y+h+rBR*mBR, x+w-rBR, y+h, rBR);\n\t\tctx.lineTo(x+rBL, y+h);\n\t\tctx.arcTo(x-rBL*mBL, y+h+rBL*mBL, x, y+h-rBL, rBL);\n\t\tctx.lineTo(x, y+rTL);\n\t\tctx.arcTo(x-rTL*mTL, y-rTL*mTL, x+rTL, y, rTL);\n\t\tctx.closePath();\n\t};\n\n\t/**\n\t * Graphics command object. See {{#crossLink \"Graphics/drawCircle\"}}{{/crossLink}} and {{#crossLink \"Graphics/append\"}}{{/crossLink}} for more information.\n\t * @class Circle\n\t * @constructor\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} radius\n\t **/\n\t/**\n\t * @property x\n\t * @type Number\n\t */\n\t/**\n\t * @property y\n\t * @type Number\n\t */\n\t/**\n\t * @property radius\n\t * @type Number\n\t */\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @method exec\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n\t(G.Circle = function(x, y, radius) {\n\t\tthis.x = x; this.y = y;\n\t\tthis.radius = radius;\n\t}).prototype.exec = function(ctx) { ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2); };\n\n\t/**\n\t * Graphics command object. See {{#crossLink \"Graphics/drawEllipse\"}}{{/crossLink}} and {{#crossLink \"Graphics/append\"}}{{/crossLink}} for more information.\n\t * @class Ellipse\n\t * @constructor\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} w\n\t * @param {Number} h\n\t **/\n\t/**\n\t * @property x\n\t * @type Number\n\t */\n\t/**\n\t * @property y\n\t * @type Number\n\t */\n\t/**\n\t * @property w\n\t * @type Number\n\t */\n\t/**\n\t * @property h\n\t * @type Number\n\t */\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @method exec\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n\t(G.Ellipse = function(x, y, w, h) {\n\t\tthis.x = x; this.y = y;\n\t\tthis.w = w; this.h = h;\n\t}).prototype.exec = function(ctx) {\n\t\tvar x = this.x, y = this.y;\n\t\tvar w = this.w, h = this.h;\n\n\t\tvar k = 0.5522848;\n\t\tvar ox = (w / 2) * k;\n\t\tvar oy = (h / 2) * k;\n\t\tvar xe = x + w;\n\t\tvar ye = y + h;\n\t\tvar xm = x + w / 2;\n\t\tvar ym = y + h / 2;\n\n\t\tctx.moveTo(x, ym);\n\t\tctx.bezierCurveTo(x, ym-oy, xm-ox, y, xm, y);\n\t\tctx.bezierCurveTo(xm+ox, y, xe, ym-oy, xe, ym);\n\t\tctx.bezierCurveTo(xe, ym+oy, xm+ox, ye, xm, ye);\n\t\tctx.bezierCurveTo(xm-ox, ye, x, ym+oy, x, ym);\n\t};\n\n\t/**\n\t * Graphics command object. See {{#crossLink \"Graphics/drawPolyStar\"}}{{/crossLink}} and {{#crossLink \"Graphics/append\"}}{{/crossLink}} for more information.\n\t * @class PolyStar\n\t * @constructor\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Number} radius\n\t * @param {Number} sides\n\t * @param {Number} pointSize\n\t * @param {Number} angle\n\t **/\n\t/**\n\t * @property x\n\t * @type Number\n\t */\n\t/**\n\t * @property y\n\t * @type Number\n\t */\n\t/**\n\t * @property radius\n\t * @type Number\n\t */\n\t/**\n\t * @property sides\n\t * @type Number\n\t */\n\t/**\n\t * @property pointSize\n\t * @type Number\n\t */\n\t/**\n\t * @property angle\n\t * @type Number\n\t */\n\t/**\n\t * Execute the Graphics command in the provided Canvas context.\n\t * @method exec\n\t * @param {CanvasRenderingContext2D} ctx The canvas rendering context\n\t */\n\t(G.PolyStar = function(x, y, radius, sides, pointSize, angle) {\n\t\tthis.x = x; this.y = y;\n\t\tthis.radius = radius;\n\t\tthis.sides = sides;\n\t\tthis.pointSize = pointSize;\n\t\tthis.angle = angle;\n\t}).prototype.exec = function(ctx) {\n\t\tvar x = this.x, y = this.y;\n\t\tvar radius = this.radius;\n\t\tvar angle = (this.angle||0)/180*Math.PI;\n\t\tvar sides = this.sides;\n\t\tvar ps = 1-(this.pointSize||0);\n\t\tvar a = Math.PI/sides;\n\n\t\tctx.moveTo(x+Math.cos(angle)*radius, y+Math.sin(angle)*radius);\n\t\tfor (var i=0; iNote: In EaselJS 0.7.0, the mouseEnabled property will not work properly with nested Containers. Please\n\t\t * check out the latest NEXT version in GitHub for an updated version with this issue resolved. The fix will be\n\t\t * provided in the next release of EaselJS.\n\t\t * @property mouseEnabled\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t **/\n\t\tthis.mouseEnabled = true;\n\n\t\t/**\n\t\t * If false, the tick will not run on this display object (or its children). This can provide some performance benefits.\n\t\t * In addition to preventing the \"tick\" event from being dispatched, it will also prevent tick related updates\n\t\t * on some display objects (ex. Sprite & MovieClip frame advancing, and DOMElement display properties).\n\t\t * @property tickEnabled\n\t\t * @type Boolean\n\t\t * @default true\n\t\t **/\n\t\tthis.tickEnabled = true;\n\n\t\t/**\n\t\t * An optional name for this display object. Included in {{#crossLink \"DisplayObject/toString\"}}{{/crossLink}} . Useful for\n\t\t * debugging.\n\t\t * @property name\n\t\t * @type {String}\n\t\t * @default null\n\t\t **/\n\t\tthis.name = null;\n\n\t\t/**\n\t\t * A reference to the {{#crossLink \"Container\"}}{{/crossLink}} or {{#crossLink \"Stage\"}}{{/crossLink}} object that\n\t\t * contains this display object, or null if it has not been added\n\t\t * to one.\n\t\t * @property parent\n\t\t * @final\n\t\t * @type {Container}\n\t\t * @default null\n\t\t * @readonly\n\t\t **/\n\t\tthis.parent = null;\n\n\t\t/**\n\t\t * The left offset for this display object's registration point. For example, to make a 100x100px Bitmap rotate\n\t\t * around its center, you would set regX and {{#crossLink \"DisplayObject/regY:property\"}}{{/crossLink}} to 50.\n\t\t * Cached object's registration points should be set based on pre-cache conditions, not cached size.\n\t\t * @property regX\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis.regX = 0;\n\n\t\t/**\n\t\t * The y offset for this display object's registration point. For example, to make a 100x100px Bitmap rotate around\n\t\t * its center, you would set {{#crossLink \"DisplayObject/regX:property\"}}{{/crossLink}} and regY to 50.\n\t\t * Cached object's registration points should be set based on pre-cache conditions, not cached size.\n\t\t * @property regY\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis.regY = 0;\n\n\t\t/**\n\t\t * The rotation in degrees for this display object.\n\t\t * @property rotation\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis.rotation = 0;\n\n\t\t/**\n\t\t * The factor to stretch this display object horizontally. For example, setting scaleX to 2 will stretch the display\n\t\t * object to twice its nominal width. To horizontally flip an object, set the scale to a negative number.\n\t\t * @property scaleX\n\t\t * @type {Number}\n\t\t * @default 1\n\t\t **/\n\t\tthis.scaleX = 1;\n\n\t\t/**\n\t\t * The factor to stretch this display object vertically. For example, setting scaleY to 0.5 will stretch the display\n\t\t * object to half its nominal height. To vertically flip an object, set the scale to a negative number.\n\t\t * @property scaleY\n\t\t * @type {Number}\n\t\t * @default 1\n\t\t **/\n\t\tthis.scaleY = 1;\n\n\t\t/**\n\t\t * The factor to skew this display object horizontally.\n\t\t * @property skewX\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis.skewX = 0;\n\n\t\t/**\n\t\t * The factor to skew this display object vertically.\n\t\t * @property skewY\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis.skewY = 0;\n\n\t\t/**\n\t\t * A shadow object that defines the shadow to render on this display object. Set to `null` to remove a shadow. If\n\t\t * null, this property is inherited from the parent container.\n\t\t * @property shadow\n\t\t * @type {Shadow}\n\t\t * @default null\n\t\t **/\n\t\tthis.shadow = null;\n\n\t\t/**\n\t\t * Indicates whether this display object should be rendered to the canvas and included when running the Stage\n\t\t * {{#crossLink \"Stage/getObjectsUnderPoint\"}}{{/crossLink}} method.\n\t\t * @property visible\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t **/\n\t\tthis.visible = true;\n\n\t\t/**\n\t\t * The x (horizontal) position of the display object, relative to its parent.\n\t\t * @property x\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis.x = 0;\n\n\t\t/** The y (vertical) position of the display object, relative to its parent.\n\t\t * @property y\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis.y = 0;\n\n\t\t/**\n\t\t * If set, defines the transformation for this display object, overriding all other transformation properties\n\t\t * (x, y, rotation, scale, skew).\n\t\t * @property transformMatrix\n\t\t * @type {Matrix2D}\n\t\t * @default null\n\t\t **/\n\t\tthis.transformMatrix = null;\n\n\t\t/**\n\t\t * The composite operation indicates how the pixels of this display object will be composited with the elements\n\t\t * behind it. If `null`, this property is inherited from the parent container. For more information, read the\n\t\t * \n\t\t * whatwg spec on compositing. For a list of supported compositeOperation value, visit\n\t\t * the W3C draft on Compositing and Blending.\n\t\t * @property compositeOperation\n\t\t * @type {String}\n\t\t * @default null\n\t\t **/\n\t\tthis.compositeOperation = null;\n\n\t\t/**\n\t\t * Indicates whether the display object should be drawn to a whole pixel when\n\t\t * {{#crossLink \"Stage/snapToPixelEnabled\"}}{{/crossLink}} is true. To enable/disable snapping on whole\n\t\t * categories of display objects, set this value on the prototype (Ex. Text.prototype.snapToPixel = true).\n\t\t * @property snapToPixel\n\t\t * @type {Boolean}\n\t\t * @default true\n\t\t **/\n\t\tthis.snapToPixel = true;\n\n\t\t/**\n\t\t * An array of Filter objects to apply to this display object. Filters are only applied / updated when {{#crossLink \"cache\"}}{{/crossLink}}\n\t\t * or {{#crossLink \"updateCache\"}}{{/crossLink}} is called on the display object, and only apply to the area that is\n\t\t * cached.\n\t\t * @property filters\n\t\t * @type {Array}\n\t\t * @default null\n\t\t **/\n\t\tthis.filters = null;\n\n\t\t/**\n\t\t * A Shape instance that defines a vector mask (clipping path) for this display object. The shape's transformation\n\t\t * will be applied relative to the display object's parent coordinates (as if it were a child of the parent).\n\t\t * @property mask\n\t\t * @type {Shape}\n\t\t * @default null\n\t\t */\n\t\tthis.mask = null;\n\n\t\t/**\n\t\t * A display object that will be tested when checking mouse interactions or testing {{#crossLink \"Container/getObjectsUnderPoint\"}}{{/crossLink}}.\n\t\t * The hit area will have its transformation applied relative to this display object's coordinate space (as though\n\t\t * the hit test object were a child of this display object and relative to its regX/Y). The hitArea will be tested\n\t\t * using only its own `alpha` value regardless of the alpha value on the target display object, or the target's\n\t\t * ancestors (parents).\n\t\t * \n\t\t * If set on a {{#crossLink \"Container\"}}{{/crossLink}}, children of the Container will not receive mouse events.\n\t\t * This is similar to setting {{#crossLink \"mouseChildren\"}}{{/crossLink}} to false.\n\t\t *\n\t\t * Note that hitArea is NOT currently used by the `hitTest()` method, nor is it supported for {{#crossLink \"Stage\"}}{{/crossLink}}.\n\t\t * @property hitArea\n\t\t * @type {DisplayObject}\n\t\t * @default null\n\t\t */\n\t\tthis.hitArea = null;\n\n\t\t/**\n\t\t * A CSS cursor (ex. \"pointer\", \"help\", \"text\", etc) that will be displayed when the user hovers over this display\n\t\t * object. You must enable mouseover events using the {{#crossLink \"Stage/enableMouseOver\"}}{{/crossLink}} method to\n\t\t * use this property. Setting a non-null cursor on a Container will override the cursor set on its descendants.\n\t\t * @property cursor\n\t\t * @type {String}\n\t\t * @default null\n\t\t */\n\t\tthis.cursor = null;\n\n\n\t// private properties:\n\t\t/**\n\t\t * Moved to {{#crossLink \"BitmapCache\"}}{{/crossLink}}\n\t\t * @property _cacheScale\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 1\n\t\t * @deprecated\n\t\t **/\n\n\t\t/**\n\t\t * Moved to {{#crossLink \"BitmapCache\"}}{{/crossLink}}\n\t\t * @property _cacheDataURLID\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t * @deprecated\n\t\t */\n\n\t\t/**\n\t\t * Moved to {{#crossLink \"BitmapCache\"}}{{/crossLink}}\n\t\t * @property _cacheDataURL\n\t\t * @protected\n\t\t * @type {String}\n\t\t * @default null\n\t\t * @deprecated\n\t\t */\n\n\t\t/**\n\t\t * @property _props\n\t\t * @protected\n\t\t * @type {DisplayObject}\n\t\t * @default null\n\t\t **/\n\t\tthis._props = new createjs.DisplayProps();\n\n\t\t/**\n\t\t * @property _rectangle\n\t\t * @protected\n\t\t * @type {Rectangle}\n\t\t * @default null\n\t\t **/\n\t\tthis._rectangle = new createjs.Rectangle();\n\n\t\t/**\n\t\t * @property _bounds\n\t\t * @protected\n\t\t * @type {Rectangle}\n\t\t * @default null\n\t\t **/\n\t\tthis._bounds = null;\n\n\t\t/**\n\t\t * Where StageGL should look for required display properties, matters only for leaf display objects. Containers\n\t\t * or cached objects won't use this property, it's for native display of terminal elements.\n\t\t * @property _webGLRenderStyle\n\t\t * @protected\n\t\t * @type {number}\n\t\t * @default 0\n\t\t */\n\t\tthis._webGLRenderStyle = DisplayObject._StageGL_NONE;\n\t}\n\tvar p = createjs.extend(DisplayObject, createjs.EventDispatcher);\n\n// static properties:\n\t/**\n\t * Listing of mouse event names. Used in _hasMouseEventListener.\n\t * @property _MOUSE_EVENTS\n\t * @protected\n\t * @static\n\t * @type {Array}\n\t **/\n\tDisplayObject._MOUSE_EVENTS = [\"click\",\"dblclick\",\"mousedown\",\"mouseout\",\"mouseover\",\"pressmove\",\"pressup\",\"rollout\",\"rollover\"];\n\n\t/**\n\t * Suppresses errors generated when using features like hitTest, mouse events, and {{#crossLink \"getObjectsUnderPoint\"}}{{/crossLink}}\n\t * with cross domain content.\n\t * @property suppressCrossDomainErrors\n\t * @static\n\t * @type {Boolean}\n\t * @default false\n\t **/\n\tDisplayObject.suppressCrossDomainErrors = false;\n\n\t/**\n\t * @property _snapToPixelEnabled\n\t * @protected\n\t * @static\n\t * @type {Boolean}\n\t * @default false\n\t **/\n\tDisplayObject._snapToPixelEnabled = false; // stage.snapToPixelEnabled is temporarily copied here during a draw to provide global access.\n\n\t/**\n\t * Enum like property for determining StageGL render lookup, i.e. where to expect properties.\n\t * @property _StageGL_NONE\n\t * @protected\n\t * @static\n\t * @type {number}\n\t */\n\tDisplayObject._StageGL_NONE = 0;\n\n\t/**\n\t * Enum like property for determining StageGL render lookup, i.e. where to expect properties.\n\t * @property _StageGL_SPRITE\n\t * @protected\n\t * @static\n\t * @type {number}\n\t */\n\tDisplayObject._StageGL_SPRITE = 1;\n\n\t/**\n\t * Enum like property for determining StageGL render lookup, i.e. where to expect properties.\n\t * @property _StageGL_BITMAP\n\t * @protected\n\t * @static\n\t * @type {number}\n\t */\n\tDisplayObject._StageGL_BITMAP = 2;\n\n\t/**\n\t * @property _hitTestCanvas\n\t * @type {HTMLCanvasElement | Object}\n\t * @static\n\t * @protected\n\t **/\n\t/**\n\t * @property _hitTestContext\n\t * @type {CanvasRenderingContext2D}\n\t * @static\n\t * @protected\n\t **/\n\tvar canvas = createjs.createCanvas?createjs.createCanvas():document.createElement(\"canvas\"); // prevent errors on load in browsers without canvas.\n\tif (canvas.getContext) {\n\t\tDisplayObject._hitTestCanvas = canvas;\n\t\tDisplayObject._hitTestContext = canvas.getContext(\"2d\");\n\t\tcanvas.width = canvas.height = 1;\n\t}\n\n// events:\n\t/**\n\t * Dispatched when the user presses their left mouse button over the display object. See the \n\t * {{#crossLink \"MouseEvent\"}}{{/crossLink}} class for a listing of event properties.\n\t * @event mousedown\n\t * @since 0.6.0\n\t */\n\n\t/**\n\t * Dispatched when the user presses their left mouse button and then releases it while over the display object.\n\t * See the {{#crossLink \"MouseEvent\"}}{{/crossLink}} class for a listing of event properties.\n\t * @event click\n\t * @since 0.6.0\n\t */\n\n\t/**\n\t * Dispatched when the user double clicks their left mouse button over this display object.\n\t * See the {{#crossLink \"MouseEvent\"}}{{/crossLink}} class for a listing of event properties.\n\t * @event dblclick\n\t * @since 0.6.0\n\t */\n\n\t/**\n\t * Dispatched when the user's mouse enters this display object. This event must be enabled using \n\t * {{#crossLink \"Stage/enableMouseOver\"}}{{/crossLink}}. See also {{#crossLink \"DisplayObject/rollover:event\"}}{{/crossLink}}.\n\t * See the {{#crossLink \"MouseEvent\"}}{{/crossLink}} class for a listing of event properties.\n\t * @event mouseover\n\t * @since 0.6.0\n\t */\n\n\t/**\n\t * Dispatched when the user's mouse leaves this display object. This event must be enabled using \n\t * {{#crossLink \"Stage/enableMouseOver\"}}{{/crossLink}}. See also {{#crossLink \"DisplayObject/rollout:event\"}}{{/crossLink}}.\n\t * See the {{#crossLink \"MouseEvent\"}}{{/crossLink}} class for a listing of event properties.\n\t * @event mouseout\n\t * @since 0.6.0\n\t */\n\n\t/**\n\t * This event is similar to {{#crossLink \"DisplayObject/mouseover:event\"}}{{/crossLink}}, with the following\n\t * differences: it does not bubble, and it considers {{#crossLink \"Container\"}}{{/crossLink}} instances as an\n\t * aggregate of their content.\n\t * \n\t * For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over\n\t * shapeA and then directly on to shapeB. With a listener for {{#crossLink \"mouseover:event\"}}{{/crossLink}} on\n\t * myContainer, two events would be received, each targeting a child element:

when the mouse enters shapeA (target=shapeA)
when the mouse enters shapeB (target=shapeB)

\n\t * However, with a listener for \"rollover\" instead, only a single event is received when the mouse first enters\n\t * the aggregate myContainer content (target=myContainer).\n\t * \n\t * This event must be enabled using {{#crossLink \"Stage/enableMouseOver\"}}{{/crossLink}}.\n\t * See the {{#crossLink \"MouseEvent\"}}{{/crossLink}} class for a listing of event properties.\n\t * @event rollover\n\t * @since 0.7.0\n\t */\n\n\t/**\n\t * This event is similar to {{#crossLink \"DisplayObject/mouseout:event\"}}{{/crossLink}}, with the following\n\t * differences: it does not bubble, and it considers {{#crossLink \"Container\"}}{{/crossLink}} instances as an\n\t * aggregate of their content.\n\t * \n\t * For example, myContainer contains two overlapping children: shapeA and shapeB. The user moves their mouse over\n\t * shapeA, then directly on to shapeB, then off both. With a listener for {{#crossLink \"mouseout:event\"}}{{/crossLink}}\n\t * on myContainer, two events would be received, each targeting a child element:

when the mouse leaves shapeA (target=shapeA)
when the mouse leaves shapeB (target=shapeB)

\n\t * However, with a listener for \"rollout\" instead, only a single event is received when the mouse leaves\n\t * the aggregate myContainer content (target=myContainer).\n\t * \n\t * This event must be enabled using {{#crossLink \"Stage/enableMouseOver\"}}{{/crossLink}}.\n\t * See the {{#crossLink \"MouseEvent\"}}{{/crossLink}} class for a listing of event properties.\n\t * @event rollout\n\t * @since 0.7.0\n\t */\n\n\t/**\n\t * After a {{#crossLink \"DisplayObject/mousedown:event\"}}{{/crossLink}} occurs on a display object, a pressmove\n\t * event will be generated on that object whenever the mouse moves until the mouse press is released. This can be\n\t * useful for dragging and similar operations.\n\t *\n\t * **Please note** that if the initial mouse target from a `mousedown` event is removed from the stage after being pressed\n\t * (e.g. during a `pressmove` event), a `pressmove` event is still generated. However since it is no longer in the\n\t * display list, the event can not bubble. This means that previous ancestors (parent containers) will not receive\n\t * the event, and therefore can not re-dispatch it. If you intend to listen for `{{#crossLink \"DisplayObject/pressup:event\"}}{{/crossLink}}`\n\t * or `pressmove` on a dynamic object (such as a {{#crossLink \"MovieClip\"}}{{/crossLink}} or {{#crossLink \"Container\"}}{{/crossLink}}),\n\t * then ensure you set {{#crossLink \"Container/mouseChildren:property\"}}{{/crossLink}} to `false`.\n\t * @event pressmove\n\t * @since 0.7.0\n\t */\n\n\t/**\n\t * After a {{#crossLink \"DisplayObject/mousedown:event\"}}{{/crossLink}} occurs on a display object, a pressup event\n\t * will be generated on that object when that mouse press is released. This can be useful for dragging and similar\n\t * operations.\n\t *\n\t * **Please note** that if the initial mouse target from a `mousedown` event is removed from the stage after being pressed\n\t * (e.g. during a `pressmove` event), a `pressup` event is still generated. However since it is no longer in the\n\t * display list, the event can not bubble. This means that previous ancestors (parent containers) will not receive\n\t * the event, and therefore can not re-dispatch it. If you intend to listen for `{{#crossLink \"DisplayObject/pressmove:event\"}}{{/crossLink}}`\n\t * or `pressup` on a dynamic object (such as a {{#crossLink \"MovieClip\"}}{{/crossLink}} or {{#crossLink \"Container\"}}{{/crossLink}}),\n\t * then ensure you set {{#crossLink \"Container/mouseChildren:property\"}}{{/crossLink}} to `false`.\n\t * @event pressup\n\t * @since 0.7.0\n\t */\n\n\t/**\n\t * Dispatched when the display object is added to a parent container.\n\t * @event added\n\t */\n\n\t/**\n\t * Dispatched when the display object is removed from its parent container.\n\t * @event removed\n\t */\n\n\t/**\n\t * Dispatched on each display object on a stage whenever the stage updates. This occurs immediately before the\n\t * rendering (draw) pass. When {{#crossLink \"Stage/update\"}}{{/crossLink}} is called, first all display objects on\n\t * the stage dispatch the tick event, then all of the display objects are drawn to stage. Children will have their\n\t * {{#crossLink \"tick:event\"}}{{/crossLink}} event dispatched in order of their depth prior to the event being\n\t * dispatched on their parent.\n\t * @event tick\n\t * @param {Object} target The object that dispatched the event.\n\t * @param {String} type The event type.\n\t * @param {Array} params An array containing any arguments that were passed to the Stage.update() method. For\n\t * example if you called stage.update(\"hello\"), then the params would be [\"hello\"].\n\t * @since 0.6.0\n\t */\n\n\n// getter / setters:\n\t/**\n\t * Use the {{#crossLink \"DisplayObject/stage:property\"}}{{/crossLink}} property instead.\n\t * @method _getStage\n\t * @protected\n\t * @return {Stage}\n\t **/\n\tp._getStage = function() {\n\t\t// uses dynamic access to avoid circular dependencies;\n\t\tvar o = this, _Stage = createjs[\"Stage\"];\n\t\twhile (o.parent) { o = o.parent; }\n\t\tif (o instanceof _Stage) { return o; }\n\t\treturn null;\n\t};\n\t// DisplayObject.getStage is @deprecated. Remove for 1.1+\n\tp.getStage = createjs.deprecate(p._getStage, \"DisplayObject.getStage\");\n\n\t/**\n\t * Returns the Stage instance that this display object will be rendered on, or null if it has not been added to one.\n\t * @property stage\n\t * @type {Stage}\n\t * @readonly\n\t **/\n\n\t/**\n\t * Returns an ID number that uniquely identifies the current cache for this display object. This can be used to\n\t * determine if the cache has changed since a previous check.\n\t * Moved to {{#crossLink \"BitmapCache\"}}{{/crossLink}}\n\t * @property cacheID\n\t * @deprecated\n\t * @type {Number}\n\t * @default 0\n\t */\n\n\t/**\n\t * Set both the {{#crossLink \"DisplayObject/scaleX:property\"}}{{/crossLink}} and the {{#crossLink \"DisplayObject/scaleY\"}}{{/crossLink}}\n\t * property to the same value. Note that when you get the value, if the `scaleX` and `scaleY` are different values,\n\t * it will return only the `scaleX`.\n\t * @property scaleX\n\t * @type {Number}\n\t * @default 1\n\t */\n\ttry {\n\t\tObject.defineProperties(p, {\n\t\t\tstage: { get: p._getStage },\n\t\t\tcacheID: {\n\t\t\t\tget: function(){ return this.bitmapCache && this.bitmapCache.cacheID },\n\t\t\t\tset: function(a){ this.bitmapCache && (this.bitmapCache.cacheID = a) }\n\t\t\t},\n\t\t\tscale: {\n\t\t\t\tget: function() { return this.scaleX; },\n\t\t\t\tset: function(scale) { this.scaleX = this.scaleY = scale; },\n\t\t\t}\n\t\t});\n\t} catch (e) {}\n\n\n// public methods:\n\t/**\n\t * Returns true or false indicating whether the display object would be visible if drawn to a canvas.\n\t * This does not account for whether it would be visible within the boundaries of the stage.\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method isVisible\n\t * @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas\n\t **/\n\tp.isVisible = function() {\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0);\n\t};\n\n\t/**\n\t * Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform.\n\t * Returns true if the draw was handled (useful for overriding functionality).\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method draw\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.\n\t * @param {Boolean} [ignoreCache=false] Indicates whether the draw operation should ignore any current cache. For example,\n\t * used for drawing the cache (to prevent it from simply drawing an existing cache back into itself).\n\t * @return {Boolean}\n\t **/\n\tp.draw = function(ctx, ignoreCache) {\n\t\tvar cache = this.bitmapCache;\n\t\tif(cache && !ignoreCache) {\n\t\t\treturn cache.draw(ctx);\n\t\t}\n\t\treturn false;\n\t};\n\n\t/**\n\t * Applies this display object's transformation, alpha, globalCompositeOperation, clipping path (mask), and shadow\n\t * to the specified context. This is typically called prior to {{#crossLink \"DisplayObject/draw\"}}{{/crossLink}}.\n\t * @method updateContext\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D to update.\n\t **/\n\tp.updateContext = function(ctx) {\n\t\tvar o=this, mask=o.mask, mtx= o._props.matrix;\n\t\t\n\t\tif (mask && mask.graphics && !mask.graphics.isEmpty()) {\n\t\t\tmask.getMatrix(mtx);\n\t\t\tctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty);\n\t\t\t\n\t\t\tmask.graphics.drawAsPath(ctx);\n\t\t\tctx.clip();\n\t\t\t\n\t\t\tmtx.invert();\n\t\t\tctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty);\n\t\t}\n\t\t\n\t\tthis.getMatrix(mtx);\n\t\tvar tx = mtx.tx, ty = mtx.ty;\n\t\tif (DisplayObject._snapToPixelEnabled && o.snapToPixel) {\n\t\t\ttx = tx + (tx < 0 ? -0.5 : 0.5) | 0;\n\t\t\tty = ty + (ty < 0 ? -0.5 : 0.5) | 0;\n\t\t}\n\t\tctx.transform(mtx.a, mtx.b, mtx.c, mtx.d, tx, ty);\n\t\tctx.globalAlpha *= o.alpha;\n\t\tif (o.compositeOperation) { ctx.globalCompositeOperation = o.compositeOperation; }\n\t\tif (o.shadow) { this._applyShadow(ctx, o.shadow); }\n\t};\n\n\t/**\n\t * Draws the display object into a new element, which is then used for subsequent draws. Intended for complex content\n\t * that does not change frequently (ex. a Container with many children that do not move, or a complex vector Shape),\n\t * this can provide for much faster rendering because the content does not need to be re-rendered each tick. The\n\t * cached display object can be moved, rotated, faded, etc freely, however if its content changes, you must manually\n\t * update the cache by calling updateCache() again. You must specify the cached area via the x, y, w,\n\t * and h parameters. This defines the rectangle that will be rendered and cached using this display object's coordinates.\n\t *\n\t *

Example

\n\t * For example if you defined a Shape that drew a circle at 0, 0 with a radius of 25:\n\t *\n\t * var shape = new createjs.Shape();\n\t * shape.graphics.beginFill(\"#ff0000\").drawCircle(0, 0, 25);\n\t * shape.cache(-25, -25, 50, 50);\n\t *\n\t * Note that filters need to be defined before the cache is applied or you will have to call updateCache after\n\t * application. Check out the {{#crossLink \"Filter\"}}{{/crossLink}} class for more information. Some filters\n\t * (ex. BlurFilter) may not work as expected in conjunction with the scale param.\n\t * \n\t * Usually, the resulting cacheCanvas will have the dimensions width * scale, height * scale, however some filters (ex. BlurFilter)\n\t * will add padding to the canvas dimensions.\n\t *\n\t * In previous versions caching was handled on DisplayObject but has since been moved to {{#crossLink \"BitmapCache\"}}{{/crossLink}}.\n\t * This allows for easier interaction and alternate cache methods like WebGL with {{#crossLink \"StageGL\"}}{{/crossLink}}.\n\t * For more information on the options object, see the BitmapCache {{#crossLink \"BitmapCache/define\"}}{{/crossLink}}.\n\t *\n\t * @method cache\n\t * @param {Number} x The x coordinate origin for the cache region.\n\t * @param {Number} y The y coordinate origin for the cache region.\n\t * @param {Number} width The width of the cache region.\n\t * @param {Number} height The height of the cache region.\n\t * @param {Number} [scale=1] The scale at which the cache will be created. For example, if you cache a vector shape using\n\t * \tmyShape.cache(0,0,100,100,2) then the resulting cacheCanvas will be 200x200 px. This lets you scale and rotate\n\t * \tcached elements with greater fidelity. Default is 1.\n\t * @param {Object} [options=undefined] Specify additional parameters for the cache logic\n\t **/\n\tp.cache = function(x, y, width, height, scale, options) {\n\t\tif(!this.bitmapCache){\n\t\t\tthis.bitmapCache = new createjs.BitmapCache();\n\t\t}\n\t\tthis.bitmapCache.define(this, x, y, width, height, scale, options);\n\t};\n\n\t/**\n\t * Redraws the display object to its cache. Calling updateCache without an active cache will throw an error.\n\t * If compositeOperation is null the current cache will be cleared prior to drawing. Otherwise the display object\n\t * will be drawn over the existing cache using the specified compositeOperation.\n\t *\n\t *

Example

\n\t * Clear the current graphics of a cached shape, draw some new instructions, and then update the cache. The new line\n\t * will be drawn on top of the old one.\n\t *\n\t * // Not shown: Creating the shape, and caching it.\n\t * shapeInstance.clear();\n\t * shapeInstance.setStrokeStyle(3).beginStroke(\"#ff0000\").moveTo(100, 100).lineTo(200,200);\n\t * shapeInstance.updateCache();\n\t *\n\t * In previous versions caching was handled on DisplayObject but has since been moved to {{#crossLink \"BitmapCache\"}}{{/crossLink}}.\n\t * This allows for easier interaction and alternate cache methods like WebGL and {{#crossLink \"StageGL\"}}{{/crossLink}}.\n\t *\n\t * @method updateCache\n\t * @param {String} compositeOperation The compositeOperation to use, or null to clear the cache and redraw it.\n\t * \n\t * whatwg spec on compositing.\n\t **/\n\tp.updateCache = function(compositeOperation) {\n\t\tif(!this.bitmapCache) {\n\t\t\tthrow \"cache() must be called before updateCache()\";\n\t\t}\n\t\tthis.bitmapCache.update(compositeOperation);\n\t};\n\n\t/**\n\t * Clears the current cache. See {{#crossLink \"DisplayObject/cache\"}}{{/crossLink}} for more information.\n\t * @method uncache\n\t **/\n\tp.uncache = function() {\n\t\tif(this.bitmapCache) {\n\t\t\tthis.bitmapCache.release();\n\t\t\tthis.bitmapCache = undefined;\n\t\t}\n\t};\n\n\t/**\n\t * Returns a data URL for the cache, or null if this display object is not cached.\n\t * Only generated if the cache has changed, otherwise returns last result.\n\t * @method getCacheDataURL\n\t * @return {String} The image data url for the cache.\n\t **/\n\tp.getCacheDataURL = function() {\n\t\treturn this.bitmapCache?this.bitmapCache.getDataURL():null;\n\t};\n\n\t/**\n\t * Transforms the specified x and y position from the coordinate space of the display object\n\t * to the global (stage) coordinate space. For example, this could be used to position an HTML label\n\t * over a specific point on a nested display object. Returns a Point instance with x and y properties\n\t * correlating to the transformed coordinates on the stage.\n\t *\n\t *

Example

\n\t *\n\t * displayObject.x = 300;\n\t * displayObject.y = 200;\n\t * stage.addChild(displayObject);\n\t * var point = displayObject.localToGlobal(100, 100);\n\t * // Results in x=400, y=300\n\t *\n\t * @method localToGlobal\n\t * @param {Number} x The x position in the source display object to transform.\n\t * @param {Number} y The y position in the source display object to transform.\n\t * @param {Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned. \n\t * @return {Point} A Point instance with x and y properties correlating to the transformed coordinates\n\t * on the stage.\n\t **/\n\tp.localToGlobal = function(x, y, pt) {\n\t\treturn this.getConcatenatedMatrix(this._props.matrix).transformPoint(x,y, pt||new createjs.Point());\n\t};\n\n\t/**\n\t * Transforms the specified x and y position from the global (stage) coordinate space to the\n\t * coordinate space of the display object. For example, this could be used to determine\n\t * the current mouse position within the display object. Returns a Point instance with x and y properties\n\t * correlating to the transformed position in the display object's coordinate space.\n\t *\n\t *

Example

\n\t *\n\t * displayObject.x = 300;\n\t * displayObject.y = 200;\n\t * stage.addChild(displayObject);\n\t * var point = displayObject.globalToLocal(100, 100);\n\t * // Results in x=-200, y=-100\n\t *\n\t * @method globalToLocal\n\t * @param {Number} x The x position on the stage to transform.\n\t * @param {Number} y The y position on the stage to transform.\n\t * @param {Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned. \n\t * @return {Point} A Point instance with x and y properties correlating to the transformed position in the\n\t * display object's coordinate space.\n\t **/\n\tp.globalToLocal = function(x, y, pt) {\n\t\treturn this.getConcatenatedMatrix(this._props.matrix).invert().transformPoint(x,y, pt||new createjs.Point());\n\t};\n\n\t/**\n\t * Transforms the specified x and y position from the coordinate space of this display object to the coordinate\n\t * space of the target display object. Returns a Point instance with x and y properties correlating to the\n\t * transformed position in the target's coordinate space. Effectively the same as using the following code with\n\t * {{#crossLink \"DisplayObject/localToGlobal\"}}{{/crossLink}} and {{#crossLink \"DisplayObject/globalToLocal\"}}{{/crossLink}}.\n\t *\n\t * var pt = this.localToGlobal(x, y);\n\t * pt = target.globalToLocal(pt.x, pt.y);\n\t *\n\t * @method localToLocal\n\t * @param {Number} x The x position in the source display object to transform.\n\t * @param {Number} y The y position on the source display object to transform.\n\t * @param {DisplayObject} target The target display object to which the coordinates will be transformed.\n\t * @param {Point | Object} [pt] An object to copy the result into. If omitted a new Point object with x/y properties will be returned. \n\t * @return {Point} Returns a Point instance with x and y properties correlating to the transformed position\n\t * in the target's coordinate space.\n\t **/\n\tp.localToLocal = function(x, y, target, pt) {\n\t\tpt = this.localToGlobal(x, y, pt);\n\t\treturn target.globalToLocal(pt.x, pt.y, pt);\n\t};\n\n\t/**\n\t * Shortcut method to quickly set the transform properties on the display object. All parameters are optional.\n\t * Omitted parameters will have the default value set.\n\t *\n\t *

Example

\n\t *\n\t * displayObject.setTransform(100, 100, 2, 2);\n\t *\n\t * @method setTransform\n\t * @param {Number} [x=0] The horizontal translation (x position) in pixels\n\t * @param {Number} [y=0] The vertical translation (y position) in pixels\n\t * @param {Number} [scaleX=1] The horizontal scale, as a percentage of 1\n\t * @param {Number} [scaleY=1] the vertical scale, as a percentage of 1\n\t * @param {Number} [rotation=0] The rotation, in degrees\n\t * @param {Number} [skewX=0] The horizontal skew factor\n\t * @param {Number} [skewY=0] The vertical skew factor\n\t * @param {Number} [regX=0] The horizontal registration point in pixels\n\t * @param {Number} [regY=0] The vertical registration point in pixels\n\t * @return {DisplayObject} Returns this instance. Useful for chaining commands.\n\t * @chainable\n\t*/\n\tp.setTransform = function(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) {\n\t\tthis.x = x || 0;\n\t\tthis.y = y || 0;\n\t\tthis.scaleX = scaleX == null ? 1 : scaleX;\n\t\tthis.scaleY = scaleY == null ? 1 : scaleY;\n\t\tthis.rotation = rotation || 0;\n\t\tthis.skewX = skewX || 0;\n\t\tthis.skewY = skewY || 0;\n\t\tthis.regX = regX || 0;\n\t\tthis.regY = regY || 0;\n\t\treturn this;\n\t};\n\n\t/**\n\t * Returns a matrix based on this object's current transform.\n\t * @method getMatrix\n\t * @param {Matrix2D} matrix Optional. A Matrix2D object to populate with the calculated values. If null, a new\n\t * Matrix object is returned.\n\t * @return {Matrix2D} A matrix representing this display object's transform.\n\t **/\n\tp.getMatrix = function(matrix) {\n\t\tvar o = this, mtx = matrix&&matrix.identity() || new createjs.Matrix2D();\n\t\treturn o.transformMatrix ? mtx.copy(o.transformMatrix) : mtx.appendTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation, o.skewX, o.skewY, o.regX, o.regY);\n\t};\n\n\t/**\n\t * Generates a Matrix2D object representing the combined transform of the display object and all of its\n\t * parent Containers up to the highest level ancestor (usually the {{#crossLink \"Stage\"}}{{/crossLink}}). This can\n\t * be used to transform positions between coordinate spaces, such as with {{#crossLink \"DisplayObject/localToGlobal\"}}{{/crossLink}}\n\t * and {{#crossLink \"DisplayObject/globalToLocal\"}}{{/crossLink}}.\n\t * @method getConcatenatedMatrix\n\t * @param {Matrix2D} [matrix] A {{#crossLink \"Matrix2D\"}}{{/crossLink}} object to populate with the calculated values.\n\t * If null, a new Matrix2D object is returned.\n\t * @return {Matrix2D} The combined matrix.\n\t **/\n\tp.getConcatenatedMatrix = function(matrix) {\n\t\tvar o = this, mtx = this.getMatrix(matrix);\n\t\twhile (o = o.parent) {\n\t\t\tmtx.prependMatrix(o.getMatrix(o._props.matrix));\n\t\t}\n\t\treturn mtx;\n\t};\n\n\t/**\n\t * Generates a DisplayProps object representing the combined display properties of the object and all of its\n\t * parent Containers up to the highest level ancestor (usually the {{#crossLink \"Stage\"}}{{/crossLink}}).\n\t * @method getConcatenatedDisplayProps\n\t * @param {DisplayProps} [props] A {{#crossLink \"DisplayProps\"}}{{/crossLink}} object to populate with the calculated values.\n\t * If null, a new DisplayProps object is returned.\n\t * @return {DisplayProps} The combined display properties.\n\t **/\n\tp.getConcatenatedDisplayProps = function(props) {\n\t\tprops = props ? props.identity() : new createjs.DisplayProps();\n\t\tvar o = this, mtx = o.getMatrix(props.matrix); \n\t\tdo {\n\t\t\tprops.prepend(o.visible, o.alpha, o.shadow, o.compositeOperation);\n\t\t\t\n\t\t\t// we do this to avoid problems with the matrix being used for both operations when o._props.matrix is passed in as the props param.\n\t\t\t// this could be simplified (ie. just done as part of the prepend above) if we switched to using a pool.\n\t\t\tif (o != this) { mtx.prependMatrix(o.getMatrix(o._props.matrix)); }\n\t\t} while (o = o.parent);\n\t\treturn props;\n\t};\n\n\t/**\n\t * Tests whether the display object intersects the specified point in local coordinates (ie. draws a pixel with alpha > 0 at\n\t * the specified position). This ignores the alpha, shadow, hitArea, mask, and compositeOperation of the display object.\n\t *\n\t *

Example

\n\t *\n\t * stage.addEventListener(\"stagemousedown\", handleMouseDown);\n\t * function handleMouseDown(event) {\n\t * var hit = myShape.hitTest(event.stageX, event.stageY);\n\t * }\n\t *\n\t * Please note that shape-to-shape collision is not currently supported by EaselJS.\n\t * @method hitTest\n\t * @param {Number} x The x position to check in the display object's local coordinates.\n\t * @param {Number} y The y position to check in the display object's local coordinates.\n\t * @return {Boolean} A Boolean indicating whether a visible portion of the DisplayObject intersect the specified\n\t * local Point.\n\t*/\n\tp.hitTest = function(x, y) {\n\t\tvar ctx = DisplayObject._hitTestContext;\n\t\tctx.setTransform(1, 0, 0, 1, -x, -y);\n\t\tthis.draw(ctx);\n\n\t\tvar hit = this._testHit(ctx);\n\t\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\t\tctx.clearRect(0, 0, 2, 2);\n\t\treturn hit;\n\t};\n\n\t/**\n\t * Provides a chainable shortcut method for setting a number of properties on the instance.\n\t *\n\t *

Example

\n\t *\n\t * var myGraphics = new createjs.Graphics().beginFill(\"#ff0000\").drawCircle(0, 0, 25);\n\t * var shape = stage.addChild(new Shape()).set({graphics:myGraphics, x:100, y:100, alpha:0.5});\n\t *\n\t * @method set\n\t * @param {Object} props A generic object containing properties to copy to the DisplayObject instance.\n\t * @return {DisplayObject} Returns the instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t*/\n\tp.set = function(props) {\n\t\tfor (var n in props) { this[n] = props[n]; }\n\t\treturn this;\n\t};\n\n\t/**\n\t * Returns a rectangle representing this object's bounds in its local coordinate system (ie. with no transformation).\n\t * Objects that have been cached will return the bounds of the cache.\n\t * \n\t * Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use \n\t * {{#crossLink \"DisplayObject/setBounds\"}}{{/crossLink}} so that they are included when calculating Container\n\t * bounds.\n\t * \n\t * \n\t * \t\n\t * \t\n\t * \t\n\t * \t\n\t * \t\n\t * \t\n\t * \t\n\t*

All	\n\t * \t\tAll display objects support setting bounds manually using setBounds(). Likewise, display objects that\n\t * \t\thave been cached using cache() will return the bounds of their cache. Manual and cache bounds will override\n\t * \t\tthe automatic calculations listed below.\n\t * \t
Bitmap	\n\t * \t\tReturns the width and height of the sourceRect (if specified) or image, extending from (x=0,y=0).\n\t * \t
Sprite	\n\t * \t\tReturns the bounds of the current frame. May have non-zero x/y if a frame registration point was specified\n\t * \t\tin the spritesheet data. See also {{#crossLink \"SpriteSheet/getFrameBounds\"}}{{/crossLink}}\n\t * \t
Container	\n\t * \t\tReturns the aggregate (combined) bounds of all children that return a non-null value from getBounds().\n\t * \t
Shape	\n\t * \t\tDoes not currently support automatic bounds calculations. Use setBounds() to manually define bounds.\n\t * \t
Text	\n\t * \t\tReturns approximate bounds. Horizontal values (x/width) are quite accurate, but vertical values (y/height) are\n\t * \t\tnot, especially when using textBaseline values other than \"top\".\n\t * \t
BitmapText	\n\t * \t\tReturns approximate bounds. Values will be more accurate if spritesheet frame registration points are close\n\t * \t\tto (x=0,y=0).\n\t * \t

\n\t * \n\t * Bounds can be expensive to calculate for some objects (ex. text, or containers with many children), and\n\t * are recalculated each time you call getBounds(). You can prevent recalculation on static objects by setting the\n\t * bounds explicitly:\n\t * \n\t * \tvar bounds = obj.getBounds();\n\t * \tobj.setBounds(bounds.x, bounds.y, bounds.width, bounds.height);\n\t * \t// getBounds will now use the set values, instead of recalculating\n\t * \n\t * To reduce memory impact, the returned Rectangle instance may be reused internally; clone the instance or copy its\n\t * values if you need to retain it.\n\t * \n\t * \tvar myBounds = obj.getBounds().clone();\n\t * \t// OR:\n\t * \tmyRect.copy(obj.getBounds());\n\t * \n\t * @method getBounds\n\t * @return {Rectangle} A Rectangle instance representing the bounds, or null if bounds are not available for this\n\t * object.\n\t **/\n\tp.getBounds = function() {\n\t\tif (this._bounds) { return this._rectangle.copy(this._bounds); }\n\t\tvar cacheCanvas = this.cacheCanvas;\n\t\tif (cacheCanvas) {\n\t\t\tvar scale = this._cacheScale;\n\t\t\treturn this._rectangle.setValues(this._cacheOffsetX, this._cacheOffsetY, cacheCanvas.width/scale, cacheCanvas.height/scale);\n\t\t}\n\t\treturn null;\n\t};\n\n\t/**\n\t * Returns a rectangle representing this object's bounds in its parent's coordinate system (ie. with transformations applied).\n\t * Objects that have been cached will return the transformed bounds of the cache.\n\t * \n\t * Not all display objects can calculate their own bounds (ex. Shape). For these objects, you can use \n\t * {{#crossLink \"DisplayObject/setBounds\"}}{{/crossLink}} so that they are included when calculating Container\n\t * bounds.\n\t * \n\t * To reduce memory impact, the returned Rectangle instance may be reused internally; clone the instance or copy its\n\t * values if you need to retain it.\n\t * \n\t * Container instances calculate aggregate bounds for all children that return bounds via getBounds.\n\t * @method getTransformedBounds\n\t * @return {Rectangle} A Rectangle instance representing the bounds, or null if bounds are not available for this object.\n\t **/\n\tp.getTransformedBounds = function() {\n\t\treturn this._getBounds();\n\t};\n\n\t/**\n\t * Allows you to manually specify the bounds of an object that either cannot calculate their own bounds (ex. Shape &\n\t * Text) for future reference, or so the object can be included in Container bounds. Manually set bounds will always\n\t * override calculated bounds.\n\t * \n\t * The bounds should be specified in the object's local (untransformed) coordinates. For example, a Shape instance\n\t * with a 25px radius circle centered at 0,0 would have bounds of (-25, -25, 50, 50).\n\t * @method setBounds\n\t * @param {Number} x The x origin of the bounds. Pass null to remove the manual bounds.\n\t * @param {Number} y The y origin of the bounds.\n\t * @param {Number} width The width of the bounds.\n\t * @param {Number} height The height of the bounds.\n\t **/\n\tp.setBounds = function(x, y, width, height) {\n\t\tif (x == null) { this._bounds = x; return; }\n\t\tthis._bounds = (this._bounds || new createjs.Rectangle()).setValues(x, y, width, height);\n\t};\n\n\t/**\n\t * Returns a clone of this DisplayObject. Some properties that are specific to this instance's current context are\n\t * reverted to their defaults (for example .parent). Caches are not maintained across clones, and some elements\n\t * are copied by reference (masks, individual filter instances, hit area)\n\t * @method clone\n\t * @return {DisplayObject} A clone of the current DisplayObject instance.\n\t **/\n\tp.clone = function() {\n\t\treturn this._cloneProps(new DisplayObject());\n\t};\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t **/\n\tp.toString = function() {\n\t\treturn \"[DisplayObject (name=\"+ this.name +\")]\";\n\t};\n\n\n// private methods:\n\t/**\n\t * Called before the object gets drawn and is a chance to ensure the display state of the object is correct.\n\t * Mostly used by {{#crossLink \"MovieClip\"}}{{/crossLink}} and {{#crossLink \"BitmapText\"}}{{/crossLink}} to\n\t * correct their internal state and children prior to being drawn.\n\t *\n\t * Is manually called via draw in a {{#crossLink \"Stage\"}}{{/crossLink}} but is automatically called when\n\t * present in a {{#crossLink \"StageGL\"}}{{/crossLink}} instance.\n\t *\n\t * @method _updateState\n\t * @default null\n\t */\n\tp._updateState = null;\n\n\t// separated so it can be used more easily in subclasses:\n\t/**\n\t * @method _cloneProps\n\t * @param {DisplayObject} o The DisplayObject instance which will have properties from the current DisplayObject\n\t * instance copied into.\n\t * @return {DisplayObject} o\n\t * @protected\n\t **/\n\tp._cloneProps = function(o) {\n\t\to.alpha = this.alpha;\n\t\to.mouseEnabled = this.mouseEnabled;\n\t\to.tickEnabled = this.tickEnabled;\n\t\to.name = this.name;\n\t\to.regX = this.regX;\n\t\to.regY = this.regY;\n\t\to.rotation = this.rotation;\n\t\to.scaleX = this.scaleX;\n\t\to.scaleY = this.scaleY;\n\t\to.shadow = this.shadow;\n\t\to.skewX = this.skewX;\n\t\to.skewY = this.skewY;\n\t\to.visible = this.visible;\n\t\to.x = this.x;\n\t\to.y = this.y;\n\t\to.compositeOperation = this.compositeOperation;\n\t\to.snapToPixel = this.snapToPixel;\n\t\to.filters = this.filters==null?null:this.filters.slice(0);\n\t\to.mask = this.mask;\n\t\to.hitArea = this.hitArea;\n\t\to.cursor = this.cursor;\n\t\to._bounds = this._bounds;\n\t\treturn o;\n\t};\n\n\t/**\n\t * @method _applyShadow\n\t * @protected\n\t * @param {CanvasRenderingContext2D} ctx\n\t * @param {Shadow} shadow\n\t **/\n\tp._applyShadow = function(ctx, shadow) {\n\t\tshadow = shadow || Shadow.identity;\n\t\tctx.shadowColor = shadow.color;\n\t\tctx.shadowOffsetX = shadow.offsetX;\n\t\tctx.shadowOffsetY = shadow.offsetY;\n\t\tctx.shadowBlur = shadow.blur;\n\t};\n\n\t/**\n\t * @method _tick\n\t * @param {Object} evtObj An event object that will be dispatched to all tick listeners. This object is reused between dispatchers to reduce construction & GC costs.\n\t * @protected\n\t **/\n\tp._tick = function(evtObj) {\n\t\t// because tick can be really performance sensitive, check for listeners before calling dispatchEvent.\n\t\tvar ls = this._listeners;\n\t\tif (ls && ls[\"tick\"]) {\n\t\t\t// reset & reuse the event object to avoid construction / GC costs:\n\t\t\tevtObj.target = null;\n\t\t\tevtObj.propagationStopped = evtObj.immediatePropagationStopped = false;\n\t\t\tthis.dispatchEvent(evtObj);\n\t\t}\n\t};\n\n\t/**\n\t * @method _testHit\n\t * @protected\n\t * @param {CanvasRenderingContext2D} ctx\n\t * @return {Boolean}\n\t **/\n\tp._testHit = function(ctx) {\n\t\ttry {\n\t\t\tvar hit = ctx.getImageData(0, 0, 1, 1).data[3] > 1;\n\t\t} catch (e) {\n\t\t\tif (!DisplayObject.suppressCrossDomainErrors) {\n\t\t\t\tthrow \"An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.\";\n\t\t\t}\n\t\t}\n\t\treturn hit;\n\t};\n\n\t/**\n\t * @method _getBounds\n\t * @param {Matrix2D} matrix\n\t * @param {Boolean} ignoreTransform If true, does not apply this object's transform.\n\t * @return {Rectangle}\n\t * @protected\n\t **/\n\tp._getBounds = function(matrix, ignoreTransform){\n\t\treturn this._transformBounds(this.getBounds(), matrix, ignoreTransform);\n\t};\n\n\t/**\n\t * @method _transformBounds\n\t * @param {Rectangle} bounds\n\t * @param {Matrix2D} matrix\n\t * @param {Boolean} ignoreTransform\n\t * @return {Rectangle}\n\t * @protected\n\t **/\n\tp._transformBounds = function(bounds, matrix, ignoreTransform) {\n\t\tif (!bounds) { return bounds; }\n\t\tvar x = bounds.x, y = bounds.y, width = bounds.width, height = bounds.height, mtx = this._props.matrix;\n\t\tmtx = ignoreTransform ? mtx.identity() : this.getMatrix(mtx);\n\t\t\n\t\tif (x || y) { mtx.appendTransform(0,0,1,1,0,0,0,-x,-y); } // TODO: simplify this.\n\t\tif (matrix) { mtx.prependMatrix(matrix); }\n\t\t\n\t\tvar x_a = width*mtx.a, x_b = width*mtx.b;\n\t\tvar y_c = height*mtx.c, y_d = height*mtx.d;\n\t\tvar tx = mtx.tx, ty = mtx.ty;\n\t\t\n\t\tvar minX = tx, maxX = tx, minY = ty, maxY = ty;\n\n\t\tif ((x = x_a + tx) < minX) { minX = x; } else if (x > maxX) { maxX = x; }\n\t\tif ((x = x_a + y_c + tx) < minX) { minX = x; } else if (x > maxX) { maxX = x; }\n\t\tif ((x = y_c + tx) < minX) { minX = x; } else if (x > maxX) { maxX = x; }\n\n\t\tif ((y = x_b + ty) < minY) { minY = y; } else if (y > maxY) { maxY = y; }\n\t\tif ((y = x_b + y_d + ty) < minY) { minY = y; } else if (y > maxY) { maxY = y; }\n\t\tif ((y = y_d + ty) < minY) { minY = y; } else if (y > maxY) { maxY = y; }\n\n\t\treturn bounds.setValues(minX, minY, maxX-minX, maxY-minY);\n\t};\n\n\t/**\n\t * Indicates whether the display object has any mouse event listeners or a cursor.\n\t * @method _isMouseOpaque\n\t * @return {Boolean}\n\t * @protected\n\t **/\n\tp._hasMouseEventListener = function() {\n\t\tvar evts = DisplayObject._MOUSE_EVENTS;\n\t\tfor (var i= 0, l=evts.length; itransform and alpha properties concatenated with their parent\n * Container.\n *\n * For example, a {{#crossLink \"Shape\"}}{{/crossLink}} with x=100 and alpha=0.5, placed in a Container with x=50\n * and alpha=0.7 will be rendered to the canvas at x=150 and alpha=0.35.\n * Containers have some overhead, so you generally shouldn't create a Container to hold a single child.\n *\n *

Example

\n *\n * var container = new createjs.Container();\n * container.addChild(bitmapInstance, shapeInstance);\n * container.x = 100;\n *\n * @class Container\n * @extends DisplayObject\n * @constructor\n **/\n\tfunction Container() {\n\t\tthis.DisplayObject_constructor();\n\t\t\n\t// public properties:\n\t\t/**\n\t\t * The array of children in the display list. You should usually use the child management methods such as\n\t\t * {{#crossLink \"Container/addChild\"}}{{/crossLink}}, {{#crossLink \"Container/removeChild\"}}{{/crossLink}},\n\t\t * {{#crossLink \"Container/swapChildren\"}}{{/crossLink}}, etc, rather than accessing this directly, but it is\n\t\t * included for advanced uses.\n\t\t * @property children\n\t\t * @type Array\n\t\t * @default null\n\t\t **/\n\t\tthis.children = [];\n\t\t\n\t\t/**\n\t\t * Indicates whether the children of this container are independently enabled for mouse/pointer interaction.\n\t\t * If false, the children will be aggregated under the container - for example, a click on a child shape would\n\t\t * trigger a click event on the container.\n\t\t * @property mouseChildren\n\t\t * @type Boolean\n\t\t * @default true\n\t\t **/\n\t\tthis.mouseChildren = true;\n\t\t\n\t\t/**\n\t\t * If false, the tick will not be propagated to children of this Container. This can provide some performance benefits.\n\t\t * In addition to preventing the \"tick\" event from being dispatched, it will also prevent tick related updates\n\t\t * on some display objects (ex. Sprite & MovieClip frame advancing, DOMElement visibility handling).\n\t\t * @property tickChildren\n\t\t * @type Boolean\n\t\t * @default true\n\t\t **/\n\t\tthis.tickChildren = true;\n\t}\n\tvar p = createjs.extend(Container, createjs.DisplayObject);\n\t\n\t\n// getter / setters:\n\t/**\n\t * Use the {{#crossLink \"Container/numChildren:property\"}}{{/crossLink}} property instead.\n\t * @method _getNumChildren\n\t * @protected\n\t * @return {Number}\n\t **/\n\tp._getNumChildren = function() {\n\t\treturn this.children.length;\n\t};\n\t// Container.getNumChildren is @deprecated. Remove for 1.1+\n\tp.getNumChildren = createjs.deprecate(p._getNumChildren, \"Container.getNumChildren\");\n\n\t/**\n\t * Returns the number of children in the container.\n\t * @property numChildren\n\t * @type {Number}\n\t * @readonly\n\t **/\n\ttry {\n\t\tObject.defineProperties(p, {\n\t\t\tnumChildren: { get: p._getNumChildren }\n\t\t});\n\t} catch (e) {}\n\t\n\n// public methods:\n\t/**\n\t * Constructor alias for backwards compatibility. This method will be removed in future versions.\n\t * Subclasses should be updated to use {{#crossLink \"Utility Methods/extends\"}}{{/crossLink}}.\n\t * @method initialize\n\t * @deprecated in favour of `createjs.promote()`\n\t **/\n\tp.initialize = Container; // TODO: deprecated.\n\t\n\t/**\n\t * Returns true or false indicating whether the display object would be visible if drawn to a canvas.\n\t * This does not account for whether it would be visible within the boundaries of the stage.\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method isVisible\n\t * @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas\n\t **/\n\tp.isVisible = function() {\n\t\tvar hasContent = this.cacheCanvas || this.children.length;\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);\n\t};\n\n\t/**\n\t * Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform.\n\t * Returns true if the draw was handled (useful for overriding functionality).\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method draw\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.\n\t * @param {Boolean} [ignoreCache=false] Indicates whether the draw operation should ignore any current cache.\n\t * For example, used for drawing the cache (to prevent it from simply drawing an existing cache back\n\t * into itself).\n\t **/\n\tp.draw = function(ctx, ignoreCache) {\n\t\tif (this.DisplayObject_draw(ctx, ignoreCache)) { return true; }\n\t\t\n\t\t// this ensures we don't have issues with display list changes that occur during a draw:\n\t\tvar list = this.children.slice();\n\t\tfor (var i=0,l=list.length; iExample\n\t *\n\t * \t\tcontainer.addChild(bitmapInstance);\n\t *\n\t * You can also add multiple children at once:\n\t *\n\t * \t\tcontainer.addChild(bitmapInstance, shapeInstance, textInstance);\n\t *\n\t * @method addChild\n\t * @param {DisplayObject} child The display object to add.\n\t * @return {DisplayObject} The child that was added, or the last child if multiple children were added.\n\t **/\n\tp.addChild = function(child) {\n\t\tif (child == null) { return child; }\n\t\tvar l = arguments.length;\n\t\tif (l > 1) {\n\t\t\tfor (var i=0; iExample\n\t *\n\t * addChildAt(child1, index);\n\t *\n\t * You can also add multiple children, such as:\n\t *\n\t * addChildAt(child1, child2, ..., index);\n\t *\n\t * The index must be between 0 and numChildren. For example, to add myShape under otherShape in the display list,\n\t * you could use:\n\t *\n\t * container.addChildAt(myShape, container.getChildIndex(otherShape));\n\t *\n\t * This would also bump otherShape's index up by one. Fails silently if the index is out of range.\n\t *\n\t * @method addChildAt\n\t * @param {DisplayObject} child The display object to add.\n\t * @param {Number} index The index to add the child at.\n\t * @return {DisplayObject} Returns the last child that was added, or the last child if multiple children were added.\n\t **/\n\tp.addChildAt = function(child, index) {\n\t\tvar l = arguments.length;\n\t\tvar indx = arguments[l-1]; // can't use the same name as the index param or it replaces arguments[1]\n\t\tif (indx < 0 || indx > this.children.length) { return arguments[l-2]; }\n\t\tif (l > 2) {\n\t\t\tfor (var i=0; iExample\n\t *\n\t * container.removeChild(child);\n\t *\n\t * You can also remove multiple children:\n\t *\n\t * removeChild(child1, child2, ...);\n\t *\n\t * Returns true if the child (or children) was removed, or false if it was not in the display list.\n\t * @method removeChild\n\t * @param {DisplayObject} child The child to remove.\n\t * @return {Boolean} true if the child (or children) was removed, or false if it was not in the display list.\n\t **/\n\tp.removeChild = function(child) {\n\t\tvar l = arguments.length;\n\t\tif (l > 1) {\n\t\t\tvar good = true;\n\t\t\tfor (var i=0; iExample\n\t *\n\t * container.removeChildAt(2);\n\t *\n\t * You can also remove multiple children:\n\t *\n\t * container.removeChild(2, 7, ...)\n\t *\n\t * Returns true if the child (or children) was removed, or false if any index was out of range.\n\t * @method removeChildAt\n\t * @param {Number} index The index of the child to remove.\n\t * @return {Boolean} true if the child (or children) was removed, or false if any index was out of range.\n\t **/\n\tp.removeChildAt = function(index) {\n\t\tvar l = arguments.length;\n\t\tif (l > 1) {\n\t\t\tvar a = [];\n\t\t\tfor (var i=0; iExample\n\t *\n\t * \tcontainer.removeAllChildren();\n\t *\n\t * @method removeAllChildren\n\t **/\n\tp.removeAllChildren = function() {\n\t\tvar kids = this.children;\n\t\twhile (kids.length) { this._removeChildAt(0); }\n\t};\n\n\t/**\n\t * Returns the child at the specified index.\n\t *\n\t *

Example

\n\t *\n\t * container.getChildAt(2);\n\t *\n\t * @method getChildAt\n\t * @param {Number} index The index of the child to return.\n\t * @return {DisplayObject} The child at the specified index. Returns null if there is no child at the index.\n\t **/\n\tp.getChildAt = function(index) {\n\t\treturn this.children[index];\n\t};\n\t\n\t/**\n\t * Returns the child with the specified name.\n\t * @method getChildByName\n\t * @param {String} name The name of the child to return.\n\t * @return {DisplayObject} The child with the specified name.\n\t **/\n\tp.getChildByName = function(name) {\n\t\tvar kids = this.children;\n\t\tfor (var i=0,l=kids.length;iExample: Display children with a higher y in front.\n\t * \n\t * var sortFunction = function(obj1, obj2, options) {\n\t * if (obj1.y > obj2.y) { return 1; }\n\t * if (obj1.y < obj2.y) { return -1; }\n\t * return 0;\n\t * }\n\t * container.sortChildren(sortFunction);\n\t *\n\t * @method sortChildren\n\t * @param {Function} sortFunction the function to use to sort the child list. See JavaScript's Array.sort\n\t * documentation for details.\n\t **/\n\tp.sortChildren = function(sortFunction) {\n\t\tthis.children.sort(sortFunction);\n\t};\n\n\t/**\n\t * Returns the index of the specified child in the display list, or -1 if it is not in the display list.\n\t *\n\t *

Example

\n\t *\n\t * var index = container.getChildIndex(child);\n\t *\n\t * @method getChildIndex\n\t * @param {DisplayObject} child The child to return the index of.\n\t * @return {Number} The index of the specified child. -1 if the child is not found.\n\t **/\n\tp.getChildIndex = function(child) {\n\t\treturn createjs.indexOf(this.children, child);\n\t};\n\t\n\t/**\n\t * Swaps the children at the specified indexes. Fails silently if either index is out of range.\n\t * @method swapChildrenAt\n\t * @param {Number} index1\n\t * @param {Number} index2\n\t **/\n\tp.swapChildrenAt = function(index1, index2) {\n\t\tvar kids = this.children;\n\t\tvar o1 = kids[index1];\n\t\tvar o2 = kids[index2];\n\t\tif (!o1 || !o2) { return; }\n\t\tkids[index1] = o2;\n\t\tkids[index2] = o1;\n\t};\n\t\n\t/**\n\t * Swaps the specified children's depth in the display list. Fails silently if either child is not a child of this\n\t * Container.\n\t * @method swapChildren\n\t * @param {DisplayObject} child1\n\t * @param {DisplayObject} child2\n\t **/\n\tp.swapChildren = function(child1, child2) {\n\t\tvar kids = this.children;\n\t\tvar index1,index2;\n\t\tfor (var i=0,l=kids.length;i= l) { return; }\n\t\tfor (var i=0;i 0 at the\n\t * specified position). This ignores the alpha, shadow and compositeOperation of the display object, and all\n\t * transform properties including regX/Y.\n\t * @method hitTest\n\t * @param {Number} x The x position to check in the display object's local coordinates.\n\t * @param {Number} y The y position to check in the display object's local coordinates.\n\t * @return {Boolean} A Boolean indicating whether there is a visible section of a DisplayObject that overlaps the specified\n\t * coordinates.\n\t **/\n\tp.hitTest = function(x, y) {\n\t\t// TODO: optimize to use the fast cache check where possible.\n\t\treturn (this.getObjectUnderPoint(x, y) != null);\n\t};\n\n\t/**\n\t * Returns an array of all display objects under the specified coordinates that are in this container's display\n\t * list. This routine ignores any display objects with {{#crossLink \"DisplayObject/mouseEnabled:property\"}}{{/crossLink}}\n\t * set to `false`. The array will be sorted in order of visual depth, with the top-most display object at index 0.\n\t * This uses shape based hit detection, and can be an expensive operation to run, so it is best to use it carefully.\n\t * For example, if testing for objects under the mouse, test on tick (instead of on {{#crossLink \"DisplayObject/mousemove:event\"}}{{/crossLink}}),\n\t * and only if the mouse's position has changed.\n\t * \n\t *

By default (mode=0) this method evaluates all display objects.
By setting the `mode` parameter to `1`, the {{#crossLink \"DisplayObject/mouseEnabled:property\"}}{{/crossLink}}\n\t * \t\tand {{#crossLink \"mouseChildren:property\"}}{{/crossLink}} properties will be respected.
Setting the `mode` to `2` additionally excludes display objects that do not have active mouse event\n\t * \t \tlisteners or a {{#crossLink \"DisplayObject:cursor:property\"}}{{/crossLink}} property. That is, only objects\n\t * \t \tthat would normally intercept mouse interaction will be included. This can significantly improve performance\n\t * \t \tin some cases by reducing the number of display objects that need to be tested.

getObjectsUnderPoint()

this.children.length-1) { return false; }\n\t\tvar child = this.children[index];\n\t\tif (child) { child.parent = null; }\n\t\tthis.children.splice(index, 1);\n\t\tif (!silent) { child.dispatchEvent(\"removed\"); }\n\t\treturn true;\n\t};\n\n\t/**\n\t * @method _getObjectsUnderPoint\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @param {Array} arr\n\t * @param {Boolean} mouse If true, it will respect mouse interaction properties like mouseEnabled, mouseChildren, and active listeners.\n\t * @param {Boolean} activeListener If true, there is an active mouse event listener on a parent object.\n\t * @param {Number} currentDepth Indicates the current depth of the search.\n\t * @return {DisplayObject}\n\t * @protected\n\t **/\n\tp._getObjectsUnderPoint = function(x, y, arr, mouse, activeListener, currentDepth) {\n\t\tcurrentDepth = currentDepth || 0;\n\t\tif (!currentDepth && !this._testMask(this, x, y)) { return null; }\n\t\tvar mtx, ctx = createjs.DisplayObject._hitTestContext;\n\t\tactiveListener = activeListener || (mouse&&this._hasMouseEventListener());\n\n\t\t// draw children one at a time, and check if we get a hit:\n\t\tvar children = this.children, l = children.length;\n\t\tfor (var i=l-1; i>=0; i--) {\n\t\t\tvar child = children[i];\n\t\t\tvar hitArea = child.hitArea;\n\t\t\tif (!child.visible || (!hitArea && !child.isVisible()) || (mouse && !child.mouseEnabled)) { continue; }\n\t\t\tif (!hitArea && !this._testMask(child, x, y)) { continue; }\n\t\t\t\n\t\t\t// if a child container has a hitArea then we only need to check its hitAre2a, so we can treat it as a normal DO:\n\t\t\tif (!hitArea && child instanceof Container) {\n\t\t\t\tvar result = child._getObjectsUnderPoint(x, y, arr, mouse, activeListener, currentDepth+1);\n\t\t\t\tif (!arr && result) { return (mouse && !this.mouseChildren) ? this : result; }\n\t\t\t} else {\n\t\t\t\tif (mouse && !activeListener && !child._hasMouseEventListener()) { continue; }\n\t\t\t\t\n\t\t\t\t// TODO: can we pass displayProps forward, to avoid having to calculate this backwards every time? It's kind of a mixed bag. When we're only hunting for DOs with event listeners, it may not make sense.\n\t\t\t\tvar props = child.getConcatenatedDisplayProps(child._props);\n\t\t\t\tmtx = props.matrix;\n\t\t\t\t\n\t\t\t\tif (hitArea) {\n\t\t\t\t\tmtx.appendMatrix(hitArea.getMatrix(hitArea._props.matrix));\n\t\t\t\t\tprops.alpha = hitArea.alpha;\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\tctx.globalAlpha = props.alpha;\n\t\t\t\tctx.setTransform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx-x, mtx.ty-y);\n\t\t\t\t(hitArea||child).draw(ctx);\n\t\t\t\tif (!this._testHit(ctx)) { continue; }\n\t\t\t\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\t\t\t\tctx.clearRect(0, 0, 2, 2);\n\t\t\t\tif (arr) { arr.push(child); }\n\t\t\t\telse { return (mouse && !this.mouseChildren) ? this : child; }\n\t\t\t}\n\t\t}\n\t\treturn null;\n\t};\n\t\n\t/**\n\t * @method _testMask\n\t * @param {DisplayObject} target\n\t * @param {Number} x\n\t * @param {Number} y\n\t * @return {Boolean} Indicates whether the x/y is within the masked region.\n\t * @protected\n\t **/\n\tp._testMask = function(target, x, y) {\n\t\tvar mask = target.mask;\n\t\tif (!mask || !mask.graphics || mask.graphics.isEmpty()) { return true; }\n\t\t\n\t\tvar mtx = this._props.matrix, parent = target.parent;\n\t\tmtx = parent ? parent.getConcatenatedMatrix(mtx) : mtx.identity();\n\t\tmtx = mask.getMatrix(mask._props.matrix).prependMatrix(mtx);\n\t\t\n\t\tvar ctx = createjs.DisplayObject._hitTestContext;\n\t\tctx.setTransform(mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx-x, mtx.ty-y);\n\t\t\n\t\t// draw the mask as a solid fill:\n\t\tmask.graphics.drawAsPath(ctx);\n\t\tctx.fillStyle = \"#000\";\n\t\tctx.fill();\n\t\t\n\t\tif (!this._testHit(ctx)) { return false; }\n\t\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\t\tctx.clearRect(0, 0, 2, 2);\n\t\t\n\t\treturn true;\n\t};\n\t\n\t/**\n\t * @method _getBounds\n\t * @param {Matrix2D} matrix\n\t * @param {Boolean} ignoreTransform If true, does not apply this object's transform.\n\t * @return {Rectangle}\n\t * @protected\n\t **/\n\tp._getBounds = function(matrix, ignoreTransform) {\n\t\tvar bounds = this.DisplayObject_getBounds();\n\t\tif (bounds) { return this._transformBounds(bounds, matrix, ignoreTransform); }\n\t\t\n\t\tvar mtx = this._props.matrix;\n\t\tmtx = ignoreTransform ? mtx.identity() : this.getMatrix(mtx);\n\t\tif (matrix) { mtx.prependMatrix(matrix); }\n\t\t\n\t\tvar l = this.children.length, rect=null;\n\t\tfor (var i=0; iExample\n\t * This example creates a stage, adds a child to it, then uses {{#crossLink \"Ticker\"}}{{/crossLink}} to update the child\n\t * and redraw the stage using {{#crossLink \"Stage/update\"}}{{/crossLink}}.\n\t *\n\t * var stage = new createjs.Stage(\"canvasElementId\");\n\t * var image = new createjs.Bitmap(\"imagePath.png\");\n\t * stage.addChild(image);\n\t * createjs.Ticker.addEventListener(\"tick\", handleTick);\n\t * function handleTick(event) {\n\t * image.x += 10;\n\t * stage.update();\n\t * }\n\t *\n\t * @class Stage\n\t * @extends Container\n\t * @constructor\n\t * @param {HTMLCanvasElement | String | Object} canvas A canvas object that the Stage will render to, or the string id\n\t * of a canvas object in the current document.\n\t **/\n\tfunction Stage(canvas) {\n\t\tthis.Container_constructor();\n\t\n\t\n\t// public properties:\n\t\t/**\n\t\t * Indicates whether the stage should automatically clear the canvas before each render. You can set this to false\n\t\t * to manually control clearing (for generative art, or when pointing multiple stages at the same canvas for\n\t\t * example).\n\t\t *\n\t\t *

Example

\n\t\t *\n\t\t * var stage = new createjs.Stage(\"canvasId\");\n\t\t * stage.autoClear = false;\n\t\t *\n\t\t * @property autoClear\n\t\t * @type Boolean\n\t\t * @default true\n\t\t **/\n\t\tthis.autoClear = true;\n\t\n\t\t/**\n\t\t * The canvas the stage will render to. Multiple stages can share a single canvas, but you must disable autoClear for all but the\n\t\t * first stage that will be ticked (or they will clear each other's render).\n\t\t *\n\t\t * When changing the canvas property you must disable the events on the old canvas, and enable events on the\n\t\t * new canvas or mouse events will not work as expected. For example:\n\t\t *\n\t\t * myStage.enableDOMEvents(false);\n\t\t * myStage.canvas = anotherCanvas;\n\t\t * myStage.enableDOMEvents(true);\n\t\t *\n\t\t * @property canvas\n\t\t * @type HTMLCanvasElement | Object\n\t\t **/\n\t\tthis.canvas = (typeof canvas == \"string\") ? document.getElementById(canvas) : canvas;\n\t\n\t\t/**\n\t\t * The current mouse X position on the canvas. If the mouse leaves the canvas, this will indicate the most recent\n\t\t * position over the canvas, and mouseInBounds will be set to false.\n\t\t * @property mouseX\n\t\t * @type Number\n\t\t * @readonly\n\t\t **/\n\t\tthis.mouseX = 0;\n\t\n\t\t/**\n\t\t * The current mouse Y position on the canvas. If the mouse leaves the canvas, this will indicate the most recent\n\t\t * position over the canvas, and mouseInBounds will be set to false.\n\t\t * @property mouseY\n\t\t * @type Number\n\t\t * @readonly\n\t\t **/\n\t\tthis.mouseY = 0;\n\t\n\t\t/**\n\t\t * Specifies the area of the stage to affect when calling update. This can be use to selectively\n\t\t * re-draw specific regions of the canvas. If null, the whole canvas area is drawn.\n\t\t * @property drawRect\n\t\t * @type {Rectangle}\n\t\t */\n\t\tthis.drawRect = null;\n\t\n\t\t/**\n\t\t * Indicates whether display objects should be rendered on whole pixels. You can set the\n\t\t * {{#crossLink \"DisplayObject/snapToPixel\"}}{{/crossLink}} property of\n\t\t * display objects to false to enable/disable this behaviour on a per instance basis.\n\t\t * @property snapToPixelEnabled\n\t\t * @type Boolean\n\t\t * @default false\n\t\t **/\n\t\tthis.snapToPixelEnabled = false;\n\t\n\t\t/**\n\t\t * Indicates whether the mouse is currently within the bounds of the canvas.\n\t\t * @property mouseInBounds\n\t\t * @type Boolean\n\t\t * @default false\n\t\t **/\n\t\tthis.mouseInBounds = false;\n\t\n\t\t/**\n\t\t * If true, tick callbacks will be called on all display objects on the stage prior to rendering to the canvas.\n\t\t * @property tickOnUpdate\n\t\t * @type Boolean\n\t\t * @default true\n\t\t **/\n\t\tthis.tickOnUpdate = true;\n\t\n\t\t/**\n\t\t * If true, mouse move events will continue to be called when the mouse leaves the target canvas. See\n\t\t * {{#crossLink \"Stage/mouseInBounds:property\"}}{{/crossLink}}, and {{#crossLink \"MouseEvent\"}}{{/crossLink}}\n\t\t * x/y/rawX/rawY.\n\t\t * @property mouseMoveOutside\n\t\t * @type Boolean\n\t\t * @default false\n\t\t **/\n\t\tthis.mouseMoveOutside = false;\n\t\t\n\t\t\n\t\t/**\n\t\t * Prevents selection of other elements in the html page if the user clicks and drags, or double clicks on the canvas.\n\t\t * This works by calling `preventDefault()` on any mousedown events (or touch equivalent) originating on the canvas.\n\t\t * @property preventSelection\n\t\t * @type Boolean\n\t\t * @default true\n\t\t **/\n\t\tthis.preventSelection = true;\n\t\n\t\t/**\n\t\t * The hitArea property is not supported for Stage.\n\t\t * @property hitArea\n\t\t * @type {DisplayObject}\n\t\t * @default null\n\t\t */\n\t\t \n\t\t \n\t// private properties:\n\t\t/**\n\t\t * Holds objects with data for each active pointer id. Each object has the following properties:\n\t\t * x, y, event, target, overTarget, overX, overY, inBounds, posEvtObj (native event that last updated position)\n\t\t * @property _pointerData\n\t\t * @type {Object}\n\t\t * @private\n\t\t */\n\t\tthis._pointerData = {};\n\t\n\t\t/**\n\t\t * Number of active pointers.\n\t\t * @property _pointerCount\n\t\t * @type {Object}\n\t\t * @private\n\t\t */\n\t\tthis._pointerCount = 0;\n\t\n\t\t/**\n\t\t * The ID of the primary pointer.\n\t\t * @property _primaryPointerID\n\t\t * @type {Object}\n\t\t * @private\n\t\t */\n\t\tthis._primaryPointerID = null;\n\t\n\t\t/**\n\t\t * @property _mouseOverIntervalID\n\t\t * @protected\n\t\t * @type Number\n\t\t **/\n\t\tthis._mouseOverIntervalID = null;\n\t\t\n\t\t/**\n\t\t * @property _nextStage\n\t\t * @protected\n\t\t * @type Stage\n\t\t **/\n\t\tthis._nextStage = null;\n\t\t\n\t\t/**\n\t\t * @property _prevStage\n\t\t * @protected\n\t\t * @type Stage\n\t\t **/\n\t\tthis._prevStage = null;\n\t\t\n\t\t\n\t// initialize:\n\t\tthis.enableDOMEvents(true);\n\t}\n\tvar p = createjs.extend(Stage, createjs.Container);\n\n// events:\n\t/**\n\t * Dispatched when the user moves the mouse over the canvas.\n\t * See the {{#crossLink \"MouseEvent\"}}{{/crossLink}} class for a listing of event properties.\n\t * @event stagemousemove\n\t * @since 0.6.0\n\t */\n\n\t/**\n\t * Dispatched when the user presses their left mouse button on the canvas. See the {{#crossLink \"MouseEvent\"}}{{/crossLink}}\n\t * class for a listing of event properties.\n\t * @event stagemousedown\n\t * @since 0.6.0\n\t */\n\n\t/**\n\t * Dispatched when the user the user presses somewhere on the stage, then releases the mouse button anywhere that the page can detect it (this varies slightly between browsers).\n\t * You can use {{#crossLink \"Stage/mouseInBounds:property\"}}{{/crossLink}} to check whether the mouse is currently within the stage bounds.\n\t * See the {{#crossLink \"MouseEvent\"}}{{/crossLink}} class for a listing of event properties.\n\t * @event stagemouseup\n\t * @since 0.6.0\n\t */\n\n\t/**\n\t * Dispatched when the mouse moves from within the canvas area (mouseInBounds == true) to outside it (mouseInBounds == false).\n\t * This is currently only dispatched for mouse input (not touch). See the {{#crossLink \"MouseEvent\"}}{{/crossLink}}\n\t * class for a listing of event properties.\n\t * @event mouseleave\n\t * @since 0.7.0\n\t */\n\n\t/**\n\t * Dispatched when the mouse moves into the canvas area (mouseInBounds == false) from outside it (mouseInBounds == true).\n\t * This is currently only dispatched for mouse input (not touch). See the {{#crossLink \"MouseEvent\"}}{{/crossLink}}\n\t * class for a listing of event properties.\n\t * @event mouseenter\n\t * @since 0.7.0\n\t */\n\t \n\t/**\n\t * Dispatched each update immediately before the tick event is propagated through the display list.\n\t * You can call preventDefault on the event object to cancel propagating the tick event.\n\t * @event tickstart\n\t * @since 0.7.0\n\t */\n\t \n\t/**\n\t * Dispatched each update immediately after the tick event is propagated through the display list. Does not fire if\n\t * tickOnUpdate is false. Precedes the \"drawstart\" event.\n\t * @event tickend\n\t * @since 0.7.0\n\t */\n\t \n\t/**\n\t * Dispatched each update immediately before the canvas is cleared and the display list is drawn to it.\n\t * You can call preventDefault on the event object to cancel the draw.\n\t * @event drawstart\n\t * @since 0.7.0\n\t */\n\t \n\t/**\n\t * Dispatched each update immediately after the display list is drawn to the canvas and the canvas context is restored.\n\t * @event drawend\n\t * @since 0.7.0\n\t */\n\n\t \n// getter / setters:\n\t/**\n\t * Specifies a target stage that will have mouse / touch interactions relayed to it after this stage handles them.\n\t * This can be useful in cases where you have multiple layered canvases and want user interactions\n\t * events to pass through. For example, this would relay mouse events from topStage to bottomStage:\n\t *\n\t * topStage.nextStage = bottomStage;\n\t *\n\t * To disable relaying, set nextStage to null.\n\t * \n\t * MouseOver, MouseOut, RollOver, and RollOut interactions are also passed through using the mouse over settings\n\t * of the top-most stage, but are only processed if the target stage has mouse over interactions enabled.\n\t * Considerations when using roll over in relay targets:

The top-most (first) stage must have mouse over interactions enabled (via enableMouseOver)
All stages that wish to participate in mouse over interaction must enable them via enableMouseOver
All relay targets will share the frequency value of the top-most stage

\n\t * To illustrate, in this example the targetStage would process mouse over interactions at 10hz (despite passing\n\t * 30 as it's desired frequency):\n\t * \ttopStage.nextStage = targetStage;\n\t * \ttopStage.enableMouseOver(10);\n\t * \ttargetStage.enableMouseOver(30);\n\t * \n\t * If the target stage's canvas is completely covered by this stage's canvas, you may also want to disable its\n\t * DOM events using:\n\t * \n\t *\ttargetStage.enableDOMEvents(false);\n\t * \n\t * @property nextStage\n\t * @type {Stage}\n\t **/\n\tp._get_nextStage = function() {\n\t\treturn this._nextStage;\n\t};\n\tp._set_nextStage = function(value) {\n\t\tif (this._nextStage) { this._nextStage._prevStage = null; }\n\t\tif (value) { value._prevStage = this; }\n\t\tthis._nextStage = value;\n\t};\n\t\n\ttry {\n\t\tObject.defineProperties(p, {\n\t\t\tnextStage: { get: p._get_nextStage, set: p._set_nextStage }\n\t\t});\n\t} catch (e) {} // TODO: use Log\n\n\n// public methods:\n\t/**\n\t * Each time the update method is called, the stage will call {{#crossLink \"Stage/tick\"}}{{/crossLink}}\n\t * unless {{#crossLink \"Stage/tickOnUpdate:property\"}}{{/crossLink}} is set to false,\n\t * and then render the display list to the canvas.\n\t *\n\t * @method update\n\t * @param {Object} [props] Props object to pass to `tick()`. Should usually be a {{#crossLink \"Ticker\"}}{{/crossLink}} event object, or similar object with a delta property.\n\t **/\n\tp.update = function(props) {\n\t\tif (!this.canvas) { return; }\n\t\tif (this.tickOnUpdate) { this.tick(props); }\n\t\tif (this.dispatchEvent(\"drawstart\", false, true) === false) { return; }\n\t\tcreatejs.DisplayObject._snapToPixelEnabled = this.snapToPixelEnabled;\n\t\tvar r = this.drawRect, ctx = this.canvas.getContext(\"2d\");\n\t\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\t\tif (this.autoClear) {\n\t\t\tif (r) { ctx.clearRect(r.x, r.y, r.width, r.height); }\n\t\t\telse { ctx.clearRect(0, 0, this.canvas.width+1, this.canvas.height+1); }\n\t\t}\n\t\tctx.save();\n\t\tif (this.drawRect) {\n\t\t\tctx.beginPath();\n\t\t\tctx.rect(r.x, r.y, r.width, r.height);\n\t\t\tctx.clip();\n\t\t}\n\t\tthis.updateContext(ctx);\n\t\tthis.draw(ctx, false);\n\t\tctx.restore();\n\t\tthis.dispatchEvent(\"drawend\");\n\t};\n\t\n\t/**\n\t * Propagates a tick event through the display list. This is automatically called by {{#crossLink \"Stage/update\"}}{{/crossLink}}\n\t * unless {{#crossLink \"Stage/tickOnUpdate:property\"}}{{/crossLink}} is set to false.\n\t *\n\t * If a props object is passed to `tick()`, then all of its properties will be copied to the event object that is\n\t * propagated to listeners.\n\t *\n\t * Some time-based features in EaselJS (for example {{#crossLink \"Sprite/framerate\"}}{{/crossLink}} require that\n\t * a {{#crossLink \"Ticker/tick:event\"}}{{/crossLink}} event object (or equivalent object with a delta property) be\n\t * passed as the `props` parameter to `tick()`. For example:\n\t *\n\t * \tTicker.on(\"tick\", handleTick);\n\t * \tfunction handleTick(evtObj) {\n\t * \t\t// clone the event object from Ticker, and add some custom data to it:\n\t * \t\tvar evt = evtObj.clone().set({greeting:\"hello\", name:\"world\"});\n\t * \t\t\n\t * \t\t// pass it to stage.update():\n\t * \t\tmyStage.update(evt); // subsequently calls tick() with the same param\n\t * \t}\n\t * \t\n\t * \t// ...\n\t * \tmyDisplayObject.on(\"tick\", handleDisplayObjectTick);\n\t * \tfunction handleDisplayObjectTick(evt) {\n\t * \t\tconsole.log(evt.delta); // the delta property from the Ticker tick event object\n\t * \t\tconsole.log(evt.greeting, evt.name); // custom data: \"hello world\"\n\t * \t}\n\t * \n\t * @method tick\n\t * @param {Object} [props] An object with properties that should be copied to the event object. Should usually be a Ticker event object, or similar object with a delta property.\n\t **/\n\tp.tick = function(props) {\n\t\tif (!this.tickEnabled || this.dispatchEvent(\"tickstart\", false, true) === false) { return; }\n\t\tvar evtObj = new createjs.Event(\"tick\");\n\t\tif (props) {\n\t\t\tfor (var n in props) {\n\t\t\t\tif (props.hasOwnProperty(n)) { evtObj[n] = props[n]; }\n\t\t\t}\n\t\t}\n\t\tthis._tick(evtObj);\n\t\tthis.dispatchEvent(\"tickend\");\n\t};\n\n\t/**\n\t * Default event handler that calls the Stage {{#crossLink \"Stage/update\"}}{{/crossLink}} method when a {{#crossLink \"DisplayObject/tick:event\"}}{{/crossLink}}\n\t * event is received. This allows you to register a Stage instance as a event listener on {{#crossLink \"Ticker\"}}{{/crossLink}}\n\t * directly, using:\n\t *\n\t * Ticker.addEventListener(\"tick\", myStage);\n\t *\n\t * Note that if you subscribe to ticks using this pattern, then the tick event object will be passed through to\n\t * display object tick handlers, instead of delta and paused parameters.\n\t * @property handleEvent\n\t * @type Function\n\t **/\n\tp.handleEvent = function(evt) {\n\t\tif (evt.type == \"tick\") { this.update(evt); }\n\t};\n\n\t/**\n\t * Clears the target canvas. Useful if {{#crossLink \"Stage/autoClear:property\"}}{{/crossLink}} is set to `false`.\n\t * @method clear\n\t **/\n\tp.clear = function() {\n\t\tif (!this.canvas) { return; }\n\t\tvar ctx = this.canvas.getContext(\"2d\");\n\t\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\t\tctx.clearRect(0, 0, this.canvas.width+1, this.canvas.height+1);\n\t};\n\n\t/**\n\t * Returns a data url that contains a Base64-encoded image of the contents of the stage. The returned data url can\n\t * be specified as the src value of an image element.\n\t * @method toDataURL\n\t * @param {String} [backgroundColor] The background color to be used for the generated image. Any valid CSS color\n\t * value is allowed. The default value is a transparent background.\n\t * @param {String} [mimeType=\"image/png\"] The MIME type of the image format to be create. The default is \"image/png\". If an unknown MIME type\n\t * is passed in, or if the browser does not support the specified MIME type, the default value will be used.\n\t * @return {String} a Base64 encoded image.\n\t **/\n\tp.toDataURL = function(backgroundColor, mimeType) {\n\t\tvar data, ctx = this.canvas.getContext('2d'), w = this.canvas.width, h = this.canvas.height;\n\n\t\tif (backgroundColor) {\n\t\t\tdata = ctx.getImageData(0, 0, w, h);\n\t\t\tvar compositeOperation = ctx.globalCompositeOperation;\n\t\t\tctx.globalCompositeOperation = \"destination-over\";\n\t\t\t\n\t\t\tctx.fillStyle = backgroundColor;\n\t\t\tctx.fillRect(0, 0, w, h);\n\t\t}\n\n\t\tvar dataURL = this.canvas.toDataURL(mimeType||\"image/png\");\n\n\t\tif(backgroundColor) {\n\t\t\tctx.putImageData(data, 0, 0);\n\t\t\tctx.globalCompositeOperation = compositeOperation;\n\t\t}\n\n\t\treturn dataURL;\n\t};\n\n\t/**\n\t * Enables or disables (by passing a frequency of 0) mouse over ({{#crossLink \"DisplayObject/mouseover:event\"}}{{/crossLink}}\n\t * and {{#crossLink \"DisplayObject/mouseout:event\"}}{{/crossLink}}) and roll over events ({{#crossLink \"DisplayObject/rollover:event\"}}{{/crossLink}}\n\t * and {{#crossLink \"DisplayObject/rollout:event\"}}{{/crossLink}}) for this stage's display list. These events can\n\t * be expensive to generate, so they are disabled by default. The frequency of the events can be controlled\n\t * independently of mouse move events via the optional `frequency` parameter.\n\t *\n\t *

Example

\n\t *\n\t * var stage = new createjs.Stage(\"canvasId\");\n\t * stage.enableMouseOver(10); // 10 updates per second\n\t *\n\t * @method enableMouseOver\n\t * @param {Number} [frequency=20] Optional param specifying the maximum number of times per second to broadcast\n\t * mouse over/out events. Set to 0 to disable mouse over events completely. Maximum is 50. A lower frequency is less\n\t * responsive, but uses less CPU.\n\t **/\n\tp.enableMouseOver = function(frequency) {\n\t\tif (this._mouseOverIntervalID) {\n\t\t\tclearInterval(this._mouseOverIntervalID);\n\t\t\tthis._mouseOverIntervalID = null;\n\t\t\tif (frequency == 0) {\n\t\t\t\tthis._testMouseOver(true);\n\t\t\t}\n\t\t}\n\t\tif (frequency == null) { frequency = 20; }\n\t\telse if (frequency <= 0) { return; }\n\t\tvar o = this;\n\t\tthis._mouseOverIntervalID = setInterval(function(){ o._testMouseOver(); }, 1000/Math.min(50,frequency));\n\t};\n\n\t/**\n\t * Enables or disables the event listeners that stage adds to DOM elements (window, document and canvas). It is good\n\t * practice to disable events when disposing of a Stage instance, otherwise the stage will continue to receive\n\t * events from the page.\n\t *\n\t * When changing the canvas property you must disable the events on the old canvas, and enable events on the\n\t * new canvas or mouse events will not work as expected. For example:\n\t *\n\t * myStage.enableDOMEvents(false);\n\t * myStage.canvas = anotherCanvas;\n\t * myStage.enableDOMEvents(true);\n\t *\n\t * @method enableDOMEvents\n\t * @param {Boolean} [enable=true] Indicates whether to enable or disable the events. Default is true.\n\t **/\n\tp.enableDOMEvents = function(enable) {\n\t\tif (enable == null) { enable = true; }\n\t\tvar n, o, ls = this._eventListeners;\n\t\tif (!enable && ls) {\n\t\t\tfor (n in ls) {\n\t\t\t\to = ls[n];\n\t\t\t\to.t.removeEventListener(n, o.f, false);\n\t\t\t}\n\t\t\tthis._eventListeners = null;\n\t\t} else if (enable && !ls && this.canvas) {\n\t\t\tvar t = window.addEventListener ? window : document;\n\t\t\tvar _this = this;\n\t\t\tls = this._eventListeners = {};\n\t\t\tls[\"mouseup\"] = {t:t, f:function(e) { _this._handleMouseUp(e)} };\n\t\t\tls[\"mousemove\"] = {t:t, f:function(e) { _this._handleMouseMove(e)} };\n\t\t\tls[\"dblclick\"] = {t:this.canvas, f:function(e) { _this._handleDoubleClick(e)} };\n\t\t\tls[\"mousedown\"] = {t:this.canvas, f:function(e) { _this._handleMouseDown(e)} };\n\n\t\t\tfor (n in ls) {\n\t\t\t\to = ls[n];\n\t\t\t\to.t.addEventListener(n, o.f, false);\n\t\t\t}\n\t\t}\n\t};\n\n\t/**\n\t * Stage instances cannot be cloned.\n\t * @method clone\n\t **/\n\tp.clone = function() {\n\t\tthrow(\"Stage cannot be cloned.\");\n\t};\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t **/\n\tp.toString = function() {\n\t\treturn \"[Stage (name=\"+ this.name +\")]\";\n\t};\n\n\n// private methods:\n\t/**\n\t * @method _getElementRect\n\t * @protected\n\t * @param {HTMLElement} e\n\t **/\n\tp._getElementRect = function(e) {\n\t\tvar bounds;\n\t\ttry { bounds = e.getBoundingClientRect(); } // this can fail on disconnected DOM elements in IE9\n\t\tcatch (err) { bounds = {top: e.offsetTop, left: e.offsetLeft, width:e.offsetWidth, height:e.offsetHeight}; }\n\n\t\tvar offX = (window.pageXOffset || document.scrollLeft || 0) - (document.clientLeft || document.body.clientLeft || 0);\n\t\tvar offY = (window.pageYOffset || document.scrollTop || 0) - (document.clientTop || document.body.clientTop || 0);\n\n\t\tvar styles = window.getComputedStyle ? getComputedStyle(e,null) : e.currentStyle; // IE <9 compatibility.\n\t\tvar padL = parseInt(styles.paddingLeft)+parseInt(styles.borderLeftWidth);\n\t\tvar padT = parseInt(styles.paddingTop)+parseInt(styles.borderTopWidth);\n\t\tvar padR = parseInt(styles.paddingRight)+parseInt(styles.borderRightWidth);\n\t\tvar padB = parseInt(styles.paddingBottom)+parseInt(styles.borderBottomWidth);\n\n\t\t// note: in some browsers bounds properties are read only.\n\t\treturn {\n\t\t\tleft: bounds.left+offX+padL,\n\t\t\tright: bounds.right+offX-padR,\n\t\t\ttop: bounds.top+offY+padT,\n\t\t\tbottom: bounds.bottom+offY-padB\n\t\t}\n\t};\n\n\t/**\n\t * @method _getPointerData\n\t * @protected\n\t * @param {Number} id\n\t **/\n\tp._getPointerData = function(id) {\n\t\tvar data = this._pointerData[id];\n\t\tif (!data) { data = this._pointerData[id] = {x:0,y:0}; }\n\t\treturn data;\n\t};\n\n\t/**\n\t * @method _handleMouseMove\n\t * @protected\n\t * @param {MouseEvent} e\n\t **/\n\tp._handleMouseMove = function(e) {\n\t\tif(!e){ e = window.event; }\n\t\tthis._handlePointerMove(-1, e, e.pageX, e.pageY);\n\t};\n\n\t/**\n\t * @method _handlePointerMove\n\t * @protected\n\t * @param {Number} id\n\t * @param {Event} e\n\t * @param {Number} pageX\n\t * @param {Number} pageY\n\t * @param {Stage} owner Indicates that the event has already been captured & handled by the indicated stage.\n\t **/\n\tp._handlePointerMove = function(id, e, pageX, pageY, owner) {\n\t\tif (this._prevStage && owner === undefined) { return; } // redundant listener.\n\t\tif (!this.canvas) { return; }\n\t\tvar nextStage=this._nextStage, o=this._getPointerData(id);\n\n\t\tvar inBounds = o.inBounds;\n\t\tthis._updatePointerPosition(id, e, pageX, pageY);\n\t\tif (inBounds || o.inBounds || this.mouseMoveOutside) {\n\t\t\tif (id === -1 && o.inBounds == !inBounds) {\n\t\t\t\tthis._dispatchMouseEvent(this, (inBounds ? \"mouseleave\" : \"mouseenter\"), false, id, o, e);\n\t\t\t}\n\t\t\t\n\t\t\tthis._dispatchMouseEvent(this, \"stagemousemove\", false, id, o, e);\n\t\t\tthis._dispatchMouseEvent(o.target, \"pressmove\", true, id, o, e);\n\t\t}\n\t\t\n\t\tnextStage&&nextStage._handlePointerMove(id, e, pageX, pageY, null);\n\t};\n\n\t/**\n\t * @method _updatePointerPosition\n\t * @protected\n\t * @param {Number} id\n\t * @param {Event} e\n\t * @param {Number} pageX\n\t * @param {Number} pageY\n\t **/\n\tp._updatePointerPosition = function(id, e, pageX, pageY) {\n\t\tvar rect = this._getElementRect(this.canvas);\n\t\tpageX -= rect.left;\n\t\tpageY -= rect.top;\n\n\t\tvar w = this.canvas.width;\n\t\tvar h = this.canvas.height;\n\t\tpageX /= (rect.right-rect.left)/w;\n\t\tpageY /= (rect.bottom-rect.top)/h;\n\t\tvar o = this._getPointerData(id);\n\t\tif (o.inBounds = (pageX >= 0 && pageY >= 0 && pageX <= w-1 && pageY <= h-1)) {\n\t\t\to.x = pageX;\n\t\t\to.y = pageY;\n\t\t} else if (this.mouseMoveOutside) {\n\t\t\to.x = pageX < 0 ? 0 : (pageX > w-1 ? w-1 : pageX);\n\t\t\to.y = pageY < 0 ? 0 : (pageY > h-1 ? h-1 : pageY);\n\t\t}\n\n\t\to.posEvtObj = e;\n\t\to.rawX = pageX;\n\t\to.rawY = pageY;\n\n\t\tif (id === this._primaryPointerID || id === -1) {\n\t\t\tthis.mouseX = o.x;\n\t\t\tthis.mouseY = o.y;\n\t\t\tthis.mouseInBounds = o.inBounds;\n\t\t}\n\t};\n\n\t/**\n\t * @method _handleMouseUp\n\t * @protected\n\t * @param {MouseEvent} e\n\t **/\n\tp._handleMouseUp = function(e) {\n\t\tthis._handlePointerUp(-1, e, false);\n\t};\n\n\t/**\n\t * @method _handlePointerUp\n\t * @protected\n\t * @param {Number} id\n\t * @param {Event} e\n\t * @param {Boolean} clear\n\t * @param {Stage} owner Indicates that the event has already been captured & handled by the indicated stage.\n\t **/\n\tp._handlePointerUp = function(id, e, clear, owner) {\n\t\tvar nextStage = this._nextStage, o = this._getPointerData(id);\n\t\tif (this._prevStage && owner === undefined) { return; } // redundant listener.\n\t\t\n\t\tvar target=null, oTarget = o.target;\n\t\tif (!owner && (oTarget || nextStage)) { target = this._getObjectsUnderPoint(o.x, o.y, null, true); }\n\t\t\n\t\tif (o.down) { this._dispatchMouseEvent(this, \"stagemouseup\", false, id, o, e, target); o.down = false; }\n\t\t\n\t\tif (target == oTarget) { this._dispatchMouseEvent(oTarget, \"click\", true, id, o, e); }\n\t\tthis._dispatchMouseEvent(oTarget, \"pressup\", true, id, o, e);\n\t\t\n\t\tif (clear) {\n\t\t\tif (id==this._primaryPointerID) { this._primaryPointerID = null; }\n\t\t\tdelete(this._pointerData[id]);\n\t\t} else { o.target = null; }\n\t\t\n\t\tnextStage&&nextStage._handlePointerUp(id, e, clear, owner || target && this);\n\t};\n\n\t/**\n\t * @method _handleMouseDown\n\t * @protected\n\t * @param {MouseEvent} e\n\t **/\n\tp._handleMouseDown = function(e) {\n\t\tthis._handlePointerDown(-1, e, e.pageX, e.pageY);\n\t};\n\n\t/**\n\t * @method _handlePointerDown\n\t * @protected\n\t * @param {Number} id\n\t * @param {Event} e\n\t * @param {Number} pageX\n\t * @param {Number} pageY\n\t * @param {Stage} owner Indicates that the event has already been captured & handled by the indicated stage.\n\t **/\n\tp._handlePointerDown = function(id, e, pageX, pageY, owner) {\n\t\tif (this.preventSelection) { e.preventDefault(); }\n\t\tif (this._primaryPointerID == null || id === -1) { this._primaryPointerID = id; } // mouse always takes over.\n\t\t\n\t\tif (pageY != null) { this._updatePointerPosition(id, e, pageX, pageY); }\n\t\tvar target = null, nextStage = this._nextStage, o = this._getPointerData(id);\n\t\tif (!owner) { target = o.target = this._getObjectsUnderPoint(o.x, o.y, null, true); }\n\n\t\tif (o.inBounds) { this._dispatchMouseEvent(this, \"stagemousedown\", false, id, o, e, target); o.down = true; }\n\t\tthis._dispatchMouseEvent(target, \"mousedown\", true, id, o, e);\n\t\t\n\t\tnextStage&&nextStage._handlePointerDown(id, e, pageX, pageY, owner || target && this);\n\t};\n\n\t/**\n\t * @method _testMouseOver\n\t * @param {Boolean} clear If true, clears the mouseover / rollover (ie. no target)\n\t * @param {Stage} owner Indicates that the event has already been captured & handled by the indicated stage.\n\t * @param {Stage} eventTarget The stage that the cursor is actively over.\n\t * @protected\n\t **/\n\tp._testMouseOver = function(clear, owner, eventTarget) {\n\t\tif (this._prevStage && owner === undefined) { return; } // redundant listener.\n\t\t\n\t\tvar nextStage = this._nextStage;\n\t\tif (!this._mouseOverIntervalID) {\n\t\t\t// not enabled for mouseover, but should still relay the event.\n\t\t\tnextStage&&nextStage._testMouseOver(clear, owner, eventTarget);\n\t\t\treturn;\n\t\t}\n\t\tvar o = this._getPointerData(-1);\n\t\t// only update if the mouse position has changed. This provides a lot of optimization, but has some trade-offs.\n\t\tif (!o || (!clear && this.mouseX == this._mouseOverX && this.mouseY == this._mouseOverY && this.mouseInBounds)) { return; }\n\t\t\n\t\tvar e = o.posEvtObj;\n\t\tvar isEventTarget = eventTarget || e&&(e.target == this.canvas);\n\t\tvar target=null, common = -1, cursor=\"\", t, i, l;\n\t\t\n\t\tif (!owner && (clear || this.mouseInBounds && isEventTarget)) {\n\t\t\ttarget = this._getObjectsUnderPoint(this.mouseX, this.mouseY, null, true);\n\t\t\tthis._mouseOverX = this.mouseX;\n\t\t\tthis._mouseOverY = this.mouseY;\n\t\t}\n\n\t\tvar oldList = this._mouseOverTarget||[];\n\t\tvar oldTarget = oldList[oldList.length-1];\n\t\tvar list = this._mouseOverTarget = [];\n\n\t\t// generate ancestor list and check for cursor:\n\t\tt = target;\n\t\twhile (t) {\n\t\t\tlist.unshift(t);\n\t\t\tif (!cursor) { cursor = t.cursor; }\n\t\t\tt = t.parent;\n\t\t}\n\t\tthis.canvas.style.cursor = cursor;\n\t\tif (!owner && eventTarget) { eventTarget.canvas.style.cursor = cursor; }\n\n\t\t// find common ancestor:\n\t\tfor (i=0,l=list.length; icommon; i--) {\n\t\t\tthis._dispatchMouseEvent(oldList[i], \"rollout\", false, -1, o, e, target);\n\t\t}\n\n\t\tfor (i=list.length-1; i>common; i--) {\n\t\t\tthis._dispatchMouseEvent(list[i], \"rollover\", false, -1, o, e, oldTarget);\n\t\t}\n\n\t\tif (oldTarget != target) {\n\t\t\tthis._dispatchMouseEvent(target, \"mouseover\", true, -1, o, e, oldTarget);\n\t\t}\n\t\t\n\t\tnextStage&&nextStage._testMouseOver(clear, owner || target && this, eventTarget || isEventTarget && this);\n\t};\n\n\t/**\n\t * @method _handleDoubleClick\n\t * @protected\n\t * @param {MouseEvent} e\n\t * @param {Stage} owner Indicates that the event has already been captured & handled by the indicated stage.\n\t **/\n\tp._handleDoubleClick = function(e, owner) {\n\t\tvar target=null, nextStage=this._nextStage, o=this._getPointerData(-1);\n\t\tif (!owner) {\n\t\t\ttarget = this._getObjectsUnderPoint(o.x, o.y, null, true);\n\t\t\tthis._dispatchMouseEvent(target, \"dblclick\", true, -1, o, e);\n\t\t}\n\t\tnextStage&&nextStage._handleDoubleClick(e, owner || target && this);\n\t};\n\n\t/**\n\t * @method _dispatchMouseEvent\n\t * @protected\n\t * @param {DisplayObject} target\n\t * @param {String} type\n\t * @param {Boolean} bubbles\n\t * @param {Number} pointerId\n\t * @param {Object} o\n\t * @param {MouseEvent} [nativeEvent]\n\t * @param {DisplayObject} [relatedTarget]\n\t **/\n\tp._dispatchMouseEvent = function(target, type, bubbles, pointerId, o, nativeEvent, relatedTarget) {\n\t\t// TODO: might be worth either reusing MouseEvent instances, or adding a willTrigger method to avoid GC.\n\t\tif (!target || (!bubbles && !target.hasEventListener(type))) { return; }\n\t\t/*\n\t\t// TODO: account for stage transformations?\n\t\tthis._mtx = this.getConcatenatedMatrix(this._mtx).invert();\n\t\tvar pt = this._mtx.transformPoint(o.x, o.y);\n\t\tvar evt = new createjs.MouseEvent(type, bubbles, false, pt.x, pt.y, nativeEvent, pointerId, pointerId==this._primaryPointerID || pointerId==-1, o.rawX, o.rawY);\n\t\t*/\n\t\tvar evt = new createjs.MouseEvent(type, bubbles, false, o.x, o.y, nativeEvent, pointerId, pointerId === this._primaryPointerID || pointerId === -1, o.rawX, o.rawY, relatedTarget);\n\t\ttarget.dispatchEvent(evt);\n\t};\n\n\n\tcreatejs.Stage = createjs.promote(Stage, \"Container\");\n}());\n\n//##############################################################################\n// StageGL.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n/*\n * README IF EDITING:\n * Terminology for developers:\n *\n * Vertex: a point that help defines a shape, 3 per triangle. Usually has an x,y,z but can have more/less info.\n * Vertex Property: a piece of information attached to the vertex like a vector3 containing x,y,z\n * Index/Indices: used in groups of 3 to define a triangle, points to vertices by their index in an array (some render\n * \t\tmodes do not use these)\n * Card: a group of 2 triangles used to display a rectangular image\n * U/V: common names for the [0-1] texture co-ordinates on an image\n * Batch: a single call to the renderer, best done as little as possible so multiple cards are put into a single batch\n * Buffer: WebGL array data\n * Program/Shader: For every vertex we run the Vertex shader. The results are used per pixel by the Fragment shader. When\n * \t\tcombined and paired these are a shader \"program\"\n * Texture: WebGL representation of image data and associated extra information\n * Slot: A space on the GPU into which textures can be loaded for use in a batch, using \"ActiveTexture\" switches texture slot.\n */\n\n(function () {\n\t\"use strict\";\n\n\t/**\n\t * A StageGL instance is the root level {{#crossLink \"Container\"}}{{/crossLink}} for an WebGL-optimized display list,\n\t * which is used in place of the usual {{#crossLink \"Stage\"}}{{/crossLink}}. This class should behave identically to\n\t * a {{#crossLink \"Stage\"}}{{/crossLink}} except for WebGL-specific functionality.\n\t *\n\t * Each time the {{#crossLink \"Stage/tick\"}}{{/crossLink}} method is called, the display list is rendered to the\n\t * target <canvas/> instance, ignoring non-WebGL-compatible display objects. On devices and browsers that don't\n\t * support WebGL, content will automatically be rendered to canvas 2D context instead.\n\t *\n\t *

Limitations

\n\t * - {{#crossLink \"Shape\"}}{{/crossLink}}, {{#crossLink \"Shadow\"}}{{/crossLink}}, and {{#crossLink \"Text\"}}{{/crossLink}}\n\t * \tare not rendered when added to the display list.\n\t * - To display something StageGL cannot render, {{#crossLink \"displayObject/cache\"}}{{/crossLink}} the object.\n\t *\tCaches can be rendered regardless of source.\n\t * - Images are wrapped as a webGL \"Texture\". Each graphics card has a limit to its concurrent Textures, too many \n\t * Textures will noticeably slow performance.\n\t * - Each cache counts as an individual Texture. As such {{#crossLink \"SpriteSheet\"}}{{/crossLink}} and \n\t * {{#crossLink \"SpriteSheetBuilder\"}}{{/crossLink}} are recommended practices to help keep texture counts low.\n\t * - To use any image node (DOM Image/Canvas Element) between multiple StageGL instances it must be a \n\t * {{#crossLink \"Bitmap/clone\"}}{{/crossLink}}, otherwise the GPU texture loading and tracking will get confused.\n\t * - to avoid an up/down scaled render you must call {{#crossLink \"StageGL/updateViewport\"}}{{/crossLink}} if you\n\t * resize your canvas after making a StageGL instance, this will properly size the WebGL context stored in memory.\n\t * - Best performance in demanding scenarios will come from manual management of texture memory, but it is handled\n\t * automatically by default. See {{#crossLink \"StageGL/releaseTexture\"}}{{/crossLink}} for details.\n\t *\n\t *

Example

\n\t * This example creates a StageGL instance, adds a child to it, then uses the EaselJS {{#crossLink \"Ticker\"}}{{/crossLink}}\n\t * to update the child and redraw the stage.\n\t *\n\t * var stage = new createjs.StageGL(\"canvasElementId\");\n\t *\n\t * var image = new createjs.Bitmap(\"imagePath.png\");\n\t * stage.addChild(image);\n\t *\n\t * createjs.Ticker.on(\"tick\", handleTick);\n\t *\n\t * function handleTick(event) {\n\t * image.x += 10;\n\t * stage.update();\n\t * }\n\t *\n\t *

Notes

\n\t * - StageGL is not currently included in the minified version of EaselJS.\n\t * - {{#crossLink \"SpriteContainer\"}}{{/crossLink}} (the previous approach to WebGL with EaselJS) has been deprecated.\n\t * - Earlier versions of WebGL support in EaselJS (SpriteStage and SpriteContainer) had hard limitations on images\n\t * \tper container, which have been solved.\n\t *\n\t * @class StageGL\n\t * @extends Stage\n\t * @constructor\n\t * @param {HTMLCanvasElement | String | Object} canvas A canvas object that StageGL will render to, or the string id\n\t * of a canvas object in the current DOM.\n\t * @param {Object} options All the option parameters in a reference object, some are not supported by some browsers.\n\t * @param {Boolean} [options.preserveBuffer=false] If `true`, the canvas is NOT auto-cleared by WebGL (the spec\n\t * discourages setting this to `true`). This is useful if you want persistent draw effects.\n\t * @param {Boolean} [options.antialias=false] Specifies whether or not the browser's WebGL implementation should try\n\t * to perform anti-aliasing. This will also enable linear pixel sampling on power-of-two textures (smoother images).\n\t * @param {Boolean} [options.transparent=false] If `true`, the canvas is transparent. This is very\n\t * expensive, and should be used with caution.\n\t * @param {Boolean} [options.premultiply=false] Alters color handling. If `true`, this assumes the shader must\n\t * account for pre-multiplied alpha. This can help avoid visual halo effects with some assets, but may also cause\n\t * problems with other assets.\n\t * @param {Integer} [options.autoPurge=1200] How often the system should automatically dump unused textures with\n\t * `purgeTextures(autoPurge)` every `autoPurge/2` draws. See {{#crossLink \"StageGL/purgeTextures\"}}{{/crossLink}} for more\n\t * information.\n\t */\n\tfunction StageGL(canvas, options) {\n\t\tthis.Stage_constructor(canvas);\n\n\t\tif (options !== undefined) {\n\t\t\tif (typeof options !== \"object\"){ throw(\"Invalid options object\"); }\n\t\t\tvar premultiply = options.premultiply;\n\t\t\tvar transparent = options.transparent;\n\t\t\tvar antialias = options.antialias;\n\t\t\tvar preserveBuffer = options.preserveBuffer;\n\t\t\tvar autoPurge = options.autoPurge;\n\t\t}\n\n// public properties:\n\t\t/**\n\t\t * Console log potential issues and problems. This is designed to have minimal performance impact, so\n\t\t * if extensive debugging information is required, this may be inadequate. See {{#crossLink \"WebGLInspector\"}}{{/crossLink}}\n\t\t * @property vocalDebug\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis.vocalDebug = false;\n\n// private properties:\n\t\t/**\n\t\t * Specifies whether or not the canvas is auto-cleared by WebGL. The WebGL spec discourages `true`.\n\t\t * If true, the canvas is NOT auto-cleared by WebGL. Used when the canvas context is created and requires\n\t\t * context re-creation to update.\n\t\t * @property _preserveBuffer\n\t\t * @protected\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis._preserveBuffer = preserveBuffer||false;\n\n\t\t/**\n\t\t * Specifies whether or not the browser's WebGL implementation should try to perform anti-aliasing.\n\t\t * @property _antialias\n\t\t * @protected\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis._antialias = antialias||false;\n\n\t\t/**\n\t\t * Specifies whether or not the browser's WebGL implementation should be transparent.\n\t\t * @property _transparent\n\t\t * @protected\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis._transparent = transparent||false;\n\n\t\t/**\n\t\t * Specifies whether or not StageGL is handling colours as premultiplied alpha.\n\t\t * @property _premultiply\n\t\t * @protected\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t */\n\t\tthis._premultiply = premultiply||false;\n\n\t\t/**\n\t\t * Internal value of {{#crossLink \"StageGL/autoPurge\"}}{{/crossLink}}\n\t\t * @property _autoPurge\n\t\t * @protected\n\t\t * @type {Integer}\n\t\t * @default null\n\t\t */\n\t\tthis._autoPurge = undefined;\n\t\tthis.autoPurge = autoPurge;\t//getter/setter handles setting the real value and validating\n\n\t\t/**\n\t\t * The width in px of the drawing surface saved in memory.\n\t\t * @property _viewportWidth\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis._viewportWidth = 0;\n\n\t\t/**\n\t\t * The height in px of the drawing surface saved in memory.\n\t\t * @property _viewportHeight\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis._viewportHeight = 0;\n\n\t\t/**\n\t\t * A 2D projection matrix used to convert WebGL's viewspace into canvas co-ordinates. Regular canvas display\n\t\t * uses Top-Left values of [0,0] where WebGL uses a Center [0,0] Top-Right [1,1] (euclidean) system.\n\t\t * @property _projectionMatrix\n\t\t * @protected\n\t\t * @type {Float32Array}\n\t\t * @default null\n\t\t */\n\t\tthis._projectionMatrix = null;\n\n\t\t/**\n\t\t * The current WebGL canvas context. Often shorthanded to just \"gl\" in many parts of the code.\n\t\t * @property _webGLContext\n\t\t * @protected\n\t\t * @type {WebGLRenderingContext}\n\t\t * @default null\n\t\t */\n\t\tthis._webGLContext = null;\n\n\t\t/**\n\t\t * The color to use when the WebGL canvas has been cleared. May appear as a background color. Defaults to grey.\n\t\t * @property _clearColor\n\t\t * @protected\n\t\t * @type {Object}\n\t\t * @default {r: 0.50, g: 0.50, b: 0.50, a: 0.00}\n\t\t */\n\t\tthis._clearColor = {r: 0.50, g: 0.50, b: 0.50, a: 0.00};\n\n\t\t/**\n\t\t * The maximum number of cards (aka a single sprite) that can be drawn in one draw call. Use getter/setters to\n\t\t * modify otherwise internal buffers may be incorrect sizes.\n\t\t * @property _maxCardsPerBatch\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default StageGL.DEFAULT_MAX_BATCH_SIZE (10000)\n\t\t */\n\t\tthis._maxCardsPerBatch = StageGL.DEFAULT_MAX_BATCH_SIZE;\t\t\t\t\t\t\t\t\t\t\t\t\t\t//TODO: write getter/setters for this\n\n\t\t/**\n\t\t * The shader program used to draw the current batch.\n\t\t * @property _activeShader\n\t\t * @protected\n\t\t * @type {WebGLProgram}\n\t\t * @default null\n\t\t */\n\t\tthis._activeShader = null;\n\n\t\t/**\n\t\t * The vertex position data for the current draw call.\n\t\t * @property _vertices\n\t\t * @protected\n\t\t * @type {Float32Array}\n\t\t * @default null\n\t\t */\n\t\tthis._vertices = null;\n\n\t\t/**\n\t\t * The WebGL buffer attached to {{#crossLink \"StageGL/_vertices:property\"}}{{/crossLink}}.\n\t\t * @property _vertexPositionBuffer\n\t\t * @protected\n\t\t * @type {WebGLBuffer}\n\t\t * @default null\n\t\t */\n\t\tthis._vertexPositionBuffer = null;\n\n\t\t/**\n\t\t * The vertex U/V data for the current draw call.\n\t\t * @property _uvs\n\t\t * @protected\n\t\t * @type {Float32Array}\n\t\t * @default null\n\t\t */\n\t\tthis._uvs = null;\n\n\t\t/**\n\t\t * The WebGL buffer attached to {{#crossLink \"StageGL/_uvs:property\"}}{{/crossLink}}.\n\t\t * @property _uvPositionBuffer\n\t\t * @protected\n\t\t * @type {WebGLBuffer}\n\t\t * @default null\n\t\t */\n\t\tthis._uvPositionBuffer = null;\n\n\t\t/**\n\t\t * The vertex indices data for the current draw call.\n\t\t * @property _indices\n\t\t * @protected\n\t\t * @type {Float32Array}\n\t\t * @default null\n\t\t */\n\t\tthis._indices = null;\n\n\t\t/**\n\t\t * The WebGL buffer attached to {{#crossLink \"StageGL/_indices:property\"}}{{/crossLink}}.\n\t\t * @property _textureIndexBuffer\n\t\t * @protected\n\t\t * @type {WebGLBuffer}\n\t\t * @default null\n\t\t */\n\t\tthis._textureIndexBuffer = null;\n\n\t\t/**\n\t\t * The vertices data for the current draw call.\n\t\t * @property _alphas\n\t\t * @protected\n\t\t * @type {Float32Array}\n\t\t * @default null\n\t\t */\n\t\tthis._alphas = null;\n\n\t\t/**\n\t\t * The WebGL buffer attached to {{#crossLink \"StageGL/_alphas:property\"}}{{/crossLink}}.\n\t\t * @property _alphaBuffer\n\t\t * @protected\n\t\t * @type {WebGLBuffer}\n\t\t * @default null\n\t\t */\n\t\tthis._alphaBuffer = null;\n\n\t\t/**\n\t\t * An index based lookup of every WebGL Texture currently in use.\n\t\t * @property _drawTexture\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._textureDictionary = [];\n\n\t\t/**\n\t\t * A string based lookup hash of which index a texture is stored at in the dictionary. The lookup string is\n\t\t * often the src url.\n\t\t * @property _textureIDs\n\t\t * @protected\n\t\t * @type {Object}\n\t\t */\n\t\tthis._textureIDs = {};\n\n\t\t/**\n\t\t * An array of all the textures currently loaded into the GPU. The index in the array matches the GPU index.\n\t\t * @property _batchTextures\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._batchTextures = [];\n\n\t\t/**\n\t\t * An array of all the simple filler textures used to prevent issues with missing textures in a batch.\n\t\t * @property _baseTextures\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._baseTextures = [];\n\n\t\t/**\n\t\t * The number of concurrent textures the GPU can handle. This value is dynamically set from WebGL during initialization\n\t\t * via `gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS)`. The WebGL spec states that the lowest guaranteed value is 8,\n\t\t * but it could be higher. Do not set this value higher than the value returned by the GPU. Setting it lower will\n\t\t * probably reduce performance, but may be advisable to reserve slots for custom filter work.\n\t\t * NOTE: Can also act as a length for {{#crossLink \"StageGL/_batchTextures:property\"}}.\n\t\t * @property _batchTextureCount\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 8\n\t\t */\n\t\tthis._batchTextureCount = 8;\n\n\t\t/**\n\t\t * The location at which the last texture was inserted into a GPU slot in {{#crossLink \"StageGL/_batchTextures:property\"}}{{/crossLink}}.\n\t\t * Manual control of this variable can yield improvements in performance by intelligently replacing textures\n\t\t * inside a batch to reduce texture re-load. It is impossible to write automated general use code, as it requires\n\t\t * display list look ahead inspection and/or render foreknowledge.\n\t\t * @property _lastTextureInsert\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default -1\n\t\t */\n\t\tthis._lastTextureInsert = -1;\n\n\t\t/**\n\t\t * The current batch being drawn, A batch consists of a call to `drawElements` on the GPU. Many of these calls\n\t\t * can occur per draw.\n\t\t * @property _batchId\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis._batchID = 0;\n\n\t\t/**\n\t\t * The current draw being performed, may contain multiple batches. Comparing to {{#crossLink \"StageGL/_batchID:property\"}}{{/crossLink}}\n\t\t * can reveal batching efficiency.\n\t\t * @property _drawID\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis._drawID = 0;\n\n\t\t/**\n\t\t * Used to prevent textures in certain GPU slots from being replaced by an insert.\n\t\t * @property _slotBlackList\n\t\t * @protected\n\t\t * @type {Array}\n\t\t */\n\t\tthis._slotBlacklist = [];\n\n\t\t/**\n\t\t * Used to prevent nested draw calls from accidentally overwriting drawing information by tracking depth.\n\t\t * @property _isDrawing\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis._isDrawing = 0;\n\n\t\t/**\n\t\t * Used to ensure every canvas used as a texture source has a unique ID.\n\t\t * @property _lastTrackedCanvas\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t */\n\t\tthis._lastTrackedCanvas = 0;\n\n\t\t/**\n\t\t * Controls whether final rendering output of a {{#crossLink \"cacheDraw\"}}{{/crossLink}} is the canvas or a render\n\t\t * texture. See the {{#crossLink \"cache\"}}{{/crossLink}} function modifications for full implications and discussion.\n\t\t * @property isCacheControlled\n\t\t * @protected\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t * @todo LM: is this supposed to be _isCacheControlled since its private?\n\t\t */\n\t\tthis.isCacheControlled = false;\n\n\t\t/**\n\t\t * Used to counter-position the object being cached so it aligns with the cache surface. Additionally ensures\n\t\t * that all rendering starts with a top level container.\n\t\t * @property _cacheContainer\n\t\t * @protected\n\t\t * @type {Container}\n\t\t * @default An instance of an EaselJS Container.\n\t\t */\n\t\tthis._cacheContainer = new createjs.Container();\n\n\t\t// and begin\n\t\tthis._initializeWebGL();\n\t}\n\tvar p = createjs.extend(StageGL, createjs.Stage);\n\n// static methods:\n\t/**\n\t * Calculate the U/V co-ordinate based info for sprite frames. Instead of pixel count it uses a 0-1 space. Also includes\n\t * the ability to get info back for a specific frame, or only calculate that one frame.\n\t *\n\t * //generate UV rects for all entries\n\t * StageGL.buildUVRects( spriteSheetA );\n\t * //generate all, fetch the first\n\t * var firstFrame = StageGL.buildUVRects( spriteSheetB, 0 );\n\t * //generate the rect for just a single frame for performance's sake\n\t * var newFrame = StageGL.buildUVRects( dynamicSpriteSheet, newFrameIndex, true );\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method buildUVRects\n\t * @param {SpriteSheet} spritesheet The spritesheet to find the frames on\n\t * @param {int} [target=-1] The index of the frame to return\n\t * @param {Boolean} [onlyTarget=false] Whether \"target\" is the only frame that gets calculated\n\t * @static\n\t * @return {Object} the target frame if supplied and present or a generic frame {t, l, b, r}\n\t */\n\tStageGL.buildUVRects = function (spritesheet, target, onlyTarget) {\n\t\tif (!spritesheet || !spritesheet._frames) { return null; }\n\t\tif (target === undefined) { target = -1; }\n\t\tif (onlyTarget === undefined) { onlyTarget = false; }\n\n\t\tvar start = (target != -1 && onlyTarget)?(target):(0);\n\t\tvar end = (target != -1 && onlyTarget)?(target+1):(spritesheet._frames.length);\n\t\tfor (var i=start; i 0.0035) {\" +\t\t// 1/255 = 0.0039, so ignore any value below 1 because it's probably noise\n\t\t\t\"gl_FragColor = vec4(color.rgb/color.a, color.a * alphaValue);\" +\n\t\t\"} else {\" +\n\t\t\t\"gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);\" +\n\t\t\"}\"\n\t);\n\n\t//TODO: DHG: a real particle shader\n\t/**\n\t * @property PARTICLE_VERTEX_BODY\n\t * @todo\n\t * @final\n\t * @static\n\t * @type {String}\n\t * @readonly\n\t */\n\tStageGL.PARTICLE_VERTEX_BODY = (\n\t\tStageGL.REGULAR_VERTEX_BODY\n\t);\n\t/**\n\t * @property PARTICLE_FRAGMENT_BODY\n\t * @todo\n\t * @final\n\t * @static\n\t * @type {String}\n\t * @readonly\n\t */\n\tStageGL.PARTICLE_FRAGMENT_BODY = (\n\t\tStageGL.REGULAR_FRAGMENT_BODY\n\t);\n\n\t/**\n\t * Portion of the shader that contains the \"varying\" properties required in both vertex and fragment shaders. The\n\t * cover shader is designed to be a simple vertex/uv only texture render that covers the render surface. Shader\n\t * code may contain templates that are replaced pre-compile.\n\t * @property COVER_VARYING_HEADER\n\t * @static\n\t * @final\n\t * @type {String}\n\t * @readonly\n\t */\n\tStageGL.COVER_VARYING_HEADER = (\n\t\t\"precision mediump float;\" +\n\n\t\t\"varying highp vec2 vRenderCoord;\" +\n\t\t\"varying highp vec2 vTextureCoord;\"\n\t);\n\n\t/**\n\t * Actual full header for the vertex shader. Includes the varying header. The cover shader is designed to be a\n\t * simple vertex/uv only texture render that covers the render surface. Shader code may contain templates that are\n\t * replaced pre-compile.\n\t * @property COVER_VERTEX_HEADER\n\t * @static\n\t * @final\n\t * @type {String}\n\t * @readonly\n\t */\n\tStageGL.COVER_VERTEX_HEADER = (\n\t\tStageGL.COVER_VARYING_HEADER +\n\t\t\"attribute vec2 vertexPosition;\" +\n\t\t\"attribute vec2 uvPosition;\" +\n\t\t\"uniform float uUpright;\"\n\t);\n\n\t/**\n\t * Actual full header for the fragment shader. Includes the varying header. The cover shader is designed to be a\n\t * simple vertex/uv only texture render that covers the render surface. Shader code may contain templates that are\n\t * replaced pre-compile.\n\t * @property COVER_FRAGMENT_HEADER\n\t * @static\n\t * @final\n\t * @type {String}\n\t * @readonly\n\t */\n\tStageGL.COVER_FRAGMENT_HEADER = (\n\t\tStageGL.COVER_VARYING_HEADER +\n\t\t\"uniform sampler2D uSampler;\"\n\t);\n\n\t/**\n\t * Body of the vertex shader. The cover shader is designed to be a simple vertex/uv only texture render that covers\n\t * the render surface. Shader code may contain templates that are replaced pre-compile.\n\t * @property COVER_VERTEX_BODY\n\t * @static\n\t * @final\n\t * @type {String}\n\t * @readonly\n\t */\n\tStageGL.COVER_VERTEX_BODY = (\n\t\t\"void main(void) {\" +\n\t\t\t\"gl_Position = vec4(vertexPosition.x, vertexPosition.y, 0.0, 1.0);\" +\n\t\t\t\"vRenderCoord = uvPosition;\" +\n\t\t\t\"vTextureCoord = vec2(uvPosition.x, abs(uUpright - uvPosition.y));\" +\n\t\t\"}\"\n\t);\n\n\t/**\n\t * Body of the fragment shader. The cover shader is designed to be a simple vertex/uv only texture render that\n\t * covers the render surface. Shader code may contain templates that are replaced pre-compile.\n\t * @property COVER_FRAGMENT_BODY\n\t * @static\n\t * @final\n\t * @type {String}\n\t * @readonly\n\t */\n\tStageGL.COVER_FRAGMENT_BODY = (\n\t\t\"void main(void) {\" +\n\t\t\t\"vec4 color = texture2D(uSampler, vRenderCoord);\" +\n\t\t\t\"gl_FragColor = color;\" +\n\t\t\"}\"\n\t);\n\n// events:\n\t/**\n\t * Dispatched each update immediately before the canvas is cleared and the display list is drawn to it. You can call\n\t * {{#crossLink \"Event/preventDefault\"}}{{/crossLink}} on the event to cancel the draw.\n\t * @event drawstart\n\t */\n\n\t/**\n\t * Dispatched each update immediately after the display list is drawn to the canvas and the canvas context is restored.\n\t * @event drawend\n\t */\n\n// getter / setters:\n\tp._get_isWebGL = function () {\n\t\treturn !!this._webGLContext;\n\t};\n\n\tp._set_autoPurge = function (value) {\n\t\tvalue = isNaN(value)?1200:value;\n\t\tif (value != -1) {\n\t\t\tvalue = value<10?10:value;\n\t\t}\n\t\tthis._autoPurge = value;\n\t};\n\tp._get_autoPurge = function () {\n\t\treturn Number(this._autoPurge);\n\t};\n\n\ttry {\n\t\tObject.defineProperties(p, {\n\t\t\t/**\n\t\t\t * Indicates whether WebGL is being used for rendering. For example, this would be `false` if WebGL is not\n\t\t\t * supported in the browser.\n\t\t\t * @property isWebGL\n\t\t\t * @type {Boolean}\n\t\t\t * @readonly\n\t\t\t */\n\t\t\tisWebGL: { get: p._get_isWebGL },\n\n\t\t\t/**\n\t\t\t * Specifies whether or not StageGL is automatically purging unused textures. Higher numbers purge less\n\t\t\t * often. Values below 10 are upgraded to 10, and -1 disables this feature.\n\t\t\t * @property autoPurge\n\t\t\t * @protected\n\t\t\t * @type {Integer}\n\t\t\t * @default 1000\n\t\t\t */\n\t\t\tautoPurge: { get: p._get_autoPurge, set: p._set_autoPurge }\n\t\t});\n\t} catch (e) {} // TODO: use Log\n\n\n// constructor methods:\n\t/**\n\t * Create and properly initialize the WebGL instance.\n\t * @method _initializeWebGL\n\t * @protected\n\t * @return {WebGLRenderingContext}\n\t */\n\tp._initializeWebGL = function () {\n\t\tif (this.canvas) {\n\t\t\tif (!this._webGLContext || this._webGLContext.canvas !== this.canvas) {\n\t\t\t\t// A context hasn't been defined yet,\n\t\t\t\t// OR the defined context belongs to a different canvas, so reinitialize.\n\n\t\t\t\t// defaults and options\n\t\t\t\tvar options = {\n\t\t\t\t\tdepth: false, // Disable the depth buffer as it isn't used.\n\t\t\t\t\talpha: this._transparent, // Make the canvas background transparent.\n\t\t\t\t\tstencil: true,\n\t\t\t\t\tantialias: this._antialias,\n\t\t\t\t\tpremultipliedAlpha: this._premultiply, // Assume the drawing buffer contains colors with premultiplied alpha.\n\t\t\t\t\tpreserveDrawingBuffer: this._preserveBuffer\n\t\t\t\t};\n\n\t\t\t\tvar gl = this._webGLContext = this._fetchWebGLContext(this.canvas, options);\n\t\t\t\tif (!gl) { return null; }\n\n\t\t\t\tthis.updateSimultaneousTextureCount(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS));\n\t\t\t\tthis._maxTextureSlots = gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS);\n\t\t\t\tthis._createBuffers(gl);\n\t\t\t\tthis._initTextures(gl);\n\n\t\t\t\tgl.disable(gl.DEPTH_TEST);\n\t\t\t\tgl.enable(gl.BLEND);\n\t\t\t\tgl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);\n\t\t\t\tgl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this._premultiply);\n\t\t\t\t//gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);\n\n\t\t\t\tthis._webGLContext.clearColor(this._clearColor.r, this._clearColor.g, this._clearColor.b, this._clearColor.a);\n\t\t\t\tthis.updateViewport(this._viewportWidth || this.canvas.width, this._viewportHeight || this.canvas.height);\n\t\t\t}\n\t\t} else {\n\t\t\tthis._webGLContext = null;\n\t\t}\n\t\treturn this._webGLContext;\n\t};\n\n// public methods:\n\t/**\n\t * Docced in superclass\n\t */\n\tp.update = function (props) {\n\t\tif (!this.canvas) { return; }\n\t\tif (this.tickOnUpdate) { this.tick(props); }\n\t\tthis.dispatchEvent(\"drawstart\");\n\t\tif (this.autoClear) { this.clear(); }\n\n\t\tif (this._webGLContext) {\n\t\t\t// Use WebGL.\n\t\t\tthis._batchDraw(this, this._webGLContext);\n\t\t\tif (this._autoPurge != -1 && !(this._drawID%((this._autoPurge/2)|0))) {\n\t\t\t\tthis.purgeTextures(this._autoPurge);\n\t\t\t}\n\t\t} else {\n\t\t\t// Use 2D.\n\t\t\tvar ctx = this.canvas.getContext(\"2d\");\n\t\t\tctx.save();\n\t\t\tthis.updateContext(ctx);\n\t\t\tthis.draw(ctx, false);\n\t\t\tctx.restore();\n\t\t}\n\t\tthis.dispatchEvent(\"drawend\");\n\t};\n\n\t/**\n\t * Docced in superclass\n\t */\n\tp.clear = function () {\n\t\tif (!this.canvas) { return; }\n\t\tif (StageGL.isWebGLActive(this._webGLContext)) {\n\t\t\tvar gl = this._webGLContext;\n\t\t\tvar cc = this._clearColor;\n\t\t\tvar adjust = this._transparent ? cc.a : 1.0;\n\t\t\t// Use WebGL settings; adjust for pre multiplied alpha appropriate to scenario\n\t\t\tthis._webGLContext.clearColor(cc.r * adjust, cc.g * adjust, cc.b * adjust, adjust);\n\t\t\tgl.clear(gl.COLOR_BUFFER_BIT);\n\t\t\tthis._webGLContext.clearColor(cc.r, cc.g, cc.b, cc.a);\n\t\t} else {\n\t\t\t// Use 2D.\n\t\t\tthis.Stage_clear();\n\t\t}\n\t};\n\n\t/**\n\t * Draws the stage into the supplied context if possible. Many WebGL properties only exist on their context. As such\n\t * you cannot share contexts among many StageGLs and each context requires a unique StageGL instance. Contexts that\n\t * don't match the context managed by this StageGL will be treated as a 2D context.\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method draw\n\t * @param {CanvasRenderingContext2D | WebGLRenderingContext} context The context object to draw into.\n\t * @param {Boolean} [ignoreCache=false] Indicates whether the draw operation should ignore any current cache. For\n\t * example, used for drawing the cache (to prevent it from simply drawing an existing cache back into itself).\n\t * @return {Boolean} If the draw was handled by this function\n\t */\n\tp.draw = function (context, ignoreCache) {\n\t\tif (context === this._webGLContext && StageGL.isWebGLActive(this._webGLContext)) {\n\t\t\tvar gl = this._webGLContext;\n\t\t\tthis._batchDraw(this, gl, ignoreCache);\n\t\t\treturn true;\n\t\t} else {\n\t\t\treturn this.Stage_draw(context, ignoreCache);\n\t\t}\n\t};\n\n\t/**\n\t * Draws the target into the correct context, be it a canvas or Render Texture using WebGL.\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method cacheDraw\n\t * @param {DisplayObject} target The object we're drawing into cache.\n\t * For example, used for drawing the cache (to prevent it from simply drawing an existing cache back into itself).\n\t * @param {Array} filters The filters we're drawing into cache.\n\t * @param {BitmapCache} manager The BitmapCache instance looking after the cache\n\t * @return {Boolean} If the draw was handled by this function\n\t */\n\tp.cacheDraw = function (target, filters, manager) {\n\t\tif (StageGL.isWebGLActive(this._webGLContext)) {\n\t\t\tvar gl = this._webGLContext;\n\t\t\tthis._cacheDraw(gl, target, filters, manager);\n\t\t\treturn true;\n\t\t} else {\n\t\t\treturn false;\n\t\t}\n\t};\n\n\t/**\n\t * Blocks, or frees a texture \"slot\" on the GPU. Can be useful if you are overflowing textures. When overflowing\n\t * textures they are re-uploaded to the GPU every time they're encountered, this can be expensive with large textures.\n\t * By blocking the slot you reduce available slots, potentially increasing draw calls, but mostly you prevent a\n\t * texture being re-uploaded if it would have moved slots due to overflow.\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * For example, block the slot a background image is stored in so there is less re-loading of that image.\n\t * @method protectTextureSlot\n\t * @param {Number} id The slot to be affected\n\t * @param {Boolean} [lock=false] Whether this slot is the one being locked.\n\t */\n\tp.protectTextureSlot = function (id, lock) {\n\t\tif (id > this._maxTextureSlots || id < 0) {\n\t\t\tthrow \"Slot outside of acceptable range\";\n\t\t}\n\t\tthis._slotBlacklist[id] = !!lock;\n\t};\n\n\t/**\n\t * Render textures can't draw into themselves so any item being used for renderTextures needs two to alternate between.\n\t * This function creates, gets, and toggles the render surface between the two.\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method getTargetRenderTexture\n\t * @param {DisplayObject} target The object associated with the render textures, usually a cached object.\n\t * @param {Number} w The width to create the texture at.\n\t * @param {Number} h The height to create the texture at.\n\t * @return {Objet}\n\t * @todo fill in return type\n\t */\n\tp.getTargetRenderTexture = function (target, w, h) {\n\t\tvar result, toggle = false;\n\t\tvar gl = this._webGLContext;\n\t\tif (target.__lastRT !== undefined && target.__lastRT === target.__rtA) { toggle = true; }\n\t\tif (!toggle) {\n\t\t\tif (target.__rtA === undefined) {\n\t\t\t\ttarget.__rtA = this.getRenderBufferTexture(w, h);\n\t\t\t} else {\n\t\t\t\tif (w != target.__rtA._width || h != target.__rtA._height) {\n\t\t\t\t\tthis.resizeTexture(target.__rtA, w, h);\n\t\t\t\t}\n\t\t\t\tthis.setTextureParams(gl);\n\t\t\t}\n\t\t\tresult = target.__rtA;\n\t\t} else {\n\t\t\tif (target.__rtB === undefined) {\n\t\t\t\ttarget.__rtB = this.getRenderBufferTexture(w, h);\n\t\t\t} else {\n\t\t\t\tif (w != target.__rtB._width || h != target.__rtB._height) {\n\t\t\t\t\tthis.resizeTexture(target.__rtB, w, h);\n\t\t\t\t}\n\t\t\t\tthis.setTextureParams(gl);\n\t\t\t}\n\t\t\tresult = target.__rtB;\n\t\t}\n\t\tif (!result) {\n\t\t\tthrow \"Problems creating render textures, known causes include using too much VRAM by not releasing WebGL texture instances\";\n\t\t}\n\t\ttarget.__lastRT = result;\n\t\treturn result;\n\t};\n\n\t/**\n\t * For every image encountered StageGL registers and tracks it automatically. This tracking can cause memory leaks \n\t * if not purged. StageGL, by default, automatically purges them. This does have a cost and may unfortunately find\n\t * false positives. This function is for manual management of this memory instead of the automatic system controlled\n\t * by the {{#crossLink \"StageGL/autoPurge:property\"}}{{/crossLink}} property.\n\t *\n\t * This function will recursively remove all textures found on the object, its children, cache, etc. It will uncache \n\t * objects and remove any texture it finds REGARDLESS of whether it is currently in use elsewhere. It is up to the\n\t * developer to ensure that a texture in use is not removed.\n\t *\n\t * Textures in use, or to be used again shortly, should not be removed. This is simply for performance reasons.\n\t * Removing a texture in use will cause the texture to have to be re-uploaded slowing rendering.\n\t * @method releaseTexture\n\t * @param {DisplayObject | Texture | Image | Canvas} item An object that used the texture to be discarded.\n\t */\n\tp.releaseTexture = function (item) {\n\t\tvar i, l;\n\t\tif (!item) { return; }\n\n\t\t// this is a container object\n\t\tif (item.children) {\n\t\t\tfor (i = 0, l = item.children.length; i < l; i++) {\n\t\t\t\tthis.releaseTexture(item.children[i]);\n\t\t\t}\n\t\t}\n\n\t\t// this has a cache canvas\n\t\tif (item.cacheCanvas) {\n\t\t\titem.uncache();\n\t\t}\n\n\t\tvar foundImage = undefined;\n\t\tif (item._storeID !== undefined) {\n\t\t\t// this is a texture itself\n\t\t\tif (item === this._textureDictionary[item._storeID]) {\n\t\t\t\tthis._killTextureObject(item);\n\t\t\t\titem._storeID = undefined;\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// this is an image or canvas\n\t\t\tfoundImage = item;\n\t\t} else if (item._webGLRenderStyle === 2) {\n\t\t\t// this is a Bitmap class\n\t\t\tfoundImage = item.image;\n\t\t} else if (item._webGLRenderStyle === 1) {\n\t\t\t// this is a SpriteSheet, we can't tell which image we used from the list easily so remove them all!\n\t\t\tfor (i = 0, l = item.spriteSheet._images.length; i < l; i++) {\n\t\t\t\tthis.releaseTexture(item.spriteSheet._images[i]);\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\t// did we find anything\n\t\tif (foundImage === undefined) {\n\t\t\tif (this.vocalDebug) {\n\t\t\t\tconsole.log(\"No associated texture found on release\");\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\t// remove it\n\t\tthis._killTextureObject(this._textureDictionary[foundImage._storeID]);\n\t\tfoundImage._storeID = undefined;\n\t};\n\n\t/**\n\t * Similar to {{#crossLink \"releaseTexture\"}}{{/crossLink}}, but this function differs by searching for textures to\n\t * release. It works by assuming that it can purge any texture which was last used more than \"count\" draw calls ago.\n\t * Because this process is unaware of the objects and whether they may be used on your stage, false positives can\n\t * occur. It is recommended to manually manage your memory with {{#crossLink \"StageGL/releaseTexture\"}}{{/crossLink}},\n\t * however, there are many use cases where this is simpler and error-free. This process is also run by default under\n\t * the hood to prevent leaks. To disable it see the {{#crossLink \"StageGL/autoPurge:property\"}}{{/crossLink}} property.\n\t * @method purgeTextures\n\t * @param {Number} [count=100] How many renders ago the texture was last used\n\t */\n\tp.purgeTextures = function (count) {\n\t\tif (count == undefined){ count = 100; }\n\n\t\tvar dict = this._textureDictionary;\n\t\tvar l = dict.length;\n\t\tfor (var i= 0; inot update the canvas element's width/height, but\n\t * the render surface's instead. This is necessary after manually resizing the canvas element on the DOM to avoid a\n\t * up/down scaled render.\n\t * @method updateViewport\n\t * @param {Integer} width The width of the render surface in pixels.\n\t * @param {Integer} height The height of the render surface in pixels.\n\t */\n\tp.updateViewport = function (width, height) {\n\t\tthis._viewportWidth = width|0;\n\t\tthis._viewportHeight = height|0;\n\t\tvar gl = this._webGLContext;\n\n\t\tif (gl) {\n\t\t\tgl.viewport(0, 0, this._viewportWidth, this._viewportHeight);\n\n\t\t\t// WebGL works with a -1,1 space on its screen. It also follows Y-Up\n\t\t\t// we need to flip the y, scale and then translate the co-ordinates to match this\n\t\t\t// additionally we offset into they Y so the polygons are inside the camera's \"clipping\" plane\n\t\t\tthis._projectionMatrix = new Float32Array([\n\t\t\t\t2 / this._viewportWidth,\t0,\t\t\t\t\t\t\t\t0,\t\t\t\t\t\t\t0,\n\t\t\t\t0,\t\t\t\t\t\t\t-2 / this._viewportHeight,\t\t1,\t\t\t\t\t\t\t0,\n\t\t\t\t0,\t\t\t\t\t\t\t0,\t\t\t\t\t\t\t\t1,\t\t\t\t\t\t\t0,\n\t\t\t\t-1,\t\t\t\t\t\t\t1,\t\t\t\t\t\t\t\t0.1,\t\t\t\t\t\t0\n\t\t\t]);\n\t\t\t// create the flipped version for use with render texture flipping\n\t\t\t// DHG: this would be a slice/clone but some platforms don't offer them for Float32Array\n\t\t\tthis._projectionMatrixFlip = new Float32Array([0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0]);\n\t\t\tthis._projectionMatrixFlip.set(this._projectionMatrix);\n\t\t\tthis._projectionMatrixFlip[5] *= -1;\n\t\t\tthis._projectionMatrixFlip[13] *= -1;\n\t\t}\n\t};\n\n\t/**\n\t * Fetches the shader compiled and set up to work with the provided filter/object. The shader is compiled on first\n\t * use and returned on subsequent calls.\n\t * @method getFilterShader\n\t * @param {Filter|Object} filter The object which will provide the information needed to construct the filter shader.\n\t * @return {WebGLProgram}\n\t */\n\tp.getFilterShader = function (filter) {\n\t\tif (!filter) { filter = this; }\n\n\t\tvar gl = this._webGLContext;\n\t\tvar targetShader = this._activeShader;\n\n\t\tif (filter._builtShader) {\n\t\t\ttargetShader = filter._builtShader;\n\t\t\tif (filter.shaderParamSetup) {\n\t\t\t\tgl.useProgram(targetShader);\n\t\t\t\tfilter.shaderParamSetup(gl, this, targetShader);\n\t\t\t}\n\t\t} else {\n\t\t\ttry {\n\t\t\t\ttargetShader = this._fetchShaderProgram(\n\t\t\t\t\tgl, \"filter\",\n\t\t\t\t\tfilter.VTX_SHADER_BODY, filter.FRAG_SHADER_BODY,\n\t\t\t\t\tfilter.shaderParamSetup && filter.shaderParamSetup.bind(filter)\n\t\t\t\t);\n\t\t\t\tfilter._builtShader = targetShader;\n\t\t\t\ttargetShader._name = filter.toString();\n\t\t\t} catch (e) {\n\t\t\t\tconsole && console.log(\"SHADER SWITCH FAILURE\", e);\n\t\t\t}\n\t\t}\n\t\treturn targetShader;\n\t};\n\n\t/**\n\t * Returns a base texture that has no image or data loaded. Not intended for loading images. It may return `null`\n\t * in some error cases, and trying to use a \"null\" texture can cause renders to fail.\n\t * @method getBaseTexture\n\t * @param {uint} [w=1] The width of the texture in pixels, defaults to 1\n\t * @param {uint} [h=1] The height of the texture in pixels, defaults to 1\n\t */\n\tp.getBaseTexture = function (w, h) {\n\t\tvar width = Math.ceil(w > 0 ? w : 1) || 1;\n\t\tvar height = Math.ceil(h > 0 ? h : 1) || 1;\n\n\t\tvar gl = this._webGLContext;\n\t\tvar texture = gl.createTexture();\n\t\tthis.resizeTexture(texture, width, height);\n\t\tthis.setTextureParams(gl, false);\n\n\t\treturn texture;\n\t};\n\n\t/**\n\t * Resizes a supplied texture element. May generate invalid textures in some error cases such as; when the texture\n\t * is too large, when an out of texture memory error occurs, or other error scenarios. Trying to use an invalid texture\n\t * can cause renders to hard stop on some devices. Check the WebGL bound texture after running this function.\n\t *\n\t * NOTE: The supplied texture must have been made with the WebGL \"texImage2D\" function, all default APIs in StageGL\n\t * use this, so this note only matters for library developers and plugins.\n\t *\n\t * @protected\n\t * @method resizeTexture\n\t * @param {WebGLTexture} texture The GL Texture to be modified.\n\t * @param {uint} [width=1] The width of the texture in pixels, defaults to 1\n\t * @param {uint} [height=1] The height of the texture in pixels, defaults to 1\n\t */\n\tp.resizeTexture = function (texture, width,height) {\n\t\tvar gl = this._webGLContext;\n\t\tgl.bindTexture(gl.TEXTURE_2D, texture);\n\t\tgl.texImage2D(\n\t\t\tgl.TEXTURE_2D,\t\t\t\t// target\n\t\t\t0,\t\t\t\t\t\t\t// level of detail\n\t\t\tgl.RGBA,\t\t\t\t\t// internal format\n\t\t\twidth, height, 0,\t\t\t// width, height, border (only for array/null sourced textures)\n\t\t\tgl.RGBA,\t\t\t\t\t// format (match internal format)\n\t\t\tgl.UNSIGNED_BYTE,\t\t\t// type of texture(pixel color depth)\n\t\t\tnull\t\t\t\t\t\t// image data, we can do null because we're doing array data\n\t\t);\n\t\ttexture.width = width;\n\t\ttexture.height = height;\n\t};\n\n\t/**\n\t * Returns a base texture (see {{#crossLink \"StageGL/getBaseTexture\"}}{{/crossLink}}) for details. Also includes an\n\t * attached and linked render buffer in `texture._frameBuffer`. RenderTextures can be thought of as an internal\n\t * canvas on the GPU that can be drawn to.\n\t * @method getRenderBufferTexture\n\t * @param {Number} w The width of the texture in pixels.\n\t * @param {Number} h The height of the texture in pixels.\n\t * @return {Texture} the basic texture instance with a render buffer property.\n\t */\n\tp.getRenderBufferTexture = function (w, h) {\n\t\tvar gl = this._webGLContext;\n\n\t\t// get the texture\n\t\tvar renderTexture = this.getBaseTexture(w, h);\n\t\tif (!renderTexture) { return null; }\n\n\t\t// get the frame buffer\n\t\tvar frameBuffer = gl.createFramebuffer();\n\t\tif (!frameBuffer) { return null; }\n\n\t\t// set its width and height for spoofing as an image\n\t\trenderTexture.width = w;\n\t\trenderTexture.height = h;\n\n\t\t// attach frame buffer to texture and provide cross links to look up each other\n\t\tgl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);\n\t\tgl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, renderTexture, 0);\n\t\tframeBuffer._renderTexture = renderTexture;\n\t\trenderTexture._frameBuffer = frameBuffer;\n\n\t\t// these keep track of themselves simply to reduce complexity of some lookup code\n\t\trenderTexture._storeID = this._textureDictionary.length;\n\t\tthis._textureDictionary[renderTexture._storeID] = renderTexture;\n\n\t\tgl.bindFramebuffer(gl.FRAMEBUFFER, null);\n\t\treturn renderTexture;\n\t};\n\n\t/**\n\t * Common utility function used to apply the correct texture processing parameters for the bound texture.\n\t * @method setTextureParams\n\t * @param {WebGLRenderingContext} gl The canvas WebGL context object to draw into.\n\t * @param {Boolean} [isPOT=false] Marks whether the texture is \"Power of Two\", this may allow better quality AA.\n\t */\n\tp.setTextureParams = function (gl, isPOT) {\n\t\tif (isPOT && this._antialias) {\n\t\t\t//non POT linear works in some devices, but performance is NOT good, investigate\n\t\t\tgl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n\t\t\tgl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n\t\t} else {\n\t\t\tgl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);\n\t\t\tgl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);\n\t\t}\n\t\tgl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n\t\tgl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n\t};\n\n\t/**\n\t * Changes the webGL clear, aka \"background\" color to the provided value. A transparent clear is recommended, as\n\t * non-transparent colours may create undesired boxes around some visuals.\n\t *\n\t * The clear color will also be used for filters and other \"render textures\". The stage background will ignore the\n\t * transparency value and display a solid color normally. For the stage to recognize and use transparency it must be\n\t * created with the transparent flag set to `true` (see {{#crossLink \"StageGL/constructor\"}}{{/crossLink}})).\n\t *\n\t * Using \"transparent white\" to demonstrate, the valid data formats are as follows:\n\t *

\"#FFF\"
\"#FFFFFF\"
\"#FFFFFF00\"
\"rgba(255,255,255,0.0)\"

\n\t * @method setClearColor\n\t * @param {String|int} [color=0x00000000] The new color to use as the background\n\t */\n\tp.setClearColor = function (color) {\n\t\tvar r, g, b, a, output;\n\n\t\tif (typeof color == \"string\") {\n\t\t\tif (color.indexOf(\"#\") == 0) {\n\t\t\t\tif (color.length == 4) {\n\t\t\t\t\tcolor = \"#\" + color.charAt(1)+color.charAt(1) + color.charAt(2)+color.charAt(2) + color.charAt(3)+color.charAt(3)\n\t\t\t\t}\n\t\t\t\tr = Number(\"0x\"+color.slice(1, 3))/255;\n\t\t\t\tg = Number(\"0x\"+color.slice(3, 5))/255;\n\t\t\t\tb = Number(\"0x\"+color.slice(5, 7))/255;\n\t\t\t\ta = Number(\"0x\"+color.slice(7, 9))/255;\n\t\t\t} else if (color.indexOf(\"rgba(\") == 0) {\n\t\t\t\toutput = color.slice(5, -1).split(\",\");\n\t\t\t\tr = Number(output[0])/255;\n\t\t\t\tg = Number(output[1])/255;\n\t\t\t\tb = Number(output[2])/255;\n\t\t\t\ta = Number(output[3]);\n\t\t\t}\n\t\t} else {\t// >>> is an unsigned shift which is what we want as 0x80000000 and up are negative values\n\t\t\tr = ((color & 0xFF000000) >>> 24)/255;\n\t\t\tg = ((color & 0x00FF0000) >>> 16)/255;\n\t\t\tb = ((color & 0x0000FF00) >>> 8)/255;\n\t\t\ta = (color & 0x000000FF)/255;\n\t\t}\n\n\t\tthis._clearColor.r = r || 0;\n\t\tthis._clearColor.g = g || 0;\n\t\tthis._clearColor.b = b || 0;\n\t\tthis._clearColor.a = a || 0;\n\n\t\tif (!this._webGLContext) { return; }\n\t\tthis._webGLContext.clearColor(this._clearColor.r, this._clearColor.g, this._clearColor.b, this._clearColor.a);\n\t};\n\n\t/**\n\t * docced in subclass\n\t */\n\tp.toString = function () {\n\t\treturn \"[StageGL (name=\"+ this.name +\")]\";\n\t};\n\n// private methods:\n\t/**\n\t * Sets up and returns the WebGL context for the canvas. May return undefined in error scenarios. These can include \n\t * situations where the canvas element already has a context, 2D or GL.\n\t * @param {Canvas} canvas The DOM canvas element to attach to\n\t * @param {Object} options The options to be handed into the WebGL object, see WebGL spec\n\t * @method _fetchWebGLContext\n\t * @protected\n\t * @return {WebGLRenderingContext} The WebGL context, may return undefined in error scenarios\n\t */\n\tp._fetchWebGLContext = function (canvas, options) {\n\t\tvar gl;\n\n\t\ttry {\n\t\t\tgl = canvas.getContext(\"webgl\", options) || canvas.getContext(\"experimental-webgl\", options);\n\t\t} catch (e) {\n\t\t\t// don't do anything in catch, null check will handle it\n\t\t}\n\n\t\tif (!gl) {\n\t\t\tvar msg = \"Could not initialize WebGL\";\n\t\t\tconsole.error?console.error(msg):console.log(msg);\n\t\t} else {\n\t\t\tgl.viewportWidth = canvas.width;\n\t\t\tgl.viewportHeight = canvas.height;\n\t\t}\n\n\t\treturn gl;\n\t};\n\n\t/**\n\t * Create the completed Shader Program from the vertex and fragment shaders. Allows building of custom shaders for\n\t * filters. Once compiled, shaders are saved so. If the Shader code requires dynamic alterations re-run this function\n\t * to generate a new shader.\n\t * @method _fetchShaderProgram\n\t * @param {WebGLRenderingContext} gl The canvas WebGL context object to draw into.\n\t * @param {String} [shaderName=\"regular\"] Working values: \"regular\", \"override\", and \"filter\". Which type of shader to build.\n\t * Filter and override both accept the custom params. Regular and override have all features. Filter is a special case reduced feature shader meant to be over-ridden.\n\t * @param {String} [customVTX] Extra vertex shader information to replace a regular draw, see \n\t * {{#crossLink \"StageGL/COVER_VERTEX_BODY\"}}{{/crossLink}} for default and {{#crossLink \"Filter\"}}{{/crossLink}} for examples.\n\t * @param {String} [customFRAG] Extra fragment shader information to replace a regular draw, see \n\t * {{#crossLink \"StageGL/COVER_FRAGMENT_BODY\"}}{{/crossLink}} for default and {{#crossLink \"Filter\"}}{{/crossLink}} for examples.\n\t * @param {Function} [shaderParamSetup] Function to run so custom shader parameters can get applied for the render.\n\t * @protected\n\t * @return {WebGLProgram} The compiled and linked shader\n\t */\n\tp._fetchShaderProgram = function (gl, shaderName, customVTX, customFRAG, shaderParamSetup) {\n\t\tgl.useProgram(null);\t\t// safety to avoid collisions\n\n\t\t// build the correct shader string out of the right headers and bodies\n\t\tvar targetFrag, targetVtx;\n\t\tswitch (shaderName) {\n\t\t\tcase \"filter\":\n\t\t\t\ttargetVtx = StageGL.COVER_VERTEX_HEADER + (customVTX || StageGL.COVER_VERTEX_BODY);\n\t\t\t\ttargetFrag = StageGL.COVER_FRAGMENT_HEADER + (customFRAG || StageGL.COVER_FRAGMENT_BODY);\n\t\t\t\tbreak;\n\t\t\tcase \"particle\": //TODO\n\t\t\t\ttargetVtx = StageGL.REGULAR_VERTEX_HEADER + StageGL.PARTICLE_VERTEX_BODY;\n\t\t\t\ttargetFrag = StageGL.REGULAR_FRAGMENT_HEADER + StageGL.PARTICLE_FRAGMENT_BODY;\n\t\t\t\tbreak;\n\t\t\tcase \"override\":\n\t\t\t\ttargetVtx = StageGL.REGULAR_VERTEX_HEADER + (customVTX || StageGL.REGULAR_VERTEX_BODY);\n\t\t\t\ttargetFrag = StageGL.REGULAR_FRAGMENT_HEADER + (customFRAG || StageGL.REGULAR_FRAGMENT_BODY);\n\t\t\t\tbreak;\n\t\t\tcase \"regular\":\n\t\t\tdefault:\n\t\t\t\ttargetVtx = StageGL.REGULAR_VERTEX_HEADER + StageGL.REGULAR_VERTEX_BODY;\n\t\t\t\ttargetFrag = StageGL.REGULAR_FRAGMENT_HEADER + StageGL.REGULAR_FRAGMENT_BODY;\n\t\t\t\tbreak;\n\t\t}\n\n\t\t// create the separate vars\n\t\tvar vertexShader = this._createShader(gl, gl.VERTEX_SHADER, targetVtx);\n\t\tvar fragmentShader = this._createShader(gl, gl.FRAGMENT_SHADER, targetFrag);\n\n\t\t// link them together\n\t\tvar shaderProgram = gl.createProgram();\n\t\tgl.attachShader(shaderProgram, vertexShader);\n\t\tgl.attachShader(shaderProgram, fragmentShader);\n\t\tgl.linkProgram(shaderProgram);\n\t\tshaderProgram._type = shaderName;\n\n\t\t// check compile status\n\t\tif (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {\n\t\t\tgl.useProgram(this._activeShader);\n\t\t\tthrow gl.getProgramInfoLog(shaderProgram);\n\t\t}\n\n\t\t// set up the parameters on the shader\n\t\tgl.useProgram(shaderProgram);\n\t\tswitch (shaderName) {\n\t\t\tcase \"filter\":\n\t\t\t\t// get the places in memory the shader is stored so we can feed information into them\n\t\t\t\t// then save it off on the shader because it's so tied to the shader itself\n\t\t\t\tshaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, \"vertexPosition\");\n\t\t\t\tgl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);\n\n\t\t\t\tshaderProgram.uvPositionAttribute = gl.getAttribLocation(shaderProgram, \"uvPosition\");\n\t\t\t\tgl.enableVertexAttribArray(shaderProgram.uvPositionAttribute);\n\n\t\t\t\tshaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, \"uSampler\");\n\t\t\t\tgl.uniform1i(shaderProgram.samplerUniform, 0);\n\n\t\t\t\tshaderProgram.uprightUniform = gl.getUniformLocation(shaderProgram, \"uUpright\");\n\t\t\t\tgl.uniform1f(shaderProgram.uprightUniform, 0);\n\n\t\t\t\t// if there's some custom attributes be sure to hook them up\n\t\t\t\tif (shaderParamSetup) {\n\t\t\t\t\tshaderParamSetup(gl, this, shaderProgram);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase \"override\":\n\t\t\tcase \"particle\":\n\t\t\tcase \"regular\":\n\t\t\tdefault:\n\t\t\t\t// get the places in memory the shader is stored so we can feed information into them\n\t\t\t\t// then save it off on the shader because it's so tied to the shader itself\n\t\t\t\tshaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, \"vertexPosition\");\n\t\t\t\tgl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);\n\n\t\t\t\tshaderProgram.uvPositionAttribute = gl.getAttribLocation(shaderProgram, \"uvPosition\");\n\t\t\t\tgl.enableVertexAttribArray(shaderProgram.uvPositionAttribute);\n\n\t\t\t\tshaderProgram.textureIndexAttribute = gl.getAttribLocation(shaderProgram, \"textureIndex\");\n\t\t\t\tgl.enableVertexAttribArray(shaderProgram.textureIndexAttribute);\n\n\t\t\t\tshaderProgram.alphaAttribute = gl.getAttribLocation(shaderProgram, \"objectAlpha\");\n\t\t\t\tgl.enableVertexAttribArray(shaderProgram.alphaAttribute);\n\n\t\t\t\tvar samplers = [];\n\t\t\t\tfor (var i = 0; i < this._batchTextureCount; i++) {\n\t\t\t\t\tsamplers[i] = i;\n\t\t\t\t}\n\n\t\t\t\tshaderProgram.samplerData = samplers;\n\t\t\t\tshaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, \"uSampler\");\n\t\t\t\tgl.uniform1iv(shaderProgram.samplerUniform, samplers);\n\n\t\t\t\tshaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, \"pMatrix\");\n\t\t\t\tbreak;\n\t\t}\n\n\t\tgl.useProgram(this._activeShader);\n\t\treturn shaderProgram;\n\t};\n\n\t/**\n\t * Creates a shader from the specified string replacing templates. Template items are defined via `{{` `key` `}}``.\n\t * @method _createShader\n\t * @param {WebGLRenderingContext} gl The canvas WebGL context object to draw into.\n\t * @param {Number} type The type of shader to create. gl.VERTEX_SHADER | gl.FRAGMENT_SHADER\n\t * @param {String} str The definition for the shader.\n\t * @return {WebGLShader}\n\t * @protected\n\t */\n\tp._createShader = function (gl, type, str) {\n\t\t// inject the static number\n\t\tstr = str.replace(/{{count}}/g, this._batchTextureCount);\n\n\t\t// resolve issue with no dynamic samplers by creating correct samplers in if else chain\n\t\t// TODO: WebGL 2.0 does not need this support\n\t\tvar insert = \"\";\n\t\tfor (var i = 1; i gl.MAX_TEXTURE_SIZE || image.height > gl.MAX_TEXTURE_SIZE){\n\t\t\t\tconsole && console.error(\"Oversized Texture: \"+ image.width+\"x\"+image.height +\" vs \"+ gl.MAX_TEXTURE_SIZE +\"max\");\n\t\t\t}\n\t\t}\n\t};\n\n\t/**\n\t * Adds the texture to a spot in the current batch, forcing a draw if no spots are free.\n\t * @method _insertTextureInBatch\n\t * @param {WebGLRenderingContext} gl The canvas WebGL context object to draw into.\n\t * @param {WebGLTexture} texture The texture to be inserted.\n\t * @protected\n\t */\n\tp._insertTextureInBatch = function (gl, texture) {\n\t\t// if it wasn't used last batch\n\t\tif (this._batchTextures[texture._activeIndex] !== texture) {\n\t\t\t// we've got to find it a a spot.\n\t\t\tvar found = -1;\n\t\t\tvar start = (this._lastTextureInsert+1) % this._batchTextureCount;\n\t\t\tvar look = start;\n\t\t\tdo {\n\t\t\t\tif (this._batchTextures[look]._batchID != this._batchID && !this._slotBlacklist[look]) {\n\t\t\t\t\tfound = look;\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\tlook = (look+1) % this._batchTextureCount;\n\t\t\t} while (look !== start);\n\n\t\t\t// we couldn't find anywhere for it go, meaning we're maxed out\n\t\t\tif (found === -1) {\n\t\t\t\tthis.batchReason = \"textureOverflow\";\n\t\t\t\tthis._drawBuffers(gl);\t\t// <------------------------------------------------------------------------\n\t\t\t\tthis.batchCardCount = 0;\n\t\t\t\tfound = start;\n\t\t\t}\n\n\t\t\t// lets put it into that spot\n\t\t\tthis._batchTextures[found] = texture;\n\t\t\ttexture._activeIndex = found;\n\t\t\tvar image = texture._imageData;\n\t\t\tif (image && image._invalid && texture._drawID !== undefined) {\n\t\t\t\tthis._updateTextureImageData(gl, image);\n\t\t\t} else {\n\t\t\t\tgl.activeTexture(gl.TEXTURE0 + found);\n\t\t\t\tgl.bindTexture(gl.TEXTURE_2D, texture);\n\t\t\t\tthis.setTextureParams(gl);\n\t\t\t}\n\t\t\tthis._lastTextureInsert = found;\n\t\t} else {\n\t\t\tvar image = texture._imageData;\n\t\t\tif (texture._storeID != undefined && image && image._invalid) {\n\t\t\t\tthis._updateTextureImageData(gl, image);\n\t\t\t}\n\t\t}\n\n\t\ttexture._drawID = this._drawID;\n\t\ttexture._batchID = this._batchID;\n\t};\n\n\t/**\n\t * Remove and clean the texture, expects a texture and is inflexible. Mostly for internal use, recommended to call \n\t * {{#crossLink \"StageGL/releaseTexture\"}}{{/crossLink}} instead as it will call this with the correct texture object(s).\n\t * Note: Testing shows this may not happen immediately, have to wait frames for WebGL to have actually adjust memory.\n\t * @method _killTextureObject\n\t * @param {Texture} tex The texture to be cleaned out\n\t * @protected\n\t */\n\tp._killTextureObject = function (tex) {\n\t\tif (!tex) { return; }\n\t\tvar gl = this._webGLContext;\n\n\t\t// remove linkage\n\t\tif (tex._storeID !== undefined && tex._storeID >= 0) {\n\t\t\tthis._textureDictionary[tex._storeID] = undefined;\n\t\t\tfor (var n in this._textureIDs) {\n\t\t\t\tif (this._textureIDs[n] == tex._storeID) { delete this._textureIDs[n]; }\n\t\t\t}\n\t\t\tif(tex._imageData) { tex._imageData._storeID = undefined; }\n\t\t\ttex._imageData = tex._storeID = undefined;\n\t\t}\n\n\t\t// make sure to drop it out of an active slot\n\t\tif (tex._activeIndex !== undefined && this._batchTextures[tex._activeIndex] === tex) {\n\t\t\tthis._batchTextures[tex._activeIndex] = this._baseTextures[tex._activeIndex];\n\t\t}\n\n\t\t// remove buffers if present\n\t\ttry {\n\t\t\tif (tex._frameBuffer) { gl.deleteFramebuffer(tex._frameBuffer); }\n\t\t\ttex._frameBuffer = undefined;\n\t\t} catch(e) {\n\t\t\t/* suppress delete errors because it's already gone or didn't need deleting probably */\n\t\t\tif (this.vocalDebug) { console.log(e); }\n\t\t}\n\n\t\t// remove entry\n\t\ttry {\n\t\t\tgl.deleteTexture(tex);\n\t\t} catch(e) {\n\t\t\t/* suppress delete errors because it's already gone or didn't need deleting probably */\n\t\t\tif (this.vocalDebug) { console.log(e); }\n\t\t}\n\t};\n\n\t/**\n\t * Store or restore current batch textures into a backup array\n\t * @method _backupBatchTextures\n\t * @param {Boolean} restore Perform a restore instead of a store.\n\t * @param {Array} [target=this._backupTextures] Where to perform the backup, defaults to internal backup.\n\t * @protected\n\t */\n\tp._backupBatchTextures = function (restore, target) {\n\t\tvar gl = this._webGLContext;\n\n\t\tif (!this._backupTextures) { this._backupTextures = []; }\n\t\tif (target === undefined) { target = this._backupTextures; }\n\n\t\tfor (var i=0; i 0) {\n\t\t\tthis._drawBuffers(gl);\n\t\t}\n\t\tthis._isDrawing++;\n\t\tthis._drawID++;\n\n\t\tthis.batchCardCount = 0;\n\t\tthis.depth = 0;\n\n\t\tthis._appendToBatchGroup(sceneGraph, gl, new createjs.Matrix2D(), this.alpha, ignoreCache);\n\n\t\tthis.batchReason = \"drawFinish\";\n\t\tthis._drawBuffers(gl);\t\t\t\t\t\t\t\t// <--------------------------------------------------------\n\t\tthis._isDrawing--;\n\t};\n\n\t/**\n\t * Perform the drawing process to fill a specific cache texture, including applying filters.\n\t * @method _cacheDraw\n\t * @param {DisplayObject} target The object we're drawing into the cache. For example, used for drawing the cache\n\t * (to prevent it from simply drawing an existing cache back into itself).\n\t * @param {Array} filters The filters we're drawing into cache.\n\t * @param {BitmapCache} manager The BitmapCache instance looking after the cache\n\t * @protected\n\t */\n\tp._cacheDraw = function (gl, target, filters, manager) {\n\t\t/*\n\t\tImplicitly there are 4 modes to this function: filtered-sameContext, filtered-uniqueContext, sameContext, uniqueContext.\n\t\tEach situation must be handled slightly differently as 'sameContext' or 'uniqueContext' define how the output works,\n\t\tone drawing directly into the main context and the other drawing into a stored renderTexture respectively.\n\t\tWhen the draw is a 'filtered' draw, the filters are applied sequentially and will draw into saved textures repeatedly.\n\t\tOnce the final filter is done the final output is treated depending upon whether it is a same or unique context.\n\t\tThe internal complexity comes from reducing over-draw, shared code, and issues like textures needing to be flipped\n\t\tsometimes when written to render textures.\n\t\t*/\n\t\tvar renderTexture;\n\t\tvar shaderBackup = this._activeShader;\n\t\tvar blackListBackup = this._slotBlacklist;\n\t\tvar lastTextureSlot = this._maxTextureSlots-1;\n\t\tvar wBackup = this._viewportWidth, hBackup = this._viewportHeight;\n\n\t\t// protect the last slot so that we have somewhere to bind the renderTextures so it doesn't get upset\n\t\tthis.protectTextureSlot(lastTextureSlot, true);\n\n\t\t// create offset container for drawing item\n\t\tvar mtx = target.getMatrix();\n\t\tmtx = mtx.clone();\n\t\tmtx.scale(1/manager.scale, 1/manager.scale);\n\t\tmtx = mtx.invert();\n\t\tmtx.translate(-manager.offX/manager.scale*target.scaleX, -manager.offY/manager.scale*target.scaleY);\n\t\tvar container = this._cacheContainer;\n\t\tcontainer.children = [target];\n\t\tcontainer.transformMatrix = mtx;\n\n\t\tthis._backupBatchTextures(false);\n\n\t\tif (filters && filters.length) {\n\t\t\tthis._drawFilters(target, filters, manager);\n\t\t} else {\n\t\t\t// is this for another stage or mine?\n\t\t\tif (this.isCacheControlled) {\n\t\t\t\t// draw item to canvas\t\t\t\tI -> C\n\t\t\t\tgl.clear(gl.COLOR_BUFFER_BIT);\n\t\t\t\tthis._batchDraw(container, gl, true);\n\t\t\t} else {\n\t\t\t\tgl.activeTexture(gl.TEXTURE0 + lastTextureSlot);\n\t\t\t\ttarget.cacheCanvas = this.getTargetRenderTexture(target, manager._drawWidth, manager._drawHeight);\n\t\t\t\trenderTexture = target.cacheCanvas;\n\n\t\t\t\t// draw item to render texture\t\tI -> T\n\t\t\t\tgl.bindFramebuffer(gl.FRAMEBUFFER, renderTexture._frameBuffer);\n\t\t\t\tthis.updateViewport(manager._drawWidth, manager._drawHeight);\n\t\t\t\tthis._projectionMatrix = this._projectionMatrixFlip;\n\t\t\t\tgl.clear(gl.COLOR_BUFFER_BIT);\n\t\t\t\tthis._batchDraw(container, gl, true);\n\n\t\t\t\tgl.bindFramebuffer(gl.FRAMEBUFFER, null);\n\t\t\t\tthis.updateViewport(wBackup, hBackup);\n\t\t\t}\n\t\t}\n\n\t\tthis._backupBatchTextures(true);\n\n\t\tthis.protectTextureSlot(lastTextureSlot, false);\n\t\tthis._activeShader = shaderBackup;\n\t\tthis._slotBlacklist = blackListBackup;\n\t};\n\n\t/**\n\t * Sub portion of _cacheDraw, split off for readability. Do not call independently.\n\t * @method _drawFilters\n\t * @param {DisplayObject} target The object we're drawing with a filter.\n\t * @param {Array} filters The filters we're drawing into cache.\n\t * @param {BitmapCache} manager The BitmapCache instance looking after the cache\n\t */\n\tp._drawFilters = function (target, filters, manager) {\n\t\tvar gl = this._webGLContext;\n\t\tvar renderTexture;\n\t\tvar lastTextureSlot = this._maxTextureSlots-1;\n\t\tvar wBackup = this._viewportWidth, hBackup = this._viewportHeight;\n\n\t\tvar container = this._cacheContainer;\n\t\tvar filterCount = filters.length;\n\n\t\t// we don't know which texture slot we're dealing with previously and we need one out of the way\n\t\t// once we're using that slot activate it so when we make and bind our RenderTexture it's safe there\n\t\tgl.activeTexture(gl.TEXTURE0 + lastTextureSlot);\n\t\trenderTexture = this.getTargetRenderTexture(target, manager._drawWidth, manager._drawHeight);\n\n\t\t// draw item to render texture\t\tI -> T\n\t\tgl.bindFramebuffer(gl.FRAMEBUFFER, renderTexture._frameBuffer);\n\t\tthis.updateViewport(manager._drawWidth, manager._drawHeight);\n\t\tgl.clear(gl.COLOR_BUFFER_BIT);\n\t\tthis._batchDraw(container, gl, true);\n\n\t\t// bind the result texture to slot 0 as all filters and cover draws assume original content is in slot 0\n\t\tgl.activeTexture(gl.TEXTURE0);\n\t\tgl.bindTexture(gl.TEXTURE_2D, renderTexture);\n\t\tthis.setTextureParams(gl);\n\n\t\tvar flipY = false;\n\t\tvar i = 0, filter = filters[i];\n\t\tdo { // this is safe because we wouldn't be in apply filters without a filter count of at least 1\n\n\t\t\t// swap to correct shader\n\t\t\tthis._activeShader = this.getFilterShader(filter);\n\t\t\tif (!this._activeShader) { continue; }\n\n\t\t\t// now the old result is stored in slot 0, make a new render texture\n\t\t\tgl.activeTexture(gl.TEXTURE0 + lastTextureSlot);\n\t\t\trenderTexture = this.getTargetRenderTexture(target, manager._drawWidth, manager._drawHeight);\n\t\t\tgl.bindFramebuffer(gl.FRAMEBUFFER, renderTexture._frameBuffer);\n\n\t\t\t// draw result to render texture\tR -> T\n\t\t\tgl.viewport(0, 0, manager._drawWidth, manager._drawHeight);\n\t\t\tgl.clear(gl.COLOR_BUFFER_BIT);\n\t\t\tthis._drawCover(gl, flipY);\n\n\t\t\t// bind the result texture to slot 0 as all filters and cover draws assume original content is in slot 0\n\t\t\tgl.activeTexture(gl.TEXTURE0);\n\t\t\tgl.bindTexture(gl.TEXTURE_2D, renderTexture);\n\t\t\tthis.setTextureParams(gl);\n\n\t\t\t// use flipping to keep things upright, things already cancel out on a single filter\n\t\t\t// this needs to be here as multiPass is not accurate to _this_ frame until after shader acquisition\n\t\t\tif (filterCount > 1 || filters[0]._multiPass) {\n\t\t\t\tflipY = !flipY;\n\t\t\t}\n\n\t\t\t// work through the multipass if it's there, otherwise move on\n\t\t\tfilter = filter._multiPass !== null ? filter._multiPass : filters[++i];\n\t\t} while (filter);\n\n\t\t// is this for another stage or mine\n\t\tif (this.isCacheControlled) {\n\t\t\tgl.bindFramebuffer(gl.FRAMEBUFFER, null);\n\t\t\tthis.updateViewport(wBackup, hBackup);\n\n\t\t\t// draw result to canvas\t\t\tR -> C\n\t\t\tthis._activeShader = this.getFilterShader(this);\n\t\t\tgl.clear(gl.COLOR_BUFFER_BIT);\n\t\t\tthis._drawCover(gl, flipY);\n\t\t} else {\n\t\t\t//TODO: DHG: this is less than ideal. A flipped initial render for this circumstance might help. Adjust the perspective matrix?\n\t\t\tif (flipY) {\n\t\t\t\tgl.activeTexture(gl.TEXTURE0 + lastTextureSlot);\n\t\t\t\trenderTexture = this.getTargetRenderTexture(target, manager._drawWidth, manager._drawHeight);\n\t\t\t\tgl.bindFramebuffer(gl.FRAMEBUFFER, renderTexture._frameBuffer);\n\n\t\t\t\tthis._activeShader = this.getFilterShader(this);\n\t\t\t\tgl.viewport(0, 0, manager._drawWidth, manager._drawHeight);\n\t\t\t\tgl.clear(gl.COLOR_BUFFER_BIT);\n\t\t\t\tthis._drawCover(gl, !flipY);\n\t\t\t}\n\t\t\tgl.bindFramebuffer(gl.FRAMEBUFFER, null);\n\t\t\tthis.updateViewport(wBackup, hBackup);\n\n\t\t\t// make sure the last texture is the active thing to draw\n\t\t\ttarget.cacheCanvas = renderTexture;\n\t\t}\n\t};\n\n\t/**\n\t * Add all the contents of a container to the pending buffers, called recursively on each container. This may\n\t * trigger a draw if a buffer runs out of space. This is the main workforce of the render loop.\n\t * @method _appendToBatchGroup\n\t * @param {Container} container The {{#crossLink \"Container\"}}{{/crossLink}} that contains everything to be drawn.\n\t * @param {WebGLRenderingContext} gl The canvas WebGL context object to draw into.\n\t * @param {Matrix2D} concatMtx The effective (concatenated) transformation matrix when beginning this container\n\t * @param {Number} concatAlpha The effective (concatenated) alpha when beginning this container\n\t * @param {Boolean} ignoreCache Don't use an element's cache during this draw\n\t * @protected\n\t */\n\tp._appendToBatchGroup = function (container, gl, concatMtx, concatAlpha, ignoreCache) {\n\t\t// sort out shared properties\n\t\tif (!container._glMtx) { container._glMtx = new createjs.Matrix2D(); }\n\t\tvar cMtx = container._glMtx;\n\t\tcMtx.copy(concatMtx);\n\t\tif (container.transformMatrix) {\n\t\t\tcMtx.appendMatrix(container.transformMatrix);\n\t\t} else {\n\t\t\tcMtx.appendTransform(\n\t\t\t\tcontainer.x, container.y,\n\t\t\t\tcontainer.scaleX, container.scaleY,\n\t\t\t\tcontainer.rotation, container.skewX, container.skewY,\n\t\t\t\tcontainer.regX, container.regY\n\t\t\t);\n\t\t}\n\n\t\t// sub components of figuring out the position an object holds\n\t\tvar subL, subT, subR, subB;\n\n\t\t// actually apply its data to the buffers\n\t\tvar l = container.children.length;\n\t\tfor (var i = 0; i < l; i++) {\n\t\t\tvar item = container.children[i];\n\n\t\t\tif (!(item.visible && concatAlpha)) { continue; }\n\t\t\tif (!item.cacheCanvas || ignoreCache) {\n\t\t\t\tif (item._updateState){\n\t\t\t\t\titem._updateState();\n\t\t\t\t}\n\t\t\t\tif (item.children) {\n\t\t\t\t\tthis._appendToBatchGroup(item, gl, cMtx, item.alpha * concatAlpha);\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// check for overflowing batch, if yes then force a render\n\t\t\t// TODO: DHG: consider making this polygon count dependant for things like vector draws\n\t\t\tif (this.batchCardCount+1 > this._maxCardsPerBatch) {\n\t\t\t\tthis.batchReason = \"vertexOverflow\";\n\t\t\t\tthis._drawBuffers(gl);\t\t\t\t\t// <------------------------------------------------------------\n\t\t\t\tthis.batchCardCount = 0;\n\t\t\t}\n\n\t\t\t// keep track of concatenated position\n\t\t\tif (!item._glMtx) { item._glMtx = new createjs.Matrix2D(); }\n\t\t\tvar iMtx = item._glMtx;\n\t\t\tiMtx.copy(cMtx);\n\t\t\tif (item.transformMatrix) {\n\t\t\t\tiMtx.appendMatrix(item.transformMatrix);\n\t\t\t} else {\n\t\t\t\tiMtx.appendTransform(\n\t\t\t\t\titem.x, item.y,\n\t\t\t\t\titem.scaleX, item.scaleY,\n\t\t\t\t\titem.rotation, item.skewX, item.skewY,\n\t\t\t\t\titem.regX, item.regY\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tvar uvRect, texIndex, image, frame, texture, src;\n\t\t\tvar useCache = item.cacheCanvas && !ignoreCache;\n\n\t\t\tif (item._webGLRenderStyle === 2 || useCache) {\t\t\t// BITMAP / Cached Canvas\n\t\t\t\timage = (ignoreCache?false:item.cacheCanvas) || item.image;\n\t\t\t} else if (item._webGLRenderStyle === 1) {\t\t\t\t\t\t\t\t\t\t\t// SPRITE\n\t\t\t\tframe = item.spriteSheet.getFrame(item.currentFrame);\t//TODO: Faster way?\n\t\t\t\tif (frame === null) { continue; }\n\t\t\t\timage = frame.image;\n\t\t\t} else {\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t// MISC (DOM objects render themselves later)\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tvar uvs = this._uvs;\n\t\t\tvar vertices = this._vertices;\n\t\t\tvar texI = this._indices;\n\t\t\tvar alphas = this._alphas;\n\n\t\t\t// calculate texture\n\t\t\tif (!image) { continue; }\n\t\t\tif (image._storeID === undefined) {\n\t\t\t\t// this texture is new to us so load it and add it to the batch\n\t\t\t\ttexture = this._loadTextureImage(gl, image);\n\t\t\t\tthis._insertTextureInBatch(gl, texture);\n\t\t\t} else {\n\t\t\t\t// fetch the texture (render textures know how to look themselves up to simplify this logic)\n\t\t\t\ttexture = this._textureDictionary[image._storeID];\n\t\t\t\tif (!texture){\n\t\t\t\t\tif (this.vocalDebug){ console.log(\"Texture should not be looked up while not being stored.\"); }\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\t// put it in the batch if needed\n\t\t\t\tif (texture._batchID !== this._batchID) {\n\t\t\t\t\tthis._insertTextureInBatch(gl, texture);\n\t\t\t\t}\n\t\t\t}\n\t\t\ttexIndex = texture._activeIndex;\n\n\t\t\tif (item._webGLRenderStyle === 2 || useCache) {\t\t\t// BITMAP / Cached Canvas\n\t\t\t\tif (!useCache && item.sourceRect) {\n\t\t\t\t\t// calculate uvs\n\t\t\t\t\tif (!item._uvRect) { item._uvRect = {}; }\n\t\t\t\t\tsrc = item.sourceRect;\n\t\t\t\t\tuvRect = item._uvRect;\n\t\t\t\t\tuvRect.t = (src.y)/image.height;\n\t\t\t\t\tuvRect.l = (src.x)/image.width;\n\t\t\t\t\tuvRect.b = (src.y + src.height)/image.height;\n\t\t\t\t\tuvRect.r = (src.x + src.width)/image.width;\n\n\t\t\t\t\t// calculate vertices\n\t\t\t\t\tsubL = 0;\t\t\t\t\t\t\tsubT = 0;\n\t\t\t\t\tsubR = src.width+subL;\t\t\t\tsubB = src.height+subT;\n\t\t\t\t} else {\n\t\t\t\t\t// calculate uvs\n\t\t\t\t\tuvRect = StageGL.UV_RECT;\n\t\t\t\t\t// calculate vertices\n\t\t\t\t\tif (useCache) {\n\t\t\t\t\t\tsrc = item.bitmapCache;\n\t\t\t\t\t\tsubL = src.x+(src._filterOffX/src.scale);\tsubT = src.y+(src._filterOffY/src.scale);\n\t\t\t\t\t\tsubR = (src._drawWidth/src.scale)+subL;\t\tsubB = (src._drawHeight/src.scale)+subT;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsubL = 0;\t\t\t\t\t\tsubT = 0;\n\t\t\t\t\t\tsubR = image.width+subL;\t\tsubB = image.height+subT;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (item._webGLRenderStyle === 1) {\t\t\t\t\t\t\t\t\t\t\t// SPRITE\n\t\t\t\tvar rect = frame.rect;\n\n\t\t\t\t// calculate uvs\n\t\t\t\tuvRect = frame.uvRect;\n\t\t\t\tif (!uvRect) {\n\t\t\t\t\tuvRect = StageGL.buildUVRects(item.spriteSheet, item.currentFrame, false);\n\t\t\t\t}\n\n\t\t\t\t// calculate vertices\n\t\t\t\tsubL = -frame.regX;\t\t\t\t\t\t\t\tsubT = -frame.regY;\n\t\t\t\tsubR = rect.width-frame.regX;\t\t\t\t\tsubB = rect.height-frame.regY;\n\t\t\t}\n\n\t\t\t// These must be calculated here else a forced draw might happen after they're set\n\t\t\tvar offV1 = this.batchCardCount*StageGL.INDICIES_PER_CARD;\t\t// offset for 1 component vectors\n\t\t\tvar offV2 = offV1*2;\t\t\t\t\t\t\t\t\t\t\t// offset for 2 component vectors\n\n\t\t\t//DHG: See Matrix2D.transformPoint for why this math specifically\n\t\t\t// apply vertices\n\t\t\tvertices[offV2] =\t\tsubL *iMtx.a + subT *iMtx.c +iMtx.tx;\t\tvertices[offV2+1] =\t\tsubL *iMtx.b + subT *iMtx.d +iMtx.ty;\n\t\t\tvertices[offV2+2] =\t\tsubL *iMtx.a + subB *iMtx.c +iMtx.tx;\t\tvertices[offV2+3] =\t\tsubL *iMtx.b + subB *iMtx.d +iMtx.ty;\n\t\t\tvertices[offV2+4] =\t\tsubR *iMtx.a + subT *iMtx.c +iMtx.tx;\t\tvertices[offV2+5] =\t\tsubR *iMtx.b + subT *iMtx.d +iMtx.ty;\n\t\t\tvertices[offV2+6] =\t\tvertices[offV2+2];\t\t\t\t\t\t\tvertices[offV2+7] =\t\tvertices[offV2+3];\n\t\t\tvertices[offV2+8] =\t\tvertices[offV2+4];\t\t\t\t\t\t\tvertices[offV2+9] =\t\tvertices[offV2+5];\n\t\t\tvertices[offV2+10] =\tsubR *iMtx.a + subB *iMtx.c +iMtx.tx;\t\tvertices[offV2+11] =\tsubR *iMtx.b + subB *iMtx.d +iMtx.ty;\n\n\t\t\t// apply uvs\n\t\t\tuvs[offV2] =\tuvRect.l;\t\t\tuvs[offV2+1] =\tuvRect.t;\n\t\t\tuvs[offV2+2] =\tuvRect.l;\t\t\tuvs[offV2+3] =\tuvRect.b;\n\t\t\tuvs[offV2+4] =\tuvRect.r;\t\t\tuvs[offV2+5] =\tuvRect.t;\n\t\t\tuvs[offV2+6] =\tuvRect.l;\t\t\tuvs[offV2+7] =\tuvRect.b;\n\t\t\tuvs[offV2+8] =\tuvRect.r;\t\t\tuvs[offV2+9] =\tuvRect.t;\n\t\t\tuvs[offV2+10] =\tuvRect.r;\t\t\tuvs[offV2+11] =\tuvRect.b;\n\n\t\t\t// apply texture\n\t\t\ttexI[offV1] = texI[offV1+1] = texI[offV1+2] = texI[offV1+3] = texI[offV1+4] = texI[offV1+5] = texIndex;\n\n\t\t\t// apply alpha\n\t\t\talphas[offV1] = alphas[offV1+1] = alphas[offV1+2] = alphas[offV1+3] = alphas[offV1+4] = alphas[offV1+5] = item.alpha * concatAlpha;\n\n\t\t\tthis.batchCardCount++;\n\t\t}\n\t};\n\n\t/**\n\t * Draws all the currently defined cards in the buffer to the render surface.\n\t * @method _drawBuffers\n\t * @param {WebGLRenderingContext} gl The canvas WebGL context object to draw into.\n\t * @protected\n\t */\n\tp._drawBuffers = function (gl) {\n\t\tif (this.batchCardCount <= 0) { return; }\t// prevents error logs on stages filled with un-renederable content.\n\n\t\tif (this.vocalDebug) {\n\t\t\tconsole.log(\"Draw[\"+ this._drawID +\":\"+ this._batchID +\"] : \"+ this.batchReason);\n\t\t}\n\t\tvar shaderProgram = this._activeShader;\n\t\tvar vertexPositionBuffer = this._vertexPositionBuffer;\n\t\tvar textureIndexBuffer = this._textureIndexBuffer;\n\t\tvar uvPositionBuffer = this._uvPositionBuffer;\n\t\tvar alphaBuffer = this._alphaBuffer;\n\n\t\tgl.useProgram(shaderProgram);\n\n\t\tgl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);\n\t\tgl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, vertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);\n\t\tgl.bufferSubData(gl.ARRAY_BUFFER, 0, this._vertices);\n\n\t\tgl.bindBuffer(gl.ARRAY_BUFFER, textureIndexBuffer);\n\t\tgl.vertexAttribPointer(shaderProgram.textureIndexAttribute, textureIndexBuffer.itemSize, gl.FLOAT, false, 0, 0);\n\t\tgl.bufferSubData(gl.ARRAY_BUFFER, 0, this._indices);\n\n\t\tgl.bindBuffer(gl.ARRAY_BUFFER, uvPositionBuffer);\n\t\tgl.vertexAttribPointer(shaderProgram.uvPositionAttribute, uvPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);\n\t\tgl.bufferSubData(gl.ARRAY_BUFFER, 0, this._uvs);\n\n\t\tgl.bindBuffer(gl.ARRAY_BUFFER, alphaBuffer);\n\t\tgl.vertexAttribPointer(shaderProgram.alphaAttribute, alphaBuffer.itemSize, gl.FLOAT, false, 0, 0);\n\t\tgl.bufferSubData(gl.ARRAY_BUFFER, 0, this._alphas);\n\n\t\tgl.uniformMatrix4fv(shaderProgram.pMatrixUniform, gl.FALSE, this._projectionMatrix);\n\n\t\tfor (var i = 0; i < this._batchTextureCount; i++) {\n\t\t\tvar texture = this._batchTextures[i];\n\t\t\tgl.activeTexture(gl.TEXTURE0 + i);\n\t\t\tgl.bindTexture(gl.TEXTURE_2D, texture);\n\t\t\tthis.setTextureParams(gl, texture.isPOT);\n\t\t}\n\n\t\tgl.drawArrays(gl.TRIANGLES, 0, this.batchCardCount*StageGL.INDICIES_PER_CARD);\n\t\tthis._batchID++;\n\t};\n\n\t/**\n\t * Draws a card that covers the entire render surface. Mainly used for filters.\n\t * @method _drawBuffers\n\t * @param {WebGLRenderingContext} gl The canvas WebGL context object to draw into.\n\t * @param {Boolean} flipY Covers are used for things like RenderTextures and because of 3D vs Canvas space this can\n\t * end up meaning the `y` space sometimes requires flipping in the render.\n\t * @protected\n\t */\n\tp._drawCover = function (gl, flipY) {\n\t\tif (this._isDrawing > 0) {\n\t\t\tthis._drawBuffers(gl);\n\t\t}\n\n\t\tif (this.vocalDebug) {\n\t\t\tconsole.log(\"Draw[\"+ this._drawID +\":\"+ this._batchID +\"] : \"+ \"Cover\");\n\t\t}\n\t\tvar shaderProgram = this._activeShader;\n\t\tvar vertexPositionBuffer = this._vertexPositionBuffer;\n\t\tvar uvPositionBuffer = this._uvPositionBuffer;\n\n\t\tgl.clear(gl.COLOR_BUFFER_BIT);\n\t\tgl.useProgram(shaderProgram);\n\n\t\tgl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);\n\t\tgl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, vertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);\n\t\tgl.bufferSubData(gl.ARRAY_BUFFER, 0, StageGL.COVER_VERT);\n\t\tgl.bindBuffer(gl.ARRAY_BUFFER, uvPositionBuffer);\n\t\tgl.vertexAttribPointer(shaderProgram.uvPositionAttribute, uvPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);\n\t\tgl.bufferSubData(gl.ARRAY_BUFFER, 0, flipY?StageGL.COVER_UV_FLIP:StageGL.COVER_UV);\n\n\t\tgl.uniform1i(shaderProgram.samplerUniform, 0);\n\t\tgl.uniform1f(shaderProgram.uprightUniform, flipY?0:1);\n\n\t\tgl.drawArrays(gl.TRIANGLES, 0, StageGL.INDICIES_PER_CARD);\n\t};\n\n\tcreatejs.StageGL = createjs.promote(StageGL, \"Stage\");\n}());\n\n//##############################################################################\n// Bitmap.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\n\t/**\n\t * A Bitmap represents an Image, Canvas, or Video in the display list. A Bitmap can be instantiated using an existing\n\t * HTML element, or a string.\n\t *\n\t *

Example

\n\t *\n\t * \tvar bitmap = new createjs.Bitmap(\"imagePath.jpg\");\n\t *\n\t * Notes:\n\t *

When using a video source that may loop or seek, use a {{#crossLink \"VideoBuffer\"}}{{/crossLink}} object to\n\t * \t prevent blinking / flashing.\n\t * \t
When a string path or image tag that is not yet loaded is used, the stage may need to be redrawn before it\n\t * \t will be displayed.
Bitmaps with an SVG source currently will not respect an alpha value other than 0 or 1. To get around this,\n\t * \tthe Bitmap can be cached.
Bitmaps with an SVG source will taint the canvas with cross-origin data, which prevents interactivity. This\n\t * \thappens in all browsers except recent Firefox builds.
Images loaded cross-origin will throw cross-origin security errors when interacted with using a mouse, using\n\t * \tmethods such as `getObjectUnderPoint`, or using filters, or caching. You can get around this by setting\n\t * \t`crossOrigin` flags on your images before passing them to EaselJS, eg: `img.crossOrigin=\"Anonymous\";`

\n\t *\n\t * @class Bitmap\n\t * @extends DisplayObject\n\t * @constructor\n\t * @param {CanvasImageSource | String | Object} imageOrUri The source image to display. This can be a CanvasImageSource\n\t * (image, video, canvas), an object with a `getImage` method that returns a CanvasImageSource, or a string URL to an image.\n\t * If the latter, a new Image instance with the URL as its src will be used.\n\t **/\n\tfunction Bitmap(imageOrUri) {\n\t\tthis.DisplayObject_constructor();\n\t\t\n\t\t\n\t// public properties:\n\t\t/**\n\t\t * The source image to display. This can be a CanvasImageSource\n\t\t * (image, video, canvas), an object with a `getImage` method that returns a CanvasImageSource, or a string URL to an image.\n\t\t * If the latter, a new Image instance with the URL as its src will be used.\n\t\t * @property image\n\t\t * @type CanvasImageSource | Object\n\t\t **/\n\t\tif (typeof imageOrUri == \"string\") {\n\t\t\tthis.image = document.createElement(\"img\");\n\t\t\tthis.image.src = imageOrUri;\n\t\t} else {\n\t\t\tthis.image = imageOrUri;\n\t\t}\n\t\n\t\t/**\n\t\t * Specifies an area of the source image to draw. If omitted, the whole image will be drawn.\n\t\t * Notes:\n\t\t *

that video sources must have a width / height set to work correctly with `sourceRect`
Cached objects will ignore the `sourceRect` property

\n\t\t * @property sourceRect\n\t\t * @type Rectangle\n\t\t * @default null\n\t\t */\n\t\tthis.sourceRect = null;\n\n\t// private properties:\n\t\t/**\n\t\t * Docced in superclass.\n\t\t */\n\t\tthis._webGLRenderStyle = createjs.DisplayObject._StageGL_BITMAP;\n\t}\n\tvar p = createjs.extend(Bitmap, createjs.DisplayObject);\n\t\n\t\n// public methods:\n\t/**\n\t * Constructor alias for backwards compatibility. This method will be removed in future versions.\n\t * Subclasses should be updated to use {{#crossLink \"Utility Methods/extends\"}}{{/crossLink}}.\n\t * @method initialize\n\t * @deprecated in favour of `createjs.promote()`\n\t **/\n\tp.initialize = Bitmap; // TODO: deprecated.\n\n\t/**\n\t * Returns true or false indicating whether the display object would be visible if drawn to a canvas.\n\t * This does not account for whether it would be visible within the boundaries of the stage.\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method isVisible\n\t * @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas\n\t **/\n\tp.isVisible = function() {\n\t\tvar image = this.image;\n\t\tvar hasContent = this.cacheCanvas || (image && (image.naturalWidth || image.getContext || image.readyState >= 2));\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);\n\t};\n\n\t/**\n\t * Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform.\n\t * Returns true if the draw was handled (useful for overriding functionality).\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method draw\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.\n\t * @param {Boolean} [ignoreCache=false] Indicates whether the draw operation should ignore any current cache.\n\t * For example, used for drawing the cache (to prevent it from simply drawing an existing cache back\n\t * into itself).\n\t * @return {Boolean}\n\t **/\n\tp.draw = function(ctx, ignoreCache) {\n\t\tif (this.DisplayObject_draw(ctx, ignoreCache)) { return true; }\n\t\tvar img = this.image, rect = this.sourceRect;\n\t\tif (img.getImage) { img = img.getImage(); }\n\t\tif (!img) { return true; }\n\t\tif (rect) {\n\t\t\t// some browsers choke on out of bound values, so we'll fix them:\n\t\t\tvar x1 = rect.x, y1 = rect.y, x2 = x1 + rect.width, y2 = y1 + rect.height, x = 0, y = 0, w = img.width, h = img.height;\n\t\t\tif (x1 < 0) { x -= x1; x1 = 0; }\n\t\t\tif (x2 > w) { x2 = w; }\n\t\t\tif (y1 < 0) { y -= y1; y1 = 0; }\n\t\t\tif (y2 > h) { y2 = h; }\n\t\t\tctx.drawImage(img, x1, y1, x2-x1, y2-y1, x, y, x2-x1, y2-y1);\n\t\t} else {\n\t\t\tctx.drawImage(img, 0, 0);\n\t\t}\n\t\treturn true;\n\t};\n\t\n\t//Note, the doc sections below document using the specified APIs (from DisplayObject) from\n\t//Bitmap. This is why they have no method implementations.\n\t\n\t/**\n\t * Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances.\n\t * You should not cache Bitmap instances as it can degrade performance.\n\t *\n\t * However: If you want to use a filter on a Bitmap, you MUST cache it, or it will not work.\n\t * To see the API for caching, please visit the DisplayObject {{#crossLink \"DisplayObject/cache\"}}{{/crossLink}}\n\t * method.\n\t * @method cache\n\t **/\n\t\n\t/**\n\t * Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances.\n\t * You should not cache Bitmap instances as it can degrade performance.\n\t *\n\t * However: If you want to use a filter on a Bitmap, you MUST cache it, or it will not work.\n\t * To see the API for caching, please visit the DisplayObject {{#crossLink \"DisplayObject/cache\"}}{{/crossLink}}\n\t * method.\n\t * @method updateCache\n\t **/\n\t\n\t/**\n\t * Because the content of a Bitmap is already in a simple format, cache is unnecessary for Bitmap instances.\n\t * You should not cache Bitmap instances as it can degrade performance.\n\t *\n\t * However: If you want to use a filter on a Bitmap, you MUST cache it, or it will not work.\n\t * To see the API for caching, please visit the DisplayObject {{#crossLink \"DisplayObject/cache\"}}{{/crossLink}}\n\t * method.\n\t * @method uncache\n\t **/\n\n\t/**\n\t * Docced in superclass.\n\t */\n\tp.getBounds = function() {\n\t\tvar rect = this.DisplayObject_getBounds();\n\t\tif (rect) { return rect; }\n\t\tvar image = this.image, o = this.sourceRect || image;\n\t\tvar hasContent = (image && (image.naturalWidth || image.getContext || image.readyState >= 2));\n\t\treturn hasContent ? this._rectangle.setValues(0, 0, o.width, o.height) : null;\n\t};\n\t\n\t/**\n\t * Returns a clone of the Bitmap instance.\n\t * @method clone\n\t * @param {Boolean} node Whether the underlying dom element should be cloned as well.\n\t * @return {Bitmap} a clone of the Bitmap instance.\n\t **/\n\tp.clone = function(node) {\n\t\tvar image = this.image;\n\t\tif(image && node){ image = image.cloneNode(); }\n\t\tvar o = new Bitmap(image);\n\t\tif (this.sourceRect) { o.sourceRect = this.sourceRect.clone(); }\n\t\tthis._cloneProps(o);\n\t\treturn o;\n\t};\n\t\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t **/\n\tp.toString = function() {\n\t\treturn \"[Bitmap (name=\"+ this.name +\")]\";\n\t};\n\n\t\n\tcreatejs.Bitmap = createjs.promote(Bitmap, \"DisplayObject\");\n}());\n\n//##############################################################################\n// Sprite.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * Displays a frame or sequence of frames (ie. an animation) from a SpriteSheet instance. A sprite sheet is a series of\n\t * images (usually animation frames) combined into a single image. For example, an animation consisting of 8 100x100\n\t * images could be combined into a 400x200 sprite sheet (4 frames across by 2 high). You can display individual frames,\n\t * play frames as an animation, and even sequence animations together.\n\t *\n\t * See the {{#crossLink \"SpriteSheet\"}}{{/crossLink}} class for more information on setting up frames and animations.\n\t *\n\t *

Example

\n\t *\n\t * var instance = new createjs.Sprite(spriteSheet);\n\t * instance.gotoAndStop(\"frameName\");\n\t *\n\t * Until {{#crossLink \"Sprite/gotoAndStop\"}}{{/crossLink}} or {{#crossLink \"Sprite/gotoAndPlay\"}}{{/crossLink}} is called,\n\t * only the first defined frame defined in the sprite sheet will be displayed.\n\t *\n\t * @class Sprite\n\t * @extends DisplayObject\n\t * @constructor\n\t * @param {SpriteSheet} spriteSheet The SpriteSheet instance to play back. This includes the source image(s), frame\n\t * dimensions, and frame data. See {{#crossLink \"SpriteSheet\"}}{{/crossLink}} for more information.\n\t * @param {String|Number} [frameOrAnimation] The frame number or animation to play initially.\n\t **/\n\tfunction Sprite(spriteSheet, frameOrAnimation) {\n\t\tthis.DisplayObject_constructor();\n\t\t\n\t\t\n\t// public properties:\n\t\t/**\n\t\t * The frame index that will be drawn when draw is called. Note that with some {{#crossLink \"SpriteSheet\"}}{{/crossLink}}\n\t\t * definitions, this will advance non-sequentially. This will always be an integer value.\n\t\t * @property currentFrame\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t * @readonly\n\t\t **/\n\t\tthis.currentFrame = 0;\n\t\n\t\t/**\n\t\t * Returns the name of the currently playing animation.\n\t\t * @property currentAnimation\n\t\t * @type {String}\n\t\t * @final\n\t\t * @readonly\n\t\t **/\n\t\tthis.currentAnimation = null;\n\t\n\t\t/**\n\t\t * Prevents the animation from advancing each tick automatically. For example, you could create a sprite\n\t\t * sheet of icons, set paused to true, and display the appropriate icon by setting currentFrame.\n\t\t * @property paused\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t **/\n\t\tthis.paused = true;\n\t\n\t\t/**\n\t\t * The SpriteSheet instance to play back. This includes the source image, frame dimensions, and frame\n\t\t * data. See {{#crossLink \"SpriteSheet\"}}{{/crossLink}} for more information.\n\t\t * @property spriteSheet\n\t\t * @type {SpriteSheet}\n\t\t * @readonly\n\t\t **/\n\t\tthis.spriteSheet = spriteSheet;\n\t\n\t\t/**\n\t\t * Specifies the current frame index within the currently playing animation. When playing normally, this will increase\n\t\t * from 0 to n-1, where n is the number of frames in the current animation.\n\t\t *\n\t\t * This could be a non-integer value if\n\t\t * using time-based playback (see {{#crossLink \"Sprite/framerate\"}}{{/crossLink}}, or if the animation's speed is\n\t\t * not an integer.\n\t\t * @property currentAnimationFrame\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis.currentAnimationFrame = 0;\n\t\n\t\t/**\n\t\t * By default Sprite instances advance one frame per tick. Specifying a framerate for the Sprite (or its related\n\t\t * SpriteSheet) will cause it to advance based on elapsed time between ticks as appropriate to maintain the target\n\t\t * framerate.\n\t\t *\n\t\t * For example, if a Sprite with a framerate of 10 is placed on a Stage being updated at 40fps, then the Sprite will\n\t\t * advance roughly one frame every 4 ticks. This will not be exact, because the time between each tick will\n\t\t * vary slightly between frames.\n\t\t *\n\t\t * This feature is dependent on the tick event object (or an object with an appropriate \"delta\" property) being\n\t\t * passed into {{#crossLink \"Stage/update\"}}{{/crossLink}}.\n\t\t * @property framerate\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis.framerate = 0;\n\t\n\t\n\t// private properties:\n\t\t/**\n\t\t * Current animation object.\n\t\t * @property _animation\n\t\t * @protected\n\t\t * @type {Object}\n\t\t * @default null\n\t\t **/\n\t\tthis._animation = null;\n\t\n\t\t/**\n\t\t * Current frame index.\n\t\t * @property _currentFrame\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default null\n\t\t **/\n\t\tthis._currentFrame = null;\n\t\t\n\t\t/**\n\t\t * Skips the next auto advance. Used by gotoAndPlay to avoid immediately jumping to the next frame\n\t\t * @property _skipAdvance\n\t\t * @protected\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t **/\n\t\tthis._skipAdvance = false;\n\n\t\t/**\n\t\t * Docced in superclass.\n\t\t */\n\t\tthis._webGLRenderStyle = createjs.DisplayObject._StageGL_SPRITE;\n\n\t\tif (frameOrAnimation != null) { this.gotoAndPlay(frameOrAnimation); }\n\t}\n\tvar p = createjs.extend(Sprite, createjs.DisplayObject);\n\n\t/**\n\t * Constructor alias for backwards compatibility. This method will be removed in future versions.\n\t * Subclasses should be updated to use {{#crossLink \"Utility Methods/extends\"}}{{/crossLink}}.\n\t * @method initialize\n\t * @deprecated in favour of `createjs.promote()`\n\t **/\n\tp.initialize = Sprite; // TODO: Deprecated. This is for backwards support of Flash/Animate spritesheet export.\n\n\n// events:\n\t/**\n\t * Dispatched when an animation reaches its ends.\n\t * @event animationend\n\t * @param {Object} target The object that dispatched the event.\n\t * @param {String} type The event type.\n\t * @param {String} name The name of the animation that just ended.\n\t * @param {String} next The name of the next animation that will be played, or null. This will be the same as name if the animation is looping.\n\t * @since 0.6.0\n\t */\n\t \n\t/**\n\t * Dispatched any time the current frame changes. For example, this could be due to automatic advancement on a tick,\n\t * or calling gotoAndPlay() or gotoAndStop().\n\t * @event change\n\t * @param {Object} target The object that dispatched the event.\n\t * @param {String} type The event type.\n\t */\n\n\n// public methods:\n\t/**\n\t * Returns true or false indicating whether the display object would be visible if drawn to a canvas.\n\t * This does not account for whether it would be visible within the boundaries of the stage.\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method isVisible\n\t * @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas\n\t **/\n\tp.isVisible = function() {\n\t\tvar hasContent = this.cacheCanvas || this.spriteSheet.complete;\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);\n\t};\n\n\t/**\n\t * Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform.\n\t * Returns true if the draw was handled (useful for overriding functionality).\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method draw\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.\n\t * @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache.\n\t * For example, used for drawing the cache (to prevent it from simply drawing an existing cache back\n\t * into itself).\n\t **/\n\tp.draw = function(ctx, ignoreCache) {\n\t\tif (this.DisplayObject_draw(ctx, ignoreCache)) { return true; }\n\t\tthis._normalizeFrame();\n\t\tvar o = this.spriteSheet.getFrame(this._currentFrame|0);\n\t\tif (!o) { return false; }\n\t\tvar rect = o.rect;\n\t\tif (rect.width && rect.height) { ctx.drawImage(o.image, rect.x, rect.y, rect.width, rect.height, -o.regX, -o.regY, rect.width, rect.height); }\n\t\treturn true;\n\t};\n\n\t//Note, the doc sections below document using the specified APIs (from DisplayObject) from\n\t//Bitmap. This is why they have no method implementations.\n\n\t/**\n\t * Because the content of a Sprite is already in a raster format, cache is unnecessary for Sprite instances.\n\t * You should not cache Sprite instances as it can degrade performance.\n\t * @method cache\n\t **/\n\n\t/**\n\t * Because the content of a Sprite is already in a raster format, cache is unnecessary for Sprite instances.\n\t * You should not cache Sprite instances as it can degrade performance.\n\t * @method updateCache\n\t **/\n\n\t/**\n\t * Because the content of a Sprite is already in a raster format, cache is unnecessary for Sprite instances.\n\t * You should not cache Sprite instances as it can degrade performance.\n\t * @method uncache\n\t **/\n\n\t/**\n\t * Play (unpause) the current animation. The Sprite will be paused if either {{#crossLink \"Sprite/stop\"}}{{/crossLink}}\n\t * or {{#crossLink \"Sprite/gotoAndStop\"}}{{/crossLink}} is called. Single frame animations will remain\n\t * unchanged.\n\t * @method play\n\t **/\n\tp.play = function() {\n\t\tthis.paused = false;\n\t};\n\n\t/**\n\t * Stop playing a running animation. The Sprite will be playing if {{#crossLink \"Sprite/gotoAndPlay\"}}{{/crossLink}}\n\t * is called. Note that calling {{#crossLink \"Sprite/gotoAndPlay\"}}{{/crossLink}} or {{#crossLink \"Sprite/play\"}}{{/crossLink}}\n\t * will resume playback.\n\t * @method stop\n\t **/\n\tp.stop = function() {\n\t\tthis.paused = true;\n\t};\n\n\t/**\n\t * Sets paused to false and plays the specified animation name, named frame, or frame number.\n\t * @method gotoAndPlay\n\t * @param {String|Number} frameOrAnimation The frame number or animation name that the playhead should move to\n\t * and begin playing.\n\t **/\n\tp.gotoAndPlay = function(frameOrAnimation) {\n\t\tthis.paused = false;\n\t\tthis._skipAdvance = true;\n\t\tthis._goto(frameOrAnimation);\n\t};\n\n\t/**\n\t * Sets paused to true and seeks to the specified animation name, named frame, or frame number.\n\t * @method gotoAndStop\n\t * @param {String|Number} frameOrAnimation The frame number or animation name that the playhead should move to\n\t * and stop.\n\t **/\n\tp.gotoAndStop = function(frameOrAnimation) {\n\t\tthis.paused = true;\n\t\tthis._goto(frameOrAnimation);\n\t};\n\n\t/**\n\t * Advances the playhead. This occurs automatically each tick by default.\n\t * @param [time] {Number} The amount of time in ms to advance by. Only applicable if framerate is set on the Sprite\n\t * or its SpriteSheet.\n\t * @method advance\n\t*/\n\tp.advance = function(time) {\n\t\tvar fps = this.framerate || this.spriteSheet.framerate;\n\t\tvar t = (fps && time != null) ? time/(1000/fps) : 1;\n\t\tthis._normalizeFrame(t);\n\t};\n\t\n\t/**\n\t * Returns a {{#crossLink \"Rectangle\"}}{{/crossLink}} instance defining the bounds of the current frame relative to\n\t * the origin. For example, a 90 x 70 frame with regX=50 and regY=40 would return a\n\t * rectangle with [x=-50, y=-40, width=90, height=70]. This ignores transformations on the display object.\n\t *\n\t * Also see the SpriteSheet {{#crossLink \"SpriteSheet/getFrameBounds\"}}{{/crossLink}} method.\n\t * @method getBounds\n\t * @return {Rectangle} A Rectangle instance. Returns null if the frame does not exist, or the image is not fully\n\t * loaded.\n\t **/\n\tp.getBounds = function() {\n\t\t// TODO: should this normalizeFrame?\n\t\treturn this.DisplayObject_getBounds() || this.spriteSheet.getFrameBounds(this.currentFrame, this._rectangle);\n\t};\n\n\t/**\n\t * Returns a clone of the Sprite instance. Note that the same SpriteSheet is shared between cloned\n\t * instances.\n\t * @method clone\n\t * @return {Sprite} a clone of the Sprite instance.\n\t **/\n\tp.clone = function() {\n\t\treturn this._cloneProps(new Sprite(this.spriteSheet));\n\t};\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t **/\n\tp.toString = function() {\n\t\treturn \"[Sprite (name=\"+ this.name +\")]\";\n\t};\n\n// private methods:\n\t/**\n\t * @method _cloneProps\n\t * @param {Sprite} o\n\t * @return {Sprite} o\n\t * @protected\n\t **/\n\tp._cloneProps = function(o) {\n\t\tthis.DisplayObject__cloneProps(o);\n\t\to.currentFrame = this.currentFrame;\n\t\to.currentAnimation = this.currentAnimation;\n\t\to.paused = this.paused;\n\t\to.currentAnimationFrame = this.currentAnimationFrame;\n\t\to.framerate = this.framerate;\n\t\t\n\t\to._animation = this._animation;\n\t\to._currentFrame = this._currentFrame;\n\t\to._skipAdvance = this._skipAdvance;\n\t\treturn o;\n\t};\n\t\n\t/**\n\t * Advances the currentFrame if paused is not true. This is called automatically when the {{#crossLink \"Stage\"}}{{/crossLink}}\n\t * ticks.\n\t * @param {Object} evtObj An event object that will be dispatched to all tick listeners. This object is reused between dispatchers to reduce construction & GC costs.\n\t * @protected\n\t * @method _tick\n\t **/\n\tp._tick = function(evtObj) {\n\t\tif (!this.paused) {\n\t\t\tif (!this._skipAdvance) { this.advance(evtObj&&evtObj.delta); }\n\t\t\tthis._skipAdvance = false;\n\t\t}\n\t\tthis.DisplayObject__tick(evtObj);\n\t};\n\n\n\t/**\n\t * Normalizes the current frame, advancing animations and dispatching callbacks as appropriate.\n\t * @protected\n\t * @method _normalizeFrame\n\t **/\n\tp._normalizeFrame = function(frameDelta) {\n\t\tframeDelta = frameDelta || 0;\n\t\tvar animation = this._animation;\n\t\tvar paused = this.paused;\n\t\tvar frame = this._currentFrame;\n\t\tvar l;\n\t\t\n\t\tif (animation) {\n\t\t\tvar speed = animation.speed || 1;\n\t\t\tvar animFrame = this.currentAnimationFrame;\n\t\t\tl = animation.frames.length;\n\t\t\tif (animFrame + frameDelta * speed >= l) {\n\t\t\t\tvar next = animation.next;\n\t\t\t\tif (this._dispatchAnimationEnd(animation, frame, paused, next, l - 1)) {\n\t\t\t\t\t// something changed in the event stack, so we shouldn't make any more changes here.\n\t\t\t\t\treturn;\n\t\t\t\t} else if (next) {\n\t\t\t\t\t// sequence. Automatically calls _normalizeFrame again with the remaining frames.\n\t\t\t\t\treturn this._goto(next, frameDelta - (l - animFrame) / speed);\n\t\t\t\t} else {\n\t\t\t\t\t// end.\n\t\t\t\t\tthis.paused = true;\n\t\t\t\t\tanimFrame = animation.frames.length - 1;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tanimFrame += frameDelta * speed;\n\t\t\t}\n\t\t\tthis.currentAnimationFrame = animFrame;\n\t\t\tthis._currentFrame = animation.frames[animFrame | 0]\n\t\t} else {\n\t\t\tframe = (this._currentFrame += frameDelta);\n\t\t\tl = this.spriteSheet.getNumFrames();\n\t\t\tif (frame >= l && l > 0) {\n\t\t\t\tif (!this._dispatchAnimationEnd(animation, frame, paused, l - 1)) {\n\t\t\t\t\t// looped.\n\t\t\t\t\tif ((this._currentFrame -= l) >= l) { return this._normalizeFrame(); }\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tframe = this._currentFrame | 0;\n\t\tif (this.currentFrame != frame) {\n\t\t\tthis.currentFrame = frame;\n\t\t\tthis.dispatchEvent(\"change\");\n\t\t}\n\t};\n\n\t/**\n\t * Dispatches the \"animationend\" event. Returns true if a handler changed the animation (ex. calling {{#crossLink \"Sprite/stop\"}}{{/crossLink}},\n\t * {{#crossLink \"Sprite/gotoAndPlay\"}}{{/crossLink}}, etc.)\n\t * @property _dispatchAnimationEnd\n\t * @private\n\t * @type {Function}\n\t **/\n\tp._dispatchAnimationEnd = function(animation, frame, paused, next, end) {\n\t\tvar name = animation ? animation.name : null;\n\t\tif (this.hasEventListener(\"animationend\")) {\n\t\t\tvar evt = new createjs.Event(\"animationend\");\n\t\t\tevt.name = name;\n\t\t\tevt.next = next;\n\t\t\tthis.dispatchEvent(evt);\n\t\t}\n\t\t// did the animation get changed in the event stack?:\n\t\tvar changed = (this._animation != animation || this._currentFrame != frame);\n\t\t// if the animation hasn't changed, but the sprite was paused, then we want to stick to the last frame:\n\t\tif (!changed && !paused && this.paused) { this.currentAnimationFrame = end; changed = true; }\n\t\treturn changed;\n\t};\n\n\t/**\n\t * Moves the playhead to the specified frame number or animation.\n\t * @method _goto\n\t * @param {String|Number} frameOrAnimation The frame number or animation that the playhead should move to.\n\t * @param {Boolean} [frame] The frame of the animation to go to. Defaults to 0.\n\t * @protected\n\t **/\n\tp._goto = function(frameOrAnimation, frame) {\n\t\tthis.currentAnimationFrame = 0;\n\t\tif (isNaN(frameOrAnimation)) {\n\t\t\tvar data = this.spriteSheet.getAnimation(frameOrAnimation);\n\t\t\tif (data) {\n\t\t\t\tthis._animation = data;\n\t\t\t\tthis.currentAnimation = frameOrAnimation;\n\t\t\t\tthis._normalizeFrame(frame);\n\t\t\t}\n\t\t} else {\n\t\t\tthis.currentAnimation = this._animation = null;\n\t\t\tthis._currentFrame = frameOrAnimation;\n\t\t\tthis._normalizeFrame();\n\t\t}\n\t};\n\n\n\tcreatejs.Sprite = createjs.promote(Sprite, \"DisplayObject\");\n}());\n\n//##############################################################################\n// Shape.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * A Shape allows you to display vector art in the display list. It composites a {{#crossLink \"Graphics\"}}{{/crossLink}}\n\t * instance which exposes all of the vector drawing methods. The Graphics instance can be shared between multiple Shape\n\t * instances to display the same vector graphics with different positions or transforms.\n\t *\n\t * If the vector art will not\n\t * change between draws, you may want to use the {{#crossLink \"DisplayObject/cache\"}}{{/crossLink}} method to reduce the\n\t * rendering cost.\n\t *\n\t *

Example

\n\t *\n\t * var graphics = new createjs.Graphics().beginFill(\"#ff0000\").drawRect(0, 0, 100, 100);\n\t * var shape = new createjs.Shape(graphics);\n\t *\n\t * //Alternatively use can also use the graphics property of the Shape class to renderer the same as above.\n\t * var shape = new createjs.Shape();\n\t * shape.graphics.beginFill(\"#ff0000\").drawRect(0, 0, 100, 100);\n\t *\n\t * @class Shape\n\t * @extends DisplayObject\n\t * @constructor\n\t * @param {Graphics} graphics Optional. The graphics instance to display. If null, a new Graphics instance will be created.\n\t **/\n\tfunction Shape(graphics) {\n\t\tthis.DisplayObject_constructor();\n\t\t\n\t\t\n\t// public properties:\n\t\t/**\n\t\t * The graphics instance to display.\n\t\t * @property graphics\n\t\t * @type Graphics\n\t\t **/\n\t\tthis.graphics = graphics ? graphics : new createjs.Graphics();\n\t}\n\tvar p = createjs.extend(Shape, createjs.DisplayObject);\n\n\t// TODO: deprecated\n\t// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.\n\n\n// public methods:\n\t/**\n\t * Returns true or false indicating whether the Shape would be visible if drawn to a canvas.\n\t * This does not account for whether it would be visible within the boundaries of the stage.\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method isVisible\n\t * @return {Boolean} Boolean indicating whether the Shape would be visible if drawn to a canvas\n\t **/\n\tp.isVisible = function() {\n\t\tvar hasContent = this.cacheCanvas || (this.graphics && !this.graphics.isEmpty());\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);\n\t};\n\n\t/**\n\t * Draws the Shape into the specified context ignoring its visible, alpha, shadow, and transform. Returns true if\n\t * the draw was handled (useful for overriding functionality).\n\t *\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method draw\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.\n\t * @param {Boolean} [ignoreCache=false] Indicates whether the draw operation should ignore any current cache. For example,\n\t * used for drawing the cache (to prevent it from simply drawing an existing cache back into itself).\n\t * @return {Boolean}\n\t **/\n\tp.draw = function(ctx, ignoreCache) {\n\t\tif (this.DisplayObject_draw(ctx, ignoreCache)) { return true; }\n\t\tthis.graphics.draw(ctx, this);\n\t\treturn true;\n\t};\n\n\t/**\n\t * Returns a clone of this Shape. Some properties that are specific to this instance's current context are reverted to\n\t * their defaults (for example .parent).\n\t * @method clone\n\t * @param {Boolean} recursive If true, this Shape's {{#crossLink \"Graphics\"}}{{/crossLink}} instance will also be\n\t * cloned. If false, the Graphics instance will be shared with the new Shape.\n\t **/\n\tp.clone = function(recursive) {\n\t\tvar g = (recursive && this.graphics) ? this.graphics.clone() : this.graphics;\n\t\treturn this._cloneProps(new Shape(g));\n\t};\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t **/\n\tp.toString = function() {\n\t\treturn \"[Shape (name=\"+ this.name +\")]\";\n\t};\n\n\n\tcreatejs.Shape = createjs.promote(Shape, \"DisplayObject\");\n}());\n\n//##############################################################################\n// Text.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * Display one or more lines of dynamic text (not user editable) in the display list. Line wrapping support (using the\n\t * lineWidth) is very basic, wrapping on spaces and tabs only. Note that as an alternative to Text, you can position HTML\n\t * text above or below the canvas relative to items in the display list using the {{#crossLink \"DisplayObject/localToGlobal\"}}{{/crossLink}}\n\t * method, or using {{#crossLink \"DOMElement\"}}{{/crossLink}}.\n\t *\n\t * Please note that Text does not support HTML text, and can only display one font style at a time. To use\n\t * multiple font styles, you will need to create multiple text instances, and position them manually.\n\t *\n\t *

Example

\n\t *\n\t * var text = new createjs.Text(\"Hello World\", \"20px Arial\", \"#ff7700\");\n\t * text.x = 100;\n\t * text.textBaseline = \"alphabetic\";\n\t *\n\t * CreateJS Text supports web fonts (the same rules as Canvas). The font must be loaded and supported by the browser\n\t * before it can be displayed.\n\t *\n\t * Note: Text can be expensive to generate, so cache instances where possible. Be aware that not all\n\t * browsers will render Text exactly the same.\n\t * @class Text\n\t * @extends DisplayObject\n\t * @constructor\n\t * @param {String} [text] The text to display.\n\t * @param {String} [font] The font style to use. Any valid value for the CSS font attribute is acceptable (ex. \"bold\n\t * 36px Arial\").\n\t * @param {String} [color] The color to draw the text in. Any valid value for the CSS color attribute is acceptable (ex.\n\t * \"#F00\", \"red\", or \"#FF0000\").\n\t **/\n\tfunction Text(text, font, color) {\n\t\tthis.DisplayObject_constructor();\n\t\t\n\t\t\n\t// public properties:\n\t\t/**\n\t\t * The text to display.\n\t\t * @property text\n\t\t * @type String\n\t\t **/\n\t\tthis.text = text;\n\t\n\t\t/**\n\t\t * The font style to use. Any valid value for the CSS font attribute is acceptable (ex. \"bold 36px Arial\").\n\t\t * @property font\n\t\t * @type String\n\t\t **/\n\t\tthis.font = font;\n\t\n\t\t/**\n\t\t * The color to draw the text in. Any valid value for the CSS color attribute is acceptable (ex. \"#F00\"). Default is \"#000\".\n\t\t * It will also accept valid canvas fillStyle values.\n\t\t * @property color\n\t\t * @type String\n\t\t **/\n\t\tthis.color = color;\n\t\n\t\t/**\n\t\t * The horizontal text alignment. Any of \"start\", \"end\", \"left\", \"right\", and \"center\". For detailed\n\t\t * information view the\n\t\t * \n\t\t * whatwg spec. Default is \"left\".\n\t\t * @property textAlign\n\t\t * @type String\n\t\t **/\n\t\tthis.textAlign = \"left\";\n\t\n\t\t/**\n\t\t * The vertical alignment point on the font. Any of \"top\", \"hanging\", \"middle\", \"alphabetic\", \"ideographic\", or\n\t\t * \"bottom\". For detailed information view the \n\t\t * whatwg spec. Default is \"top\".\n\t\t * @property textBaseline\n\t\t * @type String\n\t\t*/\n\t\tthis.textBaseline = \"top\";\n\t\n\t\t/**\n\t\t * The maximum width to draw the text. If maxWidth is specified (not null), the text will be condensed or\n\t\t * shrunk to make it fit in this width. For detailed information view the\n\t\t * \n\t\t * whatwg spec.\n\t\t * @property maxWidth\n\t\t * @type Number\n\t\t*/\n\t\tthis.maxWidth = null;\n\t\n\t\t/**\n\t\t * If greater than 0, the text will be drawn as a stroke (outline) of the specified width.\n\t\t * @property outline\n\t\t * @type Number\n\t\t **/\n\t\tthis.outline = 0;\n\t\n\t\t/**\n\t\t * Indicates the line height (vertical distance between baselines) for multi-line text. If null or 0,\n\t\t * the value of getMeasuredLineHeight is used.\n\t\t * @property lineHeight\n\t\t * @type Number\n\t\t **/\n\t\tthis.lineHeight = 0;\n\t\n\t\t/**\n\t\t * Indicates the maximum width for a line of text before it is wrapped to multiple lines. If null,\n\t\t * the text will not be wrapped.\n\t\t * @property lineWidth\n\t\t * @type Number\n\t\t **/\n\t\tthis.lineWidth = null;\n\t}\n\tvar p = createjs.extend(Text, createjs.DisplayObject);\n\n\t// TODO: deprecated\n\t// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.\n\n\t\n// static properties:\n\t/**\n\t * @property _workingContext\n\t * @type CanvasRenderingContext2D\n\t * @private\n\t **/\n\tvar canvas = (createjs.createCanvas?createjs.createCanvas():document.createElement(\"canvas\"));\n\tif (canvas.getContext) { Text._workingContext = canvas.getContext(\"2d\"); canvas.width = canvas.height = 1; }\n\t\n\t\n// constants:\n\t/**\n\t * Lookup table for the ratio to offset bounds x calculations based on the textAlign property.\n\t * @property H_OFFSETS\n\t * @type Object\n\t * @protected\n\t * @static\n\t **/\n\tText.H_OFFSETS = {start: 0, left: 0, center: -0.5, end: -1, right: -1};\n\t\n\t/**\n\t * Lookup table for the ratio to offset bounds y calculations based on the textBaseline property.\n\t * @property H_OFFSETS\n\t * @type Object\n\t * @protected\n\t * @static\n\t **/\n\tText.V_OFFSETS = {top: 0, hanging: -0.01, middle: -0.4, alphabetic: -0.8, ideographic: -0.85, bottom: -1};\n\n\n// public methods:\n\t/**\n\t * Returns true or false indicating whether the display object would be visible if drawn to a canvas.\n\t * This does not account for whether it would be visible within the boundaries of the stage.\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method isVisible\n\t * @return {Boolean} Whether the display object would be visible if drawn to a canvas\n\t **/\n\tp.isVisible = function() {\n\t\tvar hasContent = this.cacheCanvas || (this.text != null && this.text !== \"\");\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent);\n\t};\n\n\t/**\n\t * Draws the Text into the specified context ignoring its visible, alpha, shadow, and transform.\n\t * Returns true if the draw was handled (useful for overriding functionality).\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method draw\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.\n\t * @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache.\n\t * For example, used for drawing the cache (to prevent it from simply drawing an existing cache back\n\t * into itself).\n\t **/\n\tp.draw = function(ctx, ignoreCache) {\n\t\tif (this.DisplayObject_draw(ctx, ignoreCache)) { return true; }\n\n\t\tvar col = this.color || \"#000\";\n\t\tif (this.outline) { ctx.strokeStyle = col; ctx.lineWidth = this.outline*1; }\n\t\telse { ctx.fillStyle = col; }\n\t\t\n\t\tthis._drawText(this._prepContext(ctx));\n\t\treturn true;\n\t};\n\n\t/**\n\t * Returns the measured, untransformed width of the text without wrapping. Use getBounds for a more robust value.\n\t * @method getMeasuredWidth\n\t * @return {Number} The measured, untransformed width of the text.\n\t **/\n\tp.getMeasuredWidth = function() {\n\t\treturn this._getMeasuredWidth(this.text);\n\t};\n\n\t/**\n\t * Returns an approximate line height of the text, ignoring the lineHeight property. This is based on the measured\n\t * width of a \"M\" character multiplied by 1.2, which provides an approximate line height for most fonts.\n\t * @method getMeasuredLineHeight\n\t * @return {Number} an approximate line height of the text, ignoring the lineHeight property. This is\n\t * based on the measured width of a \"M\" character multiplied by 1.2, which approximates em for most fonts.\n\t **/\n\tp.getMeasuredLineHeight = function() {\n\t\treturn this._getMeasuredWidth(\"M\")*1.2;\n\t};\n\n\t/**\n\t * Returns the approximate height of multi-line text by multiplying the number of lines against either the\n\t * lineHeight (if specified) or {{#crossLink \"Text/getMeasuredLineHeight\"}}{{/crossLink}}. Note that\n\t * this operation requires the text flowing logic to run, which has an associated CPU cost.\n\t * @method getMeasuredHeight\n\t * @return {Number} The approximate height of the untransformed multi-line text.\n\t **/\n\tp.getMeasuredHeight = function() {\n\t\treturn this._drawText(null,{}).height;\n\t};\n\n\t/**\n\t * Docced in superclass.\n\t */\n\tp.getBounds = function() {\n\t\tvar rect = this.DisplayObject_getBounds();\n\t\tif (rect) { return rect; }\n\t\tif (this.text == null || this.text === \"\") { return null; }\n\t\tvar o = this._drawText(null, {});\n\t\tvar w = (this.maxWidth && this.maxWidth < o.width) ? this.maxWidth : o.width;\n\t\tvar x = w * Text.H_OFFSETS[this.textAlign||\"left\"];\n\t\tvar lineHeight = this.lineHeight||this.getMeasuredLineHeight();\n\t\tvar y = lineHeight * Text.V_OFFSETS[this.textBaseline||\"top\"];\n\t\treturn this._rectangle.setValues(x, y, w, o.height);\n\t};\n\t\n\t/**\n\t * Returns an object with width, height, and lines properties. The width and height are the visual width and height\n\t * of the drawn text. The lines property contains an array of strings, one for\n\t * each line of text that will be drawn, accounting for line breaks and wrapping. These strings have trailing\n\t * whitespace removed.\n\t * @method getMetrics\n\t * @return {Object} An object with width, height, and lines properties.\n\t **/\n\tp.getMetrics = function() {\n\t\tvar o = {lines:[]};\n\t\to.lineHeight = this.lineHeight || this.getMeasuredLineHeight();\n\t\to.vOffset = o.lineHeight * Text.V_OFFSETS[this.textBaseline||\"top\"];\n\t\treturn this._drawText(null, o, o.lines);\n\t};\n\n\t/**\n\t * Returns a clone of the Text instance.\n\t * @method clone\n\t * @return {Text} a clone of the Text instance.\n\t **/\n\tp.clone = function() {\n\t\treturn this._cloneProps(new Text(this.text, this.font, this.color));\n\t};\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t **/\n\tp.toString = function() {\n\t\treturn \"[Text (text=\"+ (this.text.length > 20 ? this.text.substr(0, 17)+\"...\" : this.text) +\")]\";\n\t};\n\n\n// private methods:\n\t/**\n\t * @method _cloneProps\n\t * @param {Text} o\n\t * @protected\n\t * @return {Text} o\n\t **/\n\tp._cloneProps = function(o) {\n\t\tthis.DisplayObject__cloneProps(o);\n\t\to.textAlign = this.textAlign;\n\t\to.textBaseline = this.textBaseline;\n\t\to.maxWidth = this.maxWidth;\n\t\to.outline = this.outline;\n\t\to.lineHeight = this.lineHeight;\n\t\to.lineWidth = this.lineWidth;\n\t\treturn o;\n\t};\n\n\t/**\n\t * @method _getWorkingContext\n\t * @param {CanvasRenderingContext2D} ctx\n\t * @return {CanvasRenderingContext2D}\n\t * @protected\n\t **/\n\tp._prepContext = function(ctx) {\n\t\tctx.font = this.font||\"10px sans-serif\";\n\t\tctx.textAlign = this.textAlign||\"left\";\n\t\tctx.textBaseline = this.textBaseline||\"top\";\n\t\tctx.lineJoin = \"miter\";\n\t\tctx.miterLimit = 2.5;\n\t\treturn ctx;\n\t};\n\n\t/**\n\t * Draws multiline text.\n\t * @method _drawText\n\t * @param {CanvasRenderingContext2D} ctx\n\t * @param {Object} o\n\t * @param {Array} lines\n\t * @return {Object}\n\t * @protected\n\t **/\n\tp._drawText = function(ctx, o, lines) {\n\t\tvar paint = !!ctx;\n\t\tif (!paint) {\n\t\t\tctx = Text._workingContext;\n\t\t\tctx.save();\n\t\t\tthis._prepContext(ctx);\n\t\t}\n\t\tvar lineHeight = this.lineHeight||this.getMeasuredLineHeight();\n\t\t\n\t\tvar maxW = 0, count = 0;\n\t\tvar hardLines = String(this.text).split(/(?:\\r\\n|\\r|\\n)/);\n\t\tfor (var i=0, l=hardLines.length; i this.lineWidth) {\n\t\t\t\t// text wrapping:\n\t\t\t\tvar words = str.split(/(\\s)/);\n\t\t\t\tstr = words[0];\n\t\t\t\tw = ctx.measureText(str).width;\n\t\t\t\t\n\t\t\t\tfor (var j=1, jl=words.length; j this.lineWidth) {\n\t\t\t\t\t\tif (paint) { this._drawTextLine(ctx, str, count*lineHeight); }\n\t\t\t\t\t\tif (lines) { lines.push(str); }\n\t\t\t\t\t\tif (w > maxW) { maxW = w; }\n\t\t\t\t\t\tstr = words[j+1];\n\t\t\t\t\t\tw = ctx.measureText(str).width;\n\t\t\t\t\t\tcount++;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tstr += words[j] + words[j+1];\n\t\t\t\t\t\tw += wordW;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\t\n\t\t\tif (paint) { this._drawTextLine(ctx, str, count*lineHeight); }\n\t\t\tif (lines) { lines.push(str); }\n\t\t\tif (o && w == null) { w = ctx.measureText(str).width; }\n\t\t\tif (w > maxW) { maxW = w; }\n\t\t\tcount++;\n\t\t}\n\t\t\n\t\tif (o) {\n\t\t\to.width = maxW;\n\t\t\to.height = count*lineHeight;\n\t\t}\n\t\tif (!paint) { ctx.restore(); }\n\t\treturn o;\n\t};\n\n\t/**\n\t * @method _drawTextLine\n\t * @param {CanvasRenderingContext2D} ctx\n\t * @param {String} text\n\t * @param {Number} y\n\t * @protected\n\t **/\n\tp._drawTextLine = function(ctx, text, y) {\n\t\t// Chrome 17 will fail to draw the text if the last param is included but null, so we feed it a large value instead:\n\t\tif (this.outline) { ctx.strokeText(text, 0, y, this.maxWidth||0xFFFF); }\n\t\telse { ctx.fillText(text, 0, y, this.maxWidth||0xFFFF); }\n\t};\n\t\n\t\n\t/**\n\t * @method _getMeasuredWidth\n\t * @param {String} text\n\t * @protected\n\t **/\n\tp._getMeasuredWidth = function(text) {\n\t\tvar ctx = Text._workingContext;\n\t\tctx.save();\n\t\tvar w = this._prepContext(ctx).measureText(text).width;\n\t\tctx.restore();\n\t\treturn w;\n\t};\n\n\n\tcreatejs.Text = createjs.promote(Text, \"DisplayObject\");\n}());\n\n//##############################################################################\n// BitmapText.js\n//##############################################################################\n\nthis.createjs = this.createjs || {};\n\n(function () {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * Displays text using bitmap glyphs defined in a sprite sheet. Multi-line text is supported using new line characters,\n\t * but automatic wrapping is not supported. See the {{#crossLink \"BitmapText/spriteSheet:property\"}}{{/crossLink}}\n\t * property for more information on defining glyphs.\n\t *\n\t * Important: While BitmapText extends Container, it is not designed to be used as one.\n\t * As such, methods like addChild and removeChild are disabled.\n\t *\n\t *\n\t * @class BitmapText\n\t * @extends DisplayObject\n\t * @param {String} [text=\"\"] The text to display.\n\t * @param {SpriteSheet} [spriteSheet=null] The spritesheet that defines the character glyphs.\n\t * @constructor\n\t **/\n\tfunction BitmapText(text, spriteSheet) {\n\t\tthis.Container_constructor();\n\t\t\n\t\t\n\t// public properties:\n\t\t/**\n\t\t * The text to display.\n\t\t * @property text\n\t\t * @type String\n\t\t * @default \"\"\n\t\t **/\n\t\tthis.text = text||\"\";\n\t\t\n\t\t/**\n\t\t * A SpriteSheet instance that defines the glyphs for this bitmap text. Each glyph/character\n\t\t * should have a single frame animation defined in the sprite sheet named the same as\n\t\t * corresponding character. For example, the following animation definition:\n\t\t *\n\t\t * \t\t\"A\": {frames: [0]}\n\t\t *\n\t\t * would indicate that the frame at index 0 of the spritesheet should be drawn for the \"A\" character. The short form\n\t\t * is also acceptable:\n\t\t * \n\t\t * \t\t\"A\": 0\n\t\t *\n\t\t * Note that if a character in the text is not found in the sprite sheet, it will also\n\t\t * try to use the alternate case (upper or lower).\n\t\t *\n\t\t * See SpriteSheet for more information on defining sprite sheet data.\n\t\t * @property spriteSheet\n\t\t * @type SpriteSheet\n\t\t * @default null\n\t\t **/\n\t\tthis.spriteSheet = spriteSheet;\n\t\n\t\t/**\n\t\t * The height of each line of text. If 0, then it will use a line height calculated\n\t\t * by checking for the height of the \"1\", \"T\", or \"L\" character (in that order). If\n\t\t * those characters are not defined, it will use the height of the first frame of the\n\t\t * sprite sheet.\n\t\t * @property lineHeight\n\t\t * @type Number\n\t\t * @default 0\n\t\t **/\n\t\tthis.lineHeight = 0;\n\t\n\t\t/**\n\t\t * This spacing (in pixels) will be added after each character in the output.\n\t\t * @property letterSpacing\n\t\t * @type Number\n\t\t * @default 0\n\t\t **/\n\t\tthis.letterSpacing = 0;\n\t\n\t\t/**\n\t\t * If a space character is not defined in the sprite sheet, then empty pixels equal to\n\t\t * spaceWidth will be inserted instead. If 0, then it will use a value calculated\n\t\t * by checking for the width of the \"1\", \"l\", \"E\", or \"A\" character (in that order). If\n\t\t * those characters are not defined, it will use the width of the first frame of the\n\t\t * sprite sheet.\n\t\t * @property spaceWidth\n\t\t * @type Number\n\t\t * @default 0\n\t\t **/\n\t\tthis.spaceWidth = 0;\n\t\t\n\t\t\n\t// private properties:\n\t \t/**\n\t\t * @property _oldProps\n\t\t * @type Object\n\t\t * @protected\n\t\t **/\n\t\tthis._oldProps = {text:0,spriteSheet:0,lineHeight:0,letterSpacing:0,spaceWidth:0};\n\n\t\t/**\n\t\t * Used to track the object which this class attached listeners to, helps optimize listener attachment.\n\t\t * @property _oldStage\n\t\t * @type Stage\n\t\t * @protected\n\t\t */\n\t\tthis._oldStage = null;\n\t\t/**\n\t\t * The event listener proxy triggered drawing draw for special circumstances.\n\t\t * @property _drawAction\n\t\t * @type function\n\t\t * @protected\n\t\t */\n\t\tthis._drawAction = null;\n\t}\n\tvar p = createjs.extend(BitmapText, createjs.Container);\n\n// static properties:\n\t/**\n\t * BitmapText uses Sprite instances to draw text. To reduce the creation and destruction of instances (and thus garbage collection), it maintains\n\t * an internal object pool of sprite instances to reuse. Increasing this value can cause more sprites to be\n\t * retained, slightly increasing memory use, but reducing instantiation.\n\t * @property maxPoolSize\n\t * @type Number\n\t * @static\n\t * @default 100\n\t **/\n\tBitmapText.maxPoolSize = 100;\n\t\n\t/**\n\t * Sprite object pool.\n\t * @type {Array}\n\t * @static\n\t * @private\n\t */\n\tBitmapText._spritePool = [];\n\n\t\n// public methods:\n\t/**\n\t * Docced in superclass.\n\t **/\n\tp.draw = function(ctx, ignoreCache) {\n\t\tif (this.DisplayObject_draw(ctx, ignoreCache)) { return; }\n\t\tthis._updateState();\n\t\tthis.Container_draw(ctx, ignoreCache);\n\t};\n\t\n\t/**\n\t * Docced in superclass.\n\t **/\n\tp.getBounds = function() {\n\t\tthis._updateText();\n\t\treturn this.Container_getBounds();\n\t};\n\t\n\t/**\n\t * Returns true or false indicating whether the display object would be visible if drawn to a canvas.\n\t * This does not account for whether it would be visible within the boundaries of the stage.\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method isVisible\n\t * @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas\n\t **/\n\tp.isVisible = function() {\n\t\tvar hasContent = this.cacheCanvas || (this.spriteSheet && this.spriteSheet.complete && this.text);\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX !== 0 && this.scaleY !== 0 && hasContent);\n\t};\n\t\n\tp.clone = function() {\n\t\treturn this._cloneProps(new BitmapText(this.text, this.spriteSheet));\n\t};\n\t\n\t/**\n\t * Disabled in BitmapText.\n\t * @method addChild\n\t **/\n\t/**\n\t * Disabled in BitmapText.\n\t * @method addChildAt\n\t **/\n\t/**\n\t * Disabled in BitmapText.\n\t * @method removeChild\n\t **/\n\t/**\n\t * Disabled in BitmapText.\n\t * @method removeChildAt\n\t **/\n\t/**\n\t * Disabled in BitmapText.\n\t * @method removeAllChildren\n\t **/\n\tp.addChild = p.addChildAt = p.removeChild = p.removeChildAt = p.removeAllChildren = function() {};\n\n\n// private methods:\n\t/**\n\t * Docced in superclass.\n\t **/\n\tp._updateState = function() {\n\t\tthis._updateText();\n\t};\n\n \t/**\n\t * @method _cloneProps\n\t * @param {BitmapText} o\n\t * @return {BitmapText} o\n\t * @protected\n\t **/\n\tp._cloneProps = function(o) {\n\t\tthis.Container__cloneProps(o);\n\t\to.lineHeight = this.lineHeight;\n\t\to.letterSpacing = this.letterSpacing;\n\t\to.spaceWidth = this.spaceWidth;\n\t\treturn o;\n\t};\n\t\n\t/**\n\t * @method _getFrameIndex\n\t * @param {String} character\n\t * @param {SpriteSheet} spriteSheet\n\t * @return {Number}\n\t * @protected\n\t **/\n\tp._getFrameIndex = function(character, spriteSheet) {\n\t\tvar c, o = spriteSheet.getAnimation(character);\n\t\tif (!o) {\n\t\t\t(character != (c = character.toUpperCase())) || (character != (c = character.toLowerCase())) || (c=null);\n\t\t\tif (c) { o = spriteSheet.getAnimation(c); }\n\t\t}\n\t\treturn o && o.frames[0];\n\t};\n\t\n\t/**\n\t * @method _getFrame\n\t * @param {String} character\n\t * @param {SpriteSheet} spriteSheet\n\t * @return {Object}\n\t * @protected\n\t **/\n\tp._getFrame = function(character, spriteSheet) {\n\t\tvar index = this._getFrameIndex(character, spriteSheet);\n\t\treturn index == null ? index : spriteSheet.getFrame(index);\n\t};\n\n\t/**\n\t * @method _getLineHeight\n\t * @param {SpriteSheet} ss\n\t * @return {Number}\n\t * @protected\n\t **/\n\tp._getLineHeight = function(ss) {\n\t\tvar frame = this._getFrame(\"1\",ss) || this._getFrame(\"T\",ss) || this._getFrame(\"L\",ss) || ss.getFrame(0);\n\t\treturn frame ? frame.rect.height : 1;\n\t};\n\n\t/**\n\t * @method _getSpaceWidth\n\t * @param {SpriteSheet} ss\n\t * @return {Number}\n\t * @protected\n\t **/\n\tp._getSpaceWidth = function(ss) {\n\t\tvar frame = this._getFrame(\"1\",ss) || this._getFrame(\"l\",ss) || this._getFrame(\"e\",ss) || this._getFrame(\"a\",ss) || ss.getFrame(0);\n\t\treturn frame ? frame.rect.width : 1;\n\t};\n\n\t/**\n\t * @method _updateText\n\t * @protected\n\t **/\n\tp._updateText = function() {\n\t\tvar x=0, y=0, o=this._oldProps, change=false, spaceW=this.spaceWidth, lineH=this.lineHeight, ss=this.spriteSheet;\n\t\tvar pool=BitmapText._spritePool, kids=this.children, childIndex=0, numKids=kids.length, sprite;\n\t\t\n\t\tfor (var n in o) {\n\t\t\tif (o[n] != this[n]) {\n\t\t\t\to[n] = this[n];\n\t\t\t\tchange = true;\n\t\t\t}\n\t\t}\n\t\tif (!change) { return; }\n\t\t\n\t\tvar hasSpace = !!this._getFrame(\" \", ss);\n\t\tif (!hasSpace && !spaceW) { spaceW = this._getSpaceWidth(ss); }\n\t\tif (!lineH) { lineH = this._getLineHeight(ss); }\n\t\t\n\t\tfor(var i=0, l=this.text.length; i childIndex) {\n\t\t\t // faster than removeChild.\n\t\t\tpool.push(sprite = kids.pop());\n\t\t\tsprite.parent = null;\n\t\t\tnumKids--;\n\t\t}\n\t\tif (pool.length > BitmapText.maxPoolSize) { pool.length = BitmapText.maxPoolSize; }\n\t};\n\n\n\tcreatejs.BitmapText = createjs.promote(BitmapText, \"Container\");\n}());\n\n//##############################################################################\n// MovieClip.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * The MovieClip class associates a TweenJS Timeline with an EaselJS {{#crossLink \"Container\"}}{{/crossLink}}. It allows\n\t * you to create objects which encapsulate timeline animations, state changes, and synched actions. The MovieClip\n\t * class has been included in the EaselJS minified file since 0.7.0.\n\t *\n\t * Currently MovieClip only works properly if it is tick based (as opposed to time based) though some concessions have\n\t * been made to support time-based timelines in the future.\n\t *\n\t *

Example

\n\t * This example animates two shapes back and forth. The grey shape starts on the left, but we jump to a mid-point in\n\t * the animation using {{#crossLink \"MovieClip/gotoAndPlay\"}}{{/crossLink}}.\n\t *\n\t * var stage = new createjs.Stage(\"canvas\");\n\t * createjs.Ticker.addEventListener(\"tick\", stage);\n\t *\n\t * var mc = new createjs.MovieClip({loop:-1, labels:{myLabel:20}});\n\t * stage.addChild(mc);\n\t *\n\t * var child1 = new createjs.Shape(\n\t * new createjs.Graphics().beginFill(\"#999999\")\n\t * .drawCircle(30,30,30));\n\t * var child2 = new createjs.Shape(\n\t * new createjs.Graphics().beginFill(\"#5a9cfb\")\n\t * .drawCircle(30,30,30));\n\t *\n\t * mc.timeline.addTween(\n\t * createjs.Tween.get(child1)\n\t * .to({x:0}).to({x:60}, 50).to({x:0}, 50));\n\t * mc.timeline.addTween(\n\t * createjs.Tween.get(child2)\n\t * .to({x:60}).to({x:0}, 50).to({x:60}, 50));\n\t *\n\t * mc.gotoAndPlay(\"start\");\n\t *\n\t * It is recommended to use tween.to() to animate and set properties (use no duration to have it set\n\t * immediately), and the tween.wait() method to create delays between animations. Note that using the\n\t * tween.set() method to affect properties will likely not provide the desired result.\n\t *\n\t * @class MovieClip\n\t * @main MovieClip\n\t * @param {Object} [props] The configuration properties to apply to this instance (ex. `{mode:MovieClip.SYNCHED}`).\n\t * Supported props for the MovieClip are listed below. These props are set on the corresponding instance properties except where\n\t * specified.

`mode`
`startPosition`
`frameBounds`

\n\t * \n\t * This object will also be passed into the Timeline instance associated with this MovieClip. See the documentation\n\t * for Timeline for a list of supported props (ex. `paused`, `labels`, `loop`, `reversed`, etc.)\n\t * @extends Container\n\t * @constructor\n\t **/\n\tfunction MovieClip(props) {\n\t\tthis.Container_constructor();\n\t\t!MovieClip.inited&&MovieClip.init(); // static init\n\t\t\n\t\tvar mode, startPosition, loop, labels;\n\t\t\n\t\t// handle old params (mode, startPosition, loop, labels):\n\t\t// TODO: deprecated param handling:\n\t\tif (props instanceof String || arguments.length > 1) {\n\t\t\tmode = props;\n\t\t\tstartPosition = arguments[1];\n\t\t\tloop = arguments[2];\n\t\t\tlabels = arguments[3];\n\t\t\tif (loop == null) { loop = -1; }\n\t\t\tprops = null;\n\t\t} else if (props) {\n\t\t\tmode = props.mode;\n\t\t\tstartPosition = props.startPosition;\n\t\t\tloop = props.loop;\n\t\t\tlabels = props.labels;\n\t\t}\n\t\tif (!props) { props = {labels:labels}; }\n\t\t\n\t\t\n\t// public properties:\n\t\t/**\n\t\t * Controls how this MovieClip advances its time. Must be one of 0 (INDEPENDENT), 1 (SINGLE_FRAME), or 2 (SYNCHED).\n\t\t * See each constant for a description of the behaviour.\n\t\t * @property mode\n\t\t * @type String\n\t\t * @default null\n\t\t **/\n\t\tthis.mode = mode||MovieClip.INDEPENDENT;\n\t\n\t\t/**\n\t\t * Specifies what the first frame to play in this movieclip, or the only frame to display if mode is SINGLE_FRAME.\n\t\t * @property startPosition\n\t\t * @type Number\n\t\t * @default 0\n\t\t */\n\t\tthis.startPosition = startPosition||0;\n\t\n\t\t/**\n\t\t * Specifies how many times this MovieClip should loop. A value of -1 indicates it should loop indefinitely. A value of\n\t\t * 1 would cause it to loop once (ie. play a total of twice).\n\t\t * @property loop\n\t\t * @type Number\n\t\t * @default -1\n\t\t */\n\t\tthis.loop = loop === true ? -1 : (loop || 0);\n\t\n\t\t/**\n\t\t * The current frame of the movieclip.\n\t\t * @property currentFrame\n\t\t * @type Number\n\t\t * @default 0\n\t\t * @readonly\n\t\t */\n\t\tthis.currentFrame = 0;\n\t\n\t\t/**\n\t\t * If true, the MovieClip's position will not advance when ticked.\n\t\t * @property paused\n\t\t * @type Boolean\n\t\t * @default false\n\t\t */\n\t\tthis.paused = props.paused||false;\n\t\n\t\t/**\n\t\t * If true, actions in this MovieClip's tweens will be run when the playhead advances.\n\t\t * @property actionsEnabled\n\t\t * @type Boolean\n\t\t * @default true\n\t\t */\n\t\tthis.actionsEnabled = true;\n\t\n\t\t/**\n\t\t * If true, the MovieClip will automatically be reset to its first frame whenever the timeline adds\n\t\t * it back onto the display list. This only applies to MovieClip instances with mode=INDEPENDENT.\n\t\t *

\n\t\t * For example, if you had a character animation with a \"body\" child MovieClip instance\n\t\t * with different costumes on each frame, you could set body.autoReset = false, so that\n\t\t * you can manually change the frame it is on, without worrying that it will be reset\n\t\t * automatically.\n\t\t * @property autoReset\n\t\t * @type Boolean\n\t\t * @default true\n\t\t */\n\t\tthis.autoReset = true;\n\t\t\n\t\t/**\n\t\t * An array of bounds for each frame in the MovieClip. This is mainly intended for tool output.\n\t\t * @property frameBounds\n\t\t * @type Array\n\t\t * @default null\n\t\t */\n\t\tthis.frameBounds = this.frameBounds||props.frameBounds; // frameBounds are set on the prototype in Animate.\n\t\t\n\t\t/**\n\t\t * By default MovieClip instances advance one frame per tick. Specifying a framerate for the MovieClip\n\t\t * will cause it to advance based on elapsed time between ticks as appropriate to maintain the target\n\t\t * framerate.\n\t\t *\n\t\t * For example, if a MovieClip with a framerate of 10 is placed on a Stage being updated at 40fps, then the MovieClip will\n\t\t * advance roughly one frame every 4 ticks. This will not be exact, because the time between each tick will\n\t\t * vary slightly between frames.\n\t\t *\n\t\t * This feature is dependent on the tick event object (or an object with an appropriate \"delta\" property) being\n\t\t * passed into {{#crossLink \"Stage/update\"}}{{/crossLink}}.\n\t\t * @property framerate\n\t\t * @type {Number}\n\t\t * @default null\n\t\t **/\n\t\tthis.framerate = null;\n\t\t\n\t\t// set up the needed props for Timeline:\n\t\tprops.useTicks = props.paused = true;\n\t\t\n\t\t/**\n\t\t * The TweenJS Timeline that is associated with this MovieClip. This is created automatically when the MovieClip\n\t\t * instance is initialized. Animations are created by adding TweenJS Tween\n\t\t * instances to the timeline.\n\t\t *\n\t\t *

Example

\n\t\t *\n\t\t * var tween = createjs.Tween.get(target).to({x:0}).to({x:100}, 30);\n\t\t * var mc = new createjs.MovieClip();\n\t\t * mc.timeline.addTween(tween);\n\t\t *\n\t\t * Elements can be added and removed from the timeline by toggling an \"_off\" property\n\t\t * using the tweenInstance.to() method. Note that using Tween.set is not recommended to\n\t\t * create MovieClip animations. The following example will toggle the target off on frame 0, and then back on for\n\t\t * frame 1. You can use the \"visible\" property to achieve the same effect.\n\t\t *\n\t\t * var tween = createjs.Tween.get(target).to({_off:false})\n\t\t * .wait(1).to({_off:true})\n\t\t * .wait(1).to({_off:false});\n\t\t *\n\t\t * @property timeline\n\t\t * @type Timeline\n\t\t * @default null\n\t\t */\n\t\tthis.timeline = new createjs.Timeline(props);\n\t\t\n\t\t\n\t// private properties:\n\t\t/**\n\t\t * @property _synchOffset\n\t\t * @type Number\n\t\t * @default 0\n\t\t * @private\n\t\t */\n\t\tthis._synchOffset = 0;\n\t\n\t\t/**\n\t\t * @property _rawPosition\n\t\t * @type Number\n\t\t * @default -1\n\t\t * @private\n\t\t */\n\t\tthis._rawPosition = -1; // TODO: evaluate using a ._reset Boolean prop instead of -1.\n\t\t\n\t\t/**\n\t\t * @property _bound_resolveState\n\t\t * @type Function\n\t\t * @private\n\t\t */\n\t\tthis._bound_resolveState = this._resolveState.bind(this);\n\t\n\t\n\t\t/**\n\t\t * The time remaining from the previous tick, only applicable when .framerate is set.\n\t\t * @property _t\n\t\t * @type Number\n\t\t * @private\n\t\t */\n\t\tthis._t = 0;\n\t\n\t\t/**\n\t\t * List of display objects that are actively being managed by the MovieClip.\n\t\t * @property _managed\n\t\t * @type Object\n\t\t * @private\n\t\t */\n\t\tthis._managed = {};\n\t}\n\tvar p = createjs.extend(MovieClip, createjs.Container);\n\n\n// constants:\n\t/**\n\t * The MovieClip will advance independently of its parent, even if its parent is paused.\n\t * This is the default mode.\n\t * @property INDEPENDENT\n\t * @static\n\t * @type String\n\t * @default \"independent\"\n\t * @readonly\n\t **/\n\tMovieClip.INDEPENDENT = \"independent\";\n\n\t/**\n\t * The MovieClip will only display a single frame (as determined by the startPosition property).\n\t * @property SINGLE_FRAME\n\t * @static\n\t * @type String\n\t * @default \"single\"\n\t * @readonly\n\t **/\n\tMovieClip.SINGLE_FRAME = \"single\";\n\n\t/**\n\t * The MovieClip will be advanced only when its parent advances and will be synched to the position of\n\t * the parent MovieClip.\n\t * @property SYNCHED\n\t * @static\n\t * @type String\n\t * @default \"synched\"\n\t * @readonly\n\t **/\n\tMovieClip.SYNCHED = \"synched\";\n\t\n\t\n// static properties:\n\tMovieClip.inited = false;\n\t\n\t\n// static methods:\n\tMovieClip.init = function() {\n\t\tif (MovieClip.inited) { return; }\n\t\t// plugins introduce some overhead to Tween, so we only install this if an MC is instantiated.\n\t\tMovieClipPlugin.install();\n\t\tMovieClip.inited = true;\n\t};\n\t\n\t\n// getter / setters:\n\t/**\n\t * Use the {{#crossLink \"MovieClip/labels:property\"}}{{/crossLink}} property instead.\n\t * @method _getLabels\n\t * @protected\n\t * @return {Array}\n\t **/\n\tp._getLabels = function() {\n\t\treturn this.timeline.getLabels();\n\t};\n\t// MovieClip.getLabels is @deprecated. Remove for 1.1+\n\tp.getLabels = createjs.deprecate(p._getLabels, \"MovieClip.getLabels\");\n\n\t/**\n\t * Use the {{#crossLink \"MovieClip/currentLabel:property\"}}{{/crossLink}} property instead.\n\t * @method _getCurrentLabel\n\t * @protected\n\t * @return {String}\n\t **/\n\tp._getCurrentLabel = function() {\n\t\treturn this.timeline.currentLabel;\n\t};\n\t// MovieClip.getCurrentLabel is @deprecated. Remove for 1.1+\n\tp.getCurrentLabel = createjs.deprecate(p._getCurrentLabel, \"MovieClip.getCurrentLabel\");\n\n\t/**\n\t * Use the {{#crossLink \"MovieClip/duration:property\"}}{{/crossLink}} property instead.\n\t * @method _getDuration\n\t * @protected\n\t * @return {Number}\n\t **/\n\tp._getDuration = function() {\n\t\treturn this.timeline.duration;\n\t};\n\t// MovieClip.getDuration is @deprecated. Remove for 1.1+\n\tp.getDuration = createjs.deprecate(p._getDuration, \"MovieClip.getDuration\");\n\n\t/**\n\t * Returns an array of objects with label and position (aka frame) properties, sorted by position.\n\t * @property labels\n\t * @type {Array}\n\t * @readonly\n\t **/\n\t\n\t/**\n\t * Returns the name of the label on or immediately before the current frame.\n\t * @property currentLabel\n\t * @type {String}\n\t * @readonly\n\t **/\n\t\n\t/**\n\t * Returns the duration of this MovieClip in seconds or ticks.\n\t * @property totalFrames\n\t * @type {Number}\n\t * @readonly\n\t **/\n\t\n\t/**\n\t * Returns the duration of this MovieClip in seconds or ticks.\n\t * @property duration\n\t * @type {Number}\n\t * @readonly\n\t **/\n\ttry {\n\t\tObject.defineProperties(p, {\n\t\t\tlabels: { get: p._getLabels },\n\t\t\tcurrentLabel: { get: p._getCurrentLabel },\n\t\t\ttotalFrames: { get: p._getDuration },\n\t\t\tduration: { get: p._getDuration }\n\t\t\t// TODO: can we just proxy .currentFrame to tl.position as well? Ditto for .loop (or just remove entirely).\n\t\t});\n\t} catch (e) {}\n\n\n// public methods:\n\t/**\n\t * Constructor alias for backwards compatibility. This method will be removed in future versions.\n\t * Subclasses should be updated to use {{#crossLink \"Utility Methods/extends\"}}{{/crossLink}}.\n\t * @method initialize\n\t * @deprecated in favour of `createjs.promote()`\n\t **/\n\tp.initialize = MovieClip; // TODO: Deprecated. This is for backwards support of Adobe Flash/Animate\n\n\t/**\n\t * Returns true or false indicating whether the display object would be visible if drawn to a canvas.\n\t * This does not account for whether it would be visible within the boundaries of the stage.\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method isVisible\n\t * @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas\n\t **/\n\tp.isVisible = function() {\n\t\t// children are placed in draw, so we can't determine if we have content.\n\t\treturn !!(this.visible && this.alpha > 0 && this.scaleX != 0 && this.scaleY != 0);\n\t};\n\n\t/**\n\t * Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform.\n\t * Returns true if the draw was handled (useful for overriding functionality).\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method draw\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.\n\t * @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache.\n\t * For example, used for drawing the cache (to prevent it from simply drawing an existing cache back\n\t * into itself).\n\t **/\n\tp.draw = function(ctx, ignoreCache) {\n\t\t// draw to cache first:\n\t\tif (this.DisplayObject_draw(ctx, ignoreCache)) { return true; }\n\t\tthis._updateState();\n\t\tthis.Container_draw(ctx, ignoreCache);\n\t\treturn true;\n\t};\n\n\t/**\n\t * Sets paused to false.\n\t * @method play\n\t **/\n\tp.play = function() {\n\t\tthis.paused = false;\n\t};\n\t\n\t/**\n\t * Sets paused to true.\n\t * @method stop\n\t **/\n\tp.stop = function() {\n\t\tthis.paused = true;\n\t};\n\t\n\t/**\n\t * Advances this movie clip to the specified position or label and sets paused to false.\n\t * @method gotoAndPlay\n\t * @param {String|Number} positionOrLabel The animation name or frame number to go to.\n\t **/\n\tp.gotoAndPlay = function(positionOrLabel) {\n\t\tthis.paused = false;\n\t\tthis._goto(positionOrLabel);\n\t};\n\t\n\t/**\n\t * Advances this movie clip to the specified position or label and sets paused to true.\n\t * @method gotoAndStop\n\t * @param {String|Number} positionOrLabel The animation or frame name to go to.\n\t **/\n\tp.gotoAndStop = function(positionOrLabel) {\n\t\tthis.paused = true;\n\t\tthis._goto(positionOrLabel);\n\t};\n\t\n\t/**\n\t * Advances the playhead. This occurs automatically each tick by default.\n\t * @param [time] {Number} The amount of time in ms to advance by. Only applicable if framerate is set.\n\t * @method advance\n\t*/\n\tp.advance = function(time) {\n\t\tvar independent = MovieClip.INDEPENDENT;\n\t\tif (this.mode !== independent) { return; } // update happens in draw for synched clips\n\t\t\n\t\t// if this MC doesn't have a framerate, hunt ancestors for one:\n\t\tvar o=this, fps = o.framerate;\n\t\twhile ((o = o.parent) && fps === null) { if (o.mode === independent) { fps = o._framerate; } }\n\t\tthis._framerate = fps;\n\t\t\n\t\tif (this.paused) { return; }\n\t\t\n\t\t// calculate how many frames to advance:\n\t\tvar t = (fps !== null && fps !== -1 && time !== null) ? time/(1000/fps) + this._t : 1;\n\t\tvar frames = t|0;\n\t\tthis._t = t-frames; // leftover time, save to add to next advance.\n\t\t\n\t\twhile (frames--) { this._updateTimeline(this._rawPosition+1, false); }\n\t};\n\t\n\t/**\n\t * MovieClip instances cannot be cloned.\n\t * @method clone\n\t **/\n\tp.clone = function() {\n\t\t// TODO: add support for this? Need to clone the Timeline & retarget tweens - pretty complex.\n\t\tthrow(\"MovieClip cannot be cloned.\");\n\t};\n\t\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t **/\n\tp.toString = function() {\n\t\treturn \"[MovieClip (name=\"+ this.name +\")]\";\n\t};\n\n\n// private methods:\n\t/**\n\t * Docced in superclass.\n\t **/\n\tp._updateState = function() {\n\t\tif (this._rawPosition === -1 || this.mode !== MovieClip.INDEPENDENT) { this._updateTimeline(-1); }\n\t};\n\n\t/**\n\t * @method _tick\n\t * @param {Object} evtObj An event object that will be dispatched to all tick listeners. This object is reused between dispatchers to reduce construction & GC costs.\n\t * function.\n\t * @protected\n\t **/\n\tp._tick = function(evtObj) {\n\t\tthis.advance(evtObj&&evtObj.delta);\n\t\tthis.Container__tick(evtObj);\n\t};\n\t\n\t/**\n\t * @method _goto\n\t * @param {String|Number} positionOrLabel The animation name or frame number to go to.\n\t * @protected\n\t **/\n\tp._goto = function(positionOrLabel) {\n\t\tvar pos = this.timeline.resolve(positionOrLabel);\n\t\tif (pos == null) { return; }\n\t\tthis._t = 0;\n\t\tthis._updateTimeline(pos, true);\n\t};\n\t\n\t/**\n\t * @method _reset\n\t * @private\n\t **/\n\tp._reset = function() {\n\t\tthis._rawPosition = -1;\n\t\tthis._t = this.currentFrame = 0;\n\t\tthis.paused = false;\n\t};\n\t\n\t/**\n\t * @method _updateTimeline\n\t * @param {Boolean} jump Indicates whether this update is due to jumping (via gotoAndXX) to a new position.\n\t * @protected\n\t **/\n\tp._updateTimeline = function(rawPosition, jump) {\n\t\tvar synced = this.mode !== MovieClip.INDEPENDENT, tl = this.timeline;\n\t\tif (synced) { rawPosition = this.startPosition + (this.mode===MovieClip.SINGLE_FRAME?0:this._synchOffset); }\n\t\tif (rawPosition < 0) { rawPosition = 0; }\n\t\tif (this._rawPosition === rawPosition && !synced) { return; }\n\t\tthis._rawPosition = rawPosition;\n\t\t\n\t\t// update timeline position, ignoring actions if this is a graphic.\n\t\ttl.loop = this.loop; // TODO: should we maintain this on MovieClip, or just have it on timeline?\n\t\ttl.setPosition(rawPosition, synced || !this.actionsEnabled, jump, this._bound_resolveState);\n\t};\n\t\n\t/**\n\t * Renders position 0 without running actions or updating _rawPosition.\n\t * Primarily used by Animate CC to build out the first frame in the constructor of MC symbols.\n\t * NOTE: not tested when run after the MC advances past the first frame.\n\t * @method _renderFirstFrame\n\t * @protected\n\t **/\n\tp._renderFirstFrame = function() {\n\t\tvar tl = this.timeline, pos = tl.rawPosition;\n\t\ttl.setPosition(0, true, true, this._bound_resolveState);\n\t\ttl.rawPosition = pos;\n\t};\n\t\n\t/**\n\t * Runs via a callback after timeline property updates and before actions.\n\t * @method _resolveState\n\t * @protected\n\t **/\n\tp._resolveState = function() {\n\t\tvar tl = this.timeline;\n\t\tthis.currentFrame = tl.position;\n\t\t\n\t\tfor (var n in this._managed) { this._managed[n] = 1; }\n\n\t\tvar tweens = tl.tweens;\n\t\tfor (var i=0, l=tweens.length; i=0; i--) {\n\t\t\tvar id = kids[i].id;\n\t\t\tif (this._managed[id] === 1) {\n\t\t\t\tthis.removeChildAt(i);\n\t\t\t\tdelete(this._managed[id]);\n\t\t\t}\n\t\t}\n\t};\n\n\t/**\n\t * @method _setState\n\t * @param {Array} state\n\t * @param {Number} offset\n\t * @protected\n\t **/\n\tp._setState = function(state, offset) {\n\t\tif (!state) { return; }\n\t\tfor (var i=state.length-1;i>=0;i--) {\n\t\t\tvar o = state[i];\n\t\t\tvar target = o.t;\n\t\t\tvar props = o.p;\n\t\t\tfor (var n in props) { target[n] = props[n]; }\n\t\t\tthis._addManagedChild(target, offset);\n\t\t}\n\t};\n\n\t/**\n\t * Adds a child to the timeline, and sets it up as a managed child.\n\t * @method _addManagedChild\n\t * @param {MovieClip} child The child MovieClip to manage\n\t * @param {Number} offset\n\t * @private\n\t **/\n\tp._addManagedChild = function(child, offset) {\n\t\tif (child._off) { return; }\n\t\tthis.addChildAt(child,0);\n\n\t\tif (child instanceof MovieClip) {\n\t\t\tchild._synchOffset = offset;\n\t\t\t// TODO: this does not precisely match Adobe Flash/Animate, which loses track of the clip if it is renamed or removed from the timeline, which causes it to reset.\n\t\t\t// TODO: should also reset when MovieClip loops, though that will be a bit tricky to detect.\n\t\t\tif (child.mode === MovieClip.INDEPENDENT && child.autoReset && (!this._managed[child.id])) { child._reset(); }\n\t\t}\n\t\tthis._managed[child.id] = 2;\n\t};\n\t\n\t/**\n\t * @method _getBounds\n\t * @param {Matrix2D} matrix\n\t * @param {Boolean} ignoreTransform\n\t * @return {Rectangle}\n\t * @protected\n\t **/\n\tp._getBounds = function(matrix, ignoreTransform) {\n\t\tvar bounds = this.DisplayObject_getBounds();\n\t\tif (!bounds) {\n\t\t\tif (this.frameBounds) { bounds = this._rectangle.copy(this.frameBounds[this.currentFrame]); }\n\t\t}\n\t\tif (bounds) { return this._transformBounds(bounds, matrix, ignoreTransform); }\n\t\treturn this.Container__getBounds(matrix, ignoreTransform);\n\t};\n\n\n\tcreatejs.MovieClip = createjs.promote(MovieClip, \"Container\");\n\n\n\n// MovieClipPlugin for TweenJS:\n\t/**\n\t * This plugin works with TweenJS to prevent the startPosition\n\t * property from tweening.\n\t * @private\n\t * @class MovieClipPlugin\n\t * @constructor\n\t **/\n\tfunction MovieClipPlugin() {\n\t\tthrow(\"MovieClipPlugin cannot be instantiated.\")\n\t}\n\t\n\t/**\n\t * @property priority\n\t * @type {Number}\n\t * @static\n\t * @readonly\n\t **/\n\tMovieClipPlugin.priority = 100; // very high priority, should run first\n\t\n\t/**\n\t * @property ID\n\t * @type {String}\n\t * @static\n\t * @readonly\n\t **/\n\tMovieClipPlugin.ID = \"MovieClip\";\n\n\t/**\n\t * @method install\n\t * @static\n\t **/\n\tMovieClipPlugin.install = function() {\n\t\tcreatejs.Tween._installPlugin(MovieClipPlugin);\n\t};\n\t\n\t/**\n\t * @method init\n\t * @param {Tween} tween\n\t * @param {String} prop\n\t * @param {*} value\n\t * @static\n\t **/\n\tMovieClipPlugin.init = function(tween, prop, value) {\n\t\tif (prop === \"startPosition\" && tween.target instanceof MovieClip) { tween._addPlugin(MovieClipPlugin); }\n\t};\n\t\n\t/**\n\t * @method step\n\t * @param {Tween} tween\n\t * @param {TweenStep} step\n\t * @param {Object} props\n\t * @static\n\t **/\n\tMovieClipPlugin.step = function(tween, step, props) {};\n\n\t/**\n\t * @method change\n\t * @param {Tween} tween\n\t * @param {TweenStep} step\n\t * @param {*} value\n\t * @param {Number} ratio\n\t * @param {Object} end\n\t * @return {*}\n\t * @static\n\t */\n\tMovieClipPlugin.change = function(tween, step, prop, value, ratio, end) {\n\t\tif (prop === \"startPosition\") { return (ratio === 1 ? step.props[prop] : step.prev.props[prop]); }\n\t};\n\n}());\n\n//##############################################################################\n// SpriteSheetUtils.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\t\n\t\n// constructor:\n\t/**\n\t * The SpriteSheetUtils class is a collection of static methods for working with {{#crossLink \"SpriteSheet\"}}{{/crossLink}}s.\n\t * A sprite sheet is a series of images (usually animation frames) combined into a single image on a regular grid. For\n\t * example, an animation consisting of 8 100x100 images could be combined into a 400x200 sprite sheet (4 frames across\n\t * by 2 high). The SpriteSheetUtils class uses a static interface and should not be instantiated.\n\t * @class SpriteSheetUtils\n\t * @static\n\t **/\n\tfunction SpriteSheetUtils() {\n\t\tthrow \"SpriteSheetUtils cannot be instantiated\";\n\t}\n\n\n// private static properties:\n\t/**\n\t * @property _workingCanvas\n\t * @static\n\t * @type HTMLCanvasElement | Object\n\t * @protected\n\t*/\n\t/**\n\t * @property _workingContext\n\t * @static\n\t * @type CanvasRenderingContext2D\n\t * @protected\n\t*/\n\tvar canvas = (createjs.createCanvas?createjs.createCanvas():document.createElement(\"canvas\"));\n\tif (canvas.getContext) {\n\t\tSpriteSheetUtils._workingCanvas = canvas;\n\t\tSpriteSheetUtils._workingContext = canvas.getContext(\"2d\");\n\t\tcanvas.width = canvas.height = 1;\n\t}\n\n\n// public static methods:\n\t/**\n\t * Returns a single frame of the specified sprite sheet as a new PNG image. An example of when this may be useful is\n\t * to use a spritesheet frame as the source for a bitmap fill.\n\t *\n\t * WARNING: In almost all cases it is better to display a single frame using a {{#crossLink \"Sprite\"}}{{/crossLink}}\n\t * with a {{#crossLink \"Sprite/gotoAndStop\"}}{{/crossLink}} call than it is to slice out a frame using this\n\t * method and display it with a Bitmap instance. You can also crop an image using the {{#crossLink \"Bitmap/sourceRect\"}}{{/crossLink}}\n\t * property of {{#crossLink \"Bitmap\"}}{{/crossLink}}.\n\t *\n\t * The extractFrame method may cause cross-domain warnings since it accesses pixels directly on the canvas.\n\t * @method extractFrame\n\t * @static\n\t * @param {SpriteSheet} spriteSheet The SpriteSheet instance to extract a frame from.\n\t * @param {Number|String} frameOrAnimation The frame number or animation name to extract. If an animation\n\t * name is specified, only the first frame of the animation will be extracted.\n\t * @return {HTMLImageElement} a single frame of the specified sprite sheet as a new PNG image.\n\t*/\n\tSpriteSheetUtils.extractFrame = function(spriteSheet, frameOrAnimation) {\n\t\tif (isNaN(frameOrAnimation)) {\n\t\t\tframeOrAnimation = spriteSheet.getAnimation(frameOrAnimation).frames[0];\n\t\t}\n\t\tvar data = spriteSheet.getFrame(frameOrAnimation);\n\t\tif (!data) { return null; }\n\t\tvar r = data.rect;\n\t\tvar canvas = SpriteSheetUtils._workingCanvas;\n\t\tcanvas.width = r.width;\n\t\tcanvas.height = r.height;\n\t\tSpriteSheetUtils._workingContext.drawImage(data.image, r.x, r.y, r.width, r.height, 0, 0, r.width, r.height);\n\t\tvar img = document.createElement(\"img\");\n\t\timg.src = canvas.toDataURL(\"image/png\");\n\t\treturn img;\n\t};\n\n\t// SpriteSheetUtils.addFlippedFrames is @deprecated. Remove for 1.1+\n\tSpriteSheetUtils.addFlippedFrames = createjs.deprecate(null, \"SpriteSheetUtils.addFlippedFrames\");\n\n\t// SpriteSheetUtils.addFlippedFrames is @deprecated. Remove for 1.1+\n\tSpriteSheetUtils.mergeAlpha = createjs.deprecate(null, \"SpriteSheetUtils.mergeAlpha\");\n\n\t\n// private static methods:\n\tSpriteSheetUtils._flip = function(spriteSheet, count, h, v) {\n\t\tvar imgs = spriteSheet._images;\n\t\tvar canvas = SpriteSheetUtils._workingCanvas;\n\t\tvar ctx = SpriteSheetUtils._workingContext;\n\t\tvar il = imgs.length/count;\n\t\tfor (var i=0;i this.maxHeight) { throw SpriteSheetBuilder.ERR_DIMENSIONS; }\n\t\tvar y=0, x=0;\n\t\tvar img = 0;\n\t\twhile (frames.length) {\n\t\t\tvar o = this._fillRow(frames, y, img, dataFrames, pad);\n\t\t\tif (o.w > x) { x = o.w; }\n\t\t\ty += o.h;\n\t\t\tif (!o.h || !frames.length) {\n\t\t\t\tvar canvas = createjs.createCanvas?createjs.createCanvas():document.createElement(\"canvas\");\n\t\t\t\tcanvas.width = this._getSize(x,this.maxWidth);\n\t\t\t\tcanvas.height = this._getSize(y,this.maxHeight);\n\t\t\t\tthis._data.images[img] = canvas;\n\t\t\t\tif (!o.h) {\n\t\t\t\t\tx=y=0;\n\t\t\t\t\timg++;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\t\n\t/**\n\t * @method _setupMovieClipFrame\n\t * @protected\n\t * @return {Number} The width & height of the row.\n\t **/\n\tp._setupMovieClipFrame = function(source, data) {\n\t\tvar ae = source.actionsEnabled;\n\t\tsource.actionsEnabled = false;\n\t\tsource.gotoAndStop(data.i);\n\t\tsource.actionsEnabled = ae;\n\t\tdata.f&&data.f(source, data.d, data.i);\n\t};\n\n\t/**\n\t * @method _getSize\n\t * @protected\n\t * @return {Number} The width & height of the row.\n\t **/\n\tp._getSize = function(size,max) {\n\t\tvar pow = 4;\n\t\twhile (Math.pow(2,++pow) < size){}\n\t\treturn Math.min(max,Math.pow(2,pow));\n\t};\n\n\t/**\n\t * @method _fillRow\n\t * @param {Array} frames\n\t * @param {Number} y\n\t * @param {HTMLImageElement} img\n\t * @param {Object} dataFrames\n\t * @param {Number} pad\n\t * @protected\n\t * @return {Number} The width & height of the row.\n\t **/\n\tp._fillRow = function(frames, y, img, dataFrames, pad) {\n\t\tvar w = this.maxWidth;\n\t\tvar maxH = this.maxHeight;\n\t\ty += pad;\n\t\tvar h = maxH-y;\n\t\tvar x = pad;\n\t\tvar height = 0;\n\t\tfor (var i=frames.length-1; i>=0; i--) {\n\t\t\tvar frame = frames[i];\n\t\t\tvar sc = this._scale*frame.scale;\n\t\t\tvar rect = frame.sourceRect;\n\t\t\tvar source = frame.source;\n\t\t\tvar rx = Math.floor(sc*rect.x-pad);\n\t\t\tvar ry = Math.floor(sc*rect.y-pad);\n\t\t\tvar rh = Math.ceil(sc*rect.height+pad*2);\n\t\t\tvar rw = Math.ceil(sc*rect.width+pad*2);\n\t\t\tif (rw > w) { throw SpriteSheetBuilder.ERR_DIMENSIONS; }\n\t\t\tif (rh > h || x+rw > w) { continue; }\n\t\t\tframe.img = img;\n\t\t\tframe.rect = new createjs.Rectangle(x,y,rw,rh);\n\t\t\theight = height || rh;\n\t\t\tframes.splice(i,1);\n\t\t\tdataFrames[frame.index] = [x,y,rw,rh,img,Math.round(-rx+sc*source.regX-pad),Math.round(-ry+sc*source.regY-pad)];\n\t\t\tx += rw;\n\t\t}\n\t\treturn {w:x, h:height};\n\t};\n\n\t/**\n\t * @method _endBuild\n\t * @protected\n\t **/\n\tp._endBuild = function() {\n\t\tthis.spriteSheet = new createjs.SpriteSheet(this._data);\n\t\tthis._data = null;\n\t\tthis.progress = 1;\n\t\tthis.dispatchEvent(\"complete\");\n\t};\n\n\t/**\n\t * @method _run\n\t * @protected\n\t **/\n\tp._run = function() {\n\t\tvar ts = Math.max(0.01, Math.min(0.99, this.timeSlice||0.3))*50;\n\t\tvar t = (new Date()).getTime()+ts;\n\t\tvar complete = false;\n\t\twhile (t > (new Date()).getTime()) {\n\t\t\tif (!this._drawNext()) { complete = true; break; }\n\t\t}\n\t\tif (complete) {\n\t\t\tthis._endBuild();\n\t\t} else {\n\t\t\tvar _this = this;\n\t\t\tthis._timerID = setTimeout(function() { _this._run(); }, 50-ts);\n\t\t}\n\t\tvar p = this.progress = this._index/this._frames.length;\n\t\tif (this.hasEventListener(\"progress\")) {\n\t\t\tvar evt = new createjs.Event(\"progress\");\n\t\t\tevt.progress = p;\n\t\t\tthis.dispatchEvent(evt);\n\t\t}\n\t};\n\n\t/**\n\t * @method _drawNext\n\t * @protected\n\t * @return Boolean Returns false if this is the last draw.\n\t **/\n\tp._drawNext = function() {\n\t\tvar frame = this._frames[this._index];\n\t\tvar sc = frame.scale*this._scale;\n\t\tvar rect = frame.rect;\n\t\tvar sourceRect = frame.sourceRect;\n\t\tvar canvas = this._data.images[frame.img];\n\t\tvar ctx = canvas.getContext(\"2d\");\n\t\tframe.funct&&frame.funct(frame.source, frame.data);\n\t\tctx.save();\n\t\tctx.beginPath();\n\t\tctx.rect(rect.x, rect.y, rect.width, rect.height);\n\t\tctx.clip();\n\t\tctx.translate(Math.ceil(rect.x-sourceRect.x*sc), Math.ceil(rect.y-sourceRect.y*sc));\n\t\tctx.scale(sc,sc);\n\t\tframe.source.draw(ctx); // display object will draw itself.\n\t\tctx.restore();\n\t\treturn (++this._index) < this._frames.length;\n\t};\n\n\n\tcreatejs.SpriteSheetBuilder = createjs.promote(SpriteSheetBuilder, \"EventDispatcher\");\n}());\n\n//##############################################################################\n// DOMElement.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * This class is still experimental, and more advanced use is likely to be buggy. Please report bugs.\n\t *\n\t * A DOMElement allows you to associate a HTMLElement with the display list. It will be transformed\n\t * within the DOM as though it is child of the {{#crossLink \"Container\"}}{{/crossLink}} it is added to. However, it is\n\t * not rendered to canvas, and as such will retain whatever z-index it has relative to the canvas (ie. it will be\n\t * drawn in front of or behind the canvas).\n\t *\n\t * The position of a DOMElement is relative to their parent node in the DOM. It is recommended that\n\t * the DOM Object be added to a div that also contains the canvas so that they share the same position\n\t * on the page.\n\t *\n\t * DOMElement is useful for positioning HTML elements over top of canvas content, and for elements\n\t * that you want to display outside the bounds of the canvas. For example, a tooltip with rich HTML\n\t * content.\n\t *\n\t *

Mouse Interaction

\n\t *\n\t * DOMElement instances are not full EaselJS display objects, and do not participate in EaselJS mouse\n\t * events or support methods like hitTest. To get mouse events from a DOMElement, you must instead add handlers to\n\t * the htmlElement (note, this does not support EventDispatcher)\n\t *\n\t * var domElement = new createjs.DOMElement(htmlElement);\n\t * domElement.htmlElement.onclick = function() {\n\t * console.log(\"clicked\");\n\t * }\n\t *\n\t * Important: This class needs to be notified it is about to be drawn, this will happen automatically\n\t * if you call stage.update, calling stage.draw or disabling tickEnabled will miss important steps and it will render\n\t * stale information.\n\t *\n\t * @class DOMElement\n\t * @extends DisplayObject\n\t * @constructor\n\t * @param {HTMLElement} htmlElement A reference or id for the DOM element to manage.\n\t */\n\tfunction DOMElement(htmlElement) {\n\t\tthis.DisplayObject_constructor();\n\t\t\n\t\tif (typeof(htmlElement)==\"string\") { htmlElement = document.getElementById(htmlElement); }\n\t\tthis.mouseEnabled = false;\n\t\t\n\t\tvar style = htmlElement.style;\n\t\tstyle.position = \"absolute\";\n\t\tstyle.transformOrigin = style.WebkitTransformOrigin = style.msTransformOrigin = style.MozTransformOrigin = style.OTransformOrigin = \"0% 0%\";\n\t\t\n\t\t\n\t// public properties:\n\t\t/**\n\t\t * The DOM object to manage.\n\t\t * @property htmlElement\n\t\t * @type HTMLElement\n\t\t */\n\t\tthis.htmlElement = htmlElement;\n\t\n\t\n\t// private properties:\n\t\t/**\n\t\t * @property _oldMtx\n\t\t * @type Matrix2D\n\t\t * @protected\n\t\t */\n\t\tthis._oldProps = null;\n\n\t\t/**\n\t\t * Used to track the object which this class attached listeners to, helps optimize listener attachment.\n\t\t * @property _oldStage\n\t\t * @type Stage\n\t\t * @protected\n\t\t */\n\t\tthis._oldStage = null;\n\t\t/**\n\t\t * The event listener proxy triggered drawing draw for special circumstances.\n\t\t * @property _drawAction\n\t\t * @type function\n\t\t * @protected\n\t\t */\n\t\tthis._drawAction = null;\n\t}\n\tvar p = createjs.extend(DOMElement, createjs.DisplayObject);\n\n\t// TODO: deprecated\n\t// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.\n\n\n// public methods:\n\t/**\n\t * Returns true or false indicating whether the display object would be visible if drawn to a canvas.\n\t * This does not account for whether it would be visible within the boundaries of the stage.\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method isVisible\n\t * @return {Boolean} Boolean indicating whether the display object would be visible if drawn to a canvas\n\t */\n\tp.isVisible = function() {\n\t\treturn this.htmlElement != null;\n\t};\n\n\t/**\n\t * Draws the display object into the specified context ignoring its visible, alpha, shadow, and transform.\n\t * Returns true if the draw was handled (useful for overriding functionality).\n\t * NOTE: This method is mainly for internal use, though it may be useful for advanced uses.\n\t * @method draw\n\t * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into.\n\t * @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache.\n\t * For example, used for drawing the cache (to prevent it from simply drawing an existing cache back\n\t * into itself).\n\t * @return {Boolean}\n\t */\n\tp.draw = function(ctx, ignoreCache) {\n\t\t// this relies on the _tick method because draw isn't called if the parent is not visible.\n\t\t// the actual update happens in _handleDrawEnd\n\t\treturn true;\n\t};\n\n\t/**\n\t * Not applicable to DOMElement.\n\t * @method cache\n\t */\n\tp.cache = function() {};\n\n\t/**\n\t * Not applicable to DOMElement.\n\t * @method uncache\n\t */\n\tp.uncache = function() {};\n\n\t/**\n\t * Not applicable to DOMElement.\n\t * @method updateCache\n\t */\n\tp.updateCache = function() {};\n\n\t/**\n\t * Not applicable to DOMElement.\n\t * @method hitTest\n\t */\n\tp.hitTest = function() {};\n\n\t/**\n\t * Not applicable to DOMElement.\n\t * @method localToGlobal\n\t */\n\tp.localToGlobal = function() {};\n\n\t/**\n\t * Not applicable to DOMElement.\n\t * @method globalToLocal\n\t */\n\tp.globalToLocal = function() {};\n\n\t/**\n\t * Not applicable to DOMElement.\n\t * @method localToLocal\n\t */\n\tp.localToLocal = function() {};\n\n\t/**\n\t * DOMElement cannot be cloned. Throws an error.\n\t * @method clone\n\t */\n\tp.clone = function() {\n\t\tthrow(\"DOMElement cannot be cloned.\")\n\t};\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t */\n\tp.toString = function() {\n\t\treturn \"[DOMElement (name=\"+ this.name +\")]\";\n\t};\n\n\t/**\n * Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances\n\t * are not full EaselJS display objects and do not participate in EaselJS mouse events.\n\t * @event click\n\t */\n\n /**\n * Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances\n \t * are not full EaselJS display objects and do not participate in EaselJS mouse events.\n\t * @event dblClick\n\t */\n\n /**\n * Interaction events should be added to `htmlElement`, and not the DOMElement instance, since DOMElement instances\n \t * are not full EaselJS display objects and do not participate in EaselJS mouse events.\n\t * @event mousedown\n\t */\n\n /**\n * The HTMLElement can listen for the mouseover event, not the DOMElement instance.\n * Since DOMElement instances are not full EaselJS display objects and do not participate in EaselJS mouse events.\n * @event mouseover\n\t */\n\n /**\n * Not applicable to DOMElement.\n\t * @event tick\n\t */\n\n\n// private methods:\n\t/**\n\t * @method _tick\n\t * @param {Object} evtObj An event object that will be dispatched to all tick listeners. This object is reused between dispatchers to reduce construction & GC costs.\n\t * function.\n\t * @protected\n\t */\n\tp._tick = function(evtObj) {\n\t\tvar stage = this.stage;\n\t\tif(stage && stage !== this._oldStage) {\n\t\t\tthis._drawAction && stage.off(\"drawend\", this._drawAction);\n\t\t\tthis._drawAction = stage.on(\"drawend\", this._handleDrawEnd, this);\n\t\t\tthis._oldStage = stage;\n\t\t}\n\t\tthis.DisplayObject__tick(evtObj);\n\t};\n\t\n\t/**\n\t * @method _handleDrawEnd\n\t * @param {Event} evt\n\t * @protected\n\t */\n\tp._handleDrawEnd = function(evt) {\n\t\tvar o = this.htmlElement;\n\t\tif (!o) { return; }\n\t\tvar style = o.style;\n\t\t\n\t\tvar props = this.getConcatenatedDisplayProps(this._props), mtx = props.matrix;\n\t\t\n\t\tvar visibility = props.visible ? \"visible\" : \"hidden\";\n\t\tif (visibility != style.visibility) { style.visibility = visibility; }\n\t\tif (!props.visible) { return; }\n\t\t\n\t\tvar oldProps = this._oldProps, oldMtx = oldProps&&oldProps.matrix;\n\t\tvar n = 10000; // precision\n\t\t\n\t\tif (!oldMtx || !oldMtx.equals(mtx)) {\n\t\t\tvar str = \"matrix(\" + (mtx.a*n|0)/n +\",\"+ (mtx.b*n|0)/n +\",\"+ (mtx.c*n|0)/n +\",\"+ (mtx.d*n|0)/n +\",\"+ (mtx.tx+0.5|0);\n\t\t\tstyle.transform = style.WebkitTransform = style.OTransform = style.msTransform = str +\",\"+ (mtx.ty+0.5|0) +\")\";\n\t\t\tstyle.MozTransform = str +\"px,\"+ (mtx.ty+0.5|0) +\"px)\";\n\t\t\tif (!oldProps) { oldProps = this._oldProps = new createjs.DisplayProps(true, null); }\n\t\t\toldProps.matrix.copy(mtx);\n\t\t}\n\t\t\n\t\tif (oldProps.alpha != props.alpha) {\n\t\t\tstyle.opacity = \"\"+(props.alpha*n|0)/n;\n\t\t\toldProps.alpha = props.alpha;\n\t\t}\n\t};\n\n\n\tcreatejs.DOMElement = createjs.promote(DOMElement, \"DisplayObject\");\n}());\n\n//##############################################################################\n// Filter.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * Base class that all filters should inherit from. Filters need to be applied to objects that have been cached using\n\t * the {{#crossLink \"DisplayObject/cache\"}}{{/crossLink}} method. If an object changes, please cache it again, or use\n\t * {{#crossLink \"DisplayObject/updateCache\"}}{{/crossLink}}. Note that the filters must be applied before caching.\n\t *\n\t *

Example

\n\t *\n\t * myInstance.filters = [\n\t * new createjs.ColorFilter(0, 0, 0, 1, 255, 0, 0),\n\t * new createjs.BlurFilter(5, 5, 10)\n\t * ];\n\t * myInstance.cache(0,0, 100, 100);\n\t *\n\t * Note that each filter can implement a {{#crossLink \"Filter/getBounds\"}}{{/crossLink}} method, which returns the\n\t * margins that need to be applied in order to fully display the filter. For example, the {{#crossLink \"BlurFilter\"}}{{/crossLink}}\n\t * will cause an object to feather outwards, resulting in a margin around the shape.\n\t *\n\t *

EaselJS Filters

\n\t * EaselJS comes with a number of pre-built filters:\n\t *

{{#crossLink \"AlphaMapFilter\"}}{{/crossLink}} : Map a greyscale image to the alpha channel of a display object
{{#crossLink \"AlphaMaskFilter\"}}{{/crossLink}}: Map an image's alpha channel to the alpha channel of a display object
{{#crossLink \"BlurFilter\"}}{{/crossLink}}: Apply vertical and horizontal blur to a display object
{{#crossLink \"ColorFilter\"}}{{/crossLink}}: Color transform a display object
{{#crossLink \"ColorMatrixFilter\"}}{{/crossLink}}: Transform an image using a {{#crossLink \"ColorMatrix\"}}{{/crossLink}}

\n\t *\n\t * @class Filter\n\t * @constructor\n\t **/\n\tfunction Filter() {\n\t\t/**\n\t\t * A flag stating that this filter uses a context draw mode and cannot be batched into imageData processing.\n\t\t * @property usesContext\n\t\t * @type {boolean}\n\t\t * @default false\n\t\t */\n\t\tthis.usesContext = false;\n\n\t\t/**\n\t\t * Another filter that is required to act as part of this filter and created and managed under the hood.\n\t\t * @private\n\t\t * @property _multiPass\n\t\t * @type {Filter}\n\t\t * @default null\n\t\t */\n\t\tthis._multiPass = null;\n\n\t\t/**\n\t\t * Pre-processed template shader code. It will be parsed before being fed in into the shader compiler.\n\t\t * This should be based upon StageGL.SHADER_VERTEX_BODY_REGULAR\n\t\t * @property VTX_SHADER\n\t\t * @virtual\n\t\t * @type {String}\n\t\t * @readonly\n\t\t */\n\t\tthis.VTX_SHADER_BODY = null;\n\n\t\t/**\n\t\t * Pre-processed template shader code. It will be parsed before being fed in into the shader compiler.\n\t\t * This should be based upon StageGL.SHADER_FRAGMENT_BODY_REGULAR\n\t\t * @property FRAG_SHADER\n\t\t * @virtual\n\t\t * @type {String}\n\t\t * @readonly\n\t\t */\n\t\tthis.FRAG_SHADER_BODY = null;\n\t}\n\tvar p = Filter.prototype;\n\n// public methods:\n\t/**\n\t * Provides padding values for this filter. That is, how much the filter will extend the visual bounds of an object it is applied to.\n\t * @method getBounds\n\t * @param {Rectangle} [rect] If specified, the provided Rectangle instance will be expanded by the padding amounts and returned.\n\t * @return {Rectangle} If a `rect` param was provided, it is returned. If not, either a new rectangle with the padding values, or null if no padding is required for this filter.\n\t **/\n\tp.getBounds = function(rect) {\n\t\treturn rect;\n\t};\n\n\t/**\n\t * Assign any unique uniforms or other setup functionality here.\n\t * @method shaderParamSetup\n\t * @virtual\n\t * @param {WebGLContext} gl The context associated with the stage performing the render.\n\t * @param {StageGL} stage The stage instance that will be rendering.\n\t * @param {ShaderProgram} shaderProgram The compiled shader that is going to be used to perform the render.\n\t */\n\tp.shaderParamSetup = function(gl, stage, shaderProgram) {};\n\n\t/**\n\t * Applies the filter to the specified context.\n\t * @method applyFilter\n\t * @param {CanvasRenderingContext2D} ctx The 2D context to use as the source.\n\t * @param {Number} x The x position to use for the source rect.\n\t * @param {Number} y The y position to use for the source rect.\n\t * @param {Number} width The width to use for the source rect.\n\t * @param {Number} height The height to use for the source rect.\n\t * @param {CanvasRenderingContext2D} [targetCtx] The 2D context to draw the result to. Defaults to the context passed to ctx.\n\t * @param {Number} [targetX] The x position to draw the result to. Defaults to the value passed to x.\n\t * @param {Number} [targetY] The y position to draw the result to. Defaults to the value passed to y.\n\t * @return {Boolean} If the filter was applied successfully.\n\t **/\n\tp.applyFilter = function(ctx, x, y, width, height, targetCtx, targetX, targetY) {\n\t\t// this is the default behaviour because most filters access pixel data. It is overridden when not needed.\n\t\ttargetCtx = targetCtx || ctx;\n\t\tif (targetX == null) { targetX = x; }\n\t\tif (targetY == null) { targetY = y; }\n\t\ttry {\n\t\t\tvar imageData = ctx.getImageData(x, y, width, height);\n\t\t} catch (e) {\n\t\t\treturn false;\n\t\t}\n\t\tif (this._applyFilter(imageData)) {\n\t\t\ttargetCtx.putImageData(imageData, targetX, targetY);\n\t\t\treturn true;\n\t\t}\n\t\treturn false;\n\t};\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t **/\n\tp.toString = function() {\n\t\treturn \"[Filter]\";\n\t};\n\n\t/**\n\t * Returns a clone of this Filter instance.\n\t * @method clone\n\t * @return {Filter} A clone of the current Filter instance.\n\t **/\n\tp.clone = function() {\n\t\treturn new Filter();\n\t};\n\t\n// private methods:\n\t/**\n\t * @method _applyFilter\n\t * @param {ImageData} imageData Target ImageData instance.\n\t * @return {Boolean}\n\t **/\n\tp._applyFilter = function(imageData) { return true; };\n\n\n\tcreatejs.Filter = Filter;\n}());\n\n//##############################################################################\n// BitmapCache.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * The BitmapCache is an internal representation of all the cache properties and logic required in order to \"cache\"\n\t * an object. This information and functionality used to be located on a {{#crossLink \"DisplayObject/cache\"}}{{/crossLink}}\n\t * method in {{#crossLink \"DisplayObject\"}}{{/crossLink}}, but was moved to its own class.\n\t *\n\t * Caching in this context is purely visual, and will render the DisplayObject out into an image to be used instead\n\t * of the object. The actual cache itself is still stored on the target with the {{#crossLink \"DisplayObject/cacheCanvas:property\"}}{{/crossLink}}.\n\t * Working with a singular image like a {{#crossLink \"Bitmap\"}}{{/crossLink}} there is little benefit to performing \n\t * a cache as it is already a single image. Caching is best done on containers containing multiple complex parts that \n\t * do not move often, so that rendering the image instead will improve overall rendering speed. A cached object will \n\t * not visually update until explicitly told to do so with a call to update, much like a Stage. If a cache is being \n\t * updated every frame it is likely not improving rendering performance. Cache are best used when updates will be sparse.\n\t *\n\t * Caching is also a co-requisite for applying filters to prevent expensive filters running constantly without need, \n\t * and to physically enable some effects. The BitmapCache is also responsible for applying filters to objects and \n\t * reads each {{#crossLink \"Filter\"}}{{/crossLink}} due to this relationship. Real-time Filters are not recommended \n\t * performance wise when dealing with a Context2D canvas. For best performance and to still allow for some visual \n\t * effects use a compositeOperation when possible.\n\t * @class BitmapCache\n\t * @constructor\n\t **/\n\tfunction BitmapCache() {\n\n\t\t// public:\n\t\t/**\n\t\t * Width of the cache relative to the target object.\n\t\t * @property width\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default undefined\n\t\t **/\n\t\tthis.width = undefined;\n\n\t\t/**\n\t\t * Height of the cache relative to the target object.\n\t\t * @property height\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default undefined\n\t\t * @todo Should the width and height be protected?\n\t\t **/\n\t\tthis.height = undefined;\n\n\t\t/**\n\t\t * Horizontal position of the cache relative to the target's origin.\n\t\t * @property x\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default undefined\n\t\t **/\n\t\tthis.x = undefined;\n\n\t\t/**\n\t\t * Vertical position of the cache relative to target's origin.\n\t\t * @property y\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default undefined\n\t\t **/\n\t\tthis.y = undefined;\n\n\t\t/**\n\t\t * The internal scale of the cache image, does not affects display size. This is useful to both increase and\n\t\t * decrease render quality. Objects with increased scales are more likely to look good when scaled up or rotated.\n\t\t * Objects with decreased scales can save on rendering performance.\n\t\t * @property scale\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 1\n\t\t **/\n\t\tthis.scale = 1;\n\n\t\t/**\n\t\t * The x offset used for drawing into the cache itself, accounts for both transforms applied.\n\t\t * @property offX\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis.offX = 0;\n\n\t\t/**\n\t\t * The y offset used for drawing into the cache itself, accounts for both transforms applied.\n\t\t * @property offY\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis.offY = 0;\n\n\t\t/**\n\t\t * Track how many times the cache has been updated, mostly used for preventing duplicate cacheURLs.\n\t\t * This can be useful to see if a cache has been updated.\n\t\t * @property cacheID\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis.cacheID = 0;\n\n\t\t// protected:\n\t\t/**\n\t\t * The relative offset of the filter's x position, used for drawing the cache onto its container.\n\t\t * Re-calculated every update call before drawing.\n\t\t * @property _filterOffY\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis._filterOffX = 0;\n\n\t\t/**\n\t\t * The relative offset of the filter's y position, used for drawing the cache onto its container.\n\t\t * Re-calculated every update call before drawing.\n\t\t * @property _filterOffY\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis._filterOffY = 0;\n\n\t\t/**\n\t\t * The cacheID when a DataURL was requested.\n\t\t * @property _cacheDataURLID\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis._cacheDataURLID = 0;\n\n\t\t/**\n\t\t * The cache's DataURL, generated on-demand using the getter.\n\t\t * @property _cacheDataURL\n\t\t * @protected\n\t\t * @type {String}\n\t\t * @default null\n\t\t **/\n\t\tthis._cacheDataURL = null;\n\n\t\t/**\n\t\t * Internal tracking of final bounding width, approximately width*scale; however, filters can complicate the actual value.\n\t\t * @property _drawWidth\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis._drawWidth = 0;\n\n\t\t/**\n\t\t * Internal tracking of final bounding height, approximately height*scale; however, filters can complicate the actual value.\n\t\t * @property _drawHeight\n\t\t * @protected\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t **/\n\t\tthis._drawHeight = 0;\n\t}\n\tvar p = BitmapCache.prototype;\n\n\t/**\n\t * Returns the bounds that surround all applied filters, relies on each filter to describe how it changes bounds.\n\t * @method getFilterBounds\n\t * @param {DisplayObject} target The object to check the filter bounds for.\n\t * @param {Rectangle} [output=null] Optional parameter, if provided then calculated bounds will be applied to that object.\n\t * @return {Rectangle} bounds object representing the bounds with filters.\n\t * @static\n\t **/\n\tBitmapCache.getFilterBounds = function(target, output) {\n\t\tif(!output){ output = new createjs.Rectangle(); }\n\t\tvar filters = target.filters;\n\t\tvar filterCount = filters && filters.length;\n\t\tif (!!filterCount <= 0) { return output; }\n\n\t\tfor(var i=0; iWebGL cache with a 2D context\n\t *\n\t * var stage = new createjs.Stage();\n\t * var bmp = new createjs.Bitmap(src);\n\t * bmp.cache(0, 0, bmp.width, bmp.height, 1, {gl: \"new\"}); // no StageGL to use, so make one\n\t *\n\t * var shape = new createjs.Shape();\n\t * shape.graphics.clear().fill(\"red\").drawRect(0,0,20,20);\n\t * shape.cache(0, 0, 20, 20, 1); // cannot use WebGL cache\n\t *\n\t *

WebGL cache with a WebGL context

\n\t *\n\t * var stageGL = new createjs.StageGL();\n\t * var bmp = new createjs.Bitmap(src);\n\t * bmp.cache(0, 0, bmp.width, bmp.height, 1, {gl: \"stage\"}); // use our StageGL to cache\n\t *\n\t * var shape = new createjs.Shape();\n\t * shape.graphics.clear().fill(\"red\").drawRect(0,0,20,20);\n\t * shape.cache(0, 0, 20, 20, 1); // cannot use WebGL cache\n\t *\n\t * You may wish to create your own StageGL instance to control factors like clear color, transparency, AA, and\n\t * others. If you do, pass a new instance in instead of \"true\", the library will automatically set the\n\t * {{#crossLink \"StageGL/isCacheControlled\"}}{{/crossLink}} to true on your instance. This will trigger it to behave\n\t * correctly, and not assume your main context is WebGL.\n\t *\n\t * @public\n\t * @method BitmapCache.cache\n\t * @param {Number} x The x coordinate origin for the cache region.\n\t * @param {Number} y The y coordinate origin for the cache region.\n\t * @param {Number} width The width of the cache region.\n\t * @param {Number} height The height of the cache region.\n\t * @param {Number} [scale=1] The scale at which the cache will be created. For example, if you cache a vector shape\n\t * using myShape.cache(0,0,100,100,2) then the resulting cacheCanvas will be 200x200 px. This lets you scale and\n\t * rotate cached elements with greater fidelity. Default is 1.\n\t * @param {Object} [options=undefined] Specify additional parameters for the cache logic\n\t * @param {undefined|\"new\"|\"stage\"|StageGL} [options.useGL=undefined] Select whether to use context 2D, or WebGL rendering, and\n\t * whether to make a new stage instance or use an existing one. See above for extensive details on use.\n\t * @for BitmapCache\n\t */\n\t p.define = function(target, x, y, width, height, scale, options) {\n\t\tif(!target){ throw \"No symbol to cache\"; }\n\t\tthis._options = options;\n\t\tthis.target = target;\n\n\t\tthis.width =\t\twidth >= 1 ? width : 1;\n\t\tthis.height =\t\theight >= 1 ? height : 1;\n\t\tthis.x =\t\t\tx || 0;\n\t\tthis.y =\t\t\ty || 0;\n\t\tthis.scale =\t\tscale || 1;\n\n\t\tthis.update();\n\t};\n\n\t/**\n\t * Directly called via {{#crossLink \"DisplayObject/updateCache:method\"}}{{/crossLink}}, but also internally. This\n\t * has the dual responsibility of making sure the surface is ready to be drawn to, and performing the draw. For\n\t * full details of each behaviour, check the protected functions {{#crossLink \"BitmapCache/_updateSurface\"}}{{/crossLink}}\n\t * and {{#crossLink \"BitmapCache/_drawToCache\"}}{{/crossLink}} respectively.\n\t * @method update\n\t * @param {String} [compositeOperation=null] The DisplayObject this cache is linked to.\n\t **/\n\tp.update = function(compositeOperation) {\n\t\tif(!this.target) { throw \"define() must be called before update()\"; }\n\n\t\tvar filterBounds = BitmapCache.getFilterBounds(this.target);\n\t\tvar surface = this.target.cacheCanvas;\n\n\t\tthis._drawWidth = Math.ceil(this.width*this.scale) + filterBounds.width;\n\t\tthis._drawHeight = Math.ceil(this.height*this.scale) + filterBounds.height;\n\n\t\tif(!surface || this._drawWidth != surface.width || this._drawHeight != surface.height) {\n\t\t\tthis._updateSurface();\n\t\t}\n\n\t\tthis._filterOffX = filterBounds.x;\n\t\tthis._filterOffY = filterBounds.y;\n\t\tthis.offX = this.x*this.scale + this._filterOffX;\n\t\tthis.offY = this.y*this.scale + this._filterOffY;\n\n\t\tthis._drawToCache(compositeOperation);\n\n\t\tthis.cacheID = this.cacheID?this.cacheID+1:1;\n\t};\n\n\t/**\n\t * Reset and release all the properties and memory associated with this cache.\n\t * @method release\n\t **/\n\tp.release = function() {\n\t\tif (this._webGLCache) {\n\t\t\t// if it isn't cache controlled clean up after yourself\n\t\t\tif (!this._webGLCache.isCacheControlled) {\n\t\t\t\tif (this.__lastRT){ this.__lastRT = undefined; }\n\t\t\t\tif (this.__rtA){ this._webGLCache._killTextureObject(this.__rtA); }\n\t\t\t\tif (this.__rtB){ this._webGLCache._killTextureObject(this.__rtB); }\n\t\t\t\tif (this.target && this.target.cacheCanvas){ this._webGLCache._killTextureObject(this.target.cacheCanvas); }\n\t\t\t}\n\t\t\t// set the context to none and let the garbage collector get the rest when the canvas itself gets removed\n\t\t\tthis._webGLCache = false;\n\t\t} else {\n\t\t\tvar stage = this.target.stage;\n\t\t\tif (stage instanceof createjs.StageGL){\n\t\t\t\tstage.releaseTexture(this.target.cacheCanvas);\n\t\t\t}\n\t\t}\n\n\t\tthis.target = this.target.cacheCanvas = null;\n\t\tthis.cacheID = this._cacheDataURLID = this._cacheDataURL = undefined;\n\t\tthis.width = this.height = this.x = this.y = this.offX = this.offY = 0;\n\t\tthis.scale = 1;\n\t};\n\n\t/**\n\t * Returns a data URL for the cache, or `null` if this display object is not cached.\n\t * Uses {{#crossLink \"BitmapCache/cacheID:property\"}}{{/crossLink}} to ensure a new data URL is not generated if the\n\t * cache has not changed.\n\t * @method getCacheDataURL\n\t * @return {String} The image data url for the cache.\n\t **/\n\tp.getCacheDataURL = function() {\n\t\tvar cacheCanvas = this.target && this.target.cacheCanvas;\n\t\tif (!cacheCanvas) { return null; }\n\t\tif (this.cacheID != this._cacheDataURLID) {\n\t\t\tthis._cacheDataURLID = this.cacheID;\n\t\t\tthis._cacheDataURL = cacheCanvas.toDataURL?cacheCanvas.toDataURL():null;\t// incase function is\n\t\t}\n\t\treturn this._cacheDataURL;\n\t};\n\n\t/**\n\t * Use context2D drawing commands to display the cache canvas being used.\n\t * @method draw\n\t * @param {CanvasRenderingContext2D} ctx The context to draw into.\n\t * @return {Boolean} Whether the draw was handled successfully.\n\t **/\n\tp.draw = function(ctx) {\n\t\tif(!this.target) { return false; }\n\t\tctx.drawImage(this.target.cacheCanvas,\n\t\t\tthis.x + (this._filterOffX/this.scale),\t\tthis.y + (this._filterOffY/this.scale),\n\t\t\tthis._drawWidth/this.scale,\t\t\t\t\tthis._drawHeight/this.scale\n\t\t);\n\t\treturn true;\n\t};\n\n// private methods:\n\t/**\n\t * Create or resize the invisible canvas/surface that is needed for the display object(s) to draw to,\n\t * and in turn be used in their stead when drawing. The surface is resized to the size defined\n\t * by the width and height, factoring in scaling and filters. Adjust them to adjust the output size.\n\t * @method _updateSurface\n\t * @protected\n\t **/\n\tp._updateSurface = function() {\n\t\tif (!this._options || !this._options.useGL) {\n\t\t\tvar surface = this.target.cacheCanvas;\n\n\t\t\t// create it if it's missing\n\t\t\tif(!surface) {\n\t\t\t\tsurface = this.target.cacheCanvas = createjs.createCanvas?createjs.createCanvas():document.createElement(\"canvas\");\n\t\t\t}\n\n\t\t\t// now size it\n\t\t\tsurface.width = this._drawWidth;\n\t\t\tsurface.height = this._drawHeight;\n\t\t\treturn;\n\t\t}\n\n\t\t// create it if it's missing\n\t\tif (!this._webGLCache) {\n\t\t\tif (this._options.useGL === \"stage\") {\n\t\t\t\tif(!(this.target.stage && this.target.stage.isWebGL)){\n\t\t\t\t\tvar error = \"Cannot use 'stage' for cache because the object's parent stage is \";\n\t\t\t\t\terror += this.target.stage ? \"non WebGL.\" : \"not set, please addChild to the correct stage.\";\n\t\t\t\t\tthrow error;\n\t\t\t\t}\n\t\t\t\tthis.target.cacheCanvas = true; // will be replaced with RenderTexture, temporary positive value for old \"isCached\" checks\n\t\t\t\tthis._webGLCache = this.target.stage;\n\n\t\t\t} else if(this._options.useGL === \"new\") {\n\t\t\t\tthis.target.cacheCanvas = document.createElement(\"canvas\"); // we can turn off autopurge because we wont be making textures here\n\t\t\t\tthis._webGLCache = new createjs.StageGL(this.target.cacheCanvas, {antialias: true, transparent: true, autoPurge: -1});\n\t\t\t\tthis._webGLCache.isCacheControlled = true;\t// use this flag to control stage sizing and final output\n\n\t\t\t} else if(this._options.useGL instanceof createjs.StageGL) {\n\t\t\t\tthis.target.cacheCanvas = true; // will be replaced with RenderTexture, temporary positive value for old \"isCached\" checks\n\t\t\t\tthis._webGLCache = this._options.useGL;\n\t\t\t\tthis._webGLCache.isCacheControlled = true;\t// use this flag to control stage sizing and final output\n\n\t\t\t} else {\n\t\t\t\tthrow \"Invalid option provided to useGL, expected ['stage', 'new', StageGL, undefined], got \"+ this._options.useGL;\n\t\t\t}\n\t\t}\n\n\t\t// now size render surfaces\n\t\tvar surface = this.target.cacheCanvas;\n\t\tvar stageGL = this._webGLCache;\n\n\t\t// if we have a dedicated stage we've gotta size it\n\t\tif (stageGL.isCacheControlled) {\n\t\t\tsurface.width = this._drawWidth;\n\t\t\tsurface.height = this._drawHeight;\n\t\t\tstageGL.updateViewport(this._drawWidth, this._drawHeight);\n\t\t}\n\t\tif (this.target.filters) {\n\t\t\t// with filters we can't tell how many we'll need but the most we'll ever need is two, so make them now\n\t\t\tstageGL.getTargetRenderTexture(this.target, this._drawWidth,this._drawHeight);\n\t\t\tstageGL.getTargetRenderTexture(this.target, this._drawWidth,this._drawHeight);\n\t\t} else {\n\t\t\t// without filters then we only need one RenderTexture, and that's only if its not a dedicated stage\n\t\t\tif (!stageGL.isCacheControlled) {\n\t\t\t\tstageGL.getTargetRenderTexture(this.target, this._drawWidth,this._drawHeight);\n\t\t\t}\n\t\t}\n\t};\n\n\t/**\n\t * Perform the cache draw out for context 2D now that the setup properties have been performed.\n\t * @method _drawToCache\n\t * @protected\n\t **/\n\tp._drawToCache = function(compositeOperation) {\n\t\tvar surface = this.target.cacheCanvas;\n\t\tvar target = this.target;\n\t\tvar webGL = this._webGLCache;\n\n\t\tif (webGL){\n\t\t\t//TODO: auto split blur into an x/y pass\n\t\t\twebGL.cacheDraw(target, target.filters, this);\n\n\t\t\t// we may of swapped around which element the surface is, so we re-fetch it\n\t\t\tsurface = this.target.cacheCanvas;\n\n\t\t\tsurface.width = this._drawWidth;\n\t\t\tsurface.height = this._drawHeight;\n\t\t} else {\n\t\t\tvar ctx = surface.getContext(\"2d\");\n\n\t\t\tif (!compositeOperation) {\n\t\t\t\tctx.clearRect(0, 0, this._drawWidth+1, this._drawHeight+1);\n\t\t\t}\n\n\t\t\tctx.save();\n\t\t\tctx.globalCompositeOperation = compositeOperation;\n\t\t\tctx.setTransform(this.scale,0,0,this.scale, -this._filterOffX,-this._filterOffY);\n\t\t\tctx.translate(-this.x, -this.y);\n\t\t\ttarget.draw(ctx, true);\n\t\t\tctx.restore();\n\n\n\t\t\tif (target.filters && target.filters.length) {\n\t\t\t\tthis._applyFilters(ctx);\n\t\t\t}\n\t\t}\n\t\tsurface._invalid = true;\n\t};\n\n\t/**\n\t * Work through every filter and apply its individual visual transformation.\n\t * @method _applyFilters\n\t * @protected\n\t **/\n\tp._applyFilters = function(ctx) {\n\t\tvar filters = this.target.filters;\n\n\t\tvar w = this._drawWidth;\n\t\tvar h = this._drawHeight;\n\n\t\tvar data;\n\n\t\tvar i = 0, filter = filters[i];\n\t\tdo { // this is safe because we wouldn't be in apply filters without a filter count of at least 1\n\t\t\tif(filter.usesContext){\n\t\t\t\tif(data) {\n\t\t\t\t\tctx.putImageData(data, 0,0);\n\t\t\t\t\tdata = null;\n\t\t\t\t}\n\t\t\t\tfilter.applyFilter(ctx, 0,0, w,h);\n\t\t\t} else {\n\t\t\t\tif(!data) {\n\t\t\t\t\tdata = ctx.getImageData(0,0, w,h);\n\t\t\t\t}\n\t\t\t\tfilter._applyFilter(data);\n\t\t\t}\n\n\t\t\t// work through the multipass if it's there, otherwise move on\n\t\t\tfilter = filter._multiPass !== null ? filter._multiPass : filters[++i];\n\t\t} while (filter);\n\n\t\t//done\n\t\tif(data) {\n\t\t\tctx.putImageData(data, 0,0);\n\t\t}\n\t};\n\n\tcreatejs.BitmapCache = BitmapCache;\n}());\n\n//##############################################################################\n// BlurFilter.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * Applies a box blur to DisplayObjects in context 2D and a Gaussian blur in webgl. Note that this filter is fairly\n\t * intensive, particularly if the quality is set higher than 1.\n\t *\n\t *

Example

\n\t * This example creates a red circle, and then applies a 5 pixel blur to it. It uses the {{#crossLink \"Filter/getBounds\"}}{{/crossLink}}\n\t * method to account for the spread that the blur causes.\n\t *\n\t * var shape = new createjs.Shape().set({x:100,y:100});\n\t * shape.graphics.beginFill(\"#ff0000\").drawCircle(0,0,50);\n\t *\n\t * var blurFilter = new createjs.BlurFilter(5, 5, 1);\n\t * shape.filters = [blurFilter];\n\t * var bounds = blurFilter.getBounds();\n\t *\n\t * shape.cache(-50+bounds.x, -50+bounds.y, 100+bounds.width, 100+bounds.height);\n\t *\n\t * See {{#crossLink \"Filter\"}}{{/crossLink}} for an more information on applying filters.\n\t * @class BlurFilter\n\t * @extends Filter\n\t * @constructor\n\t * @param {Number} [blurX=0] The horizontal blur radius in pixels.\n\t * @param {Number} [blurY=0] The vertical blur radius in pixels.\n\t * @param {Number} [quality=1] The number of blur iterations.\n\t **/\n\tfunction BlurFilter( blurX, blurY, quality) {\n\t\tthis.Filter_constructor();\n\n\t\t// public properties:\n\t\t/**\n\t\t * Horizontal blur radius in pixels\n\t\t * @property blurX\n\t\t * @default 0\n\t\t * @type Number\n\t\t **/\n\t\tthis._blurX = blurX;\n\t\tthis._blurXTable = [];\n\t\tthis._lastBlurX = null;\n\n\t\t/**\n\t\t * Vertical blur radius in pixels\n\t\t * @property blurY\n\t\t * @default 0\n\t\t * @type Number\n\t\t **/\n\t\tthis._blurY = blurY;\n\t\tthis._blurYTable = [];\n\t\tthis._lastBlurY = null;\n\n\t\t/**\n\t\t * Number of blur iterations. For example, a value of 1 will produce a rough blur. A value of 2 will produce a\n\t\t * smoother blur, but take twice as long to run.\n\t\t * @property quality\n\t\t * @default 1\n\t\t * @type Number\n\t\t **/\n\t\tthis._quality;\n\t\tthis._lastQuality = null;\n\n\t\t/**\n\t\t * This is a template to generate the shader for {{#crossLink FRAG_SHADER_BODY}}{{/crossLink}}\n\t\t */\n\t\tthis.FRAG_SHADER_TEMPLATE = (\n\t\t\t\"uniform float xWeight[{{blurX}}];\" +\n\t\t\t\"uniform float yWeight[{{blurY}}];\" +\n\t\t\t\"uniform vec2 textureOffset;\" +\n\t\t\t\"void main(void) {\" +\n\t\t\t\t\"vec4 color = vec4(0.0);\" +\n\n\t\t\t\t\"float xAdj = ({{blurX}}.0-1.0)/2.0;\" +\n\t\t\t\t\"float yAdj = ({{blurY}}.0-1.0)/2.0;\" +\n\t\t\t\t\"vec2 sampleOffset;\" +\n\n\t\t\t\t\"for(int i=0; i<{{blurX}}; i++) {\" +\n\t\t\t\t\t\"for(int j=0; j<{{blurY}}; j++) {\" +\n\t\t\t\t\t\t\"sampleOffset = vRenderCoord + (textureOffset * vec2(float(i)-xAdj, float(j)-yAdj));\" +\n\t\t\t\t\t\t\"color += texture2D(uSampler, sampleOffset) * (xWeight[i] * yWeight[j]);\" +\n\t\t\t\t\t\"}\" +\n\t\t\t\t\"}\" +\n\n\t\t\t\t\"gl_FragColor = color.rgba;\" +\n\t\t\t\"}\"\n\t\t);\n\n\t\t// update the filter using the setters\n\t\tif(isNaN(quality) || quality < 1){ quality = 1; }\n\t\tthis.setQuality(quality|0);\n\t}\n\tvar p = createjs.extend(BlurFilter, createjs.Filter);\n\n\t// TODO: deprecated\n\t// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.\n\n\tp.getBlurX = function() { return this._blurX; };\n\tp.getBlurY = function() { return this._blurY; };\n\tp.setBlurX = function(value) {\n\t\tif(isNaN(value) || value < 0){ value = 0; }\n\t\tthis._blurX = value;\n\t};\n\tp.setBlurY = function(value) {\n\t\tif(isNaN(value) || value < 0){ value = 0; }\n\t\tthis._blurY = value;\n\t};\n\tp.getQuality = function() { return this._quality; };\n\tp.setQuality = function(value) {\n\t\tif(isNaN(value) || value < 0){ value = 0; }\n\t\tthis._quality = value | 0;\n\t};\n\tp._getShader = function() {\n\t\tvar xChange = this._lastBlurX !== this._blurX;\n\t\tvar yChange = this._lastBlurY !== this._blurY;\n\t\tvar qChange = this._lastQuality !== this._quality;\n\t\tif(xChange || yChange || qChange) {\n\t\t\tif(xChange || qChange) { this._blurXTable = this._getTable(this._blurX * this._quality); }\n\t\t\tif(yChange || qChange) { this._blurYTable = this._getTable(this._blurY * this._quality); }\n\t\t\tthis._updateShader();\n\t\t\tthis._lastBlurX = this._blurX;\n\t\t\tthis._lastBlurY = this._blurY;\n\t\t\tthis._lastQuality = this._quality;\n\t\t\treturn undefined; // force a rebuild\n\t\t}\n\t\treturn this._compiledShader;\n\t};\n\tp._setShader = function() { this._compiledShader; };\n\n\ttry {\n\t\tObject.defineProperties(p, {\n\t\t\tblurX: { get: p.getBlurX, set: p.setBlurX },\n\t\t\tblurY: { get: p.getBlurY, set: p.setBlurY },\n\t\t\tquality: { get: p.getQuality, set: p.setQuality },\n\t\t\t_builtShader: { get: p._getShader, set: p._setShader}\n\t\t});\n\t} catch (e) { console.log(e); }\n\n\t/**\n\t * Internal lookup function to create gaussian distribution.\n\t * @method _getTable\n\t * @param {Number} spread How many steps in the curve.\n\t * @return {Array} An array with Math.ceil(spread*2) entries with appropriately distributed weights.\n\t */\n\tp._getTable = function(spread) {\n\t\tvar EDGE = 4.2;\n\t\tif(spread<=1) { return [1]; }\n\n\t\tvar result = [];\n\t\tvar count = Math.ceil(spread*2);\n\t\tcount += (count%2)?0:1;\n\t\tvar adjust = (count/2)|0;\n\t\tfor(var i = -adjust; i<=adjust; i++) {\n\t\t\tvar x = (i/adjust)*EDGE;\n\t\t\tresult.push(1/Math.sqrt(2*Math.PI) * Math.pow(Math.E, -(Math.pow(x,2)/4)));\n\t\t}\n\t\tvar factor = result.reduce(function(a, b) { return a + b; });\n\t\treturn result.map(function(currentValue, index, array) { return currentValue/factor; });\n\t};\n\n\t/**\n\t * Internal update function to create shader properties.\n\t * @method _updateShader\n\t */\n\tp._updateShader = function() {\n\t\tif(this._blurX === undefined || this._blurY === undefined){ return; }\n\t\tvar result = this.FRAG_SHADER_TEMPLATE;\n\t\tresult = result.replace(/\\{\\{blurX\\}\\}/g, (this._blurXTable.length).toFixed(0));\n\t\tresult = result.replace(/\\{\\{blurY\\}\\}/g, (this._blurYTable.length).toFixed(0));\n\t\tthis.FRAG_SHADER_BODY = result;\n\t};\n\n\t/** docced in super class **/\n\tp.shaderParamSetup = function(gl, stage, shaderProgram) {\n\t\t// load the normalized gaussian weight tables\n\t\tgl.uniform1fv(\n\t\t\tgl.getUniformLocation(shaderProgram, \"xWeight\"),\n\t\t\tthis._blurXTable\n\t\t);\n\t\tgl.uniform1fv(\n\t\t\tgl.getUniformLocation(shaderProgram, \"yWeight\"),\n\t\t\tthis._blurYTable\n\t\t);\n\n\t\t// what is the size of a single pixel in -1, 1 (webGL) space\n\t\tgl.uniform2f(\n\t\t\tgl.getUniformLocation(shaderProgram, \"textureOffset\"),\n\t\t\t2/(stage._viewportWidth*this._quality), 2/(stage._viewportHeight*this._quality)\n\t\t);\n\t};\n\n// constants:\n\t/**\n\t * Array of multiply values for blur calculations.\n\t * @property MUL_TABLE\n\t * @type Array\n\t * @protected\n\t * @static\n\t **/\n\tBlurFilter.MUL_TABLE = [1, 171, 205, 293, 57, 373, 79, 137, 241, 27, 391, 357, 41, 19, 283, 265, 497, 469, 443, 421, 25, 191, 365, 349, 335, 161, 155, 149, 9, 278, 269, 261, 505, 245, 475, 231, 449, 437, 213, 415, 405, 395, 193, 377, 369, 361, 353, 345, 169, 331, 325, 319, 313, 307, 301, 37, 145, 285, 281, 69, 271, 267, 263, 259, 509, 501, 493, 243, 479, 118, 465, 459, 113, 446, 55, 435, 429, 423, 209, 413, 51, 403, 199, 393, 97, 3, 379, 375, 371, 367, 363, 359, 355, 351, 347, 43, 85, 337, 333, 165, 327, 323, 5, 317, 157, 311, 77, 305, 303, 75, 297, 294, 73, 289, 287, 71, 141, 279, 277, 275, 68, 135, 67, 133, 33, 262, 260, 129, 511, 507, 503, 499, 495, 491, 61, 121, 481, 477, 237, 235, 467, 232, 115, 457, 227, 451, 7, 445, 221, 439, 218, 433, 215, 427, 425, 211, 419, 417, 207, 411, 409, 203, 202, 401, 399, 396, 197, 49, 389, 387, 385, 383, 95, 189, 47, 187, 93, 185, 23, 183, 91, 181, 45, 179, 89, 177, 11, 175, 87, 173, 345, 343, 341, 339, 337, 21, 167, 83, 331, 329, 327, 163, 81, 323, 321, 319, 159, 79, 315, 313, 39, 155, 309, 307, 153, 305, 303, 151, 75, 299, 149, 37, 295, 147, 73, 291, 145, 289, 287, 143, 285, 71, 141, 281, 35, 279, 139, 69, 275, 137, 273, 17, 271, 135, 269, 267, 133, 265, 33, 263, 131, 261, 130, 259, 129, 257, 1];\n\n\t/**\n\t * Array of shift values for blur calculations.\n\t * @property SHG_TABLE\n\t * @type Array\n\t * @protected\n\t * @static\n\t **/\n\tBlurFilter.SHG_TABLE = [0, 9, 10, 11, 9, 12, 10, 11, 12, 9, 13, 13, 10, 9, 13, 13, 14, 14, 14, 14, 10, 13, 14, 14, 14, 13, 13, 13, 9, 14, 14, 14, 15, 14, 15, 14, 15, 15, 14, 15, 15, 15, 14, 15, 15, 15, 15, 15, 14, 15, 15, 15, 15, 15, 15, 12, 14, 15, 15, 13, 15, 15, 15, 15, 16, 16, 16, 15, 16, 14, 16, 16, 14, 16, 13, 16, 16, 16, 15, 16, 13, 16, 15, 16, 14, 9, 16, 16, 16, 16, 16, 16, 16, 16, 16, 13, 14, 16, 16, 15, 16, 16, 10, 16, 15, 16, 14, 16, 16, 14, 16, 16, 14, 16, 16, 14, 15, 16, 16, 16, 14, 15, 14, 15, 13, 16, 16, 15, 17, 17, 17, 17, 17, 17, 14, 15, 17, 17, 16, 16, 17, 16, 15, 17, 16, 17, 11, 17, 16, 17, 16, 17, 16, 17, 17, 16, 17, 17, 16, 17, 17, 16, 16, 17, 17, 17, 16, 14, 17, 17, 17, 17, 15, 16, 14, 16, 15, 16, 13, 16, 15, 16, 14, 16, 15, 16, 12, 16, 15, 16, 17, 17, 17, 17, 17, 13, 16, 15, 17, 17, 17, 16, 15, 17, 17, 17, 16, 15, 17, 17, 14, 16, 17, 17, 16, 17, 17, 16, 15, 17, 16, 14, 17, 16, 15, 17, 16, 17, 17, 16, 17, 15, 16, 17, 14, 17, 16, 15, 17, 16, 17, 13, 17, 16, 17, 17, 16, 17, 14, 17, 16, 17, 16, 17, 16, 17, 9];\n\n// public methods:\n\t/** docced in super class **/\n\tp.getBounds = function (rect) {\n\t\tvar x = this.blurX|0, y = this.blurY| 0;\n\t\tif(x <= 0 && y <= 0) { return rect; }\n\t\tvar q = Math.pow(this.quality, 0.2);\n\t\treturn (rect || new createjs.Rectangle()).pad(y*q+1,x*q+1,y*q+1,x*q+1);\n\t};\n\n\t/** docced in super class **/\n\tp.clone = function() {\n\t\treturn new BlurFilter(this.blurX, this.blurY, this.quality);\n\t};\n\n\t/** docced in super class **/\n\tp.toString = function() {\n\t\treturn \"[BlurFilter]\";\n\t};\n\n\n// private methods:\n\n\t/** docced in super class **/\n\tp._applyFilter = function (imageData) {\n\t\tvar radiusX = this._blurX >> 1;\n\t\tif (isNaN(radiusX) || radiusX < 0) return false;\n\t\tvar radiusY = this._blurY >> 1;\n\t\tif (isNaN(radiusY) || radiusY < 0) return false;\n\t\tif (radiusX == 0 && radiusY == 0) return false;\n\n\t\tvar iterations = this.quality;\n\t\tif (isNaN(iterations) || iterations < 1) iterations = 1;\n\t\titerations |= 0;\n\t\tif (iterations > 3) iterations = 3;\n\t\tif (iterations < 1) iterations = 1;\n\n\t\tvar px = imageData.data;\n\t\tvar x=0, y=0, i=0, p=0, yp=0, yi=0, yw=0, r=0, g=0, b=0, a=0, pr=0, pg=0, pb=0, pa=0;\n\n\t\tvar divx = (radiusX + radiusX + 1) | 0;\n\t\tvar divy = (radiusY + radiusY + 1) | 0;\n\t\tvar w = imageData.width | 0;\n\t\tvar h = imageData.height | 0;\n\n\t\tvar w1 = (w - 1) | 0;\n\t\tvar h1 = (h - 1) | 0;\n\t\tvar rxp1 = (radiusX + 1) | 0;\n\t\tvar ryp1 = (radiusY + 1) | 0;\n\n\t\tvar ssx = {r:0,b:0,g:0,a:0};\n\t\tvar sx = ssx;\n\t\tfor ( i = 1; i < divx; i++ )\n\t\t{\n\t\t\tsx = sx.n = {r:0,b:0,g:0,a:0};\n\t\t}\n\t\tsx.n = ssx;\n\n\t\tvar ssy = {r:0,b:0,g:0,a:0};\n\t\tvar sy = ssy;\n\t\tfor ( i = 1; i < divy; i++ )\n\t\t{\n\t\t\tsy = sy.n = {r:0,b:0,g:0,a:0};\n\t\t}\n\t\tsy.n = ssy;\n\n\t\tvar si = null;\n\n\n\t\tvar mtx = BlurFilter.MUL_TABLE[radiusX] | 0;\n\t\tvar stx = BlurFilter.SHG_TABLE[radiusX] | 0;\n\t\tvar mty = BlurFilter.MUL_TABLE[radiusY] | 0;\n\t\tvar sty = BlurFilter.SHG_TABLE[radiusY] | 0;\n\n\t\twhile (iterations-- > 0) {\n\n\t\t\tyw = yi = 0;\n\t\t\tvar ms = mtx;\n\t\t\tvar ss = stx;\n\t\t\tfor (y = h; --y > -1;) {\n\t\t\t\tr = rxp1 * (pr = px[(yi) | 0]);\n\t\t\t\tg = rxp1 * (pg = px[(yi + 1) | 0]);\n\t\t\t\tb = rxp1 * (pb = px[(yi + 2) | 0]);\n\t\t\t\ta = rxp1 * (pa = px[(yi + 3) | 0]);\n\n\t\t\t\tsx = ssx;\n\n\t\t\t\tfor( i = rxp1; --i > -1; )\n\t\t\t\t{\n\t\t\t\t\tsx.r = pr;\n\t\t\t\t\tsx.g = pg;\n\t\t\t\t\tsx.b = pb;\n\t\t\t\t\tsx.a = pa;\n\t\t\t\t\tsx = sx.n;\n\t\t\t\t}\n\n\t\t\t\tfor( i = 1; i < rxp1; i++ )\n\t\t\t\t{\n\t\t\t\t\tp = (yi + ((w1 < i ? w1 : i) << 2)) | 0;\n\t\t\t\t\tr += ( sx.r = px[p]);\n\t\t\t\t\tg += ( sx.g = px[p+1]);\n\t\t\t\t\tb += ( sx.b = px[p+2]);\n\t\t\t\t\ta += ( sx.a = px[p+3]);\n\n\t\t\t\t\tsx = sx.n;\n\t\t\t\t}\n\n\t\t\t\tsi = ssx;\n\t\t\t\tfor ( x = 0; x < w; x++ )\n\t\t\t\t{\n\t\t\t\t\tpx[yi++] = (r * ms) >>> ss;\n\t\t\t\t\tpx[yi++] = (g * ms) >>> ss;\n\t\t\t\t\tpx[yi++] = (b * ms) >>> ss;\n\t\t\t\t\tpx[yi++] = (a * ms) >>> ss;\n\n\t\t\t\t\tp = ((yw + ((p = x + radiusX + 1) < w1 ? p : w1)) << 2);\n\n\t\t\t\t\tr -= si.r - ( si.r = px[p]);\n\t\t\t\t\tg -= si.g - ( si.g = px[p+1]);\n\t\t\t\t\tb -= si.b - ( si.b = px[p+2]);\n\t\t\t\t\ta -= si.a - ( si.a = px[p+3]);\n\n\t\t\t\t\tsi = si.n;\n\n\t\t\t\t}\n\t\t\t\tyw += w;\n\t\t\t}\n\n\t\t\tms = mty;\n\t\t\tss = sty;\n\t\t\tfor (x = 0; x < w; x++) {\n\t\t\t\tyi = (x << 2) | 0;\n\n\t\t\t\tr = (ryp1 * (pr = px[yi])) | 0;\n\t\t\t\tg = (ryp1 * (pg = px[(yi + 1) | 0])) | 0;\n\t\t\t\tb = (ryp1 * (pb = px[(yi + 2) | 0])) | 0;\n\t\t\t\ta = (ryp1 * (pa = px[(yi + 3) | 0])) | 0;\n\n\t\t\t\tsy = ssy;\n\t\t\t\tfor( i = 0; i < ryp1; i++ )\n\t\t\t\t{\n\t\t\t\t\tsy.r = pr;\n\t\t\t\t\tsy.g = pg;\n\t\t\t\t\tsy.b = pb;\n\t\t\t\t\tsy.a = pa;\n\t\t\t\t\tsy = sy.n;\n\t\t\t\t}\n\n\t\t\t\typ = w;\n\n\t\t\t\tfor( i = 1; i <= radiusY; i++ )\n\t\t\t\t{\n\t\t\t\t\tyi = ( yp + x ) << 2;\n\n\t\t\t\t\tr += ( sy.r = px[yi]);\n\t\t\t\t\tg += ( sy.g = px[yi+1]);\n\t\t\t\t\tb += ( sy.b = px[yi+2]);\n\t\t\t\t\ta += ( sy.a = px[yi+3]);\n\n\t\t\t\t\tsy = sy.n;\n\n\t\t\t\t\tif( i < h1 )\n\t\t\t\t\t{\n\t\t\t\t\t\typ += w;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tyi = x;\n\t\t\t\tsi = ssy;\n\t\t\t\tif ( iterations > 0 )\n\t\t\t\t{\n\t\t\t\t\tfor ( y = 0; y < h; y++ )\n\t\t\t\t\t{\n\t\t\t\t\t\tp = yi << 2;\n\t\t\t\t\t\tpx[p+3] = pa =(a * ms) >>> ss;\n\t\t\t\t\t\tif ( pa > 0 )\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tpx[p] = ((r * ms) >>> ss );\n\t\t\t\t\t\t\tpx[p+1] = ((g * ms) >>> ss );\n\t\t\t\t\t\t\tpx[p+2] = ((b * ms) >>> ss );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tpx[p] = px[p+1] = px[p+2] = 0\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tp = ( x + (( ( p = y + ryp1) < h1 ? p : h1 ) * w )) << 2;\n\n\t\t\t\t\t\tr -= si.r - ( si.r = px[p]);\n\t\t\t\t\t\tg -= si.g - ( si.g = px[p+1]);\n\t\t\t\t\t\tb -= si.b - ( si.b = px[p+2]);\n\t\t\t\t\t\ta -= si.a - ( si.a = px[p+3]);\n\n\t\t\t\t\t\tsi = si.n;\n\n\t\t\t\t\t\tyi += w;\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tfor ( y = 0; y < h; y++ )\n\t\t\t\t\t{\n\t\t\t\t\t\tp = yi << 2;\n\t\t\t\t\t\tpx[p+3] = pa =(a * ms) >>> ss;\n\t\t\t\t\t\tif ( pa > 0 )\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tpa = 255 / pa;\n\t\t\t\t\t\t\tpx[p] = ((r * ms) >>> ss ) * pa;\n\t\t\t\t\t\t\tpx[p+1] = ((g * ms) >>> ss ) * pa;\n\t\t\t\t\t\t\tpx[p+2] = ((b * ms) >>> ss ) * pa;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tpx[p] = px[p+1] = px[p+2] = 0\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tp = ( x + (( ( p = y + ryp1) < h1 ? p : h1 ) * w )) << 2;\n\n\t\t\t\t\t\tr -= si.r - ( si.r = px[p]);\n\t\t\t\t\t\tg -= si.g - ( si.g = px[p+1]);\n\t\t\t\t\t\tb -= si.b - ( si.b = px[p+2]);\n\t\t\t\t\t\ta -= si.a - ( si.a = px[p+3]);\n\n\t\t\t\t\t\tsi = si.n;\n\n\t\t\t\t\t\tyi += w;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t}\n\t\treturn true;\n\t};\n\n\tcreatejs.BlurFilter = createjs.promote(BlurFilter, \"Filter\");\n}());\n\n//##############################################################################\n// AlphaMapFilter.js\n//##############################################################################\n\nthis.createjs = this.createjs || {};\n\n(function () {\n\t\"use strict\";\n\t\n\t\n// constructor:\n\t/**\n\t * Applies a greyscale alpha map image (or canvas) to the target, such that the alpha channel of the result will\n\t * be copied from the red channel of the map, and the RGB channels will be copied from the target.\n\t *\n\t * Generally, it is recommended that you use {{#crossLink \"AlphaMaskFilter\"}}{{/crossLink}}, because it has much\n\t * better performance.\n\t *\n\t *

Example

\n\t * This example draws a red->blue box, caches it, and then uses the cache canvas as an alpha map on a 100x100 image.\n\t *\n\t * var box = new createjs.Shape();\n\t * box.graphics.beginLinearGradientFill([\"#ff0000\", \"#0000ff\"], [0, 1], 0, 0, 0, 100)\n\t * box.graphics.drawRect(0, 0, 100, 100);\n\t * box.cache(0, 0, 100, 100);\n\t *\n\t * var bmp = new createjs.Bitmap(\"path/to/image.jpg\");\n\t * bmp.filters = [\n\t * new createjs.AlphaMapFilter(box.cacheCanvas)\n\t * ];\n\t * bmp.cache(0, 0, 100, 100);\n\t * stage.addChild(bmp);\n\t *\n\t * See {{#crossLink \"Filter\"}}{{/crossLink}} for more information on applying filters.\n\t * @class AlphaMapFilter\n\t * @extends Filter\n\t * @constructor\n\t * @param {HTMLImageElement|HTMLCanvasElement} alphaMap The greyscale image (or canvas) to use as the alpha value for the\n\t * result. This should be exactly the same dimensions as the target.\n\t **/\n\tfunction AlphaMapFilter(alphaMap) {\n\t\tthis.Filter_constructor();\n\t\n\t// public properties:\n\t\t/**\n\t\t * The greyscale image (or canvas) to use as the alpha value for the result. This should be exactly the same\n\t\t * dimensions as the target.\n\t\t * @property alphaMap\n\t\t * @type HTMLImageElement|HTMLCanvasElement\n\t\t **/\n\t\tthis.alphaMap = alphaMap;\n\t\t\n\t\t\n\t// private properties:\n\t\t/**\n\t\t * @property _alphaMap\n\t\t * @protected\n\t\t * @type HTMLImageElement|HTMLCanvasElement\n\t\t **/\n\t\tthis._alphaMap = null;\n\t\t\n\t\t/**\n\t\t * @property _mapData\n\t\t * @protected\n\t\t * @type Uint8ClampedArray\n\t\t **/\n\t\tthis._mapData = null;\n\t\tthis._mapTexture = null;\n\n\t\tthis.FRAG_SHADER_BODY = (\n\t\t\t\"uniform sampler2D uAlphaSampler;\"+\n\n\t\t\t\"void main(void) {\" +\n\t\t\t\t\"vec4 color = texture2D(uSampler, vRenderCoord);\" +\n\t\t\t\t\"vec4 alphaMap = texture2D(uAlphaSampler, vTextureCoord);\" +\n\n\t\t\t\t// some image formats can have transparent white rgba(1,1,1, 0) when put on the GPU, this means we need a slight tweak\n\t\t\t\t// using ceil ensure that the colour will be used so long as it exists but pure transparency will be treated black\n\t\t\t\t\"gl_FragColor = vec4(color.rgb, color.a * (alphaMap.r * ceil(alphaMap.a)));\" +\n\t\t\t\"}\"\n\t\t);\n\t}\n\tvar p = createjs.extend(AlphaMapFilter, createjs.Filter);\n\n\t// TODO: deprecated\n\t// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.\n\n\t/** docced in super class **/\n\tp.shaderParamSetup = function(gl, stage, shaderProgram) {\n\t\tif(!this._mapTexture) { this._mapTexture = gl.createTexture(); }\n\n\t\tgl.activeTexture(gl.TEXTURE1);\n\t\tgl.bindTexture(gl.TEXTURE_2D, this._mapTexture);\n\t\tstage.setTextureParams(gl);\n\t\tgl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.alphaMap);\n\n\t\tgl.uniform1i(\n\t\t\tgl.getUniformLocation(shaderProgram, \"uAlphaSampler\"),\n\t\t\t1\n\t\t);\n\t};\n\n// public methods:\n\t/** docced in super class **/\n\tp.clone = function () {\n\t\tvar o = new AlphaMapFilter(this.alphaMap);\n\t\to._alphaMap = this._alphaMap;\n\t\to._mapData = this._mapData;\n\t\treturn o;\n\t};\n\n\t/** docced in super class **/\n\tp.toString = function () {\n\t\treturn \"[AlphaMapFilter]\";\n\t};\n\n\n// private methods:\n\t/** docced in super class **/\n\tp._applyFilter = function (imageData) {\n\t\tif (!this.alphaMap) { return true; }\n\t\tif (!this._prepAlphaMap()) { return false; }\n\t\t\n\t\t// TODO: update to support scenarios where the target has different dimensions.\n\t\tvar data = imageData.data;\n\t\tvar map = this._mapData;\n\t\tfor(var i=0, l=data.length; iIMPORTANT NOTE: This filter currently does not support the targetCtx, or targetX/Y parameters correctly.\n\t *\n\t *

Example

\n\t * This example draws a gradient box, then caches it and uses the \"cacheCanvas\" as the alpha mask on a 100x100 image.\n\t *\n\t * var box = new createjs.Shape();\n\t * box.graphics.beginLinearGradientFill([\"#000000\", \"rgba(0, 0, 0, 0)\"], [0, 1], 0, 0, 100, 100)\n\t * box.graphics.drawRect(0, 0, 100, 100);\n\t * box.cache(0, 0, 100, 100);\n\t *\n\t * var bmp = new createjs.Bitmap(\"path/to/image.jpg\");\n\t * bmp.filters = [\n\t * new createjs.AlphaMaskFilter(box.cacheCanvas)\n\t * ];\n\t * bmp.cache(0, 0, 100, 100);\n\t *\n\t * See {{#crossLink \"Filter\"}}{{/crossLink}} for more information on applying filters.\n\t * @class AlphaMaskFilter\n\t * @extends Filter\n\t * @constructor\n\t * @param {HTMLImageElement|HTMLCanvasElement} mask\n\t **/\n\tfunction AlphaMaskFilter(mask) {\n\t\tthis.Filter_constructor();\n\t\n\t// public properties:\n\t\t/**\n\t\t * The image (or canvas) to use as the mask.\n\t\t * @property mask\n\t\t * @type HTMLImageElement|HTMLCanvasElement\n\t\t **/\n\t\tthis.mask = mask;\n\n\t\t/** docced in super class **/\n\t\tthis.usesContext = true;\n\n\t\tthis.FRAG_SHADER_BODY = (\n\t\t\t\"uniform sampler2D uAlphaSampler;\"+\n\n\t\t\t\"void main(void) {\" +\n\t\t\t\t\"vec4 color = texture2D(uSampler, vRenderCoord);\" +\n\t\t\t\t\"vec4 alphaMap = texture2D(uAlphaSampler, vTextureCoord);\" +\n\n\t\t\t\t\"gl_FragColor = vec4(color.rgb, color.a * alphaMap.a);\" +\n\t\t\t\"}\"\n\t\t);\n\t}\n\tvar p = createjs.extend(AlphaMaskFilter, createjs.Filter);\n\n\t// TODO: deprecated\n\t// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.\n\n\t/** docced in super class **/\n\tp.shaderParamSetup = function(gl, stage, shaderProgram) {\n\t\tif(!this._mapTexture) { this._mapTexture = gl.createTexture(); }\n\n\t\tgl.activeTexture(gl.TEXTURE1);\n\t\tgl.bindTexture(gl.TEXTURE_2D, this._mapTexture);\n\t\tstage.setTextureParams(gl);\n\t\tgl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.mask);\n\n\t\tgl.uniform1i(\n\t\t\tgl.getUniformLocation(shaderProgram, \"uAlphaSampler\"),\n\t\t\t1\n\t\t);\n\t};\n\n// public methods:\n\t/**\n\t * Applies the filter to the specified context.\n\t *\n\t * IMPORTANT NOTE: This filter currently does not support the targetCtx, or targetX/Y parameters\n\t * correctly.\n\t * @method applyFilter\n\t * @param {CanvasRenderingContext2D} ctx The 2D context to use as the source.\n\t * @param {Number} x The x position to use for the source rect.\n\t * @param {Number} y The y position to use for the source rect.\n\t * @param {Number} width The width to use for the source rect.\n\t * @param {Number} height The height to use for the source rect.\n\t * @param {CanvasRenderingContext2D} [targetCtx] NOT SUPPORTED IN THIS FILTER. The 2D context to draw the result to. Defaults to the context passed to ctx.\n\t * @param {Number} [targetX] NOT SUPPORTED IN THIS FILTER. The x position to draw the result to. Defaults to the value passed to x.\n\t * @param {Number} [targetY] NOT SUPPORTED IN THIS FILTER. The y position to draw the result to. Defaults to the value passed to y.\n\t * @return {Boolean} If the filter was applied successfully.\n\t **/\n\tp.applyFilter = function (ctx, x, y, width, height, targetCtx, targetX, targetY) {\n\t\tif (!this.mask) { return true; }\n\t\ttargetCtx = targetCtx || ctx;\n\t\tif (targetX == null) { targetX = x; }\n\t\tif (targetY == null) { targetY = y; }\n\n\t\ttargetCtx.save();\n\t\tif (ctx != targetCtx) {\n\t\t\t// TODO: support targetCtx and targetX/Y\n\t\t\t// clearRect, then draw the ctx in?\n\t\t\treturn false;\n\t\t}\n\n\t\ttargetCtx.globalCompositeOperation = \"destination-in\";\n\t\ttargetCtx.drawImage(this.mask, targetX, targetY);\n\t\ttargetCtx.restore();\n\t\treturn true;\n\t};\n\n\t/** docced in super class **/\n\tp.clone = function () {\n\t\treturn new AlphaMaskFilter(this.mask);\n\t};\n\n\t/** docced in super class **/\n\tp.toString = function () {\n\t\treturn \"[AlphaMaskFilter]\";\n\t};\n\n\n\tcreatejs.AlphaMaskFilter = createjs.promote(AlphaMaskFilter, \"Filter\");\n}());\n\n//##############################################################################\n// ColorFilter.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * Applies a color transform to DisplayObjects.\n\t *\n\t *

Example

\n\t * This example draws a red circle, and then transforms it to Blue. This is accomplished by multiplying all the channels\n\t * to 0 (except alpha, which is set to 1), and then adding 255 to the blue channel.\n\t *\n\t * var shape = new createjs.Shape().set({x:100,y:100});\n\t * shape.graphics.beginFill(\"#ff0000\").drawCircle(0,0,50);\n\t *\n\t * shape.filters = [\n\t * new createjs.ColorFilter(0,0,0,1, 0,0,255,0)\n\t * ];\n\t * shape.cache(-50, -50, 100, 100);\n\t *\n\t * See {{#crossLink \"Filter\"}}{{/crossLink}} for an more information on applying filters.\n\t * @class ColorFilter\n\t * @param {Number} [redMultiplier=1] The amount to multiply against the red channel. This is a range between 0 and 1.\n\t * @param {Number} [greenMultiplier=1] The amount to multiply against the green channel. This is a range between 0 and 1.\n\t * @param {Number} [blueMultiplier=1] The amount to multiply against the blue channel. This is a range between 0 and 1.\n\t * @param {Number} [alphaMultiplier=1] The amount to multiply against the alpha channel. This is a range between 0 and 1.\n\t * @param {Number} [redOffset=0] The amount to add to the red channel after it has been multiplied. This is a range\n\t * between -255 and 255.\n\t * @param {Number} [greenOffset=0] The amount to add to the green channel after it has been multiplied. This is a range\n\t * between -255 and 255.\n\t * @param {Number} [blueOffset=0] The amount to add to the blue channel after it has been multiplied. This is a range\n\t * between -255 and 255.\n\t * @param {Number} [alphaOffset=0] The amount to add to the alpha channel after it has been multiplied. This is a range\n\t * between -255 and 255.\n\t * @constructor\n\t * @extends Filter\n\t **/\n\tfunction ColorFilter(redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier, redOffset, greenOffset, blueOffset, alphaOffset) {\n\t\tthis.Filter_constructor();\n\n\t// public properties:\n\t\t/**\n\t\t * Red channel multiplier.\n\t\t * @property redMultiplier\n\t\t * @type Number\n\t\t **/\n\t\tthis.redMultiplier = redMultiplier != null ? redMultiplier : 1;\n\t\n\t\t/**\n\t\t * Green channel multiplier.\n\t\t * @property greenMultiplier\n\t\t * @type Number\n\t\t **/\n\t\tthis.greenMultiplier = greenMultiplier != null ? greenMultiplier : 1;\n\t\n\t\t/**\n\t\t * Blue channel multiplier.\n\t\t * @property blueMultiplier\n\t\t * @type Number\n\t\t **/\n\t\tthis.blueMultiplier = blueMultiplier != null ? blueMultiplier : 1;\n\t\n\t\t/**\n\t\t * Alpha channel multiplier.\n\t\t * @property alphaMultiplier\n\t\t * @type Number\n\t\t **/\n\t\tthis.alphaMultiplier = alphaMultiplier != null ? alphaMultiplier : 1;\n\t\n\t\t/**\n\t\t * Red channel offset (added to value).\n\t\t * @property redOffset\n\t\t * @type Number\n\t\t **/\n\t\tthis.redOffset = redOffset || 0;\n\t\n\t\t/**\n\t\t * Green channel offset (added to value).\n\t\t * @property greenOffset\n\t\t * @type Number\n\t\t **/\n\t\tthis.greenOffset = greenOffset || 0;\n\t\n\t\t/**\n\t\t * Blue channel offset (added to value).\n\t\t * @property blueOffset\n\t\t * @type Number\n\t\t **/\n\t\tthis.blueOffset = blueOffset || 0;\n\t\n\t\t/**\n\t\t * Alpha channel offset (added to value).\n\t\t * @property alphaOffset\n\t\t * @type Number\n\t\t **/\n\t\tthis.alphaOffset = alphaOffset || 0;\n\n\t\tthis.FRAG_SHADER_BODY = (\n\t\t\t\"uniform vec4 uColorMultiplier;\" +\n\t\t\t\"uniform vec4 uColorOffset;\" +\n\n\t\t\t\"void main(void) {\" +\n\t\t\t\t\"vec4 color = texture2D(uSampler, vRenderCoord);\" +\n\n\t\t\t\t\"gl_FragColor = (color * uColorMultiplier) + uColorOffset;\" +\n\t\t\t\"}\"\n\t\t);\n\n\t}\n\tvar p = createjs.extend(ColorFilter, createjs.Filter);\n\n\t// TODO: deprecated\n\t// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.\n\n\n// public methods:\n\t/** docced in super class **/\n\tp.shaderParamSetup = function(gl, stage, shaderProgram) {\n\t\tgl.uniform4f(\n\t\t\tgl.getUniformLocation(shaderProgram, \"uColorMultiplier\"),\n\t\t\tthis.redMultiplier, this.greenMultiplier, this.blueMultiplier, this.alphaMultiplier\n\t\t);\n\n\t\tgl.uniform4f(\n\t\t\tgl.getUniformLocation(shaderProgram, \"uColorOffset\"),\n\t\t\tthis.redOffset/255, this.greenOffset/255, this.blueOffset/255, this.alphaOffset/255\n\t\t);\n\t};\n\n\t/** docced in super class **/\n\tp.toString = function() {\n\t\treturn \"[ColorFilter]\";\n\t};\n\n\t/** docced in super class **/\n\tp.clone = function() {\n\t\treturn new ColorFilter(\n\t\t\tthis.redMultiplier, this.greenMultiplier, this.blueMultiplier, this.alphaMultiplier,\n\t\t\tthis.redOffset, this.greenOffset, this.blueOffset, this.alphaOffset\n\t\t);\n\t};\n\n// private methods:\n\t/** docced in super class **/\n\tp._applyFilter = function(imageData) {\n\t\tvar data = imageData.data;\n\t\tvar l = data.length;\n\t\tfor (var i=0; iExample\n\t *\n\t * myColorMatrix.adjustHue(20).adjustBrightness(50);\n\t *\n\t * See {{#crossLink \"Filter\"}}{{/crossLink}} for an example of how to apply filters, or {{#crossLink \"ColorMatrixFilter\"}}{{/crossLink}}\n\t * for an example of how to use ColorMatrix to change a DisplayObject's color.\n\t * @class ColorMatrix\n\t * @param {Number} brightness\n\t * @param {Number} contrast\n\t * @param {Number} saturation\n\t * @param {Number} hue\n\t * @constructor\n\t **/\n\tfunction ColorMatrix(brightness, contrast, saturation, hue) {\n\t\tthis.setColor(brightness, contrast, saturation, hue);\n\t}\n\tvar p = ColorMatrix.prototype;\n\n// constants:\n\t/**\n\t * Array of delta values for contrast calculations.\n\t * @property DELTA_INDEX\n\t * @type Array\n\t * @protected\n\t * @static\n\t **/\n\tColorMatrix.DELTA_INDEX = [\n\t\t0, 0.01, 0.02, 0.04, 0.05, 0.06, 0.07, 0.08, 0.1, 0.11,\n\t\t0.12, 0.14, 0.15, 0.16, 0.17, 0.18, 0.20, 0.21, 0.22, 0.24,\n\t\t0.25, 0.27, 0.28, 0.30, 0.32, 0.34, 0.36, 0.38, 0.40, 0.42,\n\t\t0.44, 0.46, 0.48, 0.5, 0.53, 0.56, 0.59, 0.62, 0.65, 0.68,\n\t\t0.71, 0.74, 0.77, 0.80, 0.83, 0.86, 0.89, 0.92, 0.95, 0.98,\n\t\t1.0, 1.06, 1.12, 1.18, 1.24, 1.30, 1.36, 1.42, 1.48, 1.54,\n\t\t1.60, 1.66, 1.72, 1.78, 1.84, 1.90, 1.96, 2.0, 2.12, 2.25,\n\t\t2.37, 2.50, 2.62, 2.75, 2.87, 3.0, 3.2, 3.4, 3.6, 3.8,\n\t\t4.0, 4.3, 4.7, 4.9, 5.0, 5.5, 6.0, 6.5, 6.8, 7.0,\n\t\t7.3, 7.5, 7.8, 8.0, 8.4, 8.7, 9.0, 9.4, 9.6, 9.8,\n\t\t10.0\n\t];\n\n\t/**\n\t * Identity matrix values.\n\t * @property IDENTITY_MATRIX\n\t * @type Array\n\t * @protected\n\t * @static\n\t **/\n\tColorMatrix.IDENTITY_MATRIX = [\n\t\t1,0,0,0,0,\n\t\t0,1,0,0,0,\n\t\t0,0,1,0,0,\n\t\t0,0,0,1,0,\n\t\t0,0,0,0,1\n\t];\n\n\t/**\n\t * The constant length of a color matrix.\n\t * @property LENGTH\n\t * @type Number\n\t * @protected\n\t * @static\n\t **/\n\tColorMatrix.LENGTH = ColorMatrix.IDENTITY_MATRIX.length;\n\n\n// public methods:\n\t/**\n\t * Resets the instance with the specified values.\n\t * @method setColor\n\t * @param {Number} brightness\n\t * @param {Number} contrast\n\t * @param {Number} saturation\n\t * @param {Number} hue\n\t * @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tp.setColor = function(brightness,contrast,saturation,hue) {\n\t\treturn this.reset().adjustColor(brightness,contrast,saturation,hue);\n\t};\n\n\t/**\n\t * Resets the matrix to identity values.\n\t * @method reset\n\t * @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t */\n\tp.reset = function() {\n\t\treturn this.copy(ColorMatrix.IDENTITY_MATRIX);\n\t};\n\n\t/**\n\t * Shortcut method to adjust brightness, contrast, saturation and hue.\n\t * Equivalent to calling adjustHue(hue), adjustContrast(contrast),\n\t * adjustBrightness(brightness), adjustSaturation(saturation), in that order.\n\t * @method adjustColor\n\t * @param {Number} brightness\n\t * @param {Number} contrast\n\t * @param {Number} saturation\n\t * @param {Number} hue\n\t * @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.adjustColor = function(brightness,contrast,saturation,hue) {\n\t\tthis.adjustHue(hue);\n\t\tthis.adjustContrast(contrast);\n\t\tthis.adjustBrightness(brightness);\n\t\treturn this.adjustSaturation(saturation);\n\t};\n\n\t/**\n\t * Adjusts the brightness of pixel color by adding the specified value to the red, green and blue channels.\n\t * Positive values will make the image brighter, negative values will make it darker.\n\t * @method adjustBrightness\n\t * @param {Number} value A value between -255 & 255 that will be added to the RGB channels.\n\t * @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.adjustBrightness = function(value) {\n\t\tif (value == 0 || isNaN(value)) { return this; }\n\t\tvalue = this._cleanValue(value,255);\n\t\tthis._multiplyMatrix([\n\t\t\t1,0,0,0,value,\n\t\t\t0,1,0,0,value,\n\t\t\t0,0,1,0,value,\n\t\t\t0,0,0,1,0,\n\t\t\t0,0,0,0,1\n\t\t]);\n\t\treturn this;\n\t};\n\n\t/**\n\t * Adjusts the contrast of pixel color.\n\t * Positive values will increase contrast, negative values will decrease contrast.\n\t * @method adjustContrast\n\t * @param {Number} value A value between -100 & 100.\n\t * @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.adjustContrast = function(value) {\n\t\tif (value == 0 || isNaN(value)) { return this; }\n\t\tvalue = this._cleanValue(value,100);\n\t\tvar x;\n\t\tif (value<0) {\n\t\t\tx = 127+value/100*127;\n\t\t} else {\n\t\t\tx = value%1;\n\t\t\tif (x == 0) {\n\t\t\t\tx = ColorMatrix.DELTA_INDEX[value];\n\t\t\t} else {\n\t\t\t\tx = ColorMatrix.DELTA_INDEX[(value<<0)]*(1-x)+ColorMatrix.DELTA_INDEX[(value<<0)+1]*x; // use linear interpolation for more granularity.\n\t\t\t}\n\t\t\tx = x*127+127;\n\t\t}\n\t\tthis._multiplyMatrix([\n\t\t\tx/127,0,0,0,0.5*(127-x),\n\t\t\t0,x/127,0,0,0.5*(127-x),\n\t\t\t0,0,x/127,0,0.5*(127-x),\n\t\t\t0,0,0,1,0,\n\t\t\t0,0,0,0,1\n\t\t]);\n\t\treturn this;\n\t};\n\n\t/**\n\t * Adjusts the color saturation of the pixel.\n\t * Positive values will increase saturation, negative values will decrease saturation (trend towards greyscale).\n\t * @method adjustSaturation\n\t * @param {Number} value A value between -100 & 100.\n\t * @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.adjustSaturation = function(value) {\n\t\tif (value == 0 || isNaN(value)) { return this; }\n\t\tvalue = this._cleanValue(value,100);\n\t\tvar x = 1+((value > 0) ? 3*value/100 : value/100);\n\t\tvar lumR = 0.3086;\n\t\tvar lumG = 0.6094;\n\t\tvar lumB = 0.0820;\n\t\tthis._multiplyMatrix([\n\t\t\tlumR*(1-x)+x,lumG*(1-x),lumB*(1-x),0,0,\n\t\t\tlumR*(1-x),lumG*(1-x)+x,lumB*(1-x),0,0,\n\t\t\tlumR*(1-x),lumG*(1-x),lumB*(1-x)+x,0,0,\n\t\t\t0,0,0,1,0,\n\t\t\t0,0,0,0,1\n\t\t]);\n\t\treturn this;\n\t};\n\n\n\t/**\n\t * Adjusts the hue of the pixel color.\n\t * @method adjustHue\n\t * @param {Number} value A value between -180 & 180.\n\t * @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.adjustHue = function(value) {\n\t\tif (value == 0 || isNaN(value)) { return this; }\n\t\tvalue = this._cleanValue(value,180)/180*Math.PI;\n\t\tvar cosVal = Math.cos(value);\n\t\tvar sinVal = Math.sin(value);\n\t\tvar lumR = 0.213;\n\t\tvar lumG = 0.715;\n\t\tvar lumB = 0.072;\n\t\tthis._multiplyMatrix([\n\t\t\tlumR+cosVal*(1-lumR)+sinVal*(-lumR),lumG+cosVal*(-lumG)+sinVal*(-lumG),lumB+cosVal*(-lumB)+sinVal*(1-lumB),0,0,\n\t\t\tlumR+cosVal*(-lumR)+sinVal*(0.143),lumG+cosVal*(1-lumG)+sinVal*(0.140),lumB+cosVal*(-lumB)+sinVal*(-0.283),0,0,\n\t\t\tlumR+cosVal*(-lumR)+sinVal*(-(1-lumR)),lumG+cosVal*(-lumG)+sinVal*(lumG),lumB+cosVal*(1-lumB)+sinVal*(lumB),0,0,\n\t\t\t0,0,0,1,0,\n\t\t\t0,0,0,0,1\n\t\t]);\n\t\treturn this;\n\t};\n\n\t/**\n\t * Concatenates (multiplies) the specified matrix with this one.\n\t * @method concat\n\t * @param {Array} matrix An array or ColorMatrix instance.\n\t * @return {ColorMatrix} The ColorMatrix instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t **/\n\tp.concat = function(matrix) {\n\t\tmatrix = this._fixMatrix(matrix);\n\t\tif (matrix.length != ColorMatrix.LENGTH) { return this; }\n\t\tthis._multiplyMatrix(matrix);\n\t\treturn this;\n\t};\n\n\t/**\n\t * Returns a clone of this ColorMatrix.\n\t * @method clone\n\t * @return {ColorMatrix} A clone of this ColorMatrix.\n\t **/\n\tp.clone = function() {\n\t\treturn (new ColorMatrix()).copy(this);\n\t};\n\n\t/**\n\t * Return a length 25 (5x5) array instance containing this matrix's values.\n\t * @method toArray\n\t * @return {Array} An array holding this matrix's values.\n\t **/\n\tp.toArray = function() {\n\t\tvar arr = [];\n\t\tfor (var i= 0, l=ColorMatrix.LENGTH; i ColorMatrix.LENGTH) {\n\t\t\tmatrix = matrix.slice(0,ColorMatrix.LENGTH);\n\t\t}\n\t\treturn matrix;\n\t};\n\n\n\tcreatejs.ColorMatrix = ColorMatrix;\n}());\n\n//##############################################################################\n// ColorMatrixFilter.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * Allows you to carry out complex color operations such as modifying saturation, brightness, or inverting. See the\n\t * {{#crossLink \"ColorMatrix\"}}{{/crossLink}} for more information on changing colors. For an easier color transform,\n\t * consider the {{#crossLink \"ColorFilter\"}}{{/crossLink}}.\n\t *\n\t *

Example

\n\t * This example creates a red circle, inverts its hue, and then saturates it to brighten it up.\n\t *\n\t * var shape = new createjs.Shape().set({x:100,y:100});\n\t * shape.graphics.beginFill(\"#ff0000\").drawCircle(0,0,50);\n\t *\n\t * var matrix = new createjs.ColorMatrix().adjustHue(180).adjustSaturation(100);\n\t * shape.filters = [\n\t * new createjs.ColorMatrixFilter(matrix)\n\t * ];\n\t *\n\t * shape.cache(-50, -50, 100, 100);\n\t *\n\t * See {{#crossLink \"Filter\"}}{{/crossLink}} for an more information on applying filters.\n\t * @class ColorMatrixFilter\n\t * @constructor\n\t * @extends Filter\n\t * @param {Array | ColorMatrix} matrix A 4x5 matrix describing the color operation to perform. See also the {{#crossLink \"ColorMatrix\"}}{{/crossLink}}\n\t * class.\n\t **/\n\tfunction ColorMatrixFilter(matrix) {\n\t\tthis.Filter_constructor();\n\n\t// public properties:\n\t\t/**\n\t\t * A 4x5 matrix describing the color operation to perform. See also the {{#crossLink \"ColorMatrix\"}}{{/crossLink}}\n\t\t * @property matrix\n\t\t * @type Array | ColorMatrix\n\t\t **/\n\t\tthis.matrix = matrix;\n\n\t\tthis.FRAG_SHADER_BODY = (\n\t\t\t\"uniform mat4 uColorMatrix;\" +\n\t\t\t\"uniform vec4 uColorMatrixOffset;\" +\n\n\t\t\t\"void main(void) {\" +\n\t\t\t\t\"vec4 color = texture2D(uSampler, vRenderCoord);\" +\n\n\t\t\t\t\"mat4 m = uColorMatrix;\" +\n\t\t\t\t\"vec4 newColor = vec4(0,0,0,0);\" +\n\t\t\t\t\"newColor.r = color.r*m[0][0] + color.g*m[0][1] + color.b*m[0][2] + color.a*m[0][3];\" +\n\t\t\t\t\"newColor.g = color.r*m[1][0] + color.g*m[1][1] + color.b*m[1][2] + color.a*m[1][3];\" +\n\t\t\t\t\"newColor.b = color.r*m[2][0] + color.g*m[2][1] + color.b*m[2][2] + color.a*m[2][3];\" +\n\t\t\t\t\"newColor.a = color.r*m[3][0] + color.g*m[3][1] + color.b*m[3][2] + color.a*m[3][3];\" +\n\n\t\t\t\t\"gl_FragColor = newColor + uColorMatrixOffset;\" +\n\t\t\t\"}\"\n\t\t);\n\t}\n\tvar p = createjs.extend(ColorMatrixFilter, createjs.Filter);\n\n\t// TODO: deprecated\n\t// p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details.\n\n\t/** docced in super class **/\n\tp.shaderParamSetup = function(gl, stage, shaderProgram) {\n\t\tvar mat = this.matrix;\n\t\tvar colorMatrix = new Float32Array([\n\t\t\tmat[0],mat[1],mat[2],mat[3],\n\t\t\tmat[5],mat[6],mat[7],mat[8],\n\t\t\tmat[10],mat[11],mat[12],mat[13],\n\t\t\tmat[15],mat[16],mat[17],mat[18]\n\t\t]);\n\n\t\tgl.uniformMatrix4fv(\n\t\t\tgl.getUniformLocation(shaderProgram, \"uColorMatrix\"),\n\t\t\tfalse, colorMatrix\n\t\t);\n\t\tgl.uniform4f(\n\t\t\tgl.getUniformLocation(shaderProgram, \"uColorMatrixOffset\"),\n\t\t\tmat[4]/255, mat[9]/255, mat[14]/255, mat[19]/255\n\t\t);\n\t};\n\n// public methods:\n\t/** docced in super class **/\n\tp.toString = function() {\n\t\treturn \"[ColorMatrixFilter]\";\n\t};\n\n\t/** docced in super class **/\n\tp.clone = function() {\n\t\treturn new ColorMatrixFilter(this.matrix);\n\t};\n\n// private methods:\n\t/** docced in super class **/\n\tp._applyFilter = function(imageData) { \n\t\tvar data = imageData.data;\n\t\tvar l = data.length;\n\t\tvar r,g,b,a;\n\t\tvar mtx = this.matrix;\n\t\tvar m0 = mtx[0], m1 = mtx[1], m2 = mtx[2], m3 = mtx[3], m4 = mtx[4];\n\t\tvar m5 = mtx[5], m6 = mtx[6], m7 = mtx[7], m8 = mtx[8], m9 = mtx[9];\n\t\tvar m10 = mtx[10], m11 = mtx[11], m12 = mtx[12], m13 = mtx[13], m14 = mtx[14];\n\t\tvar m15 = mtx[15], m16 = mtx[16], m17 = mtx[17], m18 = mtx[18], m19 = mtx[19];\n\n\t\tfor (var i=0; iExample\n *\n * var stage = new createjs.Stage(\"canvasId\");\n * createjs.Touch.enable(stage);\n *\n * Note: It is important to disable Touch on a stage that you are no longer using:\n *\n * createjs.Touch.disable(stage);\n *\n * @class Touch\n * @static\n **/\n\tfunction Touch() {\n\t\tthrow \"Touch cannot be instantiated\";\n\t}\n\n\n// public static methods:\n\t/**\n\t * Returns `true` if touch is supported in the current browser.\n\t * @method isSupported\n\t * @return {Boolean} Indicates whether touch is supported in the current browser.\n\t * @static\n\t **/\n\tTouch.isSupported = function() {\n\t\treturn\t!!(('ontouchstart' in window) // iOS & Android\n\t\t\t|| (window.navigator['msPointerEnabled'] && window.navigator['msMaxTouchPoints'] > 0) // IE10\n\t\t\t|| (window.navigator['pointerEnabled'] && window.navigator['maxTouchPoints'] > 0)); // IE11+\n\t};\n\n\t/**\n\t * Enables touch interaction for the specified EaselJS {{#crossLink \"Stage\"}}{{/crossLink}}. Currently supports iOS\n\t * (and compatible browsers, such as modern Android browsers), and IE10/11. Supports both single touch and\n\t * multi-touch modes. Extends the EaselJS {{#crossLink \"MouseEvent\"}}{{/crossLink}} model, but without support for\n\t * double click or over/out events. See the MouseEvent {{#crossLink \"MouseEvent/pointerId:property\"}}{{/crossLink}}\n\t * for more information.\n\t * @method enable\n\t * @param {Stage} stage The {{#crossLink \"Stage\"}}{{/crossLink}} to enable touch on.\n\t * @param {Boolean} [singleTouch=false] If `true`, only a single touch will be active at a time.\n\t * @param {Boolean} [allowDefault=false] If `true`, then default gesture actions (ex. scrolling, zooming) will be\n\t * allowed when the user is interacting with the target canvas.\n\t * @return {Boolean} Returns `true` if touch was successfully enabled on the target stage.\n\t * @static\n\t **/\n\tTouch.enable = function(stage, singleTouch, allowDefault) {\n\t\tif (!stage || !stage.canvas || !Touch.isSupported()) { return false; }\n\t\tif (stage.__touch) { return true; }\n\n\t\t// inject required properties on stage:\n\t\tstage.__touch = {pointers:{}, multitouch:!singleTouch, preventDefault:!allowDefault, count:0};\n\n\t\t// note that in the future we may need to disable the standard mouse event model before adding\n\t\t// these to prevent duplicate calls. It doesn't seem to be an issue with iOS devices though.\n\t\tif ('ontouchstart' in window) { Touch._IOS_enable(stage); }\n\t\telse if (window.navigator['msPointerEnabled'] || window.navigator[\"pointerEnabled\"]) { Touch._IE_enable(stage); }\n\t\treturn true;\n\t};\n\n\t/**\n\t * Removes all listeners that were set up when calling `Touch.enable()` on a stage.\n\t * @method disable\n\t * @param {Stage} stage The {{#crossLink \"Stage\"}}{{/crossLink}} to disable touch on.\n\t * @static\n\t **/\n\tTouch.disable = function(stage) {\n\t\tif (!stage) { return; }\n\t\tif ('ontouchstart' in window) { Touch._IOS_disable(stage); }\n\t\telse if (window.navigator['msPointerEnabled'] || window.navigator[\"pointerEnabled\"]) { Touch._IE_disable(stage); }\n\t\t\n\t\tdelete stage.__touch;\n\t};\n\n\n// Private static methods:\n\t/**\n\t * @method _IOS_enable\n\t * @protected\n\t * @param {Stage} stage\n\t * @static\n\t **/\n\tTouch._IOS_enable = function(stage) {\n\t\tvar canvas = stage.canvas;\n\t\tvar f = stage.__touch.f = function(e) { Touch._IOS_handleEvent(stage,e); };\n\t\tcanvas.addEventListener(\"touchstart\", f, false);\n\t\tcanvas.addEventListener(\"touchmove\", f, false);\n\t\tcanvas.addEventListener(\"touchend\", f, false);\n\t\tcanvas.addEventListener(\"touchcancel\", f, false);\n\t};\n\n\t/**\n\t * @method _IOS_disable\n\t * @protected\n\t * @param {Stage} stage\n\t * @static\n\t **/\n\tTouch._IOS_disable = function(stage) {\n\t\tvar canvas = stage.canvas;\n\t\tif (!canvas) { return; }\n\t\tvar f = stage.__touch.f;\n\t\tcanvas.removeEventListener(\"touchstart\", f, false);\n\t\tcanvas.removeEventListener(\"touchmove\", f, false);\n\t\tcanvas.removeEventListener(\"touchend\", f, false);\n\t\tcanvas.removeEventListener(\"touchcancel\", f, false);\n\t};\n\n\t/**\n\t * @method _IOS_handleEvent\n\t * @param {Stage} stage\n\t * @param {Object} e The event to handle\n\t * @protected\n\t * @static\n\t **/\n\tTouch._IOS_handleEvent = function(stage, e) {\n\t\tif (!stage) { return; }\n\t\tif (stage.__touch.preventDefault) { e.preventDefault&&e.preventDefault(); }\n\t\tvar touches = e.changedTouches;\n\t\tvar type = e.type;\n\t\tfor (var i= 0,l=touches.length; i\n\t\t * \t

capture phase: starting from the top parent to the target

\n\t\t * \t

at target phase: currently being dispatched from the target

\n\t\t * \t

bubbling phase: from the target to the top parent

\n\t\t * \n\t\t * @property eventPhase\n\t\t * @type Number\n\t\t * @default 0\n\t\t * @readonly\n\t\t*/\n\t\tthis.eventPhase = 0;\n\t\n\t\t/**\n\t\t * Indicates whether the event will bubble through the display list.\n\t\t * @property bubbles\n\t\t * @type Boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t*/\n\t\tthis.bubbles = !!bubbles;\n\t\n\t\t/**\n\t\t * Indicates whether the default behaviour of this event can be cancelled via\n\t\t * {{#crossLink \"Event/preventDefault\"}}{{/crossLink}}. This is set via the Event constructor.\n\t\t * @property cancelable\n\t\t * @type Boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t*/\n\t\tthis.cancelable = !!cancelable;\n\t\n\t\t/**\n\t\t * The epoch time at which this event was created.\n\t\t * @property timeStamp\n\t\t * @type Number\n\t\t * @default 0\n\t\t * @readonly\n\t\t*/\n\t\tthis.timeStamp = (new Date()).getTime();\n\t\n\t\t/**\n\t\t * Indicates if {{#crossLink \"Event/preventDefault\"}}{{/crossLink}} has been called\n\t\t * on this event.\n\t\t * @property defaultPrevented\n\t\t * @type Boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t*/\n\t\tthis.defaultPrevented = false;\n\t\n\t\t/**\n\t\t * Indicates if {{#crossLink \"Event/stopPropagation\"}}{{/crossLink}} or\n\t\t * {{#crossLink \"Event/stopImmediatePropagation\"}}{{/crossLink}} has been called on this event.\n\t\t * @property propagationStopped\n\t\t * @type Boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t*/\n\t\tthis.propagationStopped = false;\n\t\n\t\t/**\n\t\t * Indicates if {{#crossLink \"Event/stopImmediatePropagation\"}}{{/crossLink}} has been called\n\t\t * on this event.\n\t\t * @property immediatePropagationStopped\n\t\t * @type Boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t*/\n\t\tthis.immediatePropagationStopped = false;\n\t\t\n\t\t/**\n\t\t * Indicates if {{#crossLink \"Event/remove\"}}{{/crossLink}} has been called on this event.\n\t\t * @property removed\n\t\t * @type Boolean\n\t\t * @default false\n\t\t * @readonly\n\t\t*/\n\t\tthis.removed = false;\n\t}\n\tvar p = Event.prototype;\n\n// public methods:\n\t/**\n\t * Sets {{#crossLink \"Event/defaultPrevented\"}}{{/crossLink}} to true if the event is cancelable.\n\t * Mirrors the DOM level 2 event standard. In general, cancelable events that have `preventDefault()` called will\n\t * cancel the default behaviour associated with the event.\n\t * @method preventDefault\n\t **/\n\tp.preventDefault = function() {\n\t\tthis.defaultPrevented = this.cancelable&&true;\n\t};\n\n\t/**\n\t * Sets {{#crossLink \"Event/propagationStopped\"}}{{/crossLink}} to true.\n\t * Mirrors the DOM event standard.\n\t * @method stopPropagation\n\t **/\n\tp.stopPropagation = function() {\n\t\tthis.propagationStopped = true;\n\t};\n\n\t/**\n\t * Sets {{#crossLink \"Event/propagationStopped\"}}{{/crossLink}} and\n\t * {{#crossLink \"Event/immediatePropagationStopped\"}}{{/crossLink}} to true.\n\t * Mirrors the DOM event standard.\n\t * @method stopImmediatePropagation\n\t **/\n\tp.stopImmediatePropagation = function() {\n\t\tthis.immediatePropagationStopped = this.propagationStopped = true;\n\t};\n\t\n\t/**\n\t * Causes the active listener to be removed via removeEventListener();\n\t * \n\t * \t\tmyBtn.addEventListener(\"click\", function(evt) {\n\t * \t\t\t// do stuff...\n\t * \t\t\tevt.remove(); // removes this listener.\n\t * \t\t});\n\t * \n\t * @method remove\n\t **/\n\tp.remove = function() {\n\t\tthis.removed = true;\n\t};\n\t\n\t/**\n\t * Returns a clone of the Event instance.\n\t * @method clone\n\t * @return {Event} a clone of the Event instance.\n\t **/\n\tp.clone = function() {\n\t\treturn new Event(this.type, this.bubbles, this.cancelable);\n\t};\n\t\n\t/**\n\t * Provides a chainable shortcut method for setting a number of properties on the instance.\n\t *\n\t * @method set\n\t * @param {Object} props A generic object containing properties to copy to the instance.\n\t * @return {Event} Returns the instance the method is called on (useful for chaining calls.)\n\t * @chainable\n\t*/\n\tp.set = function(props) {\n\t\tfor (var n in props) { this[n] = props[n]; }\n\t\treturn this;\n\t};\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t **/\n\tp.toString = function() {\n\t\treturn \"[Event (type=\"+this.type+\")]\";\n\t};\n\n\tcreatejs.Event = Event;\n}());\n\n//##############################################################################\n// EventDispatcher.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor:\n\t/**\n\t * EventDispatcher provides methods for managing queues of event listeners and dispatching events.\n\t *\n\t * You can either extend EventDispatcher or mix its methods into an existing prototype or instance by using the\n\t * EventDispatcher {{#crossLink \"EventDispatcher/initialize\"}}{{/crossLink}} method.\n\t * \n\t * Together with the CreateJS Event class, EventDispatcher provides an extended event model that is based on the\n\t * DOM Level 2 event model, including addEventListener, removeEventListener, and dispatchEvent. It supports\n\t * bubbling / capture, preventDefault, stopPropagation, stopImmediatePropagation, and handleEvent.\n\t * \n\t * EventDispatcher also exposes a {{#crossLink \"EventDispatcher/on\"}}{{/crossLink}} method, which makes it easier\n\t * to create scoped listeners, listeners that only run once, and listeners with associated arbitrary data. The \n\t * {{#crossLink \"EventDispatcher/off\"}}{{/crossLink}} method is merely an alias to\n\t * {{#crossLink \"EventDispatcher/removeEventListener\"}}{{/crossLink}}.\n\t * \n\t * Another addition to the DOM Level 2 model is the {{#crossLink \"EventDispatcher/removeAllEventListeners\"}}{{/crossLink}}\n\t * method, which can be used to listeners for all events, or listeners for a specific event. The Event object also \n\t * includes a {{#crossLink \"Event/remove\"}}{{/crossLink}} method which removes the active listener.\n\t *\n\t *

Example

null if the current position is 2.

\n\t * \t\t

\"first\" if the current position is 4.

\n\t * \t\t

\"first\" if the current position is 7.

\n\t * \t\t

\"second\" if the current position is 15.

\n\t *

\n\t * @property currentLabel\n\t * @type String\n\t * @readonly\n\t **/\n\t \n\ttry {\n\t\tObject.defineProperties(p, {\n\t\t\tpaused: { set: p._setPaused, get: p._getPaused },\n\t\t\tcurrentLabel: { get: p._getCurrentLabel }\n\t\t});\n\t} catch (e) {}\n\n// public methods:\n\t/**\n\t * Advances the tween by a specified amount.\n\t * @method advance\n\t * @param {Number} delta The amount to advance in milliseconds (or ticks if useTicks is true). Negative values are supported.\n\t * @param {Number} [ignoreActions=false] If true, actions will not be executed due to this change in position.\n\t */\n\tp.advance = function(delta, ignoreActions) {\n\t\tthis.setPosition(this.rawPosition+delta*this.timeScale, ignoreActions);\n\t};\n\t\n\t/**\n\t * Advances the tween to a specified position.\n\t * @method setPosition\n\t * @param {Number} rawPosition The raw position to seek to in milliseconds (or ticks if useTicks is true).\n\t * @param {Boolean} [ignoreActions=false] If true, do not run any actions that would be triggered by this operation.\n\t * @param {Boolean} [jump=false] If true, only actions at the new position will be run. If false, actions between the old and new position are run.\n\t * @param {Function} [callback] Primarily for use with MovieClip, this callback is called after properties are updated, but before actions are run.\n\t */\n\tp.setPosition = function(rawPosition, ignoreActions, jump, callback) {\n\t\tvar d=this.duration, loopCount=this.loop, prevRawPos = this.rawPosition;\n\t\tvar loop=0, t=0, end=false;\n\t\t\n\t\t// normalize position:\n\t\tif (rawPosition < 0) { rawPosition = 0; }\n\t\t\n\t\tif (d === 0) {\n\t\t\t// deal with 0 length tweens.\n\t\t\tend = true;\n\t\t\tif (prevRawPos !== -1) { return end; } // we can avoid doing anything else if we're already at 0.\n\t\t} else {\n\t\t\tloop = rawPosition/d|0;\n\t\t\tt = rawPosition-loop*d;\n\t\t\t\n\t\t\tend = (loopCount !== -1 && rawPosition >= loopCount*d+d);\n\t\t\tif (end) { rawPosition = (t=d)*(loop=loopCount)+d; }\n\t\t\tif (rawPosition === prevRawPos) { return end; } // no need to update\n\t\t\t\n\t\t\tvar rev = !this.reversed !== !(this.bounce && loop%2); // current loop is reversed\n\t\t\tif (rev) { t = d-t; }\n\t\t}\n\t\t\n\t\t// set this in advance in case an action modifies position:\n\t\tthis.position = t;\n\t\tthis.rawPosition = rawPosition;\n\t\t\n\t\tthis._updatePosition(jump, end);\n\t\tif (end) { this.paused = true; }\n\t\t\n\t\tcallback&&callback(this);\n\t\t\n\t\tif (!ignoreActions) { this._runActions(prevRawPos, rawPosition, jump, !jump && prevRawPos === -1); }\n\t\t\n\t\tthis.dispatchEvent(\"change\");\n\t\tif (end) { this.dispatchEvent(\"complete\"); }\n\t};\n\t\n\t/**\n\t * Calculates a normalized position based on a raw position. For example, given a tween with a duration of 3000ms set to loop:\n\t * \tconsole.log(myTween.calculatePosition(3700); // 700\n\t * @method calculatePosition\n\t * @param {Number} rawPosition A raw position.\n\t */\n\tp.calculatePosition = function(rawPosition) {\n\t\t// largely duplicated from setPosition, but necessary to avoid having to instantiate generic objects to pass values (end, loop, position) back.\n\t\tvar d=this.duration, loopCount=this.loop, loop=0, t=0;\n\t\t\n\t\tif (d===0) { return 0; }\n\t\tif (loopCount !== -1 && rawPosition >= loopCount*d+d) { t = d; loop = loopCount } // end\n\t\telse if (rawPosition < 0) { t = 0; }\n\t\telse { loop = rawPosition/d|0; t = rawPosition-loop*d; }\n\t\t\n\t\tvar rev = !this.reversed !== !(this.bounce && loop%2); // current loop is reversed\n\t\treturn rev ? d-t : t;\n\t};\n\t\n\t/**\n\t * Returns a list of the labels defined on this tween sorted by position.\n\t * @method getLabels\n\t * @return {Array[Object]} A sorted array of objects with label and position properties.\n\t **/\n\tp.getLabels = function() {\n\t\tvar list = this._labelList;\n\t\tif (!list) {\n\t\t\tlist = this._labelList = [];\n\t\t\tvar labels = this._labels;\n\t\t\tfor (var n in labels) {\n\t\t\t\tlist.push({label:n, position:labels[n]});\n\t\t\t}\n\t\t\tlist.sort(function (a,b) { return a.position- b.position; });\n\t\t}\n\t\treturn list;\n\t};\n\t\n\n\t/**\n\t * Defines labels for use with gotoAndPlay/Stop. Overwrites any previously set labels.\n\t * @method setLabels\n\t * @param {Object} labels An object defining labels for using {{#crossLink \"Timeline/gotoAndPlay\"}}{{/crossLink}}/{{#crossLink \"Timeline/gotoAndStop\"}}{{/crossLink}}\n\t * in the form `{myLabelName:time}` where time is in milliseconds (or ticks if `useTicks` is `true`).\n\t **/\n\tp.setLabels = function(labels) {\n\t\tthis._labels = labels;\n\t\tthis._labelList = null;\n\t};\n\n\t/**\n\t * Adds a label that can be used with {{#crossLink \"Timeline/gotoAndPlay\"}}{{/crossLink}}/{{#crossLink \"Timeline/gotoAndStop\"}}{{/crossLink}}.\n\t * @method addLabel\n\t * @param {String} label The label name.\n\t * @param {Number} position The position this label represents.\n\t **/\n\tp.addLabel = function(label, position) {\n\t\tif (!this._labels) { this._labels = {}; }\n\t\tthis._labels[label] = position;\n\t\tvar list = this._labelList;\n\t\tif (list) {\n\t\t\tfor (var i= 0,l=list.length; i Tween\" : \"Timeline\", \"run\", startRawPos, endRawPos, jump, includeStart);\n\t\t\n\t\t// if we don't have any actions, and we're not a Timeline, then return:\n\t\t// TODO: a cleaner way to handle this would be to override this method in Tween, but I'm not sure it's worth the overhead.\n\t\tif (!this._actionHead && !this.tweens) { return; } \n\t\t\n\t\tvar d=this.duration, reversed=this.reversed, bounce=this.bounce, loopCount=this.loop;\n\t\tvar loop0, loop1, t0, t1;\n\t\t\n\t\tif (d === 0) {\n\t\t\t// deal with 0 length tweens:\n\t\t\tloop0 = loop1 = t0 = t1 = 0;\n\t\t\treversed = bounce = false;\n\t\t} else {\n\t\t\tloop0=startRawPos/d|0;\n\t\t\tloop1=endRawPos/d|0;\n\t\t\tt0=startRawPos-loop0*d;\n\t\t\tt1=endRawPos-loop1*d;\n\t\t}\n\t\t\n\t\t// catch positions that are past the end:\n\t\tif (loopCount !== -1) {\n\t\t\tif (loop1 > loopCount) { t1=d; loop1=loopCount; }\n\t\t\tif (loop0 > loopCount) { t0=d; loop0=loopCount; }\n\t\t}\n\t\t\n\t\t// special cases:\n\t\tif (jump) { return this._runActionsRange(t1, t1, jump, includeStart); } // jump.\n\t\telse if (loop0 === loop1 && t0 === t1 && !jump && !includeStart) { return; } // no actions if the position is identical and we aren't including the start\n\t\telse if (loop0 === -1) { loop0 = t0 = 0; } // correct the -1 value for first advance, important with useTicks.\n\t\t\n\t\tvar dir = (startRawPos <= endRawPos), loop = loop0;\n\t\tdo {\n\t\t\tvar rev = !reversed !== !(bounce && loop % 2);\n\n\t\t\tvar start = (loop === loop0) ? t0 : dir ? 0 : d;\n\t\t\tvar end = (loop === loop1) ? t1 : dir ? d : 0;\n\t\t\t\n\t\t\tif (rev) {\n\t\t\t\tstart = d - start;\n\t\t\t\tend = d - end;\n\t\t\t}\n\t\t\t\n\t\t\tif (bounce && loop !== loop0 && start === end) { /* bounced onto the same time/frame, don't re-execute end actions */ }\n\t\t\telse if (this._runActionsRange(start, end, jump, includeStart || (loop !== loop0 && !bounce))) { return true; }\n\t\t\t\t\n\t\t\tincludeStart = false;\n\t\t} while ((dir && ++loop <= loop1) || (!dir && --loop >= loop1));\n\t};\n\t\n\tp._runActionsRange = function(startPos, endPos, jump, includeStart) {\n\t\t// abstract\n\t};\n\n\tcreatejs.AbstractTween = createjs.promote(AbstractTween, \"EventDispatcher\");\n}());\n\n//##############################################################################\n// Tween.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\n// constructor\n\t/**\n\t * Tweens properties for a single target. Methods can be chained to create complex animation sequences:\n\t *\n\t *

Example

\n\t *\n\t *\tcreatejs.Tween.get(target)\n\t *\t\t.wait(500)\n\t *\t\t.to({alpha:0, visible:false}, 1000)\n\t *\t\t.call(handleComplete);\n\t *\n\t * Multiple tweens can share a target, however if they affect the same properties there could be unexpected\n\t * behaviour. To stop all tweens on an object, use {{#crossLink \"Tween/removeTweens\"}}{{/crossLink}} or pass `override:true`\n\t * in the props argument.\n\t *\n\t * \tcreatejs.Tween.get(target, {override:true}).to({x:100});\n\t *\n\t * Subscribe to the {{#crossLink \"Tween/change:event\"}}{{/crossLink}} event to be notified when the tween position changes.\n\t *\n\t * \tcreatejs.Tween.get(target, {override:true}).to({x:100}).addEventListener(\"change\", handleChange);\n\t * \tfunction handleChange(event) {\n\t * \t\t// The tween changed.\n\t * \t}\n\t *\n\t * See the {{#crossLink \"Tween/get\"}}{{/crossLink}} method also.\n\t * @class Tween\n\t * @param {Object} target The target object that will have its properties tweened.\n\t * @param {Object} [props] The configuration properties to apply to this instance (ex. `{loop:-1, paused:true}`).\n\t * Supported props are listed below. These props are set on the corresponding instance properties except where\n\t * specified.\n\t * @param {boolean} [props.useTicks=false] See the {{#crossLink \"AbstractTween/useTicks:property\"}}{{/crossLink}} property for more information.\n\t * @param {boolean} [props.ignoreGlobalPause=false] See the {{#crossLink \"AbstractTween/ignoreGlobalPause:property\"}}{{/crossLink}} for more information.\n\t * @param {number|boolean} [props.loop=0] See the {{#crossLink \"AbstractTween/loop:property\"}}{{/crossLink}} for more information.\n\t * @param {boolean} [props.reversed=false] See the {{#crossLink \"AbstractTween/reversed:property\"}}{{/crossLink}} for more information.\n\t * @param {boolean} [props.bounce=false] See the {{#crossLink \"AbstractTween/bounce:property\"}}{{/crossLink}} for more information.\n\t * @param {number} [props.timeScale=1] See the {{#crossLink \"AbstractTween/timeScale:property\"}}{{/crossLink}} for more information.\n\t * @param {object} [props.pluginData] See the {{#crossLink \"Tween/pluginData:property\"}}{{/crossLink}} for more information.\n\t * @param {boolean} [props.paused=false] See the {{#crossLink \"AbstractTween/paused:property\"}}{{/crossLink}} for more information.\n\t * @param {number} [props.position=0] The initial position for this tween. See {{#crossLink \"AbstractTween/position:property\"}}{{/crossLink}}\n\t * @param {Function} [props.onChange] Adds the specified function as a listener to the {{#crossLink \"AbstractTween/change:event\"}}{{/crossLink}} event\n\t * @param {Function} [props.onComplete] Adds the specified function as a listener to the {{#crossLink \"AbstractTween/complete:event\"}}{{/crossLink}} event\n\t * @param {boolean} [props.override=false] Removes all existing tweens for the target when set to `true`.\n\t * \n\t * @extends AbstractTween\n\t * @constructor\n\t */\n\tfunction Tween(target, props) {\n\t\tthis.AbstractTween_constructor(props);\n\t\t\n\t// public properties:\n\t\n\t\t/**\n\t\t * Allows you to specify data that will be used by installed plugins. Each plugin uses this differently, but in general\n\t\t * you specify data by assigning it to a property of `pluginData` with the same name as the plugin.\n\t\t * Note that in many cases, this data is used as soon as the plugin initializes itself for the tween.\n\t\t * As such, this data should be set before the first `to` call in most cases.\n\t\t * @example\n\t\t *\tmyTween.pluginData.SmartRotation = data;\n\t\t * \n\t\t * Most plugins also support a property to disable them for a specific tween. This is typically the plugin name followed by \"_disabled\".\n\t\t * @example\n\t\t *\tmyTween.pluginData.SmartRotation_disabled = true;\n\t\t * \n\t\t * Some plugins also store working data in this object, usually in a property named `_PluginClassName`.\n\t\t * See the documentation for individual plugins for more details.\n\t\t * @property pluginData\n\t\t * @type {Object}\n\t\t */\n\t\tthis.pluginData = null;\n\t\n\t\t/**\n\t\t * The target of this tween. This is the object on which the tweened properties will be changed.\n\t\t * @property target\n\t\t * @type {Object}\n\t\t * @readonly\n\t\t */\n\t\tthis.target = target;\n\t\n\t\t/**\n\t\t * Indicates the tween's current position is within a passive wait.\n\t\t * @property passive\n\t\t * @type {Boolean}\n\t\t * @default false\n\t\t * @readonly\n\t\t **/\n\t\tthis.passive = false;\n\t\t\n\t\t\n\t// private properties:\n\t\n\t\t/**\n\t\t * @property _stepHead\n\t\t * @type {TweenStep}\n\t\t * @protected\n\t\t */\n\t\tthis._stepHead = new TweenStep(null, 0, 0, {}, null, true);\n\t\t\n\t\t/**\n\t\t * @property _stepTail\n\t\t * @type {TweenStep}\n\t\t * @protected\n\t\t */\n\t\tthis._stepTail = this._stepHead;\n\t\t\n\t\t/**\n\t\t * The position within the current step. Used by MovieClip.\n\t\t * @property _stepPosition\n\t\t * @type {Number}\n\t\t * @default 0\n\t\t * @protected\n\t\t */\n\t\tthis._stepPosition = 0;\n\t\t\n\t\t/**\n\t\t * @property _actionHead\n\t\t * @type {TweenAction}\n\t\t * @protected\n\t\t */\n\t\tthis._actionHead = null;\n\t\t\n\t\t/**\n\t\t * @property _actionTail\n\t\t * @type {TweenAction}\n\t\t * @protected\n\t\t */\n\t\tthis._actionTail = null;\n\t\t\n\t\t/**\n\t\t * Plugins added to this tween instance.\n\t\t * @property _plugins\n\t\t * @type Array[Object]\n\t\t * @default null\n\t\t * @protected\n\t\t */\n\t\tthis._plugins = null;\n\t\t\n\t\t/**\n\t\t * Hash for quickly looking up added plugins. Null until a plugin is added.\n\t\t * @property _plugins\n\t\t * @type Object\n\t\t * @default null\n\t\t * @protected\n\t\t */\n\t\tthis._pluginIds = null;\n\t\t\n\t\t/**\n\t\t * Used by plugins to inject new properties.\n\t\t * @property _injected\n\t\t * @type {Object}\n\t\t * @default null\n\t\t * @protected\n\t\t */\n\t\tthis._injected = null;\n\n\t\tif (props) {\n\t\t\tthis.pluginData = props.pluginData;\n\t\t\tif (props.override) { Tween.removeTweens(target); }\n\t\t}\n\t\tif (!this.pluginData) { this.pluginData = {}; }\n\t\t\n\t\tthis._init(props);\n\t};\n\n\tvar p = createjs.extend(Tween, createjs.AbstractTween);\n\n// static properties\n\n\t/**\n\t * Constant returned by plugins to tell the tween not to use default assignment.\n\t * @property IGNORE\n\t * @type Object\n\t * @static\n\t */\n\tTween.IGNORE = {};\n\n\t/**\n\t * @property _listeners\n\t * @type Array[Tween]\n\t * @static\n\t * @protected\n\t */\n\tTween._tweens = [];\n\n\t/**\n\t * @property _plugins\n\t * @type Object\n\t * @static\n\t * @protected\n\t */\n\tTween._plugins = null;\n\t\n\t/**\n\t * @property _tweenHead\n\t * @type Tween\n\t * @static\n\t * @protected\n\t */\n\tTween._tweenHead = null;\n\t\n\t/**\n\t * @property _tweenTail\n\t * @type Tween\n\t * @static\n\t * @protected\n\t */\n\tTween._tweenTail = null;\n\n\n// static methods\t\n\t/**\n\t * Returns a new tween instance. This is functionally identical to using `new Tween(...)`, but may look cleaner\n\t * with the chained syntax of TweenJS.\n\t *

Example

\n\t *\n\t *\tvar tween = createjs.Tween.get(target).to({x:100}, 500);\n\t *\t// equivalent to:\n\t *\tvar tween = new createjs.Tween(target).to({x:100}, 500);\n\t *\n\t * @method get\n\t * @param {Object} target The target object that will have its properties tweened.\n\t * @param {Object} [props] The configuration properties to apply to this instance (ex. `{loop:-1, paused:true}`).\n\t * Supported props are listed below. These props are set on the corresponding instance properties except where\n\t * specified.\n\t * @param {boolean} [props.useTicks=false] See the {{#crossLink \"AbstractTween/useTicks:property\"}}{{/crossLink}} property for more information.\n\t * @param {boolean} [props.ignoreGlobalPause=false] See the {{#crossLink \"AbstractTween/ignoreGlobalPause:property\"}}{{/crossLink}} for more information.\n\t * @param {number|boolean} [props.loop=0] See the {{#crossLink \"AbstractTween/loop:property\"}}{{/crossLink}} for more information.\n\t * @param {boolean} [props.reversed=false] See the {{#crossLink \"AbstractTween/reversed:property\"}}{{/crossLink}} for more information.\n\t * @param {boolean} [props.bounce=false] See the {{#crossLink \"AbstractTween/bounce:property\"}}{{/crossLink}} for more information.\n\t * @param {number} [props.timeScale=1] See the {{#crossLink \"AbstractTween/timeScale:property\"}}{{/crossLink}} for more information.\n\t * @param {object} [props.pluginData] See the {{#crossLink \"Tween/pluginData:property\"}}{{/crossLink}} for more information.\n\t * @param {boolean} [props.paused=false] See the {{#crossLink \"AbstractTween/paused:property\"}}{{/crossLink}} for more information.\n\t * @param {number} [props.position=0] The initial position for this tween. See {{#crossLink \"AbstractTween/position:property\"}}{{/crossLink}}\n\t * @param {Function} [props.onChange] Adds the specified function as a listener to the {{#crossLink \"AbstractTween/change:event\"}}{{/crossLink}} event\n\t * @param {Function} [props.onComplete] Adds the specified function as a listener to the {{#crossLink \"AbstractTween/complete:event\"}}{{/crossLink}} event\n\t * @param {boolean} [props.override=false] Removes all existing tweens for the target when set to `true`.\n\t * @return {Tween} A reference to the created tween.\n\t * @static\n\t */\n\tTween.get = function(target, props) {\n\t\treturn new Tween(target, props);\n\t};\n\n\t/**\n\t * Advances all tweens. This typically uses the {{#crossLink \"Ticker\"}}{{/crossLink}} class, but you can call it\n\t * manually if you prefer to use your own \"heartbeat\" implementation.\n\t * @method tick\n\t * @param {Number} delta The change in time in milliseconds since the last tick. Required unless all tweens have\n\t * `useTicks` set to true.\n\t * @param {Boolean} paused Indicates whether a global pause is in effect. Tweens with {{#crossLink \"Tween/ignoreGlobalPause:property\"}}{{/crossLink}}\n\t * will ignore this, but all others will pause if this is `true`.\n\t * @static\n\t */\n\tTween.tick = function(delta, paused) {\n\t\tvar tween = Tween._tweenHead;\n\t\twhile (tween) {\n\t\t\tvar next = tween._next; // in case it completes and wipes its _next property\n\t\t\tif ((paused && !tween.ignoreGlobalPause) || tween._paused) { /* paused */ }\n\t\t\telse { tween.advance(tween.useTicks?1:delta); }\n\t\t\ttween = next;\n\t\t}\n\t};\n\n\t/**\n\t * Handle events that result from Tween being used as an event handler. This is included to allow Tween to handle\n\t * {{#crossLink \"Ticker/tick:event\"}}{{/crossLink}} events from the createjs {{#crossLink \"Ticker\"}}{{/crossLink}}.\n\t * No other events are handled in Tween.\n\t * @method handleEvent\n\t * @param {Object} event An event object passed in by the {{#crossLink \"EventDispatcher\"}}{{/crossLink}}. Will\n\t * usually be of type \"tick\".\n\t * @private\n\t * @static\n\t * @since 0.4.2\n\t */\n\tTween.handleEvent = function(event) {\n\t\tif (event.type === \"tick\") {\n\t\t\tthis.tick(event.delta, event.paused);\n\t\t}\n\t};\n\n\t/**\n\t * Removes all existing tweens for a target. This is called automatically by new tweens if the `override`\n\t * property is `true`.\n\t * @method removeTweens\n\t * @param {Object} target The target object to remove existing tweens from.\n\t * @static\n\t */\n\tTween.removeTweens = function(target) {\n\t\tif (!target.tweenjs_count) { return; }\n\t\tvar tween = Tween._tweenHead;\n\t\twhile (tween) {\n\t\t\tvar next = tween._next;\n\t\t\tif (tween.target === target) { Tween._register(tween, true); }\n\t\t\ttween = next;\n\t\t}\n\t\ttarget.tweenjs_count = 0;\n\t};\n\n\t/**\n\t * Stop and remove all existing tweens.\n\t * @method removeAllTweens\n\t * @static\n\t * @since 0.4.1\n\t */\n\tTween.removeAllTweens = function() {\n\t\tvar tween = Tween._tweenHead;\n\t\twhile (tween) {\n\t\t\tvar next = tween._next;\n\t\t\ttween._paused = true;\n\t\t\ttween.target&&(tween.target.tweenjs_count = 0);\n\t\t\ttween._next = tween._prev = null;\n\t\t\ttween = next;\n\t\t}\n\t\tTween._tweenHead = Tween._tweenTail = null;\n\t};\n\n\t/**\n\t * Indicates whether there are any active tweens on the target object (if specified) or in general.\n\t * @method hasActiveTweens\n\t * @param {Object} [target] The target to check for active tweens. If not specified, the return value will indicate\n\t * if there are any active tweens on any target.\n\t * @return {Boolean} Indicates if there are active tweens.\n\t * @static\n\t */\n\tTween.hasActiveTweens = function(target) {\n\t\tif (target) { return !!target.tweenjs_count; }\n\t\treturn !!Tween._tweenHead;\n\t};\n\n\t/**\n\t * Installs a plugin, which can modify how certain properties are handled when tweened. See the {{#crossLink \"SamplePlugin\"}}{{/crossLink}}\n\t * for an example of how to write TweenJS plugins. Plugins should generally be installed via their own `install` method, in order to provide\n\t * the plugin with an opportunity to configure itself.\n\t * @method _installPlugin\n\t * @param {Object} plugin The plugin to install\n\t * @static\n\t * @protected\n\t */\n\tTween._installPlugin = function(plugin) {\n\t\tvar priority = (plugin.priority = plugin.priority||0), arr = (Tween._plugins = Tween._plugins || []);\n\t\tfor (var i=0,l=arr.length;iExample\n\t *\n\t *\t//This tween will wait 1s before alpha is faded to 0.\n\t *\tcreatejs.Tween.get(target).wait(1000).to({alpha:0}, 1000);\n\t *\n\t * @method wait\n\t * @param {Number} duration The duration of the wait in milliseconds (or in ticks if `useTicks` is true).\n\t * @param {Boolean} [passive=false] Tween properties will not be updated during a passive wait. This\n\t * is mostly useful for use with {{#crossLink \"Timeline\"}}{{/crossLink}} instances that contain multiple tweens\n\t * affecting the same target at different times.\n\t * @return {Tween} This tween instance (for chaining calls).\n\t * @chainable\n\t **/\n\tp.wait = function(duration, passive) {\n\t\tif (duration > 0) { this._addStep(+duration, this._stepTail.props, null, passive); }\n\t\treturn this;\n\t};\n\n\t/**\n\t * Adds a tween from the current values to the specified properties. Set duration to 0 to jump to these value.\n\t * Numeric properties will be tweened from their current value in the tween to the target value. Non-numeric\n\t * properties will be set at the end of the specified duration.\n\t *

Example

\n\t *\n\t *\tcreatejs.Tween.get(target).to({alpha:0, visible:false}, 1000);\n\t *\n\t * @method to\n\t * @param {Object} props An object specifying property target values for this tween (Ex. `{x:300}` would tween the x\n\t * property of the target to 300).\n\t * @param {Number} [duration=0] The duration of the tween in milliseconds (or in ticks if `useTicks` is true).\n\t * @param {Function} [ease=\"linear\"] The easing function to use for this tween. See the {{#crossLink \"Ease\"}}{{/crossLink}}\n\t * class for a list of built-in ease functions.\n\t * @return {Tween} This tween instance (for chaining calls).\n\t * @chainable\n\t */\n\tp.to = function(props, duration, ease) {\n\t\tif (duration == null || duration < 0) { duration = 0; }\n\t\tvar step = this._addStep(+duration, null, ease);\n\t\tthis._appendProps(props, step);\n\t\treturn this;\n\t};\n\t\n\t/**\n\t * Adds a label that can be used with {{#crossLink \"Tween/gotoAndPlay\"}}{{/crossLink}}/{{#crossLink \"Tween/gotoAndStop\"}}{{/crossLink}}\n\t * at the current point in the tween. For example:\n\t * \n\t * \tvar tween = createjs.Tween.get(foo)\n\t * \t\t\t\t\t.to({x:100}, 1000)\n\t * \t\t\t\t\t.label(\"myLabel\")\n\t * \t\t\t\t\t.to({x:200}, 1000);\n\t * // ...\n\t * tween.gotoAndPlay(\"myLabel\"); // would play from 1000ms in.\n\t * \n\t * @method addLabel\n\t * @param {String} label The label name.\n\t * @return {Tween} This tween instance (for chaining calls).\n\t * @chainable\n\t **/\n\tp.label = function(name) {\n\t\tthis.addLabel(name, this.duration);\n\t\treturn this;\n\t};\n\n\t/**\n\t * Adds an action to call the specified function.\n\t *

Example

\n\t *\n\t * \t//would call myFunction() after 1 second.\n\t * \tcreatejs.Tween.get().wait(1000).call(myFunction);\n\t *\n\t * @method call\n\t * @param {Function} callback The function to call.\n\t * @param {Array} [params]. The parameters to call the function with. If this is omitted, then the function\n\t * will be called with a single param pointing to this tween.\n\t * @param {Object} [scope]. The scope to call the function in. If omitted, it will be called in the target's scope.\n\t * @return {Tween} This tween instance (for chaining calls).\n\t * @chainable\n\t */\n\tp.call = function(callback, params, scope) {\n\t\treturn this._addAction(scope||this.target, callback, params||[this]);\n\t};\n\n\t/**\n\t * Adds an action to set the specified props on the specified target. If `target` is null, it will use this tween's\n\t * target. Note that for properties on the target object, you should consider using a zero duration {{#crossLink \"Tween/to\"}}{{/crossLink}}\n\t * operation instead so the values are registered as tweened props.\n\t *

Example

\n\t *\n\t *\tmyTween.wait(1000).set({visible:false}, foo);\n\t *\n\t * @method set\n\t * @param {Object} props The properties to set (ex. `{visible:false}`).\n\t * @param {Object} [target] The target to set the properties on. If omitted, they will be set on the tween's target.\n\t * @return {Tween} This tween instance (for chaining calls).\n\t * @chainable\n\t */\n\tp.set = function(props, target) {\n\t\treturn this._addAction(target||this.target, this._set, [props]);\n\t};\n\n\t/**\n\t * Adds an action to play (unpause) the specified tween. This enables you to sequence multiple tweens.\n\t *

Example

\n\t *\n\t *\tmyTween.to({x:100}, 500).play(otherTween);\n\t *\n\t * @method play\n\t * @param {Tween} [tween] The tween to play. Defaults to this tween.\n\t * @return {Tween} This tween instance (for chaining calls).\n\t * @chainable\n\t */\n\tp.play = function(tween) {\n\t\treturn this._addAction(tween||this, this._set, [{paused:false}]);\n\t};\n\n\t/**\n\t * Adds an action to pause the specified tween.\n\t * \n\t * \tmyTween.pause(otherTween).to({alpha:1}, 1000).play(otherTween);\n\t * \n\t * Note that this executes at the end of a tween update, so the tween may advance beyond the time the pause\n\t * action was inserted at. For example:\n\t * \n\t * myTween.to({foo:0}, 1000).pause().to({foo:1}, 1000);\n\t * \n\t * At 60fps the tween will advance by ~16ms per tick, if the tween above was at 999ms prior to the current tick, it\n\t * will advance to 1015ms (15ms into the second \"step\") and then pause.\n\t * \n\t * @method pause\n\t * @param {Tween} [tween] The tween to pause. Defaults to this tween.\n\t * @return {Tween} This tween instance (for chaining calls)\n\t * @chainable\n\t */\n\tp.pause = function(tween) {\n\t\treturn this._addAction(tween||this, this._set, [{paused:true}]);\n\t};\n\n\t// tiny api (primarily for tool output):\n\tp.w = p.wait;\n\tp.t = p.to;\n\tp.c = p.call;\n\tp.s = p.set;\n\n\t/**\n\t * Returns a string representation of this object.\n\t * @method toString\n\t * @return {String} a string representation of the instance.\n\t */\n\tp.toString = function() {\n\t\treturn \"[Tween]\";\n\t};\n\n\t/**\n\t * @method clone\n\t * @protected\n\t */\n\tp.clone = function() {\n\t\tthrow(\"Tween can not be cloned.\")\n\t};\n\n\n// private methods:\n\t/**\n\t * Adds a plugin to this tween.\n\t * @method _addPlugin\n\t * @param {Object} plugin\n\t * @protected\n\t */\n\tp._addPlugin = function(plugin) {\n\t\tvar ids = this._pluginIds || (this._pluginIds = {}), id = plugin.ID;\n\t\tif (!id || ids[id]) { return; } // already added\n\t\t\n\t\tids[id] = true;\n\t\tvar plugins = this._plugins || (this._plugins = []), priority = plugin.priority || 0;\n\t\tfor (var i=0,l=plugins.length; i= 1 ? v1 : v0;\n\t\t\t}\n\t\t\t\n\t\t\tif (plugins) {\n\t\t\t\tfor (var i=0,l=plugins.length;i endPos;\n\t\tvar action = rev ? this._actionTail : this._actionHead;\n\t\tvar ePos = endPos, sPos = startPos;\n\t\tif (rev) { ePos=startPos; sPos=endPos; }\n\t\tvar t = this.position;\n\t\twhile (action) {\n\t\t\tvar pos = action.t;\n\t\t\tif (pos === endPos || (pos > sPos && pos < ePos) || (includeStart && pos === startPos)) {\n\t\t\t\taction.funct.apply(action.scope, action.params);\n\t\t\t\tif (t !== this.position) { return true; }\n\t\t\t}\n\t\t\taction = rev ? action.prev : action.next;\n\t\t}\n\t};\n\n\t/**\n\t * @method _appendProps\n\t * @param {Object} props\n\t * @protected\n\t */\n\tp._appendProps = function(props, step, stepPlugins) {\n\t\tvar initProps = this._stepHead.props, target = this.target, plugins = Tween._plugins;\n\t\tvar n, i, value, initValue, inject;\n\t\tvar oldStep = step.prev, oldProps = oldStep.props;\n\t\tvar stepProps = step.props || (step.props = this._cloneProps(oldProps));\n\t\tvar cleanProps = {}; // TODO: is there some way to avoid this additional object?\n\n\t\tfor (n in props) {\n\t\t\tif (!props.hasOwnProperty(n)) { continue; }\n\t\t\tcleanProps[n] = stepProps[n] = props[n];\n\n\t\t\tif (initProps[n] !== undefined) { continue; }\n\n\t\t\tinitValue = undefined; // accessing missing properties on DOMElements when using CSSPlugin is INSANELY expensive, so we let the plugin take a first swing at it.\n\t\t\tif (plugins) {\n\t\t\t\tfor (i = plugins.length-1; i >= 0; i--) {\n\t\t\t\t\tvalue = plugins[i].init(this, n, initValue);\n\t\t\t\t\tif (value !== undefined) { initValue = value; }\n\t\t\t\t\tif (initValue === Tween.IGNORE) {\n\t\t\t\t\t\tdelete(stepProps[n]);\n\t\t\t\t\t\tdelete(cleanProps[n]);\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (initValue !== Tween.IGNORE) {\n\t\t\t\tif (initValue === undefined) { initValue = target[n]; }\n\t\t\t\toldProps[n] = (initValue === undefined) ? null : initValue;\n\t\t\t}\n\t\t}\n\t\t\n\t\tfor (n in cleanProps) {\n\t\t\tvalue = props[n];\n\n\t\t\t// propagate old value to previous steps:\n\t\t\tvar o, prev=oldStep;\n\t\t\twhile ((o = prev) && (prev = o.prev)) {\n\t\t\t\tif (prev.props === o.props) { continue; } // wait step\n\t\t\t\tif (prev.props[n] !== undefined) { break; } // already has a value, we're done.\n\t\t\t\tprev.props[n] = oldProps[n];\n\t\t\t}\n\t\t}\n\t\t\n\t\tif (stepPlugins !== false && (plugins = this._plugins)) {\n\t\t\tfor (i = plugins.length-1; i >= 0; i--) {\n\t\t\t\tplugins[i].step(this, step, cleanProps);\n\t\t\t}\n\t\t}\n\t\t\n\t\tif (inject = this._injected) {\n\t\t\tthis._injected = null;\n\t\t\tthis._appendProps(inject, step, false);\n\t\t}\n\t};\n\t\n\t/**\n\t * Used by plugins to inject properties onto the current step. Called from within `Plugin.step` calls.\n\t * For example, a plugin dealing with color, could read a hex color, and inject red, green, and blue props into the tween.\n\t * See the SamplePlugin for more info.\n\t * @method _injectProp\n\t * @param {String} name\n\t * @param {Object} value\n\t * @protected\n\t */\n\tp._injectProp = function(name, value) {\n\t\tvar o = this._injected || (this._injected = {});\n\t\to[name] = value;\n\t};\n\n\t/**\n\t * @method _addStep\n\t * @param {Number} duration\n\t * @param {Object} props\n\t * @param {Function} ease\n\t * @param {Boolean} passive\n\t * @protected\n\t */\n\tp._addStep = function(duration, props, ease, passive) {\n\t\tvar step = new TweenStep(this._stepTail, this.duration, duration, props, ease, passive||false);\n\t\tthis.duration += duration;\n\t\treturn this._stepTail = (this._stepTail.next = step);\n\t};\n\n\t/**\n\t * @method _addAction\n\t * @param {Object} scope\n\t * @param {Function} funct\n\t * @param {Array} params\n\t * @protected\n\t */\n\tp._addAction = function(scope, funct, params) {\n\t\tvar action = new TweenAction(this._actionTail, this.duration, scope, funct, params);\n\t\tif (this._actionTail) { this._actionTail.next = action; }\n\t\telse { this._actionHead = action; }\n\t\tthis._actionTail = action;\n\t\treturn this;\n\t};\n\n\t/**\n\t * @method _set\n\t * @param {Object} props\n\t * @protected\n\t */\n\tp._set = function(props) {\n\t\tfor (var n in props) {\n\t\t\tthis[n] = props[n];\n\t\t}\n\t};\n\n\t/**\n\t * @method _cloneProps\n\t * @param {Object} props\n\t * @protected\n\t */\n\tp._cloneProps = function(props) {\n\t\tvar o = {};\n\t\tfor (var n in props) { o[n] = props[n]; }\n\t\treturn o;\n\t};\n\n\tcreatejs.Tween = createjs.promote(Tween, \"AbstractTween\");\n\t\n\tfunction TweenStep(prev, t, d, props, ease, passive) {\n\t\tthis.next = null;\n\t\tthis.prev = prev;\n\t\tthis.t = t;\n\t\tthis.d = d;\n\t\tthis.props = props;\n\t\tthis.ease = ease;\n\t\tthis.passive = passive;\n\t\tthis.index = prev ? prev.index+1 : 0;\n\t};\n\t\n\tfunction TweenAction(prev, t, scope, funct, params) {\n\t\tthis.next = null;\n\t\tthis.prev = prev;\n\t\tthis.t = t;\n\t\tthis.d = 0;\n\t\tthis.scope = scope;\n\t\tthis.funct = funct;\n\t\tthis.params = params;\n\t};\n}());\n\n//##############################################################################\n// Timeline.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n\n(function() {\n\t\"use strict\";\n\t\n\n// constructor\t\n\t/**\n\t * The Timeline class synchronizes multiple tweens and allows them to be controlled as a group. Please note that if a\n\t * timeline is looping, the tweens on it may appear to loop even if the \"loop\" property of the tween is false.\n\t * \n\t * NOTE: Timeline currently also accepts a param list in the form: `tweens, labels, props`. This is for backwards\n\t * compatibility only and will be removed in the future. Include tweens and labels as properties on the props object.\n\t * @class Timeline\n\t * @param {Object} [props] The configuration properties to apply to this instance (ex. `{loop:-1, paused:true}`).\n\t * Supported props are listed below. These props are set on the corresponding instance properties except where\n\t * specified.

`useTicks`
`ignoreGlobalPause`
`loop`
`reversed`
`bounce`
`timeScale`
`paused`
`position`: indicates the initial position for this tween.
`onChange`: adds the specified function as a listener to the `change` event
`onComplete`: adds the specified function as a listener to the `complete` event

\n\t * @extends AbstractTween\n\t * @constructor\n\t **/\n\tfunction Timeline(props) {\n\t\tvar tweens, labels;\n\t\t// handle old params (tweens, labels, props):\n\t\t// TODO: deprecated.\n\t\tif (props instanceof Array || (props == null && arguments.length > 1)) {\n\t\t\ttweens = props;\n\t\t\tlabels = arguments[1];\n\t\t\tprops = arguments[2];\n\t\t} else if (props) {\n\t\t\ttweens = props.tweens;\n\t\t\tlabels = props.labels;\n\t\t}\n\t\t\n\t\tthis.AbstractTween_constructor(props);\n\n\t// private properties:\n\t\t/**\n\t\t * The array of tweens in the timeline. It is *strongly* recommended that you use\n\t\t * {{#crossLink \"Tween/addTween\"}}{{/crossLink}} and {{#crossLink \"Tween/removeTween\"}}{{/crossLink}},\n\t\t * rather than accessing this directly, but it is included for advanced uses.\n\t\t * @property tweens\n\t\t * @type Array\n\t\t **/\n\t\tthis.tweens = [];\n\t\t\n\t\tif (tweens) { this.addTween.apply(this, tweens); }\n\t\tthis.setLabels(labels);\n\t\t\n\t\tthis._init(props);\n\t};\n\t\n\tvar p = createjs.extend(Timeline, createjs.AbstractTween);\n\n\t\n// events:\n\t// docced in AbstractTween.\n\n\n// public methods:\n\t/**\n\t * Adds one or more tweens (or timelines) to this timeline. The tweens will be paused (to remove them from the\n\t * normal ticking system) and managed by this timeline. Adding a tween to multiple timelines will result in\n\t * unexpected behaviour.\n\t * @method addTween\n\t * @param {Tween} ...tween The tween(s) to add. Accepts multiple arguments.\n\t * @return {Tween} The first tween that was passed in.\n\t **/\n\tp.addTween = function(tween) {\n\t\tif (tween._parent) { tween._parent.removeTween(tween); }\n\t\t\n\t\tvar l = arguments.length;\n\t\tif (l > 1) {\n\t\t\tfor (var i=0; i 0) { d *= tween.loop+1; }\n\t\tif (d > this.duration) { this.duration = d; }\n\t\t\n\t\tif (this.rawPosition >= 0) { tween.setPosition(this.rawPosition); }\n\t\treturn tween;\n\t};\n\n\t/**\n\t * Removes one or more tweens from this timeline.\n\t * @method removeTween\n\t * @param {Tween} ...tween The tween(s) to remove. Accepts multiple arguments.\n\t * @return Boolean Returns `true` if all of the tweens were successfully removed.\n\t **/\n\tp.removeTween = function(tween) {\n\t\tvar l = arguments.length;\n\t\tif (l > 1) {\n\t\t\tvar good = true;\n\t\t\tfor (var i=0; i= this.duration) { this.updateDuration(); }\n\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\t\treturn false;\n\t};\n\n\t/**\n\t * Recalculates the duration of the timeline. The duration is automatically updated when tweens are added or removed,\n\t * but this method is useful if you modify a tween after it was added to the timeline.\n\t * @method updateDuration\n\t **/\n\tp.updateDuration = function() {\n\t\tthis.duration = 0;\n\t\tfor (var i=0,l=this.tweens.length; i 0) { d *= tween.loop+1; }\n\t\t\tif (d > this.duration) { this.duration = d; }\n\t\t}\n\t};\n\n\t/**\n\t* Returns a string representation of this object.\n\t* @method toString\n\t* @return {String} a string representation of the instance.\n\t**/\n\tp.toString = function() {\n\t\treturn \"[Timeline]\";\n\t};\n\n\t/**\n\t * @method clone\n\t * @protected\n\t **/\n\tp.clone = function() {\n\t\tthrow(\"Timeline can not be cloned.\")\n\t};\n\n// private methods:\n\t\n\t// Docced in AbstractTween\n\tp._updatePosition = function(jump, end) {\n\t\tvar t = this.position;\n\t\tfor (var i=0, l=this.tweens.length; ispark table demo for an\n\t * overview of the different ease types on TweenJS.com.\n\t *\n\t * Equations derived from work by Robert Penner.\n\t * @class Ease\n\t * @static\n\t **/\n\tfunction Ease() {\n\t\tthrow \"Ease cannot be instantiated.\";\n\t}\n\n\n// static methods and properties\n\t/**\n\t * @method linear\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.linear = function(t) { return t; };\n\n\t/**\n\t * Identical to linear.\n\t * @method none\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.none = Ease.linear;\n\n\t/**\n\t * Mimics the simple -100 to 100 easing in Adobe Flash/Animate.\n\t * @method get\n\t * @param {Number} amount A value from -1 (ease in) to 1 (ease out) indicating the strength and direction of the ease.\n\t * @static\n\t * @return {Function}\n\t **/\n\tEase.get = function(amount) {\n\t\tif (amount < -1) { amount = -1; }\n\t\telse if (amount > 1) { amount = 1; }\n\t\treturn function(t) {\n\t\t\tif (amount==0) { return t; }\n\t\t\tif (amount<0) { return t*(t*-amount+1+amount); }\n\t\t\treturn t*((2-t)*amount+(1-amount));\n\t\t};\n\t};\n\n\t/**\n\t * Configurable exponential ease.\n\t * @method getPowIn\n\t * @param {Number} pow The exponent to use (ex. 3 would return a cubic ease).\n\t * @static\n\t * @return {Function}\n\t **/\n\tEase.getPowIn = function(pow) {\n\t\treturn function(t) {\n\t\t\treturn Math.pow(t,pow);\n\t\t};\n\t};\n\n\t/**\n\t * Configurable exponential ease.\n\t * @method getPowOut\n\t * @param {Number} pow The exponent to use (ex. 3 would return a cubic ease).\n\t * @static\n\t * @return {Function}\n\t **/\n\tEase.getPowOut = function(pow) {\n\t\treturn function(t) {\n\t\t\treturn 1-Math.pow(1-t,pow);\n\t\t};\n\t};\n\n\t/**\n\t * Configurable exponential ease.\n\t * @method getPowInOut\n\t * @param {Number} pow The exponent to use (ex. 3 would return a cubic ease).\n\t * @static\n\t * @return {Function}\n\t **/\n\tEase.getPowInOut = function(pow) {\n\t\treturn function(t) {\n\t\t\tif ((t*=2)<1) return 0.5*Math.pow(t,pow);\n\t\t\treturn 1-0.5*Math.abs(Math.pow(2-t,pow));\n\t\t};\n\t};\n\n\t/**\n\t * @method quadIn\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.quadIn = Ease.getPowIn(2);\n\t/**\n\t * @method quadOut\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.quadOut = Ease.getPowOut(2);\n\t/**\n\t * @method quadInOut\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.quadInOut = Ease.getPowInOut(2);\n\n\t/**\n\t * @method cubicIn\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.cubicIn = Ease.getPowIn(3);\n\t/**\n\t * @method cubicOut\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.cubicOut = Ease.getPowOut(3);\n\t/**\n\t * @method cubicInOut\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.cubicInOut = Ease.getPowInOut(3);\n\n\t/**\n\t * @method quartIn\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.quartIn = Ease.getPowIn(4);\n\t/**\n\t * @method quartOut\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.quartOut = Ease.getPowOut(4);\n\t/**\n\t * @method quartInOut\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.quartInOut = Ease.getPowInOut(4);\n\n\t/**\n\t * @method quintIn\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.quintIn = Ease.getPowIn(5);\n\t/**\n\t * @method quintOut\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.quintOut = Ease.getPowOut(5);\n\t/**\n\t * @method quintInOut\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.quintInOut = Ease.getPowInOut(5);\n\n\t/**\n\t * @method sineIn\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.sineIn = function(t) {\n\t\treturn 1-Math.cos(t*Math.PI/2);\n\t};\n\n\t/**\n\t * @method sineOut\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.sineOut = function(t) {\n\t\treturn Math.sin(t*Math.PI/2);\n\t};\n\n\t/**\n\t * @method sineInOut\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.sineInOut = function(t) {\n\t\treturn -0.5*(Math.cos(Math.PI*t) - 1);\n\t};\n\n\t/**\n\t * Configurable \"back in\" ease.\n\t * @method getBackIn\n\t * @param {Number} amount The strength of the ease.\n\t * @static\n\t * @return {Function}\n\t **/\n\tEase.getBackIn = function(amount) {\n\t\treturn function(t) {\n\t\t\treturn t*t*((amount+1)*t-amount);\n\t\t};\n\t};\n\t/**\n\t * @method backIn\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.backIn = Ease.getBackIn(1.7);\n\n\t/**\n\t * Configurable \"back out\" ease.\n\t * @method getBackOut\n\t * @param {Number} amount The strength of the ease.\n\t * @static\n\t * @return {Function}\n\t **/\n\tEase.getBackOut = function(amount) {\n\t\treturn function(t) {\n\t\t\treturn (--t*t*((amount+1)*t + amount) + 1);\n\t\t};\n\t};\n\t/**\n\t * @method backOut\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.backOut = Ease.getBackOut(1.7);\n\n\t/**\n\t * Configurable \"back in out\" ease.\n\t * @method getBackInOut\n\t * @param {Number} amount The strength of the ease.\n\t * @static\n\t * @return {Function}\n\t **/\n\tEase.getBackInOut = function(amount) {\n\t\tamount*=1.525;\n\t\treturn function(t) {\n\t\t\tif ((t*=2)<1) return 0.5*(t*t*((amount+1)*t-amount));\n\t\t\treturn 0.5*((t-=2)*t*((amount+1)*t+amount)+2);\n\t\t};\n\t};\n\t/**\n\t * @method backInOut\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.backInOut = Ease.getBackInOut(1.7);\n\n\t/**\n\t * @method circIn\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.circIn = function(t) {\n\t\treturn -(Math.sqrt(1-t*t)- 1);\n\t};\n\n\t/**\n\t * @method circOut\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.circOut = function(t) {\n\t\treturn Math.sqrt(1-(--t)*t);\n\t};\n\n\t/**\n\t * @method circInOut\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.circInOut = function(t) {\n\t\tif ((t*=2) < 1) return -0.5*(Math.sqrt(1-t*t)-1);\n\t\treturn 0.5*(Math.sqrt(1-(t-=2)*t)+1);\n\t};\n\n\t/**\n\t * @method bounceIn\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.bounceIn = function(t) {\n\t\treturn 1-Ease.bounceOut(1-t);\n\t};\n\n\t/**\n\t * @method bounceOut\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.bounceOut = function(t) {\n\t\tif (t < 1/2.75) {\n\t\t\treturn (7.5625*t*t);\n\t\t} else if (t < 2/2.75) {\n\t\t\treturn (7.5625*(t-=1.5/2.75)*t+0.75);\n\t\t} else if (t < 2.5/2.75) {\n\t\t\treturn (7.5625*(t-=2.25/2.75)*t+0.9375);\n\t\t} else {\n\t\t\treturn (7.5625*(t-=2.625/2.75)*t +0.984375);\n\t\t}\n\t};\n\n\t/**\n\t * @method bounceInOut\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.bounceInOut = function(t) {\n\t\tif (t<0.5) return Ease.bounceIn (t*2) * .5;\n\t\treturn Ease.bounceOut(t*2-1)*0.5+0.5;\n\t};\n\n\t/**\n\t * Configurable elastic ease.\n\t * @method getElasticIn\n\t * @param {Number} amplitude\n\t * @param {Number} period\n\t * @static\n\t * @return {Function}\n\t **/\n\tEase.getElasticIn = function(amplitude,period) {\n\t\tvar pi2 = Math.PI*2;\n\t\treturn function(t) {\n\t\t\tif (t==0 || t==1) return t;\n\t\t\tvar s = period/pi2*Math.asin(1/amplitude);\n\t\t\treturn -(amplitude*Math.pow(2,10*(t-=1))*Math.sin((t-s)*pi2/period));\n\t\t};\n\t};\n\t/**\n\t * @method elasticIn\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.elasticIn = Ease.getElasticIn(1,0.3);\n\n\t/**\n\t * Configurable elastic ease.\n\t * @method getElasticOut\n\t * @param {Number} amplitude\n\t * @param {Number} period\n\t * @static\n\t * @return {Function}\n\t **/\n\tEase.getElasticOut = function(amplitude,period) {\n\t\tvar pi2 = Math.PI*2;\n\t\treturn function(t) {\n\t\t\tif (t==0 || t==1) return t;\n\t\t\tvar s = period/pi2 * Math.asin(1/amplitude);\n\t\t\treturn (amplitude*Math.pow(2,-10*t)*Math.sin((t-s)*pi2/period )+1);\n\t\t};\n\t};\n\t/**\n\t * @method elasticOut\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.elasticOut = Ease.getElasticOut(1,0.3);\n\n\t/**\n\t * Configurable elastic ease.\n\t * @method getElasticInOut\n\t * @param {Number} amplitude\n\t * @param {Number} period\n\t * @static\n\t * @return {Function}\n\t **/\n\tEase.getElasticInOut = function(amplitude,period) {\n\t\tvar pi2 = Math.PI*2;\n\t\treturn function(t) {\n\t\t\tvar s = period/pi2 * Math.asin(1/amplitude);\n\t\t\tif ((t*=2)<1) return -0.5*(amplitude*Math.pow(2,10*(t-=1))*Math.sin( (t-s)*pi2/period ));\n\t\t\treturn amplitude*Math.pow(2,-10*(t-=1))*Math.sin((t-s)*pi2/period)*0.5+1;\n\t\t};\n\t};\n\t/**\n\t * @method elasticInOut\n\t * @param {Number} t\n\t * @static\n\t * @return {Number}\n\t **/\n\tEase.elasticInOut = Ease.getElasticInOut(1,0.3*1.5);\n\n\tcreatejs.Ease = Ease;\n\n}());\n\n//##############################################################################\n// MotionGuidePlugin.js\n//##############################################################################\n\nthis.createjs = this.createjs||{};\n\n(function() {\n\t\"use strict\";\n\n\t/**\n\t * A TweenJS plugin for working with motion guides. Defined paths which objects can follow or orient along.\n\t *\n\t * To use the plugin, install the plugin after TweenJS has loaded. To define a path, add\n\t *\n\t * \t\tcreatejs.MotionGuidePlugin.install();\n\t *\n\t *

Example

\n\t *\n\t * \t\t// Using a Motion Guide\n\t * \t\tcreatejs.Tween.get(target).to({guide:{ path:[0,0, 0,200,200,200, 200,0,0,0] }},7000);\n\t * \t\t// Visualizing the line\n\t * \t\tgraphics.moveTo(0,0).curveTo(0,200,200,200).curveTo(200,0,0,0);\n\t *\n\t * Each path needs pre-computation to ensure there's fast performance. Because of the pre-computation there's no\n\t * built in support for path changes mid tween. These are the Guide Object's properties:

path: Required, Array : The x/y points used to draw the path with a moveTo and 1 to n curveTo calls.
start: Optional, 0-1 : Initial position, default 0 except for when continuing along the same path.
end: Optional, 0-1 : Final position, default 1 if not specified.
orient: Optional, string : \"fixed\"/\"auto\"/\"cw\"/\"ccw\"
- \"fixed\" forces the object to face down the path all movement (relative to start rotation),
- \"auto\" rotates the object along the path relative to the line.
- \"cw\"/\"ccw\" force clockwise or counter clockwise rotations including Adobe Flash/Animate-like\n\t * \t\t\t\tbehaviour. This may override your end rotation value.

\n\t * Guide objects should not be shared between tweens even if all properties are identical, the library stores\n\t * information on these objects in the background and sharing them can cause unexpected behaviour. Values\n\t * outside 0-1 range of tweens will be a \"best guess\" from the appropriate part of the defined curve.\n\t *\n\t * @class MotionGuidePlugin\n\t * @constructor\n\t */\n\tfunction MotionGuidePlugin() {\n\t\tthrow(\"MotionGuidePlugin cannot be instantiated.\")\n\t}\n\tvar s = MotionGuidePlugin;\n\n\n// static properties:\n\t/**\n\t * @property priority\n\t * @protected\n\t * @static\n\t */\n\ts.priority = 0; // high priority, should run sooner\n\n\t/**\n\t * READ-ONLY. A unique identifying string for this plugin. Used by TweenJS to ensure duplicate plugins are not installed on a tween.\n\t * @property ID\n\t * @type {String}\n\t * @static\n\t * @readonly\n\t */\n\ts.ID = \"MotionGuide\";\n\n// static methods\n\t/**\n\t * Installs this plugin for use with TweenJS. Call this once after TweenJS is loaded to enable this plugin.\n\t * @method install\n\t * @static\n\t */\n\ts.install = function() {\n\t\tcreatejs.Tween._installPlugin(MotionGuidePlugin);\n\t\treturn createjs.Tween.IGNORE;\n\t};\n\n\t/**\n\t * Called by TweenJS when a new property initializes on a tween.\n\t * See {{#crossLink \"SamplePlugin/init\"}}{{/crossLink}} for more info.\n\t * @method init\n\t * @param {Tween} tween\n\t * @param {String} prop\n\t * @param {any} value\n\t * @return {any}\n\t * @static\n\t */\n\ts.init = function(tween, prop, value) {\n\t\tif(prop == \"guide\") {\n\t\t\ttween._addPlugin(s);\n\t\t}\n\t};\n\n\t/**\n\t * Called when a new step is added to a tween (ie. a new \"to\" action is added to a tween).\n\t * See {{#crossLink \"SamplePlugin/step\"}}{{/crossLink}} for more info.\n\t * @method step\n\t * @param {Tween} tween\n\t * @param {TweenStep} step\n\t * @param {Object} props\n\t * @static\n\t */\n\ts.step = function(tween, step, props) {\n\t\tfor (var n in props) {\n\t\t\tif(n !== \"guide\") { continue; }\n\n\t\t\tvar guideData = step.props.guide;\n\t\t\tvar error = s._solveGuideData(props.guide, guideData);\n\t\t\tguideData.valid = !error;\n\n\t\t\tvar end = guideData.endData;\n\t\t\ttween._injectProp(\"x\", end.x);\n\t\t\ttween._injectProp(\"y\", end.y);\n\n\t\t\tif(error || !guideData.orient) { break; }\n\n\t\t\tvar initRot = step.prev.props.rotation === undefined ? (tween.target.rotation || 0) : step.prev.props.rotation;\n\n\t\t\tguideData.startOffsetRot = initRot - guideData.startData.rotation;\n\n\t\t\tif(guideData.orient == \"fixed\") {\n\t\t\t\t// controlled rotation\n\t\t\t\tguideData.endAbsRot = end.rotation + guideData.startOffsetRot;\n\t\t\t\tguideData.deltaRotation = 0;\n\t\t\t} else {\n\t\t\t\t// interpreted rotation\n\n\t\t\t\tvar finalRot = props.rotation === undefined ? (tween.target.rotation || 0) : props.rotation;\n\t\t\t\tvar deltaRot = (finalRot - guideData.endData.rotation) - guideData.startOffsetRot;\n\t\t\t\tvar modRot = deltaRot % 360;\n\n\t\t\t\tguideData.endAbsRot = finalRot;\n\n\t\t\t\tswitch(guideData.orient) {\n\t\t\t\t\tcase \"auto\":\n\t\t\t\t\t\tguideData.deltaRotation = deltaRot;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase \"cw\":\n\t\t\t\t\t\tguideData.deltaRotation = ((modRot + 360) % 360) + (360 * Math.abs((deltaRot/360) |0));\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase \"ccw\":\n\t\t\t\t\t\tguideData.deltaRotation = ((modRot - 360) % 360) + (-360 * Math.abs((deltaRot/360) |0));\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttween._injectProp(\"rotation\", guideData.endAbsRot);\n\t\t}\n\t};\n\n\t/**\n\t * Called before a property is updated by the tween.\n\t * See {{#crossLink \"SamplePlugin/change\"}}{{/crossLink}} for more info.\n\t * @method change\n\t * @param {Tween} tween\n\t * @param {TweenStep} step\n\t * @param {String} prop\n\t * @param {any} value\n\t * @param {Number} ratio\n\t * @param {Boolean} end\n\t * @return {any}\n\t * @static\n\t */\n\ts.change = function(tween, step, prop, value, ratio, end) {\n\t\tvar guideData = step.props.guide;\n\n\t\tif(\n\t\t\t\t!guideData ||\t\t\t\t\t\t\t// Missing data\n\t\t\t\t(step.props === step.prev.props) || \t// In a wait()\n\t\t\t\t(guideData === step.prev.props.guide) \t// Guide hasn't changed\n\t\t) {\n\t\t\treturn; // have no business making decisions\n\t\t}\n\t\tif(\n\t\t\t\t(prop === \"guide\" && !guideData.valid) ||\t\t// this data is broken\n\t\t\t\t(prop == \"x\" || prop == \"y\") ||\t\t\t\t\t// these always get over-written\n\t\t\t\t(prop === \"rotation\" && guideData.orient)\t\t// currently over-written\n\t\t){\n\t\t\treturn createjs.Tween.IGNORE;\n\t\t}\n\n\t\ts._ratioToPositionData(ratio, guideData, tween.target);\n\t};\n\n// public methods\n\t/**\n\t * Provide potentially useful debugging information, like running the error detection system, and rendering the path\n\t * defined in the guide data.\n\t *\n\t * NOTE: you will need to transform your context 2D to the local space of the guide if you wish to line it up.\n\t * @param {Object} guideData All the information describing the guide to be followed.\n\t * @param {DrawingContext2D} [ctx=undefined] The context to draw the object into.\n\t * @param {Array} [higlight=undefined] Array of ratio positions to highlight\n\t * @returns {undefined|String}\n\t */\n\ts.debug = function(guideData, ctx, higlight) {\n\t\tguideData = guideData.guide || guideData;\n\n\t\t// errors\n\t\tvar err = s._findPathProblems(guideData);\n\t\tif(err) {\n\t\t\tconsole.error(\"MotionGuidePlugin Error found: \\n\" + err);\n\t\t}\n\n\t\t// drawing\n\t\tif(!ctx){ return err; }\n\n\t\tvar i;\n\t\tvar path = guideData.path;\n\t\tvar pathLength = path.length;\n\t\tvar width = 3;\n\t\tvar length = 9;\n\n\t\tctx.save();\n\t\t//ctx.resetTransform();\n\n\t\tctx.lineCap = \"round\";\n\t\tctx.lineJoin = \"miter\";\n\t\tctx.beginPath();\n\n\t\t// curve\n\t\tctx.moveTo(path[0], path[1]);\n\t\tfor(i=2; i < pathLength; i+=4) {\n\t\t\tctx.quadraticCurveTo(\n\t\t\t\tpath[i], path[i+1],\n\t\t\t\tpath[i+2], path[i+3]\n\t\t\t);\n\t\t}\n\n\t\tctx.strokeStyle = \"black\";\n\t\tctx.lineWidth = width*1.5;\n\t\tctx.stroke();\n\t\tctx.strokeStyle = \"white\";\n\t\tctx.lineWidth = width;\n\t\tctx.stroke();\n\t\tctx.closePath();\n\n\t\t// highlights\n\t\tvar hiCount = higlight.length;\n\t\tif(higlight && hiCount) {\n\t\t\tvar tempStore = {};\n\t\t\tvar tempLook = {};\n\t\t\ts._solveGuideData(guideData, tempStore);\n\n\t\t\tfor(var i=0; i= effRatio){ target = i; break; }\n\t\t\tlook += test;\n\t\t}\n\t\tif(target === undefined) { target = l-1; look -= test; }\n\n\t\t// find midline weighting\n\t\tvar subLines = lineSegments[target].weightings;\n\t\tvar portion = test;\n\t\tl = subLines.length;\n\t\tfor(i=0; i= effRatio){ break; }\n\t\t\tlook += test;\n\t\t}\n\n\t\t// translate the subline index into a position in the path data\n\t\ttarget = (target*4) + 2;\n\t\t// take the distance we've covered in our ratio, and scale it to distance into the weightings\n\t\tt = (i/precision) + (((effRatio-look) / test) * (1/precision));\n\n\t\t// position\n\t\tvar pathData = guideData.path;\n\t\ts._getParamsForCurve(\n\t\t\tpathData[target-2],\t\t\tpathData[target-1],\n\t\t\tpathData[target],\t\t\tpathData[target+1],\n\t\t\tpathData[target+2],\t\t\tpathData[target+3],\n\t\t\tt,\n\t\t\tguideData.orient,\n\t\t\toutput\n\t\t);\n\n\t\tif(guideData.orient) {\n\t\t\tif(ratio >= 0.99999 && ratio <= 1.00001 && guideData.endAbsRot !== undefined) {\n\t\t\t\toutput.rotation = guideData.endAbsRot;\n\t\t\t} else {\n\t\t\t\toutput.rotation += guideData.startOffsetRot + (ratio * guideData.deltaRotation);\n\t\t\t}\n\t\t}\n\n\t\treturn output;\n\t};\n\n\t/**\n\t * For a given quadratic bezier t-value, what is the position and rotation. Save it onto the output object.\n\t * @param {Number} sx Start x.\n\t * @param {Number} sy Start y.\n\t * @param {Number} cx Control x.\n\t * @param {Number} cy Control y.\n\t * @param {Number} ex End x.\n\t * @param {Number} ey End y.\n\t * @param {Number} t T value (parametric distance into curve).\n\t * @param {Boolean} orient Save rotation data.\n\t * @param {Object} output Object to save output properties of x,y, and rotation onto.\n\t * @private\n\t */\n\ts._getParamsForCurve = function(sx,sy, cx,cy, ex,ey, t, orient, output) {\n\t\tvar inv = 1 - t;\n\n\t\t// finding a point on a bezier curve\n\t\toutput.x =\tinv*inv * sx + 2 * inv * t * cx + t*t * ex;\n\t\toutput.y =\tinv*inv * sy + 2 * inv * t * cy + t*t * ey;\n\n\t\t// finding an angle on a bezier curve\n\t\tif(orient) {\n\t\t\t// convert from radians back to degrees\n\t\t\toutput.rotation = 57.2957795 * Math.atan2(\n\t\t\t\t(cy - sy)*inv + (ey - cy)*t,\n\t\t\t\t(cx - sx)*inv + (ex - cx)*t\n\t\t\t);\n\t\t}\n\t};\n\n\t/**\n\t * Perform a check to validate path information so plugin can avoid later error checking.\n\t * @param {Object} guideData All the information describing the guide to be followed.\n\t * @returns {undefined|String} The problem found, or undefined if no problems.\n\t * @private\n\t */\n\ts._findPathProblems = function(guideData) {\n\t\tvar path = guideData.path;\n\t\tvar valueCount = (path && path.length) || 0;\t// ensure this is a number to simplify later logic\n\t\tif(valueCount < 6 || (valueCount-2) % 4) {\n\t\t\tvar message =\t\"\\tCannot parse 'path' array due to invalid number of entries in path. \";\n\t\t\tmessage +=\t\t\"There should be an odd number of points, at least 3 points, and 2 entries per point (x & y). \";\n\t\t\tmessage +=\t\t\"See 'CanvasRenderingContext2D.quadraticCurveTo' for details as 'path' models a quadratic bezier.\\n\\n\";\n\t\t\tmessage +=\t\t\"Only [ \"+ valueCount +\" ] values found. Expected: \"+ Math.max(Math.ceil((valueCount-2)/4)*4+2, 6); //6, 10, 14,...\n\t\t\treturn message;\n\t\t}\n\n\t\tfor(var i=0; i 1*/) {\t// outside 0-1 is unpredictable, but not breaking\n\t\t\treturn \"'start' out of bounds. Expected 0 to 1, got: \"+ start;\n\t\t}\n\t\tvar end = guideData.end;\n\t\tif(isNaN(end) && (end !== undefined)/* || end < 0 || end > 1*/) {\t// outside 0-1 is unpredictable, but not breaking\n\t\t\treturn \"'end' out of bounds. Expected 0 to 1, got: \"+ end;\n\t\t}\n\n\t\tvar orient = guideData.orient;\n\t\tif(orient) { // mirror the check used elsewhere\n\t\t\tif(orient != \"fixed\" && orient != \"auto\" && orient != \"cw\" && orient != \"ccw\") {\n\t\t\t\treturn 'Invalid orientation value. Expected [\"fixed\", \"auto\", \"cw\", \"ccw\", undefined], got: '+ orient;\n\t\t\t}\n\t\t}\n\n\t\treturn undefined;\n\t};\n\n\tcreatejs.MotionGuidePlugin = MotionGuidePlugin;\n\n}());\n\n//##############################################################################\n// version.js\n//##############################################################################\n\nthis.createjs = this.createjs || {};\n\n(function() {\n\t\"use strict\";\n\n\t/**\n\t * Static class holding library specific information such as the version and buildDate of\n\t * the library.\n\t * @class TweenJS\n\t **/\n\tvar s = createjs.TweenJS = createjs.TweenJS || {};\n\n\t/**\n\t * The version string for this release.\n\t * @property version\n\t * @type String\n\t * @static\n\t **/\n\ts.version = /*=version*/\"1.0.0\"; // injected by build process\n\n\t/**\n\t * The build date for this release in UTC format.\n\t * @property buildDate\n\t * @type String\n\t * @static\n\t **/\n\ts.buildDate = /*=date*/\"Thu, 14 Sep 2017 19:47:47 GMT\"; // injected by build process\n\n})();\n\n\n\n$(window).trigger('createjs');\n"]}