diff --git a/demo/js/lib/pixi.dev.js b/demo/js/lib/pixi.dev.js
index c7dd1268..00a1287f 100644
--- a/demo/js/lib/pixi.dev.js
+++ b/demo/js/lib/pixi.dev.js
@@ -1,14221 +1,27209 @@
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.PIXI = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+(function (global){
+// run the polyfills
+require('./polyfill');
+
+var core = module.exports = require('./core');
+
+// add core plugins.
+core.extras         = require('./extras');
+core.filters        = require('./filters');
+core.interaction    = require('./interaction');
+core.loaders        = require('./loaders');
+core.mesh           = require('./mesh');
+core.ticker         = require('./ticker');
+
+// export a premade loader instance
+core.loader = new core.loaders.Loader();
+
+// mixin the deprecation features.
+Object.assign(core, require('./deprecation'));
+
+// Always export pixi globally.
+global.PIXI = core;
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+
+},{"./core":29,"./deprecation":76,"./extras":83,"./filters":100,"./interaction":115,"./loaders":118,"./mesh":124,"./polyfill":128,"./ticker":131}],2:[function(require,module,exports){
+(function (process){
+/*!
+ * async
+ * https://github.com/caolan/async
+ *
+ * Copyright 2010-2014 Caolan McMahon
+ * Released under the MIT license
+ */
+/*jshint onevar: false, indent:4 */
+/*global setImmediate: false, setTimeout: false, console: false */
+(function () {
+
+    var async = {};
+
+    // global on the server, window in the browser
+    var root, previous_async;
+
+    root = this;
+    if (root != null) {
+      previous_async = root.async;
+    }
+
+    async.noConflict = function () {
+        root.async = previous_async;
+        return async;
+    };
+
+    function only_once(fn) {
+        var called = false;
+        return function() {
+            if (called) throw new Error("Callback was already called.");
+            called = true;
+            fn.apply(root, arguments);
+        }
+    }
+
+    //// cross-browser compatiblity functions ////
+
+    var _toString = Object.prototype.toString;
+
+    var _isArray = Array.isArray || function (obj) {
+        return _toString.call(obj) === '[object Array]';
+    };
+
+    var _each = function (arr, iterator) {
+        if (arr.forEach) {
+            return arr.forEach(iterator);
+        }
+        for (var i = 0; i < arr.length; i += 1) {
+            iterator(arr[i], i, arr);
+        }
+    };
+
+    var _map = function (arr, iterator) {
+        if (arr.map) {
+            return arr.map(iterator);
+        }
+        var results = [];
+        _each(arr, function (x, i, a) {
+            results.push(iterator(x, i, a));
+        });
+        return results;
+    };
+
+    var _reduce = function (arr, iterator, memo) {
+        if (arr.reduce) {
+            return arr.reduce(iterator, memo);
+        }
+        _each(arr, function (x, i, a) {
+            memo = iterator(memo, x, i, a);
+        });
+        return memo;
+    };
+
+    var _keys = function (obj) {
+        if (Object.keys) {
+            return Object.keys(obj);
+        }
+        var keys = [];
+        for (var k in obj) {
+            if (obj.hasOwnProperty(k)) {
+                keys.push(k);
+            }
+        }
+        return keys;
+    };
+
+    //// exported async module functions ////
+
+    //// nextTick implementation with browser-compatible fallback ////
+    if (typeof process === 'undefined' || !(process.nextTick)) {
+        if (typeof setImmediate === 'function') {
+            async.nextTick = function (fn) {
+                // not a direct alias for IE10 compatibility
+                setImmediate(fn);
+            };
+            async.setImmediate = async.nextTick;
+        }
+        else {
+            async.nextTick = function (fn) {
+                setTimeout(fn, 0);
+            };
+            async.setImmediate = async.nextTick;
+        }
+    }
+    else {
+        async.nextTick = process.nextTick;
+        if (typeof setImmediate !== 'undefined') {
+            async.setImmediate = function (fn) {
+              // not a direct alias for IE10 compatibility
+              setImmediate(fn);
+            };
+        }
+        else {
+            async.setImmediate = async.nextTick;
+        }
+    }
+
+    async.each = function (arr, iterator, callback) {
+        callback = callback || function () {};
+        if (!arr.length) {
+            return callback();
+        }
+        var completed = 0;
+        _each(arr, function (x) {
+            iterator(x, only_once(done) );
+        });
+        function done(err) {
+          if (err) {
+              callback(err);
+              callback = function () {};
+          }
+          else {
+              completed += 1;
+              if (completed >= arr.length) {
+                  callback();
+              }
+          }
+        }
+    };
+    async.forEach = async.each;
+
+    async.eachSeries = function (arr, iterator, callback) {
+        callback = callback || function () {};
+        if (!arr.length) {
+            return callback();
+        }
+        var completed = 0;
+        var iterate = function () {
+            iterator(arr[completed], function (err) {
+                if (err) {
+                    callback(err);
+                    callback = function () {};
+                }
+                else {
+                    completed += 1;
+                    if (completed >= arr.length) {
+                        callback();
+                    }
+                    else {
+                        iterate();
+                    }
+                }
+            });
+        };
+        iterate();
+    };
+    async.forEachSeries = async.eachSeries;
+
+    async.eachLimit = function (arr, limit, iterator, callback) {
+        var fn = _eachLimit(limit);
+        fn.apply(null, [arr, iterator, callback]);
+    };
+    async.forEachLimit = async.eachLimit;
+
+    var _eachLimit = function (limit) {
+
+        return function (arr, iterator, callback) {
+            callback = callback || function () {};
+            if (!arr.length || limit <= 0) {
+                return callback();
+            }
+            var completed = 0;
+            var started = 0;
+            var running = 0;
+
+            (function replenish () {
+                if (completed >= arr.length) {
+                    return callback();
+                }
+
+                while (running < limit && started < arr.length) {
+                    started += 1;
+                    running += 1;
+                    iterator(arr[started - 1], function (err) {
+                        if (err) {
+                            callback(err);
+                            callback = function () {};
+                        }
+                        else {
+                            completed += 1;
+                            running -= 1;
+                            if (completed >= arr.length) {
+                                callback();
+                            }
+                            else {
+                                replenish();
+                            }
+                        }
+                    });
+                }
+            })();
+        };
+    };
+
+
+    var doParallel = function (fn) {
+        return function () {
+            var args = Array.prototype.slice.call(arguments);
+            return fn.apply(null, [async.each].concat(args));
+        };
+    };
+    var doParallelLimit = function(limit, fn) {
+        return function () {
+            var args = Array.prototype.slice.call(arguments);
+            return fn.apply(null, [_eachLimit(limit)].concat(args));
+        };
+    };
+    var doSeries = function (fn) {
+        return function () {
+            var args = Array.prototype.slice.call(arguments);
+            return fn.apply(null, [async.eachSeries].concat(args));
+        };
+    };
+
+
+    var _asyncMap = function (eachfn, arr, iterator, callback) {
+        arr = _map(arr, function (x, i) {
+            return {index: i, value: x};
+        });
+        if (!callback) {
+            eachfn(arr, function (x, callback) {
+                iterator(x.value, function (err) {
+                    callback(err);
+                });
+            });
+        } else {
+            var results = [];
+            eachfn(arr, function (x, callback) {
+                iterator(x.value, function (err, v) {
+                    results[x.index] = v;
+                    callback(err);
+                });
+            }, function (err) {
+                callback(err, results);
+            });
+        }
+    };
+    async.map = doParallel(_asyncMap);
+    async.mapSeries = doSeries(_asyncMap);
+    async.mapLimit = function (arr, limit, iterator, callback) {
+        return _mapLimit(limit)(arr, iterator, callback);
+    };
+
+    var _mapLimit = function(limit) {
+        return doParallelLimit(limit, _asyncMap);
+    };
+
+    // reduce only has a series version, as doing reduce in parallel won't
+    // work in many situations.
+    async.reduce = function (arr, memo, iterator, callback) {
+        async.eachSeries(arr, function (x, callback) {
+            iterator(memo, x, function (err, v) {
+                memo = v;
+                callback(err);
+            });
+        }, function (err) {
+            callback(err, memo);
+        });
+    };
+    // inject alias
+    async.inject = async.reduce;
+    // foldl alias
+    async.foldl = async.reduce;
+
+    async.reduceRight = function (arr, memo, iterator, callback) {
+        var reversed = _map(arr, function (x) {
+            return x;
+        }).reverse();
+        async.reduce(reversed, memo, iterator, callback);
+    };
+    // foldr alias
+    async.foldr = async.reduceRight;
+
+    var _filter = function (eachfn, arr, iterator, callback) {
+        var results = [];
+        arr = _map(arr, function (x, i) {
+            return {index: i, value: x};
+        });
+        eachfn(arr, function (x, callback) {
+            iterator(x.value, function (v) {
+                if (v) {
+                    results.push(x);
+                }
+                callback();
+            });
+        }, function (err) {
+            callback(_map(results.sort(function (a, b) {
+                return a.index - b.index;
+            }), function (x) {
+                return x.value;
+            }));
+        });
+    };
+    async.filter = doParallel(_filter);
+    async.filterSeries = doSeries(_filter);
+    // select alias
+    async.select = async.filter;
+    async.selectSeries = async.filterSeries;
+
+    var _reject = function (eachfn, arr, iterator, callback) {
+        var results = [];
+        arr = _map(arr, function (x, i) {
+            return {index: i, value: x};
+        });
+        eachfn(arr, function (x, callback) {
+            iterator(x.value, function (v) {
+                if (!v) {
+                    results.push(x);
+                }
+                callback();
+            });
+        }, function (err) {
+            callback(_map(results.sort(function (a, b) {
+                return a.index - b.index;
+            }), function (x) {
+                return x.value;
+            }));
+        });
+    };
+    async.reject = doParallel(_reject);
+    async.rejectSeries = doSeries(_reject);
+
+    var _detect = function (eachfn, arr, iterator, main_callback) {
+        eachfn(arr, function (x, callback) {
+            iterator(x, function (result) {
+                if (result) {
+                    main_callback(x);
+                    main_callback = function () {};
+                }
+                else {
+                    callback();
+                }
+            });
+        }, function (err) {
+            main_callback();
+        });
+    };
+    async.detect = doParallel(_detect);
+    async.detectSeries = doSeries(_detect);
+
+    async.some = function (arr, iterator, main_callback) {
+        async.each(arr, function (x, callback) {
+            iterator(x, function (v) {
+                if (v) {
+                    main_callback(true);
+                    main_callback = function () {};
+                }
+                callback();
+            });
+        }, function (err) {
+            main_callback(false);
+        });
+    };
+    // any alias
+    async.any = async.some;
+
+    async.every = function (arr, iterator, main_callback) {
+        async.each(arr, function (x, callback) {
+            iterator(x, function (v) {
+                if (!v) {
+                    main_callback(false);
+                    main_callback = function () {};
+                }
+                callback();
+            });
+        }, function (err) {
+            main_callback(true);
+        });
+    };
+    // all alias
+    async.all = async.every;
+
+    async.sortBy = function (arr, iterator, callback) {
+        async.map(arr, function (x, callback) {
+            iterator(x, function (err, criteria) {
+                if (err) {
+                    callback(err);
+                }
+                else {
+                    callback(null, {value: x, criteria: criteria});
+                }
+            });
+        }, function (err, results) {
+            if (err) {
+                return callback(err);
+            }
+            else {
+                var fn = function (left, right) {
+                    var a = left.criteria, b = right.criteria;
+                    return a < b ? -1 : a > b ? 1 : 0;
+                };
+                callback(null, _map(results.sort(fn), function (x) {
+                    return x.value;
+                }));
+            }
+        });
+    };
+
+    async.auto = function (tasks, callback) {
+        callback = callback || function () {};
+        var keys = _keys(tasks);
+        var remainingTasks = keys.length
+        if (!remainingTasks) {
+            return callback();
+        }
+
+        var results = {};
+
+        var listeners = [];
+        var addListener = function (fn) {
+            listeners.unshift(fn);
+        };
+        var removeListener = function (fn) {
+            for (var i = 0; i < listeners.length; i += 1) {
+                if (listeners[i] === fn) {
+                    listeners.splice(i, 1);
+                    return;
+                }
+            }
+        };
+        var taskComplete = function () {
+            remainingTasks--
+            _each(listeners.slice(0), function (fn) {
+                fn();
+            });
+        };
+
+        addListener(function () {
+            if (!remainingTasks) {
+                var theCallback = callback;
+                // prevent final callback from calling itself if it errors
+                callback = function () {};
+
+                theCallback(null, results);
+            }
+        });
+
+        _each(keys, function (k) {
+            var task = _isArray(tasks[k]) ? tasks[k]: [tasks[k]];
+            var taskCallback = function (err) {
+                var args = Array.prototype.slice.call(arguments, 1);
+                if (args.length <= 1) {
+                    args = args[0];
+                }
+                if (err) {
+                    var safeResults = {};
+                    _each(_keys(results), function(rkey) {
+                        safeResults[rkey] = results[rkey];
+                    });
+                    safeResults[k] = args;
+                    callback(err, safeResults);
+                    // stop subsequent errors hitting callback multiple times
+                    callback = function () {};
+                }
+                else {
+                    results[k] = args;
+                    async.setImmediate(taskComplete);
+                }
+            };
+            var requires = task.slice(0, Math.abs(task.length - 1)) || [];
+            var ready = function () {
+                return _reduce(requires, function (a, x) {
+                    return (a && results.hasOwnProperty(x));
+                }, true) && !results.hasOwnProperty(k);
+            };
+            if (ready()) {
+                task[task.length - 1](taskCallback, results);
+            }
+            else {
+                var listener = function () {
+                    if (ready()) {
+                        removeListener(listener);
+                        task[task.length - 1](taskCallback, results);
+                    }
+                };
+                addListener(listener);
+            }
+        });
+    };
+
+    async.retry = function(times, task, callback) {
+        var DEFAULT_TIMES = 5;
+        var attempts = [];
+        // Use defaults if times not passed
+        if (typeof times === 'function') {
+            callback = task;
+            task = times;
+            times = DEFAULT_TIMES;
+        }
+        // Make sure times is a number
+        times = parseInt(times, 10) || DEFAULT_TIMES;
+        var wrappedTask = function(wrappedCallback, wrappedResults) {
+            var retryAttempt = function(task, finalAttempt) {
+                return function(seriesCallback) {
+                    task(function(err, result){
+                        seriesCallback(!err || finalAttempt, {err: err, result: result});
+                    }, wrappedResults);
+                };
+            };
+            while (times) {
+                attempts.push(retryAttempt(task, !(times-=1)));
+            }
+            async.series(attempts, function(done, data){
+                data = data[data.length - 1];
+                (wrappedCallback || callback)(data.err, data.result);
+            });
+        }
+        // If a callback is passed, run this as a controll flow
+        return callback ? wrappedTask() : wrappedTask
+    };
+
+    async.waterfall = function (tasks, callback) {
+        callback = callback || function () {};
+        if (!_isArray(tasks)) {
+          var err = new Error('First argument to waterfall must be an array of functions');
+          return callback(err);
+        }
+        if (!tasks.length) {
+            return callback();
+        }
+        var wrapIterator = function (iterator) {
+            return function (err) {
+                if (err) {
+                    callback.apply(null, arguments);
+                    callback = function () {};
+                }
+                else {
+                    var args = Array.prototype.slice.call(arguments, 1);
+                    var next = iterator.next();
+                    if (next) {
+                        args.push(wrapIterator(next));
+                    }
+                    else {
+                        args.push(callback);
+                    }
+                    async.setImmediate(function () {
+                        iterator.apply(null, args);
+                    });
+                }
+            };
+        };
+        wrapIterator(async.iterator(tasks))();
+    };
+
+    var _parallel = function(eachfn, tasks, callback) {
+        callback = callback || function () {};
+        if (_isArray(tasks)) {
+            eachfn.map(tasks, function (fn, callback) {
+                if (fn) {
+                    fn(function (err) {
+                        var args = Array.prototype.slice.call(arguments, 1);
+                        if (args.length <= 1) {
+                            args = args[0];
+                        }
+                        callback.call(null, err, args);
+                    });
+                }
+            }, callback);
+        }
+        else {
+            var results = {};
+            eachfn.each(_keys(tasks), function (k, callback) {
+                tasks[k](function (err) {
+                    var args = Array.prototype.slice.call(arguments, 1);
+                    if (args.length <= 1) {
+                        args = args[0];
+                    }
+                    results[k] = args;
+                    callback(err);
+                });
+            }, function (err) {
+                callback(err, results);
+            });
+        }
+    };
+
+    async.parallel = function (tasks, callback) {
+        _parallel({ map: async.map, each: async.each }, tasks, callback);
+    };
+
+    async.parallelLimit = function(tasks, limit, callback) {
+        _parallel({ map: _mapLimit(limit), each: _eachLimit(limit) }, tasks, callback);
+    };
+
+    async.series = function (tasks, callback) {
+        callback = callback || function () {};
+        if (_isArray(tasks)) {
+            async.mapSeries(tasks, function (fn, callback) {
+                if (fn) {
+                    fn(function (err) {
+                        var args = Array.prototype.slice.call(arguments, 1);
+                        if (args.length <= 1) {
+                            args = args[0];
+                        }
+                        callback.call(null, err, args);
+                    });
+                }
+            }, callback);
+        }
+        else {
+            var results = {};
+            async.eachSeries(_keys(tasks), function (k, callback) {
+                tasks[k](function (err) {
+                    var args = Array.prototype.slice.call(arguments, 1);
+                    if (args.length <= 1) {
+                        args = args[0];
+                    }
+                    results[k] = args;
+                    callback(err);
+                });
+            }, function (err) {
+                callback(err, results);
+            });
+        }
+    };
+
+    async.iterator = function (tasks) {
+        var makeCallback = function (index) {
+            var fn = function () {
+                if (tasks.length) {
+                    tasks[index].apply(null, arguments);
+                }
+                return fn.next();
+            };
+            fn.next = function () {
+                return (index < tasks.length - 1) ? makeCallback(index + 1): null;
+            };
+            return fn;
+        };
+        return makeCallback(0);
+    };
+
+    async.apply = function (fn) {
+        var args = Array.prototype.slice.call(arguments, 1);
+        return function () {
+            return fn.apply(
+                null, args.concat(Array.prototype.slice.call(arguments))
+            );
+        };
+    };
+
+    var _concat = function (eachfn, arr, fn, callback) {
+        var r = [];
+        eachfn(arr, function (x, cb) {
+            fn(x, function (err, y) {
+                r = r.concat(y || []);
+                cb(err);
+            });
+        }, function (err) {
+            callback(err, r);
+        });
+    };
+    async.concat = doParallel(_concat);
+    async.concatSeries = doSeries(_concat);
+
+    async.whilst = function (test, iterator, callback) {
+        if (test()) {
+            iterator(function (err) {
+                if (err) {
+                    return callback(err);
+                }
+                async.whilst(test, iterator, callback);
+            });
+        }
+        else {
+            callback();
+        }
+    };
+
+    async.doWhilst = function (iterator, test, callback) {
+        iterator(function (err) {
+            if (err) {
+                return callback(err);
+            }
+            var args = Array.prototype.slice.call(arguments, 1);
+            if (test.apply(null, args)) {
+                async.doWhilst(iterator, test, callback);
+            }
+            else {
+                callback();
+            }
+        });
+    };
+
+    async.until = function (test, iterator, callback) {
+        if (!test()) {
+            iterator(function (err) {
+                if (err) {
+                    return callback(err);
+                }
+                async.until(test, iterator, callback);
+            });
+        }
+        else {
+            callback();
+        }
+    };
+
+    async.doUntil = function (iterator, test, callback) {
+        iterator(function (err) {
+            if (err) {
+                return callback(err);
+            }
+            var args = Array.prototype.slice.call(arguments, 1);
+            if (!test.apply(null, args)) {
+                async.doUntil(iterator, test, callback);
+            }
+            else {
+                callback();
+            }
+        });
+    };
+
+    async.queue = function (worker, concurrency) {
+        if (concurrency === undefined) {
+            concurrency = 1;
+        }
+        function _insert(q, data, pos, callback) {
+          if (!q.started){
+            q.started = true;
+          }
+          if (!_isArray(data)) {
+              data = [data];
+          }
+          if(data.length == 0) {
+             // call drain immediately if there are no tasks
+             return async.setImmediate(function() {
+                 if (q.drain) {
+                     q.drain();
+                 }
+             });
+          }
+          _each(data, function(task) {
+              var item = {
+                  data: task,
+                  callback: typeof callback === 'function' ? callback : null
+              };
+
+              if (pos) {
+                q.tasks.unshift(item);
+              } else {
+                q.tasks.push(item);
+              }
+
+              if (q.saturated && q.tasks.length === q.concurrency) {
+                  q.saturated();
+              }
+              async.setImmediate(q.process);
+          });
+        }
+
+        var workers = 0;
+        var q = {
+            tasks: [],
+            concurrency: concurrency,
+            saturated: null,
+            empty: null,
+            drain: null,
+            started: false,
+            paused: false,
+            push: function (data, callback) {
+              _insert(q, data, false, callback);
+            },
+            kill: function () {
+              q.drain = null;
+              q.tasks = [];
+            },
+            unshift: function (data, callback) {
+              _insert(q, data, true, callback);
+            },
+            process: function () {
+                if (!q.paused && workers < q.concurrency && q.tasks.length) {
+                    var task = q.tasks.shift();
+                    if (q.empty && q.tasks.length === 0) {
+                        q.empty();
+                    }
+                    workers += 1;
+                    var next = function () {
+                        workers -= 1;
+                        if (task.callback) {
+                            task.callback.apply(task, arguments);
+                        }
+                        if (q.drain && q.tasks.length + workers === 0) {
+                            q.drain();
+                        }
+                        q.process();
+                    };
+                    var cb = only_once(next);
+                    worker(task.data, cb);
+                }
+            },
+            length: function () {
+                return q.tasks.length;
+            },
+            running: function () {
+                return workers;
+            },
+            idle: function() {
+                return q.tasks.length + workers === 0;
+            },
+            pause: function () {
+                if (q.paused === true) { return; }
+                q.paused = true;
+                q.process();
+            },
+            resume: function () {
+                if (q.paused === false) { return; }
+                q.paused = false;
+                q.process();
+            }
+        };
+        return q;
+    };
+    
+    async.priorityQueue = function (worker, concurrency) {
+        
+        function _compareTasks(a, b){
+          return a.priority - b.priority;
+        };
+        
+        function _binarySearch(sequence, item, compare) {
+          var beg = -1,
+              end = sequence.length - 1;
+          while (beg < end) {
+            var mid = beg + ((end - beg + 1) >>> 1);
+            if (compare(item, sequence[mid]) >= 0) {
+              beg = mid;
+            } else {
+              end = mid - 1;
+            }
+          }
+          return beg;
+        }
+        
+        function _insert(q, data, priority, callback) {
+          if (!q.started){
+            q.started = true;
+          }
+          if (!_isArray(data)) {
+              data = [data];
+          }
+          if(data.length == 0) {
+             // call drain immediately if there are no tasks
+             return async.setImmediate(function() {
+                 if (q.drain) {
+                     q.drain();
+                 }
+             });
+          }
+          _each(data, function(task) {
+              var item = {
+                  data: task,
+                  priority: priority,
+                  callback: typeof callback === 'function' ? callback : null
+              };
+              
+              q.tasks.splice(_binarySearch(q.tasks, item, _compareTasks) + 1, 0, item);
+
+              if (q.saturated && q.tasks.length === q.concurrency) {
+                  q.saturated();
+              }
+              async.setImmediate(q.process);
+          });
+        }
+        
+        // Start with a normal queue
+        var q = async.queue(worker, concurrency);
+        
+        // Override push to accept second parameter representing priority
+        q.push = function (data, priority, callback) {
+          _insert(q, data, priority, callback);
+        };
+        
+        // Remove unshift function
+        delete q.unshift;
+
+        return q;
+    };
+
+    async.cargo = function (worker, payload) {
+        var working     = false,
+            tasks       = [];
+
+        var cargo = {
+            tasks: tasks,
+            payload: payload,
+            saturated: null,
+            empty: null,
+            drain: null,
+            drained: true,
+            push: function (data, callback) {
+                if (!_isArray(data)) {
+                    data = [data];
+                }
+                _each(data, function(task) {
+                    tasks.push({
+                        data: task,
+                        callback: typeof callback === 'function' ? callback : null
+                    });
+                    cargo.drained = false;
+                    if (cargo.saturated && tasks.length === payload) {
+                        cargo.saturated();
+                    }
+                });
+                async.setImmediate(cargo.process);
+            },
+            process: function process() {
+                if (working) return;
+                if (tasks.length === 0) {
+                    if(cargo.drain && !cargo.drained) cargo.drain();
+                    cargo.drained = true;
+                    return;
+                }
+
+                var ts = typeof payload === 'number'
+                            ? tasks.splice(0, payload)
+                            : tasks.splice(0, tasks.length);
+
+                var ds = _map(ts, function (task) {
+                    return task.data;
+                });
+
+                if(cargo.empty) cargo.empty();
+                working = true;
+                worker(ds, function () {
+                    working = false;
+
+                    var args = arguments;
+                    _each(ts, function (data) {
+                        if (data.callback) {
+                            data.callback.apply(null, args);
+                        }
+                    });
+
+                    process();
+                });
+            },
+            length: function () {
+                return tasks.length;
+            },
+            running: function () {
+                return working;
+            }
+        };
+        return cargo;
+    };
+
+    var _console_fn = function (name) {
+        return function (fn) {
+            var args = Array.prototype.slice.call(arguments, 1);
+            fn.apply(null, args.concat([function (err) {
+                var args = Array.prototype.slice.call(arguments, 1);
+                if (typeof console !== 'undefined') {
+                    if (err) {
+                        if (console.error) {
+                            console.error(err);
+                        }
+                    }
+                    else if (console[name]) {
+                        _each(args, function (x) {
+                            console[name](x);
+                        });
+                    }
+                }
+            }]));
+        };
+    };
+    async.log = _console_fn('log');
+    async.dir = _console_fn('dir');
+    /*async.info = _console_fn('info');
+    async.warn = _console_fn('warn');
+    async.error = _console_fn('error');*/
+
+    async.memoize = function (fn, hasher) {
+        var memo = {};
+        var queues = {};
+        hasher = hasher || function (x) {
+            return x;
+        };
+        var memoized = function () {
+            var args = Array.prototype.slice.call(arguments);
+            var callback = args.pop();
+            var key = hasher.apply(null, args);
+            if (key in memo) {
+                async.nextTick(function () {
+                    callback.apply(null, memo[key]);
+                });
+            }
+            else if (key in queues) {
+                queues[key].push(callback);
+            }
+            else {
+                queues[key] = [callback];
+                fn.apply(null, args.concat([function () {
+                    memo[key] = arguments;
+                    var q = queues[key];
+                    delete queues[key];
+                    for (var i = 0, l = q.length; i < l; i++) {
+                      q[i].apply(null, arguments);
+                    }
+                }]));
+            }
+        };
+        memoized.memo = memo;
+        memoized.unmemoized = fn;
+        return memoized;
+    };
+
+    async.unmemoize = function (fn) {
+      return function () {
+        return (fn.unmemoized || fn).apply(null, arguments);
+      };
+    };
+
+    async.times = function (count, iterator, callback) {
+        var counter = [];
+        for (var i = 0; i < count; i++) {
+            counter.push(i);
+        }
+        return async.map(counter, iterator, callback);
+    };
+
+    async.timesSeries = function (count, iterator, callback) {
+        var counter = [];
+        for (var i = 0; i < count; i++) {
+            counter.push(i);
+        }
+        return async.mapSeries(counter, iterator, callback);
+    };
+
+    async.seq = function (/* functions... */) {
+        var fns = arguments;
+        return function () {
+            var that = this;
+            var args = Array.prototype.slice.call(arguments);
+            var callback = args.pop();
+            async.reduce(fns, args, function (newargs, fn, cb) {
+                fn.apply(that, newargs.concat([function () {
+                    var err = arguments[0];
+                    var nextargs = Array.prototype.slice.call(arguments, 1);
+                    cb(err, nextargs);
+                }]))
+            },
+            function (err, results) {
+                callback.apply(that, [err].concat(results));
+            });
+        };
+    };
+
+    async.compose = function (/* functions... */) {
+      return async.seq.apply(null, Array.prototype.reverse.call(arguments));
+    };
+
+    var _applyEach = function (eachfn, fns /*args...*/) {
+        var go = function () {
+            var that = this;
+            var args = Array.prototype.slice.call(arguments);
+            var callback = args.pop();
+            return eachfn(fns, function (fn, cb) {
+                fn.apply(that, args.concat([cb]));
+            },
+            callback);
+        };
+        if (arguments.length > 2) {
+            var args = Array.prototype.slice.call(arguments, 2);
+            return go.apply(this, args);
+        }
+        else {
+            return go;
+        }
+    };
+    async.applyEach = doParallel(_applyEach);
+    async.applyEachSeries = doSeries(_applyEach);
+
+    async.forever = function (fn, callback) {
+        function next(err) {
+            if (err) {
+                if (callback) {
+                    return callback(err);
+                }
+                throw err;
+            }
+            fn(next);
+        }
+        next();
+    };
+
+    // Node.js
+    if (typeof module !== 'undefined' && module.exports) {
+        module.exports = async;
+    }
+    // AMD / RequireJS
+    else if (typeof define !== 'undefined' && define.amd) {
+        define([], function () {
+            return async;
+        });
+    }
+    // included directly via <script> tag
+    else {
+        root.async = async;
+    }
+
+}());
+
+}).call(this,require('_process'))
+
+},{"_process":4}],3:[function(require,module,exports){
+(function (process){
+// Copyright Joyent, Inc. and other Node contributors.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a
+// copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to permit
+// persons to whom the Software is furnished to do so, subject to the
+// following conditions:
+//
+// The above copyright notice and this permission notice shall be included
+// in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+// USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+// resolves . and .. elements in a path array with directory names there
+// must be no slashes, empty elements, or device names (c:\) in the array
+// (so also no leading and trailing slashes - it does not distinguish
+// relative and absolute paths)
+function normalizeArray(parts, allowAboveRoot) {
+  // if the path tries to go above the root, `up` ends up > 0
+  var up = 0;
+  for (var i = parts.length - 1; i >= 0; i--) {
+    var last = parts[i];
+    if (last === '.') {
+      parts.splice(i, 1);
+    } else if (last === '..') {
+      parts.splice(i, 1);
+      up++;
+    } else if (up) {
+      parts.splice(i, 1);
+      up--;
+    }
+  }
+
+  // if the path is allowed to go above the root, restore leading ..s
+  if (allowAboveRoot) {
+    for (; up--; up) {
+      parts.unshift('..');
+    }
+  }
+
+  return parts;
+}
+
+// Split a filename into [root, dir, basename, ext], unix version
+// 'root' is just a slash, or nothing.
+var splitPathRe =
+    /^(\/?|)([\s\S]*?)((?:\.{1,2}|[^\/]+?|)(\.[^.\/]*|))(?:[\/]*)$/;
+var splitPath = function(filename) {
+  return splitPathRe.exec(filename).slice(1);
+};
+
+// path.resolve([from ...], to)
+// posix version
+exports.resolve = function() {
+  var resolvedPath = '',
+      resolvedAbsolute = false;
+
+  for (var i = arguments.length - 1; i >= -1 && !resolvedAbsolute; i--) {
+    var path = (i >= 0) ? arguments[i] : process.cwd();
+
+    // Skip empty and invalid entries
+    if (typeof path !== 'string') {
+      throw new TypeError('Arguments to path.resolve must be strings');
+    } else if (!path) {
+      continue;
+    }
+
+    resolvedPath = path + '/' + resolvedPath;
+    resolvedAbsolute = path.charAt(0) === '/';
+  }
+
+  // At this point the path should be resolved to a full absolute path, but
+  // handle relative paths to be safe (might happen when process.cwd() fails)
+
+  // Normalize the path
+  resolvedPath = normalizeArray(filter(resolvedPath.split('/'), function(p) {
+    return !!p;
+  }), !resolvedAbsolute).join('/');
+
+  return ((resolvedAbsolute ? '/' : '') + resolvedPath) || '.';
+};
+
+// path.normalize(path)
+// posix version
+exports.normalize = function(path) {
+  var isAbsolute = exports.isAbsolute(path),
+      trailingSlash = substr(path, -1) === '/';
+
+  // Normalize the path
+  path = normalizeArray(filter(path.split('/'), function(p) {
+    return !!p;
+  }), !isAbsolute).join('/');
+
+  if (!path && !isAbsolute) {
+    path = '.';
+  }
+  if (path && trailingSlash) {
+    path += '/';
+  }
+
+  return (isAbsolute ? '/' : '') + path;
+};
+
+// posix version
+exports.isAbsolute = function(path) {
+  return path.charAt(0) === '/';
+};
+
+// posix version
+exports.join = function() {
+  var paths = Array.prototype.slice.call(arguments, 0);
+  return exports.normalize(filter(paths, function(p, index) {
+    if (typeof p !== 'string') {
+      throw new TypeError('Arguments to path.join must be strings');
+    }
+    return p;
+  }).join('/'));
+};
+
+
+// path.relative(from, to)
+// posix version
+exports.relative = function(from, to) {
+  from = exports.resolve(from).substr(1);
+  to = exports.resolve(to).substr(1);
+
+  function trim(arr) {
+    var start = 0;
+    for (; start < arr.length; start++) {
+      if (arr[start] !== '') break;
+    }
+
+    var end = arr.length - 1;
+    for (; end >= 0; end--) {
+      if (arr[end] !== '') break;
+    }
+
+    if (start > end) return [];
+    return arr.slice(start, end - start + 1);
+  }
+
+  var fromParts = trim(from.split('/'));
+  var toParts = trim(to.split('/'));
+
+  var length = Math.min(fromParts.length, toParts.length);
+  var samePartsLength = length;
+  for (var i = 0; i < length; i++) {
+    if (fromParts[i] !== toParts[i]) {
+      samePartsLength = i;
+      break;
+    }
+  }
+
+  var outputParts = [];
+  for (var i = samePartsLength; i < fromParts.length; i++) {
+    outputParts.push('..');
+  }
+
+  outputParts = outputParts.concat(toParts.slice(samePartsLength));
+
+  return outputParts.join('/');
+};
+
+exports.sep = '/';
+exports.delimiter = ':';
+
+exports.dirname = function(path) {
+  var result = splitPath(path),
+      root = result[0],
+      dir = result[1];
+
+  if (!root && !dir) {
+    // No dirname whatsoever
+    return '.';
+  }
+
+  if (dir) {
+    // It has a dirname, strip trailing slash
+    dir = dir.substr(0, dir.length - 1);
+  }
+
+  return root + dir;
+};
+
+
+exports.basename = function(path, ext) {
+  var f = splitPath(path)[2];
+  // TODO: make this comparison case-insensitive on windows?
+  if (ext && f.substr(-1 * ext.length) === ext) {
+    f = f.substr(0, f.length - ext.length);
+  }
+  return f;
+};
+
+
+exports.extname = function(path) {
+  return splitPath(path)[3];
+};
+
+function filter (xs, f) {
+    if (xs.filter) return xs.filter(f);
+    var res = [];
+    for (var i = 0; i < xs.length; i++) {
+        if (f(xs[i], i, xs)) res.push(xs[i]);
+    }
+    return res;
+}
+
+// String.prototype.substr - negative index don't work in IE8
+var substr = 'ab'.substr(-1) === 'b'
+    ? function (str, start, len) { return str.substr(start, len) }
+    : function (str, start, len) {
+        if (start < 0) start = str.length + start;
+        return str.substr(start, len);
+    }
+;
+
+}).call(this,require('_process'))
+
+},{"_process":4}],4:[function(require,module,exports){
+// shim for using process in browser
+
+var process = module.exports = {};
+var queue = [];
+var draining = false;
+
+function drainQueue() {
+    if (draining) {
+        return;
+    }
+    draining = true;
+    var currentQueue;
+    var len = queue.length;
+    while(len) {
+        currentQueue = queue;
+        queue = [];
+        var i = -1;
+        while (++i < len) {
+            currentQueue[i]();
+        }
+        len = queue.length;
+    }
+    draining = false;
+}
+process.nextTick = function (fun) {
+    queue.push(fun);
+    if (!draining) {
+        setTimeout(drainQueue, 0);
+    }
+};
+
+process.title = 'browser';
+process.browser = true;
+process.env = {};
+process.argv = [];
+process.version = ''; // empty string to avoid regexp issues
+process.versions = {};
+
+function noop() {}
+
+process.on = noop;
+process.addListener = noop;
+process.once = noop;
+process.off = noop;
+process.removeListener = noop;
+process.removeAllListeners = noop;
+process.emit = noop;
+
+process.binding = function (name) {
+    throw new Error('process.binding is not supported');
+};
+
+// TODO(shtylman)
+process.cwd = function () { return '/' };
+process.chdir = function (dir) {
+    throw new Error('process.chdir is not supported');
+};
+process.umask = function() { return 0; };
+
+},{}],5:[function(require,module,exports){
+(function (global){
+/*! http://mths.be/punycode v1.2.4 by @mathias */
+;(function(root) {
+
+  /** Detect free variables */
+  var freeExports = typeof exports == 'object' && exports;
+  var freeModule = typeof module == 'object' && module &&
+    module.exports == freeExports && module;
+  var freeGlobal = typeof global == 'object' && global;
+  if (freeGlobal.global === freeGlobal || freeGlobal.window === freeGlobal) {
+    root = freeGlobal;
+  }
+
+  /**
+   * The `punycode` object.
+   * @name punycode
+   * @type Object
+   */
+  var punycode,
+
+  /** Highest positive signed 32-bit float value */
+  maxInt = 2147483647, // aka. 0x7FFFFFFF or 2^31-1
+
+  /** Bootstring parameters */
+  base = 36,
+  tMin = 1,
+  tMax = 26,
+  skew = 38,
+  damp = 700,
+  initialBias = 72,
+  initialN = 128, // 0x80
+  delimiter = '-', // '\x2D'
+
+  /** Regular expressions */
+  regexPunycode = /^xn--/,
+  regexNonASCII = /[^ -~]/, // unprintable ASCII chars + non-ASCII chars
+  regexSeparators = /\x2E|\u3002|\uFF0E|\uFF61/g, // RFC 3490 separators
+
+  /** Error messages */
+  errors = {
+    'overflow': 'Overflow: input needs wider integers to process',
+    'not-basic': 'Illegal input >= 0x80 (not a basic code point)',
+    'invalid-input': 'Invalid input'
+  },
+
+  /** Convenience shortcuts */
+  baseMinusTMin = base - tMin,
+  floor = Math.floor,
+  stringFromCharCode = String.fromCharCode,
+
+  /** Temporary variable */
+  key;
+
+  /*--------------------------------------------------------------------------*/
+
+  /**
+   * A generic error utility function.
+   * @private
+   * @param {String} type The error type.
+   * @returns {Error} Throws a `RangeError` with the applicable error message.
+   */
+  function error(type) {
+    throw RangeError(errors[type]);
+  }
+
+  /**
+   * A generic `Array#map` utility function.
+   * @private
+   * @param {Array} array The array to iterate over.
+   * @param {Function} callback The function that gets called for every array
+   * item.
+   * @returns {Array} A new array of values returned by the callback function.
+   */
+  function map(array, fn) {
+    var length = array.length;
+    while (length--) {
+      array[length] = fn(array[length]);
+    }
+    return array;
+  }
+
+  /**
+   * A simple `Array#map`-like wrapper to work with domain name strings.
+   * @private
+   * @param {String} domain The domain name.
+   * @param {Function} callback The function that gets called for every
+   * character.
+   * @returns {Array} A new string of characters returned by the callback
+   * function.
+   */
+  function mapDomain(string, fn) {
+    return map(string.split(regexSeparators), fn).join('.');
+  }
+
+  /**
+   * Creates an array containing the numeric code points of each Unicode
+   * character in the string. While JavaScript uses UCS-2 internally,
+   * this function will convert a pair of surrogate halves (each of which
+   * UCS-2 exposes as separate characters) into a single code point,
+   * matching UTF-16.
+   * @see `punycode.ucs2.encode`
+   * @see <http://mathiasbynens.be/notes/javascript-encoding>
+   * @memberOf punycode.ucs2
+   * @name decode
+   * @param {String} string The Unicode input string (UCS-2).
+   * @returns {Array} The new array of code points.
+   */
+  function ucs2decode(string) {
+    var output = [],
+        counter = 0,
+        length = string.length,
+        value,
+        extra;
+    while (counter < length) {
+      value = string.charCodeAt(counter++);
+      if (value >= 0xD800 && value <= 0xDBFF && counter < length) {
+        // high surrogate, and there is a next character
+        extra = string.charCodeAt(counter++);
+        if ((extra & 0xFC00) == 0xDC00) { // low surrogate
+          output.push(((value & 0x3FF) << 10) + (extra & 0x3FF) + 0x10000);
+        } else {
+          // unmatched surrogate; only append this code unit, in case the next
+          // code unit is the high surrogate of a surrogate pair
+          output.push(value);
+          counter--;
+        }
+      } else {
+        output.push(value);
+      }
+    }
+    return output;
+  }
+
+  /**
+   * Creates a string based on an array of numeric code points.
+   * @see `punycode.ucs2.decode`
+   * @memberOf punycode.ucs2
+   * @name encode
+   * @param {Array} codePoints The array of numeric code points.
+   * @returns {String} The new Unicode string (UCS-2).
+   */
+  function ucs2encode(array) {
+    return map(array, function(value) {
+      var output = '';
+      if (value > 0xFFFF) {
+        value -= 0x10000;
+        output += stringFromCharCode(value >>> 10 & 0x3FF | 0xD800);
+        value = 0xDC00 | value & 0x3FF;
+      }
+      output += stringFromCharCode(value);
+      return output;
+    }).join('');
+  }
+
+  /**
+   * Converts a basic code point into a digit/integer.
+   * @see `digitToBasic()`
+   * @private
+   * @param {Number} codePoint The basic numeric code point value.
+   * @returns {Number} The numeric value of a basic code point (for use in
+   * representing integers) in the range `0` to `base - 1`, or `base` if
+   * the code point does not represent a value.
+   */
+  function basicToDigit(codePoint) {
+    if (codePoint - 48 < 10) {
+      return codePoint - 22;
+    }
+    if (codePoint - 65 < 26) {
+      return codePoint - 65;
+    }
+    if (codePoint - 97 < 26) {
+      return codePoint - 97;
+    }
+    return base;
+  }
+
+  /**
+   * Converts a digit/integer into a basic code point.
+   * @see `basicToDigit()`
+   * @private
+   * @param {Number} digit The numeric value of a basic code point.
+   * @returns {Number} The basic code point whose value (when used for
+   * representing integers) is `digit`, which needs to be in the range
+   * `0` to `base - 1`. If `flag` is non-zero, the uppercase form is
+   * used; else, the lowercase form is used. The behavior is undefined
+   * if `flag` is non-zero and `digit` has no uppercase form.
+   */
+  function digitToBasic(digit, flag) {
+    //  0..25 map to ASCII a..z or A..Z
+    // 26..35 map to ASCII 0..9
+    return digit + 22 + 75 * (digit < 26) - ((flag != 0) << 5);
+  }
+
+  /**
+   * Bias adaptation function as per section 3.4 of RFC 3492.
+   * http://tools.ietf.org/html/rfc3492#section-3.4
+   * @private
+   */
+  function adapt(delta, numPoints, firstTime) {
+    var k = 0;
+    delta = firstTime ? floor(delta / damp) : delta >> 1;
+    delta += floor(delta / numPoints);
+    for (/* no initialization */; delta > baseMinusTMin * tMax >> 1; k += base) {
+      delta = floor(delta / baseMinusTMin);
+    }
+    return floor(k + (baseMinusTMin + 1) * delta / (delta + skew));
+  }
+
+  /**
+   * Converts a Punycode string of ASCII-only symbols to a string of Unicode
+   * symbols.
+   * @memberOf punycode
+   * @param {String} input The Punycode string of ASCII-only symbols.
+   * @returns {String} The resulting string of Unicode symbols.
+   */
+  function decode(input) {
+    // Don't use UCS-2
+    var output = [],
+        inputLength = input.length,
+        out,
+        i = 0,
+        n = initialN,
+        bias = initialBias,
+        basic,
+        j,
+        index,
+        oldi,
+        w,
+        k,
+        digit,
+        t,
+        /** Cached calculation results */
+        baseMinusT;
+
+    // Handle the basic code points: let `basic` be the number of input code
+    // points before the last delimiter, or `0` if there is none, then copy
+    // the first basic code points to the output.
+
+    basic = input.lastIndexOf(delimiter);
+    if (basic < 0) {
+      basic = 0;
+    }
+
+    for (j = 0; j < basic; ++j) {
+      // if it's not a basic code point
+      if (input.charCodeAt(j) >= 0x80) {
+        error('not-basic');
+      }
+      output.push(input.charCodeAt(j));
+    }
+
+    // Main decoding loop: start just after the last delimiter if any basic code
+    // points were copied; start at the beginning otherwise.
+
+    for (index = basic > 0 ? basic + 1 : 0; index < inputLength; /* no final expression */) {
+
+      // `index` is the index of the next character to be consumed.
+      // Decode a generalized variable-length integer into `delta`,
+      // which gets added to `i`. The overflow checking is easier
+      // if we increase `i` as we go, then subtract off its starting
+      // value at the end to obtain `delta`.
+      for (oldi = i, w = 1, k = base; /* no condition */; k += base) {
+
+        if (index >= inputLength) {
+          error('invalid-input');
+        }
+
+        digit = basicToDigit(input.charCodeAt(index++));
+
+        if (digit >= base || digit > floor((maxInt - i) / w)) {
+          error('overflow');
+        }
+
+        i += digit * w;
+        t = k <= bias ? tMin : (k >= bias + tMax ? tMax : k - bias);
+
+        if (digit < t) {
+          break;
+        }
+
+        baseMinusT = base - t;
+        if (w > floor(maxInt / baseMinusT)) {
+          error('overflow');
+        }
+
+        w *= baseMinusT;
+
+      }
+
+      out = output.length + 1;
+      bias = adapt(i - oldi, out, oldi == 0);
+
+      // `i` was supposed to wrap around from `out` to `0`,
+      // incrementing `n` each time, so we'll fix that now:
+      if (floor(i / out) > maxInt - n) {
+        error('overflow');
+      }
+
+      n += floor(i / out);
+      i %= out;
+
+      // Insert `n` at position `i` of the output
+      output.splice(i++, 0, n);
+
+    }
+
+    return ucs2encode(output);
+  }
+
+  /**
+   * Converts a string of Unicode symbols to a Punycode string of ASCII-only
+   * symbols.
+   * @memberOf punycode
+   * @param {String} input The string of Unicode symbols.
+   * @returns {String} The resulting Punycode string of ASCII-only symbols.
+   */
+  function encode(input) {
+    var n,
+        delta,
+        handledCPCount,
+        basicLength,
+        bias,
+        j,
+        m,
+        q,
+        k,
+        t,
+        currentValue,
+        output = [],
+        /** `inputLength` will hold the number of code points in `input`. */
+        inputLength,
+        /** Cached calculation results */
+        handledCPCountPlusOne,
+        baseMinusT,
+        qMinusT;
+
+    // Convert the input in UCS-2 to Unicode
+    input = ucs2decode(input);
+
+    // Cache the length
+    inputLength = input.length;
+
+    // Initialize the state
+    n = initialN;
+    delta = 0;
+    bias = initialBias;
+
+    // Handle the basic code points
+    for (j = 0; j < inputLength; ++j) {
+      currentValue = input[j];
+      if (currentValue < 0x80) {
+        output.push(stringFromCharCode(currentValue));
+      }
+    }
+
+    handledCPCount = basicLength = output.length;
+
+    // `handledCPCount` is the number of code points that have been handled;
+    // `basicLength` is the number of basic code points.
+
+    // Finish the basic string - if it is not empty - with a delimiter
+    if (basicLength) {
+      output.push(delimiter);
+    }
+
+    // Main encoding loop:
+    while (handledCPCount < inputLength) {
+
+      // All non-basic code points < n have been handled already. Find the next
+      // larger one:
+      for (m = maxInt, j = 0; j < inputLength; ++j) {
+        currentValue = input[j];
+        if (currentValue >= n && currentValue < m) {
+          m = currentValue;
+        }
+      }
+
+      // Increase `delta` enough to advance the decoder's <n,i> state to <m,0>,
+      // but guard against overflow
+      handledCPCountPlusOne = handledCPCount + 1;
+      if (m - n > floor((maxInt - delta) / handledCPCountPlusOne)) {
+        error('overflow');
+      }
+
+      delta += (m - n) * handledCPCountPlusOne;
+      n = m;
+
+      for (j = 0; j < inputLength; ++j) {
+        currentValue = input[j];
+
+        if (currentValue < n && ++delta > maxInt) {
+          error('overflow');
+        }
+
+        if (currentValue == n) {
+          // Represent delta as a generalized variable-length integer
+          for (q = delta, k = base; /* no condition */; k += base) {
+            t = k <= bias ? tMin : (k >= bias + tMax ? tMax : k - bias);
+            if (q < t) {
+              break;
+            }
+            qMinusT = q - t;
+            baseMinusT = base - t;
+            output.push(
+              stringFromCharCode(digitToBasic(t + qMinusT % baseMinusT, 0))
+            );
+            q = floor(qMinusT / baseMinusT);
+          }
+
+          output.push(stringFromCharCode(digitToBasic(q, 0)));
+          bias = adapt(delta, handledCPCountPlusOne, handledCPCount == basicLength);
+          delta = 0;
+          ++handledCPCount;
+        }
+      }
+
+      ++delta;
+      ++n;
+
+    }
+    return output.join('');
+  }
+
+  /**
+   * Converts a Punycode string representing a domain name to Unicode. Only the
+   * Punycoded parts of the domain name will be converted, i.e. it doesn't
+   * matter if you call it on a string that has already been converted to
+   * Unicode.
+   * @memberOf punycode
+   * @param {String} domain The Punycode domain name to convert to Unicode.
+   * @returns {String} The Unicode representation of the given Punycode
+   * string.
+   */
+  function toUnicode(domain) {
+    return mapDomain(domain, function(string) {
+      return regexPunycode.test(string)
+        ? decode(string.slice(4).toLowerCase())
+        : string;
+    });
+  }
+
+  /**
+   * Converts a Unicode string representing a domain name to Punycode. Only the
+   * non-ASCII parts of the domain name will be converted, i.e. it doesn't
+   * matter if you call it with a domain that's already in ASCII.
+   * @memberOf punycode
+   * @param {String} domain The domain name to convert, as a Unicode string.
+   * @returns {String} The Punycode representation of the given domain name.
+   */
+  function toASCII(domain) {
+    return mapDomain(domain, function(string) {
+      return regexNonASCII.test(string)
+        ? 'xn--' + encode(string)
+        : string;
+    });
+  }
+
+  /*--------------------------------------------------------------------------*/
+
+  /** Define the public API */
+  punycode = {
+    /**
+     * A string representing the current Punycode.js version number.
+     * @memberOf punycode
+     * @type String
+     */
+    'version': '1.2.4',
+    /**
+     * An object of methods to convert from JavaScript's internal character
+     * representation (UCS-2) to Unicode code points, and back.
+     * @see <http://mathiasbynens.be/notes/javascript-encoding>
+     * @memberOf punycode
+     * @type Object
+     */
+    'ucs2': {
+      'decode': ucs2decode,
+      'encode': ucs2encode
+    },
+    'decode': decode,
+    'encode': encode,
+    'toASCII': toASCII,
+    'toUnicode': toUnicode
+  };
+
+  /** Expose `punycode` */
+  // Some AMD build optimizers, like r.js, check for specific condition patterns
+  // like the following:
+  if (
+    typeof define == 'function' &&
+    typeof define.amd == 'object' &&
+    define.amd
+  ) {
+    define('punycode', function() {
+      return punycode;
+    });
+  } else if (freeExports && !freeExports.nodeType) {
+    if (freeModule) { // in Node.js or RingoJS v0.8.0+
+      freeModule.exports = punycode;
+    } else { // in Narwhal or RingoJS v0.7.0-
+      for (key in punycode) {
+        punycode.hasOwnProperty(key) && (freeExports[key] = punycode[key]);
+      }
+    }
+  } else { // in Rhino or a web browser
+    root.punycode = punycode;
+  }
+
+}(this));
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+
+},{}],6:[function(require,module,exports){
+// Copyright Joyent, Inc. and other Node contributors.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a
+// copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to permit
+// persons to whom the Software is furnished to do so, subject to the
+// following conditions:
+//
+// The above copyright notice and this permission notice shall be included
+// in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+// USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+'use strict';
+
+// If obj.hasOwnProperty has been overridden, then calling
+// obj.hasOwnProperty(prop) will break.
+// See: https://github.com/joyent/node/issues/1707
+function hasOwnProperty(obj, prop) {
+  return Object.prototype.hasOwnProperty.call(obj, prop);
+}
+
+module.exports = function(qs, sep, eq, options) {
+  sep = sep || '&';
+  eq = eq || '=';
+  var obj = {};
+
+  if (typeof qs !== 'string' || qs.length === 0) {
+    return obj;
+  }
+
+  var regexp = /\+/g;
+  qs = qs.split(sep);
+
+  var maxKeys = 1000;
+  if (options && typeof options.maxKeys === 'number') {
+    maxKeys = options.maxKeys;
+  }
+
+  var len = qs.length;
+  // maxKeys <= 0 means that we should not limit keys count
+  if (maxKeys > 0 && len > maxKeys) {
+    len = maxKeys;
+  }
+
+  for (var i = 0; i < len; ++i) {
+    var x = qs[i].replace(regexp, '%20'),
+        idx = x.indexOf(eq),
+        kstr, vstr, k, v;
+
+    if (idx >= 0) {
+      kstr = x.substr(0, idx);
+      vstr = x.substr(idx + 1);
+    } else {
+      kstr = x;
+      vstr = '';
+    }
+
+    k = decodeURIComponent(kstr);
+    v = decodeURIComponent(vstr);
+
+    if (!hasOwnProperty(obj, k)) {
+      obj[k] = v;
+    } else if (isArray(obj[k])) {
+      obj[k].push(v);
+    } else {
+      obj[k] = [obj[k], v];
+    }
+  }
+
+  return obj;
+};
+
+var isArray = Array.isArray || function (xs) {
+  return Object.prototype.toString.call(xs) === '[object Array]';
+};
+
+},{}],7:[function(require,module,exports){
+// Copyright Joyent, Inc. and other Node contributors.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a
+// copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to permit
+// persons to whom the Software is furnished to do so, subject to the
+// following conditions:
+//
+// The above copyright notice and this permission notice shall be included
+// in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+// USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+'use strict';
+
+var stringifyPrimitive = function(v) {
+  switch (typeof v) {
+    case 'string':
+      return v;
+
+    case 'boolean':
+      return v ? 'true' : 'false';
+
+    case 'number':
+      return isFinite(v) ? v : '';
+
+    default:
+      return '';
+  }
+};
+
+module.exports = function(obj, sep, eq, name) {
+  sep = sep || '&';
+  eq = eq || '=';
+  if (obj === null) {
+    obj = undefined;
+  }
+
+  if (typeof obj === 'object') {
+    return map(objectKeys(obj), function(k) {
+      var ks = encodeURIComponent(stringifyPrimitive(k)) + eq;
+      if (isArray(obj[k])) {
+        return map(obj[k], function(v) {
+          return ks + encodeURIComponent(stringifyPrimitive(v));
+        }).join(sep);
+      } else {
+        return ks + encodeURIComponent(stringifyPrimitive(obj[k]));
+      }
+    }).join(sep);
+
+  }
+
+  if (!name) return '';
+  return encodeURIComponent(stringifyPrimitive(name)) + eq +
+         encodeURIComponent(stringifyPrimitive(obj));
+};
+
+var isArray = Array.isArray || function (xs) {
+  return Object.prototype.toString.call(xs) === '[object Array]';
+};
+
+function map (xs, f) {
+  if (xs.map) return xs.map(f);
+  var res = [];
+  for (var i = 0; i < xs.length; i++) {
+    res.push(f(xs[i], i));
+  }
+  return res;
+}
+
+var objectKeys = Object.keys || function (obj) {
+  var res = [];
+  for (var key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) res.push(key);
+  }
+  return res;
+};
+
+},{}],8:[function(require,module,exports){
+'use strict';
+
+exports.decode = exports.parse = require('./decode');
+exports.encode = exports.stringify = require('./encode');
+
+},{"./decode":6,"./encode":7}],9:[function(require,module,exports){
+// Copyright Joyent, Inc. and other Node contributors.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a
+// copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to permit
+// persons to whom the Software is furnished to do so, subject to the
+// following conditions:
+//
+// The above copyright notice and this permission notice shall be included
+// in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+// USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+var punycode = require('punycode');
+
+exports.parse = urlParse;
+exports.resolve = urlResolve;
+exports.resolveObject = urlResolveObject;
+exports.format = urlFormat;
+
+exports.Url = Url;
+
+function Url() {
+  this.protocol = null;
+  this.slashes = null;
+  this.auth = null;
+  this.host = null;
+  this.port = null;
+  this.hostname = null;
+  this.hash = null;
+  this.search = null;
+  this.query = null;
+  this.pathname = null;
+  this.path = null;
+  this.href = null;
+}
+
+// Reference: RFC 3986, RFC 1808, RFC 2396
+
+// define these here so at least they only have to be
+// compiled once on the first module load.
+var protocolPattern = /^([a-z0-9.+-]+:)/i,
+    portPattern = /:[0-9]*$/,
+
+    // RFC 2396: characters reserved for delimiting URLs.
+    // We actually just auto-escape these.
+    delims = ['<', '>', '"', '`', ' ', '\r', '\n', '\t'],
+
+    // RFC 2396: characters not allowed for various reasons.
+    unwise = ['{', '}', '|', '\\', '^', '`'].concat(delims),
+
+    // Allowed by RFCs, but cause of XSS attacks.  Always escape these.
+    autoEscape = ['\''].concat(unwise),
+    // Characters that are never ever allowed in a hostname.
+    // Note that any invalid chars are also handled, but these
+    // are the ones that are *expected* to be seen, so we fast-path
+    // them.
+    nonHostChars = ['%', '/', '?', ';', '#'].concat(autoEscape),
+    hostEndingChars = ['/', '?', '#'],
+    hostnameMaxLen = 255,
+    hostnamePartPattern = /^[a-z0-9A-Z_-]{0,63}$/,
+    hostnamePartStart = /^([a-z0-9A-Z_-]{0,63})(.*)$/,
+    // protocols that can allow "unsafe" and "unwise" chars.
+    unsafeProtocol = {
+      'javascript': true,
+      'javascript:': true
+    },
+    // protocols that never have a hostname.
+    hostlessProtocol = {
+      'javascript': true,
+      'javascript:': true
+    },
+    // protocols that always contain a // bit.
+    slashedProtocol = {
+      'http': true,
+      'https': true,
+      'ftp': true,
+      'gopher': true,
+      'file': true,
+      'http:': true,
+      'https:': true,
+      'ftp:': true,
+      'gopher:': true,
+      'file:': true
+    },
+    querystring = require('querystring');
+
+function urlParse(url, parseQueryString, slashesDenoteHost) {
+  if (url && isObject(url) && url instanceof Url) return url;
+
+  var u = new Url;
+  u.parse(url, parseQueryString, slashesDenoteHost);
+  return u;
+}
+
+Url.prototype.parse = function(url, parseQueryString, slashesDenoteHost) {
+  if (!isString(url)) {
+    throw new TypeError("Parameter 'url' must be a string, not " + typeof url);
+  }
+
+  var rest = url;
+
+  // trim before proceeding.
+  // This is to support parse stuff like "  http://foo.com  \n"
+  rest = rest.trim();
+
+  var proto = protocolPattern.exec(rest);
+  if (proto) {
+    proto = proto[0];
+    var lowerProto = proto.toLowerCase();
+    this.protocol = lowerProto;
+    rest = rest.substr(proto.length);
+  }
+
+  // figure out if it's got a host
+  // user@server is *always* interpreted as a hostname, and url
+  // resolution will treat //foo/bar as host=foo,path=bar because that's
+  // how the browser resolves relative URLs.
+  if (slashesDenoteHost || proto || rest.match(/^\/\/[^@\/]+@[^@\/]+/)) {
+    var slashes = rest.substr(0, 2) === '//';
+    if (slashes && !(proto && hostlessProtocol[proto])) {
+      rest = rest.substr(2);
+      this.slashes = true;
+    }
+  }
+
+  if (!hostlessProtocol[proto] &&
+      (slashes || (proto && !slashedProtocol[proto]))) {
+
+    // there's a hostname.
+    // the first instance of /, ?, ;, or # ends the host.
+    //
+    // If there is an @ in the hostname, then non-host chars *are* allowed
+    // to the left of the last @ sign, unless some host-ending character
+    // comes *before* the @-sign.
+    // URLs are obnoxious.
+    //
+    // ex:
+    // http://a@b@c/ => user:a@b host:c
+    // http://a@b?@c => user:a host:c path:/?@c
+
+    // v0.12 TODO(isaacs): This is not quite how Chrome does things.
+    // Review our test case against browsers more comprehensively.
+
+    // find the first instance of any hostEndingChars
+    var hostEnd = -1;
+    for (var i = 0; i < hostEndingChars.length; i++) {
+      var hec = rest.indexOf(hostEndingChars[i]);
+      if (hec !== -1 && (hostEnd === -1 || hec < hostEnd))
+        hostEnd = hec;
+    }
+
+    // at this point, either we have an explicit point where the
+    // auth portion cannot go past, or the last @ char is the decider.
+    var auth, atSign;
+    if (hostEnd === -1) {
+      // atSign can be anywhere.
+      atSign = rest.lastIndexOf('@');
+    } else {
+      // atSign must be in auth portion.
+      // http://a@b/c@d => host:b auth:a path:/c@d
+      atSign = rest.lastIndexOf('@', hostEnd);
+    }
+
+    // Now we have a portion which is definitely the auth.
+    // Pull that off.
+    if (atSign !== -1) {
+      auth = rest.slice(0, atSign);
+      rest = rest.slice(atSign + 1);
+      this.auth = decodeURIComponent(auth);
+    }
+
+    // the host is the remaining to the left of the first non-host char
+    hostEnd = -1;
+    for (var i = 0; i < nonHostChars.length; i++) {
+      var hec = rest.indexOf(nonHostChars[i]);
+      if (hec !== -1 && (hostEnd === -1 || hec < hostEnd))
+        hostEnd = hec;
+    }
+    // if we still have not hit it, then the entire thing is a host.
+    if (hostEnd === -1)
+      hostEnd = rest.length;
+
+    this.host = rest.slice(0, hostEnd);
+    rest = rest.slice(hostEnd);
+
+    // pull out port.
+    this.parseHost();
+
+    // we've indicated that there is a hostname,
+    // so even if it's empty, it has to be present.
+    this.hostname = this.hostname || '';
+
+    // if hostname begins with [ and ends with ]
+    // assume that it's an IPv6 address.
+    var ipv6Hostname = this.hostname[0] === '[' &&
+        this.hostname[this.hostname.length - 1] === ']';
+
+    // validate a little.
+    if (!ipv6Hostname) {
+      var hostparts = this.hostname.split(/\./);
+      for (var i = 0, l = hostparts.length; i < l; i++) {
+        var part = hostparts[i];
+        if (!part) continue;
+        if (!part.match(hostnamePartPattern)) {
+          var newpart = '';
+          for (var j = 0, k = part.length; j < k; j++) {
+            if (part.charCodeAt(j) > 127) {
+              // we replace non-ASCII char with a temporary placeholder
+              // we need this to make sure size of hostname is not
+              // broken by replacing non-ASCII by nothing
+              newpart += 'x';
+            } else {
+              newpart += part[j];
+            }
+          }
+          // we test again with ASCII char only
+          if (!newpart.match(hostnamePartPattern)) {
+            var validParts = hostparts.slice(0, i);
+            var notHost = hostparts.slice(i + 1);
+            var bit = part.match(hostnamePartStart);
+            if (bit) {
+              validParts.push(bit[1]);
+              notHost.unshift(bit[2]);
+            }
+            if (notHost.length) {
+              rest = '/' + notHost.join('.') + rest;
+            }
+            this.hostname = validParts.join('.');
+            break;
+          }
+        }
+      }
+    }
+
+    if (this.hostname.length > hostnameMaxLen) {
+      this.hostname = '';
+    } else {
+      // hostnames are always lower case.
+      this.hostname = this.hostname.toLowerCase();
+    }
+
+    if (!ipv6Hostname) {
+      // IDNA Support: Returns a puny coded representation of "domain".
+      // It only converts the part of the domain name that
+      // has non ASCII characters. I.e. it dosent matter if
+      // you call it with a domain that already is in ASCII.
+      var domainArray = this.hostname.split('.');
+      var newOut = [];
+      for (var i = 0; i < domainArray.length; ++i) {
+        var s = domainArray[i];
+        newOut.push(s.match(/[^A-Za-z0-9_-]/) ?
+            'xn--' + punycode.encode(s) : s);
+      }
+      this.hostname = newOut.join('.');
+    }
+
+    var p = this.port ? ':' + this.port : '';
+    var h = this.hostname || '';
+    this.host = h + p;
+    this.href += this.host;
+
+    // strip [ and ] from the hostname
+    // the host field still retains them, though
+    if (ipv6Hostname) {
+      this.hostname = this.hostname.substr(1, this.hostname.length - 2);
+      if (rest[0] !== '/') {
+        rest = '/' + rest;
+      }
+    }
+  }
+
+  // now rest is set to the post-host stuff.
+  // chop off any delim chars.
+  if (!unsafeProtocol[lowerProto]) {
+
+    // First, make 100% sure that any "autoEscape" chars get
+    // escaped, even if encodeURIComponent doesn't think they
+    // need to be.
+    for (var i = 0, l = autoEscape.length; i < l; i++) {
+      var ae = autoEscape[i];
+      var esc = encodeURIComponent(ae);
+      if (esc === ae) {
+        esc = escape(ae);
+      }
+      rest = rest.split(ae).join(esc);
+    }
+  }
+
+
+  // chop off from the tail first.
+  var hash = rest.indexOf('#');
+  if (hash !== -1) {
+    // got a fragment string.
+    this.hash = rest.substr(hash);
+    rest = rest.slice(0, hash);
+  }
+  var qm = rest.indexOf('?');
+  if (qm !== -1) {
+    this.search = rest.substr(qm);
+    this.query = rest.substr(qm + 1);
+    if (parseQueryString) {
+      this.query = querystring.parse(this.query);
+    }
+    rest = rest.slice(0, qm);
+  } else if (parseQueryString) {
+    // no query string, but parseQueryString still requested
+    this.search = '';
+    this.query = {};
+  }
+  if (rest) this.pathname = rest;
+  if (slashedProtocol[lowerProto] &&
+      this.hostname && !this.pathname) {
+    this.pathname = '/';
+  }
+
+  //to support http.request
+  if (this.pathname || this.search) {
+    var p = this.pathname || '';
+    var s = this.search || '';
+    this.path = p + s;
+  }
+
+  // finally, reconstruct the href based on what has been validated.
+  this.href = this.format();
+  return this;
+};
+
+// format a parsed object into a url string
+function urlFormat(obj) {
+  // ensure it's an object, and not a string url.
+  // If it's an obj, this is a no-op.
+  // this way, you can call url_format() on strings
+  // to clean up potentially wonky urls.
+  if (isString(obj)) obj = urlParse(obj);
+  if (!(obj instanceof Url)) return Url.prototype.format.call(obj);
+  return obj.format();
+}
+
+Url.prototype.format = function() {
+  var auth = this.auth || '';
+  if (auth) {
+    auth = encodeURIComponent(auth);
+    auth = auth.replace(/%3A/i, ':');
+    auth += '@';
+  }
+
+  var protocol = this.protocol || '',
+      pathname = this.pathname || '',
+      hash = this.hash || '',
+      host = false,
+      query = '';
+
+  if (this.host) {
+    host = auth + this.host;
+  } else if (this.hostname) {
+    host = auth + (this.hostname.indexOf(':') === -1 ?
+        this.hostname :
+        '[' + this.hostname + ']');
+    if (this.port) {
+      host += ':' + this.port;
+    }
+  }
+
+  if (this.query &&
+      isObject(this.query) &&
+      Object.keys(this.query).length) {
+    query = querystring.stringify(this.query);
+  }
+
+  var search = this.search || (query && ('?' + query)) || '';
+
+  if (protocol && protocol.substr(-1) !== ':') protocol += ':';
+
+  // only the slashedProtocols get the //.  Not mailto:, xmpp:, etc.
+  // unless they had them to begin with.
+  if (this.slashes ||
+      (!protocol || slashedProtocol[protocol]) && host !== false) {
+    host = '//' + (host || '');
+    if (pathname && pathname.charAt(0) !== '/') pathname = '/' + pathname;
+  } else if (!host) {
+    host = '';
+  }
+
+  if (hash && hash.charAt(0) !== '#') hash = '#' + hash;
+  if (search && search.charAt(0) !== '?') search = '?' + search;
+
+  pathname = pathname.replace(/[?#]/g, function(match) {
+    return encodeURIComponent(match);
+  });
+  search = search.replace('#', '%23');
+
+  return protocol + host + pathname + search + hash;
+};
+
+function urlResolve(source, relative) {
+  return urlParse(source, false, true).resolve(relative);
+}
+
+Url.prototype.resolve = function(relative) {
+  return this.resolveObject(urlParse(relative, false, true)).format();
+};
+
+function urlResolveObject(source, relative) {
+  if (!source) return relative;
+  return urlParse(source, false, true).resolveObject(relative);
+}
+
+Url.prototype.resolveObject = function(relative) {
+  if (isString(relative)) {
+    var rel = new Url();
+    rel.parse(relative, false, true);
+    relative = rel;
+  }
+
+  var result = new Url();
+  Object.keys(this).forEach(function(k) {
+    result[k] = this[k];
+  }, this);
+
+  // hash is always overridden, no matter what.
+  // even href="" will remove it.
+  result.hash = relative.hash;
+
+  // if the relative url is empty, then there's nothing left to do here.
+  if (relative.href === '') {
+    result.href = result.format();
+    return result;
+  }
+
+  // hrefs like //foo/bar always cut to the protocol.
+  if (relative.slashes && !relative.protocol) {
+    // take everything except the protocol from relative
+    Object.keys(relative).forEach(function(k) {
+      if (k !== 'protocol')
+        result[k] = relative[k];
+    });
+
+    //urlParse appends trailing / to urls like http://www.example.com
+    if (slashedProtocol[result.protocol] &&
+        result.hostname && !result.pathname) {
+      result.path = result.pathname = '/';
+    }
+
+    result.href = result.format();
+    return result;
+  }
+
+  if (relative.protocol && relative.protocol !== result.protocol) {
+    // if it's a known url protocol, then changing
+    // the protocol does weird things
+    // first, if it's not file:, then we MUST have a host,
+    // and if there was a path
+    // to begin with, then we MUST have a path.
+    // if it is file:, then the host is dropped,
+    // because that's known to be hostless.
+    // anything else is assumed to be absolute.
+    if (!slashedProtocol[relative.protocol]) {
+      Object.keys(relative).forEach(function(k) {
+        result[k] = relative[k];
+      });
+      result.href = result.format();
+      return result;
+    }
+
+    result.protocol = relative.protocol;
+    if (!relative.host && !hostlessProtocol[relative.protocol]) {
+      var relPath = (relative.pathname || '').split('/');
+      while (relPath.length && !(relative.host = relPath.shift()));
+      if (!relative.host) relative.host = '';
+      if (!relative.hostname) relative.hostname = '';
+      if (relPath[0] !== '') relPath.unshift('');
+      if (relPath.length < 2) relPath.unshift('');
+      result.pathname = relPath.join('/');
+    } else {
+      result.pathname = relative.pathname;
+    }
+    result.search = relative.search;
+    result.query = relative.query;
+    result.host = relative.host || '';
+    result.auth = relative.auth;
+    result.hostname = relative.hostname || relative.host;
+    result.port = relative.port;
+    // to support http.request
+    if (result.pathname || result.search) {
+      var p = result.pathname || '';
+      var s = result.search || '';
+      result.path = p + s;
+    }
+    result.slashes = result.slashes || relative.slashes;
+    result.href = result.format();
+    return result;
+  }
+
+  var isSourceAbs = (result.pathname && result.pathname.charAt(0) === '/'),
+      isRelAbs = (
+          relative.host ||
+          relative.pathname && relative.pathname.charAt(0) === '/'
+      ),
+      mustEndAbs = (isRelAbs || isSourceAbs ||
+                    (result.host && relative.pathname)),
+      removeAllDots = mustEndAbs,
+      srcPath = result.pathname && result.pathname.split('/') || [],
+      relPath = relative.pathname && relative.pathname.split('/') || [],
+      psychotic = result.protocol && !slashedProtocol[result.protocol];
+
+  // if the url is a non-slashed url, then relative
+  // links like ../.. should be able
+  // to crawl up to the hostname, as well.  This is strange.
+  // result.protocol has already been set by now.
+  // Later on, put the first path part into the host field.
+  if (psychotic) {
+    result.hostname = '';
+    result.port = null;
+    if (result.host) {
+      if (srcPath[0] === '') srcPath[0] = result.host;
+      else srcPath.unshift(result.host);
+    }
+    result.host = '';
+    if (relative.protocol) {
+      relative.hostname = null;
+      relative.port = null;
+      if (relative.host) {
+        if (relPath[0] === '') relPath[0] = relative.host;
+        else relPath.unshift(relative.host);
+      }
+      relative.host = null;
+    }
+    mustEndAbs = mustEndAbs && (relPath[0] === '' || srcPath[0] === '');
+  }
+
+  if (isRelAbs) {
+    // it's absolute.
+    result.host = (relative.host || relative.host === '') ?
+                  relative.host : result.host;
+    result.hostname = (relative.hostname || relative.hostname === '') ?
+                      relative.hostname : result.hostname;
+    result.search = relative.search;
+    result.query = relative.query;
+    srcPath = relPath;
+    // fall through to the dot-handling below.
+  } else if (relPath.length) {
+    // it's relative
+    // throw away the existing file, and take the new path instead.
+    if (!srcPath) srcPath = [];
+    srcPath.pop();
+    srcPath = srcPath.concat(relPath);
+    result.search = relative.search;
+    result.query = relative.query;
+  } else if (!isNullOrUndefined(relative.search)) {
+    // just pull out the search.
+    // like href='?foo'.
+    // Put this after the other two cases because it simplifies the booleans
+    if (psychotic) {
+      result.hostname = result.host = srcPath.shift();
+      //occationaly the auth can get stuck only in host
+      //this especialy happens in cases like
+      //url.resolveObject('mailto:local1@domain1', 'local2@domain2')
+      var authInHost = result.host && result.host.indexOf('@') > 0 ?
+                       result.host.split('@') : false;
+      if (authInHost) {
+        result.auth = authInHost.shift();
+        result.host = result.hostname = authInHost.shift();
+      }
+    }
+    result.search = relative.search;
+    result.query = relative.query;
+    //to support http.request
+    if (!isNull(result.pathname) || !isNull(result.search)) {
+      result.path = (result.pathname ? result.pathname : '') +
+                    (result.search ? result.search : '');
+    }
+    result.href = result.format();
+    return result;
+  }
+
+  if (!srcPath.length) {
+    // no path at all.  easy.
+    // we've already handled the other stuff above.
+    result.pathname = null;
+    //to support http.request
+    if (result.search) {
+      result.path = '/' + result.search;
+    } else {
+      result.path = null;
+    }
+    result.href = result.format();
+    return result;
+  }
+
+  // if a url ENDs in . or .., then it must get a trailing slash.
+  // however, if it ends in anything else non-slashy,
+  // then it must NOT get a trailing slash.
+  var last = srcPath.slice(-1)[0];
+  var hasTrailingSlash = (
+      (result.host || relative.host) && (last === '.' || last === '..') ||
+      last === '');
+
+  // strip single dots, resolve double dots to parent dir
+  // if the path tries to go above the root, `up` ends up > 0
+  var up = 0;
+  for (var i = srcPath.length; i >= 0; i--) {
+    last = srcPath[i];
+    if (last == '.') {
+      srcPath.splice(i, 1);
+    } else if (last === '..') {
+      srcPath.splice(i, 1);
+      up++;
+    } else if (up) {
+      srcPath.splice(i, 1);
+      up--;
+    }
+  }
+
+  // if the path is allowed to go above the root, restore leading ..s
+  if (!mustEndAbs && !removeAllDots) {
+    for (; up--; up) {
+      srcPath.unshift('..');
+    }
+  }
+
+  if (mustEndAbs && srcPath[0] !== '' &&
+      (!srcPath[0] || srcPath[0].charAt(0) !== '/')) {
+    srcPath.unshift('');
+  }
+
+  if (hasTrailingSlash && (srcPath.join('/').substr(-1) !== '/')) {
+    srcPath.push('');
+  }
+
+  var isAbsolute = srcPath[0] === '' ||
+      (srcPath[0] && srcPath[0].charAt(0) === '/');
+
+  // put the host back
+  if (psychotic) {
+    result.hostname = result.host = isAbsolute ? '' :
+                                    srcPath.length ? srcPath.shift() : '';
+    //occationaly the auth can get stuck only in host
+    //this especialy happens in cases like
+    //url.resolveObject('mailto:local1@domain1', 'local2@domain2')
+    var authInHost = result.host && result.host.indexOf('@') > 0 ?
+                     result.host.split('@') : false;
+    if (authInHost) {
+      result.auth = authInHost.shift();
+      result.host = result.hostname = authInHost.shift();
+    }
+  }
+
+  mustEndAbs = mustEndAbs || (result.host && srcPath.length);
+
+  if (mustEndAbs && !isAbsolute) {
+    srcPath.unshift('');
+  }
+
+  if (!srcPath.length) {
+    result.pathname = null;
+    result.path = null;
+  } else {
+    result.pathname = srcPath.join('/');
+  }
+
+  //to support request.http
+  if (!isNull(result.pathname) || !isNull(result.search)) {
+    result.path = (result.pathname ? result.pathname : '') +
+                  (result.search ? result.search : '');
+  }
+  result.auth = relative.auth || result.auth;
+  result.slashes = result.slashes || relative.slashes;
+  result.href = result.format();
+  return result;
+};
+
+Url.prototype.parseHost = function() {
+  var host = this.host;
+  var port = portPattern.exec(host);
+  if (port) {
+    port = port[0];
+    if (port !== ':') {
+      this.port = port.substr(1);
+    }
+    host = host.substr(0, host.length - port.length);
+  }
+  if (host) this.hostname = host;
+};
+
+function isString(arg) {
+  return typeof arg === "string";
+}
+
+function isObject(arg) {
+  return typeof arg === 'object' && arg !== null;
+}
+
+function isNull(arg) {
+  return arg === null;
+}
+function isNullOrUndefined(arg) {
+  return  arg == null;
+}
+
+},{"punycode":5,"querystring":8}],10:[function(require,module,exports){
+'use strict';
+
+module.exports = earcut;
+
+function earcut(data, holeIndices, dim) {
+
+    dim = dim || 2;
+
+    var hasHoles = holeIndices && holeIndices.length,
+        outerLen = hasHoles ? holeIndices[0] * dim : data.length,
+        outerNode = filterPoints(data, linkedList(data, 0, outerLen, dim, true)),
+        triangles = [];
+
+    if (!outerNode) return triangles;
+
+    var minX, minY, maxX, maxY, x, y, size;
+
+    if (hasHoles) outerNode = eliminateHoles(data, holeIndices, outerNode, dim);
+
+    // if the shape is not too simple, we'll use z-order curve hash later; calculate polygon bbox
+    if (data.length > 80 * dim) {
+        minX = maxX = data[0];
+        minY = maxY = data[1];
+
+        for (var i = dim; i < outerLen; i += dim) {
+            x = data[i];
+            y = data[i + 1];
+            if (x < minX) minX = x;
+            if (y < minY) minY = y;
+            if (x > maxX) maxX = x;
+            if (y > maxY) maxY = y;
+        }
+
+        // minX, minY and size are later used to transform coords into integers for z-order calculation
+        size = Math.max(maxX - minX, maxY - minY);
+    }
+
+    earcutLinked(data, outerNode, triangles, dim, minX, minY, size);
+
+    return triangles;
+}
+
+// create a circular doubly linked list from polygon points in the specified winding order
+function linkedList(data, start, end, dim, clockwise) {
+    var sum = 0,
+        i, j, last;
+
+    // calculate original winding order of a polygon ring
+    for (i = start, j = end - dim; i < end; i += dim) {
+        sum += (data[j] - data[i]) * (data[i + 1] + data[j + 1]);
+        j = i;
+    }
+
+    // link points into circular doubly-linked list in the specified winding order
+    if (clockwise === (sum > 0)) {
+        for (i = start; i < end; i += dim) last = insertNode(i, last);
+    } else {
+        for (i = end - dim; i >= start; i -= dim) last = insertNode(i, last);
+    }
+
+    return last;
+}
+
+// eliminate colinear or duplicate points
+function filterPoints(data, start, end) {
+    if (!end) end = start;
+
+    var node = start,
+        again;
+    do {
+        again = false;
+
+        if (equals(data, node.i, node.next.i) || orient(data, node.prev.i, node.i, node.next.i) === 0) {
+
+            // remove node
+            node.prev.next = node.next;
+            node.next.prev = node.prev;
+
+            if (node.prevZ) node.prevZ.nextZ = node.nextZ;
+            if (node.nextZ) node.nextZ.prevZ = node.prevZ;
+
+            node = end = node.prev;
+
+            if (node === node.next) return null;
+            again = true;
+
+        } else {
+            node = node.next;
+        }
+    } while (again || node !== end);
+
+    return end;
+}
+
+// main ear slicing loop which triangulates a polygon (given as a linked list)
+function earcutLinked(data, ear, triangles, dim, minX, minY, size, pass) {
+    if (!ear) return;
+
+    // interlink polygon nodes in z-order
+    if (!pass && minX !== undefined) indexCurve(data, ear, minX, minY, size);
+
+    var stop = ear,
+        prev, next;
+
+    // iterate through ears, slicing them one by one
+    while (ear.prev !== ear.next) {
+        prev = ear.prev;
+        next = ear.next;
+
+        if (isEar(data, ear, minX, minY, size)) {
+            // cut off the triangle
+            triangles.push(prev.i / dim);
+            triangles.push(ear.i / dim);
+            triangles.push(next.i / dim);
+
+            // remove ear node
+            next.prev = prev;
+            prev.next = next;
+
+            if (ear.prevZ) ear.prevZ.nextZ = ear.nextZ;
+            if (ear.nextZ) ear.nextZ.prevZ = ear.prevZ;
+
+            // skipping the next vertice leads to less sliver triangles
+            ear = next.next;
+            stop = next.next;
+
+            continue;
+        }
+
+        ear = next;
+
+        // if we looped through the whole remaining polygon and can't find any more ears
+        if (ear === stop) {
+            // try filtering points and slicing again
+            if (!pass) {
+                earcutLinked(data, filterPoints(data, ear), triangles, dim, minX, minY, size, 1);
+
+            // if this didn't work, try curing all small self-intersections locally
+            } else if (pass === 1) {
+                ear = cureLocalIntersections(data, ear, triangles, dim);
+                earcutLinked(data, ear, triangles, dim, minX, minY, size, 2);
+
+            // as a last resort, try splitting the remaining polygon into two
+            } else if (pass === 2) {
+                splitEarcut(data, ear, triangles, dim, minX, minY, size);
+            }
+
+            break;
+        }
+    }
+}
+
+// check whether a polygon node forms a valid ear with adjacent nodes
+function isEar(data, ear, minX, minY, size) {
+
+    var a = ear.prev.i,
+        b = ear.i,
+        c = ear.next.i,
+
+        ax = data[a], ay = data[a + 1],
+        bx = data[b], by = data[b + 1],
+        cx = data[c], cy = data[c + 1],
+
+        abd = ax * by - ay * bx,
+        acd = ax * cy - ay * cx,
+        cbd = cx * by - cy * bx,
+        A = abd - acd - cbd;
+
+    if (A <= 0) return false; // reflex, can't be an ear
+
+    // now make sure we don't have other points inside the potential ear;
+    // the code below is a bit verbose and repetitive but this is done for performance
+
+    var cay = cy - ay,
+        acx = ax - cx,
+        aby = ay - by,
+        bax = bx - ax,
+        i, px, py, s, t, k, node;
+
+    // if we use z-order curve hashing, iterate through the curve
+    if (minX !== undefined) {
+
+        // triangle bbox; min & max are calculated like this for speed
+        var minTX = ax < bx ? (ax < cx ? ax : cx) : (bx < cx ? bx : cx),
+            minTY = ay < by ? (ay < cy ? ay : cy) : (by < cy ? by : cy),
+            maxTX = ax > bx ? (ax > cx ? ax : cx) : (bx > cx ? bx : cx),
+            maxTY = ay > by ? (ay > cy ? ay : cy) : (by > cy ? by : cy),
+
+            // z-order range for the current triangle bbox;
+            minZ = zOrder(minTX, minTY, minX, minY, size),
+            maxZ = zOrder(maxTX, maxTY, minX, minY, size);
+
+        // first look for points inside the triangle in increasing z-order
+        node = ear.nextZ;
+
+        while (node && node.z <= maxZ) {
+            i = node.i;
+            node = node.nextZ;
+            if (i === a || i === c) continue;
+
+            px = data[i];
+            py = data[i + 1];
+
+            s = cay * px + acx * py - acd;
+            if (s >= 0) {
+                t = aby * px + bax * py + abd;
+                if (t >= 0) {
+                    k = A - s - t;
+                    if ((k >= 0) && ((s && t) || (s && k) || (t && k))) return false;
+                }
+            }
+        }
+
+        // then look for points in decreasing z-order
+        node = ear.prevZ;
+
+        while (node && node.z >= minZ) {
+            i = node.i;
+            node = node.prevZ;
+            if (i === a || i === c) continue;
+
+            px = data[i];
+            py = data[i + 1];
+
+            s = cay * px + acx * py - acd;
+            if (s >= 0) {
+                t = aby * px + bax * py + abd;
+                if (t >= 0) {
+                    k = A - s - t;
+                    if ((k >= 0) && ((s && t) || (s && k) || (t && k))) return false;
+                }
+            }
+        }
+
+    // if we don't use z-order curve hash, simply iterate through all other points
+    } else {
+        node = ear.next.next;
+
+        while (node !== ear.prev) {
+            i = node.i;
+            node = node.next;
+
+            px = data[i];
+            py = data[i + 1];
+
+            s = cay * px + acx * py - acd;
+            if (s >= 0) {
+                t = aby * px + bax * py + abd;
+                if (t >= 0) {
+                    k = A - s - t;
+                    if ((k >= 0) && ((s && t) || (s && k) || (t && k))) return false;
+                }
+            }
+        }
+    }
+
+    return true;
+}
+
+// go through all polygon nodes and cure small local self-intersections
+function cureLocalIntersections(data, start, triangles, dim) {
+    var node = start;
+    do {
+        var a = node.prev,
+            b = node.next.next;
+
+        // a self-intersection where edge (v[i-1],v[i]) intersects (v[i+1],v[i+2])
+        if (a.i !== b.i && intersects(data, a.i, node.i, node.next.i, b.i) &&
+                locallyInside(data, a, b) && locallyInside(data, b, a)) {
+
+            triangles.push(a.i / dim);
+            triangles.push(node.i / dim);
+            triangles.push(b.i / dim);
+
+            // remove two nodes involved
+            a.next = b;
+            b.prev = a;
+
+            var az = node.prevZ,
+                bz = node.nextZ && node.nextZ.nextZ;
+
+            if (az) az.nextZ = bz;
+            if (bz) bz.prevZ = az;
+
+            node = start = b;
+        }
+        node = node.next;
+    } while (node !== start);
+
+    return node;
+}
+
+// try splitting polygon into two and triangulate them independently
+function splitEarcut(data, start, triangles, dim, minX, minY, size) {
+    // look for a valid diagonal that divides the polygon into two
+    var a = start;
+    do {
+        var b = a.next.next;
+        while (b !== a.prev) {
+            if (a.i !== b.i && isValidDiagonal(data, a, b)) {
+                // split the polygon in two by the diagonal
+                var c = splitPolygon(a, b);
+
+                // filter colinear points around the cuts
+                a = filterPoints(data, a, a.next);
+                c = filterPoints(data, c, c.next);
+
+                // run earcut on each half
+                earcutLinked(data, a, triangles, dim, minX, minY, size);
+                earcutLinked(data, c, triangles, dim, minX, minY, size);
+                return;
+            }
+            b = b.next;
+        }
+        a = a.next;
+    } while (a !== start);
+}
+
+// link every hole into the outer loop, producing a single-ring polygon without holes
+function eliminateHoles(data, holeIndices, outerNode, dim) {
+    var queue = [],
+        i, len, start, end, list;
+
+    for (i = 0, len = holeIndices.length; i < len; i++) {
+        start = holeIndices[i] * dim;
+        end = i < len - 1 ? holeIndices[i + 1] * dim : data.length;
+        list = filterPoints(data, linkedList(data, start, end, dim, false));
+        if (list) queue.push(getLeftmost(data, list));
+    }
+
+    queue.sort(function (a, b) {
+        return data[a.i] - data[b.i];
+    });
+
+    // process holes from left to right
+    for (i = 0; i < queue.length; i++) {
+        eliminateHole(data, queue[i], outerNode);
+        outerNode = filterPoints(data, outerNode, outerNode.next);
+    }
+
+    return outerNode;
+}
+
+// find a bridge between vertices that connects hole with an outer ring and and link it
+function eliminateHole(data, holeNode, outerNode) {
+    outerNode = findHoleBridge(data, holeNode, outerNode);
+    if (outerNode) {
+        var b = splitPolygon(outerNode, holeNode);
+        filterPoints(data, b, b.next);
+    }
+}
+
+// David Eberly's algorithm for finding a bridge between hole and outer polygon
+function findHoleBridge(data, holeNode, outerNode) {
+    var node = outerNode,
+        i = holeNode.i,
+        px = data[i],
+        py = data[i + 1],
+        qMax = -Infinity,
+        mNode, a, b;
+
+    // find a segment intersected by a ray from the hole's leftmost point to the left;
+    // segment's endpoint with lesser x will be potential connection point
+    do {
+        a = node.i;
+        b = node.next.i;
+
+        if (py <= data[a + 1] && py >= data[b + 1]) {
+            var qx = data[a] + (py - data[a + 1]) * (data[b] - data[a]) / (data[b + 1] - data[a + 1]);
+            if (qx <= px && qx > qMax) {
+                qMax = qx;
+                mNode = data[a] < data[b] ? node : node.next;
+            }
+        }
+        node = node.next;
+    } while (node !== outerNode);
+
+    if (!mNode) return null;
+
+    // look for points strictly inside the triangle of hole point, segment intersection and endpoint;
+    // if there are no points found, we have a valid connection;
+    // otherwise choose the point of the minimum angle with the ray as connection point
+
+    var bx = data[mNode.i],
+        by = data[mNode.i + 1],
+        pbd = px * by - py * bx,
+        pcd = px * py - py * qMax,
+        cpy = py - py,
+        pcx = px - qMax,
+        pby = py - by,
+        bpx = bx - px,
+        A = pbd - pcd - (qMax * by - py * bx),
+        sign = A <= 0 ? -1 : 1,
+        stop = mNode,
+        tanMin = Infinity,
+        mx, my, amx, s, t, tan;
+
+    node = mNode.next;
+
+    while (node !== stop) {
+
+        mx = data[node.i];
+        my = data[node.i + 1];
+        amx = px - mx;
+
+        if (amx >= 0 && mx >= bx) {
+            s = (cpy * mx + pcx * my - pcd) * sign;
+            if (s >= 0) {
+                t = (pby * mx + bpx * my + pbd) * sign;
+
+                if (t >= 0 && A * sign - s - t >= 0) {
+                    tan = Math.abs(py - my) / amx; // tangential
+                    if (tan < tanMin && locallyInside(data, node, holeNode)) {
+                        mNode = node;
+                        tanMin = tan;
+                    }
+                }
+            }
+        }
+
+        node = node.next;
+    }
+
+    return mNode;
+}
+
+// interlink polygon nodes in z-order
+function indexCurve(data, start, minX, minY, size) {
+    var node = start;
+
+    do {
+        if (node.z === null) node.z = zOrder(data[node.i], data[node.i + 1], minX, minY, size);
+        node.prevZ = node.prev;
+        node.nextZ = node.next;
+        node = node.next;
+    } while (node !== start);
+
+    node.prevZ.nextZ = null;
+    node.prevZ = null;
+
+    sortLinked(node);
+}
+
+// Simon Tatham's linked list merge sort algorithm
+// http://www.chiark.greenend.org.uk/~sgtatham/algorithms/listsort.html
+function sortLinked(list) {
+    var i, p, q, e, tail, numMerges, pSize, qSize,
+        inSize = 1;
+
+    do {
+        p = list;
+        list = null;
+        tail = null;
+        numMerges = 0;
+
+        while (p) {
+            numMerges++;
+            q = p;
+            pSize = 0;
+            for (i = 0; i < inSize; i++) {
+                pSize++;
+                q = q.nextZ;
+                if (!q) break;
+            }
+
+            qSize = inSize;
+
+            while (pSize > 0 || (qSize > 0 && q)) {
+
+                if (pSize === 0) {
+                    e = q;
+                    q = q.nextZ;
+                    qSize--;
+                } else if (qSize === 0 || !q) {
+                    e = p;
+                    p = p.nextZ;
+                    pSize--;
+                } else if (p.z <= q.z) {
+                    e = p;
+                    p = p.nextZ;
+                    pSize--;
+                } else {
+                    e = q;
+                    q = q.nextZ;
+                    qSize--;
+                }
+
+                if (tail) tail.nextZ = e;
+                else list = e;
+
+                e.prevZ = tail;
+                tail = e;
+            }
+
+            p = q;
+        }
+
+        tail.nextZ = null;
+        inSize *= 2;
+
+    } while (numMerges > 1);
+
+    return list;
+}
+
+// z-order of a point given coords and size of the data bounding box
+function zOrder(x, y, minX, minY, size) {
+    // coords are transformed into (0..1000) integer range
+    x = 1000 * (x - minX) / size;
+    x = (x | (x << 8)) & 0x00FF00FF;
+    x = (x | (x << 4)) & 0x0F0F0F0F;
+    x = (x | (x << 2)) & 0x33333333;
+    x = (x | (x << 1)) & 0x55555555;
+
+    y = 1000 * (y - minY) / size;
+    y = (y | (y << 8)) & 0x00FF00FF;
+    y = (y | (y << 4)) & 0x0F0F0F0F;
+    y = (y | (y << 2)) & 0x33333333;
+    y = (y | (y << 1)) & 0x55555555;
+
+    return x | (y << 1);
+}
+
+// find the leftmost node of a polygon ring
+function getLeftmost(data, start) {
+    var node = start,
+        leftmost = start;
+    do {
+        if (data[node.i] < data[leftmost.i]) leftmost = node;
+        node = node.next;
+    } while (node !== start);
+
+    return leftmost;
+}
+
+// check if a diagonal between two polygon nodes is valid (lies in polygon interior)
+function isValidDiagonal(data, a, b) {
+    return !intersectsPolygon(data, a, a.i, b.i) &&
+           locallyInside(data, a, b) && locallyInside(data, b, a) &&
+           middleInside(data, a, a.i, b.i);
+}
+
+// winding order of triangle formed by 3 given points
+function orient(data, p, q, r) {
+    var o = (data[q + 1] - data[p + 1]) * (data[r] - data[q]) - (data[q] - data[p]) * (data[r + 1] - data[q + 1]);
+    return o > 0 ? 1 :
+           o < 0 ? -1 : 0;
+}
+
+// check if two points are equal
+function equals(data, p1, p2) {
+    return data[p1] === data[p2] && data[p1 + 1] === data[p2 + 1];
+}
+
+// check if two segments intersect
+function intersects(data, p1, q1, p2, q2) {
+    return orient(data, p1, q1, p2) !== orient(data, p1, q1, q2) &&
+           orient(data, p2, q2, p1) !== orient(data, p2, q2, q1);
+}
+
+// check if a polygon diagonal intersects any polygon segments
+function intersectsPolygon(data, start, a, b) {
+    var node = start;
+    do {
+        var p1 = node.i,
+            p2 = node.next.i;
+
+        if (p1 !== a && p2 !== a && p1 !== b && p2 !== b && intersects(data, p1, p2, a, b)) return true;
+
+        node = node.next;
+    } while (node !== start);
+
+    return false;
+}
+
+// check if a polygon diagonal is locally inside the polygon
+function locallyInside(data, a, b) {
+    return orient(data, a.prev.i, a.i, a.next.i) === -1 ?
+        orient(data, a.i, b.i, a.next.i) !== -1 && orient(data, a.i, a.prev.i, b.i) !== -1 :
+        orient(data, a.i, b.i, a.prev.i) === -1 || orient(data, a.i, a.next.i, b.i) === -1;
+}
+
+// check if the middle point of a polygon diagonal is inside the polygon
+function middleInside(data, start, a, b) {
+    var node = start,
+        inside = false,
+        px = (data[a] + data[b]) / 2,
+        py = (data[a + 1] + data[b + 1]) / 2;
+    do {
+        var p1 = node.i,
+            p2 = node.next.i;
+
+        if (((data[p1 + 1] > py) !== (data[p2 + 1] > py)) &&
+            (px < (data[p2] - data[p1]) * (py - data[p1 + 1]) / (data[p2 + 1] - data[p1 + 1]) + data[p1]))
+                inside = !inside;
+
+        node = node.next;
+    } while (node !== start);
+
+    return inside;
+}
+
+// link two polygon vertices with a bridge; if the vertices belong to the same ring, it splits polygon into two;
+// if one belongs to the outer ring and another to a hole, it merges it into a single ring
+function splitPolygon(a, b) {
+    var a2 = new Node(a.i),
+        b2 = new Node(b.i),
+        an = a.next,
+        bp = b.prev;
+
+    a.next = b;
+    b.prev = a;
+
+    a2.next = an;
+    an.prev = a2;
+
+    b2.next = a2;
+    a2.prev = b2;
+
+    bp.next = b2;
+    b2.prev = bp;
+
+    return b2;
+}
+
+// create a node and optionally link it with previous one (in a circular doubly linked list)
+function insertNode(i, last) {
+    var node = new Node(i);
+
+    if (!last) {
+        node.prev = node;
+        node.next = node;
+
+    } else {
+        node.next = last.next;
+        node.prev = last;
+        last.next.prev = node;
+        last.next = node;
+    }
+    return node;
+}
+
+function Node(i) {
+    // vertex coordinates
+    this.i = i;
+
+    // previous and next vertice nodes in a polygon ring
+    this.prev = null;
+    this.next = null;
+
+    // z-order curve value
+    this.z = null;
+
+    // previous and next nodes in z-order
+    this.prevZ = null;
+    this.nextZ = null;
+}
+
+},{}],11:[function(require,module,exports){
+'use strict';
+
+/**
+ * Representation of a single EventEmitter function.
+ *
+ * @param {Function} fn Event handler to be called.
+ * @param {Mixed} context Context for function execution.
+ * @param {Boolean} once Only emit once
+ * @api private
+ */
+function EE(fn, context, once) {
+  this.fn = fn;
+  this.context = context;
+  this.once = once || false;
+}
+
+/**
+ * Minimal EventEmitter interface that is molded against the Node.js
+ * EventEmitter interface.
+ *
+ * @constructor
+ * @api public
+ */
+function EventEmitter() { /* Nothing to set */ }
+
+/**
+ * Holds the assigned EventEmitters by name.
+ *
+ * @type {Object}
+ * @private
+ */
+EventEmitter.prototype._events = undefined;
+
+/**
+ * Return a list of assigned event listeners.
+ *
+ * @param {String} event The events that should be listed.
+ * @param {Boolean} exists We only need to know if there are listeners.
+ * @returns {Array|Boolean}
+ * @api public
+ */
+EventEmitter.prototype.listeners = function listeners(event, exists) {
+  var prefix = '~'+ event
+    , available = this._events && this._events[prefix];
+
+  if (exists) return !!available;
+  if (!available) return [];
+  if (this._events[prefix].fn) return [this._events[prefix].fn];
+
+  for (var i = 0, l = this._events[prefix].length, ee = new Array(l); i < l; i++) {
+    ee[i] = this._events[prefix][i].fn;
+  }
+
+  return ee;
+};
+
+/**
+ * Emit an event to all registered event listeners.
+ *
+ * @param {String} event The name of the event.
+ * @returns {Boolean} Indication if we've emitted an event.
+ * @api public
+ */
+EventEmitter.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
+  var prefix = '~'+ event;
+
+  if (!this._events || !this._events[prefix]) return false;
+
+  var listeners = this._events[prefix]
+    , len = arguments.length
+    , args
+    , i;
+
+  if ('function' === typeof listeners.fn) {
+    if (listeners.once) this.removeListener(event, listeners.fn, undefined, true);
+
+    switch (len) {
+      case 1: return listeners.fn.call(listeners.context), true;
+      case 2: return listeners.fn.call(listeners.context, a1), true;
+      case 3: return listeners.fn.call(listeners.context, a1, a2), true;
+      case 4: return listeners.fn.call(listeners.context, a1, a2, a3), true;
+      case 5: return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
+      case 6: return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
+    }
+
+    for (i = 1, args = new Array(len -1); i < len; i++) {
+      args[i - 1] = arguments[i];
+    }
+
+    listeners.fn.apply(listeners.context, args);
+  } else {
+    var length = listeners.length
+      , j;
+
+    for (i = 0; i < length; i++) {
+      if (listeners[i].once) this.removeListener(event, listeners[i].fn, undefined, true);
+
+      switch (len) {
+        case 1: listeners[i].fn.call(listeners[i].context); break;
+        case 2: listeners[i].fn.call(listeners[i].context, a1); break;
+        case 3: listeners[i].fn.call(listeners[i].context, a1, a2); break;
+        default:
+          if (!args) for (j = 1, args = new Array(len -1); j < len; j++) {
+            args[j - 1] = arguments[j];
+          }
+
+          listeners[i].fn.apply(listeners[i].context, args);
+      }
+    }
+  }
+
+  return true;
+};
+
+/**
+ * Register a new EventListener for the given event.
+ *
+ * @param {String} event Name of the event.
+ * @param {Functon} fn Callback function.
+ * @param {Mixed} context The context of the function.
+ * @api public
+ */
+EventEmitter.prototype.on = function on(event, fn, context) {
+  var listener = new EE(fn, context || this)
+    , prefix = '~'+ event;
+
+  if (!this._events) this._events = {};
+  if (!this._events[prefix]) this._events[prefix] = listener;
+  else {
+    if (!this._events[prefix].fn) this._events[prefix].push(listener);
+    else this._events[prefix] = [
+      this._events[prefix], listener
+    ];
+  }
+
+  return this;
+};
+
+/**
+ * Add an EventListener that's only called once.
+ *
+ * @param {String} event Name of the event.
+ * @param {Function} fn Callback function.
+ * @param {Mixed} context The context of the function.
+ * @api public
+ */
+EventEmitter.prototype.once = function once(event, fn, context) {
+  var listener = new EE(fn, context || this, true)
+    , prefix = '~'+ event;
+
+  if (!this._events) this._events = {};
+  if (!this._events[prefix]) this._events[prefix] = listener;
+  else {
+    if (!this._events[prefix].fn) this._events[prefix].push(listener);
+    else this._events[prefix] = [
+      this._events[prefix], listener
+    ];
+  }
+
+  return this;
+};
+
+/**
+ * Remove event listeners.
+ *
+ * @param {String} event The event we want to remove.
+ * @param {Function} fn The listener that we need to find.
+ * @param {Mixed} context Only remove listeners matching this context.
+ * @param {Boolean} once Only remove once listeners.
+ * @api public
+ */
+EventEmitter.prototype.removeListener = function removeListener(event, fn, context, once) {
+  var prefix = '~'+ event;
+
+  if (!this._events || !this._events[prefix]) return this;
+
+  var listeners = this._events[prefix]
+    , events = [];
+
+  if (fn) {
+    if (listeners.fn) {
+      if (
+           listeners.fn !== fn
+        || (once && !listeners.once)
+        || (context && listeners.context !== context)
+      ) {
+        events.push(listeners);
+      }
+    } else {
+      for (var i = 0, length = listeners.length; i < length; i++) {
+        if (
+             listeners[i].fn !== fn
+          || (once && !listeners[i].once)
+          || (context && listeners[i].context !== context)
+        ) {
+          events.push(listeners[i]);
+        }
+      }
+    }
+  }
+
+  //
+  // Reset the array, or remove it completely if we have no more listeners.
+  //
+  if (events.length) {
+    this._events[prefix] = events.length === 1 ? events[0] : events;
+  } else {
+    delete this._events[prefix];
+  }
+
+  return this;
+};
+
+/**
+ * Remove all listeners or only the listeners for the specified event.
+ *
+ * @param {String} event The event want to remove all listeners for.
+ * @api public
+ */
+EventEmitter.prototype.removeAllListeners = function removeAllListeners(event) {
+  if (!this._events) return this;
+
+  if (event) delete this._events['~'+ event];
+  else this._events = {};
+
+  return this;
+};
+
+//
+// Alias methods names because people roll like that.
+//
+EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
+EventEmitter.prototype.addListener = EventEmitter.prototype.on;
+
+//
+// This function doesn't apply anymore.
+//
+EventEmitter.prototype.setMaxListeners = function setMaxListeners() {
+  return this;
+};
+
+//
+// Expose the module.
+//
+module.exports = EventEmitter;
+
+},{}],12:[function(require,module,exports){
+'use strict';
+
+function ToObject(val) {
+  if (val == null) {
+    throw new TypeError('Object.assign cannot be called with null or undefined');
+  }
+
+  return Object(val);
+}
+
+module.exports = Object.assign || function (target, source) {
+  var from;
+  var keys;
+  var to = ToObject(target);
+
+  for (var s = 1; s < arguments.length; s++) {
+    from = arguments[s];
+    keys = Object.keys(Object(from));
+
+    for (var i = 0; i < keys.length; i++) {
+      to[keys[i]] = from[keys[i]];
+    }
+  }
+
+  return to;
+};
+
+},{}],13:[function(require,module,exports){
+(function (process){
+/*!
+ * async
+ * https://github.com/caolan/async
+ *
+ * Copyright 2010-2014 Caolan McMahon
+ * Released under the MIT license
+ */
+/*jshint onevar: false, indent:4 */
+/*global setImmediate: false, setTimeout: false, console: false */
+(function () {
+
+    var async = {};
+
+    // global on the server, window in the browser
+    var root, previous_async;
+
+    root = this;
+    if (root != null) {
+      previous_async = root.async;
+    }
+
+    async.noConflict = function () {
+        root.async = previous_async;
+        return async;
+    };
+
+    function only_once(fn) {
+        var called = false;
+        return function() {
+            if (called) throw new Error("Callback was already called.");
+            called = true;
+            fn.apply(root, arguments);
+        }
+    }
+
+    //// cross-browser compatiblity functions ////
+
+    var _toString = Object.prototype.toString;
+
+    var _isArray = Array.isArray || function (obj) {
+        return _toString.call(obj) === '[object Array]';
+    };
+
+    var _each = function (arr, iterator) {
+        if (arr.forEach) {
+            return arr.forEach(iterator);
+        }
+        for (var i = 0; i < arr.length; i += 1) {
+            iterator(arr[i], i, arr);
+        }
+    };
+
+    var _map = function (arr, iterator) {
+        if (arr.map) {
+            return arr.map(iterator);
+        }
+        var results = [];
+        _each(arr, function (x, i, a) {
+            results.push(iterator(x, i, a));
+        });
+        return results;
+    };
+
+    var _reduce = function (arr, iterator, memo) {
+        if (arr.reduce) {
+            return arr.reduce(iterator, memo);
+        }
+        _each(arr, function (x, i, a) {
+            memo = iterator(memo, x, i, a);
+        });
+        return memo;
+    };
+
+    var _keys = function (obj) {
+        if (Object.keys) {
+            return Object.keys(obj);
+        }
+        var keys = [];
+        for (var k in obj) {
+            if (obj.hasOwnProperty(k)) {
+                keys.push(k);
+            }
+        }
+        return keys;
+    };
+
+    //// exported async module functions ////
+
+    //// nextTick implementation with browser-compatible fallback ////
+    if (typeof process === 'undefined' || !(process.nextTick)) {
+        if (typeof setImmediate === 'function') {
+            async.nextTick = function (fn) {
+                // not a direct alias for IE10 compatibility
+                setImmediate(fn);
+            };
+            async.setImmediate = async.nextTick;
+        }
+        else {
+            async.nextTick = function (fn) {
+                setTimeout(fn, 0);
+            };
+            async.setImmediate = async.nextTick;
+        }
+    }
+    else {
+        async.nextTick = process.nextTick;
+        if (typeof setImmediate !== 'undefined') {
+            async.setImmediate = function (fn) {
+              // not a direct alias for IE10 compatibility
+              setImmediate(fn);
+            };
+        }
+        else {
+            async.setImmediate = async.nextTick;
+        }
+    }
+
+    async.each = function (arr, iterator, callback) {
+        callback = callback || function () {};
+        if (!arr.length) {
+            return callback();
+        }
+        var completed = 0;
+        _each(arr, function (x) {
+            iterator(x, only_once(done) );
+        });
+        function done(err) {
+          if (err) {
+              callback(err);
+              callback = function () {};
+          }
+          else {
+              completed += 1;
+              if (completed >= arr.length) {
+                  callback();
+              }
+          }
+        }
+    };
+    async.forEach = async.each;
+
+    async.eachSeries = function (arr, iterator, callback) {
+        callback = callback || function () {};
+        if (!arr.length) {
+            return callback();
+        }
+        var completed = 0;
+        var iterate = function () {
+            iterator(arr[completed], function (err) {
+                if (err) {
+                    callback(err);
+                    callback = function () {};
+                }
+                else {
+                    completed += 1;
+                    if (completed >= arr.length) {
+                        callback();
+                    }
+                    else {
+                        iterate();
+                    }
+                }
+            });
+        };
+        iterate();
+    };
+    async.forEachSeries = async.eachSeries;
+
+    async.eachLimit = function (arr, limit, iterator, callback) {
+        var fn = _eachLimit(limit);
+        fn.apply(null, [arr, iterator, callback]);
+    };
+    async.forEachLimit = async.eachLimit;
+
+    var _eachLimit = function (limit) {
+
+        return function (arr, iterator, callback) {
+            callback = callback || function () {};
+            if (!arr.length || limit <= 0) {
+                return callback();
+            }
+            var completed = 0;
+            var started = 0;
+            var running = 0;
+
+            (function replenish () {
+                if (completed >= arr.length) {
+                    return callback();
+                }
+
+                while (running < limit && started < arr.length) {
+                    started += 1;
+                    running += 1;
+                    iterator(arr[started - 1], function (err) {
+                        if (err) {
+                            callback(err);
+                            callback = function () {};
+                        }
+                        else {
+                            completed += 1;
+                            running -= 1;
+                            if (completed >= arr.length) {
+                                callback();
+                            }
+                            else {
+                                replenish();
+                            }
+                        }
+                    });
+                }
+            })();
+        };
+    };
+
+
+    var doParallel = function (fn) {
+        return function () {
+            var args = Array.prototype.slice.call(arguments);
+            return fn.apply(null, [async.each].concat(args));
+        };
+    };
+    var doParallelLimit = function(limit, fn) {
+        return function () {
+            var args = Array.prototype.slice.call(arguments);
+            return fn.apply(null, [_eachLimit(limit)].concat(args));
+        };
+    };
+    var doSeries = function (fn) {
+        return function () {
+            var args = Array.prototype.slice.call(arguments);
+            return fn.apply(null, [async.eachSeries].concat(args));
+        };
+    };
+
+
+    var _asyncMap = function (eachfn, arr, iterator, callback) {
+        arr = _map(arr, function (x, i) {
+            return {index: i, value: x};
+        });
+        if (!callback) {
+            eachfn(arr, function (x, callback) {
+                iterator(x.value, function (err) {
+                    callback(err);
+                });
+            });
+        } else {
+            var results = [];
+            eachfn(arr, function (x, callback) {
+                iterator(x.value, function (err, v) {
+                    results[x.index] = v;
+                    callback(err);
+                });
+            }, function (err) {
+                callback(err, results);
+            });
+        }
+    };
+    async.map = doParallel(_asyncMap);
+    async.mapSeries = doSeries(_asyncMap);
+    async.mapLimit = function (arr, limit, iterator, callback) {
+        return _mapLimit(limit)(arr, iterator, callback);
+    };
+
+    var _mapLimit = function(limit) {
+        return doParallelLimit(limit, _asyncMap);
+    };
+
+    // reduce only has a series version, as doing reduce in parallel won't
+    // work in many situations.
+    async.reduce = function (arr, memo, iterator, callback) {
+        async.eachSeries(arr, function (x, callback) {
+            iterator(memo, x, function (err, v) {
+                memo = v;
+                callback(err);
+            });
+        }, function (err) {
+            callback(err, memo);
+        });
+    };
+    // inject alias
+    async.inject = async.reduce;
+    // foldl alias
+    async.foldl = async.reduce;
+
+    async.reduceRight = function (arr, memo, iterator, callback) {
+        var reversed = _map(arr, function (x) {
+            return x;
+        }).reverse();
+        async.reduce(reversed, memo, iterator, callback);
+    };
+    // foldr alias
+    async.foldr = async.reduceRight;
+
+    var _filter = function (eachfn, arr, iterator, callback) {
+        var results = [];
+        arr = _map(arr, function (x, i) {
+            return {index: i, value: x};
+        });
+        eachfn(arr, function (x, callback) {
+            iterator(x.value, function (v) {
+                if (v) {
+                    results.push(x);
+                }
+                callback();
+            });
+        }, function (err) {
+            callback(_map(results.sort(function (a, b) {
+                return a.index - b.index;
+            }), function (x) {
+                return x.value;
+            }));
+        });
+    };
+    async.filter = doParallel(_filter);
+    async.filterSeries = doSeries(_filter);
+    // select alias
+    async.select = async.filter;
+    async.selectSeries = async.filterSeries;
+
+    var _reject = function (eachfn, arr, iterator, callback) {
+        var results = [];
+        arr = _map(arr, function (x, i) {
+            return {index: i, value: x};
+        });
+        eachfn(arr, function (x, callback) {
+            iterator(x.value, function (v) {
+                if (!v) {
+                    results.push(x);
+                }
+                callback();
+            });
+        }, function (err) {
+            callback(_map(results.sort(function (a, b) {
+                return a.index - b.index;
+            }), function (x) {
+                return x.value;
+            }));
+        });
+    };
+    async.reject = doParallel(_reject);
+    async.rejectSeries = doSeries(_reject);
+
+    var _detect = function (eachfn, arr, iterator, main_callback) {
+        eachfn(arr, function (x, callback) {
+            iterator(x, function (result) {
+                if (result) {
+                    main_callback(x);
+                    main_callback = function () {};
+                }
+                else {
+                    callback();
+                }
+            });
+        }, function (err) {
+            main_callback();
+        });
+    };
+    async.detect = doParallel(_detect);
+    async.detectSeries = doSeries(_detect);
+
+    async.some = function (arr, iterator, main_callback) {
+        async.each(arr, function (x, callback) {
+            iterator(x, function (v) {
+                if (v) {
+                    main_callback(true);
+                    main_callback = function () {};
+                }
+                callback();
+            });
+        }, function (err) {
+            main_callback(false);
+        });
+    };
+    // any alias
+    async.any = async.some;
+
+    async.every = function (arr, iterator, main_callback) {
+        async.each(arr, function (x, callback) {
+            iterator(x, function (v) {
+                if (!v) {
+                    main_callback(false);
+                    main_callback = function () {};
+                }
+                callback();
+            });
+        }, function (err) {
+            main_callback(true);
+        });
+    };
+    // all alias
+    async.all = async.every;
+
+    async.sortBy = function (arr, iterator, callback) {
+        async.map(arr, function (x, callback) {
+            iterator(x, function (err, criteria) {
+                if (err) {
+                    callback(err);
+                }
+                else {
+                    callback(null, {value: x, criteria: criteria});
+                }
+            });
+        }, function (err, results) {
+            if (err) {
+                return callback(err);
+            }
+            else {
+                var fn = function (left, right) {
+                    var a = left.criteria, b = right.criteria;
+                    return a < b ? -1 : a > b ? 1 : 0;
+                };
+                callback(null, _map(results.sort(fn), function (x) {
+                    return x.value;
+                }));
+            }
+        });
+    };
+
+    async.auto = function (tasks, callback) {
+        callback = callback || function () {};
+        var keys = _keys(tasks);
+        var remainingTasks = keys.length
+        if (!remainingTasks) {
+            return callback();
+        }
+
+        var results = {};
+
+        var listeners = [];
+        var addListener = function (fn) {
+            listeners.unshift(fn);
+        };
+        var removeListener = function (fn) {
+            for (var i = 0; i < listeners.length; i += 1) {
+                if (listeners[i] === fn) {
+                    listeners.splice(i, 1);
+                    return;
+                }
+            }
+        };
+        var taskComplete = function () {
+            remainingTasks--
+            _each(listeners.slice(0), function (fn) {
+                fn();
+            });
+        };
+
+        addListener(function () {
+            if (!remainingTasks) {
+                var theCallback = callback;
+                // prevent final callback from calling itself if it errors
+                callback = function () {};
+
+                theCallback(null, results);
+            }
+        });
+
+        _each(keys, function (k) {
+            var task = _isArray(tasks[k]) ? tasks[k]: [tasks[k]];
+            var taskCallback = function (err) {
+                var args = Array.prototype.slice.call(arguments, 1);
+                if (args.length <= 1) {
+                    args = args[0];
+                }
+                if (err) {
+                    var safeResults = {};
+                    _each(_keys(results), function(rkey) {
+                        safeResults[rkey] = results[rkey];
+                    });
+                    safeResults[k] = args;
+                    callback(err, safeResults);
+                    // stop subsequent errors hitting callback multiple times
+                    callback = function () {};
+                }
+                else {
+                    results[k] = args;
+                    async.setImmediate(taskComplete);
+                }
+            };
+            var requires = task.slice(0, Math.abs(task.length - 1)) || [];
+            var ready = function () {
+                return _reduce(requires, function (a, x) {
+                    return (a && results.hasOwnProperty(x));
+                }, true) && !results.hasOwnProperty(k);
+            };
+            if (ready()) {
+                task[task.length - 1](taskCallback, results);
+            }
+            else {
+                var listener = function () {
+                    if (ready()) {
+                        removeListener(listener);
+                        task[task.length - 1](taskCallback, results);
+                    }
+                };
+                addListener(listener);
+            }
+        });
+    };
+
+    async.retry = function(times, task, callback) {
+        var DEFAULT_TIMES = 5;
+        var attempts = [];
+        // Use defaults if times not passed
+        if (typeof times === 'function') {
+            callback = task;
+            task = times;
+            times = DEFAULT_TIMES;
+        }
+        // Make sure times is a number
+        times = parseInt(times, 10) || DEFAULT_TIMES;
+        var wrappedTask = function(wrappedCallback, wrappedResults) {
+            var retryAttempt = function(task, finalAttempt) {
+                return function(seriesCallback) {
+                    task(function(err, result){
+                        seriesCallback(!err || finalAttempt, {err: err, result: result});
+                    }, wrappedResults);
+                };
+            };
+            while (times) {
+                attempts.push(retryAttempt(task, !(times-=1)));
+            }
+            async.series(attempts, function(done, data){
+                data = data[data.length - 1];
+                (wrappedCallback || callback)(data.err, data.result);
+            });
+        }
+        // If a callback is passed, run this as a controll flow
+        return callback ? wrappedTask() : wrappedTask
+    };
+
+    async.waterfall = function (tasks, callback) {
+        callback = callback || function () {};
+        if (!_isArray(tasks)) {
+          var err = new Error('First argument to waterfall must be an array of functions');
+          return callback(err);
+        }
+        if (!tasks.length) {
+            return callback();
+        }
+        var wrapIterator = function (iterator) {
+            return function (err) {
+                if (err) {
+                    callback.apply(null, arguments);
+                    callback = function () {};
+                }
+                else {
+                    var args = Array.prototype.slice.call(arguments, 1);
+                    var next = iterator.next();
+                    if (next) {
+                        args.push(wrapIterator(next));
+                    }
+                    else {
+                        args.push(callback);
+                    }
+                    async.setImmediate(function () {
+                        iterator.apply(null, args);
+                    });
+                }
+            };
+        };
+        wrapIterator(async.iterator(tasks))();
+    };
+
+    var _parallel = function(eachfn, tasks, callback) {
+        callback = callback || function () {};
+        if (_isArray(tasks)) {
+            eachfn.map(tasks, function (fn, callback) {
+                if (fn) {
+                    fn(function (err) {
+                        var args = Array.prototype.slice.call(arguments, 1);
+                        if (args.length <= 1) {
+                            args = args[0];
+                        }
+                        callback.call(null, err, args);
+                    });
+                }
+            }, callback);
+        }
+        else {
+            var results = {};
+            eachfn.each(_keys(tasks), function (k, callback) {
+                tasks[k](function (err) {
+                    var args = Array.prototype.slice.call(arguments, 1);
+                    if (args.length <= 1) {
+                        args = args[0];
+                    }
+                    results[k] = args;
+                    callback(err);
+                });
+            }, function (err) {
+                callback(err, results);
+            });
+        }
+    };
+
+    async.parallel = function (tasks, callback) {
+        _parallel({ map: async.map, each: async.each }, tasks, callback);
+    };
+
+    async.parallelLimit = function(tasks, limit, callback) {
+        _parallel({ map: _mapLimit(limit), each: _eachLimit(limit) }, tasks, callback);
+    };
+
+    async.series = function (tasks, callback) {
+        callback = callback || function () {};
+        if (_isArray(tasks)) {
+            async.mapSeries(tasks, function (fn, callback) {
+                if (fn) {
+                    fn(function (err) {
+                        var args = Array.prototype.slice.call(arguments, 1);
+                        if (args.length <= 1) {
+                            args = args[0];
+                        }
+                        callback.call(null, err, args);
+                    });
+                }
+            }, callback);
+        }
+        else {
+            var results = {};
+            async.eachSeries(_keys(tasks), function (k, callback) {
+                tasks[k](function (err) {
+                    var args = Array.prototype.slice.call(arguments, 1);
+                    if (args.length <= 1) {
+                        args = args[0];
+                    }
+                    results[k] = args;
+                    callback(err);
+                });
+            }, function (err) {
+                callback(err, results);
+            });
+        }
+    };
+
+    async.iterator = function (tasks) {
+        var makeCallback = function (index) {
+            var fn = function () {
+                if (tasks.length) {
+                    tasks[index].apply(null, arguments);
+                }
+                return fn.next();
+            };
+            fn.next = function () {
+                return (index < tasks.length - 1) ? makeCallback(index + 1): null;
+            };
+            return fn;
+        };
+        return makeCallback(0);
+    };
+
+    async.apply = function (fn) {
+        var args = Array.prototype.slice.call(arguments, 1);
+        return function () {
+            return fn.apply(
+                null, args.concat(Array.prototype.slice.call(arguments))
+            );
+        };
+    };
+
+    var _concat = function (eachfn, arr, fn, callback) {
+        var r = [];
+        eachfn(arr, function (x, cb) {
+            fn(x, function (err, y) {
+                r = r.concat(y || []);
+                cb(err);
+            });
+        }, function (err) {
+            callback(err, r);
+        });
+    };
+    async.concat = doParallel(_concat);
+    async.concatSeries = doSeries(_concat);
+
+    async.whilst = function (test, iterator, callback) {
+        if (test()) {
+            iterator(function (err) {
+                if (err) {
+                    return callback(err);
+                }
+                async.whilst(test, iterator, callback);
+            });
+        }
+        else {
+            callback();
+        }
+    };
+
+    async.doWhilst = function (iterator, test, callback) {
+        iterator(function (err) {
+            if (err) {
+                return callback(err);
+            }
+            var args = Array.prototype.slice.call(arguments, 1);
+            if (test.apply(null, args)) {
+                async.doWhilst(iterator, test, callback);
+            }
+            else {
+                callback();
+            }
+        });
+    };
+
+    async.until = function (test, iterator, callback) {
+        if (!test()) {
+            iterator(function (err) {
+                if (err) {
+                    return callback(err);
+                }
+                async.until(test, iterator, callback);
+            });
+        }
+        else {
+            callback();
+        }
+    };
+
+    async.doUntil = function (iterator, test, callback) {
+        iterator(function (err) {
+            if (err) {
+                return callback(err);
+            }
+            var args = Array.prototype.slice.call(arguments, 1);
+            if (!test.apply(null, args)) {
+                async.doUntil(iterator, test, callback);
+            }
+            else {
+                callback();
+            }
+        });
+    };
+
+    async.queue = function (worker, concurrency) {
+        if (concurrency === undefined) {
+            concurrency = 1;
+        }
+        function _insert(q, data, pos, callback) {
+          if (!q.started){
+            q.started = true;
+          }
+          if (!_isArray(data)) {
+              data = [data];
+          }
+          if(data.length == 0) {
+             // call drain immediately if there are no tasks
+             return async.setImmediate(function() {
+                 if (q.drain) {
+                     q.drain();
+                 }
+             });
+          }
+          _each(data, function(task) {
+              var item = {
+                  data: task,
+                  callback: typeof callback === 'function' ? callback : null
+              };
+
+              if (pos) {
+                q.tasks.unshift(item);
+              } else {
+                q.tasks.push(item);
+              }
+
+              if (q.saturated && q.tasks.length === q.concurrency) {
+                  q.saturated();
+              }
+              async.setImmediate(q.process);
+          });
+        }
+
+        var workers = 0;
+        var q = {
+            tasks: [],
+            concurrency: concurrency,
+            saturated: null,
+            empty: null,
+            drain: null,
+            started: false,
+            paused: false,
+            push: function (data, callback) {
+              _insert(q, data, false, callback);
+            },
+            kill: function () {
+              q.drain = null;
+              q.tasks = [];
+            },
+            unshift: function (data, callback) {
+              _insert(q, data, true, callback);
+            },
+            process: function () {
+                if (!q.paused && workers < q.concurrency && q.tasks.length) {
+                    var task = q.tasks.shift();
+                    if (q.empty && q.tasks.length === 0) {
+                        q.empty();
+                    }
+                    workers += 1;
+                    var next = function () {
+                        workers -= 1;
+                        if (task.callback) {
+                            task.callback.apply(task, arguments);
+                        }
+                        if (q.drain && q.tasks.length + workers === 0) {
+                            q.drain();
+                        }
+                        q.process();
+                    };
+                    var cb = only_once(next);
+                    worker(task.data, cb);
+                }
+            },
+            length: function () {
+                return q.tasks.length;
+            },
+            running: function () {
+                return workers;
+            },
+            idle: function() {
+                return q.tasks.length + workers === 0;
+            },
+            pause: function () {
+                if (q.paused === true) { return; }
+                q.paused = true;
+                q.process();
+            },
+            resume: function () {
+                if (q.paused === false) { return; }
+                q.paused = false;
+                q.process();
+            }
+        };
+        return q;
+    };
+    
+    async.priorityQueue = function (worker, concurrency) {
+        
+        function _compareTasks(a, b){
+          return a.priority - b.priority;
+        };
+        
+        function _binarySearch(sequence, item, compare) {
+          var beg = -1,
+              end = sequence.length - 1;
+          while (beg < end) {
+            var mid = beg + ((end - beg + 1) >>> 1);
+            if (compare(item, sequence[mid]) >= 0) {
+              beg = mid;
+            } else {
+              end = mid - 1;
+            }
+          }
+          return beg;
+        }
+        
+        function _insert(q, data, priority, callback) {
+          if (!q.started){
+            q.started = true;
+          }
+          if (!_isArray(data)) {
+              data = [data];
+          }
+          if(data.length == 0) {
+             // call drain immediately if there are no tasks
+             return async.setImmediate(function() {
+                 if (q.drain) {
+                     q.drain();
+                 }
+             });
+          }
+          _each(data, function(task) {
+              var item = {
+                  data: task,
+                  priority: priority,
+                  callback: typeof callback === 'function' ? callback : null
+              };
+              
+              q.tasks.splice(_binarySearch(q.tasks, item, _compareTasks) + 1, 0, item);
+
+              if (q.saturated && q.tasks.length === q.concurrency) {
+                  q.saturated();
+              }
+              async.setImmediate(q.process);
+          });
+        }
+        
+        // Start with a normal queue
+        var q = async.queue(worker, concurrency);
+        
+        // Override push to accept second parameter representing priority
+        q.push = function (data, priority, callback) {
+          _insert(q, data, priority, callback);
+        };
+        
+        // Remove unshift function
+        delete q.unshift;
+
+        return q;
+    };
+
+    async.cargo = function (worker, payload) {
+        var working     = false,
+            tasks       = [];
+
+        var cargo = {
+            tasks: tasks,
+            payload: payload,
+            saturated: null,
+            empty: null,
+            drain: null,
+            drained: true,
+            push: function (data, callback) {
+                if (!_isArray(data)) {
+                    data = [data];
+                }
+                _each(data, function(task) {
+                    tasks.push({
+                        data: task,
+                        callback: typeof callback === 'function' ? callback : null
+                    });
+                    cargo.drained = false;
+                    if (cargo.saturated && tasks.length === payload) {
+                        cargo.saturated();
+                    }
+                });
+                async.setImmediate(cargo.process);
+            },
+            process: function process() {
+                if (working) return;
+                if (tasks.length === 0) {
+                    if(cargo.drain && !cargo.drained) cargo.drain();
+                    cargo.drained = true;
+                    return;
+                }
+
+                var ts = typeof payload === 'number'
+                            ? tasks.splice(0, payload)
+                            : tasks.splice(0, tasks.length);
+
+                var ds = _map(ts, function (task) {
+                    return task.data;
+                });
+
+                if(cargo.empty) cargo.empty();
+                working = true;
+                worker(ds, function () {
+                    working = false;
+
+                    var args = arguments;
+                    _each(ts, function (data) {
+                        if (data.callback) {
+                            data.callback.apply(null, args);
+                        }
+                    });
+
+                    process();
+                });
+            },
+            length: function () {
+                return tasks.length;
+            },
+            running: function () {
+                return working;
+            }
+        };
+        return cargo;
+    };
+
+    var _console_fn = function (name) {
+        return function (fn) {
+            var args = Array.prototype.slice.call(arguments, 1);
+            fn.apply(null, args.concat([function (err) {
+                var args = Array.prototype.slice.call(arguments, 1);
+                if (typeof console !== 'undefined') {
+                    if (err) {
+                        if (console.error) {
+                            console.error(err);
+                        }
+                    }
+                    else if (console[name]) {
+                        _each(args, function (x) {
+                            console[name](x);
+                        });
+                    }
+                }
+            }]));
+        };
+    };
+    async.log = _console_fn('log');
+    async.dir = _console_fn('dir');
+    /*async.info = _console_fn('info');
+    async.warn = _console_fn('warn');
+    async.error = _console_fn('error');*/
+
+    async.memoize = function (fn, hasher) {
+        var memo = {};
+        var queues = {};
+        hasher = hasher || function (x) {
+            return x;
+        };
+        var memoized = function () {
+            var args = Array.prototype.slice.call(arguments);
+            var callback = args.pop();
+            var key = hasher.apply(null, args);
+            if (key in memo) {
+                async.nextTick(function () {
+                    callback.apply(null, memo[key]);
+                });
+            }
+            else if (key in queues) {
+                queues[key].push(callback);
+            }
+            else {
+                queues[key] = [callback];
+                fn.apply(null, args.concat([function () {
+                    memo[key] = arguments;
+                    var q = queues[key];
+                    delete queues[key];
+                    for (var i = 0, l = q.length; i < l; i++) {
+                      q[i].apply(null, arguments);
+                    }
+                }]));
+            }
+        };
+        memoized.memo = memo;
+        memoized.unmemoized = fn;
+        return memoized;
+    };
+
+    async.unmemoize = function (fn) {
+      return function () {
+        return (fn.unmemoized || fn).apply(null, arguments);
+      };
+    };
+
+    async.times = function (count, iterator, callback) {
+        var counter = [];
+        for (var i = 0; i < count; i++) {
+            counter.push(i);
+        }
+        return async.map(counter, iterator, callback);
+    };
+
+    async.timesSeries = function (count, iterator, callback) {
+        var counter = [];
+        for (var i = 0; i < count; i++) {
+            counter.push(i);
+        }
+        return async.mapSeries(counter, iterator, callback);
+    };
+
+    async.seq = function (/* functions... */) {
+        var fns = arguments;
+        return function () {
+            var that = this;
+            var args = Array.prototype.slice.call(arguments);
+            var callback = args.pop();
+            async.reduce(fns, args, function (newargs, fn, cb) {
+                fn.apply(that, newargs.concat([function () {
+                    var err = arguments[0];
+                    var nextargs = Array.prototype.slice.call(arguments, 1);
+                    cb(err, nextargs);
+                }]))
+            },
+            function (err, results) {
+                callback.apply(that, [err].concat(results));
+            });
+        };
+    };
+
+    async.compose = function (/* functions... */) {
+      return async.seq.apply(null, Array.prototype.reverse.call(arguments));
+    };
+
+    var _applyEach = function (eachfn, fns /*args...*/) {
+        var go = function () {
+            var that = this;
+            var args = Array.prototype.slice.call(arguments);
+            var callback = args.pop();
+            return eachfn(fns, function (fn, cb) {
+                fn.apply(that, args.concat([cb]));
+            },
+            callback);
+        };
+        if (arguments.length > 2) {
+            var args = Array.prototype.slice.call(arguments, 2);
+            return go.apply(this, args);
+        }
+        else {
+            return go;
+        }
+    };
+    async.applyEach = doParallel(_applyEach);
+    async.applyEachSeries = doSeries(_applyEach);
+
+    async.forever = function (fn, callback) {
+        function next(err) {
+            if (err) {
+                if (callback) {
+                    return callback(err);
+                }
+                throw err;
+            }
+            fn(next);
+        }
+        next();
+    };
+
+    // Node.js
+    if (typeof module !== 'undefined' && module.exports) {
+        module.exports = async;
+    }
+    // AMD / RequireJS
+    else if (typeof define !== 'undefined' && define.amd) {
+        define([], function () {
+            return async;
+        });
+    }
+    // included directly via <script> tag
+    else {
+        root.async = async;
+    }
+
+}());
+
+}).call(this,require('_process'))
+
+},{"_process":4}],14:[function(require,module,exports){
+arguments[4][11][0].apply(exports,arguments)
+},{"dup":11}],15:[function(require,module,exports){
+var async       = require('async'),
+    urlParser   = require('url'),
+    Resource    = require('./Resource'),
+    EventEmitter = require('eventemitter3');
+
+/**
+ * Manages the state and loading of multiple resources to load.
+ *
+ * @class
+ * @param [baseUrl=''] {string} The base url for all resources loaded by this loader.
+ * @param [concurrency=10] {number} The number of resources to load concurrently.
+ */
+function Loader(baseUrl, concurrency) {
+    EventEmitter.call(this);
+
+    concurrency = concurrency || 10;
+
+    /**
+     * The base url for all resources loaded by this loader.
+     *
+     * @member {string}
+     */
+    this.baseUrl = baseUrl || '';
+
+    /**
+     * The progress percent of the loader going through the queue.
+     *
+     * @member {number}
+     */
+    this.progress = 0;
+
+    /**
+     * Loading state of the loader, true if it is currently loading resources.
+     *
+     * @member {boolean}
+     */
+    this.loading = false;
+
+    /**
+     * The percentage of total progress that a single resource represents.
+     *
+     * @member {number}
+     */
+    this._progressChunk = 0;
+
+    /**
+     * The middleware to run before loading each resource.
+     *
+     * @member {function[]}
+     */
+    this._beforeMiddleware = [];
+
+    /**
+     * The middleware to run after loading each resource.
+     *
+     * @member {function[]}
+     */
+    this._afterMiddleware = [];
+
+    /**
+     * The `_loadResource` function bound with this object context.
+     *
+     * @private
+     * @member {function}
+     */
+    this._boundLoadResource = this._loadResource.bind(this);
+
+    /**
+     * The `_onLoad` function bound with this object context.
+     *
+     * @private
+     * @member {function}
+     */
+    this._boundOnLoad = this._onLoad.bind(this);
+
+    /**
+     * The resource buffer that fills until `load` is called to start loading resources.
+     *
+     * @private
+     * @member {Resource[]}
+     */
+    this._buffer = [];
+
+    /**
+     * Used to track load completion.
+     *
+     * @private
+     * @member {number}
+     */
+    this._numToLoad = 0;
+
+    /**
+     * The resources waiting to be loaded.
+     *
+     * @private
+     * @member {Resource[]}
+     */
+    this._queue = async.queue(this._boundLoadResource, concurrency);
+
+    /**
+     * All the resources for this loader keyed by name.
+     *
+     * @member {object<string, Resource>}
+     */
+    this.resources = {};
+
+    /**
+     * Emitted once per loaded or errored resource.
+     *
+     * @event progress
+     * @memberof Loader#
+     */
+
+    /**
+     * Emitted once per errored resource.
+     *
+     * @event error
+     * @memberof Loader#
+     */
+
+    /**
+     * Emitted once per loaded resource.
+     *
+     * @event load
+     * @memberof Loader#
+     */
+
+    /**
+     * Emitted when the loader begins to process the queue.
+     *
+     * @event start
+     * @memberof Loader#
+     */
+
+    /**
+     * Emitted when the queued resources all load.
+     *
+     * @event complete
+     * @memberof Loader#
+     */
+}
+
+Loader.prototype = Object.create(EventEmitter.prototype);
+Loader.prototype.constructor = Loader;
+module.exports = Loader;
+
+/**
+ * Adds a resource (or multiple resources) to the loader queue.
+ *
+ * This function can take a wide variety of different parameters. The only thing that is always
+ * required the url to load. All the following will work:
+ *
+ * ```js
+ * loader
+ *     // normal param syntax
+ *     .add('key', 'http://...', function () {})
+ *     .add('http://...', function () {})
+ *     .add('http://...')
+ *
+ *     // object syntax
+ *     .add({
+ *         name: 'key2',
+ *         url: 'http://...'
+ *     }, function () {})
+ *     .add({
+ *         url: 'http://...'
+ *     }, function () {})
+ *     .add({
+ *         name: 'key3',
+ *         url: 'http://...'
+ *         onComplete: function () {}
+ *     })
+ *     .add({
+ *         url: 'https://...',
+ *         onComplete: function () {},
+ *         crossOrigin: true
+ *     })
+ *
+ *     // you can also pass an array of objects or urls or both
+ *     .add([
+ *         { name: 'key4', url: 'http://...', onComplete: function () {} },
+ *         { url: 'http://...', onComplete: function () {} },
+ *         'http://...'
+ *     ]);
+ * ```
+ *
+ * @alias enqueue
+ * @param [name] {string} The name of the resource to load, if not passed the url is used.
+ * @param url {string} The url for this resource, relative to the baseUrl of this loader.
+ * @param [options] {object} The options for the load.
+ * @param [options.crossOrigin] {boolean} Is this request cross-origin? Default is to determine automatically.
+ * @param [options.loadType=Resource.LOAD_TYPE.XHR] {Resource.XHR_LOAD_TYPE} How should this resource be loaded?
+ * @param [options.xhrType=Resource.XHR_RESPONSE_TYPE.DEFAULT] {Resource.XHR_RESPONSE_TYPE} How should the data being
+ *      loaded be interpreted when using XHR?
+ * @param [callback] {function} Function to call when this specific resource completes loading.
+ * @return {Loader}
+ */
+Loader.prototype.add = Loader.prototype.enqueue = function (name, url, options, cb) {
+    // special case of an array of objects or urls
+    if (Array.isArray(name)) {
+        for (var i = 0; i < name.length; ++i) {
+            this.add(name[i]);
+        }
+
+        return this;
+    }
+
+    // if an object is passed instead of params
+    if (typeof name === 'object') {
+        cb = url || name.callback || name.onComplete;
+        options = name;
+        url = name.url;
+        name = name.name || name.key || name.url;
+    }
+
+    // case where no name is passed shift all args over by one.
+    if (typeof url !== 'string') {
+        cb = options;
+        options = url;
+        url = name;
+    }
+
+    // now that we shifted make sure we have a proper url.
+    if (typeof url !== 'string') {
+        throw new Error('No url passed to add resource to loader.');
+    }
+
+    // options are optional so people might pass a function and no options
+    if (typeof options === 'function') {
+        cb = options;
+        options = null;
+    }
+
+    // check if resource already exists.
+    if (this.resources[name]) {
+        throw new Error('Resource with name "' + name + '" already exists.');
+    }
+
+    // add base url if this isn't an absolute url
+    url = this._handleBaseUrl(url);
+
+    // create the store the resource
+    this.resources[name] = new Resource(name, url, options);
+
+    if (typeof cb === 'function') {
+        this.resources[name].once('afterMiddleware', cb);
+    }
+
+    this._numToLoad++;
+
+    // if already loading add it to the worker queue
+    if (this._queue.started) {
+        this._queue.push(this.resources[name]);
+        this._progressChunk = (100 - this.progress) / (this._queue.length() + this._queue.running());
+    }
+    // otherwise buffer it to be added to the queue later
+    else {
+        this._buffer.push(this.resources[name]);
+        this._progressChunk = 100 / this._buffer.length;
+    }
+
+    return this;
+};
+
+Loader.prototype._handleBaseUrl = function (url) {
+    var parsedUrl = urlParser.parse(url);
+
+    // absolute url, just use it as is.
+    if (parsedUrl.protocol || parsedUrl.pathname.indexOf('//') === 0) {
+        return url;
+    }
+
+    // if baseUrl doesn't end in slash and url doesn't start with slash, then add a slash inbetween
+    if (
+        this.baseUrl.length &&
+        this.baseUrl.lastIndexOf('/') !== this.baseUrl.length - 1 &&
+        url.lastIndexOf('/') !== url.length - 1
+    ) {
+        return this.baseUrl + '/' + url;
+    }
+    else {
+        return this.baseUrl + url;
+    }
+};
+
+
+/**
+ * Sets up a middleware function that will run *before* the
+ * resource is loaded.
+ *
+ * @alias pre
+ * @param middleware {function} The middleware function to register.
+ * @return {Loader}
+ */
+Loader.prototype.before = Loader.prototype.pre = function (fn) {
+    this._beforeMiddleware.push(fn);
+
+    return this;
+};
+
+/**
+ * Sets up a middleware function that will run *after* the
+ * resource is loaded.
+ *
+ * @alias use
+ * @param middleware {function} The middleware function to register.
+ * @return {Loader}
+ */
+Loader.prototype.after = Loader.prototype.use = function (fn) {
+    this._afterMiddleware.push(fn);
+
+    return this;
+};
+
+/**
+ * Resets the queue of the loader to prepare for a new load.
+ *
+ * @return {Loader}
+ */
+Loader.prototype.reset = function () {
+    // this.baseUrl = baseUrl || '';
+
+    this.progress = 0;
+
+    this.loading = false;
+
+    this._progressChunk = 0;
+
+    // this._beforeMiddleware.length = 0;
+    // this._afterMiddleware.length = 0;
+
+    this._buffer.length = 0;
+
+    this._numToLoad = 0;
+
+    this._queue.kill();
+    this._queue.started = false;
+
+    this.resources = {};
+};
+
+/**
+ * Starts loading the queued resources.
+ *
+ * @fires start
+ * @param [callback] {function} Optional callback that will be bound to the `complete` event.
+ * @return {Loader}
+ */
+Loader.prototype.load = function (cb) {
+    // register complete callback if they pass one
+    if (typeof cb === 'function') {
+        this.once('complete', cb);
+    }
+
+    // if the queue has already started we are done here
+    if (this._queue.started) {
+        return this;
+    }
+
+    // notify of start
+    this.emit('start', this);
+
+    // start the internal queue
+    for (var i = 0; i < this._buffer.length; ++i) {
+        this._queue.push(this._buffer[i]);
+    }
+
+    // empty the buffer
+    this._buffer.length = 0;
+
+    return this;
+};
+
+/**
+ * Loads a single resource.
+ *
+ * @fires progress
+ * @private
+ */
+Loader.prototype._loadResource = function (resource, dequeue) {
+    var self = this;
+
+    resource._dequeue = dequeue;
+
+    this._runMiddleware(resource, this._beforeMiddleware, function () {
+        // resource.on('progress', self.emit.bind(self, 'progress'));
+
+        resource.load(self._boundOnLoad);
+    });
+};
+
+/**
+ * Called once each resource has loaded.
+ *
+ * @fires complete
+ * @private
+ */
+Loader.prototype._onComplete = function () {
+    this.emit('complete', this, this.resources);
+};
+
+/**
+ * Called each time a resources is loaded.
+ *
+ * @fires progress
+ * @fires error
+ * @fires load
+ * @private
+ */
+Loader.prototype._onLoad = function (resource) {
+    this.progress += this._progressChunk;
+
+    this.emit('progress', this, resource);
+
+    if (resource.error) {
+        this.emit('error', resource.error, this, resource);
+    }
+    else {
+        this.emit('load', this, resource);
+    }
+
+    // run middleware, this *must* happen before dequeue so sub-assets get added properly
+    this._runMiddleware(resource, this._afterMiddleware, function () {
+        resource.emit('afterMiddleware', resource);
+
+        this._numToLoad--;
+
+        // do completion check
+        if (this._numToLoad === 0) {
+            this._onComplete();
+        }
+    });
+
+    // remove this resource from the async queue
+    resource._dequeue();
+};
+
+/**
+ * Run middleware functions on a resource.
+ *
+ * @private
+ */
+Loader.prototype._runMiddleware = function (resource, fns, cb) {
+    var self = this;
+
+    async.eachSeries(fns, function (fn, next) {
+        fn.call(self, resource, next);
+    }, cb.bind(this, resource));
+};
+
+Loader.LOAD_TYPE = Resource.LOAD_TYPE;
+Loader.XHR_READY_STATE = Resource.XHR_READY_STATE;
+Loader.XHR_RESPONSE_TYPE = Resource.XHR_RESPONSE_TYPE;
+
+},{"./Resource":16,"async":13,"eventemitter3":14,"url":9}],16:[function(require,module,exports){
+var EventEmitter = require('eventemitter3'),
+    _url = require('url'),
+    // tests is CORS is supported in XHR, if not we need to use XDR
+    useXdr = !!(window.XDomainRequest && !('withCredentials' in (new XMLHttpRequest()))),
+    tempAnchor = null;
+
+/**
+ * Manages the state and loading of a single resource represented by
+ * a single URL.
+ *
+ * @class
+ * @param name {string} The name of the resource to load.
+ * @param url {string|string[]} The url for this resource, for audio/video loads you can pass an array of sources.
+ * @param [options] {object} The options for the load.
+ * @param [options.crossOrigin] {boolean} Is this request cross-origin? Default is to determine automatically.
+ * @param [options.loadType=Resource.LOAD_TYPE.XHR] {Resource.LOAD_TYPE} How should this resource be loaded?
+ * @param [options.xhrType=Resource.XHR_RESPONSE_TYPE.DEFAULT] {Resource.XHR_RESPONSE_TYPE} How should the data being
+ *      loaded be interpreted when using XHR?
+ */
+function Resource(name, url, options) {
+    EventEmitter.call(this);
+
+    options = options || {};
+
+    if (typeof name !== 'string' || typeof url !== 'string') {
+        throw new Error('Both name and url are required for constructing a resource.');
+    }
+
+    /**
+     * The name of this resource.
+     *
+     * @member {string}
+     * @readonly
+     */
+    this.name = name;
+
+    /**
+     * The url used to load this resource.
+     *
+     * @member {string}
+     * @readonly
+     */
+    this.url = url;
+
+    /**
+     * The data that was loaded by the resource.
+     *
+     * @member {any}
+     */
+    this.data = null;
+
+    /**
+     * Is this request cross-origin? If unset, determined automatically.
+     *
+     * @member {string}
+     */
+    this.crossOrigin = options.crossOrigin === true ? 'anonymous' : null;
+
+    /**
+     * The method of loading to use for this resource.
+     *
+     * @member {Resource.LOAD_TYPE}
+     */
+    this.loadType = options.loadType || this._determineLoadType();
+
+    /**
+     * The type used to load the resource via XHR. If unset, determined automatically.
+     *
+     * @member {string}
+     */
+    this.xhrType = options.xhrType;
+
+    /**
+     * The error that occurred while loading (if any).
+     *
+     * @member {Error}
+     * @readonly
+     */
+    this.error = null;
+
+    /**
+     * The XHR object that was used to load this resource. This is only set
+     * when `loadType` is `Resource.LOAD_TYPE.XHR`.
+     *
+     * @member {XMLHttpRequest}
+     */
+    this.xhr = null;
+
+    /**
+     * Describes if this resource was loaded as json. Only valid after the resource
+     * has completely loaded.
+     *
+     * @member {boolean}
+     */
+    this.isJson = false;
+
+    /**
+     * Describes if this resource was loaded as xml. Only valid after the resource
+     * has completely loaded.
+     *
+     * @member {boolean}
+     */
+    this.isXml = false;
+
+    /**
+     * Describes if this resource was loaded as an image tag. Only valid after the resource
+     * has completely loaded.
+     *
+     * @member {boolean}
+     */
+    this.isImage = false;
+
+    /**
+     * Describes if this resource was loaded as an audio tag. Only valid after the resource
+     * has completely loaded.
+     *
+     * @member {boolean}
+     */
+    this.isAudio = false;
+
+    /**
+     * Describes if this resource was loaded as a video tag. Only valid after the resource
+     * has completely loaded.
+     *
+     * @member {boolean}
+     */
+    this.isVideo = false;
+
+    /**
+     * The `dequeue` method that will be used a storage place for the async queue dequeue method
+     * used privately by the loader.
+     *
+     * @member {function}
+     * @private
+     */
+    this._dequeue = null;
+
+    /**
+     * The `complete` function bound to this resource's context.
+     *
+     * @member {function}
+     * @private
+     */
+    this._boundComplete = this.complete.bind(this);
+
+    /**
+     * The `_onError` function bound to this resource's context.
+     *
+     * @member {function}
+     * @private
+     */
+    this._boundOnError = this._onError.bind(this);
+
+    /**
+     * The `_onProgress` function bound to this resource's context.
+     *
+     * @member {function}
+     * @private
+     */
+    this._boundOnProgress = this._onProgress.bind(this);
+
+    // xhr callbacks
+    this._boundXhrOnError = this._xhrOnError.bind(this);
+    this._boundXhrOnAbort = this._xhrOnAbort.bind(this);
+    this._boundXhrOnLoad = this._xhrOnLoad.bind(this);
+    this._boundXdrOnTimeout = this._xdrOnTimeout.bind(this);
+
+    /**
+     * Emitted when the resource beings to load.
+     *
+     * @event start
+     * @memberof Resource#
+     */
+
+    /**
+     * Emitted each time progress of this resource load updates.
+     * Not all resources types and loader systems can support this event
+     * so sometimes it may not be available. If the resource
+     * is being loaded on a modern browser, using XHR, and the remote server
+     * properly sets Content-Length headers, then this will be available.
+     *
+     * @event progress
+     * @memberof Resource#
+     */
+
+    /**
+     * Emitted once this resource has loaded, if there was an error it will
+     * be in the `error` property.
+     *
+     * @event complete
+     * @memberof Resource#
+     */
+}
+
+Resource.prototype = Object.create(EventEmitter.prototype);
+Resource.prototype.constructor = Resource;
+module.exports = Resource;
+
+/**
+ * Marks the resource as complete.
+ *
+ * @fires complete
+ */
+Resource.prototype.complete = function () {
+    // TODO: Clean this up in a wrapper or something...gross....
+    if (this.data && this.data.removeEventListener) {
+        this.data.removeEventListener('error', this._boundOnError);
+        this.data.removeEventListener('load', this._boundComplete);
+        this.data.removeEventListener('progress', this._boundOnProgress);
+        this.data.removeEventListener('canplaythrough', this._boundComplete);
+    }
+
+    if (this.xhr) {
+        if (this.xhr.removeEventListener) {
+            this.xhr.removeEventListener('error', this._boundXhrOnError);
+            this.xhr.removeEventListener('abort', this._boundXhrOnAbort);
+            this.xhr.removeEventListener('progress', this._boundOnProgress);
+            this.xhr.removeEventListener('load', this._boundXhrOnLoad);
+        }
+        else {
+            this.xhr.onerror = null;
+            this.xhr.ontimeout = null;
+            this.xhr.onprogress = null;
+            this.xhr.onload = null;
+        }
+    }
+
+    this.emit('complete', this);
+};
+
+/**
+ * Kicks off loading of this resource.
+ *
+ * @fires start
+ * @param [callback] {function} Optional callback to call once the resource is loaded.
+ */
+Resource.prototype.load = function (cb) {
+    this.emit('start', this);
+
+    // if a callback is set, listen for complete event
+    if (cb) {
+        this.once('complete', cb);
+    }
+
+    // if unset, determine the value
+    if (typeof this.crossOrigin !== 'string') {
+        this.crossOrigin = this._determineCrossOrigin(this.url);
+    }
+
+    switch(this.loadType) {
+        case Resource.LOAD_TYPE.IMAGE:
+            this._loadImage();
+            break;
+
+        case Resource.LOAD_TYPE.AUDIO:
+            this._loadElement('audio');
+            break;
+
+        case Resource.LOAD_TYPE.VIDEO:
+            this._loadElement('video');
+            break;
+
+        case Resource.LOAD_TYPE.XHR:
+            /* falls through */
+        default:
+            if (useXdr && this.crossOrigin) {
+                this._loadXdr();
+            }
+            else {
+                this._loadXhr();
+            }
+            break;
+    }
+};
+
+/**
+ * Loads this resources using an Image object.
+ *
+ * @private
+ */
+Resource.prototype._loadImage = function () {
+    this.data = new Image();
+
+    if (this.crossOrigin) {
+        this.data.crossOrigin = this.crossOrigin;
+    }
+
+    this.data.src = this.url;
+
+    this.isImage = true;
+
+    this.data.addEventListener('error', this._boundOnError, false);
+    this.data.addEventListener('load', this._boundComplete, false);
+    this.data.addEventListener('progress', this._boundOnProgress, false);
+};
+
+/**
+ * Loads this resources using an HTMLAudioElement or HTMLVideoElement.
+ *
+ * @private
+ */
+Resource.prototype._loadElement = function (type) {
+    this.data = document.createElement(type);
+
+    if (Array.isArray(this.url)) {
+        for (var i = 0; i < this.url.length; ++i) {
+            this.data.appendChild(this._createSource(type, this.url[i]));
+        }
+    }
+    else {
+        this.data.appendChild(this._createSource(type, this.url));
+    }
+
+    this['is' + type[0].toUpperCase() + type.substring(1)] = true;
+
+    this.data.addEventListener('error', this._boundOnError, false);
+    this.data.addEventListener('load', this._boundComplete, false);
+    this.data.addEventListener('progress', this._boundOnProgress, false);
+    this.data.addEventListener('canplaythrough', this._boundComplete, false);
+
+    this.data.load();
+};
+
+/**
+ * Loads this resources using an XMLHttpRequest.
+ *
+ * @private
+ */
+Resource.prototype._loadXhr = function () {
+    // if unset, determine the value
+    if (typeof this.xhrType !== 'string') {
+        this.xhrType = this._determineXhrType();
+    }
+
+    var xhr = this.xhr = new XMLHttpRequest();
+
+    // set the request type and url
+    xhr.open('GET', this.url, true);
+
+    // load json as text and parse it ourselves. We do this because some browsers
+    // *cough* safari *cough* can't deal with it.
+    if (this.xhrType === Resource.XHR_RESPONSE_TYPE.JSON || this.xhrType === Resource.XHR_RESPONSE_TYPE.DOCUMENT) {
+        xhr.responseType = Resource.XHR_RESPONSE_TYPE.TEXT;
+    }
+    else {
+        xhr.responseType = this.xhrType;
+    }
+
+    xhr.addEventListener('error', this._boundXhrOnError, false);
+    xhr.addEventListener('abort', this._boundXhrOnAbort, false);
+    xhr.addEventListener('progress', this._boundOnProgress, false);
+    xhr.addEventListener('load', this._boundXhrOnLoad, false);
+
+    xhr.send();
+};
+
+/**
+ * Loads this resources using an XDomainRequest. This is here because we need to support IE9 (gross).
+ *
+ * @private
+ */
+Resource.prototype._loadXdr = function () {
+    // if unset, determine the value
+    if (typeof this.xhrType !== 'string') {
+        this.xhrType = this._determineXhrType();
+    }
+
+    var xdr = this.xhr = new XDomainRequest();
+
+    // XDomainRequest has a few quirks. Occasionally it will abort requests
+    // A way to avoid this is to make sure ALL callbacks are set even if not used
+    // More info here: http://stackoverflow.com/questions/15786966/xdomainrequest-aborts-post-on-ie-9
+    xdr.timeout = 5000;
+
+    xdr.onerror = this._boundXhrOnError;
+    xdr.ontimeout = this._boundXdrOnTimeout;
+    xdr.onprogress = this._boundOnProgress;
+    xdr.onload = this._boundXhrOnLoad;
+
+    xdr.open('GET', this.url, true);
+
+    //  Note: The xdr.send() call is wrapped in a timeout to prevent an issue with the interface where some requests are lost
+    //  if multiple XDomainRequests are being sent at the same time.
+    // Some info here: https://github.com/photonstorm/phaser/issues/1248
+    setTimeout(function () {
+        xdr.send();
+    }, 0);
+};
+
+/**
+ * Creates a source used in loading via an element.
+ *
+ * @param type {string} The element type (video or audio).
+ * @param url {string} The source URL to load from.
+ * @param [mime] {string} The mime type of the video
+ * @private
+ */
+Resource.prototype._createSource = function (type, url, mime) {
+    if (!mime) {
+        mime = type + '/' + url.substr(url.lastIndexOf('.') + 1);
+    }
+
+    var source = document.createElement('source');
+
+    source.src = url;
+    source.type = mime;
+
+    return source;
+};
+
+/**
+ * Called if a load errors out.
+ *
+ * @param event {Event} The error event from the element that emits it.
+ * @private
+ */
+Resource.prototype._onError = function (event) {
+    this.error = new Error('Failed to load element using ' + event.target.nodeName);
+    this.complete();
+};
+
+/**
+ * Called if a load progress event fires for xhr/xdr.
+ *
+ * @fires progress
+ * @param event {XMLHttpRequestProgressEvent|Event}
+ * @private
+ */
+Resource.prototype._onProgress =  function (event) {
+    if (event && event.lengthComputable) {
+        this.emit('progress', this, event.loaded / event.total);
+    }
+};
+
+/**
+ * Called if an error event fires for xhr/xdr.
+ *
+ * @param event {XMLHttpRequestErrorEvent|Event}
+ * @private
+ */
+Resource.prototype._xhrOnError = function () {
+    this.error = new Error(
+        reqType(this.xhr) + ' Request failed. ' +
+        'Status: ' + this.xhr.status + ', text: "' + this.xhr.statusText + '"'
+    );
+
+    this.complete();
+};
+
+/**
+ * Called if an abort event fires for xhr.
+ *
+ * @param event {XMLHttpRequestAbortEvent}
+ * @private
+ */
+Resource.prototype._xhrOnAbort = function () {
+    this.error = new Error(reqType(this.xhr) + ' Request was aborted by the user.');
+    this.complete();
+};
+
+/**
+ * Called if a timeout event fires for xdr.
+ *
+ * @param event {Event}
+ * @private
+ */
+Resource.prototype._xdrOnTimeout = function () {
+    this.error = new Error(reqType(this.xhr) + ' Request timed out.');
+    this.complete();
+};
+
+/**
+ * Called when data successfully loads from an xhr/xdr request.
+ *
+ * @param event {XMLHttpRequestLoadEvent|Event}
+ * @private
+ */
+Resource.prototype._xhrOnLoad = function () {
+    var xhr = this.xhr,
+        status = xhr.status !== undefined ? xhr.status : 200; //XDR has no `.status`, assume 200.
+
+    // status can be 0 when using the file:// protocol, also check if a response was found
+    if (status === 200 || status === 204 || (status === 0 && xhr.responseText.length > 0)) {
+        // if text, just return it
+        if (this.xhrType === Resource.XHR_RESPONSE_TYPE.TEXT) {
+            this.data = xhr.responseText;
+        }
+        // if json, parse into json object
+        else if (this.xhrType === Resource.XHR_RESPONSE_TYPE.JSON) {
+            try {
+                this.data = JSON.parse(xhr.responseText);
+                this.isJson = true;
+            } catch(e) {
+                this.error = new Error('Error trying to parse loaded json:', e);
+            }
+        }
+        // if xml, parse into an xml document or div element
+        else if (this.xhrType === Resource.XHR_RESPONSE_TYPE.DOCUMENT) {
+            try {
+                if (window.DOMParser) {
+                    var domparser = new DOMParser();
+                    this.data = domparser.parseFromString(xhr.responseText, 'text/xml');
+                }
+                else {
+                    var div = document.createElement('div');
+                    div.innerHTML = xhr.responseText;
+                    this.data = div;
+                }
+                this.isXml = true;
+            } catch (e) {
+                this.error = new Error('Error trying to parse loaded xml:', e);
+            }
+        }
+        // other types just return the response
+        else {
+            this.data = xhr.response || xhr.responseText;
+        }
+    }
+    else {
+        this.error = new Error('[' + xhr.status + ']' + xhr.statusText + ':' + xhr.responseURL);
+    }
+
+    this.complete();
+};
+
+function reqType(xhr) {
+    return xhr.toString().replace('object ', '');
+}
+
+/**
+ * Sets the `crossOrigin` property for this resource based on if the url
+ * for this resource is cross-origin. If crossOrigin was manually set, this
+ * function does nothing.
+ *
+ * @private
+ * @param url {string} The url to test.
+ * @param [location=window.location] {object} The location object to test against.
+ * @return {string} The crossOrigin value to use (or empty string for none).
+ */
+Resource.prototype._determineCrossOrigin = function (url, loc) {
+    // data: and javascript: urls are considered same-origin
+    if (url.indexOf('data:') === 0) {
+        return '';
+    }
+
+    // default is window.location
+    loc = loc || window.location;
+
+    if (!tempAnchor) {
+        tempAnchor = document.createElement('a');
+    }
+
+    // let the browser determine the full href for the url of this resource and then
+    // parse with the node url lib, we can't use the properties of the anchor element
+    // because they don't work in IE9 :(
+    tempAnchor.href = url;
+    url = _url.parse(tempAnchor.href);
+
+    var samePort = (!url.port && loc.port === '') || (url.port === loc.port);
+
+    // if cross origin
+    if (url.hostname !== loc.hostname || !samePort || url.protocol !== loc.protocol) {
+        return 'anonymous';
+    }
+
+    return '';
+};
+
+/**
+ * Determines the responseType of an XHR request based on the extension of the
+ * resource being loaded.
+ *
+ * @private
+ * @return {Resource.XHR_RESPONSE_TYPE} The responseType to use.
+ */
+Resource.prototype._determineXhrType = function () {
+    var ext = this.url.substr(this.url.lastIndexOf('.') + 1);
+
+    return Resource._xhrTypeMap[ext] || Resource.XHR_RESPONSE_TYPE.TEXT;
+};
+
+Resource.prototype._determineLoadType = function () {
+    var ext = this.url.substr(this.url.lastIndexOf('.') + 1);
+
+    return Resource._loadTypeMap[ext] || Resource.LOAD_TYPE.XHR;
+};
+
+/**
+ * Determines the mime type of an XHR request based on the responseType of
+ * resource being loaded.
+ *
+ * @private
+ * @return {string} The mime type to use.
+ */
+Resource.prototype._getMimeFromXhrType = function (type) {
+    switch(type) {
+        case Resource.XHR_RESPONSE_TYPE.BUFFER:
+            return 'application/octet-binary';
+
+        case Resource.XHR_RESPONSE_TYPE.BLOB:
+            return 'application/blob';
+
+        case Resource.XHR_RESPONSE_TYPE.DOCUMENT:
+            return 'application/xml';
+
+        case Resource.XHR_RESPONSE_TYPE.JSON:
+            return 'application/json';
+
+        case Resource.XHR_RESPONSE_TYPE.DEFAULT:
+        case Resource.XHR_RESPONSE_TYPE.TEXT:
+            /* falls through */
+        default:
+            return 'text/plain';
+
+    }
+};
+
+/**
+ * The types of loading a resource can use.
+ *
+ * @static
+ * @constant
+ * @property {object} LOAD_TYPE
+ * @property {number} LOAD_TYPE.XHR - Uses XMLHttpRequest to load the resource.
+ * @property {number} LOAD_TYPE.IMAGE - Uses an `Image` object to load the resource.
+ * @property {number} LOAD_TYPE.AUDIO - Uses an `Audio` object to load the resource.
+ * @property {number} LOAD_TYPE.VIDEO - Uses a `Video` object to load the resource.
+ */
+Resource.LOAD_TYPE = {
+    XHR:    1,
+    IMAGE:  2,
+    AUDIO:  3,
+    VIDEO:  4
+};
+
+/**
+ * The XHR ready states, used internally.
+ *
+ * @static
+ * @constant
+ * @property {object} XHR_READY_STATE
+ * @property {number} XHR_READY_STATE.UNSENT - open()has not been called yet.
+ * @property {number} XHR_READY_STATE.OPENED - send()has not been called yet.
+ * @property {number} XHR_READY_STATE.HEADERS_RECEIVED - send() has been called, and headers and status are available.
+ * @property {number} XHR_READY_STATE.LOADING - Downloading; responseText holds partial data.
+ * @property {number} XHR_READY_STATE.DONE - The operation is complete.
+ */
+Resource.XHR_READY_STATE = {
+    UNSENT: 0,
+    OPENED: 1,
+    HEADERS_RECEIVED: 2,
+    LOADING: 3,
+    DONE: 4
+};
+
+/**
+ * The XHR ready states, used internally.
+ *
+ * @static
+ * @constant
+ * @property {object} XHR_RESPONSE_TYPE
+ * @property {string} XHR_RESPONSE_TYPE.DEFAULT - defaults to text
+ * @property {string} XHR_RESPONSE_TYPE.BUFFER - ArrayBuffer
+ * @property {string} XHR_RESPONSE_TYPE.BLOB - Blob
+ * @property {string} XHR_RESPONSE_TYPE.DOCUMENT - Document
+ * @property {string} XHR_RESPONSE_TYPE.JSON - Object
+ * @property {string} XHR_RESPONSE_TYPE.TEXT - String
+ */
+Resource.XHR_RESPONSE_TYPE = {
+    DEFAULT:    'text',
+    BUFFER:     'arraybuffer',
+    BLOB:       'blob',
+    DOCUMENT:   'document',
+    JSON:       'json',
+    TEXT:       'text'
+};
+
+Resource._loadTypeMap = {
+    'gif':      Resource.LOAD_TYPE.IMAGE,
+    'png':      Resource.LOAD_TYPE.IMAGE,
+    'bmp':      Resource.LOAD_TYPE.IMAGE,
+    'jpg':      Resource.LOAD_TYPE.IMAGE,
+    'jpeg':     Resource.LOAD_TYPE.IMAGE,
+    'tif':      Resource.LOAD_TYPE.IMAGE,
+    'tiff':     Resource.LOAD_TYPE.IMAGE,
+    'webp':     Resource.LOAD_TYPE.IMAGE,
+    'tga':      Resource.LOAD_TYPE.IMAGE
+};
+
+Resource._xhrTypeMap = {
+    // xml
+    'xhtml':    Resource.XHR_RESPONSE_TYPE.DOCUMENT,
+    'html':     Resource.XHR_RESPONSE_TYPE.DOCUMENT,
+    'htm':      Resource.XHR_RESPONSE_TYPE.DOCUMENT,
+    'xml':      Resource.XHR_RESPONSE_TYPE.DOCUMENT,
+    'tmx':      Resource.XHR_RESPONSE_TYPE.DOCUMENT,
+    'tsx':      Resource.XHR_RESPONSE_TYPE.DOCUMENT,
+    'svg':      Resource.XHR_RESPONSE_TYPE.DOCUMENT,
+
+    // images
+    'gif':      Resource.XHR_RESPONSE_TYPE.BLOB,
+    'png':      Resource.XHR_RESPONSE_TYPE.BLOB,
+    'bmp':      Resource.XHR_RESPONSE_TYPE.BLOB,
+    'jpg':      Resource.XHR_RESPONSE_TYPE.BLOB,
+    'jpeg':     Resource.XHR_RESPONSE_TYPE.BLOB,
+    'tif':      Resource.XHR_RESPONSE_TYPE.BLOB,
+    'tiff':     Resource.XHR_RESPONSE_TYPE.BLOB,
+    'webp':     Resource.XHR_RESPONSE_TYPE.BLOB,
+    'tga':      Resource.XHR_RESPONSE_TYPE.BLOB,
+
+    // json
+    'json':     Resource.XHR_RESPONSE_TYPE.JSON,
+
+    // text
+    'text':     Resource.XHR_RESPONSE_TYPE.TEXT,
+    'txt':      Resource.XHR_RESPONSE_TYPE.TEXT
+};
+
+/**
+ * Sets the load type to be used for a specific extension.
+ *
+ * @static
+ * @param extname {string} The extension to set the type for, e.g. "png" or "fnt"
+ * @param loadType {Resource.LOAD_TYPE} The load type to set it to.
+ */
+Resource.setExtensionLoadType = function (extname, loadType) {
+    setExtMap(Resource._loadTypeMap, extname, loadType);
+};
+
+/**
+ * Sets the load type to be used for a specific extension.
+ *
+ * @static
+ * @param extname {string} The extension to set the type for, e.g. "png" or "fnt"
+ * @param xhrType {Resource.XHR_RESPONSE_TYPE} The xhr type to set it to.
+ */
+Resource.setExtensionXhrType = function (extname, xhrType) {
+    setExtMap(Resource._xhrTypeMap, extname, xhrType);
+};
+
+function setExtMap(map, extname, val) {
+    if (extname && extname.indexOf('.') === 0) {
+        extname = extname.substring(1);
+    }
+
+    if (!extname) {
+        return;
+    }
+
+    map[extname] = val;
+}
+
+},{"eventemitter3":14,"url":9}],17:[function(require,module,exports){
+module.exports = {
+
+    // private property
+    _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
+
+    encodeBinary: function (input) {
+        var output = "";
+        var bytebuffer;
+        var encodedCharIndexes = new Array(4);
+        var inx = 0;
+        var jnx = 0;
+        var paddingBytes = 0;
+
+        while (inx < input.length) {
+            // Fill byte buffer array
+            bytebuffer = new Array(3);
+            for (jnx = 0; jnx < bytebuffer.length; jnx++) {
+                if (inx < input.length) {
+                    // throw away high-order byte, as documented at:
+                    // https://developer.mozilla.org/En/Using_XMLHttpRequest#Handling_binary_data
+                    bytebuffer[jnx] = input.charCodeAt(inx++) & 0xff;
+                }
+                else {
+                    bytebuffer[jnx] = 0;
+                }
+            }
+
+            // Get each encoded character, 6 bits at a time
+            // index 1: first 6 bits
+            encodedCharIndexes[0] = bytebuffer[0] >> 2;
+            // index 2: second 6 bits (2 least significant bits from input byte 1 + 4 most significant bits from byte 2)
+            encodedCharIndexes[1] = ((bytebuffer[0] & 0x3) << 4) | (bytebuffer[1] >> 4);
+            // index 3: third 6 bits (4 least significant bits from input byte 2 + 2 most significant bits from byte 3)
+            encodedCharIndexes[2] = ((bytebuffer[1] & 0x0f) << 2) | (bytebuffer[2] >> 6);
+            // index 3: forth 6 bits (6 least significant bits from input byte 3)
+            encodedCharIndexes[3] = bytebuffer[2] & 0x3f;
+
+            // Determine whether padding happened, and adjust accordingly
+            paddingBytes = inx - (input.length - 1);
+            switch (paddingBytes) {
+                case 2:
+                    // Set last 2 characters to padding char
+                    encodedCharIndexes[3] = 64;
+                    encodedCharIndexes[2] = 64;
+                    break;
+
+                case 1:
+                    // Set last character to padding char
+                    encodedCharIndexes[3] = 64;
+                    break;
+
+                default:
+                    break; // No padding - proceed
+            }
+
+            // Now we will grab each appropriate character out of our keystring
+            // based on our index array and append it to the output string
+            for (jnx = 0; jnx < encodedCharIndexes.length; jnx++) {
+                output += this._keyStr.charAt(encodedCharIndexes[jnx]);
+            }
+        }
+        return output;
+    }
+};
+
+},{}],18:[function(require,module,exports){
+module.exports = require('./Loader');
+
+module.exports.Resource = require('./Resource');
+
+module.exports.middleware = {
+    caching: {
+        memory: require('./middlewares/caching/memory')
+    },
+    parsing: {
+        blob: require('./middlewares/parsing/blob')
+    }
+};
+
+},{"./Loader":15,"./Resource":16,"./middlewares/caching/memory":19,"./middlewares/parsing/blob":20}],19:[function(require,module,exports){
+// a simple in-memory cache for resources
+var cache = {};
+
+module.exports = function () {
+    return function (resource, next) {
+        // if cached, then set data and complete the resource
+        if (cache[resource.url]) {
+            resource.data = cache[resource.url];
+            resource.complete();
+        }
+        // if not cached, wait for complete and store it in the cache.
+        else {
+            resource.once('complete', function () {
+               cache[this.url] = this.data;
+            });
+
+            next();
+        }
+    };
+};
+
+},{}],20:[function(require,module,exports){
+var Resource = require('../../Resource'),
+    b64 = require('../../b64');
+
+window.URL = window.URL || window.webkitURL;
+
+// a middleware for transforming XHR loaded Blobs into more useful objects
+
+module.exports = function () {
+    return function (resource, next) {
+        if (!resource.data) {
+            return next();
+        }
+
+        // if this was an XHR load of a blob
+        if (resource.xhr && resource.xhrType === Resource.XHR_RESPONSE_TYPE.BLOB) {
+            // if there is no blob support we probably got a binary string back
+            if (!window.Blob || typeof resource.data === 'string') {
+                var type = resource.xhr.getResponseHeader('content-type');
+
+                // this is an image, convert the binary string into a data url
+                if (type && type.indexOf('image') === 0) {
+                    resource.data = new Image();
+                    resource.data.src = 'data:' + type + ';base64,' + b64.encodeBinary(resource.xhr.responseText);
+
+                    resource.isImage = true;
+
+                    // wait until the image loads and then callback
+                    resource.data.onload = function () {
+                        resource.data.onload = null;
+
+                        next();
+                    };
+                }
+            }
+            // if content type says this is an image, then we should transform the blob into an Image object
+            else if (resource.data.type.indexOf('image') === 0) {
+                var src = URL.createObjectURL(resource.data);
+
+                resource.blob = resource.data;
+                resource.data = new Image();
+                resource.data.src = src;
+
+                resource.isImage = true;
+
+                // cleanup the no longer used blob after the image loads
+                resource.data.onload = function () {
+                    URL.revokeObjectURL(src);
+                    resource.data.onload = null;
+
+                    next();
+                };
+            }
+        }
+        else {
+            next();
+        }
+    };
+};
+
+},{"../../Resource":16,"../../b64":17}],21:[function(require,module,exports){
+module.exports={
+  "name": "pixi.js",
+  "version": "3.0.5",
+  "description": "Pixi.js is a fast lightweight 2D library that works across all devices.",
+  "author": "Mat Groves",
+  "contributors": [
+    "Chad Engler <chad@pantherdev.com>",
+    "Richard Davey <rdavey@gmail.com>"
+  ],
+  "main": "./src/index.js",
+  "homepage": "http://goodboydigital.com/",
+  "bugs": "https://github.com/GoodBoyDigital/pixi.js/issues",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GoodBoyDigital/pixi.js.git"
+  },
+  "scripts": {
+    "test": "gulp && testem ci",
+    "docs": "jsdoc -c ./gulp/util/jsdoc.conf.json -R README.md"
+  },
+  "dependencies": {
+    "async": "^0.9.0",
+    "brfs": "^1.4.0",
+    "earcut": "^2.0.0",
+    "eventemitter3": "^1.0.1",
+    "object-assign": "^2.0.0",
+    "resource-loader": "^1.5.6"
+  },
+  "devDependencies": {
+    "browserify": "^9.0.8",
+    "chai": "^2.2.0",
+    "del": "^1.1.1",
+    "gulp": "^3.8.11",
+    "gulp-cached": "^1.0.4",
+    "gulp-concat": "^2.5.2",
+    "gulp-debug": "^2.0.1",
+    "gulp-jshint": "^1.10.0",
+    "gulp-mirror": "^0.4.0",
+    "gulp-plumber": "^1.0.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-sourcemaps": "^1.5.2",
+    "gulp-uglify": "^1.2.0",
+    "gulp-util": "^3.0.4",
+    "ink-docstrap": "git+https://github.com/Pilatch/docstrap.git",
+    "jsdoc": "^3.3.0-beta3",
+    "jshint-summary": "^0.4.0",
+    "minimist": "^1.1.1",
+    "mocha": "^2.2.4",
+    "require-dir": "^0.3.0",
+    "run-sequence": "^1.0.2",
+    "testem": "^0.8.2",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0",
+    "watchify": "^3.1.2"
+  },
+  "browserify": {
+    "transform": [
+      "brfs"
+    ]
+  }
+}
+
+},{}],22:[function(require,module,exports){
+/**
+ * Constant values used in pixi
+ * @class
+ * @memberof PIXI
+ */
+var CONST = {
+    /**
+     * String of the current PIXI version
+     *
+     * @static
+     * @constant
+     * @property {string} VERSION
+     */
+    VERSION: require('../../package.json').version,
+
+    /**
+     * @property {number} PI_2 - Two Pi
+     * @constant
+     * @static
+     */
+    PI_2: Math.PI * 2,
+
+    /**
+     * @property {number} RAD_TO_DEG - Constant conversion factor for converting radians to degrees
+     * @constant
+     * @static
+     */
+    RAD_TO_DEG: 180 / Math.PI,
+
+    /**
+     * @property {Number} DEG_TO_RAD - Constant conversion factor for converting degrees to radians
+     * @constant
+     * @static
+     */
+    DEG_TO_RAD: Math.PI / 180,
+
+    /**
+     * Target frames per millisecond.
+     *
+     * @static
+     * @constant
+     * @property {number} TARGET_FPMS=0.06
+     */
+    TARGET_FPMS: 0.06,
+
+    /**
+     * Constant to identify the Renderer Type.
+     *
+     * @static
+     * @constant
+     * @property {object} RENDERER_TYPE
+     * @property {number} RENDERER_TYPE.UNKNOWN
+     * @property {number} RENDERER_TYPE.WEBGL
+     * @property {number} RENDERER_TYPE.CANVAS
+     */
+    RENDERER_TYPE: {
+        UNKNOWN:    0,
+        WEBGL:      1,
+        CANVAS:     2
+    },
+
+    /**
+     * Various blend modes supported by PIXI. IMPORTANT - The WebGL renderer only supports
+     * the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like
+     * NORMAL.
+     *
+     * @static
+     * @constant
+     * @property {object} BLEND_MODES
+     * @property {number} BLEND_MODES.NORMAL
+     * @property {number} BLEND_MODES.ADD
+     * @property {number} BLEND_MODES.MULTIPLY
+     * @property {number} BLEND_MODES.SCREEN
+     * @property {number} BLEND_MODES.OVERLAY
+     * @property {number} BLEND_MODES.DARKEN
+     * @property {number} BLEND_MODES.LIGHTEN
+     * @property {number} BLEND_MODES.COLOR_DODGE
+     * @property {number} BLEND_MODES.COLOR_BURN
+     * @property {number} BLEND_MODES.HARD_LIGHT
+     * @property {number} BLEND_MODES.SOFT_LIGHT
+     * @property {number} BLEND_MODES.DIFFERENCE
+     * @property {number} BLEND_MODES.EXCLUSION
+     * @property {number} BLEND_MODES.HUE
+     * @property {number} BLEND_MODES.SATURATION
+     * @property {number} BLEND_MODES.COLOR
+     * @property {number} BLEND_MODES.LUMINOSITY
+     */
+    BLEND_MODES: {
+        NORMAL:         0,
+        ADD:            1,
+        MULTIPLY:       2,
+        SCREEN:         3,
+        OVERLAY:        4,
+        DARKEN:         5,
+        LIGHTEN:        6,
+        COLOR_DODGE:    7,
+        COLOR_BURN:     8,
+        HARD_LIGHT:     9,
+        SOFT_LIGHT:     10,
+        DIFFERENCE:     11,
+        EXCLUSION:      12,
+        HUE:            13,
+        SATURATION:     14,
+        COLOR:          15,
+        LUMINOSITY:     16
+    },
+
+    /**
+     * The scale modes that are supported by pixi.
+     *
+     * The DEFAULT scale mode affects the default scaling mode of future operations.
+     * It can be re-assigned to either LINEAR or NEAREST, depending upon suitability.
+     *
+     * @static
+     * @constant
+     * @property {object} SCALE_MODES
+     * @property {number} SCALE_MODES.DEFAULT=LINEAR
+     * @property {number} SCALE_MODES.LINEAR Smooth scaling
+     * @property {number} SCALE_MODES.NEAREST Pixelating scaling
+     */
+    SCALE_MODES: {
+        DEFAULT:    0,
+        LINEAR:     0,
+        NEAREST:    1
+    },
+
+    /**
+     * The prefix that denotes a URL is for a retina asset
+     *
+     * @static
+     * @constant
+     * @property {string} RETINA_PREFIX
+     */
+    //example: '@2x',
+    RETINA_PREFIX: /@(.+)x/,
+
+    RESOLUTION:1,
+
+    FILTER_RESOLUTION:1,
+
+    /**
+     * The default render options if none are supplied to {@link PIXI.WebGLRenderer}
+     * or {@link PIXI.CanvasRenderer}.
+     *
+     * @static
+     * @constant
+     * @property {object} DEFAULT_RENDER_OPTIONS
+     * @property {HTMLCanvasElement} DEFAULT_RENDER_OPTIONS.view=null
+     * @property {boolean} DEFAULT_RENDER_OPTIONS.transparent=false
+     * @property {boolean} DEFAULT_RENDER_OPTIONS.antialias=false
+     * @property {boolean} DEFAULT_RENDER_OPTIONS.forceFXAA=false
+     * @property {boolean} DEFAULT_RENDER_OPTIONS.preserveDrawingBuffer=false
+     * @property {number} DEFAULT_RENDER_OPTIONS.resolution=1
+     * @property {number} DEFAULT_RENDER_OPTIONS.backgroundColor=0x000000
+     * @property {boolean} DEFAULT_RENDER_OPTIONS.clearBeforeRender=true
+     * @property {boolean} DEFAULT_RENDER_OPTIONS.autoResize=false
+     */
+    DEFAULT_RENDER_OPTIONS: {
+        view: null,
+        resolution: 1,
+        antialias: false,
+        forceFXAA: false,
+        autoResize: false,
+        transparent: false,
+        backgroundColor: 0x000000,
+        clearBeforeRender: true,
+        preserveDrawingBuffer: false
+    },
+
+    /**
+     * Constants that identify shapes, mainly to prevent `instanceof` calls.
+     *
+     * @static
+     * @constant
+     * @property {object} SHAPES
+     * @property {object} SHAPES.POLY=0
+     * @property {object} SHAPES.RECT=1
+     * @property {object} SHAPES.CIRC=2
+     * @property {object} SHAPES.ELIP=3
+     * @property {object} SHAPES.RREC=4
+     */
+    SHAPES: {
+        POLY: 0,
+        RECT: 1,
+        CIRC: 2,
+        ELIP: 3,
+        RREC: 4
+    },
+
+    // TODO: maybe change to SPRITE.BATCH_SIZE: 2000
+    // TODO: maybe add PARTICLE.BATCH_SIZE: 15000
+    SPRITE_BATCH_SIZE: 2000 //nice balance between mobile and desktop machines
+};
+
+module.exports = CONST;
+
+},{"../../package.json":21}],23:[function(require,module,exports){
+var math = require('../math'),
+    DisplayObject = require('./DisplayObject'),
+    RenderTexture = require('../textures/RenderTexture'),
+    _tempMatrix = new math.Matrix();
+
+/**
+ * A Container represents a collection of display objects.
+ * It is the base class of all display objects that act as a container for other objects.
+ *
+ *```js
+ * var container = new PIXI.Container();
+ * container.addChild(sprite);
+ * ```
+ * @class
+ * @extends PIXI.DisplayObject
+ * @memberof PIXI
+ */
+function Container()
+{
+    DisplayObject.call(this);
+
+    /**
+     * The array of children of this container.
+     *
+     * @member {DisplayObject[]}
+     * @readonly
+     */
+    this.children = [];
+}
+
+// constructor
+Container.prototype = Object.create(DisplayObject.prototype);
+Container.prototype.constructor = Container;
+module.exports = Container;
+
+Object.defineProperties(Container.prototype, {
+    /**
+     * The width of the Container, setting this will actually modify the scale to achieve the value set
+     *
+     * @member {number}
+     * @memberof PIXI.Container#
+     */
+    width: {
+        get: function ()
+        {
+            return this.scale.x * this.getLocalBounds().width;
+        },
+        set: function (value)
+        {
+
+            var width = this.getLocalBounds().width;
+
+            if (width !== 0)
+            {
+                this.scale.x = value / width;
+            }
+            else
+            {
+                this.scale.x = 1;
+            }
+
+
+            this._width = value;
+        }
+    },
+
+    /**
+     * The height of the Container, setting this will actually modify the scale to achieve the value set
+     *
+     * @member {number}
+     * @memberof PIXI.Container#
+     */
+    height: {
+        get: function ()
+        {
+            return  this.scale.y * this.getLocalBounds().height;
+        },
+        set: function (value)
+        {
+
+            var height = this.getLocalBounds().height;
+
+            if (height !== 0)
+            {
+                this.scale.y = value / height ;
+            }
+            else
+            {
+                this.scale.y = 1;
+            }
+
+            this._height = value;
+        }
+    }
+});
+
+/**
+ * Adds a child to the container.
+ *
+ * @param child {DisplayObject} The DisplayObject to add to the container
+ * @return {DisplayObject} The child that was added.
+ */
+Container.prototype.addChild = function (child)
+{
+    return this.addChildAt(child, this.children.length);
+};
+
+/**
+ * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown
+ *
+ * @param child {DisplayObject} The child to add
+ * @param index {Number} The index to place the child in
+ * @return {DisplayObject} The child that was added.
+ */
+Container.prototype.addChildAt = function (child, index)
+{
+    // prevent adding self as child
+    if (child === this)
+    {
+        return child;
+    }
+
+    if (index >= 0 && index <= this.children.length)
+    {
+        if (child.parent)
+        {
+            child.parent.removeChild(child);
+        }
+
+        child.parent = this;
+
+        this.children.splice(index, 0, child);
+        return child;
+    }
+    else
+    {
+        throw new Error(child + 'addChildAt: The index '+ index +' supplied is out of bounds ' + this.children.length);
+    }
+};
+
+/**
+ * Swaps the position of 2 Display Objects within this container.
+ *
+ * @param child {DisplayObject}
+ * @param child2 {DisplayObject}
+ */
+Container.prototype.swapChildren = function (child, child2)
+{
+    if (child === child2)
+    {
+        return;
+    }
+
+    var index1 = this.getChildIndex(child);
+    var index2 = this.getChildIndex(child2);
+
+    if (index1 < 0 || index2 < 0)
+    {
+        throw new Error('swapChildren: Both the supplied DisplayObjects must be children of the caller.');
+    }
+
+    this.children[index1] = child2;
+    this.children[index2] = child;
+};
+
+/**
+ * Returns the index position of a child DisplayObject instance
+ *
+ * @param child {DisplayObject} The DisplayObject instance to identify
+ * @return {Number} The index position of the child display object to identify
+ */
+Container.prototype.getChildIndex = function (child)
+{
+    var index = this.children.indexOf(child);
+
+    if (index === -1)
+    {
+        throw new Error('The supplied DisplayObject must be a child of the caller');
+    }
+
+    return index;
+};
+
+/**
+ * Changes the position of an existing child in the display object container
+ *
+ * @param child {DisplayObject} The child DisplayObject instance for which you want to change the index number
+ * @param index {Number} The resulting index number for the child display object
+ */
+Container.prototype.setChildIndex = function (child, index)
+{
+    if (index < 0 || index >= this.children.length)
+    {
+        throw new Error('The supplied index is out of bounds');
+    }
+
+    var currentIndex = this.getChildIndex(child);
+
+    this.children.splice(currentIndex, 1); //remove from old position
+    this.children.splice(index, 0, child); //add at new position
+};
+
+/**
+ * Returns the child at the specified index
+ *
+ * @param index {Number} The index to get the child at
+ * @return {DisplayObject} The child at the given index, if any.
+ */
+Container.prototype.getChildAt = function (index)
+{
+    if (index < 0 || index >= this.children.length)
+    {
+        throw new Error('getChildAt: Supplied index ' + index + ' does not exist in the child list, or the supplied DisplayObject is not a child of the caller');
+    }
+
+    return this.children[index];
+};
+
+/**
+ * Removes a child from the container.
+ *
+ * @param child {DisplayObject} The DisplayObject to remove
+ * @return {DisplayObject} The child that was removed.
+ */
+Container.prototype.removeChild = function (child)
+{
+    var index = this.children.indexOf(child);
+
+    if (index === -1)
+    {
+        return;
+    }
+
+    return this.removeChildAt(index);
+};
+
+/**
+ * Removes a child from the specified index position.
+ *
+ * @param index {Number} The index to get the child from
+ * @return {DisplayObject} The child that was removed.
+ */
+Container.prototype.removeChildAt = function (index)
+{
+    var child = this.getChildAt(index);
+
+    child.parent = null;
+    this.children.splice(index, 1);
+
+    return child;
+};
+
+/**
+ * Removes all children from this container that are within the begin and end indexes.
+ *
+ * @param beginIndex {Number} The beginning position. Default value is 0.
+ * @param endIndex {Number} The ending position. Default value is size of the container.
+ */
+Container.prototype.removeChildren = function (beginIndex, endIndex)
+{
+    var begin = beginIndex || 0;
+    var end = typeof endIndex === 'number' ? endIndex : this.children.length;
+    var range = end - begin;
+
+    if (range > 0 && range <= end)
+    {
+        var removed = this.children.splice(begin, range);
+
+        for (var i = 0; i < removed.length; ++i)
+        {
+            removed[i].parent = null;
+        }
+
+        return removed;
+    }
+    else if (range === 0 && this.children.length === 0)
+    {
+        return [];
+    }
+    else
+    {
+        throw new RangeError('removeChildren: numeric values are outside the acceptable range.');
+    }
+};
+
+/**
+ * Useful function that returns a texture of the display object that can then be used to create sprites
+ * This can be quite useful if your displayObject is static / complicated and needs to be reused multiple times.
+ *
+ * @param renderer {CanvasRenderer|WebGLRenderer} The renderer used to generate the texture.
+ * @param resolution {Number} The resolution of the texture being generated
+ * @param scaleMode {Number} See {@link SCALE_MODES} for possible values
+ * @return {Texture} a texture of the display object
+ */
+Container.prototype.generateTexture = function (renderer, resolution, scaleMode)
+{
+    var bounds = this.getLocalBounds();
+
+    var renderTexture = new RenderTexture(renderer, bounds.width | 0, bounds.height | 0, renderer, scaleMode, resolution);
+
+    _tempMatrix.tx = -bounds.x;
+    _tempMatrix.ty = -bounds.y;
+
+    renderTexture.render(this, _tempMatrix);
+
+    return renderTexture;
+};
+
+/*
+ * Updates the transform on all children of this container for rendering
+ *
+ * @private
+ */
+Container.prototype.updateTransform = function ()
+{
+    if (!this.visible)
+    {
+        return;
+    }
+
+    this.displayObjectUpdateTransform();
+
+    for (var i = 0, j = this.children.length; i < j; ++i)
+    {
+        this.children[i].updateTransform();
+    }
+};
+
+// performance increase to avoid using call.. (10x faster)
+Container.prototype.containerUpdateTransform = Container.prototype.updateTransform;
+
+/**
+ * Retrieves the bounds of the Container as a rectangle. The bounds calculation takes all visible children into consideration.
+ *
+ * @return {Rectangle} The rectangular bounding area
+ */
+Container.prototype.getBounds = function ()
+{
+    if(!this._currentBounds)
+    {
+
+        if (this.children.length === 0)
+        {
+            return math.Rectangle.EMPTY;
+        }
+
+        // TODO the bounds have already been calculated this render session so return what we have
+
+        var minX = Infinity;
+        var minY = Infinity;
+
+        var maxX = -Infinity;
+        var maxY = -Infinity;
+
+        var childBounds;
+        var childMaxX;
+        var childMaxY;
+
+        var childVisible = false;
+
+        for (var i = 0, j = this.children.length; i < j; ++i)
+        {
+            var child = this.children[i];
+
+            if (!child.visible)
+            {
+                continue;
+            }
+
+            childVisible = true;
+
+            childBounds = this.children[i].getBounds();
+
+            minX = minX < childBounds.x ? minX : childBounds.x;
+            minY = minY < childBounds.y ? minY : childBounds.y;
+
+            childMaxX = childBounds.width + childBounds.x;
+            childMaxY = childBounds.height + childBounds.y;
+
+            maxX = maxX > childMaxX ? maxX : childMaxX;
+            maxY = maxY > childMaxY ? maxY : childMaxY;
+        }
+
+        if (!childVisible)
+        {
+            return math.Rectangle.EMPTY;
+        }
+
+        var bounds = this._bounds;
+
+        bounds.x = minX;
+        bounds.y = minY;
+        bounds.width = maxX - minX;
+        bounds.height = maxY - minY;
+
+        this._currentBounds = bounds;
+    }
+
+    return this._currentBounds;
+};
+
+Container.prototype.containerGetBounds = Container.prototype.getBounds;
+
+/**
+ * Retrieves the non-global local bounds of the Container as a rectangle.
+ * The calculation takes all visible children into consideration.
+ *
+ * @return {Rectangle} The rectangular bounding area
+ */
+Container.prototype.getLocalBounds = function ()
+{
+    var matrixCache = this.worldTransform;
+
+    this.worldTransform = math.Matrix.IDENTITY;
+
+    for (var i = 0, j = this.children.length; i < j; ++i)
+    {
+        this.children[i].updateTransform();
+    }
+
+    this.worldTransform = matrixCache;
+
+    this._currentBounds = null;
+
+    return this.getBounds( math.Matrix.IDENTITY );
+};
+
+/**
+ * Renders the object using the WebGL renderer
+ *
+ * @param renderer {WebGLRenderer} The renderer
+ */
+Container.prototype.renderWebGL = function (renderer)
+{
+
+    // if the object is not visible or the alpha is 0 then no need to render this element
+    if (!this.visible || this.worldAlpha <= 0 || !this.renderable)
+    {
+        return;
+    }
+
+    var i, j;
+
+    // do a quick check to see if this element has a mask or a filter.
+    if (this._mask || this._filters)
+    {
+        renderer.currentRenderer.flush();
+
+        // push filter first as we need to ensure the stencil buffer is correct for any masking
+        if (this._filters)
+        {
+            renderer.filterManager.pushFilter(this, this._filters);
+        }
+
+        if (this._mask)
+        {
+            renderer.maskManager.pushMask(this, this._mask);
+        }
+
+        renderer.currentRenderer.start();
+
+        // add this object to the batch, only rendered if it has a texture.
+        this._renderWebGL(renderer);
+
+        // now loop through the children and make sure they get rendered
+        for (i = 0, j = this.children.length; i < j; i++)
+        {
+            this.children[i].renderWebGL(renderer);
+        }
+
+        renderer.currentRenderer.flush();
+
+        if (this._mask)
+        {
+            renderer.maskManager.popMask(this, this._mask);
+        }
+
+        if (this._filters)
+        {
+            renderer.filterManager.popFilter();
+
+        }
+        renderer.currentRenderer.start();
+    }
+    else
+    {
+        this._renderWebGL(renderer);
+
+        // simple render children!
+        for (i = 0, j = this.children.length; i < j; ++i)
+        {
+            this.children[i].renderWebGL(renderer);
+        }
+    }
+};
+
+/**
+ * To be overridden by the subclass
+ *
+ * @param renderer {WebGLRenderer} The renderer
+ * @private
+ */
+Container.prototype._renderWebGL = function (renderer) // jshint unused:false
+{
+    // this is where content itself gets rendered...
+};
+
+/**
+ * To be overridden by the subclass
+ *
+ * @param renderer {CanvasRenderer} The renderer
+ * @private
+ */
+Container.prototype._renderCanvas = function (renderer) // jshint unused:false
+{
+    // this is where content itself gets rendered...
+};
+
+
+/**
+ * Renders the object using the Canvas renderer
+ *
+ * @param renderer {CanvasRenderer} The renderer
+ */
+Container.prototype.renderCanvas = function (renderer)
+{
+    // if not visible or the alpha is 0 then no need to render this
+    if (!this.visible || this.alpha <= 0 || !this.renderable)
+    {
+        return;
+    }
+
+    if (this._mask)
+    {
+        renderer.maskManager.pushMask(this._mask, renderer);
+    }
+
+    this._renderCanvas(renderer);
+    for (var i = 0, j = this.children.length; i < j; ++i)
+    {
+        this.children[i].renderCanvas(renderer);
+    }
+
+    if (this._mask)
+    {
+        renderer.maskManager.popMask(renderer);
+    }
+};
+
+/**
+ * Destroys the container
+ * @param [destroyChildren=false] {boolean} if set to true, all the children will have their destroy method called as well
+ */
+Container.prototype.destroy = function (destroyChildren)
+{
+    DisplayObject.prototype.destroy.call(this);
+
+    if (destroyChildren)
+    {
+        for (var i = 0, j = this.children.length; i < j; ++i)
+        {
+            this.children[i].destroy(destroyChildren);
+        }
+    }
+
+    this.removeChildren();
+
+    this.children = null;
+};
+
+},{"../math":32,"../textures/RenderTexture":70,"./DisplayObject":24}],24:[function(require,module,exports){
+var math = require('../math'),
+    RenderTexture = require('../textures/RenderTexture'),
+    EventEmitter = require('eventemitter3'),
+    CONST = require('../const'),
+    _tempMatrix = new math.Matrix();
+
+/**
+ * The base class for all objects that are rendered on the screen.
+ * This is an abstract class and should not be used on its own rather it should be extended.
+ *
+ * @class
+ * @extends EventEmitter
+ * @memberof PIXI
+ */
+function DisplayObject()
+{
+    EventEmitter.call(this);
+
+    /**
+     * The coordinate of the object relative to the local coordinates of the parent.
+     *
+     * @member {Point}
+     */
+    this.position = new math.Point();
+
+    /**
+     * The scale factor of the object.
+     *
+     * @member {Point}
+     */
+    this.scale = new math.Point(1, 1);
+
+    /**
+     * The pivot point of the displayObject that it rotates around
+     *
+     * @member {Point}
+     */
+    this.pivot = new math.Point(0, 0);
+
+    /**
+     * The rotation of the object in radians.
+     *
+     * @member {number}
+     */
+    this.rotation = 0;
+
+    /**
+     * The opacity of the object.
+     *
+     * @member {number}
+     */
+    this.alpha = 1;
+
+    /**
+     * The visibility of the object. If false the object will not be drawn, and
+     * the updateTransform function will not be called.
+     *
+     * @member {boolean}
+     */
+    this.visible = true;
+
+    /**
+     * Can this object be rendered, if false the object will not be drawn but the updateTransform
+     * methods will still be called.
+     *
+     * @member {boolean}
+     */
+    this.renderable = true;
+
+    /**
+     * The display object container that contains this display object.
+     *
+     * @member {Container}
+     * @readOnly
+     */
+    this.parent = null;
+
+    /**
+     * The multiplied alpha of the displayObject
+     *
+     * @member {number}
+     * @readOnly
+     */
+    this.worldAlpha = 1;
+
+    /**
+     * Current transform of the object based on world (parent) factors
+     *
+     * @member {Matrix}
+     * @readOnly
+     */
+    this.worldTransform = new math.Matrix();
+
+    /**
+     * The area the filter is applied to. This is used as more of an optimisation
+     * rather than figuring out the dimensions of the displayObject each frame you can set this rectangle
+     *
+     * @member {Rectangle}
+     */
+    this.filterArea = null;
+
+    /**
+     * cached sin rotation
+     *
+     * @member {number}
+     * @private
+     */
+    this._sr = 0;
+
+    /**
+     * cached cos rotation
+     *
+     * @member {number}
+     * @private
+     */
+    this._cr = 1;
+
+    /**
+     * The original, cached bounds of the object
+     *
+     * @member {Rectangle}
+     * @private
+     */
+    this._bounds = new math.Rectangle(0, 0, 1, 1);
+
+    /**
+     * The most up-to-date bounds of the object
+     *
+     * @member {Rectangle}
+     * @private
+     */
+    this._currentBounds = null;
+
+    /**
+     * The original, cached mask of the object
+     *
+     * @member {Rectangle}
+     * @private
+     */
+    this._mask = null;
+
+    //TODO rename to _isMask
+   // this.isMask = false;
+
+    /**
+     * Cached internal flag.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this._cacheAsBitmap = false;
+    this._cachedObject = null;
+}
+
+// constructor
+DisplayObject.prototype = Object.create(EventEmitter.prototype);
+DisplayObject.prototype.constructor = DisplayObject;
+module.exports = DisplayObject;
+
+Object.defineProperties(DisplayObject.prototype, {
+    /**
+     * The position of the displayObject on the x axis relative to the local coordinates of the parent.
+     *
+     * @member {number}
+     * @memberof DisplayObject#
+     */
+    x: {
+        get: function ()
+        {
+            return this.position.x;
+        },
+        set: function (value)
+        {
+            this.position.x = value;
+        }
+    },
+
+    /**
+     * The position of the displayObject on the y axis relative to the local coordinates of the parent.
+     *
+     * @member {number}
+     * @memberof DisplayObject#
+     */
+    y: {
+        get: function ()
+        {
+            return this.position.y;
+        },
+        set: function (value)
+        {
+            this.position.y = value;
+        }
+    },
+
+    /**
+     * Indicates if the sprite is globally visible.
+     *
+     * @member {boolean}
+     * @memberof PIXI.DisplayObject#
+     * @readonly
+     */
+    worldVisible: {
+        get: function ()
+        {
+            var item = this;
+
+            do {
+                if (!item.visible)
+                {
+                    return false;
+                }
+
+                item = item.parent;
+            } while (item);
+
+            return true;
+        }
+    },
+
+    /**
+     * Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it.
+     * In PIXI a regular mask must be a PIXI.Graphics object. This allows for much faster masking in canvas as it utilises shape clipping.
+     * To remove a mask, set this property to null.
+     *
+     * @member {Graphics}
+     * @property {Graphics}
+     * @memberof PIXI.DisplayObject#
+     */
+    mask: {
+        get: function ()
+        {
+            return this._mask;
+        },
+        set: function (value)
+        {
+            if (this._mask)
+            {
+                this._mask.renderable = true;
+            }
+
+            this._mask = value;
+
+            if (this._mask)
+            {
+                this._mask.renderable = false;
+            }
+        }
+    },
+
+    /**
+     * Sets the filters for the displayObject.
+     * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer.
+     * To remove filters simply set this property to 'null'
+     *
+     * @member {Filter[]}
+     * @memberof PIXI.DisplayObject#
+     */
+    filters: {
+        get: function ()
+        {
+            return this._filters && this._filters.slice();
+        },
+        set: function (value)
+        {
+            this._filters = value && value.slice();
+        }
+    }
+
+});
+
+/*
+ * Updates the object transform for rendering
+ *
+ * TODO - Optimization pass!
+ */
+DisplayObject.prototype.updateTransform = function ()
+{
+
+    // create some matrix refs for easy access
+    var pt = this.parent.worldTransform;
+    var wt = this.worldTransform;
+
+    // temporary matrix variables
+    var a, b, c, d, tx, ty;
+
+    // so if rotation is between 0 then we can simplify the multiplication process...
+    if (this.rotation % CONST.PI_2)
+    {
+        // check to see if the rotation is the same as the previous render. This means we only need to use sin and cos when rotation actually changes
+        if (this.rotation !== this.rotationCache)
+        {
+            this.rotationCache = this.rotation;
+            this._sr = Math.sin(this.rotation);
+            this._cr = Math.cos(this.rotation);
+        }
+
+        // get the matrix values of the displayobject based on its transform properties..
+        a  =  this._cr * this.scale.x;
+        b  =  this._sr * this.scale.x;
+        c  = -this._sr * this.scale.y;
+        d  =  this._cr * this.scale.y;
+        tx =  this.position.x;
+        ty =  this.position.y;
+
+        // check for pivot.. not often used so geared towards that fact!
+        if (this.pivot.x || this.pivot.y)
+        {
+            tx -= this.pivot.x * a + this.pivot.y * c;
+            ty -= this.pivot.x * b + this.pivot.y * d;
+        }
+
+        // concat the parent matrix with the objects transform.
+        wt.a  = a  * pt.a + b  * pt.c;
+        wt.b  = a  * pt.b + b  * pt.d;
+        wt.c  = c  * pt.a + d  * pt.c;
+        wt.d  = c  * pt.b + d  * pt.d;
+        wt.tx = tx * pt.a + ty * pt.c + pt.tx;
+        wt.ty = tx * pt.b + ty * pt.d + pt.ty;
+    }
+    else
+    {
+        // lets do the fast version as we know there is no rotation..
+        a  = this.scale.x;
+        d  = this.scale.y;
+
+        tx = this.position.x - this.pivot.x * a;
+        ty = this.position.y - this.pivot.y * d;
+
+        wt.a  = a  * pt.a;
+        wt.b  = a  * pt.b;
+        wt.c  = d  * pt.c;
+        wt.d  = d  * pt.d;
+        wt.tx = tx * pt.a + ty * pt.c + pt.tx;
+        wt.ty = tx * pt.b + ty * pt.d + pt.ty;
+    }
+
+    // multiply the alphas..
+    this.worldAlpha = this.alpha * this.parent.worldAlpha;
+
+    // reset the bounds each time this is called!
+    this._currentBounds = null;
+};
+
+// performance increase to avoid using call.. (10x faster)
+DisplayObject.prototype.displayObjectUpdateTransform = DisplayObject.prototype.updateTransform;
+
+/**
+ *
+ *
+ * Retrieves the bounds of the displayObject as a rectangle object
+ *
+ * @param matrix {Matrix}
+ * @return {Rectangle} the rectangular bounding area
+ */
+DisplayObject.prototype.getBounds = function (matrix) // jshint unused:false
+{
+    return math.Rectangle.EMPTY;
+};
+
+/**
+ * Retrieves the local bounds of the displayObject as a rectangle object
+ *
+ * @return {Rectangle} the rectangular bounding area
+ */
+DisplayObject.prototype.getLocalBounds = function ()
+{
+    return this.getBounds(math.Matrix.IDENTITY);
+};
+
+/**
+ * Calculates the global position of the display object
+ *
+ * @param position {Point} The world origin to calculate from
+ * @return {Point} A point object representing the position of this object
+ */
+DisplayObject.prototype.toGlobal = function (position)
+{
+    // don't need to update the lot
+    this.displayObjectUpdateTransform();
+    return this.worldTransform.apply(position);
+};
+
+/**
+ * Calculates the local position of the display object relative to another point
+ *
+ * @param position {Point} The world origin to calculate from
+ * @param [from] {DisplayObject} The DisplayObject to calculate the global position from
+ * @return {Point} A point object representing the position of this object
+ */
+DisplayObject.prototype.toLocal = function (position, from)
+{
+    if (from)
+    {
+        position = from.toGlobal(position);
+    }
+
+    // don't need to update the lot
+    this.displayObjectUpdateTransform();
+    return this.worldTransform.applyInverse(position);
+};
+
+/**
+ * Renders the object using the WebGL renderer
+ *
+ * @param renderer {WebGLRenderer} The renderer
+ * @private
+ */
+DisplayObject.prototype.renderWebGL = function (renderer) // jshint unused:false
+{
+    // OVERWRITE;
+};
+
+/**
+ * Renders the object using the Canvas renderer
+ *
+ * @param renderer {CanvasRenderer} The renderer
+ * @private
+ */
+DisplayObject.prototype.renderCanvas = function (renderer) // jshint unused:false
+{
+    // OVERWRITE;
+};
+/**
+ * Useful function that returns a texture of the display object that can then be used to create sprites
+ * This can be quite useful if your displayObject is static / complicated and needs to be reused multiple times.
+ *
+ * @param renderer {CanvasRenderer|WebGLRenderer} The renderer used to generate the texture.
+ * @param scaleMode {Number} See {@link SCALE_MODES} for possible values
+ * @param resolution {Number} The resolution of the texture being generated
+ * @return {Texture} a texture of the display object
+ */
+DisplayObject.prototype.generateTexture = function (renderer, scaleMode, resolution)
+{
+    var bounds = this.getLocalBounds();
+
+    var renderTexture = new RenderTexture(renderer, bounds.width | 0, bounds.height | 0, scaleMode, resolution);
+
+    _tempMatrix.tx = -bounds.x;
+    _tempMatrix.ty = -bounds.y;
+
+    renderTexture.render(this, _tempMatrix);
+
+    return renderTexture;
+};
+
+/**
+ * Base destroy method for generic display objects
+ *
+ */
+DisplayObject.prototype.destroy = function ()
+{
+
+    this.position = null;
+    this.scale = null;
+    this.pivot = null;
+
+    this.parent = null;
+
+    this._bounds = null;
+    this._currentBounds = null;
+    this._mask = null;
+
+    this.worldTransform = null;
+    this.filterArea = null;
+};
+
+},{"../const":22,"../math":32,"../textures/RenderTexture":70,"eventemitter3":11}],25:[function(require,module,exports){
+var Container = require('../display/Container'),
+    Sprite = require('../sprites/Sprite'),
+    Texture = require('../textures/Texture'),
+    CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'),
+    CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'),
+    GraphicsData = require('./GraphicsData'),
+    math = require('../math'),
+    CONST = require('../const'),
+    tempPoint = new math.Point();
+
+/**
+ * The Graphics class contains methods used to draw primitive shapes such as lines, circles and
+ * rectangles to the display, and to color and fill them.
+ *
+ * @class
+ * @extends PIXI.Container
+ * @memberof PIXI
+ */
+function Graphics()
+{
+    Container.call(this);
+
+    /**
+     * The alpha value used when filling the Graphics object.
+     *
+     * @member {number}
+     * @default 1
+     */
+    this.fillAlpha = 1;
+
+    /**
+     * The width (thickness) of any lines drawn.
+     *
+     * @member {number}
+     * @default 0
+     */
+    this.lineWidth = 0;
+
+    /**
+     * The color of any lines drawn.
+     *
+     * @member {string}
+     * @default 0
+     */
+    this.lineColor = 0;
+
+    /**
+     * Graphics data
+     *
+     * @member {GraphicsData[]}
+     * @private
+     */
+    this.graphicsData = [];
+
+    /**
+     * The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.
+     *
+     * @member {number}
+     * @default 0xFFFFFF
+     */
+    this.tint = 0xFFFFFF;
+
+    /**
+     * The previous tint applied to the graphic shape. Used to compare to the current tint and check if theres change.
+     *
+     * @member {number}
+     * @private
+     * @default 0xFFFFFF
+     */
+    this._prevTint = 0xFFFFFF;
+
+    /**
+     * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode.
+     *
+     * @member {number}
+     * @default CONST.BLEND_MODES.NORMAL;
+     */
+    this.blendMode = CONST.BLEND_MODES.NORMAL;
+
+    /**
+     * Current path
+     *
+     * @member {GraphicsData}
+     * @private
+     */
+    this.currentPath = null;
+
+    /**
+     * Array containing some WebGL-related properties used by the WebGL renderer.
+     *
+     * @member {object<number, object>}
+     * @private
+     */
+    // TODO - _webgl should use a prototype object, not a random undocumented object...
+    this._webGL = {};
+
+    /**
+     * Whether this shape is being used as a mask.
+     *
+     * @member {boolean}
+     */
+    this.isMask = false;
+
+    /**
+     * The bounds' padding used for bounds calculation.
+     *
+     * @member {number}
+     */
+    this.boundsPadding = 0;
+
+    /**
+     * A cache of the local bounds to prevent recalculation.
+     *
+     * @member {Rectangle}
+     * @private
+     */
+    this._localBounds = new math.Rectangle(0,0,1,1);
+
+    /**
+     * Used to detect if the graphics object has changed. If this is set to true then the graphics
+     * object will be recalculated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.dirty = true;
+
+    /**
+     * Used to detect if the WebGL graphics object has changed. If this is set to true then the
+     * graphics object will be recalculated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.glDirty = false;
+
+    this.boundsDirty = true;
+
+    /**
+     * Used to detect if the cached sprite object needs to be updated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.cachedSpriteDirty = false;
+}
+
+// constructor
+Graphics.prototype = Object.create(Container.prototype);
+Graphics.prototype.constructor = Graphics;
+module.exports = Graphics;
+
+Object.defineProperties(Graphics.prototype, {
+    /**
+     * When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite.
+     * This is useful if your graphics element does not change often, as it will speed up the rendering
+     * of the object in exchange for taking up texture memory. It is also useful if you need the graphics
+     * object to be anti-aliased, because it will be rendered using canvas. This is not recommended if
+     * you are constantly redrawing the graphics element.
+     *
+     * @member {boolean}
+     * @memberof Graphics#
+     * @default false
+     * @private
+     */
+
+});
+
+/**
+ * Creates a new Graphics object with the same values as this one.
+ * Note that the only the properties of the object are cloned, not its transform (position,scale,etc)
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.clone = function ()
+{
+    var clone = new Graphics();
+
+    clone.renderable    = this.renderable;
+    clone.fillAlpha     = this.fillAlpha;
+    clone.lineWidth     = this.lineWidth;
+    clone.lineColor     = this.lineColor;
+    clone.tint          = this.tint;
+    clone.blendMode     = this.blendMode;
+    clone.isMask        = this.isMask;
+    clone.boundsPadding = this.boundsPadding;
+    clone.dirty         = this.dirty;
+    clone.glDirty       = this.glDirty;
+    clone.cachedSpriteDirty = this.cachedSpriteDirty;
+
+    // copy graphics data
+    for (var i = 0; i < this.graphicsData.length; ++i)
+    {
+        clone.graphicsData.push(this.graphicsData[i].clone());
+    }
+
+    clone.currentPath = clone.graphicsData[clone.graphicsData.length - 1];
+
+    clone.updateLocalBounds();
+
+    return clone;
+};
+
+/**
+ * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
+ *
+ * @param lineWidth {number} width of the line to draw, will update the objects stored style
+ * @param color {number} color of the line to draw, will update the objects stored style
+ * @param alpha {number} alpha of the line to draw, will update the objects stored style
+ * @return {Graphics}
+ */
+Graphics.prototype.lineStyle = function (lineWidth, color, alpha)
+{
+    this.lineWidth = lineWidth || 0;
+    this.lineColor = color || 0;
+    this.lineAlpha = (alpha === undefined) ? 1 : alpha;
+
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length)
+        {
+            // halfway through a line? start a new one!
+            this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) ));
+        }
+        else
+        {
+            // otherwise its empty so lets just set the line properties
+            this.currentPath.lineWidth = this.lineWidth;
+            this.currentPath.lineColor = this.lineColor;
+            this.currentPath.lineAlpha = this.lineAlpha;
+        }
+    }
+
+    return this;
+};
+
+/**
+ * Moves the current drawing position to x, y.
+ *
+ * @param x {number} the X coordinate to move to
+ * @param y {number} the Y coordinate to move to
+ * @return {Graphics}
+  */
+Graphics.prototype.moveTo = function (x, y)
+{
+    this.drawShape(new math.Polygon([x,y]));
+
+    return this;
+};
+
+/**
+ * Draws a line using the current line style from the current drawing position to (x, y);
+ * The current drawing position is then set to (x, y).
+ *
+ * @param x {number} the X coordinate to draw to
+ * @param y {number} the Y coordinate to draw to
+ * @return {Graphics}
+ */
+Graphics.prototype.lineTo = function (x, y)
+{
+    this.currentPath.shape.points.push(x, y);
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Calculate the points for a quadratic bezier curve and then draws it.
+ * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
+ *
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {Graphics}
+ */
+Graphics.prototype.quadraticCurveTo = function (cpX, cpY, toX, toY)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points = [0, 0];
+        }
+    }
+    else
+    {
+        this.moveTo(0,0);
+    }
+
+    var xa,
+        ya,
+        n = 20,
+        points = this.currentPath.shape.points;
+
+    if (points.length === 0)
+    {
+        this.moveTo(0, 0);
+    }
+
+    var fromX = points[points.length-2];
+    var fromY = points[points.length-1];
+
+    var j = 0;
+    for (var i = 1; i <= n; ++i)
+    {
+        j = i / n;
+
+        xa = fromX + ( (cpX - fromX) * j );
+        ya = fromY + ( (cpY - fromY) * j );
+
+        points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ),
+                     ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) );
+    }
+
+    this.dirty = this.boundsDirty = true;
+
+    return this;
+};
+
+/**
+ * Calculate the points for a bezier curve and then draws it.
+ *
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param cpX2 {number} Second Control point x
+ * @param cpY2 {number} Second Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {Graphics}
+ */
+Graphics.prototype.bezierCurveTo = function (cpX, cpY, cpX2, cpY2, toX, toY)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points = [0, 0];
+        }
+    }
+    else
+    {
+        this.moveTo(0,0);
+    }
+
+    var n = 20,
+        dt,
+        dt2,
+        dt3,
+        t2,
+        t3,
+        points = this.currentPath.shape.points;
+
+    var fromX = points[points.length-2];
+    var fromY = points[points.length-1];
+
+    var j = 0;
+
+    for (var i = 1; i <= n; ++i)
+    {
+        j = i / n;
+
+        dt = (1 - j);
+        dt2 = dt * dt;
+        dt3 = dt2 * dt;
+
+        t2 = j * j;
+        t3 = t2 * j;
+
+        points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX,
+                     dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY);
+    }
+
+    this.dirty = this.boundsDirty = true;
+
+    return this;
+};
+
+/**
+ * The arcTo() method creates an arc/curve between two tangents on the canvas.
+ *
+ * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
+ *
+ * @param x1 {number} The x-coordinate of the beginning of the arc
+ * @param y1 {number} The y-coordinate of the beginning of the arc
+ * @param x2 {number} The x-coordinate of the end of the arc
+ * @param y2 {number} The y-coordinate of the end of the arc
+ * @param radius {number} The radius of the arc
+ * @return {Graphics}
+ */
+Graphics.prototype.arcTo = function (x1, y1, x2, y2, radius)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points.push(x1, y1);
+        }
+    }
+    else
+    {
+        this.moveTo(x1, y1);
+    }
+
+    var points = this.currentPath.shape.points,
+        fromX = points[points.length-2],
+        fromY = points[points.length-1],
+        a1 = fromY - y1,
+        b1 = fromX - x1,
+        a2 = y2   - y1,
+        b2 = x2   - x1,
+        mm = Math.abs(a1 * b2 - b1 * a2);
+
+    if (mm < 1.0e-8 || radius === 0)
+    {
+        if (points[points.length-2] !== x1 || points[points.length-1] !== y1)
+        {
+            points.push(x1, y1);
+        }
+    }
+    else
+    {
+        var dd = a1 * a1 + b1 * b1,
+            cc = a2 * a2 + b2 * b2,
+            tt = a1 * a2 + b1 * b2,
+            k1 = radius * Math.sqrt(dd) / mm,
+            k2 = radius * Math.sqrt(cc) / mm,
+            j1 = k1 * tt / dd,
+            j2 = k2 * tt / cc,
+            cx = k1 * b2 + k2 * b1,
+            cy = k1 * a2 + k2 * a1,
+            px = b1 * (k2 + j1),
+            py = a1 * (k2 + j1),
+            qx = b2 * (k1 + j2),
+            qy = a2 * (k1 + j2),
+            startAngle = Math.atan2(py - cy, px - cx),
+            endAngle   = Math.atan2(qy - cy, qx - cx);
+
+        this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1);
+    }
+
+    this.dirty = this.boundsDirty = true;
+
+    return this;
+};
+
+/**
+ * The arc method creates an arc/curve (used to create circles, or parts of circles).
+ *
+ * @param cx {number} The x-coordinate of the center of the circle
+ * @param cy {number} The y-coordinate of the center of the circle
+ * @param radius {number} The radius of the circle
+ * @param startAngle {number} The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
+ * @param endAngle {number} The ending angle, in radians
+ * @param anticlockwise {boolean} Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
+ * @return {Graphics}
+ */
+Graphics.prototype.arc = function(cx, cy, radius, startAngle, endAngle, anticlockwise)
+{
+    anticlockwise = anticlockwise || false;
+
+    if (startAngle === endAngle)
+    {
+        return this;
+    }
+
+    if( !anticlockwise && endAngle <= startAngle )
+    {
+        endAngle += Math.PI * 2;
+    }
+    else if( anticlockwise && startAngle <= endAngle )
+    {
+        startAngle += Math.PI * 2;
+    }
+
+    var sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle);
+    var segs =  Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * 40;
+
+    if(sweep === 0)
+    {
+        return this;
+    }
+
+    var startX = cx + Math.cos(startAngle) * radius;
+    var startY = cy + Math.sin(startAngle) * radius;
+
+    if (this.currentPath)
+    {
+        if (anticlockwise && this.filling)
+        {
+            this.currentPath.shape.points.push(cx, cy);
+        }
+        else
+        {
+            this.currentPath.shape.points.push(startX, startY);
+        }
+    }
+    else
+    {
+        if (anticlockwise && this.filling)
+        {
+
+            this.moveTo(cx, cy);
+        }
+        else
+        {
+            this.moveTo(startX, startY);
+        }
+    }
+
+    var points = this.currentPath.shape.points;
+
+    var theta = sweep/(segs*2);
+    var theta2 = theta*2;
+
+    var cTheta = Math.cos(theta);
+    var sTheta = Math.sin(theta);
+
+    var segMinus = segs - 1;
+
+    var remainder = ( segMinus % 1 ) / segMinus;
+
+    for(var i=0; i<=segMinus; i++)
+    {
+        var real =  i + remainder * i;
+
+
+        var angle = ((theta) + startAngle + (theta2 * real));
+
+        var c = Math.cos(angle);
+        var s = -Math.sin(angle);
+
+        points.push(( (cTheta *  c) + (sTheta * s) ) * radius + cx,
+                    ( (cTheta * -s) + (sTheta * c) ) * radius + cy);
+    }
+
+    this.dirty = this.boundsDirty = true;
+
+    return this;
+};
+
+/**
+ * Specifies a simple one-color fill that subsequent calls to other Graphics methods
+ * (such as lineTo() or drawCircle()) use when drawing.
+ *
+ * @param color {number} the color of the fill
+ * @param alpha {number} the alpha of the fill
+ * @return {Graphics}
+ */
+Graphics.prototype.beginFill = function (color, alpha)
+{
+    this.filling = true;
+    this.fillColor = color || 0;
+    this.fillAlpha = (alpha === undefined) ? 1 : alpha;
+
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length <= 2)
+        {
+            this.currentPath.fill = this.filling;
+            this.currentPath.fillColor = this.fillColor;
+            this.currentPath.fillAlpha = this.fillAlpha;
+        }
+    }
+    return this;
+};
+
+/**
+ * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.endFill = function ()
+{
+    this.filling = false;
+    this.fillColor = null;
+    this.fillAlpha = 1;
+
+    return this;
+};
+
+/**
+ *
+ * @param x {number} The X coord of the top-left of the rectangle
+ * @param y {number} The Y coord of the top-left of the rectangle
+ * @param width {number} The width of the rectangle
+ * @param height {number} The height of the rectangle
+ * @return {Graphics}
+ */
+Graphics.prototype.drawRect = function ( x, y, width, height )
+{
+    this.drawShape(new math.Rectangle(x,y, width, height));
+
+    return this;
+};
+
+/**
+ *
+ * @param x {number} The X coord of the top-left of the rectangle
+ * @param y {number} The Y coord of the top-left of the rectangle
+ * @param width {number} The width of the rectangle
+ * @param height {number} The height of the rectangle
+ * @param radius {number} Radius of the rectangle corners
+ */
+Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius )
+{
+    this.drawShape(new math.RoundedRectangle(x, y, width, height, radius));
+
+    return this;
+};
+
+/**
+ * Draws a circle.
+ *
+ * @param x {number} The X coordinate of the center of the circle
+ * @param y {number} The Y coordinate of the center of the circle
+ * @param radius {number} The radius of the circle
+ * @return {Graphics}
+ */
+Graphics.prototype.drawCircle = function (x, y, radius)
+{
+    this.drawShape(new math.Circle(x,y, radius));
+
+    return this;
+};
+
+/**
+ * Draws an ellipse.
+ *
+ * @param x {number} The X coordinate of the center of the ellipse
+ * @param y {number} The Y coordinate of the center of the ellipse
+ * @param width {number} The half width of the ellipse
+ * @param height {number} The half height of the ellipse
+ * @return {Graphics}
+ */
+Graphics.prototype.drawEllipse = function (x, y, width, height)
+{
+    this.drawShape(new math.Ellipse(x, y, width, height));
+
+    return this;
+};
+
+/**
+ * Draws a polygon using the given path.
+ *
+ * @param path {Array} The path data used to construct the polygon.
+ * @return {Graphics}
+ */
+Graphics.prototype.drawPolygon = function (path)
+{
+    // prevents an argument assignment deopt
+    // see section 3.1: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments
+    var points = path;
+
+    if (!Array.isArray(points))
+    {
+        // prevents an argument leak deopt
+        // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments
+        points = new Array(arguments.length);
+
+        for (var i = 0; i < points.length; ++i)
+        {
+            points[i] = arguments[i];
+        }
+    }
+
+    this.drawShape(new math.Polygon(points));
+
+    return this;
+};
+
+/**
+ * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.clear = function ()
+{
+    this.lineWidth = 0;
+    this.filling = false;
+
+    this.dirty = true;
+    this.clearDirty = true;
+    this.graphicsData = [];
+
+    return this;
+};
+
+/**
+ * Useful function that returns a texture of the graphics object that can then be used to create sprites
+ * This can be quite useful if your geometry is complicated and needs to be reused multiple times.
+ *
+ * @param resolution {number} The resolution of the texture being generated
+ * @param scaleMode {number} Should be one of the scaleMode consts
+ * @return {Texture} a texture of the graphics object
+ */
+Graphics.prototype.generateTexture = function (renderer, resolution, scaleMode)
+{
+
+    resolution = resolution || 1;
+
+    var bounds = this.getLocalBounds();
+
+    var canvasBuffer = new CanvasBuffer(bounds.width * resolution, bounds.height * resolution);
+
+    var texture = Texture.fromCanvas(canvasBuffer.canvas, scaleMode);
+    texture.baseTexture.resolution = resolution;
+
+    canvasBuffer.context.scale(resolution, resolution);
+
+    canvasBuffer.context.translate(-bounds.x,-bounds.y);
+
+    CanvasGraphics.renderGraphics(this, canvasBuffer.context);
+
+    return texture;
+};
+
+/**
+ * Renders the object using the WebGL renderer
+ *
+ * @param renderer {WebGLRenderer}
+ * @private
+ */
+Graphics.prototype._renderWebGL = function (renderer)
+{
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
+
+    // this code may still be needed so leaving for now..
+    //
+    /*
+    if (this._cacheAsBitmap)
+    {
+        if (this.dirty || this.cachedSpriteDirty)
+        {
+            this._generateCachedSprite();
+
+            // we will also need to update the texture on the gpu too!
+            this.updateCachedSpriteTexture();
+
+            this.cachedSpriteDirty = false;
+            this.dirty = false;
+        }
+
+        this._cachedSprite.worldAlpha = this.worldAlpha;
+
+        Sprite.prototype.renderWebGL.call(this._cachedSprite, renderer);
+
+        return;
+    }
+
+    */
+
+    if (this.glDirty)
+    {
+        this.dirty = true;
+        this.glDirty = false;
+    }
+
+    renderer.setObjectRenderer(renderer.plugins.graphics);
+    renderer.plugins.graphics.render(this);
+
+};
+
+/**
+ * Renders the object using the Canvas renderer
+ *
+ * @param renderer {CanvasRenderer}
+ * @private
+ */
+Graphics.prototype._renderCanvas = function (renderer)
+{
+    if (this.isMask === true)
+    {
+        return;
+    }
+
+    // if the tint has changed, set the graphics object to dirty.
+    if (this._prevTint !== this.tint) {
+        this.dirty = true;
+        this._prevTint = this.tint;
+    }
+
+    if (this._cacheAsBitmap)
+    {
+        if (this.dirty || this.cachedSpriteDirty)
+        {
+            this._generateCachedSprite();
+
+            // we will also need to update the texture
+            this.updateCachedSpriteTexture();
+
+            this.cachedSpriteDirty = false;
+            this.dirty = false;
+        }
+
+        this._cachedSprite.alpha = this.alpha;
+
+        Sprite.prototype._renderCanvas.call(this._cachedSprite, renderer);
+
+        return;
+    }
+    else
+    {
+        var context = renderer.context;
+        var transform = this.worldTransform;
+
+        if (this.blendMode !== renderer.currentBlendMode)
+        {
+            renderer.currentBlendMode = this.blendMode;
+            context.globalCompositeOperation = renderer.blendModes[renderer.currentBlendMode];
+        }
+
+        var resolution = renderer.resolution;
+        context.setTransform(
+            transform.a * resolution,
+            transform.b * resolution,
+            transform.c * resolution,
+            transform.d * resolution,
+            transform.tx * resolution,
+            transform.ty * resolution
+        );
+
+        CanvasGraphics.renderGraphics(this, context);
+    }
+};
+
+/**
+ * Retrieves the bounds of the graphic shape as a rectangle object
+ *
+ * @return {Rectangle} the rectangular bounding area
+ */
+Graphics.prototype.getBounds = function (matrix)
+{
+    if(!this._currentBounds)
+    {
+
+        // return an empty object if the item is a mask!
+        if (!this.renderable)
+        {
+            return math.Rectangle.EMPTY;
+        }
+
+        if (this.boundsDirty)
+        {
+            this.updateLocalBounds();
+
+            this.glDirty = true;
+            this.cachedSpriteDirty = true;
+            this.boundsDirty = false;
+        }
+
+        var bounds = this._localBounds;
+
+        var w0 = bounds.x;
+        var w1 = bounds.width + bounds.x;
+
+        var h0 = bounds.y;
+        var h1 = bounds.height + bounds.y;
+
+        var worldTransform = matrix || this.worldTransform;
+
+        var a = worldTransform.a;
+        var b = worldTransform.b;
+        var c = worldTransform.c;
+        var d = worldTransform.d;
+        var tx = worldTransform.tx;
+        var ty = worldTransform.ty;
+
+        var x1 = a * w1 + c * h1 + tx;
+        var y1 = d * h1 + b * w1 + ty;
+
+        var x2 = a * w0 + c * h1 + tx;
+        var y2 = d * h1 + b * w0 + ty;
+
+        var x3 = a * w0 + c * h0 + tx;
+        var y3 = d * h0 + b * w0 + ty;
+
+        var x4 =  a * w1 + c * h0 + tx;
+        var y4 =  d * h0 + b * w1 + ty;
+
+        var maxX = x1;
+        var maxY = y1;
+
+        var minX = x1;
+        var minY = y1;
+
+        minX = x2 < minX ? x2 : minX;
+        minX = x3 < minX ? x3 : minX;
+        minX = x4 < minX ? x4 : minX;
+
+        minY = y2 < minY ? y2 : minY;
+        minY = y3 < minY ? y3 : minY;
+        minY = y4 < minY ? y4 : minY;
+
+        maxX = x2 > maxX ? x2 : maxX;
+        maxX = x3 > maxX ? x3 : maxX;
+        maxX = x4 > maxX ? x4 : maxX;
+
+        maxY = y2 > maxY ? y2 : maxY;
+        maxY = y3 > maxY ? y3 : maxY;
+        maxY = y4 > maxY ? y4 : maxY;
+
+        this._bounds.x = minX;
+        this._bounds.width = maxX - minX;
+
+        this._bounds.y = minY;
+        this._bounds.height = maxY - minY;
+
+        this._currentBounds = this._bounds;
+    }
+
+    return this._currentBounds;
+};
+
+/**
+* Tests if a point is inside this graphics object
+*
+* @param point {Point} the point to test
+* @return {boolean} the result of the test
+*/
+Graphics.prototype.containsPoint = function( point )
+{
+    this.worldTransform.applyInverse(point,  tempPoint);
+
+    var graphicsData = this.graphicsData;
+
+    for (var i = 0; i < graphicsData.length; i++)
+    {
+        var data = graphicsData[i];
+
+        if (!data.fill)
+        {
+            continue;
+        }
+
+        // only deal with fills..
+        if (data.shape)
+        {
+            if ( data.shape.contains( tempPoint.x, tempPoint.y ) )
+            {
+                return true;
+            }
+        }
+    }
+
+    return false;
+};
+
+/**
+ * Update the bounds of the object
+ *
+ */
+Graphics.prototype.updateLocalBounds = function ()
+{
+    var minX = Infinity;
+    var maxX = -Infinity;
+
+    var minY = Infinity;
+    var maxY = -Infinity;
+
+    if (this.graphicsData.length)
+    {
+        var shape, points, x, y, w, h;
+
+        for (var i = 0; i < this.graphicsData.length; i++)
+        {
+            var data = this.graphicsData[i];
+            var type = data.type;
+            var lineWidth = data.lineWidth;
+            shape = data.shape;
+
+            if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC)
+            {
+                x = shape.x - lineWidth/2;
+                y = shape.y - lineWidth/2;
+                w = shape.width + lineWidth;
+                h = shape.height + lineWidth;
+
+                minX = x < minX ? x : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y < minY ? y : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else if (type === CONST.SHAPES.CIRC)
+            {
+                x = shape.x;
+                y = shape.y;
+                w = shape.radius + lineWidth/2;
+                h = shape.radius + lineWidth/2;
+
+                minX = x - w < minX ? x - w : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y - h < minY ? y - h : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else if (type === CONST.SHAPES.ELIP)
+            {
+                x = shape.x;
+                y = shape.y;
+                w = shape.width + lineWidth/2;
+                h = shape.height + lineWidth/2;
+
+                minX = x - w < minX ? x - w : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y - h < minY ? y - h : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else
+            {
+                // POLY
+                points = shape.points;
+
+                for (var j = 0; j < points.length; j += 2)
+                {
+                    x = points[j];
+                    y = points[j+1];
+
+                    minX = x-lineWidth < minX ? x-lineWidth : minX;
+                    maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
+
+                    minY = y-lineWidth < minY ? y-lineWidth : minY;
+                    maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
+                }
+            }
+        }
+    }
+    else
+    {
+        minX = 0;
+        maxX = 0;
+        minY = 0;
+        maxY = 0;
+    }
+
+    var padding = this.boundsPadding;
+
+    this._localBounds.x = minX - padding;
+    this._localBounds.width = (maxX - minX) + padding * 2;
+
+    this._localBounds.y = minY - padding;
+    this._localBounds.height = (maxY - minY) + padding * 2;
+};
+
+/**
+ * Generates the cached sprite when the sprite has cacheAsBitmap = true
+ *
+ * @private
+ */
+/*
+Graphics.prototype._generateCachedSprite = function ()
+{
+    var bounds = this.getLocalBounds();
+
+    if (!this._cachedSprite)
+    {
+        var canvasBuffer = new CanvasBuffer(bounds.width, bounds.height);
+        var texture = Texture.fromCanvas(canvasBuffer.canvas);
+
+        this._cachedSprite = new Sprite(texture);
+        this._cachedSprite.buffer = canvasBuffer;
+
+        this._cachedSprite.worldTransform = this.worldTransform;
+    }
+    else
+    {
+        this._cachedSprite.buffer.resize(bounds.width, bounds.height);
+    }
+
+    // leverage the anchor to account for the offset of the element
+    this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
+    this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
+
+    // this._cachedSprite.buffer.context.save();
+    this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y);
+
+    // make sure we set the alpha of the graphics to 1 for the render..
+    this.worldAlpha = 1;
+
+    // now render the graphic..
+    CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context);
+
+    this._cachedSprite.alpha = this.alpha;
+};
+*/
+/**
+ * Updates texture size based on canvas size
+ *
+ * @private
+ */
+/*
+Graphics.prototype.updateCachedSpriteTexture = function ()
+{
+    var cachedSprite = this._cachedSprite;
+    var texture = cachedSprite.texture;
+    var canvas = cachedSprite.buffer.canvas;
+
+    texture.baseTexture.width = canvas.width;
+    texture.baseTexture.height = canvas.height;
+    texture.crop.width = texture.frame.width = canvas.width;
+    texture.crop.height = texture.frame.height = canvas.height;
+
+    cachedSprite._width = canvas.width;
+    cachedSprite._height = canvas.height;
+
+    // update the dirty base textures
+    texture.baseTexture.dirty();
+};*/
+
+/**
+ * Destroys a previous cached sprite.
+ *
+ */
+/*
+Graphics.prototype.destroyCachedSprite = function ()
+{
+    this._cachedSprite.texture.destroy(true);
+
+    // let the gc collect the unused sprite
+    // TODO could be object pooled!
+    this._cachedSprite = null;
+};*/
+
+/**
+ * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
+ *
+ * @param shape {Circle|Rectangle|Ellipse|Line|Polygon} The shape object to draw.
+ * @return {GraphicsData} The generated GraphicsData object.
+ */
+Graphics.prototype.drawShape = function (shape)
+{
+    if (this.currentPath)
+    {
+        // check current path!
+        if (this.currentPath.shape.points.length <= 2)
+        {
+            this.graphicsData.pop();
+        }
+    }
+
+    this.currentPath = null;
+
+    var data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape);
+
+    this.graphicsData.push(data);
+
+    if (data.type === CONST.SHAPES.POLY)
+    {
+        data.shape.closed = this.filling;
+        this.currentPath = data;
+    }
+
+    this.dirty = this.boundsDirty = true;
+
+    return data;
+};
+
+Graphics.prototype.destroy = function () {
+    Container.prototype.destroy.apply(this, arguments);
+
+    // destroy each of the GraphicsData objects
+    for (var i = 0; i < this.graphicsData.length; ++i) {
+        this.graphicsData[i].destroy();
+    }
+
+    // for each webgl data entry, destroy the WebGLGraphicsData
+    for (var id in this._webgl) {
+        for (var j = 0; j < this._webgl[id].data.length; ++j) {
+            this._webgl[id].data[j].destroy();
+        }
+    }
+
+    this.graphicsData = null;
+
+    this.currentPath = null;
+    this._webgl = null;
+    this._localBounds = null;
+};
+
+},{"../const":22,"../display/Container":23,"../math":32,"../renderers/canvas/utils/CanvasBuffer":44,"../renderers/canvas/utils/CanvasGraphics":45,"../sprites/Sprite":66,"../textures/Texture":71,"./GraphicsData":26}],26:[function(require,module,exports){
+/**
+ * A GraphicsData object.
+ *
+ * @class
+ * @memberof PIXI
+ * @param lineWidth {number} the width of the line to draw
+ * @param lineColor {number} the color of the line to draw
+ * @param lineAlpha {number} the alpha of the line to draw
+ * @param fillColor {number} the color of the fill
+ * @param fillAlpha {number} the alpha of the fill
+ * @param fill      {boolean} whether or not the shape is filled with a colour
+ * @param shape     {Circle|Rectangle|Ellipse|Line|Polygon} The shape object to draw.
+ */
+function GraphicsData(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape)
+{
+    /*
+     * @member {number} the width of the line to draw
+     */
+    this.lineWidth = lineWidth;
+
+    /*
+     * @member {number} the color of the line to draw
+     */
+    this.lineColor = lineColor;
+    /*
+     * @member {number} the alpha of the line to draw
+     */
+    this.lineAlpha = lineAlpha;
+    /*
+     * @member {number} cached tint of the line to draw
+     */
+    this._lineTint = lineColor;
+
+    /*
+     * @member {number} the color of the fill
+     */
+    this.fillColor = fillColor;
+
+    /*
+     * @member {number} the alpha of the fill
+     */
+    this.fillAlpha = fillAlpha;
+
+    /*
+     * @member {number} cached tint of the fill
+     */
+    this._fillTint = fillColor;
+
+    /*
+     * @member {boolean} whether or not the shape is filled with a colour
+     */
+    this.fill = fill;
+
+    /*
+     * @member {Circle|Rectangle|Ellipse|Line|Polygon} The shape object to draw.
+     */
+    this.shape = shape;
+
+    /*
+     * @member {number} The type of the shape, see the Const.Shapes file for all the existing types,
+     */
+    this.type = shape.type;
+}
+
+GraphicsData.prototype.constructor = GraphicsData;
+module.exports = GraphicsData;
+
+/**
+ * Creates a new GraphicsData object with the same values as this one.
+ *
+ * @return {GraphicsData}
+ */
+GraphicsData.prototype.clone = function ()
+{
+    return new GraphicsData(
+        this.lineWidth,
+        this.lineColor,
+        this.lineAlpha,
+        this.fillColor,
+        this.fillAlpha,
+        this.fill,
+        this.shape
+    );
+};
+
+GraphicsData.prototype.destroy = function () {
+    this.shape = null;
+};
+
+},{}],27:[function(require,module,exports){
+var utils = require('../../utils'),
+    math = require('../../math'),
+    CONST = require('../../const'),
+    ObjectRenderer = require('../../renderers/webgl/utils/ObjectRenderer'),
+    WebGLRenderer = require('../../renderers/webgl/WebGLRenderer'),
+    WebGLGraphicsData = require('./WebGLGraphicsData'),
+    earcut = require('earcut');
+
+/**
+ * Renders the graphics object.
+ *
+ * @class
+ * @private
+ * @memberof PIXI
+ * @extends PIXI.ObjectRenderer
+ * @param renderer {WebGLRenderer} The renderer this object renderer works for.
+ */
+function GraphicsRenderer(renderer)
+{
+    ObjectRenderer.call(this, renderer);
+
+    this.graphicsDataPool = [];
+
+    this.primitiveShader = null;
+    this.complexPrimitiveShader = null;
+}
+
+GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype);
+GraphicsRenderer.prototype.constructor = GraphicsRenderer;
+module.exports = GraphicsRenderer;
+
+WebGLRenderer.registerPlugin('graphics', GraphicsRenderer);
+
+/**
+ * Called when there is a WebGL context change
+ *
+ * @private
+ *
+ */
+GraphicsRenderer.prototype.onContextChange = function()
+{
+
+};
+
+/**
+ * Destroys this renderer.
+ *
+ */
+GraphicsRenderer.prototype.destroy = function () {
+    ObjectRenderer.prototype.destroy.call(this);
+
+    for (var i = 0; i < this.graphicsDataPool.length; ++i) {
+        this.graphicsDataPool[i].destroy();
+    }
+
+    this.graphicsDataPool = null;
+};
+
+/**
+ * Renders a graphics object.
+ *
+ * @param graphics {Graphics} The graphics object to render.
+ */
+GraphicsRenderer.prototype.render = function(graphics)
+{
+    var renderer = this.renderer;
+    var gl = renderer.gl;
+
+    var shader = renderer.shaderManager.plugins.primitiveShader,
+        webGLData;
+
+    if (graphics.dirty)
+    {
+        this.updateGraphics(graphics, gl);
+    }
+
+    var webGL = graphics._webGL[gl.id];
+
+    // This  could be speeded up for sure!
+
+    renderer.blendModeManager.setBlendMode( graphics.blendMode );
+
+//    var matrix =  graphics.worldTransform.clone();
+//    var matrix =  renderer.currentRenderTarget.projectionMatrix.clone();
+//    matrix.append(graphics.worldTransform);
+
+    for (var i = 0; i < webGL.data.length; i++)
+    {
+        if (webGL.data[i].mode === 1)
+        {
+            webGLData = webGL.data[i];
+
+            renderer.stencilManager.pushStencil(graphics, webGLData, renderer);
+
+            gl.uniform1f(renderer.shaderManager.complexPrimitiveShader.uniforms.alpha._location, graphics.worldAlpha * webGLData.alpha);
+
+            // render quad..
+            gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 );
+
+            renderer.stencilManager.popStencil(graphics, webGLData, renderer);
+        }
+        else
+        {
+            webGLData = webGL.data[i];
+
+
+            shader = renderer.shaderManager.primitiveShader;
+
+            renderer.shaderManager.setShader( shader );//activatePrimitiveShader();
+
+            gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true));
+
+            gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true));
+
+            gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint));
+
+            gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha);
+
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer);
+
+            gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
+            gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4);
+
+            // set the index buffer!
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);
+            gl.drawElements(gl.TRIANGLE_STRIP,  webGLData.indices.length, gl.UNSIGNED_SHORT, 0 );
+        }
+    }
+};
+
+/**
+ * Updates the graphics object
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object to update
+ */
+GraphicsRenderer.prototype.updateGraphics = function(graphics)
+{
+    var gl = this.renderer.gl;
+
+     // get the contexts graphics object
+    var webGL = graphics._webGL[gl.id];
+
+    // if the graphics object does not exist in the webGL context time to create it!
+    if (!webGL)
+    {
+        webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl};
+    }
+
+    // flag the graphics as not dirty as we are about to update it...
+    graphics.dirty = false;
+
+    var i;
+
+    // if the user cleared the graphics object we will need to clear every object
+    if (graphics.clearDirty)
+    {
+        graphics.clearDirty = false;
+
+        // loop through and return all the webGLDatas to the object pool so than can be reused later on
+        for (i = 0; i < webGL.data.length; i++)
+        {
+            var graphicsData = webGL.data[i];
+            graphicsData.reset();
+            this.graphicsDataPool.push( graphicsData );
+        }
+
+        // clear the array and reset the index..
+        webGL.data = [];
+        webGL.lastIndex = 0;
+    }
+
+    var webGLData;
+
+    // loop through the graphics datas and construct each one..
+    // if the object is a complex fill then the new stencil buffer technique will be used
+    // other wise graphics objects will be pushed into a batch..
+    for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++)
+    {
+        var data = graphics.graphicsData[i];
+
+        if (data.type === CONST.SHAPES.POLY)
+        {
+            // need to add the points the the graphics object..
+            data.points = data.shape.points.slice();
+            if (data.shape.closed)
+            {
+                // close the poly if the value is true!
+                if (data.points[0] !== data.points[data.points.length-2] || data.points[1] !== data.points[data.points.length-1])
+                {
+                    data.points.push(data.points[0], data.points[1]);
+                }
+            }
+
+            // MAKE SURE WE HAVE THE CORRECT TYPE..
+            if (data.fill)
+            {
+                if (data.points.length >= 6)
+                {
+                    if (data.points.length < 6 * 2)
+                    {
+                        webGLData = this.switchMode(webGL, 0);
+
+                        var canDrawUsingSimple = this.buildPoly(data, webGLData);
+                   //     console.log(canDrawUsingSimple);
+
+                        if (!canDrawUsingSimple)
+                        {
+                        //    console.log("<>>>")
+                            webGLData = this.switchMode(webGL, 1);
+                            this.buildComplexPoly(data, webGLData);
+                        }
+
+                    }
+                    else
+                    {
+                        webGLData = this.switchMode(webGL, 1);
+                        this.buildComplexPoly(data, webGLData);
+                    }
+                }
+            }
+
+            if (data.lineWidth > 0)
+            {
+                webGLData = this.switchMode(webGL, 0);
+                this.buildLine(data, webGLData);
+            }
+        }
+        else
+        {
+            webGLData = this.switchMode(webGL, 0);
+
+            if (data.type === CONST.SHAPES.RECT)
+            {
+                this.buildRectangle(data, webGLData);
+            }
+            else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP)
+            {
+                this.buildCircle(data, webGLData);
+            }
+            else if (data.type === CONST.SHAPES.RREC)
+            {
+                this.buildRoundedRectangle(data, webGLData);
+            }
+        }
+
+        webGL.lastIndex++;
+    }
+
+    // upload all the dirty data...
+    for (i = 0; i < webGL.data.length; i++)
+    {
+        webGLData = webGL.data[i];
+
+        if (webGLData.dirty)
+        {
+            webGLData.upload();
+        }
+    }
+};
+
+/**
+ *
+ *
+ * @private
+ * @param webGL {WebGLRenderingContext} the current WebGL drawing context
+ * @param type {number} TODO @Alvin
+ */
+GraphicsRenderer.prototype.switchMode = function (webGL, type)
+{
+    var webGLData;
+
+    if (!webGL.data.length)
+    {
+        webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
+        webGLData.mode = type;
+        webGL.data.push(webGLData);
+    }
+    else
+    {
+        webGLData = webGL.data[webGL.data.length-1];
+
+        if ((webGLData.points.length > 320000) || webGLData.mode !== type || type === 1)
+        {
+            webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
+            webGLData.mode = type;
+            webGL.data.push(webGLData);
+        }
+    }
+
+    webGLData.dirty = true;
+
+    return webGLData;
+};
+
+/**
+ * Builds a rectangle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object} an object containing all the webGL-specific information to create this shape
+ */
+GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData)
+{
+    // --- //
+    // need to convert points to a nice regular data
+    //
+    var rectData = graphicsData.shape;
+    var x = rectData.x;
+    var y = rectData.y;
+    var width = rectData.width;
+    var height = rectData.height;
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vertPos = verts.length/6;
+
+        // start
+        verts.push(x, y);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x + width, y);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x , y + height);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x + width, y + height);
+        verts.push(r, g, b, alpha);
+
+        // insert 2 dead triangles..
+        indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3);
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = [x, y,
+                  x + width, y,
+                  x + width, y + height,
+                  x, y + height,
+                  x, y];
+
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Builds a rounded rectangle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object} an object containing all the webGL-specific information to create this shape
+ */
+GraphicsRenderer.prototype.buildRoundedRectangle = function (graphicsData, webGLData)
+{
+    var rrectData = graphicsData.shape;
+    var x = rrectData.x;
+    var y = rrectData.y;
+    var width = rrectData.width;
+    var height = rrectData.height;
+
+    var radius = rrectData.radius;
+
+    var recPoints = [];
+    recPoints.push(x, y + radius);
+    this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height, recPoints);
+    this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius, recPoints);
+    this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y, recPoints);
+    this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius + 0.0000000001, recPoints);
+
+    // this tiny number deals with the issue that occurs when points overlap and polyK fails to triangulate the item.
+    // TODO - fix this properly, this is not very elegant.. but it works for now.
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vecPos = verts.length/6;
+
+        var triangles = earcut(recPoints, null, 2);
+
+        var i = 0;
+        for (i = 0; i < triangles.length; i+=3)
+        {
+            indices.push(triangles[i] + vecPos);
+            indices.push(triangles[i] + vecPos);
+            indices.push(triangles[i+1] + vecPos);
+            indices.push(triangles[i+2] + vecPos);
+            indices.push(triangles[i+2] + vecPos);
+        }
+
+        for (i = 0; i < recPoints.length; i++)
+        {
+            verts.push(recPoints[i], recPoints[++i], r, g, b, alpha);
+        }
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = recPoints;
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Calculate the points for a quadratic bezier curve. (helper function..)
+ * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
+ *
+ * @private
+ * @param fromX {number} Origin point x
+ * @param fromY {number} Origin point x
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @param [out] {number[]} The output array to add points into. If not passed, a new array is created.
+ * @return {number[]} an array of points
+ */
+GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY, out)
+{
+    var xa,
+        ya,
+        xb,
+        yb,
+        x,
+        y,
+        n = 20,
+        points = out || [];
+
+    function getPt(n1 , n2, perc) {
+        var diff = n2 - n1;
+
+        return n1 + ( diff * perc );
+    }
+
+    var j = 0;
+    for (var i = 0; i <= n; i++ ) {
+        j = i / n;
+
+        // The Green Line
+        xa = getPt( fromX , cpX , j );
+        ya = getPt( fromY , cpY , j );
+        xb = getPt( cpX , toX , j );
+        yb = getPt( cpY , toY , j );
+
+        // The Black Dot
+        x = getPt( xa , xb , j );
+        y = getPt( ya , yb , j );
+
+        points.push(x, y);
+    }
+
+    return points;
+};
+
+/**
+ * Builds a circle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object to draw
+ * @param webGLData {object} an object containing all the webGL-specific information to create this shape
+ */
+GraphicsRenderer.prototype.buildCircle = function (graphicsData, webGLData)
+{
+    // need to convert points to a nice regular data
+    var circleData = graphicsData.shape;
+    var x = circleData.x;
+    var y = circleData.y;
+    var width;
+    var height;
+
+    // TODO - bit hacky??
+    if (graphicsData.type === CONST.SHAPES.CIRC)
+    {
+        width = circleData.radius;
+        height = circleData.radius;
+    }
+    else
+    {
+        width = circleData.width;
+        height = circleData.height;
+    }
+
+    var totalSegs = 40;
+    var seg = (Math.PI * 2) / totalSegs ;
+
+    var i = 0;
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vecPos = verts.length/6;
+
+        indices.push(vecPos);
+
+        for (i = 0; i < totalSegs + 1 ; i++)
+        {
+            verts.push(x,y, r, g, b, alpha);
+
+            verts.push(x + Math.sin(seg * i) * width,
+                       y + Math.cos(seg * i) * height,
+                       r, g, b, alpha);
+
+            indices.push(vecPos++, vecPos++);
+        }
+
+        indices.push(vecPos-1);
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = [];
+
+        for (i = 0; i < totalSegs + 1; i++)
+        {
+            graphicsData.points.push(x + Math.sin(seg * i) * width,
+                                     y + Math.cos(seg * i) * height);
+        }
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Builds a line to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object} an object containing all the webGL-specific information to create this shape
+ */
+GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData)
+{
+    // TODO OPTIMISE!
+    var i = 0;
+    var points = graphicsData.points;
+
+    if (points.length === 0)
+    {
+        return;
+    }
+
+    // if the line width is an odd number add 0.5 to align to a whole pixel
+    if (graphicsData.lineWidth%2)
+    {
+        for (i = 0; i < points.length; i++)
+        {
+            points[i] += 0.5;
+        }
+    }
+
+    // get first and last point.. figure out the middle!
+    var firstPoint = new math.Point(points[0], points[1]);
+    var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
+
+    // if the first point is the last point - gonna have issues :)
+    if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y)
+    {
+        // need to clone as we are going to slightly modify the shape..
+        points = points.slice();
+
+        points.pop();
+        points.pop();
+
+        lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
+
+        var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
+        var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
+
+        points.unshift(midPointX, midPointY);
+        points.push(midPointX, midPointY);
+    }
+
+    var verts = webGLData.points;
+    var indices = webGLData.indices;
+    var length = points.length / 2;
+    var indexCount = points.length;
+    var indexStart = verts.length/6;
+
+    // DRAW the Line
+    var width = graphicsData.lineWidth / 2;
+
+    // sort color
+    var color = utils.hex2rgb(graphicsData.lineColor);
+    var alpha = graphicsData.lineAlpha;
+    var r = color[0] * alpha;
+    var g = color[1] * alpha;
+    var b = color[2] * alpha;
+
+    var px, py, p1x, p1y, p2x, p2y, p3x, p3y;
+    var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
+    var a1, b1, c1, a2, b2, c2;
+    var denom, pdist, dist;
+
+    p1x = points[0];
+    p1y = points[1];
+
+    p2x = points[2];
+    p2y = points[3];
+
+    perpx = -(p1y - p2y);
+    perpy =  p1x - p2x;
+
+    dist = Math.sqrt(perpx*perpx + perpy*perpy);
+
+    perpx /= dist;
+    perpy /= dist;
+    perpx *= width;
+    perpy *= width;
+
+    // start
+    verts.push(p1x - perpx , p1y - perpy,
+                r, g, b, alpha);
+
+    verts.push(p1x + perpx , p1y + perpy,
+                r, g, b, alpha);
+
+    for (i = 1; i < length-1; i++)
+    {
+        p1x = points[(i-1)*2];
+        p1y = points[(i-1)*2 + 1];
+
+        p2x = points[(i)*2];
+        p2y = points[(i)*2 + 1];
+
+        p3x = points[(i+1)*2];
+        p3y = points[(i+1)*2 + 1];
+
+        perpx = -(p1y - p2y);
+        perpy = p1x - p2x;
+
+        dist = Math.sqrt(perpx*perpx + perpy*perpy);
+        perpx /= dist;
+        perpy /= dist;
+        perpx *= width;
+        perpy *= width;
+
+        perp2x = -(p2y - p3y);
+        perp2y = p2x - p3x;
+
+        dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
+        perp2x /= dist;
+        perp2y /= dist;
+        perp2x *= width;
+        perp2y *= width;
+
+        a1 = (-perpy + p1y) - (-perpy + p2y);
+        b1 = (-perpx + p2x) - (-perpx + p1x);
+        c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
+        a2 = (-perp2y + p3y) - (-perp2y + p2y);
+        b2 = (-perp2x + p2x) - (-perp2x + p3x);
+        c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
+
+        denom = a1*b2 - a2*b1;
+
+        if (Math.abs(denom) < 0.1 )
+        {
+
+            denom+=10.1;
+            verts.push(p2x - perpx , p2y - perpy,
+                r, g, b, alpha);
+
+            verts.push(p2x + perpx , p2y + perpy,
+                r, g, b, alpha);
+
+            continue;
+        }
+
+        px = (b1*c2 - b2*c1)/denom;
+        py = (a2*c1 - a1*c2)/denom;
+
+
+        pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
+
+
+        if (pdist > 140 * 140)
+        {
+            perp3x = perpx - perp2x;
+            perp3y = perpy - perp2y;
+
+            dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
+            perp3x /= dist;
+            perp3y /= dist;
+            perp3x *= width;
+            perp3y *= width;
+
+            verts.push(p2x - perp3x, p2y -perp3y);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x + perp3x, p2y +perp3y);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x - perp3x, p2y -perp3y);
+            verts.push(r, g, b, alpha);
+
+            indexCount++;
+        }
+        else
+        {
+
+            verts.push(px , py);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x - (px-p2x), p2y - (py - p2y));
+            verts.push(r, g, b, alpha);
+        }
+    }
+
+    p1x = points[(length-2)*2];
+    p1y = points[(length-2)*2 + 1];
+
+    p2x = points[(length-1)*2];
+    p2y = points[(length-1)*2 + 1];
+
+    perpx = -(p1y - p2y);
+    perpy = p1x - p2x;
+
+    dist = Math.sqrt(perpx*perpx + perpy*perpy);
+    perpx /= dist;
+    perpy /= dist;
+    perpx *= width;
+    perpy *= width;
+
+    verts.push(p2x - perpx , p2y - perpy);
+    verts.push(r, g, b, alpha);
+
+    verts.push(p2x + perpx , p2y + perpy);
+    verts.push(r, g, b, alpha);
+
+    indices.push(indexStart);
+
+    for (i = 0; i < indexCount; i++)
+    {
+        indices.push(indexStart++);
+    }
+
+    indices.push(indexStart-1);
+};
+
+/**
+ * Builds a complex polygon to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object} an object containing all the webGL-specific information to create this shape
+ */
+GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData)
+{
+    //TODO - no need to copy this as it gets turned into a FLoat32Array anyways..
+    var points = graphicsData.points.slice();
+
+    if (points.length < 6)
+    {
+        return;
+    }
+
+    // get first and last point.. figure out the middle!
+    var indices = webGLData.indices;
+    webGLData.points = points;
+    webGLData.alpha = graphicsData.fillAlpha;
+    webGLData.color = utils.hex2rgb(graphicsData.fillColor);
+
+    // calclate the bounds..
+    var minX = Infinity;
+    var maxX = -Infinity;
+
+    var minY = Infinity;
+    var maxY = -Infinity;
+
+    var x,y;
+
+    // get size..
+    for (var i = 0; i < points.length; i+=2)
+    {
+        x = points[i];
+        y = points[i+1];
+
+        minX = x < minX ? x : minX;
+        maxX = x > maxX ? x : maxX;
+
+        minY = y < minY ? y : minY;
+        maxY = y > maxY ? y : maxY;
+    }
+
+    // add a quad to the end cos there is no point making another buffer!
+    points.push(minX, minY,
+                maxX, minY,
+                maxX, maxY,
+                minX, maxY);
+
+    // push a quad onto the end..
+
+    //TODO - this aint needed!
+    var length = points.length / 2;
+    for (i = 0; i < length; i++)
+    {
+        indices.push( i );
+    }
+
+};
+
+/**
+ * Builds a polygon to draw
+ *
+ * @private
+ * @param graphicsData {WebGLGraphicsData} The graphics object containing all the necessary properties
+ * @param webGLData {object} an object containing all the webGL-specific information to create this shape
+ */
+GraphicsRenderer.prototype.buildPoly = function (graphicsData, webGLData)
+{
+    var points = graphicsData.points;
+
+    if (points.length < 6)
+    {
+        return;
+    }
+
+    // get first and last point.. figure out the middle!
+    var verts = webGLData.points;
+    var indices = webGLData.indices;
+
+    var length = points.length / 2;
+
+    // sort color
+    var color = utils.hex2rgb(graphicsData.fillColor);
+    var alpha = graphicsData.fillAlpha;
+    var r = color[0] * alpha;
+    var g = color[1] * alpha;
+    var b = color[2] * alpha;
+
+    var triangles = earcut(points, null, 2);
+
+    if (!triangles) {
+        return false;
+    }
+
+    var vertPos = verts.length / 6;
+
+    var i = 0;
+
+    for (i = 0; i < triangles.length; i+=3)
+    {
+        indices.push(triangles[i] + vertPos);
+        indices.push(triangles[i] + vertPos);
+        indices.push(triangles[i+1] + vertPos);
+        indices.push(triangles[i+2] +vertPos);
+        indices.push(triangles[i+2] + vertPos);
+    }
+
+    for (i = 0; i < length; i++)
+    {
+        verts.push(points[i * 2], points[i * 2 + 1],
+                   r, g, b, alpha);
+    }
+
+    return true;
+};
+
+},{"../../const":22,"../../math":32,"../../renderers/webgl/WebGLRenderer":48,"../../renderers/webgl/utils/ObjectRenderer":62,"../../utils":74,"./WebGLGraphicsData":28,"earcut":10}],28:[function(require,module,exports){
+/**
+ * An object containing WebGL specific properties to be used by the WebGL renderer
+ *
+ * @class
+ * @memberof PIXI
+ * @param gl {WebGLRenderingContext} the current WebGL drawing context
+ * @private
+ */
+function WebGLGraphicsData(gl) {
+
+    /**
+     * The current WebGL drawing context
+     *
+     * @member {WebGLRenderingContext}
+     */
+    this.gl = gl;
+
+    //TODO does this need to be split before uploding??
+    /**
+     * An array of color components (r,g,b)
+     * @member {Array}
+     */
+    this.color = [0,0,0]; // color split!
+
+    /**
+     * An array of points to draw
+     * @member {Array}
+     */
+    this.points = [];
+
+    /**
+     * The indices of the vertices
+     * @member {Array}
+     */
+    this.indices = [];
+    /**
+     * The main buffer
+     * @member {WebGLBuffer}
+     */
+    this.buffer = gl.createBuffer();
+
+    /**
+     * The index buffer
+     * @member {WebGLBuffer}
+     */
+    this.indexBuffer = gl.createBuffer();
+
+    /**
+     * todo @alvin
+     * @member {number}
+     */
+    this.mode = 1;
+
+    /**
+     * The alpha of the graphics
+     * @member {number}
+     */
+    this.alpha = 1;
+
+    /**
+     * Whether this graphics is dirty or not
+     * @member {boolean}
+     */
+    this.dirty = true;
+
+    this.glPoints = null;
+    this.glIndices = null;
+}
+
+WebGLGraphicsData.prototype.constructor = WebGLGraphicsData;
+module.exports = WebGLGraphicsData;
+
+/**
+ * Resets the vertices and the indices
+ */
+WebGLGraphicsData.prototype.reset = function () {
+    this.points.length = 0;
+    this.indices.length = 0;
+};
+
+/**
+ * Binds the buffers and uploads the data
+ */
+WebGLGraphicsData.prototype.upload = function () {
+    var gl = this.gl;
+
+//    this.lastIndex = graphics.graphicsData.length;
+    this.glPoints = new Float32Array(this.points);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW);
+
+    this.glIndices = new Uint16Array(this.indices);
+
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndices, gl.STATIC_DRAW);
+
+    this.dirty = false;
+};
+
+WebGLGraphicsData.prototype.destroy = function () {
+    this.gl = null;
+    this.color = null;
+    this.points = null;
+    this.indices = null;
+
+    this.gl.deleteBuffer(this.buffer);
+    this.gl.deleteBuffer(this.indexBuffer);
+
+    this.buffer = null;
+    this.indexBuffer = null;
+
+    this.glPoints = null;
+    this.glIndices = null;
+};
+
+},{}],29:[function(require,module,exports){
+/**
+ * @file        Main export of the PIXI core library
+ * @author      Mat Groves <mat@goodboydigital.com>
+ * @copyright   2013-2015 GoodBoyDigital
+ * @license     {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License}
+ */
+
+/**
+ * @namespace PIXI
+ */
+// export core and const. We assign core to const so that the non-reference types in const remain in-tact
+var core = module.exports = Object.assign(require('./const'), require('./math'), {
+    // utils
+    utils: require('./utils'),
+    math: require('./math'),
+
+    // display
+    DisplayObject:          require('./display/DisplayObject'),
+    Container:              require('./display/Container'),
+
+    // sprites
+    Sprite:                 require('./sprites/Sprite'),
+    ParticleContainer:      require('./particles/ParticleContainer'),
+    SpriteRenderer:         require('./sprites/webgl/SpriteRenderer'),
+    ParticleRenderer:       require('./particles/webgl/ParticleRenderer'),
+
+    // text
+    Text:                   require('./text/Text'),
+
+    // primitives
+    Graphics:               require('./graphics/Graphics'),
+    GraphicsData:           require('./graphics/GraphicsData'),
+    GraphicsRenderer:       require('./graphics/webgl/GraphicsRenderer'),
+
+    // textures
+    Texture:                require('./textures/Texture'),
+    BaseTexture:            require('./textures/BaseTexture'),
+    RenderTexture:          require('./textures/RenderTexture'),
+    VideoBaseTexture:       require('./textures/VideoBaseTexture'),
+    TextureUvs:             require('./textures/TextureUvs'),
+
+    // renderers - canvas
+    CanvasRenderer:         require('./renderers/canvas/CanvasRenderer'),
+    CanvasGraphics:         require('./renderers/canvas/utils/CanvasGraphics'),
+    CanvasBuffer:           require('./renderers/canvas/utils/CanvasBuffer'),
+
+    // renderers - webgl
+    WebGLRenderer:          require('./renderers/webgl/WebGLRenderer'),
+    ShaderManager:          require('./renderers/webgl/managers/ShaderManager'),
+    Shader:                 require('./renderers/webgl/shaders/Shader'),
+    ObjectRenderer:         require('./renderers/webgl/utils/ObjectRenderer'),
+    RenderTarget:           require('./renderers/webgl/utils/RenderTarget'),
+
+    // filters - webgl
+    AbstractFilter:         require('./renderers/webgl/filters/AbstractFilter'),
+
+    /**
+     * This helper function will automatically detect which renderer you should be using.
+     * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by
+     * the browser then this function will return a canvas renderer
+     *
+     * @memberof PIXI
+     * @param width=800 {number} the width of the renderers view
+     * @param height=600 {number} the height of the renderers view
+     * @param [options] {object} The optional renderer parameters
+     * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional
+     * @param [options.transparent=false] {boolean} If the render view is transparent, default false
+     * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment)
+     * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if you
+     *      need to call toDataUrl on the webgl context
+     * @param [options.resolution=1] {number} the resolution of the renderer, retina would be 2
+     * @param [noWebGL=false] {boolean} prevents selection of WebGL renderer, even if such is present
+     *
+     * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer
+     */
+    autoDetectRenderer: function (width, height, options, noWebGL)
+    {
+        width = width || 800;
+        height = height || 600;
+
+        if (!noWebGL && core.utils.isWebGLSupported())
+        {
+            return new core.WebGLRenderer(width, height, options);
+        }
+
+        return new core.CanvasRenderer(width, height, options);
+    }
+});
+
+},{"./const":22,"./display/Container":23,"./display/DisplayObject":24,"./graphics/Graphics":25,"./graphics/GraphicsData":26,"./graphics/webgl/GraphicsRenderer":27,"./math":32,"./particles/ParticleContainer":38,"./particles/webgl/ParticleRenderer":40,"./renderers/canvas/CanvasRenderer":43,"./renderers/canvas/utils/CanvasBuffer":44,"./renderers/canvas/utils/CanvasGraphics":45,"./renderers/webgl/WebGLRenderer":48,"./renderers/webgl/filters/AbstractFilter":49,"./renderers/webgl/managers/ShaderManager":55,"./renderers/webgl/shaders/Shader":60,"./renderers/webgl/utils/ObjectRenderer":62,"./renderers/webgl/utils/RenderTarget":64,"./sprites/Sprite":66,"./sprites/webgl/SpriteRenderer":67,"./text/Text":68,"./textures/BaseTexture":69,"./textures/RenderTexture":70,"./textures/Texture":71,"./textures/TextureUvs":72,"./textures/VideoBaseTexture":73,"./utils":74}],30:[function(require,module,exports){
+var Point = require('./Point');
+
+/**
+ * The pixi Matrix class as an object, which makes it a lot faster,
+ * here is a representation of it :
+ * | a | b | tx|
+ * | c | d | ty|
+ * | 0 | 0 | 1 |
+ *
+ * @class
+ * @memberof PIXI
+ */
+function Matrix()
+{
+    /**
+     * @member {number}
+     * @default 1
+     */
+    this.a = 1;
+
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.b = 0;
+
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.c = 0;
+
+    /**
+     * @member {number}
+     * @default 1
+     */
+    this.d = 1;
+
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.tx = 0;
+
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.ty = 0;
+}
+
+Matrix.prototype.constructor = Matrix;
+module.exports = Matrix;
+
+/**
+ * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows:
+ *
+ * a = array[0]
+ * b = array[1]
+ * c = array[3]
+ * d = array[4]
+ * tx = array[2]
+ * ty = array[5]
+ *
+ * @param array {number[]} The array that the matrix will be populated from.
+ */
+Matrix.prototype.fromArray = function (array)
+{
+    this.a = array[0];
+    this.b = array[1];
+    this.c = array[3];
+    this.d = array[4];
+    this.tx = array[2];
+    this.ty = array[5];
+};
+
+/**
+ * Creates an array from the current Matrix object.
+ *
+ * @param transpose {boolean} Whether we need to transpose the matrix or not
+ * @return {number[]} the newly created array which contains the matrix
+ */
+Matrix.prototype.toArray = function (transpose)
+{
+    if (!this.array)
+    {
+        this.array = new Float32Array(9);
+    }
+
+    var array = this.array;
+
+    if (transpose)
+    {
+        array[0] = this.a;
+        array[1] = this.b;
+        array[2] = 0;
+        array[3] = this.c;
+        array[4] = this.d;
+        array[5] = 0;
+        array[6] = this.tx;
+        array[7] = this.ty;
+        array[8] = 1;
+    }
+    else
+    {
+        array[0] = this.a;
+        array[1] = this.c;
+        array[2] = this.tx;
+        array[3] = this.b;
+        array[4] = this.d;
+        array[5] = this.ty;
+        array[6] = 0;
+        array[7] = 0;
+        array[8] = 1;
+    }
+
+    return array;
+};
+
+/**
+ * Get a new position with the current transformation applied.
+ * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering)
+ *
+ * @param pos {Point} The origin
+ * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input)
+ * @return {Point} The new point, transformed through this matrix
+ */
+Matrix.prototype.apply = function (pos, newPos)
+{
+    newPos = newPos || new Point();
+
+    var x = pos.x;
+    var y = pos.y;
+
+    newPos.x = this.a * x + this.c * y + this.tx;
+    newPos.y = this.b * x + this.d * y + this.ty;
+
+    return newPos;
+};
+
+/**
+ * Get a new position with the inverse of the current transformation applied.
+ * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input)
+ *
+ * @param pos {Point} The origin
+ * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input)
+ * @return {Point} The new point, inverse-transformed through this matrix
+ */
+Matrix.prototype.applyInverse = function (pos, newPos)
+{
+    newPos = newPos || new Point();
+
+    var id = 1 / (this.a * this.d + this.c * -this.b);
+
+    var x = pos.x;
+    var y = pos.y;
+
+    newPos.x = this.d * id * x + -this.c * id * y + (this.ty * this.c - this.tx * this.d) * id;
+    newPos.y = this.a * id * y + -this.b * id * x + (-this.ty * this.a + this.tx * this.b) * id;
+
+    return newPos;
+};
+
+/**
+ * Translates the matrix on the x and y.
+ *
+ * @param {number} x
+ * @param {number} y
+ * @return {Matrix} This matrix. Good for chaining method calls.
+ */
+Matrix.prototype.translate = function (x, y)
+{
+    this.tx += x;
+    this.ty += y;
+
+    return this;
+};
+
+/**
+ * Applies a scale transformation to the matrix.
+ *
+ * @param {number} x The amount to scale horizontally
+ * @param {number} y The amount to scale vertically
+ * @return {Matrix} This matrix. Good for chaining method calls.
+ */
+Matrix.prototype.scale = function (x, y)
+{
+    this.a *= x;
+    this.d *= y;
+    this.c *= x;
+    this.b *= y;
+    this.tx *= x;
+    this.ty *= y;
+
+    return this;
+};
+
+
+/**
+ * Applies a rotation transformation to the matrix.
+ *
+ * @param {number} angle - The angle in radians.
+ * @return {Matrix} This matrix. Good for chaining method calls.
+ */
+Matrix.prototype.rotate = function (angle)
+{
+    var cos = Math.cos( angle );
+    var sin = Math.sin( angle );
+
+    var a1 = this.a;
+    var c1 = this.c;
+    var tx1 = this.tx;
+
+    this.a = a1 * cos-this.b * sin;
+    this.b = a1 * sin+this.b * cos;
+    this.c = c1 * cos-this.d * sin;
+    this.d = c1 * sin+this.d * cos;
+    this.tx = tx1 * cos - this.ty * sin;
+    this.ty = tx1 * sin + this.ty * cos;
+
+    return this;
+};
+
+/**
+ * Appends the given Matrix to this Matrix.
+ *
+ * @param {Matrix} matrix
+ * @return {Matrix} This matrix. Good for chaining method calls.
+ */
+Matrix.prototype.append = function (matrix)
+{
+    var a1 = this.a;
+    var b1 = this.b;
+    var c1 = this.c;
+    var d1 = this.d;
+
+    this.a  = matrix.a * a1 + matrix.b * c1;
+    this.b  = matrix.a * b1 + matrix.b * d1;
+    this.c  = matrix.c * a1 + matrix.d * c1;
+    this.d  = matrix.c * b1 + matrix.d * d1;
+
+    this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx;
+    this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty;
+
+    return this;
+};
+
+/**
+ * Prepends the given Matrix to this Matrix.
+ *
+ * @param {Matrix} matrix
+ * @return {Matrix} This matrix. Good for chaining method calls.
+ */
+Matrix.prototype.prepend = function(matrix)
+{
+    var tx1 = this.tx;
+
+    if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1)
+    {
+        var a1 = this.a;
+        var c1 = this.c;
+        this.a  = a1*matrix.a+this.b*matrix.c;
+        this.b  = a1*matrix.b+this.b*matrix.d;
+        this.c  = c1*matrix.a+this.d*matrix.c;
+        this.d  = c1*matrix.b+this.d*matrix.d;
+    }
+
+    this.tx = tx1*matrix.a+this.ty*matrix.c+matrix.tx;
+    this.ty = tx1*matrix.b+this.ty*matrix.d+matrix.ty;
+
+    return this;
+};
+
+/**
+ * Inverts this matrix
+ *
+ * @return {Matrix} This matrix. Good for chaining method calls.
+ */
+Matrix.prototype.invert = function()
+{
+    var a1 = this.a;
+    var b1 = this.b;
+    var c1 = this.c;
+    var d1 = this.d;
+    var tx1 = this.tx;
+    var n = a1*d1-b1*c1;
+
+    this.a = d1/n;
+    this.b = -b1/n;
+    this.c = -c1/n;
+    this.d = a1/n;
+    this.tx = (c1*this.ty-d1*tx1)/n;
+    this.ty = -(a1*this.ty-b1*tx1)/n;
+
+    return this;
+};
+
+
+/**
+ * Resets this Matix to an identity (default) matrix.
+ *
+ * @return {Matrix} This matrix. Good for chaining method calls.
+ */
+Matrix.prototype.identity = function ()
+{
+    this.a = 1;
+    this.b = 0;
+    this.c = 0;
+    this.d = 1;
+    this.tx = 0;
+    this.ty = 0;
+
+    return this;
+};
+
+/**
+ * Creates a new Matrix object with the same values as this one.
+ *
+ * @return {Matrix} A copy of this matrix. Good for chaining method calls.
+ */
+Matrix.prototype.clone = function ()
+{
+    var matrix = new Matrix();
+    matrix.a = this.a;
+    matrix.b = this.b;
+    matrix.c = this.c;
+    matrix.d = this.d;
+    matrix.tx = this.tx;
+    matrix.ty = this.ty;
+
+    return matrix;
+};
+
+/**
+ * Changes the values of the given matrix to be the same as the ones in this matrix
+ *
+ * @return {Matrix} The matrix given in parameter with its values updated.
+ */
+Matrix.prototype.copy = function (matrix)
+{
+    matrix.a = this.a;
+    matrix.b = this.b;
+    matrix.c = this.c;
+    matrix.d = this.d;
+    matrix.tx = this.tx;
+    matrix.ty = this.ty;
+
+    return matrix;
+};
+
+/**
+ * A default (identity) matrix
+ */
+Matrix.IDENTITY = new Matrix();
+/**
+ * A temp matrix
+ */
+Matrix.TEMP_MATRIX = new Matrix();
+
+},{"./Point":31}],31:[function(require,module,exports){
+/**
+ * The Point object represents a location in a two-dimensional coordinate system, where x represents
+ * the horizontal axis and y represents the vertical axis.
+ *
+ * @class
+ * @memberof PIXI
+ * @param [x=0] {number} position of the point on the x axis
+ * @param [y=0] {number} position of the point on the y axis
+ */
+function Point(x, y)
+{
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.x = x || 0;
+
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.y = y || 0;
+}
+
+Point.prototype.constructor = Point;
+module.exports = Point;
+
+/**
+ * Creates a clone of this point
+ *
+ * @return {Point} a copy of the point
+ */
+Point.prototype.clone = function ()
+{
+    return new Point(this.x, this.y);
+};
+
+/**
+ * Copies x and y from the given point
+ *
+ * @param p {Point}
+ */
+Point.prototype.copy = function (p) {
+    this.set(p.x, p.y);
+};
+
+/**
+ * Returns true if the given point is equal to this point
+ *
+ * @param p {Point}
+ * @returns {boolean}
+ */
+Point.prototype.equals = function (p) {
+    return (p.x === this.x) && (p.y === this.y);
+};
+
+/**
+ * Sets the point to a new x and y position.
+ * If y is omitted, both x and y will be set to x.
+ *
+ * @param [x=0] {number} position of the point on the x axis
+ * @param [y=0] {number} position of the point on the y axis
+ */
+Point.prototype.set = function (x, y)
+{
+    this.x = x || 0;
+    this.y = y || ( (y !== 0) ? this.x : 0 ) ;
+};
+
+},{}],32:[function(require,module,exports){
+module.exports = {
+    Point:      require('./Point'),
+    Matrix:     require('./Matrix'),
+
+    Circle:     require('./shapes/Circle'),
+    Ellipse:    require('./shapes/Ellipse'),
+    Polygon:    require('./shapes/Polygon'),
+    Rectangle:  require('./shapes/Rectangle'),
+    RoundedRectangle: require('./shapes/RoundedRectangle')
+};
+
+},{"./Matrix":30,"./Point":31,"./shapes/Circle":33,"./shapes/Ellipse":34,"./shapes/Polygon":35,"./shapes/Rectangle":36,"./shapes/RoundedRectangle":37}],33:[function(require,module,exports){
+var Rectangle = require('./Rectangle'),
+    CONST = require('../../const');
+
+/**
+ * The Circle object can be used to specify a hit area for displayObjects
+ *
+ * @class
+ * @memberof PIXI
+ * @param x {number} The X coordinate of the center of this circle
+ * @param y {number} The Y coordinate of the center of this circle
+ * @param radius {number} The radius of the circle
+ */
+function Circle(x, y, radius)
+{
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.x = x || 0;
+
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.y = y || 0;
+
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.radius = radius || 0;
+
+    /**
+     * The type of the object, mainly used to avoid `instanceof` checks
+     *
+     * @member {number}
+     */
+    this.type = CONST.SHAPES.CIRC;
+}
+
+Circle.prototype.constructor = Circle;
+module.exports = Circle;
+
+/**
+ * Creates a clone of this Circle instance
+ *
+ * @return {Circle} a copy of the Circle
+ */
+Circle.prototype.clone = function ()
+{
+    return new Circle(this.x, this.y, this.radius);
+};
+
+/**
+ * Checks whether the x and y coordinates given are contained within this circle
+ *
+ * @param x {number} The X coordinate of the point to test
+ * @param y {number} The Y coordinate of the point to test
+ * @return {boolean} Whether the x/y coordinates are within this Circle
+ */
+Circle.prototype.contains = function (x, y)
+{
+    if (this.radius <= 0)
+    {
+        return false;
+    }
+
+    var dx = (this.x - x),
+        dy = (this.y - y),
+        r2 = this.radius * this.radius;
+
+    dx *= dx;
+    dy *= dy;
+
+    return (dx + dy <= r2);
+};
+
+/**
+* Returns the framing rectangle of the circle as a Rectangle object
+*
+* @return {Rectangle} the framing rectangle
+*/
+Circle.prototype.getBounds = function ()
+{
+    return new Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2);
+};
+
+},{"../../const":22,"./Rectangle":36}],34:[function(require,module,exports){
+var Rectangle = require('./Rectangle'),
+    CONST = require('../../const');
+
+/**
+ * The Ellipse object can be used to specify a hit area for displayObjects
+ *
+ * @class
+ * @memberof PIXI
+ * @param x {number} The X coordinate of the center of the ellipse
+ * @param y {number} The Y coordinate of the center of the ellipse
+ * @param width {number} The half width of this ellipse
+ * @param height {number} The half height of this ellipse
+ */
+function Ellipse(x, y, width, height)
+{
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.x = x || 0;
+
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.y = y || 0;
+
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.width = width || 0;
+
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.height = height || 0;
+
+    /**
+     * The type of the object, mainly used to avoid `instanceof` checks
+     *
+     * @member {number}
+     */
+    this.type = CONST.SHAPES.ELIP;
+}
+
+Ellipse.prototype.constructor = Ellipse;
+module.exports = Ellipse;
+
+/**
+ * Creates a clone of this Ellipse instance
+ *
+ * @return {Ellipse} a copy of the ellipse
+ */
+Ellipse.prototype.clone = function ()
+{
+    return new Ellipse(this.x, this.y, this.width, this.height);
+};
+
+/**
+ * Checks whether the x and y coordinates given are contained within this ellipse
+ *
+ * @param x {number} The X coordinate of the point to test
+ * @param y {number} The Y coordinate of the point to test
+ * @return {boolean} Whether the x/y coords are within this ellipse
+ */
+Ellipse.prototype.contains = function (x, y)
+{
+    if (this.width <= 0 || this.height <= 0)
+    {
+        return false;
+    }
+
+    //normalize the coords to an ellipse with center 0,0
+    var normx = ((x - this.x) / this.width),
+        normy = ((y - this.y) / this.height);
+
+    normx *= normx;
+    normy *= normy;
+
+    return (normx + normy <= 1);
+};
+
+/**
+ * Returns the framing rectangle of the ellipse as a Rectangle object
+ *
+ * @return {Rectangle} the framing rectangle
+ */
+Ellipse.prototype.getBounds = function ()
+{
+    return new Rectangle(this.x - this.width, this.y - this.height, this.width, this.height);
+};
+
+},{"../../const":22,"./Rectangle":36}],35:[function(require,module,exports){
+var Point = require('../Point'),
+    CONST = require('../../const');
+
+/**
+ * @class
+ * @memberof PIXI
+ * @param points {Point[]|number[]|...Point|...number} This can be an array of Points that form the polygon,
+ *      a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be
+ *      all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the
+ *      arguments passed can be flat x,y values e.g. `new Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are
+ *      Numbers.
+ */
+function Polygon(points_)
+{
+    // prevents an argument assignment deopt
+    // see section 3.1: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments
+    var points = points_;
+
+    //if points isn't an array, use arguments as the array
+    if (!Array.isArray(points))
+    {
+        // prevents an argument leak deopt
+        // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments
+        points = new Array(arguments.length);
+
+        for (var a = 0; a < points.length; ++a) {
+            points[a] = arguments[a];
+        }
+    }
+
+    // if this is an array of points, convert it to a flat array of numbers
+    if (points[0] instanceof Point)
+    {
+        var p = [];
+        for (var i = 0, il = points.length; i < il; i++)
+        {
+            p.push(points[i].x, points[i].y);
+        }
+
+        points = p;
+    }
+
+    this.closed = true;
+
+    /**
+     * An array of the points of this polygon
+     *
+     * @member {number[]}
+     */
+    this.points = points;
+
+    /**
+     * The type of the object, mainly used to avoid `instanceof` checks
+     *
+     * @member {number}
+     */
+    this.type = CONST.SHAPES.POLY;
+}
+
+Polygon.prototype.constructor = Polygon;
+module.exports = Polygon;
+
+/**
+ * Creates a clone of this polygon
+ *
+ * @return {Polygon} a copy of the polygon
+ */
+Polygon.prototype.clone = function ()
+{
+    return new Polygon(this.points.slice());
+};
+
+/**
+ * Checks whether the x and y coordinates passed to this function are contained within this polygon
+ *
+ * @param x {number} The X coordinate of the point to test
+ * @param y {number} The Y coordinate of the point to test
+ * @return {boolean} Whether the x/y coordinates are within this polygon
+ */
+Polygon.prototype.contains = function (x, y)
+{
+    var inside = false;
+
+    // use some raycasting to test hits
+    // https://github.com/substack/point-in-polygon/blob/master/index.js
+    var length = this.points.length / 2;
+
+    for (var i = 0, j = length - 1; i < length; j = i++)
+    {
+        var xi = this.points[i * 2], yi = this.points[i * 2 + 1],
+            xj = this.points[j * 2], yj = this.points[j * 2 + 1],
+            intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
+
+        if (intersect)
+        {
+            inside = !inside;
+        }
+    }
+
+    return inside;
+};
+
+},{"../../const":22,"../Point":31}],36:[function(require,module,exports){
+var CONST = require('../../const');
+
+/**
+ * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height.
+ *
+ * @class
+ * @memberof PIXI
+ * @param x {number} The X coordinate of the upper-left corner of the rectangle
+ * @param y {number} The Y coordinate of the upper-left corner of the rectangle
+ * @param width {number} The overall width of this rectangle
+ * @param height {number} The overall height of this rectangle
+ */
+function Rectangle(x, y, width, height)
+{
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.x = x || 0;
+
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.y = y || 0;
+
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.width = width || 0;
+
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.height = height || 0;
+
+    /**
+     * The type of the object, mainly used to avoid `instanceof` checks
+     *
+     * @member {number}
+     */
+    this.type = CONST.SHAPES.RECT;
+}
+
+Rectangle.prototype.constructor = Rectangle;
+module.exports = Rectangle;
+
+/**
+ * A constant empty rectangle.
+ *
+ * @static
+ * @constant
+ */
+Rectangle.EMPTY = new Rectangle(0, 0, 0, 0);
+
+
+/**
+ * Creates a clone of this Rectangle
+ *
+ * @return {Rectangle} a copy of the rectangle
+ */
+Rectangle.prototype.clone = function ()
+{
+    return new Rectangle(this.x, this.y, this.width, this.height);
+};
+
+/**
+ * Checks whether the x and y coordinates given are contained within this Rectangle
+ *
+ * @param x {number} The X coordinate of the point to test
+ * @param y {number} The Y coordinate of the point to test
+ * @return {boolean} Whether the x/y coordinates are within this Rectangle
+ */
+Rectangle.prototype.contains = function (x, y)
+{
+    if (this.width <= 0 || this.height <= 0)
+    {
+        return false;
+    }
+
+    if (x >= this.x && x < this.x + this.width)
+    {
+        if (y >= this.y && y < this.y + this.height)
+        {
+            return true;
+        }
+    }
+
+    return false;
+};
+
+},{"../../const":22}],37:[function(require,module,exports){
+var CONST = require('../../const');
+
+/**
+ * The Rounded Rectangle object is an area that has nice rounded corners, as indicated by its top-left corner point (x, y) and by its width and its height and its radius.
+ *
+ * @class
+ * @memberof PIXI
+ * @param x {number} The X coordinate of the upper-left corner of the rounded rectangle
+ * @param y {number} The Y coordinate of the upper-left corner of the rounded rectangle
+ * @param width {number} The overall width of this rounded rectangle
+ * @param height {number} The overall height of this rounded rectangle
+ * @param radius {number} Controls the radius of the rounded corners
+ */
+function RoundedRectangle(x, y, width, height, radius)
+{
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.x = x || 0;
+
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.y = y || 0;
+
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.width = width || 0;
+
+    /**
+     * @member {number}
+     * @default 0
+     */
+    this.height = height || 0;
+
+    /**
+     * @member {number}
+     * @default 20
+     */
+    this.radius = radius || 20;
+
+    /**
+     * The type of the object, mainly used to avoid `instanceof` checks
+     *
+     * @member {number}
+     */
+    this.type = CONST.SHAPES.RREC;
+}
+
+RoundedRectangle.prototype.constructor = RoundedRectangle;
+module.exports = RoundedRectangle;
+
+/**
+ * Creates a clone of this Rounded Rectangle
+ *
+ * @return {RoundedRectangle} a copy of the rounded rectangle
+ */
+RoundedRectangle.prototype.clone = function ()
+{
+    return new RoundedRectangle(this.x, this.y, this.width, this.height, this.radius);
+};
+
+/**
+ * Checks whether the x and y coordinates given are contained within this Rounded Rectangle
+ *
+ * @param x {number} The X coordinate of the point to test
+ * @param y {number} The Y coordinate of the point to test
+ * @return {boolean} Whether the x/y coordinates are within this Rounded Rectangle
+ */
+RoundedRectangle.prototype.contains = function (x, y)
+{
+    if (this.width <= 0 || this.height <= 0)
+    {
+        return false;
+    }
+
+    if (x >= this.x && x <= this.x + this.width)
+    {
+        if (y >= this.y && y <= this.y + this.height)
+        {
+            return true;
+        }
+    }
+
+    return false;
+};
+
+},{"../../const":22}],38:[function(require,module,exports){
+var Container = require('../display/Container'),
+    CONST = require('../const');
+
+/**
+ * The ParticleContainer class is a really fast version of the Container built solely for speed,
+ * so use when you need a lot of sprites or particles. The tradeoff of the ParticleContainer is that advanced
+ * functionality will not work. ParticleContainer implements only the basic object transform (position, scale, rotation).
+ * Any other functionality like tinting, masking, etc will not work on sprites in this batch.
+ *
+ * It's extremely easy to use :
+ *
+ * ```js
+ * var container = new ParticleContainer();
+ *
+ * for (var i = 0; i < 100; ++i)
+ * {
+ *     var sprite = new PIXI.Sprite.fromImage("myImage.png");
+ *     container.addChild(sprite);
+ * }
+ * ```
+ *
+ * And here you have a hundred sprites that will be renderer at the speed of light.
+ *
+ * @class
+ * @extends PIXI.Container
+ * @memberof PIXI
+ *
+ * @param [size=15000] {number} The number of images in the SpriteBatch before it flushes.
+ * @param [properties] {object} The properties of children that should be uploaded to the gpu and applied.
+ * @param [properties.scale=false] {boolean} When true, scale be uploaded and applied.
+ * @param [properties.position=true] {boolean} When true, position be uploaded and applied.
+ * @param [properties.rotation=false] {boolean} When true, rotation be uploaded and applied.
+ * @param [properties.uvs=false] {boolean} When true, uvs be uploaded and applied.
+ * @param [properties.alpha=false] {boolean} When true, alpha be uploaded and applied.
+ */
+function ParticleContainer(size, properties)
+{
+    Container.call(this);
+
+    /**
+     * Set properties to be dynamic (true) / static (false)
+     *
+     * @member {array}
+     * @private
+     */
+    this._properties = [false, true, false, false, false];
+
+    /**
+     * @member {number}
+     * @private
+     */
+    this._size = size || 15000;
+
+    /**
+     * @member {WebGLBuffer}
+     * @private
+     */
+    this._buffers = null;
+
+    /**
+     * @member {boolean}
+     * @private
+     */
+    this._updateStatic = false;
+
+    /**
+     * @member {boolean}
+     *
+     */
+    this.interactiveChildren = false;
+
+    /**
+     * The blend mode to be applied to the sprite. Apply a value of blendModes.NORMAL to reset the blend mode.
+     *
+     * @member {number}
+     * @default CONST.BLEND_MODES.NORMAL;
+     */
+    this.blendMode = CONST.BLEND_MODES.NORMAL;
+
+    /**
+     * Used for canvas renderering. If true then the elements will be positioned at the nearest pixel. This provides a nice speed boost.
+     *
+     * @member {boolean}
+     * @default true;
+     */
+    this.roundPixels = true;
+
+    this.setProperties(properties);
+}
+
+ParticleContainer.prototype = Object.create(Container.prototype);
+ParticleContainer.prototype.constructor = ParticleContainer;
+module.exports = ParticleContainer;
+
+/**
+ * Sets the private properties array to dynamic / static based on the passed properties object
+ *
+ * @param properties {object} The properties to be uploaded
+ */
+ParticleContainer.prototype.setProperties = function(properties)
+{
+    if ( properties ) {
+        this._properties[0] = 'scale' in properties ? !!properties.scale : this._properties[0];
+        this._properties[1] = 'position' in properties ? !!properties.position : this._properties[1];
+        this._properties[2] = 'rotation' in properties ? !!properties.rotation : this._properties[2];
+        this._properties[3] = 'uvs' in properties ? !!properties.uvs : this._properties[3];
+        this._properties[4] = 'alpha' in properties ? !!properties.alpha : this._properties[4];
+    }
+};
+
+/**
+ * Updates the object transform for rendering
+ *
+ * @private
+ */
+ParticleContainer.prototype.updateTransform = function ()
+{
+
+    // TODO don't need to!
+    this.displayObjectUpdateTransform();
+    //  PIXI.Container.prototype.updateTransform.call( this );
+};
+
+/**
+ * Renders the container using the WebGL renderer
+ *
+ * @param renderer {WebGLRenderer} The webgl renderer
+ * @private
+ */
+ParticleContainer.prototype.renderWebGL = function (renderer)
+{
+    if (!this.visible || this.worldAlpha <= 0 || !this.children.length || !this.renderable)
+    {
+        return;
+    }
+
+    renderer.setObjectRenderer( renderer.plugins.particle );
+    renderer.plugins.particle.render( this );
+};
+
+/**
+ * Adds a child to this particle container at a specified index. If the index is out of bounds an error will be thrown
+ *
+ * @param child {DisplayObject} The child to add
+ * @param index {Number} The index to place the child in
+ * @return {DisplayObject} The child that was added.
+ */
+ParticleContainer.prototype.addChildAt = function (child, index)
+{
+    // prevent adding self as child
+    if (child === this)
+    {
+        return child;
+    }
+
+    if (index >= 0 && index <= this.children.length)
+    {
+        if (child.parent)
+        {
+            child.parent.removeChild(child);
+        }
+
+        child.parent = this;
+
+        this.children.splice(index, 0, child);
+
+        this._updateStatic = true;
+
+        return child;
+    }
+    else
+    {
+        throw new Error(child + 'addChildAt: The index '+ index +' supplied is out of bounds ' + this.children.length);
+    }
+};
+
+/**
+ * Removes a child from the specified index position.
+ *
+ * @param index {Number} The index to get the child from
+ * @return {DisplayObject} The child that was removed.
+ */
+ParticleContainer.prototype.removeChildAt = function (index)
+{
+    var child = this.getChildAt(index);
+
+    child.parent = null;
+    this.children.splice(index, 1);
+    this._updateStatic = true;
+
+    return child;
+};
+
+/**
+ * Renders the object using the Canvas renderer
+ *
+ * @param renderer {CanvasRenderer} The canvas renderer
+ * @private
+ */
+ParticleContainer.prototype.renderCanvas = function (renderer)
+{
+    if (!this.visible || this.worldAlpha <= 0 || !this.children.length || !this.renderable)
+    {
+        return;
+    }
+
+    var context = renderer.context;
+    var transform = this.worldTransform;
+    var isRotated = true;
+
+    var positionX = 0;
+    var positionY = 0;
+
+    var finalWidth = 0;
+    var finalHeight = 0;
+
+    context.globalAlpha = this.worldAlpha;
+
+    this.displayObjectUpdateTransform();
+
+    for (var i = 0; i < this.children.length; ++i)
+    {
+        var child = this.children[i];
+
+        if (!child.visible)
+        {
+            continue;
+        }
+
+        var frame = child.texture.frame;
+
+        context.globalAlpha = this.worldAlpha * child.alpha;
+
+        if (child.rotation % (Math.PI * 2) === 0)
+        {
+            // this is the fastest  way to optimise! - if rotation is 0 then we can avoid any kind of setTransform call
+            if (isRotated)
+            {
+                context.setTransform(
+                    transform.a,
+                    transform.b,
+                    transform.c,
+                    transform.d,
+                    transform.tx,
+                    transform.ty
+                );
+
+                isRotated = false;
+            }
+
+            positionX = ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x  + 0.5);
+            positionY = ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y  + 0.5);
+
+            finalWidth = frame.width * child.scale.x;
+            finalHeight = frame.height * child.scale.y;
+
+        }
+        else
+        {
+            if (!isRotated)
+            {
+                isRotated = true;
+            }
+
+            child.displayObjectUpdateTransform();
+
+            var childTransform = child.worldTransform;
+
+            if (renderer.roundPixels)
+            {
+                context.setTransform(
+                    childTransform.a,
+                    childTransform.b,
+                    childTransform.c,
+                    childTransform.d,
+                    childTransform.tx | 0,
+                    childTransform.ty | 0
+                );
+            }
+            else
+            {
+                context.setTransform(
+                    childTransform.a,
+                    childTransform.b,
+                    childTransform.c,
+                    childTransform.d,
+                    childTransform.tx,
+                    childTransform.ty
+                );
+            }
+
+            positionX = ((child.anchor.x) * (-frame.width) + 0.5);
+            positionY = ((child.anchor.y) * (-frame.height) + 0.5);
+
+            finalWidth = frame.width;
+            finalHeight = frame.height;
+        }
+
+        context.drawImage(
+            child.texture.baseTexture.source,
+            frame.x,
+            frame.y,
+            frame.width,
+            frame.height,
+            positionX,
+            positionY,
+            finalWidth,
+            finalHeight
+        );
+    }
+};
+
+/**
+ * Destroys the container
+ *
+ * @param [destroyChildren=false] {boolean} if set to true, all the children will have their destroy method called as well
+ */
+ParticleContainer.prototype.destroy = function () {
+    Container.prototype.destroy.apply(this, arguments);
+
+    if (this._buffers) {
+        for (var i = 0; i < this._buffers.length; ++i) {
+            this._buffers.destroy();
+        }
+    }
+
+    this._properties = null;
+    this._buffers = null;
+};
+
+},{"../const":22,"../display/Container":23}],39:[function(require,module,exports){
+
+/**
+ * @author Mat Groves
+ *
+ * Big thanks to the very clever Matt DesLauriers <mattdesl> https://github.com/mattdesl/
+ * for creating the original pixi version!
+ * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now share 4 bytes on the vertex buffer
+ *
+ * Heavily inspired by LibGDX's ParticleBuffer:
+ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/ParticleBuffer.java
+ */
+
+/**
+ *
+ * @class
+ * @private
+ * @memberof PIXI
+ * @param renderer {WebGLRenderer} The renderer this sprite batch works for.
+ */
+function ParticleBuffer(gl, properties, size)
+{
+    /**
+     * the current WebGL drawing context
+     * @member {WebGLRenderingContext}
+     */
+    this.gl = gl;
+
+    /**
+     *
+     *
+     * @member {number}
+     */
+    this.vertSize = 2;
+
+    /**
+     *
+     *
+     * @member {number}
+     */
+    this.vertByteSize = this.vertSize * 4;
+
+    /**
+     * The number of images in the SpriteBatch before it flushes.
+     *
+     * @member {number}
+     */
+    this.size = size;
+
+    /**
+     *
+     *
+     * @member {Array}
+     */
+    this.dynamicProperties = [];
+
+    /**
+     *
+     *
+     * @member {Array}
+     */
+    this.staticProperties = [];
+
+    for (var i = 0; i < properties.length; i++)
+    {
+        var property = properties[i];
+
+        if(property.dynamic)
+        {
+            this.dynamicProperties.push(property);
+        }
+        else
+        {
+            this.staticProperties.push(property);
+        }
+    }
+
+    this.staticStride = 0;
+    this.staticBuffer = null;
+    this.staticData = null;
+
+    this.dynamicStride = 0;
+    this.dynamicBuffer = null;
+    this.dynamicData = null;
+
+    this.initBuffers();
+
+}
+
+ParticleBuffer.prototype.constructor = ParticleBuffer;
+module.exports = ParticleBuffer;
+
+/**
+ * Sets up the renderer context and necessary buffers.
+ *
+ * @private
+ * @param gl {WebGLRenderingContext} the current WebGL drawing context
+ */
+ParticleBuffer.prototype.initBuffers = function ()
+{
+    var gl = this.gl;
+    var i;
+    var property;
+
+    var dynamicOffset = 0;
+    this.dynamicStride = 0;
+
+    for (i = 0; i < this.dynamicProperties.length; i++)
+    {
+        property = this.dynamicProperties[i];
+
+        property.offset = dynamicOffset;
+        dynamicOffset += property.size;
+        this.dynamicStride += property.size;
+    }
+
+    this.dynamicData = new Float32Array( this.size * this.dynamicStride * 4);
+    this.dynamicBuffer = gl.createBuffer();
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, this.dynamicData, gl.DYNAMIC_DRAW);
+
+
+    // static //
+    var staticOffset = 0;
+    this.staticStride = 0;
+
+    for (i = 0; i < this.staticProperties.length; i++)
+    {
+        property = this.staticProperties[i];
+
+        property.offset = staticOffset;
+        staticOffset += property.size;
+        this.staticStride += property.size;
+    }
+
+    this.staticData = new Float32Array( this.size * this.staticStride * 4);
+    this.staticBuffer = gl.createBuffer();
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.staticBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, this.staticData, gl.DYNAMIC_DRAW);
+
+};
+
+ParticleBuffer.prototype.uploadDynamic = function(children, startIndex, amount)
+{
+    var gl = this.gl;
+
+    for (var i = 0; i < this.dynamicProperties.length; i++)
+    {
+        var property = this.dynamicProperties[i];
+        property.uploadFunction(children, startIndex, amount, this.dynamicData, this.dynamicStride, property.offset);
+    }
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer);
+    gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.dynamicData);
+};
+
+ParticleBuffer.prototype.uploadStatic = function(children, startIndex, amount)
+{
+    var gl = this.gl;
+
+    for (var i = 0; i < this.staticProperties.length; i++)
+    {
+        var property = this.staticProperties[i];
+        property.uploadFunction(children, startIndex, amount, this.staticData, this.staticStride, property.offset);
+    }
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.staticBuffer);
+    gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.staticData);
+};
+
+/**
+ * Starts a new sprite batch.
+ *
+ */
+ParticleBuffer.prototype.bind = function ()
+{
+    var gl = this.gl;
+    var i, property;
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.dynamicBuffer);
+
+    for (i = 0; i < this.dynamicProperties.length; i++)
+    {
+        property = this.dynamicProperties[i];
+        gl.vertexAttribPointer(property.attribute, property.size, gl.FLOAT, false, this.dynamicStride * 4, property.offset * 4);
+    }
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.staticBuffer);
+
+    for (i = 0; i < this.staticProperties.length; i++)
+    {
+        property = this.staticProperties[i];
+        gl.vertexAttribPointer(property.attribute, property.size, gl.FLOAT, false, this.staticStride * 4, property.offset * 4);
+    }
+};
+
+/**
+ * Destroys the SpriteBatch.
+ *
+ */
+ParticleBuffer.prototype.destroy = function ()
+{
+    this.dynamicProperties = null;
+    this.dynamicData = null;
+    this.gl.deleteBuffer(this.dynamicBuffer);
+
+    this.staticProperties = null;
+    this.staticData = null;
+    this.gl.deleteBuffer(this.staticBuffer);
+};
+
+},{}],40:[function(require,module,exports){
+var ObjectRenderer = require('../../renderers/webgl/utils/ObjectRenderer'),
+    WebGLRenderer = require('../../renderers/webgl/WebGLRenderer'),
+    ParticleShader = require('./ParticleShader'),
+    ParticleBuffer = require('./ParticleBuffer'),
+    math            = require('../../math');
+
+/**
+ * @author Mat Groves
+ *
+ * Big thanks to the very clever Matt DesLauriers <mattdesl> https://github.com/mattdesl/
+ * for creating the original pixi version!
+ * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now share 4 bytes on the vertex buffer
+ *
+ * Heavily inspired by LibGDX's ParticleRenderer:
+ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/ParticleRenderer.java
+ */
+
+/**
+ *
+ * @class
+ * @private
+ * @memberof PIXI
+ * @param renderer {WebGLRenderer} The renderer this sprite batch works for.
+ */
+function ParticleRenderer(renderer)
+{
+    ObjectRenderer.call(this, renderer);
+
+    /**
+     * The number of images in the Particle before it flushes.
+     *
+     * @member {number}
+     */
+    this.size = 15000;//CONST.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop
+
+    var numIndices = this.size * 6;
+
+    /**
+     * Holds the indices
+     *
+     * @member {Uint16Array}
+     */
+    this.indices = new Uint16Array(numIndices);
+
+    for (var i=0, j=0; i < numIndices; i += 6, j += 4)
+    {
+        this.indices[i + 0] = j + 0;
+        this.indices[i + 1] = j + 1;
+        this.indices[i + 2] = j + 2;
+        this.indices[i + 3] = j + 0;
+        this.indices[i + 4] = j + 2;
+        this.indices[i + 5] = j + 3;
+    }
+
+    /**
+     * The default shader that is used if a sprite doesn't have a more specific one.
+     *
+     * @member {Shader}
+     */
+    this.shader = null;
+
+    this.indexBuffer = null;
+
+    this.properties = null;
+
+    this.tempMatrix = new math.Matrix();
+}
+
+ParticleRenderer.prototype = Object.create(ObjectRenderer.prototype);
+ParticleRenderer.prototype.constructor = ParticleRenderer;
+module.exports = ParticleRenderer;
+
+WebGLRenderer.registerPlugin('particle', ParticleRenderer);
+
+/**
+ * When there is a WebGL context change
+ *
+ * @private
+ *
+ */
+ParticleRenderer.prototype.onContextChange = function ()
+{
+    var gl = this.renderer.gl;
+
+    // setup default shader
+    this.shader = new ParticleShader(this.renderer.shaderManager);
+
+    this.indexBuffer = gl.createBuffer();
+
+    // 65535 is max index, so 65535 / 6 = 10922.
+
+    //upload the index data
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW);
+
+    this.properties = [
+        // verticesData
+        {
+            attribute:this.shader.attributes.aVertexPosition,
+            dynamic:false,
+            size:2,
+            uploadFunction:this.uploadVertices,
+            offset:0
+        },
+        // positionData
+        {
+            attribute:this.shader.attributes.aPositionCoord,
+            dynamic:true,
+            size:2,
+            uploadFunction:this.uploadPosition,
+            offset:0
+        },
+        // rotationData
+        {
+            attribute:this.shader.attributes.aRotation,
+            dynamic:false,
+            size:1,
+            uploadFunction:this.uploadRotation,
+            offset:0
+        },
+        // uvsData
+        {
+            attribute:this.shader.attributes.aTextureCoord,
+            dynamic:false,
+            size:2,
+            uploadFunction:this.uploadUvs,
+            offset:0
+        },
+        // alphaData
+        {
+            attribute:this.shader.attributes.aColor,
+            dynamic:false,
+            size:1,
+            uploadFunction:this.uploadAlpha,
+            offset:0
+        }
+    ];
+};
+
+/**
+ * Starts a new sprite batch.
+ *
+ */
+ParticleRenderer.prototype.start = function ()
+{
+    var gl = this.renderer.gl;
+
+    // bind the main texture
+    gl.activeTexture(gl.TEXTURE0);
+
+    // bind the buffers
+
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+
+    var shader = this.shader;
+
+    this.renderer.shaderManager.setShader(shader);
+};
+
+
+/**
+ * Renders the sprite object.
+ *
+ * @param container {Container|Sprite} the sprite to render using this ParticleRenderer
+ */
+ParticleRenderer.prototype.render = function ( container )
+{
+    var children = container.children,
+        totalChildren = children.length,
+        maxSize = container._size;
+
+    if(totalChildren === 0)
+    {
+        return;
+    }
+    else if(totalChildren > maxSize)
+    {
+        totalChildren = maxSize;
+    }
+
+    if(!container._buffers)
+    {
+        container._buffers = this.generateBuffers( container );
+    }
+
+
+
+    // if the uvs have not updated then no point rendering just yet!
+    this.renderer.blendModeManager.setBlendMode(container.blendMode);
+
+    var gl = this.renderer.gl;
+
+    var m =  container.worldTransform.copy( this.tempMatrix );
+    m.prepend( this.renderer.currentRenderTarget.projectionMatrix );
+    gl.uniformMatrix3fv(this.shader.uniforms.projectionMatrix._location, false, m.toArray(true));
+    gl.uniform1f(this.shader.uniforms.uAlpha._location, container.worldAlpha);
+
+
+    // if this variable is true then we will upload the static contents as well as the dynamic contens
+    var uploadStatic = container._updateStatic;
+
+    // make sure the texture is bound..
+    var baseTexture = children[0]._texture.baseTexture;
+
+    if (!baseTexture._glTextures[gl.id])
+    {
+        // if the texture has not updated then lets not upload any static properties
+        if(!this.renderer.updateTexture(baseTexture))
+        {
+            return;
+        }
+
+        if(!this.properties[0].dynamic || !this.properties[3].dynamic)
+        {
+            uploadStatic = true;
+        }
+    }
+    else
+    {
+        gl.bindTexture(gl.TEXTURE_2D, baseTexture._glTextures[gl.id]);
+    }
+
+    // now lets upload and render the buffers..
+    var j = 0;
+    for (var i = 0; i < totalChildren; i+=this.size)
+    {
+         var amount = ( totalChildren - i);
+        if(amount > this.size)
+        {
+            amount = this.size;
+        }
+
+        var buffer = container._buffers[j++];
+
+        // we always upload the dynamic
+        buffer.uploadDynamic(children, i, amount);
+
+        // we only upload the static content when we have to!
+        if(uploadStatic)
+        {
+            buffer.uploadStatic(children, i, amount);
+        }
+
+        // bind the buffer
+        buffer.bind( this.shader );
+
+         // now draw those suckas!
+        gl.drawElements(gl.TRIANGLES, amount * 6, gl.UNSIGNED_SHORT, 0);
+        this.renderer.drawCount++;
+    }
+
+    container._updateStatic = false;
+};
+
+/**
+ * Creates one particle buffer for each child in the container we want to render and updates internal properties
+ *
+ * @param container {Container|Sprite} the sprite to render using this ParticleRenderer
+ */
+ParticleRenderer.prototype.generateBuffers = function ( container )
+{
+    var gl = this.renderer.gl,
+        buffers = [],
+        size = container._size,
+        i;
+
+    // update the properties to match the state of the container..
+    for (i = 0; i < container._properties.length; i++)
+    {
+        this.properties[i].dynamic = container._properties[i];
+    }
+
+    for (i = 0; i < size; i += this.size)
+    {
+        buffers.push( new ParticleBuffer(gl,  this.properties, this.size, this.shader) );
+    }
+
+    return buffers;
+};
+
+
+/**
+ *
+ * @param children {Array} the array of display objects to render
+ * @param startIndex {number} the index to start from in the children array
+ * @param amount {number} the amount of children that will have their vertices uploaded
+ * @param array {Array}
+ * @param stride {number}
+ * @param offset {number}
+ */
+ParticleRenderer.prototype.uploadVertices = function (children, startIndex, amount, array, stride, offset)
+{
+    var sprite,
+        texture,
+        trim,
+        sx,
+        sy,
+        w0, w1, h0, h1;
+
+    for (var i = 0; i < amount; i++) {
+
+        sprite = children[startIndex + i];
+        texture = sprite._texture;
+        sx = sprite.scale.x;
+        sy = sprite.scale.y;
+
+        if (texture.trim)
+        {
+            // if the sprite is trimmed then we need to add the extra space before transforming the sprite coords..
+            trim = texture.trim;
+
+            w1 = trim.x - sprite.anchor.x * trim.width;
+            w0 = w1 + texture.crop.width;
+
+            h1 = trim.y - sprite.anchor.y * trim.height;
+            h0 = h1 + texture.crop.height;
+        }
+        else
+        {
+            w0 = (texture._frame.width ) * (1-sprite.anchor.x);
+            w1 = (texture._frame.width ) * -sprite.anchor.x;
+
+            h0 = texture._frame.height * (1-sprite.anchor.y);
+            h1 = texture._frame.height * -sprite.anchor.y;
+        }
+
+        array[offset] = w1 * sx;
+        array[offset + 1] = h1 * sy;
+
+        array[offset + stride] = w0 * sx;
+        array[offset + stride + 1] = h1 * sy;
+
+        array[offset + stride * 2] = w0 * sx;
+        array[offset + stride * 2 + 1] = h0 * sy;
+
+        array[offset + stride * 3] = w1 * sx;
+        array[offset + stride * 3 + 1] = h0 * sy;
+
+        offset += stride * 4;
+    }
+
+};
+
+/**
+ *
+ * @param children {Array} the array of display objects to render
+ * @param startIndex {number} the index to start from in the children array
+ * @param amount {number} the amount of children that will have their positions uploaded
+ * @param array {Array}
+ * @param stride {number}
+ * @param offset {number}
+ */
+ParticleRenderer.prototype.uploadPosition = function (children,startIndex, amount, array, stride, offset)
+{
+    for (var i = 0; i < amount; i++)
+    {
+        var spritePosition = children[startIndex + i].position;
+
+        array[offset] = spritePosition.x;
+        array[offset + 1] = spritePosition.y;
+
+        array[offset + stride] = spritePosition.x;
+        array[offset + stride + 1] = spritePosition.y;
+
+        array[offset + stride * 2] = spritePosition.x;
+        array[offset + stride * 2 + 1] = spritePosition.y;
+
+        array[offset + stride * 3] = spritePosition.x;
+        array[offset + stride * 3 + 1] = spritePosition.y;
+
+        offset += stride * 4;
+    }
+
+};
+
+/**
+ *
+ * @param children {Array} the array of display objects to render
+ * @param startIndex {number} the index to start from in the children array
+ * @param amount {number} the amount of children that will have their rotation uploaded
+ * @param array {Array}
+ * @param stride {number}
+ * @param offset {number}
+ */
+ParticleRenderer.prototype.uploadRotation = function (children,startIndex, amount, array, stride, offset)
+{
+    for (var i = 0; i < amount; i++)
+    {
+        var spriteRotation = children[startIndex + i].rotation;
+
+
+        array[offset] = spriteRotation;
+        array[offset + stride] = spriteRotation;
+        array[offset + stride * 2] = spriteRotation;
+        array[offset + stride * 3] = spriteRotation;
+
+        offset += stride * 4;
+    }
+};
+
+/**
+ *
+ * @param children {Array} the array of display objects to render
+ * @param startIndex {number} the index to start from in the children array
+ * @param amount {number} the amount of children that will have their Uvs uploaded
+ * @param array {Array}
+ * @param stride {number}
+ * @param offset {number}
+ */
+ParticleRenderer.prototype.uploadUvs = function (children,startIndex, amount, array, stride, offset)
+{
+    for (var i = 0; i < amount; i++)
+    {
+        var textureUvs = children[startIndex + i]._texture._uvs;
+
+        if (textureUvs)
+        {
+            array[offset] = textureUvs.x0;
+            array[offset + 1] = textureUvs.y0;
+
+            array[offset + stride] = textureUvs.x1;
+            array[offset + stride + 1] = textureUvs.y1;
+
+            array[offset + stride * 2] = textureUvs.x2;
+            array[offset + stride * 2 + 1] = textureUvs.y2;
+
+            array[offset + stride * 3] = textureUvs.x3;
+            array[offset + stride * 3 + 1] = textureUvs.y3;
+
+            offset += stride * 4;
+        }
+        else
+        {
+            //TODO you know this can be easier!
+            array[offset] = 0;
+            array[offset + 1] = 0;
+
+            array[offset + stride] = 0;
+            array[offset + stride + 1] = 0;
+
+            array[offset + stride * 2] = 0;
+            array[offset + stride * 2 + 1] = 0;
+
+            array[offset + stride * 3] = 0;
+            array[offset + stride * 3 + 1] = 0;
+
+            offset += stride * 4;
+        }
+    }
+};
+
+/**
+ *
+ * @param children {Array} the array of display objects to render
+ * @param startIndex {number} the index to start from in the children array
+ * @param amount {number} the amount of children that will have their alpha uploaded
+ * @param array {Array}
+ * @param stride {number}
+ * @param offset {number}
+ */
+ParticleRenderer.prototype.uploadAlpha = function (children,startIndex, amount, array, stride, offset)
+{
+     for (var i = 0; i < amount; i++)
+     {
+        var spriteAlpha = children[startIndex + i].alpha;
+
+        array[offset] = spriteAlpha;
+        array[offset + stride] = spriteAlpha;
+        array[offset + stride * 2] = spriteAlpha;
+        array[offset + stride * 3] = spriteAlpha;
+
+        offset += stride * 4;
+    }
+};
+
+
+/**
+ * Destroys the Particle.
+ *
+ */
+ParticleRenderer.prototype.destroy = function ()
+{
+    if (this.renderer.gl) {
+        this.renderer.gl.deleteBuffer(this.indexBuffer);
+    }
+
+    ObjectRenderer.prototype.destroy.apply(this, arguments);
+
+    this.shader.destroy();
+
+    this.indices = null;
+    this.tempMatrix = null;
+};
+
+},{"../../math":32,"../../renderers/webgl/WebGLRenderer":48,"../../renderers/webgl/utils/ObjectRenderer":62,"./ParticleBuffer":39,"./ParticleShader":41}],41:[function(require,module,exports){
+var TextureShader = require('../../renderers/webgl/shaders/TextureShader');
+
+/**
+ * @class
+ * @extends PIXI.TextureShader
+ * @memberof PIXI
+ * @param shaderManager {ShaderManager} The webgl shader manager this shader works for.
+ */
+function ParticleShader(shaderManager)
+{
+    TextureShader.call(this,
+        shaderManager,
+        // vertex shader
+        [
+            'attribute vec2 aVertexPosition;',
+            'attribute vec2 aTextureCoord;',
+            'attribute float aColor;',
+
+            'attribute vec2 aPositionCoord;',
+            'attribute vec2 aScale;',
+            'attribute float aRotation;',
+
+            'uniform mat3 projectionMatrix;',
+
+            'varying vec2 vTextureCoord;',
+            'varying float vColor;',
+
+            'void main(void){',
+            '   vec2 v = aVertexPosition;',
+
+            '   v.x = (aVertexPosition.x) * cos(aRotation) - (aVertexPosition.y) * sin(aRotation);',
+            '   v.y = (aVertexPosition.x) * sin(aRotation) + (aVertexPosition.y) * cos(aRotation);',
+            '   v = v + aPositionCoord;',
+
+            '   gl_Position = vec4((projectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);',
+
+            '   vTextureCoord = aTextureCoord;',
+            '   vColor = aColor;',
+            '}'
+        ].join('\n'),
+        // hello
+         [
+            'precision lowp float;',
+
+            'varying vec2 vTextureCoord;',
+            'varying float vColor;',
+
+            'uniform sampler2D uSampler;',
+            'uniform float uAlpha;',
+
+            'void main(void){',
+            '   gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor * uAlpha ;',
+            '}'
+        ].join('\n'),
+        // custom uniforms
+        {
+            uAlpha:  { type: '1f', value: 1 }
+        },
+        // custom attributes
+        {
+            aPositionCoord: 0,
+           // aScale:         0,
+            aRotation:      0
+        }
+    );
+
+    // TEMP HACK
+
+}
+
+ParticleShader.prototype = Object.create(TextureShader.prototype);
+ParticleShader.prototype.constructor = ParticleShader;
+
+module.exports = ParticleShader;
+
+},{"../../renderers/webgl/shaders/TextureShader":61}],42:[function(require,module,exports){
+var utils = require('../utils'),
+    math = require('../math'),
+    CONST = require('../const'),
+    EventEmitter = require('eventemitter3');
+
+/**
+ * The CanvasRenderer draws the scene and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL.
+ * Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :)
+ *
+ * @class
+ * @memberof PIXI
+ * @param system {string} The name of the system this renderer is for.
+ * @param [width=800] {number} the width of the canvas view
+ * @param [height=600] {number} the height of the canvas view
+ * @param [options] {object} The optional renderer parameters
+ * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional
+ * @param [options.transparent=false] {boolean} If the render view is transparent, default false
+ * @param [options.autoResize=false] {boolean} If the render view is automatically resized, default false
+ * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment)
+ * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2
+ * @param [options.clearBeforeRender=true] {boolean} This sets if the CanvasRenderer will clear the canvas or
+ *      not before the new render pass.
+ */
+function SystemRenderer(system, width, height, options)
+{
+    EventEmitter.call(this);
+
+    utils.sayHello(system);
+
+    // prepare options
+    if (options)
+    {
+        for (var i in CONST.DEFAULT_RENDER_OPTIONS)
+        {
+            if (typeof options[i] === 'undefined')
+            {
+                options[i] = CONST.DEFAULT_RENDER_OPTIONS[i];
+            }
+        }
+    }
+    else
+    {
+        options = CONST.DEFAULT_RENDER_OPTIONS;
+    }
+
+    /**
+     * The type of the renderer.
+     *
+     * @member {RENDERER_TYPE}
+     * @default CONT.RENDERER_TYPE.UNKNOWN
+     */
+    this.type = CONST.RENDERER_TYPE.UNKNOWN;
+
+    /**
+     * The width of the canvas view
+     *
+     * @member {number}
+     * @default 800
+     */
+    this.width = width || 800;
+
+    /**
+     * The height of the canvas view
+     *
+     * @member {number}
+     * @default 600
+     */
+    this.height = height || 600;
+
+    /**
+     * The canvas element that everything is drawn to
+     *
+     * @member {HTMLCanvasElement}
+     */
+    this.view = options.view || document.createElement('canvas');
+
+    /**
+     * The resolution of the renderer
+     *
+     * @member {number}
+     * @default 1
+     */
+    this.resolution = options.resolution;
+
+    /**
+     * Whether the render view is transparent
+     *
+     * @member {boolean}
+     */
+    this.transparent = options.transparent;
+
+    /**
+     * Whether the render view should be resized automatically
+     *
+     * @member {boolean}
+     */
+    this.autoResize = options.autoResize || false;
+
+    /**
+     * Tracks the blend modes useful for this renderer.
+     *
+     * @member {object<string, mixed>}
+     */
+    this.blendModes = null;
+
+    /**
+     * The value of the preserveDrawingBuffer flag affects whether or not the contents of the stencil buffer is retained after rendering.
+     *
+     * @member {boolean}
+     */
+    this.preserveDrawingBuffer = options.preserveDrawingBuffer;
+
+    /**
+     * This sets if the CanvasRenderer will clear the canvas or not before the new render pass.
+     * If the scene is NOT transparent Pixi will use a canvas sized fillRect operation every frame to set the canvas background color.
+     * If the scene is transparent Pixi will use clearRect to clear the canvas every frame.
+     * Disable this by setting this to false. For example if your game has a canvas filling background image you often don't need this set.
+     *
+     * @member {boolean}
+     * @default
+     */
+    this.clearBeforeRender = options.clearBeforeRender;
+
+    /**
+     * The background color as a number.
+     *
+     * @member {number}
+     * @private
+     */
+    this._backgroundColor = 0x000000;
+
+    /**
+     * The background color as an [R, G, B] array.
+     *
+     * @member {number[]}
+     * @private
+     */
+    this._backgroundColorRgb = [0, 0, 0];
+
+    /**
+     * The background color as a string.
+     *
+     * @member {string}
+     * @private
+     */
+    this._backgroundColorString = '#000000';
+
+    this.backgroundColor = options.backgroundColor || this._backgroundColor; // run bg color setter
+
+    /**
+     * This temporary display object used as the parent of the currently being rendered item
+     * @member {DisplayObject}
+     * @private
+     */
+    this._tempDisplayObjectParent = {worldTransform:new math.Matrix(), worldAlpha:1, children:[]};
+
+    //
+    this._lastObjectRendered = this._tempDisplayObjectParent;
+}
+
+// constructor
+SystemRenderer.prototype = Object.create(EventEmitter.prototype);
+SystemRenderer.prototype.constructor = SystemRenderer;
+module.exports = SystemRenderer;
+
+Object.defineProperties(SystemRenderer.prototype, {
+    /**
+     * The background color to fill if not transparent
+     *
+     * @member {number}
+     * @memberof SystemRenderer#
+     */
+    backgroundColor:
+    {
+        get: function ()
+        {
+            return this._backgroundColor;
+        },
+        set: function (val)
+        {
+            this._backgroundColor = val;
+            this._backgroundColorString = utils.hex2string(val);
+            utils.hex2rgb(val, this._backgroundColorRgb);
+        }
+    }
+});
+
+/**
+ * Resizes the canvas view to the specified width and height
+ *
+ * @param width {number} the new width of the canvas view
+ * @param height {number} the new height of the canvas view
+ */
+SystemRenderer.prototype.resize = function (width, height) {
+    this.width = width * this.resolution;
+    this.height = height * this.resolution;
+
+    this.view.width = this.width;
+    this.view.height = this.height;
+
+    if (this.autoResize)
+    {
+        this.view.style.width = this.width / this.resolution + 'px';
+        this.view.style.height = this.height / this.resolution + 'px';
+    }
+};
+
+/**
+ * Removes everything from the renderer and optionally removes the Canvas DOM element.
+ *
+ * @param [removeView=false] {boolean} Removes the Canvas element from the DOM.
+ */
+SystemRenderer.prototype.destroy = function (removeView) {
+    if (removeView && this.view.parent)
+    {
+        this.view.parent.removeChild(this.view);
+    }
+
+    this.type = CONST.RENDERER_TYPE.UNKNOWN;
+
+    this.width = 0;
+    this.height = 0;
+
+    this.view = null;
+
+    this.resolution = 0;
+
+    this.transparent = false;
+
+    this.autoResize = false;
+
+    this.blendModes = null;
+
+    this.preserveDrawingBuffer = false;
+    this.clearBeforeRender = false;
+
+    this._backgroundColor = 0;
+    this._backgroundColorRgb = null;
+    this._backgroundColorString = null;
+};
+
+},{"../const":22,"../math":32,"../utils":74,"eventemitter3":11}],43:[function(require,module,exports){
+var SystemRenderer = require('../SystemRenderer'),
+    CanvasMaskManager = require('./utils/CanvasMaskManager'),
+    utils = require('../../utils'),
+    math = require('../../math'),
+    CONST = require('../../const');
+
+/**
+ * The CanvasRenderer draws the scene and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL.
+ * Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :)
+ *
+ * @class
+ * @memberof PIXI
+ * @extends PIXI.SystemRenderer
+ * @param [width=800] {number} the width of the canvas view
+ * @param [height=600] {number} the height of the canvas view
+ * @param [options] {object} The optional renderer parameters
+ * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional
+ * @param [options.transparent=false] {boolean} If the render view is transparent, default false
+ * @param [options.autoResize=false] {boolean} If the render view is automatically resized, default false
+ * @param [options.antialias=false] {boolean} sets antialias (only applicable in chrome at the moment)
+ * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2
+ * @param [options.clearBeforeRender=true] {boolean} This sets if the CanvasRenderer will clear the canvas or
+ *      not before the new render pass.
+ */
+function CanvasRenderer(width, height, options)
+{
+    SystemRenderer.call(this, 'Canvas', width, height, options);
+
+    this.type = CONST.RENDERER_TYPE.CANVAS;
+
+    /**
+     * The canvas 2d context that everything is drawn with.
+     *
+     * @member {CanvasRenderingContext2D}
+     */
+    this.context = this.view.getContext('2d', { alpha: this.transparent });
+
+    /**
+     * Boolean flag controlling canvas refresh.
+     *
+     * @member {boolean}
+     */
+    this.refresh = true;
+
+    /**
+     * Instance of a CanvasMaskManager, handles masking when using the canvas renderer.
+     *
+     * @member {CanvasMaskManager}
+     */
+    this.maskManager = new CanvasMaskManager();
+
+    /**
+     * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation.
+     * Handy for crisp pixel art and speed on legacy devices.
+     *
+     * @member {boolean}
+     */
+    this.roundPixels = false;
+
+    /**
+     * Tracks the active scale mode for this renderer.
+     *
+     * @member {SCALE_MODE}
+     */
+    this.currentScaleMode = CONST.SCALE_MODES.DEFAULT;
+
+    /**
+     * Tracks the active blend mode for this renderer.
+     *
+     * @member {SCALE_MODE}
+     */
+    this.currentBlendMode = CONST.BLEND_MODES.NORMAL;
+
+    /**
+     * The canvas property used to set the canvas smoothing property.
+     *
+     * @member {string}
+     */
+    this.smoothProperty = 'imageSmoothingEnabled';
+
+    if (!this.context.imageSmoothingEnabled)
+    {
+        if (this.context.webkitImageSmoothingEnabled)
+        {
+            this.smoothProperty = 'webkitImageSmoothingEnabled';
+        }
+        else if (this.context.mozImageSmoothingEnabled)
+        {
+            this.smoothProperty = 'mozImageSmoothingEnabled';
+        }
+        else if (this.context.oImageSmoothingEnabled)
+        {
+            this.smoothProperty = 'oImageSmoothingEnabled';
+        }
+        else if (this.context.msImageSmoothingEnabled)
+        {
+            this.smoothProperty = 'msImageSmoothingEnabled';
+        }
+    }
+
+    this.initPlugins();
+
+    this._mapBlendModes();
+
+    /**
+     * This temporary display object used as the parent of the currently being rendered item
+     *
+     * @member {DisplayObject}
+     * @private
+     */
+    this._tempDisplayObjectParent = {
+        worldTransform: new math.Matrix(),
+        worldAlpha: 1
+    };
+
+
+    this.resize(width, height);
+}
+
+// constructor
+CanvasRenderer.prototype = Object.create(SystemRenderer.prototype);
+CanvasRenderer.prototype.constructor = CanvasRenderer;
+module.exports = CanvasRenderer;
+utils.pluginTarget.mixin(CanvasRenderer);
+
+/**
+ * Renders the object to this canvas view
+ *
+ * @param object {DisplayObject} the object to be rendered
+ */
+CanvasRenderer.prototype.render = function (object)
+{
+    var cacheParent = object.parent;
+
+    this._lastObjectRendered = object;
+
+    object.parent = this._tempDisplayObjectParent;
+
+    // update the scene graph
+    object.updateTransform();
+
+    object.parent = cacheParent;
+
+    this.context.setTransform(1, 0, 0, 1, 0, 0);
+
+    this.context.globalAlpha = 1;
+
+    this.currentBlendMode = CONST.BLEND_MODES.NORMAL;
+    this.context.globalCompositeOperation = this.blendModes[CONST.BLEND_MODES.NORMAL];
+
+    if (navigator.isCocoonJS && this.view.screencanvas)
+    {
+        this.context.fillStyle = 'black';
+        this.context.clear();
+    }
+
+    if (this.clearBeforeRender)
+    {
+        if (this.transparent)
+        {
+            this.context.clearRect(0, 0, this.width, this.height);
+        }
+        else
+        {
+            this.context.fillStyle = this._backgroundColorString;
+            this.context.fillRect(0, 0, this.width , this.height);
+        }
+    }
+
+    this.renderDisplayObject(object, this.context);
+};
+
+/**
+ * Removes everything from the renderer and optionally removes the Canvas DOM element.
+ *
+ * @param [removeView=false] {boolean} Removes the Canvas element from the DOM.
+ */
+CanvasRenderer.prototype.destroy = function (removeView)
+{
+    this.destroyPlugins();
+
+    // call the base destroy
+    SystemRenderer.prototype.destroy.call(this, removeView);
+
+    this.context = null;
+
+    this.refresh = true;
+
+    this.maskManager.destroy();
+    this.maskManager = null;
+
+    this.roundPixels = false;
+
+    this.currentScaleMode = 0;
+    this.currentBlendMode = 0;
+
+    this.smoothProperty = null;
+};
+
 /**
- * @license
- * pixi.js - v1.5.1
- * Copyright (c) 2012-2014, Mat Groves
- * http://goodboydigital.com/
+ * Renders a display object
  *
- * Compiled: 2014-02-13
+ * @param displayObject {DisplayObject} The displayObject to render
+ * @private
+ */
+CanvasRenderer.prototype.renderDisplayObject = function (displayObject, context)
+{
+    var tempContext = this.context;
+
+    this.context = context;
+    displayObject.renderCanvas(this);
+    this.context = tempContext;
+};
+
+/**
+ * Maps Pixi blend modes to canvas blend modes.
  *
- * pixi.js is licensed under the MIT License.
- * http://www.opensource.org/licenses/mit-license.php
+ * @private
  */
+CanvasRenderer.prototype._mapBlendModes = function ()
+{
+    if (!this.blendModes)
+    {
+        this.blendModes = {};
+
+        if (utils.canUseNewCanvasBlendModes())
+        {
+            this.blendModes[CONST.BLEND_MODES.NORMAL]        = 'source-over';
+            this.blendModes[CONST.BLEND_MODES.ADD]           = 'lighter'; //IS THIS OK???
+            this.blendModes[CONST.BLEND_MODES.MULTIPLY]      = 'multiply';
+            this.blendModes[CONST.BLEND_MODES.SCREEN]        = 'screen';
+            this.blendModes[CONST.BLEND_MODES.OVERLAY]       = 'overlay';
+            this.blendModes[CONST.BLEND_MODES.DARKEN]        = 'darken';
+            this.blendModes[CONST.BLEND_MODES.LIGHTEN]       = 'lighten';
+            this.blendModes[CONST.BLEND_MODES.COLOR_DODGE]   = 'color-dodge';
+            this.blendModes[CONST.BLEND_MODES.COLOR_BURN]    = 'color-burn';
+            this.blendModes[CONST.BLEND_MODES.HARD_LIGHT]    = 'hard-light';
+            this.blendModes[CONST.BLEND_MODES.SOFT_LIGHT]    = 'soft-light';
+            this.blendModes[CONST.BLEND_MODES.DIFFERENCE]    = 'difference';
+            this.blendModes[CONST.BLEND_MODES.EXCLUSION]     = 'exclusion';
+            this.blendModes[CONST.BLEND_MODES.HUE]           = 'hue';
+            this.blendModes[CONST.BLEND_MODES.SATURATION]    = 'saturate';
+            this.blendModes[CONST.BLEND_MODES.COLOR]         = 'color';
+            this.blendModes[CONST.BLEND_MODES.LUMINOSITY]    = 'luminosity';
+        }
+        else
+        {
+            // this means that the browser does not support the cool new blend modes in canvas 'cough' ie 'cough'
+            this.blendModes[CONST.BLEND_MODES.NORMAL]        = 'source-over';
+            this.blendModes[CONST.BLEND_MODES.ADD]           = 'lighter'; //IS THIS OK???
+            this.blendModes[CONST.BLEND_MODES.MULTIPLY]      = 'source-over';
+            this.blendModes[CONST.BLEND_MODES.SCREEN]        = 'source-over';
+            this.blendModes[CONST.BLEND_MODES.OVERLAY]       = 'source-over';
+            this.blendModes[CONST.BLEND_MODES.DARKEN]        = 'source-over';
+            this.blendModes[CONST.BLEND_MODES.LIGHTEN]       = 'source-over';
+            this.blendModes[CONST.BLEND_MODES.COLOR_DODGE]   = 'source-over';
+            this.blendModes[CONST.BLEND_MODES.COLOR_BURN]    = 'source-over';
+            this.blendModes[CONST.BLEND_MODES.HARD_LIGHT]    = 'source-over';
+            this.blendModes[CONST.BLEND_MODES.SOFT_LIGHT]    = 'source-over';
+            this.blendModes[CONST.BLEND_MODES.DIFFERENCE]    = 'source-over';
+            this.blendModes[CONST.BLEND_MODES.EXCLUSION]     = 'source-over';
+            this.blendModes[CONST.BLEND_MODES.HUE]           = 'source-over';
+            this.blendModes[CONST.BLEND_MODES.SATURATION]    = 'source-over';
+            this.blendModes[CONST.BLEND_MODES.COLOR]         = 'source-over';
+            this.blendModes[CONST.BLEND_MODES.LUMINOSITY]    = 'source-over';
+        }
+    }
+};
+
+},{"../../const":22,"../../math":32,"../../utils":74,"../SystemRenderer":42,"./utils/CanvasMaskManager":46}],44:[function(require,module,exports){
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * Creates a Canvas element of the given size.
+ *
+ * @class
+ * @memberof PIXI
+ * @param width {number} the width for the newly created canvas
+ * @param height {number} the height for the newly created canvas
+ */
+function CanvasBuffer(width, height)
+{
+    /**
+     * The Canvas object that belongs to this CanvasBuffer.
+     *
+     * @member {HTMLCanvasElement}
+     */
+    this.canvas = document.createElement('canvas');
+
+    /**
+     * A CanvasRenderingContext2D object representing a two-dimensional rendering context.
+     *
+     * @member {CanvasRenderingContext2D}
+     */
+    this.context = this.canvas.getContext('2d');
+
+    this.canvas.width = width;
+    this.canvas.height = height;
+}
+
+CanvasBuffer.prototype.constructor = CanvasBuffer;
+module.exports = CanvasBuffer;
+
+Object.defineProperties(CanvasBuffer.prototype, {
+    /**
+     * The width of the canvas buffer in pixels.
+     *
+     * @member {number}
+     * @memberof CanvasBuffer#
+     */
+    width: {
+        get: function ()
+        {
+            return this.canvas.width;
+        },
+        set: function (val)
+        {
+            this.canvas.width = val;
+        }
+    },
+    /**
+     * The height of the canvas buffer in pixels.
+     *
+     * @member {number}
+     * @memberof CanvasBuffer#
+     */
+    height: {
+        get: function ()
+        {
+            return this.canvas.height;
+        },
+        set: function (val)
+        {
+            this.canvas.height = val;
+        }
+    }
+});
+
+/**
+ * Clears the canvas that was created by the CanvasBuffer class.
+ *
+ * @private
+ */
+CanvasBuffer.prototype.clear = function ()
+{
+    this.context.setTransform(1, 0, 0, 1, 0, 0);
+    this.context.clearRect(0,0, this.canvas.width, this.canvas.height);
+};
+
+/**
+ * Resizes the canvas to the specified width and height.
+ *
+ * @param width {number} the new width of the canvas
+ * @param height {number} the new height of the canvas
+ */
+CanvasBuffer.prototype.resize = function (width, height)
+{
+    this.canvas.width = width;
+    this.canvas.height = height;
+};
+
+/**
+ * Destroys this canvas.
+ *
+ */
+CanvasBuffer.prototype.destroy = function ()
+{
+    this.context = null;
+    this.canvas = null;
+};
+
+},{}],45:[function(require,module,exports){
+var CONST = require('../../../const');
+
+/**
+ * A set of functions used by the canvas renderer to draw the primitive graphics data.
+ * @static
+ * @class
+ * @memberof PIXI
+ */
+var CanvasGraphics = {};
+module.exports = CanvasGraphics;
+
+/*
+ * Renders a Graphics object to a canvas.
+ *
+ * @param graphics {Graphics} the actual graphics object to render
+ * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas
  */
+CanvasGraphics.renderGraphics = function (graphics, context)
+{
+    var worldAlpha = graphics.worldAlpha;
+
+    if (graphics.dirty)
+    {
+        this.updateGraphicsTint(graphics);
+        graphics.dirty = false;
+    }
+
+    for (var i = 0; i < graphics.graphicsData.length; i++)
+    {
+        var data = graphics.graphicsData[i];
+        var shape = data.shape;
+
+        var fillColor = data._fillTint;
+        var lineColor = data._lineTint;
+
+        context.lineWidth = data.lineWidth;
+
+        if (data.type === CONST.SHAPES.POLY)
+        {
+            context.beginPath();
+
+            var points = shape.points;
+
+            context.moveTo(points[0], points[1]);
+
+            for (var j=1; j < points.length/2; j++)
+            {
+                context.lineTo(points[j * 2], points[j * 2 + 1]);
+            }
+
+            if (shape.closed)
+            {
+                context.lineTo(points[0], points[1]);
+            }
+
+            // if the first and last point are the same close the path - much neater :)
+            if (points[0] === points[points.length-2] && points[1] === points[points.length-1])
+            {
+                context.closePath();
+            }
+
+            if (data.fill)
+            {
+                context.globalAlpha = data.fillAlpha * worldAlpha;
+                context.fillStyle = '#' + ('00000' + ( fillColor | 0).toString(16)).substr(-6);
+                context.fill();
+            }
+            if (data.lineWidth)
+            {
+                context.globalAlpha = data.lineAlpha * worldAlpha;
+                context.strokeStyle = '#' + ('00000' + ( lineColor | 0).toString(16)).substr(-6);
+                context.stroke();
+            }
+        }
+        else if (data.type === CONST.SHAPES.RECT)
+        {
+
+            if (data.fillColor || data.fillColor === 0)
+            {
+                context.globalAlpha = data.fillAlpha * worldAlpha;
+                context.fillStyle = '#' + ('00000' + ( fillColor | 0).toString(16)).substr(-6);
+                context.fillRect(shape.x, shape.y, shape.width, shape.height);
+
+            }
+            if (data.lineWidth)
+            {
+                context.globalAlpha = data.lineAlpha * worldAlpha;
+                context.strokeStyle = '#' + ('00000' + ( lineColor | 0).toString(16)).substr(-6);
+                context.strokeRect(shape.x, shape.y, shape.width, shape.height);
+            }
+        }
+        else if (data.type === CONST.SHAPES.CIRC)
+        {
+            // TODO - need to be Undefined!
+            context.beginPath();
+            context.arc(shape.x, shape.y, shape.radius,0,2*Math.PI);
+            context.closePath();
+
+            if (data.fill)
+            {
+                context.globalAlpha = data.fillAlpha * worldAlpha;
+                context.fillStyle = '#' + ('00000' + ( fillColor | 0).toString(16)).substr(-6);
+                context.fill();
+            }
+            if (data.lineWidth)
+            {
+                context.globalAlpha = data.lineAlpha * worldAlpha;
+                context.strokeStyle = '#' + ('00000' + ( lineColor | 0).toString(16)).substr(-6);
+                context.stroke();
+            }
+        }
+        else if (data.type === CONST.SHAPES.ELIP)
+        {
+            // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
 
-(function(){
+            var w = shape.width * 2;
+            var h = shape.height * 2;
 
-    var root = this;
+            var x = shape.x - w/2;
+            var y = shape.y - h/2;
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+            context.beginPath();
 
-/**
- * @module PIXI
- */
-var PIXI = PIXI || {};
+            var kappa = 0.5522848,
+                ox = (w / 2) * kappa, // control point offset horizontal
+                oy = (h / 2) * kappa, // control point offset vertical
+                xe = x + w,           // x-end
+                ye = y + h,           // y-end
+                xm = x + w / 2,       // x-middle
+                ym = y + h / 2;       // y-middle
 
-/* 
-* 
-* This file contains a lot of pixi consts which are used across the rendering engine
-* @class Consts
-*/
-PIXI.WEBGL_RENDERER = 0;
-PIXI.CANVAS_RENDERER = 1;
-
-// useful for testing against if your lib is using pixi.
-PIXI.VERSION = "v1.5.1";
-
-// the various blend modes supported by pixi
-PIXI.blendModes = {
-    NORMAL:0,
-    ADD:1,
-    MULTIPLY:2,
-    SCREEN:3,
-    OVERLAY:4,
-    DARKEN:5,
-    LIGHTEN:6,
-    COLOR_DODGE:7,
-    COLOR_BURN:8,
-    HARD_LIGHT:9,
-    SOFT_LIGHT:10,
-    DIFFERENCE:11,
-    EXCLUSION:12,
-    HUE:13,
-    SATURATION:14,
-    COLOR:15,
-    LUMINOSITY:16
-};
-
-// the scale modes
-PIXI.scaleModes = {
-    DEFAULT:0,
-    LINEAR:0,
-    NEAREST:1
-};
-
-// interaction frequency 
-PIXI.INTERACTION_FREQUENCY = 30;
-PIXI.AUTO_PREVENT_DEFAULT = true;
-
-PIXI.RAD_TO_DEG = 180 / Math.PI;
-PIXI.DEG_TO_RAD = Math.PI / 180;
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+            context.moveTo(x, ym);
+            context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+            context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+            context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+            context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
 
-/**
- * The Point object represents a location in a two-dimensional coordinate system, where x represents the horizontal axis and y represents the vertical axis.
- *
- * @class Point
- * @constructor
- * @param x {Number} position of the point on the x axis
- * @param y {Number} position of the point on the y axis
- */
-PIXI.Point = function(x, y)
-{
-    /**
-     * @property x
-     * @type Number
-     * @default 0
-     */
-    this.x = x || 0;
+            context.closePath();
 
-    /**
-     * @property y
-     * @type Number
-     * @default 0
-     */
-    this.y = y || 0;
+            if (data.fill)
+            {
+                context.globalAlpha = data.fillAlpha * worldAlpha;
+                context.fillStyle = '#' + ('00000' + ( fillColor | 0).toString(16)).substr(-6);
+                context.fill();
+            }
+            if (data.lineWidth)
+            {
+                context.globalAlpha = data.lineAlpha * worldAlpha;
+                context.strokeStyle = '#' + ('00000' + ( lineColor | 0).toString(16)).substr(-6);
+                context.stroke();
+            }
+        }
+        else if (data.type === CONST.SHAPES.RREC)
+        {
+            var rx = shape.x;
+            var ry = shape.y;
+            var width = shape.width;
+            var height = shape.height;
+            var radius = shape.radius;
+
+            var maxRadius = Math.min(width, height) / 2 | 0;
+            radius = radius > maxRadius ? maxRadius : radius;
+
+            context.beginPath();
+            context.moveTo(rx, ry + radius);
+            context.lineTo(rx, ry + height - radius);
+            context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height);
+            context.lineTo(rx + width - radius, ry + height);
+            context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius);
+            context.lineTo(rx + width, ry + radius);
+            context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry);
+            context.lineTo(rx + radius, ry);
+            context.quadraticCurveTo(rx, ry, rx, ry + radius);
+            context.closePath();
+
+            if (data.fillColor || data.fillColor === 0)
+            {
+                context.globalAlpha = data.fillAlpha * worldAlpha;
+                context.fillStyle = '#' + ('00000' + ( fillColor | 0).toString(16)).substr(-6);
+                context.fill();
+
+            }
+            if (data.lineWidth)
+            {
+                context.globalAlpha = data.lineAlpha * worldAlpha;
+                context.strokeStyle = '#' + ('00000' + ( lineColor | 0).toString(16)).substr(-6);
+                context.stroke();
+            }
+        }
+    }
 };
 
-/**
- * Creates a clone of this point
+/*
+ * Renders a graphics mask
  *
- * @method clone
- * @return {Point} a copy of the point
+ * @private
+ * @param graphics {Graphics} the graphics which will be used as a mask
+ * @param context {CanvasRenderingContext2D} the context 2d method of the canvas
  */
-PIXI.Point.prototype.clone = function()
+CanvasGraphics.renderGraphicsMask = function (graphics, context)
 {
-    return new PIXI.Point(this.x, this.y);
-};
+    var len = graphics.graphicsData.length;
 
-// constructor
-PIXI.Point.prototype.constructor = PIXI.Point;
+    if (len === 0)
+    {
+        return;
+    }
 
-PIXI.Point.prototype.set = function(x, y)
-{
-    this.x = x || 0;
-    this.y = y || ( (y !== 0) ? this.x : 0 ) ;
-};
+    context.beginPath();
 
+    for (var i = 0; i < len; i++)
+    {
+        var data = graphics.graphicsData[i];
+        var shape = data.shape;
 
-/**
- * @author Mat Groves http://matgroves.com/
- */
+        if (data.type === CONST.SHAPES.POLY)
+        {
 
-/**
- * the Rectangle object is an area defined by its position, as indicated by its top-left corner point (x, y) and by its width and its height.
- *
- * @class Rectangle
- * @constructor
- * @param x {Number} The X coord of the upper-left corner of the rectangle
- * @param y {Number} The Y coord of the upper-left corner of the rectangle
- * @param width {Number} The overall width of this rectangle
- * @param height {Number} The overall height of this rectangle
- */
-PIXI.Rectangle = function(x, y, width, height)
-{
-    /**
-     * @property x
-     * @type Number
-     * @default 0
-     */
-    this.x = x || 0;
+            var points = shape.points;
 
-    /**
-     * @property y
-     * @type Number
-     * @default 0
-     */
-    this.y = y || 0;
+            context.moveTo(points[0], points[1]);
 
-    /**
-     * @property width
-     * @type Number
-     * @default 0
-     */
-    this.width = width || 0;
+            for (var j=1; j < points.length/2; j++)
+            {
+                context.lineTo(points[j * 2], points[j * 2 + 1]);
+            }
 
-    /**
-     * @property height
-     * @type Number
-     * @default 0
-     */
-    this.height = height || 0;
-};
+            // if the first and last point are the same close the path - much neater :)
+            if (points[0] === points[points.length-2] && points[1] === points[points.length-1])
+            {
+                context.closePath();
+            }
 
-/**
- * Creates a clone of this Rectangle
- *
- * @method clone
- * @return {Rectangle} a copy of the rectangle
- */
-PIXI.Rectangle.prototype.clone = function()
-{
-    return new PIXI.Rectangle(this.x, this.y, this.width, this.height);
+        }
+        else if (data.type === CONST.SHAPES.RECT)
+        {
+            context.rect(shape.x, shape.y, shape.width, shape.height);
+            context.closePath();
+        }
+        else if (data.type === CONST.SHAPES.CIRC)
+        {
+            // TODO - need to be Undefined!
+            context.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI);
+            context.closePath();
+        }
+        else if (data.type === CONST.SHAPES.ELIP)
+        {
+
+            // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+
+            var w = shape.width * 2;
+            var h = shape.height * 2;
+
+            var x = shape.x - w/2;
+            var y = shape.y - h/2;
+
+            var kappa = 0.5522848,
+                ox = (w / 2) * kappa, // control point offset horizontal
+                oy = (h / 2) * kappa, // control point offset vertical
+                xe = x + w,           // x-end
+                ye = y + h,           // y-end
+                xm = x + w / 2,       // x-middle
+                ym = y + h / 2;       // y-middle
+
+            context.moveTo(x, ym);
+            context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+            context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+            context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+            context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+            context.closePath();
+        }
+        else if (data.type === CONST.SHAPES.RREC)
+        {
+
+            var rx = shape.x;
+            var ry = shape.y;
+            var width = shape.width;
+            var height = shape.height;
+            var radius = shape.radius;
+
+            var maxRadius = Math.min(width, height) / 2 | 0;
+            radius = radius > maxRadius ? maxRadius : radius;
+
+            context.moveTo(rx, ry + radius);
+            context.lineTo(rx, ry + height - radius);
+            context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height);
+            context.lineTo(rx + width - radius, ry + height);
+            context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius);
+            context.lineTo(rx + width, ry + radius);
+            context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry);
+            context.lineTo(rx + radius, ry);
+            context.quadraticCurveTo(rx, ry, rx, ry + radius);
+            context.closePath();
+        }
+    }
 };
 
-/**
- * Checks whether the x and y coordinates passed to this function are contained within this Rectangle
+/*
+ * Updates the tint of a graphics object
  *
- * @method contains
- * @param x {Number} The X coordinate of the point to test
- * @param y {Number} The Y coordinate of the point to test
- * @return {Boolean} Whether the x/y coords are within this Rectangle
+ * @private
+ * @param graphics {Graphics} the graphics that will have its tint updated
+ * 
  */
-PIXI.Rectangle.prototype.contains = function(x, y)
+CanvasGraphics.updateGraphicsTint = function (graphics)
 {
-    if(this.width <= 0 || this.height <= 0)
-        return false;
+    if (graphics.tint === 0xFFFFFF)
+    {
+        return;
+    }
 
-    var x1 = this.x;
-    if(x >= x1 && x <= x1 + this.width)
+    var tintR = (graphics.tint >> 16 & 0xFF) / 255;
+    var tintG = (graphics.tint >> 8 & 0xFF) / 255;
+    var tintB = (graphics.tint & 0xFF)/ 255;
+
+    for (var i = 0; i < graphics.graphicsData.length; i++)
     {
-        var y1 = this.y;
+        var data = graphics.graphicsData[i];
 
-        if(y >= y1 && y <= y1 + this.height)
-        {
-            return true;
-        }
-    }
+        var fillColor = data.fillColor | 0;
+        var lineColor = data.lineColor | 0;
 
-    return false;
-};
+        /*
+        var colorR = (fillColor >> 16 & 0xFF) / 255;
+        var colorG = (fillColor >> 8 & 0xFF) / 255;
+        var colorB = (fillColor & 0xFF) / 255;
 
-// constructor
-PIXI.Rectangle.prototype.constructor = PIXI.Rectangle;
+        colorR *= tintR;
+        colorG *= tintG;
+        colorB *= tintB;
 
-PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0);
-/**
- * @author Adrien Brault <adrien.brault@gmail.com>
- */
+        fillColor = ((colorR*255 << 16) + (colorG*255 << 8) + colorB*255);
 
-/**
- * @class Polygon
- * @constructor
- * @param points* {Array<Point>|Array<Number>|Point...|Number...} This can be an array of Points that form the polygon,
- *      a flat array of numbers that will be interpreted as [x,y, x,y, ...], or the arguments passed can be
- *      all the points of the polygon e.g. `new PIXI.Polygon(new PIXI.Point(), new PIXI.Point(), ...)`, or the
- *      arguments passed can be flat x,y values e.g. `new PIXI.Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are
- *      Numbers.
- */
-PIXI.Polygon = function(points)
-{
-    //if points isn't an array, use arguments as the array
-    if(!(points instanceof Array))
-        points = Array.prototype.slice.call(arguments);
+        colorR = (lineColor >> 16 & 0xFF) / 255;
+        colorG = (lineColor >> 8 & 0xFF) / 255;
+        colorB = (lineColor & 0xFF) / 255;
 
-    //if this is a flat array of numbers, convert it to points
-    if(typeof points[0] === 'number') {
-        var p = [];
-        for(var i = 0, il = points.length; i < il; i+=2) {
-            p.push(
-                new PIXI.Point(points[i], points[i + 1])
-            );
-        }
+        colorR *= tintR;
+        colorG *= tintG;
+        colorB *= tintB;
 
-        points = p;
-    }
+        lineColor = ((colorR*255 << 16) + (colorG*255 << 8) + colorB*255);
+        */
 
-    this.points = points;
+        // super inline cos im an optimization NAZI :)
+        data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG*255 << 8) +  (fillColor & 0xFF) / 255 * tintB*255);
+        data._lineTint = (((lineColor >> 16 & 0xFF) / 255 * tintR*255 << 16) + ((lineColor >> 8 & 0xFF) / 255 * tintG*255 << 8) +  (lineColor & 0xFF) / 255 * tintB*255);
+
+    }
 };
 
+
+},{"../../../const":22}],46:[function(require,module,exports){
+var CanvasGraphics = require('./CanvasGraphics');
+
 /**
- * Creates a clone of this polygon
+ * A set of functions used to handle masking.
  *
- * @method clone
- * @return {Polygon} a copy of the polygon
+ * @class
+ * @memberof PIXI
  */
-PIXI.Polygon.prototype.clone = function()
-{
-    var points = [];
-    for (var i=0; i<this.points.length; i++) {
-        points.push(this.points[i].clone());
-    }
+function CanvasMaskManager()
+{}
 
-    return new PIXI.Polygon(points);
-};
+CanvasMaskManager.prototype.constructor = CanvasMaskManager;
+module.exports = CanvasMaskManager;
 
 /**
- * Checks whether the x and y coordinates passed to this function are contained within this polygon
+ * This method adds it to the current stack of masks.
  *
- * @method contains
- * @param x {Number} The X coordinate of the point to test
- * @param y {Number} The Y coordinate of the point to test
- * @return {Boolean} Whether the x/y coordinates are within this polygon
+ * @param maskData {object} the maskData that will be pushed
+ * @param renderer {WebGLRenderer|CanvasRenderer} The renderer context to use.
  */
-PIXI.Polygon.prototype.contains = function(x, y)
+CanvasMaskManager.prototype.pushMask = function (maskData, renderer)
 {
-    var inside = false;
 
-    // use some raycasting to test hits
-    // https://github.com/substack/point-in-polygon/blob/master/index.js
-    for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) {
-        var xi = this.points[i].x, yi = this.points[i].y,
-            xj = this.points[j].x, yj = this.points[j].y,
-            intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
+    renderer.context.save();
 
-        if(intersect) inside = !inside;
+    var cacheAlpha = maskData.alpha;
+    var transform = maskData.worldTransform;
+    var resolution = renderer.resolution;
+
+    renderer.context.setTransform(
+        transform.a * resolution,
+        transform.b * resolution,
+        transform.c * resolution,
+        transform.d * resolution,
+        transform.tx * resolution,
+        transform.ty * resolution
+    );
+
+    //TODO suport sprite alpha masks??
+    //lots of effort required. If demand is great enough..
+    if(!maskData.texture)
+    {
+        CanvasGraphics.renderGraphicsMask(maskData, renderer.context);
+        renderer.context.clip();
     }
 
-    return inside;
+    maskData.worldAlpha = cacheAlpha;
 };
 
-// constructor
-PIXI.Polygon.prototype.constructor = PIXI.Polygon;
+/**
+ * Restores the current drawing context to the state it was before the mask was applied.
+ *
+ * @param renderer {WebGLRenderer|CanvasRenderer} The renderer context to use.
+ */
+CanvasMaskManager.prototype.popMask = function (renderer)
+{
+    renderer.context.restore();
+};
+
+CanvasMaskManager.prototype.destroy = function () {};
+
+},{"./CanvasGraphics":45}],47:[function(require,module,exports){
+var utils = require('../../../utils');
 
 /**
- * @author Chad Engler <chad@pantherdev.com>
+ * Utility methods for Sprite/Texture tinting.
+ * @static
+ * @class
+ * @memberof PIXI
  */
+var CanvasTinter = {};
+module.exports = CanvasTinter;
 
 /**
- * The Circle object can be used to specify a hit area for displayObjects
+ * Basically this method just needs a sprite and a color and tints the sprite with the given color.
  *
- * @class Circle
- * @constructor
- * @param x {Number} The X coordinate of the upper-left corner of the framing rectangle of this circle
- * @param y {Number} The Y coordinate of the upper-left corner of the framing rectangle of this circle
- * @param radius {Number} The radius of the circle
+ * @param sprite {Sprite} the sprite to tint
+ * @param color {number} the color to use to tint the sprite with
+ * @return {HTMLCanvasElement} The tinted canvas
  */
-PIXI.Circle = function(x, y, radius)
+CanvasTinter.getTintedTexture = function (sprite, color)
 {
-    /**
-     * @property x
-     * @type Number
-     * @default 0
-     */
-    this.x = x || 0;
+    var texture = sprite.texture;
 
-    /**
-     * @property y
-     * @type Number
-     * @default 0
-     */
-    this.y = y || 0;
+    color = CanvasTinter.roundColor(color);
 
-    /**
-     * @property radius
-     * @type Number
-     * @default 0
-     */
-    this.radius = radius || 0;
-};
+    var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6);
+
+    texture.tintCache = texture.tintCache || {};
+
+    if (texture.tintCache[stringColor])
+    {
+        return texture.tintCache[stringColor];
+    }
+
+     // clone texture..
+    var canvas = CanvasTinter.canvas || document.createElement('canvas');
+
+    //CanvasTinter.tintWithPerPixel(texture, stringColor, canvas);
+    CanvasTinter.tintMethod(texture, color, canvas);
+
+    if (CanvasTinter.convertTintToImage)
+    {
+        // is this better?
+        var tintImage = new Image();
+        tintImage.src = canvas.toDataURL();
+
+        texture.tintCache[stringColor] = tintImage;
+    }
+    else
+    {
+        texture.tintCache[stringColor] = canvas;
+        // if we are not converting the texture to an image then we need to lose the reference to the canvas
+        CanvasTinter.canvas = null;
+    }
 
-/**
- * Creates a clone of this Circle instance
- *
- * @method clone
- * @return {Circle} a copy of the polygon
- */
-PIXI.Circle.prototype.clone = function()
-{
-    return new PIXI.Circle(this.x, this.y, this.radius);
+    return canvas;
 };
 
 /**
- * Checks whether the x, and y coordinates passed to this function are contained within this circle
+ * Tint a texture using the 'multiply' operation.
  *
- * @method contains
- * @param x {Number} The X coordinate of the point to test
- * @param y {Number} The Y coordinate of the point to test
- * @return {Boolean} Whether the x/y coordinates are within this polygon
+ * @param texture {Texture} the texture to tint
+ * @param color {number} the color to use to tint the sprite with
+ * @param canvas {HTMLCanvasElement} the current canvas
  */
-PIXI.Circle.prototype.contains = function(x, y)
+CanvasTinter.tintWithMultiply = function (texture, color, canvas)
 {
-    if(this.radius <= 0)
-        return false;
-
-    var dx = (this.x - x),
-        dy = (this.y - y),
-        r2 = this.radius * this.radius;
+    var context = canvas.getContext( '2d' );
 
-    dx *= dx;
-    dy *= dy;
+    var crop = texture.crop;
 
-    return (dx + dy <= r2);
-};
+    canvas.width = crop.width;
+    canvas.height = crop.height;
 
-// constructor
-PIXI.Circle.prototype.constructor = PIXI.Circle;
+    context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6);
 
+    context.fillRect(0, 0, crop.width, crop.height);
 
-/**
- * @author Chad Engler <chad@pantherdev.com>
- */
+    context.globalCompositeOperation = 'multiply';
 
-/**
- * The Ellipse object can be used to specify a hit area for displayObjects
+    context.drawImage(
+        texture.baseTexture.source,
+        crop.x,
+        crop.y,
+        crop.width,
+        crop.height,
+        0,
+        0,
+        crop.width,
+        crop.height
+    );
+
+    context.globalCompositeOperation = 'destination-atop';
+
+    context.drawImage(
+        texture.baseTexture.source,
+        crop.x,
+        crop.y,
+        crop.width,
+        crop.height,
+        0,
+        0,
+        crop.width,
+        crop.height
+    );
+};
+
+/**
+ * Tint a texture using the 'overlay' operation.
  *
- * @class Ellipse
- * @constructor
- * @param x {Number} The X coordinate of the upper-left corner of the framing rectangle of this ellipse
- * @param y {Number} The Y coordinate of the upper-left corner of the framing rectangle of this ellipse
- * @param width {Number} The overall width of this ellipse
- * @param height {Number} The overall height of this ellipse
+ * @param texture {Texture} the texture to tint
+ * @param color {number} the color to use to tint the sprite with
+ * @param canvas {HTMLCanvasElement} the current canvas
  */
-PIXI.Ellipse = function(x, y, width, height)
+CanvasTinter.tintWithOverlay = function (texture, color, canvas)
 {
-    /**
-     * @property x
-     * @type Number
-     * @default 0
-     */
-    this.x = x || 0;
+    var context = canvas.getContext( '2d' );
 
-    /**
-     * @property y
-     * @type Number
-     * @default 0
-     */
-    this.y = y || 0;
+    var crop = texture.crop;
 
-    /**
-     * @property width
-     * @type Number
-     * @default 0
-     */
-    this.width = width || 0;
+    canvas.width = crop.width;
+    canvas.height = crop.height;
 
-    /**
-     * @property height
-     * @type Number
-     * @default 0
-     */
-    this.height = height || 0;
-};
+    context.globalCompositeOperation = 'copy';
+    context.fillStyle = '#' + ('00000' + ( color | 0).toString(16)).substr(-6);
+    context.fillRect(0, 0, crop.width, crop.height);
 
-/**
- * Creates a clone of this Ellipse instance
- *
- * @method clone
- * @return {Ellipse} a copy of the ellipse
- */
-PIXI.Ellipse.prototype.clone = function()
-{
-    return new PIXI.Ellipse(this.x, this.y, this.width, this.height);
+    context.globalCompositeOperation = 'destination-atop';
+    context.drawImage(
+        texture.baseTexture.source,
+        crop.x,
+        crop.y,
+        crop.width,
+        crop.height,
+        0,
+        0,
+        crop.width,
+        crop.height
+    );
+
+    // context.globalCompositeOperation = 'copy';
 };
 
 /**
- * Checks whether the x and y coordinates passed to this function are contained within this ellipse
+ * Tint a texture pixel per pixel.
  *
- * @method contains
- * @param x {Number} The X coordinate of the point to test
- * @param y {Number} The Y coordinate of the point to test
- * @return {Boolean} Whether the x/y coords are within this ellipse
+ * @param texture {Texture} the texture to tint
+ * @param color {number} the color to use to tint the sprite with
+ * @param canvas {HTMLCanvasElement} the current canvas
  */
-PIXI.Ellipse.prototype.contains = function(x, y)
+CanvasTinter.tintWithPerPixel = function (texture, color, canvas)
 {
-    if(this.width <= 0 || this.height <= 0)
-        return false;
-
-    //normalize the coords to an ellipse with center 0,0
-    var normx = ((x - this.x) / this.width),
-        normy = ((y - this.y) / this.height);
+    var context = canvas.getContext( '2d' );
 
-    normx *= normx;
-    normy *= normy;
+    var crop = texture.crop;
 
-    return (normx + normy <= 1);
-};
+    canvas.width = crop.width;
+    canvas.height = crop.height;
 
-/**
-* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object
-*
-* @method getBounds
-* @return {Rectangle} the framing rectangle
-*/
-PIXI.Ellipse.prototype.getBounds = function()
-{
-    return new PIXI.Rectangle(this.x, this.y, this.width, this.height);
-};
+    context.globalCompositeOperation = 'copy';
+    context.drawImage(
+        texture.baseTexture.source,
+        crop.x,
+        crop.y,
+        crop.width,
+        crop.height,
+        0,
+        0,
+        crop.width,
+        crop.height
+    );
 
-// constructor
-PIXI.Ellipse.prototype.constructor = PIXI.Ellipse;
+    var rgbValues = utils.hex2rgb(color);
+    var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2];
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+    var pixelData = context.getImageData(0, 0, crop.width, crop.height);
 
-PIXI.determineMatrixArrayType = function() {
-    return (typeof Float32Array !== 'undefined') ? Float32Array : Array;
-};
+    var pixels = pixelData.data;
 
-/*
-* @class Matrix2
-* The Matrix2 class will choose the best type of array to use between
-* a regular javascript Array and a Float32Array if the latter is available
-*
-*/
-PIXI.Matrix2 = PIXI.determineMatrixArrayType();
+    for (var i = 0; i < pixels.length; i += 4)
+    {
+        pixels[i+0] *= r;
+        pixels[i+1] *= g;
+        pixels[i+2] *= b;
+    }
 
-/*
-* @class Matrix
-* The Matrix class is now an object, which makes it a lot faster, 
-* here is a representation of it : 
-* | a | b | tx|
-* | c | c | ty|
-* | 0 | 0 | 1 |
-*
-*/
-PIXI.Matrix = function()
-{
-    this.a = 1;
-    this.b = 0;
-    this.c = 0;
-    this.d = 1;
-    this.tx = 0;
-    this.ty = 0;
+    context.putImageData(pixelData, 0, 0);
 };
 
 /**
- * Creates a pixi matrix object based on the array given as a parameter
+ * Rounds the specified color according to the CanvasTinter.cacheStepsPerColorChannel.
  *
- * @method fromArray
- * @param array {Array} The array that the matrix will be filled with
+ * @param color {number} the color to round, should be a hex color
  */
-PIXI.Matrix.prototype.fromArray = function(array)
+CanvasTinter.roundColor = function (color)
 {
-    this.a = array[0];
-    this.b = array[1];
-    this.c = array[3];
-    this.d = array[4];
-    this.tx = array[2];
-    this.ty = array[5];
-};
+    var step = CanvasTinter.cacheStepsPerColorChannel;
 
-/**
- * Creates an array from the current Matrix object
- *
- * @method toArray
- * @param transpose {Boolean} Whether we need to transpose the matrix or not
- * @return array {Array} the newly created array which contains the matrix
- */
-PIXI.Matrix.prototype.toArray = function(transpose)
-{
-    if(!this.array) this.array = new Float32Array(9);
-    var array = this.array;
+    var rgbValues = utils.hex2rgb(color);
 
-    if(transpose)
-    {
-        this.array[0] = this.a;
-        this.array[1] = this.c;
-        this.array[2] = 0;
-        this.array[3] = this.b;
-        this.array[4] = this.d;
-        this.array[5] = 0;
-        this.array[6] = this.tx;
-        this.array[7] = this.ty;
-        this.array[8] = 1;
-    }
-    else
-    {
-        this.array[0] = this.a;
-        this.array[1] = this.b;
-        this.array[2] = this.tx;
-        this.array[3] = this.c;
-        this.array[4] = this.d;
-        this.array[5] = this.ty;
-        this.array[6] = 0;
-        this.array[7] = 0;
-        this.array[8] = 1;
-    }
+    rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step);
+    rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step);
+    rgbValues[2] = Math.min(255, (rgbValues[2] / step) * step);
 
-    return array;//[this.a, this.b, this.tx, this.c, this.d, this.ty, 0, 0, 1];
+    return utils.rgb2hex(rgbValues);
 };
 
-PIXI.identityMatrix = new PIXI.Matrix();
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * Number of steps which will be used as a cap when rounding colors.
+ *
+ * @member
  */
+CanvasTinter.cacheStepsPerColorChannel = 8;
 
 /**
- * The base class for all objects that are rendered on the screen.
+ * Tint cache boolean flag.
  *
- * @class DisplayObject
- * @constructor
+ * @member
  */
-PIXI.DisplayObject = function()
-{
-    /**
-     * The coordinate of the object relative to the local coordinates of the parent.
-     *
-     * @property position
-     * @type Point
-     */
-    this.position = new PIXI.Point();
-
-    /**
-     * The scale factor of the object.
-     *
-     * @property scale
-     * @type Point
-     */
-    this.scale = new PIXI.Point(1,1);//{x:1, y:1};
-
-    /**
-     * The pivot point of the displayObject that it rotates around
-     *
-     * @property pivot
-     * @type Point
-     */
-    this.pivot = new PIXI.Point(0,0);
-
-    /**
-     * The rotation of the object in radians.
-     *
-     * @property rotation
-     * @type Number
-     */
-    this.rotation = 0;
-
-    /**
-     * The opacity of the object.
-     *
-     * @property alpha
-     * @type Number
-     */
-    this.alpha = 1;
-
-    /**
-     * The visibility of the object.
-     *
-     * @property visible
-     * @type Boolean
-     */
-    this.visible = true;
+CanvasTinter.convertTintToImage = false;
 
-    /**
-     * This is the defined area that will pick up mouse / touch events. It is null by default.
-     * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)
-     *
-     * @property hitArea
-     * @type Rectangle|Circle|Ellipse|Polygon
-     */
-    this.hitArea = null;
+/**
+ * Whether or not the Canvas BlendModes are supported, consequently the ability to tint using the multiply method.
+ *
+ * @member
+ */
+CanvasTinter.canUseMultiply = utils.canUseNewCanvasBlendModes();
 
-    /**
-     * This is used to indicate if the displayObject should display a mouse hand cursor on rollover
-     *
-     * @property buttonMode
-     * @type Boolean
-     */
-    this.buttonMode = false;
+/**
+ * The tinting method that will be used.
+ *
+ */
+CanvasTinter.tintMethod = CanvasTinter.canUseMultiply ? CanvasTinter.tintWithMultiply :  CanvasTinter.tintWithPerPixel;
+
+},{"../../../utils":74}],48:[function(require,module,exports){
+var SystemRenderer = require('../SystemRenderer'),
+    ShaderManager = require('./managers/ShaderManager'),
+    MaskManager = require('./managers/MaskManager'),
+    StencilManager = require('./managers/StencilManager'),
+    FilterManager = require('./managers/FilterManager'),
+    BlendModeManager = require('./managers/BlendModeManager'),
+    RenderTarget = require('./utils/RenderTarget'),
+    ObjectRenderer = require('./utils/ObjectRenderer'),
+    FXAAFilter = require('./filters/FXAAFilter'),
+    utils = require('../../utils'),
+    CONST = require('../../const');
+
+/**
+ * The WebGLRenderer draws the scene and all its content onto a webGL enabled canvas. This renderer
+ * should be used for browsers that support webGL. This Render works by automatically managing webGLBatchs.
+ * So no need for Sprite Batches or Sprite Clouds.
+ * Don't forget to add the view to your DOM or you will not see anything :)
+ *
+ * @class
+ * @memberof PIXI
+ * @extends PIXI.SystemRenderer
+ * @param [width=0] {number} the width of the canvas view
+ * @param [height=0] {number} the height of the canvas view
+ * @param [options] {object} The optional renderer parameters
+ * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional
+ * @param [options.transparent=false] {boolean} If the render view is transparent, default false
+ * @param [options.autoResize=false] {boolean} If the render view is automatically resized, default false
+ * @param [options.antialias=false] {boolean} sets antialias. If not available natively then FXAA antialiasing is used
+ * @param [options.forceFXAA=false] {boolean} forces FXAA antialiasing to be used over native. FXAA is faster, but may not always lok as great
+ * @param [options.resolution=1] {number} the resolution of the renderer retina would be 2
+ * @param [options.clearBeforeRender=true] {boolean} This sets if the CanvasRenderer will clear the canvas or
+ *      not before the new render pass.
+ * @param [options.preserveDrawingBuffer=false] {boolean} enables drawing buffer preservation, enable this if
+ *      you need to call toDataUrl on the webgl context.
+ */
+function WebGLRenderer(width, height, options)
+{
+    options = options || {};
+
+    SystemRenderer.call(this, 'WebGL', width, height, options);
 
     /**
-     * Can this object be rendered
+     * The type of this renderer as a standardised const
      *
-     * @property renderable
-     * @type Boolean
-     */
-    this.renderable = false;
-
-    /**
-     * [read-only] The display object container that contains this display object.
+     * @member {number}
      *
-     * @property parent
-     * @type DisplayObjectContainer
-     * @readOnly
      */
-    this.parent = null;
+    this.type = CONST.RENDERER_TYPE.WEBGL;
 
-    /**
-     * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.
-     *
-     * @property stage
-     * @type Stage
-     * @readOnly
-     */
-    this.stage = null;
+    this.handleContextLost = this.handleContextLost.bind(this);
+    this.handleContextRestored = this.handleContextRestored.bind(this);
 
-    /**
-     * [read-only] The multiplied alpha of the displayObject
-     *
-     * @property worldAlpha
-     * @type Number
-     * @readOnly
-     */
-    this.worldAlpha = 1;
+    this.view.addEventListener('webglcontextlost', this.handleContextLost, false);
+    this.view.addEventListener('webglcontextrestored', this.handleContextRestored, false);
 
+    //TODO possibility to force FXAA as it may offer better performance?
     /**
-     * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property
+     * Does it use FXAA ?
      *
-     * @property _interactive
-     * @type Boolean
-     * @readOnly
+     * @member {boolean}
      * @private
      */
-    this._interactive = false;
-
-    /**
-     * This is the cursor that will be used when the mouse is over this object. To enable this the element must have interaction = true and buttonMode = true
-     * 
-     * @property defaultCursor
-     * @type String
-     *
-    */
-    this.defaultCursor = 'pointer';
+    this._useFXAA = !!options.forceFXAA && options.antialias;
 
     /**
-     * [read-only] Current transform of the object based on world (parent) factors
+     * The fxaa filter
      *
-     * @property worldTransform
-     * @type Mat3
-     * @readOnly
+     * @member {FXAAFilter}
      * @private
      */
-    this.worldTransform = new PIXI.Matrix();
+    this._FXAAFilter = null;
 
     /**
-     * [NYI] Unknown
+     * The options passed in to create a new webgl context.
      *
-     * @property color
-     * @type Array<>
+     * @member {object}
      * @private
      */
-    this.color = [];
+    this._contextOptions = {
+        alpha: this.transparent,
+        antialias: options.antialias,
+        premultipliedAlpha: this.transparent && this.transparent !== 'notMultiplied',
+        stencil: true,
+        preserveDrawingBuffer: options.preserveDrawingBuffer
+    };
 
     /**
-     * [NYI] Holds whether or not this object is dynamic, for rendering optimization
+     * Counter for the number of draws made each frame
      *
-     * @property dynamic
-     * @type Boolean
-     * @private
+     * @member {number}
      */
-    this.dynamic = true;
-
-    // cached sin rotation and cos rotation
-    this._sr = 0;
-    this._cr = 1;
+    this.drawCount = 0;
 
     /**
-     * The area the filter is applied to 
+     * Deals with managing the shader programs and their attribs.
      *
-     * @property filterArea
-     * @type Rectangle
+     * @member {ShaderManager}
      */
-    this.filterArea = new PIXI.Rectangle(0,0,1,1);
+    this.shaderManager = new ShaderManager(this);
 
     /**
-     * The original, cached bounds of the object
-     *
-     * @property _bounds
-     * @type Rectangle
-     * @private
-     */
-    this._bounds = new PIXI.Rectangle(0, 0, 1, 1);
-    /**
-     * The most up-to-date bounds of the object
-     *
-     * @property _currentBounds
-     * @type Rectangle
-     * @private
-     */
-    this._currentBounds = null;
-    /**
-     * The original, cached mask of the object
+     * Manages the masks using the stencil buffer.
      *
-     * @property _currentBounds
-     * @type Rectangle
-     * @private
-     */
-    this._mask = null;
-
-    /*
-     * MOUSE Callbacks
+     * @member {MaskManager}
      */
+    this.maskManager = new MaskManager(this);
 
     /**
-     * A callback that is used when the users clicks on the displayObject with their mouse
-     * @method click
-     * @param interactionData {InteractionData}
+     * Manages the stencil buffer.
+     *
+     * @member {StencilManager}
      */
+    this.stencilManager = new StencilManager(this);
 
     /**
-     * A callback that is used when the user clicks the mouse down over the sprite
-     * @method mousedown
-     * @param interactionData {InteractionData}
+     * Manages the filters.
+     *
+     * @member {FilterManager}
      */
+    this.filterManager = new FilterManager(this);
 
-    /**
-     * A callback that is used when the user releases the mouse that was over the displayObject
-     * for this callback to be fired the mouse must have been pressed down over the displayObject
-     * @method mouseup
-     * @param interactionData {InteractionData}
-     */
 
     /**
-     * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject
-     * for this callback to be fired, The touch must have started over the displayObject
-     * @method mouseupoutside
-     * @param interactionData {InteractionData}
+     * Manages the blendModes
+     * @member {BlendModeManager}
      */
+    this.blendModeManager = new BlendModeManager(this);
 
     /**
-     * A callback that is used when the users mouse rolls over the displayObject
-     * @method mouseover
-     * @param interactionData {InteractionData}
+     * Holds the current render target
+     * @member {Object}
      */
+    this.currentRenderTarget = null;
 
     /**
-     * A callback that is used when the users mouse leaves the displayObject
-     * @method mouseout
-     * @param interactionData {InteractionData}
-     */
-
-
-    /*
-     * TOUCH Callbacks
+     * object renderer @alvin
+     * @member {ObjectRenderer}
      */
+    this.currentRenderer = new ObjectRenderer(this);
 
-    /**
-     * A callback that is used when the users taps on the sprite with their finger
-     * basically a touch version of click
-     * @method tap
-     * @param interactionData {InteractionData}
-     */
+    this.initPlugins();
 
-    /**
-     * A callback that is used when the user touches over the displayObject
-     * @method touchstart
-     * @param interactionData {InteractionData}
-     */
+    // initialize the context so it is ready for the managers.
+    this._createContext();
+    this._initContext();
 
-    /**
-     * A callback that is used when the user releases a touch over the displayObject
-     * @method touchend
-     * @param interactionData {InteractionData}
-     */
+    // map some webGL blend modes..
+    this._mapBlendModes();
 
     /**
-     * A callback that is used when the user releases the touch that was over the displayObject
-     * for this callback to be fired, The touch must have started over the sprite
-     * @method touchendoutside
-     * @param interactionData {InteractionData}
+     * An array of render targets
+     * @member {Array}
+     * @private
      */
-};
+    this._renderTargetStack = [];
+}
 
 // constructor
-PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject;
+WebGLRenderer.prototype = Object.create(SystemRenderer.prototype);
+WebGLRenderer.prototype.constructor = WebGLRenderer;
+module.exports = WebGLRenderer;
+utils.pluginTarget.mixin(WebGLRenderer);
 
-/**
- * [Deprecated] Indicates if the sprite will have touch and mouse interactivity. It is false by default
- * Instead of using this function you can now simply set the interactive property to true or false
- *
- * @method setInteractive
- * @param interactive {Boolean}
- * @deprecated Simply set the `interactive` property directly
- */
-PIXI.DisplayObject.prototype.setInteractive = function(interactive)
-{
-    this.interactive = interactive;
-};
+WebGLRenderer.glContextId = 0;
 
-/**
- * Indicates if the sprite will have touch and mouse interactivity. It is false by default
- *
- * @property interactive
- * @type Boolean
- * @default false
- */
-Object.defineProperty(PIXI.DisplayObject.prototype, 'interactive', {
-    get: function() {
-        return this._interactive;
-    },
-    set: function(value) {
-        this._interactive = value;
+WebGLRenderer.prototype._createContext = function () {
+    var gl = this.view.getContext('webgl', this._contextOptions) || this.view.getContext('experimental-webgl', this._contextOptions);
+    this.gl = gl;
 
-        // TODO more to be done here..
-        // need to sort out a re-crawl!
-        if(this.stage)this.stage.dirty = true;
+    if (!gl)
+    {
+        // fail, not able to get a context
+        throw new Error('This browser does not support webGL. Try using the canvas renderer');
     }
-});
+
+    this.glContextId = WebGLRenderer.glContextId++;
+    gl.id = this.glContextId;
+    gl.renderer = this;
+};
 
 /**
- * [read-only] Indicates if the sprite is globaly visible.
- *
- * @property worldVisible
- * @type Boolean
+ * Creates the WebGL context
+ * @private
  */
-Object.defineProperty(PIXI.DisplayObject.prototype, 'worldVisible', {
-    get: function() {
-        var item = this;
-
-        do
-        {
-            if(!item.visible)return false;
-            item = item.parent;
-        }
-        while(item);
+WebGLRenderer.prototype._initContext = function ()
+{
+    var gl = this.gl;
 
-        return true;
-    }
-});
+    // set up the default pixi settings..
+    gl.disable(gl.DEPTH_TEST);
+    gl.disable(gl.CULL_FACE);
+    gl.enable(gl.BLEND);
 
-/**
- * Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it.
- * In PIXI a regular mask must be a PIXI.Graphics object. This allows for much faster masking in canvas as it utilises shape clipping.
- * To remove a mask, set this property to null.
- *
- * @property mask
- * @type Graphics
- */
-Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', {
-    get: function() {
-        return this._mask;
-    },
-    set: function(value) {
+    this.renderTarget = new RenderTarget(gl, this.width, this.height, null, this.resolution, true);
 
-        if(this._mask)this._mask.isMask = false;
-        this._mask = value;
-        if(this._mask)this._mask.isMask = true;
-    }
-});
+    this.setRenderTarget(this.renderTarget);
 
-/**
- * Sets the filters for the displayObject.
- * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer.
- * To remove filters simply set this property to 'null'
- * @property filters
- * @type Array An array of filters
- */
-Object.defineProperty(PIXI.DisplayObject.prototype, 'filters', {
-    get: function() {
-        return this._filters;
-    },
-    set: function(value) {
+    this.emit('context', gl);
 
-        if(value)
-        {
-            // now put all the passes in one place..
-            var passes = [];
-            for (var i = 0; i < value.length; i++)
-            {
-                var filterPasses = value[i].passes;
-                for (var j = 0; j < filterPasses.length; j++)
-                {
-                    passes.push(filterPasses[j]);
-                }
-            }
+    // setup the width/height properties and gl viewport
+    this.resize(this.width, this.height);
 
-            // TODO change this as it is legacy
-            this._filterBlock = {target:this, filterPasses:passes};
-        }
+    if(!this._useFXAA)
+    {
+        this._useFXAA = (this._contextOptions.antialias && ! gl.getContextAttributes().antialias);
+    }
 
-        this._filters = value;
+
+    if(this._useFXAA)
+    {
+        window.console.warn('FXAA antialiasing being used instead of native antialiasing');
+        this._FXAAFilter = [new FXAAFilter()];
     }
-});
+};
 
-/*
- * Updates the object transform for rendering
+/**
+ * Renders the object to its webGL view
  *
- * @method updateTransform
- * @private
+ * @param object {DisplayObject} the object to be rendered
  */
-PIXI.DisplayObject.prototype.updateTransform = function()
+WebGLRenderer.prototype.render = function (object)
 {
-    // TODO OPTIMIZE THIS!! with dirty
-    if(this.rotation !== this.rotationCache)
+    // no point rendering if our context has been blown up!
+    if (this.gl.isContextLost())
     {
+        return;
+    }
 
-        this.rotationCache = this.rotation;
-        this._sr =  Math.sin(this.rotation);
-        this._cr =  Math.cos(this.rotation);
+    this.drawCount = 0;
+
+    this._lastObjectRendered = object;
+
+    if(this._useFXAA)
+    {
+        this._FXAAFilter[0].uniforms.resolution.value.x = this.width;
+        this._FXAAFilter[0].uniforms.resolution.value.y = this.height;
+        object.filterArea = this.renderTarget.size;
+        object.filters = this._FXAAFilter;
     }
 
-   // var localTransform = this.localTransform//.toArray();
-    var parentTransform = this.parent.worldTransform;//.toArray();
-    var worldTransform = this.worldTransform;//.toArray();
-    var px = this.pivot.x;
-    var py = this.pivot.y;
+    var cacheParent = object.parent;
+    object.parent = this._tempDisplayObjectParent;
 
-    var a00 = this._cr * this.scale.x,
-        a01 = -this._sr * this.scale.y,
-        a10 = this._sr * this.scale.x,
-        a11 = this._cr * this.scale.y,
-        a02 = this.position.x - a00 * px - py * a01,
-        a12 = this.position.y - a11 * py - px * a10,
-        b00 = parentTransform.a, b01 = parentTransform.b,
-        b10 = parentTransform.c, b11 = parentTransform.d;
+    // update the scene graph
+    object.updateTransform();
 
-    worldTransform.a = b00 * a00 + b01 * a10;
-    worldTransform.b = b00 * a01 + b01 * a11;
-    worldTransform.tx = b00 * a02 + b01 * a12 + parentTransform.tx;
+    object.parent = cacheParent;
 
-    worldTransform.c = b10 * a00 + b11 * a10;
-    worldTransform.d = b10 * a01 + b11 * a11;
-    worldTransform.ty = b10 * a02 + b11 * a12 + parentTransform.ty;
+    var gl = this.gl;
 
-    this.worldAlpha = this.alpha * this.parent.worldAlpha;
-};
+    // make sure we are bound to the main frame buffer
+    this.setRenderTarget(this.renderTarget);
 
-/**
- * Retrieves the bounds of the displayObject as a rectangle object
- *
- * @method getBounds
- * @return {Rectangle} the rectangular bounding area
- */
-PIXI.DisplayObject.prototype.getBounds = function( matrix )
-{
-    matrix = matrix;//just to get passed js hinting (and preserve inheritance)
-    return PIXI.EmptyRectangle;
-};
+    if (this.clearBeforeRender)
+    {
+        if (this.transparent)
+        {
+            gl.clearColor(0, 0, 0, 0);
+        }
+        else
+        {
+            gl.clearColor(this._backgroundColorRgb[0], this._backgroundColorRgb[1], this._backgroundColorRgb[2], 1);
+        }
 
-/**
- * Retrieves the local bounds of the displayObject as a rectangle object
- *
- * @method getLocalBounds
- * @return {Rectangle} the rectangular bounding area
- */
-PIXI.DisplayObject.prototype.getLocalBounds = function()
-{
-    //var matrixCache = this.worldTransform;
+        gl.clear(gl.COLOR_BUFFER_BIT);
+    }
 
-    return this.getBounds(PIXI.identityMatrix);///PIXI.EmptyRectangle();
+    this.renderDisplayObject(object, this.renderTarget);//this.projection);
 };
 
 /**
- * Sets the object's stage reference, the stage this object is connected to
+ * Renders a Display Object.
+ *
+ * @param displayObject {DisplayObject} The DisplayObject to render
+ * @param renderTarget {RenderTarget} The render target to use to render this display object
  *
- * @method setStageReference
- * @param stage {Stage} the stage that the object will have as its current stage reference
  */
-PIXI.DisplayObject.prototype.setStageReference = function(stage)
+WebGLRenderer.prototype.renderDisplayObject = function (displayObject, renderTarget, clear)//projection, buffer)
 {
-    this.stage = stage;
-    if(this._interactive)this.stage.dirty = true;
-};
+    // TODO is this needed...
+    //this.blendModeManager.setBlendMode(CONST.BLEND_MODES.NORMAL);
+    this.setRenderTarget(renderTarget);
 
-/**
-* Renders the object using the WebGL renderer
-*
-* @method _renderWebGL
-* @param renderSession {RenderSession} 
-* @private
-*/
-PIXI.DisplayObject.prototype._renderWebGL = function(renderSession)
-{
-    // OVERWRITE;
-    // this line is just here to pass jshinting :)
-    renderSession = renderSession;
-};
+    if(clear)
+    {
+        renderTarget.clear();
+    }
 
-/**
-* Renders the object using the Canvas renderer
-*
-* @method _renderCanvas
-* @param renderSession {RenderSession} 
-* @private
-*/
-PIXI.DisplayObject.prototype._renderCanvas = function(renderSession)
-{
-    // OVERWRITE;
-    // this line is just here to pass jshinting :)
-    renderSession = renderSession;
+    // start the filter manager
+    this.filterManager.setFilterStack( renderTarget.filterStack );
+
+    // render the scene!
+    displayObject.renderWebGL(this);
+
+    // finish the current renderer..
+    this.currentRenderer.flush();
 };
 
 /**
- * The position of the displayObject on the x axis relative to the local coordinates of the parent.
+ * Changes the current renderer to the one given in parameter
  *
- * @property x
- * @type Number
- */
-Object.defineProperty(PIXI.DisplayObject.prototype, 'x', {
-    get: function() {
-        return  this.position.x;
-    },
-    set: function(value) {
-        this.position.x = value;
-    }
-});
-
-/**
- * The position of the displayObject on the y axis relative to the local coordinates of the parent.
+ * @param objectRenderer {Object} TODO @alvin
  *
- * @property y
- * @type Number
  */
-Object.defineProperty(PIXI.DisplayObject.prototype, 'y', {
-    get: function() {
-        return  this.position.y;
-    },
-    set: function(value) {
-        this.position.y = value;
+WebGLRenderer.prototype.setObjectRenderer = function (objectRenderer)
+{
+    if (this.currentRenderer === objectRenderer)
+    {
+        return;
     }
-});
-
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
 
+    this.currentRenderer.stop();
+    this.currentRenderer = objectRenderer;
+    this.currentRenderer.start();
+};
 
 /**
- * A DisplayObjectContainer represents a collection of display objects.
- * It is the base class of all display objects that act as a container for other objects.
+ * Changes the current render target to the one given in parameter
+ *
+ * @param renderTarget {RenderTarget} the new render target
  *
- * @class DisplayObjectContainer
- * @extends DisplayObject
- * @constructor
  */
-PIXI.DisplayObjectContainer = function()
+WebGLRenderer.prototype.setRenderTarget = function (renderTarget)
 {
-    PIXI.DisplayObject.call( this );
-
-    /**
-     * [read-only] The array of children of this container.
-     *
-     * @property children
-     * @type Array<DisplayObject>
-     * @readOnly
-     */
-    this.children = [];
+    if( this.currentRenderTarget === renderTarget)
+    {
+        return;
+    }
+    // TODO - maybe down the line this should be a push pos thing? Leaving for now though.
+    this.currentRenderTarget = renderTarget;
+    this.currentRenderTarget.activate();
+    this.stencilManager.setMaskStack( renderTarget.stencilMaskStack );
 };
 
-// constructor
-PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype );
-PIXI.DisplayObjectContainer.prototype.constructor = PIXI.DisplayObjectContainer;
 
 /**
- * The width of the displayObjectContainer, setting this will actually modify the scale to achieve the value set
+ * Resizes the webGL view to the specified width and height.
  *
- * @property width
- * @type Number
+ * @param width {number} the new width of the webGL view
+ * @param height {number} the new height of the webGL view
  */
+WebGLRenderer.prototype.resize = function (width, height)
+{
+    SystemRenderer.prototype.resize.call(this, width, height);
 
- /*
-Object.defineProperty(PIXI.DisplayObjectContainer.prototype, 'width', {
-    get: function() {
-        return this.scale.x * this.getLocalBounds().width;
-    },
-    set: function(value) {
-        this.scale.x = value / (this.getLocalBounds().width/this.scale.x);
-        this._width = value;
+    this.filterManager.resize(width, height);
+    this.renderTarget.resize(width, height);
+
+    if(this.currentRenderTarget === this.renderTarget)
+    {
+        this.renderTarget.activate();
+        this.gl.viewport(0, 0, this.width, this.height);
     }
-});
-*/
+};
 
 /**
- * The height of the displayObjectContainer, setting this will actually modify the scale to achieve the value set
+ * Updates and/or Creates a WebGL texture for the renderer's context.
  *
- * @property height
- * @type Number
+ * @param texture {BaseTexture|Texture} the texture to update
  */
+WebGLRenderer.prototype.updateTexture = function (texture)
+{
+    texture = texture.baseTexture || texture;
 
-/*
-Object.defineProperty(PIXI.DisplayObjectContainer.prototype, 'height', {
-    get: function() {
-        return  this.scale.y * this.getLocalBounds().height;
-    },
-    set: function(value) {
-        this.scale.y = value / (this.getLocalBounds().height/this.scale.y);
-        this._height = value;
+    if (!texture.hasLoaded)
+    {
+        return;
     }
-});
-*/
 
-/**
- * Adds a child to the container.
- *
- * @method addChild
- * @param child {DisplayObject} The DisplayObject to add to the container
- */
-PIXI.DisplayObjectContainer.prototype.addChild = function(child)
-{
-    this.addChildAt(child, this.children.length);
-};
+    var gl = this.gl;
 
-/**
- * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown
- *
- * @method addChildAt
- * @param child {DisplayObject} The child to add
- * @param index {Number} The index to place the child in
- */
-PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
-{
-    if(index >= 0 && index <= this.children.length)
+    if (!texture._glTextures[gl.id])
     {
-        if(child.parent)
-        {
-            child.parent.removeChild(child);
-        }
+        texture._glTextures[gl.id] = gl.createTexture();
+        texture.on('update', this.updateTexture, this);
+        texture.on('dispose', this.destroyTexture, this);
+    }
 
-        child.parent = this;
 
-        this.children.splice(index, 0, child);
+    gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);
+
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
+
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === CONST.SCALE_MODES.LINEAR ? gl.LINEAR : gl.NEAREST);
 
-        if(this.stage)child.setStageReference(this.stage);
+
+    if (texture.mipmap && texture.isPowerOfTwo)
+    {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.SCALE_MODES.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST);
+        gl.generateMipmap(gl.TEXTURE_2D);
     }
     else
     {
-        throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === CONST.SCALE_MODES.LINEAR ? gl.LINEAR : gl.NEAREST);
     }
-};
 
-/**
- * [NYI] Swaps the depth of 2 displayObjects
- *
- * @method swapChildren
- * @param child {DisplayObject}
- * @param child2 {DisplayObject}
- * @private
- */
-PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
-{
-    if(child === child2) {
-        return;
+    if (!texture.isPowerOfTwo)
+    {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
     }
-
-    var index1 = this.children.indexOf(child);
-    var index2 = this.children.indexOf(child2);
-
-    if(index1 < 0 || index2 < 0) {
-        throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.');
+    else
+    {
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
     }
 
-    this.children[index1] = child2;
-    this.children[index2] = child;
-    
+    return  texture._glTextures[gl.id];
 };
 
 /**
- * Returns the child at the specified index
+ * Deletes the texture from WebGL
  *
- * @method getChildAt
- * @param index {Number} The index to get the child from
+ * @param texture {BaseTexture|Texture} the texture to destroy
  */
-PIXI.DisplayObjectContainer.prototype.getChildAt = function(index)
+WebGLRenderer.prototype.destroyTexture = function (texture)
 {
-    if(index >= 0 && index < this.children.length)
+    texture = texture.baseTexture || texture;
+
+    if (!texture.hasLoaded)
     {
-        return this.children[index];
+        return;
     }
-    else
+
+    if (texture._glTextures[this.gl.id])
     {
-        throw new Error('The supplied DisplayObjects must be a child of the caller ' + this);
+        this.gl.deleteTexture(texture._glTextures[this.gl.id]);
     }
 };
 
 /**
- * Removes a child from the container.
+ * Handles a lost webgl context
  *
- * @method removeChild
- * @param child {DisplayObject} The DisplayObject to remove
+ * @param event {Event}
+ * @private
  */
-PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
+WebGLRenderer.prototype.handleContextLost = function (event)
 {
-    var index = this.children.indexOf( child );
-    if ( index !== -1 )
-    {
-        // update the stage reference..
-        if(this.stage)child.removeStageReference();
-
-        child.parent = undefined;
-        this.children.splice( index, 1 );
-    }
-    else
-    {
-        throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this);
-    }
+    event.preventDefault();
 };
 
-
 /**
-* Removes all the children 
-*
-* @method removeAll
-* NOT tested yet
-*/
-/* PIXI.DisplayObjectContainer.prototype.removeAll = function()
+ * Handles a restored webgl context
+ *
+ * @param event {Event}
+ * @private
+ */
+WebGLRenderer.prototype.handleContextRestored = function ()
 {
+    this._initContext();
 
-
-    for(var i = 0 , j = this.children.length; i < j; i++)
+    // empty all the old gl textures as they are useless now
+    for (var key in utils.BaseTextureCache)
     {
-        this.removeChild(this.children[i]);
+        utils.BaseTextureCache[key]._glTextures.length = 0;
     }
-    
 };
-*/
-/*
- * Updates the container's childrens transform for rendering
+
+/**
+ * Removes everything from the renderer (event listeners, spritebatch, etc...)
  *
- * @method updateTransform
- * @private
+ * @param [removeView=false] {boolean} Removes the Canvas element from the DOM.
  */
-PIXI.DisplayObjectContainer.prototype.updateTransform = function()
+WebGLRenderer.prototype.destroy = function (removeView)
 {
-    //this._currentBounds = null;
+    this.destroyPlugins();
 
-    if(!this.visible)return;
+    // remove listeners
+    this.view.removeEventListener('webglcontextlost', this.handleContextLost);
+    this.view.removeEventListener('webglcontextrestored', this.handleContextRestored);
 
-    PIXI.DisplayObject.prototype.updateTransform.call( this );
+    // call base destroy
+    SystemRenderer.prototype.destroy.call(this, removeView);
 
-    for(var i=0,j=this.children.length; i<j; i++)
-    {
-        this.children[i].updateTransform();
-    }
+    this.uuid = 0;
+
+    // destroy the managers
+    this.shaderManager.destroy();
+    this.maskManager.destroy();
+    this.stencilManager.destroy();
+    this.filterManager.destroy();
+
+    this.shaderManager = null;
+    this.maskManager = null;
+    this.filterManager = null;
+    this.blendModeManager = null;
+
+    this.handleContextLost = null;
+    this.handleContextRestored = null;
+
+    this._contextOptions = null;
+
+    this.drawCount = 0;
+
+    this.gl = null;
 };
 
 /**
- * Retrieves the bounds of the displayObjectContainer as a rectangle object
+ * Maps Pixi blend modes to WebGL blend modes.
  *
- * @method getBounds
- * @return {Rectangle} the rectangular bounding area
+ * @private
  */
-PIXI.DisplayObjectContainer.prototype.getBounds = function(matrix)
+WebGLRenderer.prototype._mapBlendModes = function ()
 {
-    if(this.children.length === 0)return PIXI.EmptyRectangle;
+    var gl = this.gl;
 
-    // TODO the bounds have already been calculated this render session so return what we have
-    if(matrix)
+    if (!this.blendModes)
     {
-        var matrixCache = this.worldTransform;
-        this.worldTransform = matrix;
-        this.updateTransform();
-        this.worldTransform = matrixCache;
-    }
+        this.blendModes = {};
 
-    var minX = Infinity;
-    var minY = Infinity;
+        this.blendModes[CONST.BLEND_MODES.NORMAL]        = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
+        this.blendModes[CONST.BLEND_MODES.ADD]           = [gl.SRC_ALPHA, gl.DST_ALPHA];
+        this.blendModes[CONST.BLEND_MODES.MULTIPLY]      = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA];
+        this.blendModes[CONST.BLEND_MODES.SCREEN]        = [gl.SRC_ALPHA, gl.ONE];
+        this.blendModes[CONST.BLEND_MODES.OVERLAY]       = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
+        this.blendModes[CONST.BLEND_MODES.DARKEN]        = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
+        this.blendModes[CONST.BLEND_MODES.LIGHTEN]       = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
+        this.blendModes[CONST.BLEND_MODES.COLOR_DODGE]   = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
+        this.blendModes[CONST.BLEND_MODES.COLOR_BURN]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
+        this.blendModes[CONST.BLEND_MODES.HARD_LIGHT]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
+        this.blendModes[CONST.BLEND_MODES.SOFT_LIGHT]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
+        this.blendModes[CONST.BLEND_MODES.DIFFERENCE]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
+        this.blendModes[CONST.BLEND_MODES.EXCLUSION]     = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
+        this.blendModes[CONST.BLEND_MODES.HUE]           = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
+        this.blendModes[CONST.BLEND_MODES.SATURATION]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
+        this.blendModes[CONST.BLEND_MODES.COLOR]         = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
+        this.blendModes[CONST.BLEND_MODES.LUMINOSITY]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
+    }
+};
 
-    var maxX = -Infinity;
-    var maxY = -Infinity;
+},{"../../const":22,"../../utils":74,"../SystemRenderer":42,"./filters/FXAAFilter":50,"./managers/BlendModeManager":52,"./managers/FilterManager":53,"./managers/MaskManager":54,"./managers/ShaderManager":55,"./managers/StencilManager":56,"./utils/ObjectRenderer":62,"./utils/RenderTarget":64}],49:[function(require,module,exports){
+var DefaultShader = require('../shaders/TextureShader');
 
-    var childBounds;
-    var childMaxX;
-    var childMaxY;
+/**
+ * This is the base class for creating a PIXI filter. Currently only WebGL supports filters.
+ * If you want to make a custom filter this should be your base class.
+ *
+ * @class
+ * @memberof PIXI
+ * @param vertexSrc {string|string[]} The vertex shader source as an array of strings.
+ * @param fragmentSrc {string|string[]} The fragment shader source as an array of strings.
+ * @param uniforms {object} An object containing the uniforms for this filter.
+ */
+function AbstractFilter(vertexSrc, fragmentSrc, uniforms)
+{
 
-    var childVisible = false;
+    /**
+     * An array of shaders
+     * @member {Shader[]}
+     * @private
+     */
+    this.shaders = [];
 
-    for(var i=0,j=this.children.length; i<j; i++)
-    {
-        var child = this.children[i];
-        
-        if(!child.visible)continue;
+    /**
+     * The extra padding that the filter might need
+     * @member {number}
+     */
+    this.padding = 0;
 
-        childVisible = true;
+    /**
+     * The uniforms as an object
+     * @member {object}
+     */
+    this.uniforms = uniforms || {};
 
-        childBounds = this.children[i].getBounds( matrix );
-     
-        minX = minX < childBounds.x ? minX : childBounds.x;
-        minY = minY < childBounds.y ? minY : childBounds.y;
 
-        childMaxX = childBounds.width + childBounds.x;
-        childMaxY = childBounds.height + childBounds.y;
+    /**
+     * The code of the vertex shader
+     * @member {string[]}
+     * @private
+     */
+    this.vertexSrc = vertexSrc || DefaultShader.defaultVertexSrc;
 
-        maxX = maxX > childMaxX ? maxX : childMaxX;
-        maxY = maxY > childMaxY ? maxY : childMaxY;
-    }
+    /**
+     * The code of the frament shader
+     * @member {string[]}
+     * @private
+     */
+    this.fragmentSrc = fragmentSrc || DefaultShader.defaultFragmentSrc;
 
-    if(!childVisible)
-        return PIXI.EmptyRectangle;
+    //TODO a reminder - would be cool to have lower res filters as this would give better performance.
 
-    var bounds = this._bounds;
+    //typeof fragmentSrc === 'string' ? fragmentSrc.split('') : (fragmentSrc || []);
 
-    bounds.x = minX;
-    bounds.y = minY;
-    bounds.width = maxX - minX;
-    bounds.height = maxY - minY;
+}
 
-    // TODO: store a reference so that if this function gets called again in the render cycle we do not have to recalculate
-    //this._currentBounds = bounds;
-   
-    return bounds;
-};
+AbstractFilter.prototype.constructor = AbstractFilter;
+module.exports = AbstractFilter;
 
-PIXI.DisplayObjectContainer.prototype.getLocalBounds = function()
+/*
+ * Grabs a shader from the current renderer
+ * @param renderer {WebGLRenderer} The renderer to retrieve the shader from
+ *
+ */
+AbstractFilter.prototype.getShader = function (renderer)
 {
-    var matrixCache = this.worldTransform;
+    var gl = renderer.gl;
 
-    this.worldTransform = PIXI.identityMatrix;
+    var shader = this.shaders[gl.id];
 
-    for(var i=0,j=this.children.length; i<j; i++)
+    if (!shader)
     {
-        this.children[i].updateTransform();
-    }
+        shader = new DefaultShader(renderer.shaderManager,
+            this.vertexSrc,
+            this.fragmentSrc,
+            this.uniforms,
+            this.attributes
+        );
 
-    var bounds = this.getBounds();
-
-    this.worldTransform = matrixCache;
+        this.shaders[gl.id] = shader;
+    }
 
-    return bounds;
+    return shader;
 };
 
-/**
- * Sets the container's stage reference, the stage this object is connected to
- *
- * @method setStageReference
- * @param stage {Stage} the stage that the container will have as its current stage reference
+/*
+ * Applies the filter
+ * @param renderer {WebGLRenderer} The renderer to retrieve the filter from
+ * @param input {RenderTarget}
+ * @param output {RenderTarget}
+ * @param clear {boolean} Whether or not we want to clear the outputTarget
  */
-PIXI.DisplayObjectContainer.prototype.setStageReference = function(stage)
+AbstractFilter.prototype.applyFilter = function (renderer, input, output, clear)
 {
-    this.stage = stage;
-    if(this._interactive)this.stage.dirty = true;
+    var shader = this.getShader(renderer);
 
-    for(var i=0,j=this.children.length; i<j; i++)
-    {
-        var child = this.children[i];
-        child.setStageReference(stage);
-    }
+    renderer.filterManager.applyFilter(shader, input, output, clear);
 };
 
 /**
- * removes the current stage reference of the container
+ * Syncs a uniform between the class object and the shaders.
  *
- * @method removeStageReference
  */
-PIXI.DisplayObjectContainer.prototype.removeStageReference = function()
+AbstractFilter.prototype.syncUniform = function (uniform)
 {
-
-    for(var i=0,j=this.children.length; i<j; i++)
+    for (var i = 0, j = this.shaders.length; i < j; ++i)
     {
-        var child = this.children[i];
-        child.removeStageReference();
+        this.shaders[i].syncUniform(uniform);
     }
+};
 
-    if(this._interactive)this.stage.dirty = true;
-    
-    this.stage = null;
+/*
+AbstractFilter.prototype.apply = function (frameBuffer)
+{
+    // TODO :)
 };
+*/
+
+},{"../shaders/TextureShader":61}],50:[function(require,module,exports){
+var AbstractFilter = require('./AbstractFilter');
+// @see https://github.com/substack/brfs/issues/25
+
 
 /**
-* Renders the object using the WebGL renderer
-*
-* @method _renderWebGL
-* @param renderSession {RenderSession} 
-* @private
-*/
-PIXI.DisplayObjectContainer.prototype._renderWebGL = function(renderSession)
+ *
+ * Basic FXAA implementation based on the code on geeks3d.com with the
+ * modification that the texture2DLod stuff was removed since it's
+ * unsupported by WebGL.
+ *
+ * --
+ * From:
+ * https://github.com/mitsuhiko/webgl-meincraft
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI
+ *
+ */
+function FXAAFilter()
 {
-    if(!this.visible || this.alpha <= 0)return;
-    
-    var i,j;
-
-    if(this._mask || this._filters)
-    {
-        if(this._mask)
+    AbstractFilter.call(this,
+        // vertex shader
+        "\nprecision mediump float;\n\nattribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\nattribute vec4 aColor;\n\nuniform mat3 projectionMatrix;\nuniform vec2 resolution;\n\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\n\nvarying vec2 vResolution;\n\n//texcoords computed in vertex step\n//to avoid dependent texture reads\nvarying vec2 v_rgbNW;\nvarying vec2 v_rgbNE;\nvarying vec2 v_rgbSW;\nvarying vec2 v_rgbSE;\nvarying vec2 v_rgbM;\n\n\nvoid texcoords(vec2 fragCoord, vec2 resolution,\n            out vec2 v_rgbNW, out vec2 v_rgbNE,\n            out vec2 v_rgbSW, out vec2 v_rgbSE,\n            out vec2 v_rgbM) {\n    vec2 inverseVP = 1.0 / resolution.xy;\n    v_rgbNW = (fragCoord + vec2(-1.0, -1.0)) * inverseVP;\n    v_rgbNE = (fragCoord + vec2(1.0, -1.0)) * inverseVP;\n    v_rgbSW = (fragCoord + vec2(-1.0, 1.0)) * inverseVP;\n    v_rgbSE = (fragCoord + vec2(1.0, 1.0)) * inverseVP;\n    v_rgbM = vec2(fragCoord * inverseVP);\n}\n\nvoid main(void){\n   gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n   vTextureCoord = aTextureCoord;\n   vColor = vec4(aColor.rgb * aColor.a, aColor.a);\n   vResolution = resolution;\n\n   //compute the texture coords and send them to varyings\n   texcoords(aTextureCoord * resolution, resolution, v_rgbNW, v_rgbNE, v_rgbSW, v_rgbSE, v_rgbM);\n}\n",
+        // fragment shader
+        "precision lowp float;\n\n\n/**\nBasic FXAA implementation based on the code on geeks3d.com with the\nmodification that the texture2DLod stuff was removed since it's\nunsupported by WebGL.\n\n--\n\nFrom:\nhttps://github.com/mitsuhiko/webgl-meincraft\n\nCopyright (c) 2011 by Armin Ronacher.\n\nSome rights reserved.\n\nRedistribution and use in source and binary forms, with or without\nmodification, are permitted provided that the following conditions are\nmet:\n\n    * Redistributions of source code must retain the above copyright\n      notice, this list of conditions and the following disclaimer.\n\n    * Redistributions in binary form must reproduce the above\n      copyright notice, this list of conditions and the following\n      disclaimer in the documentation and/or other materials provided\n      with the distribution.\n\n    * The names of the contributors may not be used to endorse or\n      promote products derived from this software without specific\n      prior written permission.\n\nTHIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS\n\"AS IS\" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT\nLIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR\nA PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT\nOWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,\nSPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT\nLIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,\nDATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY\nTHEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE\nOF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n*/\n\n#ifndef FXAA_REDUCE_MIN\n    #define FXAA_REDUCE_MIN   (1.0/ 128.0)\n#endif\n#ifndef FXAA_REDUCE_MUL\n    #define FXAA_REDUCE_MUL   (1.0 / 8.0)\n#endif\n#ifndef FXAA_SPAN_MAX\n    #define FXAA_SPAN_MAX     8.0\n#endif\n\n//optimized version for mobile, where dependent\n//texture reads can be a bottleneck\nvec4 fxaa(sampler2D tex, vec2 fragCoord, vec2 resolution,\n            vec2 v_rgbNW, vec2 v_rgbNE,\n            vec2 v_rgbSW, vec2 v_rgbSE,\n            vec2 v_rgbM) {\n    vec4 color;\n    mediump vec2 inverseVP = vec2(1.0 / resolution.x, 1.0 / resolution.y);\n    vec3 rgbNW = texture2D(tex, v_rgbNW).xyz;\n    vec3 rgbNE = texture2D(tex, v_rgbNE).xyz;\n    vec3 rgbSW = texture2D(tex, v_rgbSW).xyz;\n    vec3 rgbSE = texture2D(tex, v_rgbSE).xyz;\n    vec4 texColor = texture2D(tex, v_rgbM);\n    vec3 rgbM  = texColor.xyz;\n    vec3 luma = vec3(0.299, 0.587, 0.114);\n    float lumaNW = dot(rgbNW, luma);\n    float lumaNE = dot(rgbNE, luma);\n    float lumaSW = dot(rgbSW, luma);\n    float lumaSE = dot(rgbSE, luma);\n    float lumaM  = dot(rgbM,  luma);\n    float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));\n    float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));\n\n    mediump vec2 dir;\n    dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));\n    dir.y =  ((lumaNW + lumaSW) - (lumaNE + lumaSE));\n\n    float dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) *\n                          (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN);\n\n    float rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);\n    dir = min(vec2(FXAA_SPAN_MAX, FXAA_SPAN_MAX),\n              max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX),\n              dir * rcpDirMin)) * inverseVP;\n\n    vec3 rgbA = 0.5 * (\n        texture2D(tex, fragCoord * inverseVP + dir * (1.0 / 3.0 - 0.5)).xyz +\n        texture2D(tex, fragCoord * inverseVP + dir * (2.0 / 3.0 - 0.5)).xyz);\n    vec3 rgbB = rgbA * 0.5 + 0.25 * (\n        texture2D(tex, fragCoord * inverseVP + dir * -0.5).xyz +\n        texture2D(tex, fragCoord * inverseVP + dir * 0.5).xyz);\n\n    float lumaB = dot(rgbB, luma);\n    if ((lumaB < lumaMin) || (lumaB > lumaMax))\n        color = vec4(rgbA, texColor.a);\n    else\n        color = vec4(rgbB, texColor.a);\n    return color;\n}\n\n\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\nvarying vec2 vResolution;\n\n//texcoords computed in vertex step\n//to avoid dependent texture reads\nvarying vec2 v_rgbNW;\nvarying vec2 v_rgbNE;\nvarying vec2 v_rgbSW;\nvarying vec2 v_rgbSE;\nvarying vec2 v_rgbM;\n\nuniform sampler2D uSampler;\n\n\nvoid main(void){\n\n    gl_FragColor = fxaa(uSampler, vTextureCoord * vResolution, vResolution, v_rgbNW, v_rgbNE, v_rgbSW, v_rgbSE, v_rgbM);\n\n}\n",
+        // uniforms
         {
-            renderSession.spriteBatch.stop();
-            renderSession.maskManager.pushMask(this.mask, renderSession);
-            renderSession.spriteBatch.start();
+            resolution: { type: 'v2', value: { x: 1, y: 1 } }
         }
+    );
 
-        if(this._filters)
-        {
-            renderSession.spriteBatch.flush();
-            renderSession.filterManager.pushFilter(this._filterBlock);
-        }
+}
 
-        // simple render children!
-        for(i=0,j=this.children.length; i<j; i++)
-        {
-            this.children[i]._renderWebGL(renderSession);
-        }
+FXAAFilter.prototype = Object.create(AbstractFilter.prototype);
+FXAAFilter.prototype.constructor = FXAAFilter;
+module.exports = FXAAFilter;
 
-        renderSession.spriteBatch.stop();
+FXAAFilter.prototype.applyFilter = function (renderer, input, output)
+{
+    var filterManager = renderer.filterManager;
 
-        if(this._filters)renderSession.filterManager.popFilter();
-        if(this._mask)renderSession.maskManager.popMask(renderSession);
-        
-        renderSession.spriteBatch.start();
-    }
-    else
-    {
-        // simple render children!
-        for(i=0,j=this.children.length; i<j; i++)
-        {
-            this.children[i]._renderWebGL(renderSession);
-        }
-    }
+    var shader = this.getShader( renderer );
+     // draw the filter...
+    filterManager.applyFilter(shader, input, output);
 };
 
-/**
-* Renders the object using the Canvas renderer
-*
-* @method _renderCanvas
-* @param renderSession {RenderSession} 
-* @private
-*/
-PIXI.DisplayObjectContainer.prototype._renderCanvas = function(renderSession)
-{
-    if(this.visible === false || this.alpha === 0)return;
+},{"./AbstractFilter":49}],51:[function(require,module,exports){
+var AbstractFilter = require('./AbstractFilter'),
+    math =  require('../../../math');
 
-    if(this._mask)
-    {
-        renderSession.maskManager.pushMask(this._mask, renderSession.context);
-    }
+// @see https://github.com/substack/brfs/issues/25
 
-    for(var i=0,j=this.children.length; i<j; i++)
-    {
-        var child = this.children[i];
-        child._renderCanvas(renderSession);
-    }
 
-    if(this._mask)
-    {
-        renderSession.maskManager.popMask(renderSession.context);
-    }
-};
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * The SpriteMaskFilter class
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI
+ * @param sprite {Sprite} the target sprite
  */
+function SpriteMaskFilter(sprite)
+{
+    var maskMatrix = new math.Matrix();
+
+    AbstractFilter.call(this,
+        "attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\nattribute vec4 aColor;\n\nuniform mat3 projectionMatrix;\nuniform mat3 otherMatrix;\n\nvarying vec2 vMaskCoord;\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\n\nvoid main(void)\n{\n    gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n    vTextureCoord = aTextureCoord;\n    vMaskCoord = ( otherMatrix * vec3( aTextureCoord, 1.0)  ).xy;\n    vColor = vec4(aColor.rgb * aColor.a, aColor.a);\n}\n",
+        "precision lowp float;\n\nvarying vec2 vMaskCoord;\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\n\nuniform sampler2D uSampler;\nuniform float alpha;\nuniform sampler2D mask;\n\nvoid main(void)\n{\n    // check clip! this will stop the mask bleeding out from the edges\n    vec2 text = abs( vMaskCoord - 0.5 );\n    text = step(0.5, text);\n    float clip = 1.0 - max(text.y, text.x);\n    vec4 original = texture2D(uSampler, vTextureCoord);\n    vec4 masky = texture2D(mask, vMaskCoord);\n    original *= (masky.r * masky.a * alpha * clip);\n    gl_FragColor = original;\n}\n",
+        {
+            mask:           { type: 'sampler2D', value: sprite._texture },
+            alpha:          { type: 'f', value: 1},
+            otherMatrix:    { type: 'mat3', value: maskMatrix.toArray(true) }
+        }
+    );
+
+    this.maskSprite = sprite;
+    this.maskMatrix = maskMatrix;
+}
+
+SpriteMaskFilter.prototype = Object.create(AbstractFilter.prototype);
+SpriteMaskFilter.prototype.constructor = SpriteMaskFilter;
+module.exports = SpriteMaskFilter;
 
 /**
- * The Sprite object is the base for all textured objects that are rendered to the screen
+ * Applies the filter ? @alvin
  *
- * @class Sprite
- * @extends DisplayObjectContainer
- * @constructor
- * @param texture {Texture} The texture for this sprite
- * 
- * A sprite can be created directly from an image like this : 
- * var sprite = nex PIXI.Sprite.FromImage('assets/image.png');
- * yourStage.addChild(sprite);
- * then obviously don't forget to add it to the stage you have already created
+ * @param renderer {WebGLRenderer} A reference to the WebGL renderer
+ * @param input {RenderTarget}
+ * @param output {RenderTarget}
  */
-PIXI.Sprite = function(texture)
+SpriteMaskFilter.prototype.applyFilter = function (renderer, input, output)
 {
-    PIXI.DisplayObjectContainer.call( this );
+    var filterManager = renderer.filterManager;
 
-    /**
-     * The anchor sets the origin point of the texture.
-     * The default is 0,0 this means the texture's origin is the top left
-     * Setting than anchor to 0.5,0.5 means the textures origin is centred
-     * Setting the anchor to 1,1 would mean the textures origin points will be the bottom right corner
-     *
-     * @property anchor
-     * @type Point
-     */
-    this.anchor = new PIXI.Point();
+    this.uniforms.mask.value = this.maskSprite._texture;
+
+    filterManager.calculateMappedMatrix(input.frame, this.maskSprite, this.maskMatrix);
+
+    this.uniforms.otherMatrix.value = this.maskMatrix.toArray(true);
+    this.uniforms.alpha.value = this.maskSprite.worldAlpha;
+
+    var shader = this.getShader(renderer);
+     // draw the filter...
+    filterManager.applyFilter(shader, input, output);
+};
 
-    /**
-     * The texture that the sprite is using
-     *
-     * @property texture
-     * @type Texture
-     */
-    this.texture = texture;
 
+Object.defineProperties(SpriteMaskFilter.prototype, {
     /**
-     * The width of the sprite (this is initially set by the texture)
+     * The texture used for the displacement map. Must be power of 2 sized texture.
      *
-     * @property _width
-     * @type Number
-     * @private
+     * @member {Texture}
+     * @memberof SpriteMaskFilter#
      */
-    this._width = 0;
+    map: {
+        get: function ()
+        {
+            return this.uniforms.mask.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.mask.value = value;
+        }
+    },
 
     /**
-     * The height of the sprite (this is initially set by the texture)
+     * The offset used to move the displacement map.
      *
-     * @property _height
-     * @type Number
-     * @private
+     * @member {Point}
+     * @memberof SpriteMaskFilter#
      */
-    this._height = 0;
+    offset: {
+        get: function()
+        {
+            return this.uniforms.offset.value;
+        },
+        set: function(value)
+        {
+            this.uniforms.offset.value = value;
+        }
+    }
+});
 
+},{"../../../math":32,"./AbstractFilter":49}],52:[function(require,module,exports){
+var WebGLManager = require('./WebGLManager');
+
+/**
+ * @class
+ * @memberof PIXI
+ * @extends PIXI.WebGlManager
+ * @param renderer {WebGLRenderer} The renderer this manager works for.
+ */
+function BlendModeManager(renderer)
+{
+    WebGLManager.call(this, renderer);
 
     /**
-     * The tint applied to the sprite. This is a hex value
-     *
-     * @property tint
-     * @type Number
-     * @default 0xFFFFFF
-     */
-    this.tint = 0xFFFFFF;// * Math.random();
-    
-    /**
-     * The blend mode to be applied to the sprite
-     *
-     * @property blendMode
-     * @type Number
-     * @default PIXI.blendModes.NORMAL;
+     * @member {number}
      */
-    this.blendMode = PIXI.blendModes.NORMAL;
+    this.currentBlendMode = 99999;
+}
 
-    if(texture.baseTexture.hasLoaded)
-    {
-        this.onTextureUpdate();
-    }
-    else
+BlendModeManager.prototype = Object.create(WebGLManager.prototype);
+BlendModeManager.prototype.constructor = BlendModeManager;
+module.exports = BlendModeManager;
+
+/**
+ * Sets-up the given blendMode from WebGL's point of view.
+ *
+ * @param blendMode {number} the blendMode, should be a Pixi const, such as BlendModes.ADD
+ */
+BlendModeManager.prototype.setBlendMode = function (blendMode)
+{
+    if (this.currentBlendMode === blendMode)
     {
-        this.onTextureUpdateBind = this.onTextureUpdate.bind(this);
-        this.texture.addEventListener( 'update', this.onTextureUpdateBind );
+        return false;
     }
 
-    this.renderable = true;
+    this.currentBlendMode = blendMode;
+
+    var mode = this.renderer.blendModes[this.currentBlendMode];
+    this.renderer.gl.blendFunc(mode[0], mode[1]);
+
+    return true;
 };
 
-// constructor
-PIXI.Sprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
-PIXI.Sprite.prototype.constructor = PIXI.Sprite;
+},{"./WebGLManager":57}],53:[function(require,module,exports){
+var WebGLManager = require('./WebGLManager'),
+    RenderTarget = require('../utils/RenderTarget'),
+    CONST = require('../../../const'),
+    Quad = require('../utils/Quad'),
+    math =  require('../../../math');
 
 /**
- * The width of the sprite, setting this will actually modify the scale to achieve the value set
- *
- * @property width
- * @type Number
+ * @class
+ * @memberof PIXI
+ * @extends PIXI.WebGLManager
+ * @param renderer {WebGLRenderer} The renderer this manager works for.
  */
-Object.defineProperty(PIXI.Sprite.prototype, 'width', {
-    get: function() {
-        return this.scale.x * this.texture.frame.width;
-    },
-    set: function(value) {
-        this.scale.x = value / this.texture.frame.width;
-        this._width = value;
-    }
-});
+function FilterManager(renderer)
+{
+    WebGLManager.call(this, renderer);
+
+    /**
+     * @member {any[]}
+     */
+    this.filterStack = [];
+
+    this.filterStack.push({
+        renderTarget:renderer.currentRenderTarget,
+        filter:[],
+        bounds:null
+    });
+
+    /**
+     * @member {any[]}
+     */
+    this.texturePool = [];
+
+    // listen for context and update necessary buffers
+    //TODO make this dynamic!
+    //TODO test this out by forces power of two?
+    this.textureSize = new math.Rectangle( 0, 0, renderer.width, renderer.height );
+
+    this.currentFrame = null;
+}
+
+FilterManager.prototype = Object.create(WebGLManager.prototype);
+FilterManager.prototype.constructor = FilterManager;
+module.exports = FilterManager;
 
-/**
- * The height of the sprite, setting this will actually modify the scale to achieve the value set
- *
- * @property height
- * @type Number
- */
-Object.defineProperty(PIXI.Sprite.prototype, 'height', {
-    get: function() {
-        return  this.scale.y * this.texture.frame.height;
-    },
-    set: function(value) {
-        this.scale.y = value / this.texture.frame.height;
-        this._height = value;
-    }
-});
 
 /**
- * Sets the texture of the sprite
+ * Called when there is a WebGL context change.
  *
- * @method setTexture
- * @param texture {Texture} The PIXI texture that is displayed by the sprite
  */
-PIXI.Sprite.prototype.setTexture = function(texture)
+FilterManager.prototype.onContextChange = function ()
 {
-    // stop current texture;
-    if(this.texture.baseTexture !== texture.baseTexture)
-    {
-        this.textureChange = true;
-        this.texture = texture;
-    }
-    else
-    {
-        this.texture = texture;
-    }
+    this.texturePool.length = 0;
 
-    this.cachedTint = 0xFFFFFF;
-    this.updateFrame = true;
+    var gl = this.renderer.gl;
+    this.quad = new Quad(gl);
 };
 
 /**
- * When the texture is updated, this event will fire to update the scale and frame
- *
- * @method onTextureUpdate
- * @param event
- * @private
+ * @param renderer {WebGLRenderer}
+ * @param buffer {ArrayBuffer}
  */
-PIXI.Sprite.prototype.onTextureUpdate = function()
+FilterManager.prototype.setFilterStack = function ( filterStack )
 {
-    // so if _width is 0 then width was not set..
-    if(this._width)this.scale.x = this._width / this.texture.frame.width;
-    if(this._height)this.scale.y = this._height / this.texture.frame.height;
-
-
-    this.updateFrame = true;
+    this.filterStack = filterStack;
 };
 
 /**
-* Returns the framing rectangle of the sprite as a PIXI.Rectangle object
-*
-* @method getBounds
-* @param matrix {Matrix} the transformation matrix of the sprite
-* @return {Rectangle} the framing rectangle
-*/
-PIXI.Sprite.prototype.getBounds = function(matrix)
+ * Applies the filter and adds it to the current filter stack.
+ *
+ * @param filterBlock {object} the filter that will be pushed to the current filter stack
+ */
+FilterManager.prototype.pushFilter = function (target, filters)
 {
+    // get the bounds of the object..
+    // TODO replace clone with a copy to save object creation
+    var bounds = target.filterArea ? target.filterArea.clone() : target.getBounds();
+    
+    //bounds = bounds.clone();
 
-    var width = this.texture.frame.width;
-    var height = this.texture.frame.height;
-
-    var w0 = width * (1-this.anchor.x);
-    var w1 = width * -this.anchor.x;
+    // round off the rectangle to get a nice smoooooooth filter :)
+    bounds.x = bounds.x | 0;
+    bounds.y = bounds.y | 0;
+    bounds.width = bounds.width | 0;
+    bounds.height = bounds.height | 0;
 
-    var h0 = height * (1-this.anchor.y);
-    var h1 = height * -this.anchor.y;
 
-    var worldTransform = matrix || this.worldTransform ;
+    // padding!
+    var padding = filters[0].padding | 0;
+    bounds.x -= padding;
+    bounds.y -= padding;
+    bounds.width += padding * 2;
+    bounds.height += padding * 2;
 
-    var a = worldTransform.a;
-    var b = worldTransform.c;
-    var c = worldTransform.b;
-    var d = worldTransform.d;
-    var tx = worldTransform.tx;
-    var ty = worldTransform.ty;
 
-    var x1 = a * w1 + c * h1 + tx;
-    var y1 = d * h1 + b * w1 + ty;
+    if(this.renderer.currentRenderTarget.transform)
+    {
+        //TODO this will break if the renderTexture transform is anything other than a translation.
+        //Will need to take the full matrix transform into acount..
+        var transform = this.renderer.currentRenderTarget.transform;
 
-    var x2 = a * w0 + c * h1 + tx;
-    var y2 = d * h1 + b * w0 + ty;
+        bounds.x += transform.tx;
+        bounds.y += transform.ty;
 
-    var x3 = a * w0 + c * h0 + tx;
-    var y3 = d * h0 + b * w0 + ty;
+        this.capFilterArea( bounds );
 
-    var x4 =  a * w1 + c * h0 + tx;
-    var y4 =  d * h0 + b * w1 + ty;
+        bounds.x -= transform.tx;
+        bounds.y -= transform.ty;
+    }
+    else
+    {
+         this.capFilterArea( bounds );
+    }
 
-    var maxX = -Infinity;
-    var maxY = -Infinity;
+    if(bounds.width > 0 && bounds.height > 0)
+    {
+        this.currentFrame = bounds;
 
-    var minX = Infinity;
-    var minY = Infinity;
+        var texture = this.getRenderTarget();
 
-    minX = x1 < minX ? x1 : minX;
-    minX = x2 < minX ? x2 : minX;
-    minX = x3 < minX ? x3 : minX;
-    minX = x4 < minX ? x4 : minX;
+        this.renderer.setRenderTarget(texture);
 
-    minY = y1 < minY ? y1 : minY;
-    minY = y2 < minY ? y2 : minY;
-    minY = y3 < minY ? y3 : minY;
-    minY = y4 < minY ? y4 : minY;
+        // clear the texture..
+        texture.clear();
 
-    maxX = x1 > maxX ? x1 : maxX;
-    maxX = x2 > maxX ? x2 : maxX;
-    maxX = x3 > maxX ? x3 : maxX;
-    maxX = x4 > maxX ? x4 : maxX;
+        // TODO get rid of object creation!
+        this.filterStack.push({
+            renderTarget: texture,
+            filter: filters
+        });
 
-    maxY = y1 > maxY ? y1 : maxY;
-    maxY = y2 > maxY ? y2 : maxY;
-    maxY = y3 > maxY ? y3 : maxY;
-    maxY = y4 > maxY ? y4 : maxY;
+    }
+    else
+    {
+        // push somthing on to the stack that is empty
+        this.filterStack.push({
+            renderTarget: null,
+            filter: filters
+        });
+    }
+};
 
-    var bounds = this._bounds;
 
-    bounds.x = minX;
-    bounds.width = maxX - minX;
+/**
+ * Removes the last filter from the filter stack and returns it.
+ *
+ */
+FilterManager.prototype.popFilter = function ()
+{
+    var filterData = this.filterStack.pop();
+    var previousFilterData = this.filterStack[this.filterStack.length-1];
 
-    bounds.y = minY;
-    bounds.height = maxY - minY;
+    var input = filterData.renderTarget;
 
-    // store a reference so that if this function gets called again in the render cycle we do not have to recalculate
-    this._currentBounds = bounds;
+    // if the renderTarget is null then we don't apply the filter as its offscreen
+    if(!filterData.renderTarget)
+    {
+        return;
+    }
 
-    return bounds;
-};
+    var output = previousFilterData.renderTarget;
 
-/**
-* Renders the object using the WebGL renderer
-*
-* @method _renderWebGL
-* @param renderSession {RenderSession} 
-* @private
-*/
-PIXI.Sprite.prototype._renderWebGL = function(renderSession)
-{
-    // if the sprite is not visible or the alpha is 0 then no need to render this element
-    if(!this.visible || this.alpha <= 0)return;
-    
-    var i,j;
+    // use program
+    var gl = this.renderer.gl;
 
-    // do a quick check to see if this element has a mask or a filter.
-    if(this._mask || this._filters)
-    {
-        var spriteBatch =  renderSession.spriteBatch;
 
-        if(this._mask)
-        {
-            spriteBatch.stop();
-            renderSession.maskManager.pushMask(this.mask, renderSession);
-            spriteBatch.start();
-        }
+    this.currentFrame = input.frame;
 
-        if(this._filters)
-        {
-            spriteBatch.flush();
-            renderSession.filterManager.pushFilter(this._filterBlock);
-        }
+    this.quad.map(this.textureSize, input.frame);
 
-        // add this sprite to the batch
-        spriteBatch.render(this);
 
-        // now loop through the children and make sure they get rendered
-        for(i=0,j=this.children.length; i<j; i++)
+    // TODO.. this probably only needs to be done once!
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.quad.vertexBuffer);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.quad.indexBuffer);
+
+    var filters = filterData.filter;
+
+    // assuming all filters follow the correct format??
+    gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 2 * 4 * 4);
+    gl.vertexAttribPointer(this.renderer.shaderManager.defaultShader.attributes.aColor, 4, gl.FLOAT, false, 0, 4 * 4 * 4);
+
+    // restore the normal blendmode!
+    this.renderer.blendModeManager.setBlendMode(CONST.BLEND_MODES.NORMAL);
+
+    if (filters.length === 1)
+    {
+        // TODO (cengler) - There has to be a better way then setting this each time?
+        if (filters[0].uniforms.dimensions)
         {
-            this.children[i]._renderWebGL(renderSession);
+            filters[0].uniforms.dimensions.value[0] = this.renderer.width;
+            filters[0].uniforms.dimensions.value[1] = this.renderer.height;
+            filters[0].uniforms.dimensions.value[2] = this.quad.vertices[0];
+            filters[0].uniforms.dimensions.value[3] = this.quad.vertices[5];
         }
 
-        // time to stop the sprite batch as either a mask element or a filter draw will happen next
-        spriteBatch.stop();
+        filters[0].applyFilter( this.renderer, input, output );
+        this.returnRenderTarget( input );
 
-        if(this._filters)renderSession.filterManager.popFilter();
-        if(this._mask)renderSession.maskManager.popMask(renderSession);
-        
-        spriteBatch.start();
     }
     else
     {
-        renderSession.spriteBatch.render(this);
+        var flipTexture = input;
+        var flopTexture = this.getRenderTarget(true);
 
-        // simple render children!
-        for(i=0,j=this.children.length; i<j; i++)
+        for (var i = 0; i < filters.length-1; i++)
         {
-            this.children[i]._renderWebGL(renderSession);
+            var filter = filters[i];
+
+            // TODO (cengler) - There has to be a better way then setting this each time?
+            if (filter.uniforms.dimensions)
+            {
+                filter.uniforms.dimensions.value[0] = this.renderer.width;
+                filter.uniforms.dimensions.value[1] = this.renderer.height;
+                filter.uniforms.dimensions.value[2] = this.quad.vertices[0];
+                filter.uniforms.dimensions.value[3] = this.quad.vertices[5];
+            }
+
+            filter.applyFilter( this.renderer, flipTexture, flopTexture );
+
+            var temp = flipTexture;
+            flipTexture = flopTexture;
+            flopTexture = temp;
         }
+
+        filters[filters.length-1].applyFilter( this.renderer, flipTexture, output );
+
+        this.returnRenderTarget( flipTexture );
+        this.returnRenderTarget( flopTexture );
     }
 
-   
-    //TODO check culling  
+    return filterData.filter;
 };
 
 /**
-* Renders the object using the Canvas renderer
-*
-* @method _renderCanvas
-* @param renderSession {RenderSession} 
-* @private
-*/
-PIXI.Sprite.prototype._renderCanvas = function(renderSession)
+ * Grabs an render target from the internal pool
+ *
+ * @param clear {boolean} Whether or not we need to clear the RenderTarget
+ * @return {RenderTarget}
+ */
+FilterManager.prototype.getRenderTarget = function ( clear )
 {
-    // if the sprite is not visible or the alpha is 0 then no need to render this element
-    if(this.visible === false || this.alpha === 0)return;
-    
-    var frame = this.texture.frame;
-    var context = renderSession.context;
-    var texture = this.texture;
+    var renderTarget = this.texturePool.pop() || new RenderTarget(this.renderer.gl, this.textureSize.width, this.textureSize.height, CONST.SCALE_MODES.LINEAR, this.renderer.resolution * CONST.FILTER_RESOLUTION);
+    renderTarget.frame = this.currentFrame;
 
-    if(this.blendMode !== renderSession.currentBlendMode)
+    if (clear)
     {
-        renderSession.currentBlendMode = this.blendMode;
-        context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode];
+        renderTarget.clear(true);
     }
 
-    if(this._mask)
+    return renderTarget;
+};
+
+/*
+ * Returns a RenderTarget to the internal pool
+ * @param renderTarget {RenderTarget} The RenderTarget we want to return to the pool
+ */
+FilterManager.prototype.returnRenderTarget = function (renderTarget)
+{
+    this.texturePool.push( renderTarget );
+};
+
+/*
+ * Applies the filter
+ * @param shader {Shader} The shader to upload
+ * @param inputTarget {RenderTarget}
+ * @param outputTarget {RenderTarget}
+ * @param clear {boolean} Whether or not we want to clear the outputTarget
+ */
+FilterManager.prototype.applyFilter = function (shader, inputTarget, outputTarget, clear)
+{
+    var gl = this.renderer.gl;
+
+    this.renderer.setRenderTarget(outputTarget);
+
+    if (clear)
     {
-        renderSession.maskManager.pushMask(this._mask, renderSession.context);
+        outputTarget.clear();
     }
 
-    
+    // set the shader
+    this.renderer.shaderManager.setShader(shader);
 
-    //ignore null sources
-    if(frame && frame.width && frame.height && texture.baseTexture.source)
-    {
-        context.globalAlpha = this.worldAlpha;
+    // TODO (cengler) - Can this be cached and not `toArray`ed each frame?
+    shader.uniforms.projectionMatrix.value = this.renderer.currentRenderTarget.projectionMatrix.toArray(true);
 
-        var transform = this.worldTransform;
+    //TODO can this be optimised?
+    shader.syncUniforms();
+/*
+    gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribPointer(shader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 2 * 4 * 4);
+    gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false, 0, 4 * 4 * 4);
+*/
 
-        // allow for trimming
-       
-        if (renderSession.roundPixels)
-        {
-            context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx || 0, transform.ty || 0);
-        }
-        else
-        {
-            context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty);
-        }
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, inputTarget.texture);
 
+    gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 );
+};
 
-        //if smoothingEnabled is supported and we need to change the smoothing property for this texture
-        if(renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) {
-            renderSession.scaleMode = this.texture.baseTexture.scaleMode;
-            context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR);
-        }
+/*
+ * Calculates the mapped matrix
+ * @param filterArea {Rectangle} The filter area
+ * @param sprite {Sprite} the target sprite
+ * @param outputMatrix {Matrix} @alvin
+ */
+// TODO playing around here.. this is temporary - (will end up in the shader)
+FilterManager.prototype.calculateMappedMatrix = function (filterArea, sprite, outputMatrix)
+{
+    var worldTransform = sprite.worldTransform.copy(math.Matrix.TEMP_MATRIX),
+    texture = sprite._texture.baseTexture;
 
-        if(this.tint !== 0xFFFFFF)
-        {
-            
-            if(this.cachedTint !== this.tint)
-            {
-                // no point tinting an image that has not loaded yet!
-                if(!texture.baseTexture.hasLoaded)return;
+    var mappedMatrix = outputMatrix.identity();
 
-                this.cachedTint = this.tint;
-                
-                //TODO clean up caching - how to clean up the caches?
-                this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this, this.tint);
-                
-            }
-
-            context.drawImage(this.tintedTexture,
-                               0,
-                               0,
-                               frame.width,
-                               frame.height,
-                               (this.anchor.x) * -frame.width,
-                               (this.anchor.y) * -frame.height,
-                               frame.width,
-                               frame.height);
-        }
-        else
-        {
+    // scale..
+    var ratio = this.textureSize.height / this.textureSize.width;
 
-           
+    mappedMatrix.translate(filterArea.x / this.textureSize.width, filterArea.y / this.textureSize.height );
 
-            if(texture.trim)
-            {
-                var trim =  texture.trim;
-
-                context.drawImage(this.texture.baseTexture.source,
-                               frame.x,
-                               frame.y,
-                               frame.width,
-                               frame.height,
-                               trim.x - this.anchor.x * trim.width,
-                               trim.y - this.anchor.y * trim.height,
-                               frame.width,
-                               frame.height);
-            }
-            else
-            {
-               
-                context.drawImage(this.texture.baseTexture.source,
-                               frame.x,
-                               frame.y,
-                               frame.width,
-                               frame.height,
-                               (this.anchor.x) * -frame.width,
-                               (this.anchor.y) * -frame.height,
-                               frame.width,
-                               frame.height);
-            }
-            
-        }
-    }
+    mappedMatrix.scale(1 , ratio);
 
-    // OVERWRITE
-    for(var i=0,j=this.children.length; i<j; i++)
-    {
-        var child = this.children[i];
-        child._renderCanvas(renderSession);
-    }
+    var translateScaleX = (this.textureSize.width / texture.width);
+    var translateScaleY = (this.textureSize.height / texture.height);
 
-    if(this._mask)
-    {
-        renderSession.maskManager.popMask(renderSession.context);
-    }
-};
+    worldTransform.tx /= texture.width * translateScaleX;
+    worldTransform.ty /= texture.width * translateScaleX;
 
+    worldTransform.invert();
 
-// some helper functions..
+    mappedMatrix.prepend(worldTransform);
 
-/**
- *
- * Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId
- * The frame ids are created when a Texture packer file has been loaded
- *
- * @method fromFrame
- * @static
- * @param frameId {String} The frame Id of the texture in the cache
- * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId
- */
-PIXI.Sprite.fromFrame = function(frameId)
-{
-    var texture = PIXI.TextureCache[frameId];
-    if(!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this);
-    return new PIXI.Sprite(texture);
-};
+    // apply inverse scale..
+    mappedMatrix.scale(1 , 1/ratio);
 
-/**
- *
- * Helper function that creates a sprite that will contain a texture based on an image url
- * If the image is not in the texture cache it will be loaded
- *
- * @method fromImage
- * @static
- * @param imageId {String} The image url of the texture
- * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id
- */
-PIXI.Sprite.fromImage = function(imageId, crossorigin, scaleMode)
-{
-    var texture = PIXI.Texture.fromImage(imageId, crossorigin, scaleMode);
-    return new PIXI.Sprite(texture);
+    mappedMatrix.scale( translateScaleX , translateScaleY );
+
+    mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y);
+
+    return mappedMatrix;
+
+    // Keeping the orginal as a reminder to me on how this works!
+    //
+    // var m = new math.Matrix();
+
+    // // scale..
+    // var ratio = this.textureSize.height / this.textureSize.width;
+
+    // m.translate(filterArea.x / this.textureSize.width, filterArea.y / this.textureSize.height);
+
+
+    // m.scale(1 , ratio);
+
+
+    // var transform = wt.clone();
+
+    // var translateScaleX = (this.textureSize.width / 620);
+    // var translateScaleY = (this.textureSize.height / 380);
+
+    // transform.tx /= 620 * translateScaleX;
+    // transform.ty /= 620 * translateScaleX;
+
+    // transform.invert();
+
+    // transform.append(m);
+
+    // // apply inverse scale..
+    // transform.scale(1 , 1/ratio);
+
+    // transform.scale( translateScaleX , translateScaleY );
+
+    // return transform;
 };
 
-/**
- * @author Mat Groves http://matgroves.com/
+/*
+ * Constrains the filter area to the texture size
+ * @param filterArea {Rectangle} The filter area we want to cap
  */
+FilterManager.prototype.capFilterArea = function (filterArea)
+{
+    if (filterArea.x < 0)
+    {
+        filterArea.width += filterArea.x;
+        filterArea.x = 0;
+    }
 
-/**
- * The SpriteBatch class is a really fast version of the DisplayObjectContainer 
- * built solely for speed, so use when you need a lot of sprites or particles.
- * And it's extremely easy to use : 
-
-    var container = new PIXI.SpriteBatch();
- 
-    stage.addChild(container);
- 
-    for(var i  = 0; i < 100; i++)
+    if (filterArea.y < 0)
     {
-        var sprite = new PIXI.Sprite.fromImage("myImage.png");
-        container.addChild(sprite);
+        filterArea.height += filterArea.y;
+        filterArea.y = 0;
     }
- * And here you have a hundred sprites that will be renderer at the speed of light
- *
- * @class SpriteBatch
- * @constructor
- * @param texture {Texture}
- */
-PIXI.SpriteBatch = function(texture)
-{
-    PIXI.DisplayObjectContainer.call( this);
 
-    this.textureThing = texture;
+    if ( filterArea.x + filterArea.width > this.textureSize.width )
+    {
+        filterArea.width = this.textureSize.width - filterArea.x;
+    }
 
-    this.ready = false;
+    if ( filterArea.y + filterArea.height > this.textureSize.height )
+    {
+        filterArea.height = this.textureSize.height - filterArea.y;
+    }
 };
 
-PIXI.SpriteBatch.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
-PIXI.SpriteBatch.constructor = PIXI.SpriteBatch;
-
 /*
- * Initialises the spriteBatch
- *
- * @method initWebGL
- * @param gl {WebGLContext} the current WebGL drawing context
+ * Resizes all the render targets in the pool
+ * @param width {number} the new width
+ * @param height {number} the new height
  */
-PIXI.SpriteBatch.prototype.initWebGL = function(gl)
+FilterManager.prototype.resize = function ( width, height )
 {
-    // TODO only one needed for the whole engine really?
-    this.fastSpriteBatch = new PIXI.WebGLFastSpriteBatch(gl);
+    this.textureSize.width = width;
+    this.textureSize.height = height;
 
-    this.ready = true;
+    for (var i = 0; i < this.texturePool.length; i++)
+    {
+        this.texturePool[i].resize( width, height );
+    }
 };
 
-/*
- * Updates the object transform for rendering
+/**
+ * Destroys the filter and removes it from the filter stack.
  *
- * @method updateTransform
- * @private
  */
-PIXI.SpriteBatch.prototype.updateTransform = function()
+FilterManager.prototype.destroy = function ()
 {
-   // TODO dont need to!
-    PIXI.DisplayObject.prototype.updateTransform.call( this );
-  //  PIXI.DisplayObjectContainer.prototype.updateTransform.call( this );
+    this.filterStack = null;
+    this.offsetY = 0;
+
+    // destroy textures
+    for (var i = 0; i < this.texturePool.length; i++)
+    {
+        this.texturePool[i].destroy();
+    }
+
+    this.texturePool = null;
 };
 
+},{"../../../const":22,"../../../math":32,"../utils/Quad":63,"../utils/RenderTarget":64,"./WebGLManager":57}],54:[function(require,module,exports){
+var WebGLManager = require('./WebGLManager'),
+    AlphaMaskFilter = require('../filters/SpriteMaskFilter');
+
 /**
-* Renders the object using the WebGL renderer
-*
-* @method _renderWebGL
-* @param renderSession {RenderSession} 
-* @private
-*/
-PIXI.SpriteBatch.prototype._renderWebGL = function(renderSession)
+ * @class
+ * @memberof PIXI
+ * @param renderer {WebGLRenderer} The renderer this manager works for.
+ */
+function MaskManager(renderer)
 {
-    if(!this.visible || this.alpha <= 0 || !this.children.length)return;
+    WebGLManager.call(this, renderer);
 
-    if(!this.ready)this.initWebGL( renderSession.gl );
-    
-    renderSession.spriteBatch.stop();
-    
-    renderSession.shaderManager.activateShader(renderSession.shaderManager.fastShader);
-    
-    this.fastSpriteBatch.begin(this, renderSession);
-    this.fastSpriteBatch.render(this);
+    this.stencilStack = [];
+    this.reverse = true;
+    this.count = 0;
 
-    renderSession.shaderManager.activateShader(renderSession.shaderManager.defaultShader);
+    this.alphaMaskPool = [];
+}
 
-    renderSession.spriteBatch.start();
- 
-};
+MaskManager.prototype = Object.create(WebGLManager.prototype);
+MaskManager.prototype.constructor = MaskManager;
+module.exports = MaskManager;
 
 /**
-* Renders the object using the Canvas renderer
-*
-* @method _renderCanvas
-* @param renderSession {RenderSession} 
-* @private
-*/
-PIXI.SpriteBatch.prototype._renderCanvas = function(renderSession)
+ * Applies the Mask and adds it to the current filter stack.
+ *
+ * @param graphics {Graphics}
+ * @param webGLData {any[]}
+ */
+MaskManager.prototype.pushMask = function (target, maskData)
 {
-    var context = renderSession.context;
-    context.globalAlpha = this.worldAlpha;
+    if (maskData.texture)
+    {
+        this.pushSpriteMask(target, maskData);
+    }
+    else
+    {
+        this.pushStencilMask(target, maskData);
+    }
 
-    var transform = this.worldTransform;
+};
 
-    // alow for trimming
-       
-    if (renderSession.roundPixels)
+/**
+ * Removes the last mask from the mask stack and doesn't return it.
+ *
+ * @param target {RenderTarget}
+ * @param maskData {any[]}
+ */
+MaskManager.prototype.popMask = function (target, maskData)
+{
+    if (maskData.texture)
     {
-        context.setTransform(transform.a, transform.c, transform.b, transform.d, Math.floor(transform.tx), Math.floor(transform.ty));
+        this.popSpriteMask(target, maskData);
     }
     else
     {
-        context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty);
+        this.popStencilMask(target, maskData);
     }
+};
 
-    context.save();
-
-    for (var i = 0; i < this.children.length; i++) {
-       
-        var child = this.children[i];
-        var texture = child.texture;
-        var frame = texture.frame;
+/**
+ * Applies the Mask and adds it to the current filter stack.
+ *
+ * @param target {RenderTarget}
+ * @param maskData {any[]}
+ */
+MaskManager.prototype.pushSpriteMask = function (target, maskData)
+{
+    var alphaMaskFilter = this.alphaMaskPool.pop();
 
-        context.globalAlpha = this.worldAlpha * child.alpha;
+    if (!alphaMaskFilter)
+    {
+        alphaMaskFilter = [new AlphaMaskFilter(maskData)];
+    }
 
-        if(child.rotation % (Math.PI * 2) === 0)
-        {
-          
-          // this is the fastest  way to optimise! - if rotation is 0 then we can avoid any kind of setTransform call
-            context.drawImage(texture.baseTexture.source,
-                                 frame.x,
-                                 frame.y,
-                                 frame.width,
-                                 frame.height,
-                                 ((child.anchor.x) * (-frame.width * child.scale.x) + child.position.x  + 0.5) | 0,
-                                 ((child.anchor.y) * (-frame.height * child.scale.y) + child.position.y  + 0.5) | 0,
-                                 frame.width * child.scale.x,
-                                 frame.height * child.scale.y);
-        }
-        else
-        {
-            PIXI.DisplayObject.prototype.updateTransform.call(child);
-           
-            transform = child.localTransform;
+    alphaMaskFilter[0].maskSprite = maskData;
+    this.renderer.filterManager.pushFilter(target, alphaMaskFilter);
+};
 
-            if(this.rotation !== this.rotationCache)
-            {
-                this.rotationCache = this.rotation;
-                this._sr =  Math.sin(this.rotation);
-                this._cr =  Math.cos(this.rotation);
-            }
+/**
+ * Removes the last filter from the filter stack and doesn't return it.
+ *
+ */
+MaskManager.prototype.popSpriteMask = function ()
+{
+    var filters = this.renderer.filterManager.popFilter();
 
-            var a = child._cr * child.scale.x,
-                b = -child._sr * child.scale.y,
-                c = child._sr * child.scale.x,
-                d = child._cr * child.scale.y;
-                
-            context.setTransform(a, c, b, d, child.position.x, child.position.y);
-            
-            context.drawImage(texture.baseTexture.source,
-                                 frame.x,
-                                 frame.y,
-                                 frame.width,
-                                 frame.height,
-                                 ((child.anchor.x) * (-frame.width) + 0.5) | 0,
-                                 ((child.anchor.y) * (-frame.height) + 0.5) | 0,
-                                 frame.width,
-                                 frame.height);
+    this.alphaMaskPool.push(filters);
+};
 
-        }
-    }
 
-    context.restore();
+/**
+ * Applies the Mask and adds it to the current filter stack.
+ *
+ * @param target {RenderTarget}
+ * @param maskData {any[]}
+ */
+MaskManager.prototype.pushStencilMask = function (target, maskData)
+{
+    this.renderer.stencilManager.pushMask(maskData);
 };
 
-
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * Removes the last filter from the filter stack and doesn't return it.
+ * @param target {RenderTarget}
+ * @param maskData {any[]}
  */
+MaskManager.prototype.popStencilMask = function (target, maskData)
+{
+    this.renderer.stencilManager.popMask(maskData);
+};
+
+
+},{"../filters/SpriteMaskFilter":51,"./WebGLManager":57}],55:[function(require,module,exports){
+var WebGLManager = require('./WebGLManager'),
+    TextureShader = require('../shaders/TextureShader'),
+    ComplexPrimitiveShader = require('../shaders/ComplexPrimitiveShader'),
+    PrimitiveShader = require('../shaders/PrimitiveShader'),
+    utils = require('../../../utils');
 
 /**
- * A MovieClip is a simple way to display an animation depicted by a list of textures.
- *
- * @class MovieClip
- * @extends Sprite
- * @constructor
- * @param textures {Array<Texture>} an array of {Texture} objects that make up the animation
+ * @class
+ * @memberof PIXI
+ * @extends PIXI.WebGLManager
+ * @param renderer {WebGLRenderer} The renderer this manager works for.
  */
-PIXI.MovieClip = function(textures)
+function ShaderManager(renderer)
 {
-    PIXI.Sprite.call(this, textures[0]);
+    WebGLManager.call(this, renderer);
 
     /**
-     * The array of textures that make up the animation
-     *
-     * @property textures
-     * @type Array
+     * @member {number}
      */
-    this.textures = textures;
+    this.maxAttibs = 10;
 
     /**
-     * The speed that the MovieClip will play at. Higher is faster, lower is slower
-     *
-     * @property animationSpeed
-     * @type Number
-     * @default 1
+     * @member {any[]}
      */
-    this.animationSpeed = 1;
+    this.attribState = [];
 
     /**
-     * Whether or not the movie clip repeats after playing.
-     *
-     * @property loop
-     * @type Boolean
-     * @default true
+     * @member {any[]}
      */
-    this.loop = true;
+    this.tempAttribState = [];
+
+    for (var i = 0; i < this.maxAttibs; i++)
+    {
+        this.attribState[i] = false;
+    }
 
     /**
-     * Function to call when a MovieClip finishes playing
-     *
-     * @property onComplete
-     * @type Function
+     * @member {any[]}
      */
-    this.onComplete = null;
+    this.stack = [];
 
     /**
-     * [read-only] The MovieClips current frame index (this may not have to be a whole number)
-     *
-     * @property currentFrame
-     * @type Number
-     * @default 0
-     * @readOnly
+     * @member {number}
+     * @private
      */
-    this.currentFrame = 0;
+    this._currentId = -1;
 
     /**
-     * [read-only] Indicates if the MovieClip is currently playing
-     *
-     * @property playing
-     * @type Boolean
-     * @readOnly
+     * @member {Shader}
+     * @private
      */
-    this.playing = false;
-};
-
-// constructor
-PIXI.MovieClip.prototype = Object.create( PIXI.Sprite.prototype );
-PIXI.MovieClip.prototype.constructor = PIXI.MovieClip;
+    this.currentShader = null;
 
-/**
-* [read-only] totalFrames is the total number of frames in the MovieClip. This is the same as number of textures
-* assigned to the MovieClip.
-*
-* @property totalFrames
-* @type Number
-* @default 0
-* @readOnly
-*/
-Object.defineProperty( PIXI.MovieClip.prototype, 'totalFrames', {
-	get: function() {
+//    this.initPlugins();
+}
 
-		return this.textures.length;
-	}
-});
+ShaderManager.prototype = Object.create(WebGLManager.prototype);
+ShaderManager.prototype.constructor = ShaderManager;
+utils.pluginTarget.mixin(ShaderManager);
 
+module.exports = ShaderManager;
 
 /**
- * Stops the MovieClip
+ * Called when there is a WebGL context change.
  *
- * @method stop
  */
-PIXI.MovieClip.prototype.stop = function()
+ShaderManager.prototype.onContextChange = function ()
 {
-    this.playing = false;
-};
+    this.initPlugins();
 
-/**
- * Plays the MovieClip
- *
- * @method play
- */
-PIXI.MovieClip.prototype.play = function()
-{
-    this.playing = true;
-};
+    var gl = this.renderer.gl;
 
-/**
- * Stops the MovieClip and goes to a specific frame
- *
- * @method gotoAndStop
- * @param frameNumber {Number} frame index to stop at
- */
-PIXI.MovieClip.prototype.gotoAndStop = function(frameNumber)
-{
-    this.playing = false;
-    this.currentFrame = frameNumber;
-    var round = (this.currentFrame + 0.5) | 0;
-    this.setTexture(this.textures[round % this.textures.length]);
-};
+    // get the maximum number of attribute correctly as this tends to vary
+    this.maxAttibs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS);
 
-/**
- * Goes to a specific frame and begins playing the MovieClip
- *
- * @method gotoAndPlay
- * @param frameNumber {Number} frame index to start at
- */
-PIXI.MovieClip.prototype.gotoAndPlay = function(frameNumber)
-{
-    this.currentFrame = frameNumber;
-    this.playing = true;
+    this.attribState = [];
+
+    for (var i = 0; i < this.maxAttibs; i++)
+    {
+        this.attribState[i] = false;
+    }
+
+    // TODO - Why are these not plugins? We can't decouple primitives unless they are....
+    this.defaultShader = new TextureShader(this);
+    this.primitiveShader = new PrimitiveShader(this);
+    this.complexPrimitiveShader = new ComplexPrimitiveShader(this);
 };
 
-/*
- * Updates the object transform for rendering
+/**
+ * Takes the attributes given in parameters and uploads them.
  *
- * @method updateTransform
- * @private
+ * @param attribs {Array} attribs
  */
-PIXI.MovieClip.prototype.updateTransform = function()
+ShaderManager.prototype.setAttribs = function (attribs)
 {
-    PIXI.Sprite.prototype.updateTransform.call(this);
-
-    if(!this.playing)return;
-
-    this.currentFrame += this.animationSpeed;
+    // reset temp state
+    var i;
 
-    var round = (this.currentFrame + 0.5) | 0;
+    for (i = 0; i < this.tempAttribState.length; i++)
+    {
+        this.tempAttribState[i] = false;
+    }
 
-    if(this.loop || round < this.textures.length)
+    // set the new attribs
+    for (var a in attribs)
     {
-        this.setTexture(this.textures[round % this.textures.length]);
+        this.tempAttribState[attribs[a]] = true;
     }
-    else if(round >= this.textures.length)
+
+    var gl = this.renderer.gl;
+
+    for (i = 0; i < this.attribState.length; i++)
     {
-        this.gotoAndStop(this.textures.length - 1);
-        if(this.onComplete)
+        if (this.attribState[i] !== this.tempAttribState[i])
         {
-            this.onComplete();
+            this.attribState[i] = this.tempAttribState[i];
+
+            if (this.attribState[i])
+            {
+                gl.enableVertexAttribArray(i);
+            }
+            else
+            {
+                gl.disableVertexAttribArray(i);
+            }
         }
     }
 };
 
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * Sets the current shader.
+ *
+ * @param shader {Shader} the shader to upload
  */
+ShaderManager.prototype.setShader = function (shader)
+{
+    if (this._currentId === shader.uuid)
+    {
+        return false;
+    }
 
+    this._currentId = shader.uuid;
 
-PIXI.FilterBlock = function()
-{
-    this.visible = true;
-    this.renderable = true;
-};
+    this.currentShader = shader;
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+    this.renderer.gl.useProgram(shader.program);
+    this.setAttribs(shader.attributes);
+
+    return true;
+};
 
 /**
- * A Text Object will create a line(s) of text. To split a line you can use '\n' 
- * or add a wordWrap property set to true and and wordWrapWidth property with a value
- * in the style object
+ * Destroys this object.
  *
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param [style] {Object} The style parameters
- * @param [style.font] {String} default 'bold 20px Arial' The style and size of the font
- * @param [style.fill='black'] {String|Number} A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'
- * @param [style.align='left'] {String} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
- * @param [style.stroke] {String|Number} A canvas fillstyle that will be used on the text stroke e.g 'blue', '#FCFF00'
- * @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke)
- * @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used
- * @param [style.wordWrapWidth=100] {Number} The width at which text will wrap, it needs wordWrap to be set to true
  */
-PIXI.Text = function(text, style)
+ShaderManager.prototype.destroy = function ()
 {
-    /**
-     * The canvas element that everything is drawn to
-     *
-     * @property canvas
-     * @type HTMLCanvasElement
-     */
-    this.canvas = document.createElement('canvas');
-
-    /**
-     * The canvas 2d context that everything is drawn with
-     * @property context
-     * @type HTMLCanvasElement 2d Context
-     */
-    this.context = this.canvas.getContext('2d');
+    WebGLManager.prototype.destroy.call(this);
 
-    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+    this.destroyPlugins();
 
-    this.setText(text);
-    this.setStyle(style);
+    this.attribState = null;
 
-    this.updateText();
-    this.dirty = false;
+    this.tempAttribState = null;
 };
 
-// constructor
-PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
-PIXI.Text.prototype.constructor = PIXI.Text;
+},{"../../../utils":74,"../shaders/ComplexPrimitiveShader":58,"../shaders/PrimitiveShader":59,"../shaders/TextureShader":61,"./WebGLManager":57}],56:[function(require,module,exports){
+var WebGLManager = require('./WebGLManager'),
+    utils = require('../../../utils');
 
 /**
- * Set the style of the text
- *
- * @method setStyle
- * @param [style] {Object} The style parameters
- * @param [style.font='bold 20pt Arial'] {String} The style and size of the font
- * @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00'
- * @param [style.align='left'] {String} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
- * @param [style.stroke='black'] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00'
- * @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke)
- * @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used
- * @param [style.wordWrapWidth=100] {Number} The width at which text will wrap
+ * @class
+ * @memberof PIXI
+ * @param renderer {WebGLRenderer} The renderer this manager works for.
  */
-PIXI.Text.prototype.setStyle = function(style)
+function WebGLMaskManager(renderer)
 {
-    style = style || {};
-    style.font = style.font || 'bold 20pt Arial';
-    style.fill = style.fill || 'black';
-    style.align = style.align || 'left';
-    style.stroke = style.stroke || 'black'; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136
-    style.strokeThickness = style.strokeThickness || 0;
-    style.wordWrap = style.wordWrap || false;
-    style.wordWrapWidth = style.wordWrapWidth || 100;
-    this.style = style;
-    this.dirty = true;
-};
+    WebGLManager.call(this, renderer);
+    this.stencilMaskStack = null;
+}
+
+WebGLMaskManager.prototype = Object.create(WebGLManager.prototype);
+WebGLMaskManager.prototype.constructor = WebGLMaskManager;
+module.exports = WebGLMaskManager;
 
 /**
- * Set the copy for the text object. To split a line you can use '\n'
+ * Changes the mask stack that is used by this manager
+ * @param stencilMaskStack {StencilMaskStack} The mask stack 
  *
- * @method setText
- * @param {String} text The copy that you would like the text to display
  */
-PIXI.Text.prototype.setText = function(text)
+WebGLMaskManager.prototype.setMaskStack = function ( stencilMaskStack )
 {
-    this.text = text.toString() || ' ';
-    this.dirty = true;
+    this.stencilMaskStack = stencilMaskStack;
+
+    var gl = this.renderer.gl;
 
+    if (stencilMaskStack.stencilStack.length === 0)
+    {
+        gl.disable(gl.STENCIL_TEST);
+    }
+    else
+    {
+        gl.enable(gl.STENCIL_TEST);
+    }
 };
 
 /**
- * Renders text and updates it when needed
- *
- * @method updateText
- * @private
+ * Applies the Mask and adds it to the current filter stack. @alvin
+ * 
+ * @param graphics {Graphics}
+ * @param webGLData {any[]}
  */
-PIXI.Text.prototype.updateText = function()
+WebGLMaskManager.prototype.pushStencil = function (graphics, webGLData)
 {
-    this.context.font = this.style.font;
+    this.renderer.currentRenderTarget.attachStencilBuffer();
 
-    var outputText = this.text;
-
-    // word wrap
-    // preserve original text
-    if(this.style.wordWrap)outputText = this.wordWrap(this.text);
+    var gl = this.renderer.gl,
+        sms = this.stencilMaskStack;
 
-    //split text into lines
-    var lines = outputText.split(/(?:\r\n|\r|\n)/);
+    this.bindGraphics(graphics, webGLData, this.renderer);
 
-    //calculate text width
-    var lineWidths = [];
-    var maxLineWidth = 0;
-    for (var i = 0; i < lines.length; i++)
+    if (sms.stencilStack.length === 0)
     {
-        var lineWidth = this.context.measureText(lines[i]).width;
-        lineWidths[i] = lineWidth;
-        maxLineWidth = Math.max(maxLineWidth, lineWidth);
+        gl.enable(gl.STENCIL_TEST);
+        gl.clear(gl.STENCIL_BUFFER_BIT);
+        sms.reverse = true;
+        sms.count = 0;
     }
-    this.canvas.width = maxLineWidth + this.style.strokeThickness;
 
-    //calculate text height
-    var lineHeight = this.determineFontHeight('font: ' + this.style.font  + ';') + this.style.strokeThickness;
-    this.canvas.height = lineHeight * lines.length;
+    sms.stencilStack.push(webGLData);
 
-    if(navigator.isCocoonJS) this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
-    
-    //set canvas text styles
-    this.context.fillStyle = this.style.fill;
-    this.context.font = this.style.font;
+    var level = sms.count;
 
-    this.context.strokeStyle = this.style.stroke;
-    this.context.lineWidth = this.style.strokeThickness;
+    gl.colorMask(false, false, false, false);
 
-    this.context.textBaseline = 'top';
+    gl.stencilFunc(gl.ALWAYS,0,0xFF);
+    gl.stencilOp(gl.KEEP,gl.KEEP,gl.INVERT);
 
-    //draw lines line by line
-    for (i = 0; i < lines.length; i++)
+    // draw the triangle strip!
+
+    if (webGLData.mode === 1)
     {
-        var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+        gl.drawElements(gl.TRIANGLE_FAN,  webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 );
+
+        if (sms.reverse)
+        {
+            gl.stencilFunc(gl.EQUAL, 0xFF - level, 0xFF);
+            gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR);
+        }
+        else
+        {
+            gl.stencilFunc(gl.EQUAL,level, 0xFF);
+            gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR);
+        }
 
-        if(this.style.align === 'right')
+        // draw a quad to increment..
+        gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 );
+
+        if (sms.reverse)
         {
-            linePosition.x += maxLineWidth - lineWidths[i];
+            gl.stencilFunc(gl.EQUAL,0xFF-(level+1), 0xFF);
         }
-        else if(this.style.align === 'center')
+        else
         {
-            linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+            gl.stencilFunc(gl.EQUAL,level+1, 0xFF);
         }
 
-        if(this.style.stroke && this.style.strokeThickness)
+        sms.reverse = !sms.reverse;
+    }
+    else
+    {
+        if (!sms.reverse)
+        {
+            gl.stencilFunc(gl.EQUAL, 0xFF - level, 0xFF);
+            gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR);
+        }
+        else
         {
-            this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+            gl.stencilFunc(gl.EQUAL,level, 0xFF);
+            gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR);
         }
 
-        if(this.style.fill)
+        gl.drawElements(gl.TRIANGLE_STRIP,  webGLData.indices.length, gl.UNSIGNED_SHORT, 0 );
+
+        if (!sms.reverse)
+        {
+            gl.stencilFunc(gl.EQUAL,0xFF-(level+1), 0xFF);
+        }
+        else
         {
-            this.context.fillText(lines[i], linePosition.x, linePosition.y);
+            gl.stencilFunc(gl.EQUAL,level+1, 0xFF);
         }
     }
 
-    this.updateTexture();
+    gl.colorMask(true, true, true, true);
+    gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
+
+    sms.count++;
 };
 
 /**
- * Updates texture size based on canvas size
+ * TODO this does not belong here!
  *
- * @method updateTexture
- * @private
+ * @param graphics {Graphics}
+ * @param webGLData {Array}
  */
-PIXI.Text.prototype.updateTexture = function()
+WebGLMaskManager.prototype.bindGraphics = function (graphics, webGLData)
 {
-    this.texture.baseTexture.width = this.canvas.width;
-    this.texture.baseTexture.height = this.canvas.height;
-    this.texture.frame.width = this.canvas.width;
-    this.texture.frame.height = this.canvas.height;
+    //if (this._currentGraphics === graphics)return;
+    this._currentGraphics = graphics;
 
-    this._width = this.canvas.width;
-    this._height = this.canvas.height;
+    var gl = this.renderer.gl;
 
-    this.requiresUpdate =  true;
-};
+     // bind the graphics object..
+    var shader;// = this.renderer.shaderManager.plugins.primitiveShader;
 
-/**
-* Renders the object using the WebGL renderer
-*
-* @method _renderWebGL
-* @param renderSession {RenderSession} 
-* @private
-*/
-PIXI.Text.prototype._renderWebGL = function(renderSession)
-{
-    if(this.requiresUpdate)
+    if (webGLData.mode === 1)
     {
-        this.requiresUpdate = false;
-        PIXI.updateWebGLTexture(this.texture.baseTexture, renderSession.gl);
+        shader = this.renderer.shaderManager.complexPrimitiveShader;
+
+        this.renderer.shaderManager.setShader(shader);
+
+        gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true));
+
+        gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true));
+
+        gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint));
+
+        gl.uniform3fv(shader.uniforms.color._location, webGLData.color);
+
+        gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha);
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer);
+
+        gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 2, 0);
+
+
+        // now do the rest..
+        // set the index buffer!
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);
     }
+    else
+    {
+        //this.renderer.shaderManager.activatePrimitiveShader();
+        shader = this.renderer.shaderManager.primitiveShader;
+
+        this.renderer.shaderManager.setShader( shader );
 
-    PIXI.Sprite.prototype._renderWebGL.call(this, renderSession);
+        gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true));
+
+        gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true));
+
+        gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint));
+
+        gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha);
+
+        gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer);
+
+        gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
+        gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4);
+
+        // set the index buffer!
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);
+    }
 };
 
 /**
- * Updates the transform of this object
- *
- * @method updateTransform
- * @private
+ * TODO @alvin
+ * @param graphics {Graphics}
+ * @param webGLData {Array}
  */
-PIXI.Text.prototype.updateTransform = function()
+WebGLMaskManager.prototype.popStencil = function (graphics, webGLData)
 {
-    if(this.dirty)
+    var gl = this.renderer.gl,
+        sms = this.stencilMaskStack;
+
+    sms.stencilStack.pop();
+
+    sms.count--;
+
+    if (sms.stencilStack.length === 0)
     {
-        this.updateText();
-        this.dirty = false;
+        // the stack is empty!
+        gl.disable(gl.STENCIL_TEST);
+
     }
+    else
+    {
 
-    PIXI.Sprite.prototype.updateTransform.call(this);
-};
+        var level = sms.count;
 
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- * returns the height of the given font
- *
- * @method determineFontHeight
- * @param fontStyle {Object}
- * @private
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle)
-{
-    // build a little reference dictionary so if the font style has been used return a
-    // cached version...
-    var result = PIXI.Text.heightCache[fontStyle];
+        this.bindGraphics(graphics, webGLData, this.renderer);
 
-    if(!result)
-    {
-        var body = document.getElementsByTagName('body')[0];
-        var dummy = document.createElement('div');
-        var dummyText = document.createTextNode('M');
-        dummy.appendChild(dummyText);
-        dummy.setAttribute('style', fontStyle + ';position:absolute;top:0;left:0');
-        body.appendChild(dummy);
+        gl.colorMask(false, false, false, false);
 
-        result = dummy.offsetHeight;
-        PIXI.Text.heightCache[fontStyle] = result;
+        if (webGLData.mode === 1)
+        {
+            sms.reverse = !sms.reverse;
 
-        body.removeChild(dummy);
-    }
+            if (sms.reverse)
+            {
+                gl.stencilFunc(gl.EQUAL, 0xFF - (level+1), 0xFF);
+                gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR);
+            }
+            else
+            {
+                gl.stencilFunc(gl.EQUAL,level+1, 0xFF);
+                gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR);
+            }
 
-    return result;
-};
+            // draw a quad to increment..
+            gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 );
 
-/**
- * Applies newlines to a string to have it optimally fit into the horizontal
- * bounds set by the Text object's wordWrapWidth property.
- *
- * @method wordWrap
- * @param text {String}
- * @private
- */
-PIXI.Text.prototype.wordWrap = function(text)
-{
-    // Greedy wrapping algorithm that will wrap words as the line grows longer
-    // than its horizontal bounds.
-    var result = '';
-    var lines = text.split('\n');
-    for (var i = 0; i < lines.length; i++)
-    {
-        var spaceLeft = this.style.wordWrapWidth;
-        var words = lines[i].split(' ');
-        for (var j = 0; j < words.length; j++)
+            gl.stencilFunc(gl.ALWAYS,0,0xFF);
+            gl.stencilOp(gl.KEEP,gl.KEEP,gl.INVERT);
+
+            // draw the triangle strip!
+            gl.drawElements(gl.TRIANGLE_FAN,  webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 );
+
+            if (!sms.reverse)
+            {
+                gl.stencilFunc(gl.EQUAL,0xFF-(level), 0xFF);
+            }
+            else
+            {
+                gl.stencilFunc(gl.EQUAL,level, 0xFF);
+            }
+
+        }
+        else
         {
-            var wordWidth = this.context.measureText(words[j]).width;
-            var wordWidthWithSpace = wordWidth + this.context.measureText(' ').width;
-            if(wordWidthWithSpace > spaceLeft)
+          //  console.log("<<>>")
+            if (!sms.reverse)
             {
-                // Skip printing the newline if it's the first word of the line that is
-                // greater than the word wrap width.
-                if(j > 0)
-                {
-                    result += '\n';
-                }
-                result += words[j] + ' ';
-                spaceLeft = this.style.wordWrapWidth - wordWidth;
+                gl.stencilFunc(gl.EQUAL, 0xFF - (level+1), 0xFF);
+                gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR);
             }
             else
             {
-                spaceLeft -= wordWidthWithSpace;
-                result += words[j] + ' ';
+                gl.stencilFunc(gl.EQUAL,level+1, 0xFF);
+                gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR);
+            }
+
+            gl.drawElements(gl.TRIANGLE_STRIP,  webGLData.indices.length, gl.UNSIGNED_SHORT, 0 );
+
+            if (!sms.reverse)
+            {
+                gl.stencilFunc(gl.EQUAL,0xFF-(level), 0xFF);
+            }
+            else
+            {
+                gl.stencilFunc(gl.EQUAL,level, 0xFF);
             }
         }
 
-        if (i < lines.length-1)
-        {
-            result += '\n';
-        }
+        gl.colorMask(true, true, true, true);
+        gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
+
+
     }
-    return result;
 };
 
 /**
- * Destroys this text object
+ * Destroys the mask stack.
  *
- * @method destroy
- * @param destroyTexture {Boolean}
  */
-PIXI.Text.prototype.destroy = function(destroyTexture)
+WebGLMaskManager.prototype.destroy = function ()
 {
-    if(destroyTexture)
-    {
-        this.texture.destroy();
-    }
+    WebGLManager.prototype.destroy.call(this);
 
+    this.stencilMaskStack.stencilStack = null;
 };
 
-PIXI.Text.heightCache = {};
-
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * Applies the Mask and adds it to the current filter stack.
+ *
+ * @param maskData {any[]} The mask data structure to use
  */
+WebGLMaskManager.prototype.pushMask = function (maskData)
+{
+
+
+    this.renderer.setObjectRenderer(this.renderer.plugins.graphics);
+
+    if (maskData.dirty)
+    {
+        this.renderer.plugins.graphics.updateGraphics(maskData, this.renderer.gl);
+    }
+
+    if (!maskData._webGL[this.renderer.gl.id].data.length)
+    {
+        return;
+    }
+
+    this.pushStencil(maskData, maskData._webGL[this.renderer.gl.id].data[0], this.renderer);
+};
 
 /**
- * A Text Object will create a line(s) of text using bitmap font. To split a line you can use '\n', '\r' or '\r\n'
- * You can generate the fnt files using
- * http://www.angelcode.com/products/bmfont/ for windows or
- * http://www.bmglyph.com/ for mac.
+ * Removes the last filter from the filter stack and doesn't return it.
  *
- * @class BitmapText
- * @extends DisplayObjectContainer
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param style {Object} The style parameters
- * @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously)
- * @param [style.align='left'] {String} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
+ * @param maskData {any[]}
  */
-PIXI.BitmapText = function(text, style)
+WebGLMaskManager.prototype.popMask = function (maskData)
 {
-    PIXI.DisplayObjectContainer.call(this);
-
-    this._pool = [];
+    this.renderer.setObjectRenderer(this.renderer.plugins.graphics);
 
-    this.setText(text);
-    this.setStyle(style);
-    this.updateText();
-    this.dirty = false;
+    this.popStencil(maskData, maskData._webGL[this.renderer.gl.id].data[0], this.renderer);
 };
 
-// constructor
-PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
-PIXI.BitmapText.prototype.constructor = PIXI.BitmapText;
+
+},{"../../../utils":74,"./WebGLManager":57}],57:[function(require,module,exports){
+/**
+ * @class
+ * @memberof PIXI
+ * @param renderer {WebGLRenderer} The renderer this manager works for.
+ */
+function WebGLManager(renderer)
+{
+    /**
+     * The renderer this manager works for.
+     *
+     * @member {WebGLRenderer}
+     */
+    this.renderer = renderer;
+
+    this.renderer.on('context', this.onContextChange, this);
+}
+
+WebGLManager.prototype.constructor = WebGLManager;
+module.exports = WebGLManager;
 
 /**
- * Set the copy for the text object
+ * Generic method called when there is a WebGL context change.
  *
- * @method setText
- * @param text {String} The copy that you would like the text to display
  */
-PIXI.BitmapText.prototype.setText = function(text)
+WebGLManager.prototype.onContextChange = function ()
 {
-    this.text = text || ' ';
-    this.dirty = true;
+  // do some codes init!
 };
 
 /**
- * Set the style of the text
- * style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously)
- * [style.align='left'] {String} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
+ * Generic destroy methods to be overridden by the subclass
  *
- * @method setStyle
- * @param style {Object} The style parameters, contained as properties of an object
  */
-PIXI.BitmapText.prototype.setStyle = function(style)
+WebGLManager.prototype.destroy = function ()
 {
-    style = style || {};
-    style.align = style.align || 'left';
-    this.style = style;
+    this.renderer.off('context', this.onContextChange, this);
 
-    var font = style.font.split(' ');
-    this.fontName = font[font.length - 1];
-    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
-
-    this.dirty = true;
-    this.tint = style.tint;
+    this.renderer = null;
 };
 
+},{}],58:[function(require,module,exports){
+var Shader = require('./Shader');
+
 /**
- * Renders text and updates it when needed
- *
- * @method updateText
- * @private
+ * @class
+ * @memberof PIXI
+ * @extends PIXI.Shader
+ * @param shaderManager {ShaderManager} The webgl shader manager this shader works for.
  */
-PIXI.BitmapText.prototype.updateText = function()
+function ComplexPrimitiveShader(shaderManager)
 {
-    var data = PIXI.BitmapText.fonts[this.fontName];
-    var pos = new PIXI.Point();
-    var prevCharCode = null;
-    var chars = [];
-    var maxLineWidth = 0;
-    var lineWidths = [];
-    var line = 0;
-    var scale = this.fontSize / data.size;
-    
+    Shader.call(this,
+        shaderManager,
+        // vertex shader
+        [
+            'attribute vec2 aVertexPosition;',
 
-    for(var i = 0; i < this.text.length; i++)
-    {
-        var charCode = this.text.charCodeAt(i);
-        if(/(?:\r\n|\r|\n)/.test(this.text.charAt(i)))
-        {
-            lineWidths.push(pos.x);
-            maxLineWidth = Math.max(maxLineWidth, pos.x);
-            line++;
+            'uniform mat3 translationMatrix;',
+            'uniform mat3 projectionMatrix;',
 
-            pos.x = 0;
-            pos.y += data.lineHeight;
-            prevCharCode = null;
-            continue;
-        }
+            'uniform vec3 tint;',
+            'uniform float alpha;',
+            'uniform vec3 color;',
 
-        var charData = data.chars[charCode];
-        if(!charData) continue;
+            'varying vec4 vColor;',
 
-        if(prevCharCode && charData[prevCharCode])
+            'void main(void){',
+            '   gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);',
+            '   vColor = vec4(color * alpha * tint, alpha);',//" * vec4(tint * alpha, alpha);',
+            '}'
+        ].join('\n'),
+        // fragment shader
+        [
+            'precision mediump float;',
+
+            'varying vec4 vColor;',
+
+            'void main(void){',
+            '   gl_FragColor = vColor;',
+            '}'
+        ].join('\n'),
+        // custom uniforms
         {
-            pos.x += charData.kerning[prevCharCode];
+            tint:   { type: '3f', value: [0, 0, 0] },
+            alpha:  { type: '1f', value: 0 },
+            color:  { type: '3f', value: [0,0,0] },
+            translationMatrix: { type: 'mat3', value: new Float32Array(9) },
+            projectionMatrix: { type: 'mat3', value: new Float32Array(9) }
+        },
+        // attributes
+        {
+            aVertexPosition:0
         }
-        chars.push({texture:charData.texture, line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
-        pos.x += charData.xAdvance;
+    );
+}
 
-        prevCharCode = charCode;
-    }
+ComplexPrimitiveShader.prototype = Object.create(Shader.prototype);
+ComplexPrimitiveShader.prototype.constructor = ComplexPrimitiveShader;
+module.exports = ComplexPrimitiveShader;
 
-    lineWidths.push(pos.x);
-    maxLineWidth = Math.max(maxLineWidth, pos.x);
+},{"./Shader":60}],59:[function(require,module,exports){
+var Shader = require('./Shader');
 
-    var lineAlignOffsets = [];
-    for(i = 0; i <= line; i++)
-    {
-        var alignOffset = 0;
-        if(this.style.align === 'right')
+/**
+ * @class
+ * @memberof PIXI
+ * @extends PIXI.Shader
+ * @param shaderManager {ShaderManager} The webgl shader manager this shader works for.
+ */
+function PrimitiveShader(shaderManager)
+{
+    Shader.call(this,
+        shaderManager,
+        // vertex shader
+        [
+            'attribute vec2 aVertexPosition;',
+            'attribute vec4 aColor;',
+
+            'uniform mat3 translationMatrix;',
+            'uniform mat3 projectionMatrix;',
+
+            'uniform float alpha;',
+            'uniform float flipY;',
+            'uniform vec3 tint;',
+
+            'varying vec4 vColor;',
+
+            'void main(void){',
+            '   gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);',
+            '   vColor = aColor * vec4(tint * alpha, alpha);',
+            '}'
+        ].join('\n'),
+        // fragment shader
+        [
+            'precision mediump float;',
+
+            'varying vec4 vColor;',
+
+            'void main(void){',
+            '   gl_FragColor = vColor;',
+            '}'
+        ].join('\n'),
+        // custom uniforms
         {
-            alignOffset = maxLineWidth - lineWidths[i];
-        }
-        else if(this.style.align === 'center')
+            tint:   { type: '3f', value: [0, 0, 0] },
+            alpha:  { type: '1f', value: 0 },
+            translationMatrix: { type: 'mat3', value: new Float32Array(9) },
+            projectionMatrix: { type: 'mat3', value: new Float32Array(9) }
+        },
+        // custom attributes
         {
-            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+            aVertexPosition:0,
+            aColor:0
         }
-        lineAlignOffsets.push(alignOffset);
-    }
-
-    var lenChildren = this.children.length;
-    var lenChars = chars.length;
-    var tint = this.tint || 0xFFFFFF;
-    for(i = 0; i < lenChars; i++)
-    {
-        var c = i < lenChildren ? this.children[i] : this._pool.pop(); // get old child if have. if not - take from pool.
+    );
+}
 
-        if (c) c.setTexture(chars[i].texture); // check if got one before.
-        else c = new PIXI.Sprite(chars[i].texture); // if no create new one.
+PrimitiveShader.prototype = Object.create(Shader.prototype);
+PrimitiveShader.prototype.constructor = PrimitiveShader;
+module.exports = PrimitiveShader;
 
-        c.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
-        c.position.y = chars[i].position.y * scale;
-        c.scale.x = c.scale.y = scale;
-        c.tint = tint;
-        if (!c.parent) this.addChild(c);
-    }
+},{"./Shader":60}],60:[function(require,module,exports){
+/*global console */
+var utils = require('../../../utils');
 
-    // remove unnecessary children.
-    // and put their into the pool.
-    while(this.children.length > lenChars)
+/**
+ * @class
+ * @memberof PIXI
+ * @param shaderManager {ShaderManager} The webgl shader manager this shader works for.
+ * @param [vertexSrc] {string} The source of the vertex shader.
+ * @param [fragmentSrc] {string} The source of the fragment shader.
+ * @param [uniforms] {object} Uniforms for this shader.
+ * @param [attributes] {object} Attributes for this shader.
+ */
+function Shader(shaderManager, vertexSrc, fragmentSrc, uniforms, attributes)
+{
+    if (!vertexSrc || !fragmentSrc)
     {
-        var child = this.getChildAt(this.children.length - 1);
-        this._pool.push(child);
-        this.removeChild(child);
+         throw new Error('Pixi.js Error. Shader requires vertexSrc and fragmentSrc');
     }
 
-
     /**
-     * [read-only] The width of the overall text, different from fontSize,
-     * which is defined in the style object
-     *
-     * @property textWidth
-     * @type Number
+     * A unique id
+     * @member {number}
+     * @readonly
      */
-    this.textWidth = maxLineWidth * scale;
+    this.uuid = utils.uuid();
 
     /**
-     * [read-only] The height of the overall text, different from fontSize,
-     * which is defined in the style object
-     *
-     * @property textHeight
-     * @type Number
+     * The current WebGL drawing context
+     * @member {WebGLRenderingContext}
+     * @readonly
      */
-    this.textHeight = (pos.y + data.lineHeight) * scale;
-};
+    this.gl = shaderManager.renderer.gl;
 
-/**
- * Updates the transform of this object
- *
- * @method updateTransform
- * @private
- */
-PIXI.BitmapText.prototype.updateTransform = function()
-{
-    if(this.dirty)
-    {
-        this.updateText();
-        this.dirty = false;
-    }
+    //TODO maybe we should pass renderer rather than shader manger?? food for thought..
+    this.shaderManager = shaderManager;
 
-    PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
-};
+    /**
+     * The WebGL program.
+     *
+     * @member {WebGLProgram}
+     * @readonly
+     */
+    this.program = null;
 
-PIXI.BitmapText.fonts = {};
+    /**
+     * The uniforms as an object
+     * @member {object}
+     * @private
+     */
+    this.uniforms = uniforms || {};
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
- 
-/**
- * Holds all information related to an Interaction event
- *
- * @class InteractionData
- * @constructor
- */
-PIXI.InteractionData = function()
-{
     /**
-     * This point stores the global coords of where the touch/mouse event happened
-     *
-     * @property global
-     * @type Point
+     * The attributes as an object
+     * @member {object}
+     * @private
      */
-    this.global = new PIXI.Point();
+    this.attributes = attributes || {};
 
-    // this is here for legacy... but will remove
-    this.local = new PIXI.Point();
+    /**
+     * Internal texture counter
+     * @member {number}
+     * @private
+     */
+    this.textureCount = 1;
 
     /**
-     * The target Sprite that was interacted with
+     * The vertex shader as an array of strings
      *
-     * @property target
-     * @type Sprite
+     * @member {string}
      */
-    this.target = null;
+    this.vertexSrc = vertexSrc;
 
     /**
-     * When passed to an event handler, this will be the original DOM Event that was captured
+     * The fragment shader as an array of strings
      *
-     * @property originalEvent
-     * @type Event
+     * @member {string}
      */
-    this.originalEvent = null;
-};
+    this.fragmentSrc = fragmentSrc;
 
-/**
- * This will return the local coordinates of the specified displayObject for this InteractionData
+    this.init();
+}
+
+Shader.prototype.constructor = Shader;
+module.exports = Shader;
+
+/*
+ * Creates the shader and uses it
  *
- * @method getLocalPosition
- * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off
- * @return {Point} A point containing the coordinates of the InteractionData position relative to the DisplayObject
  */
-PIXI.InteractionData.prototype.getLocalPosition = function(displayObject)
+Shader.prototype.init = function ()
 {
-    var worldTransform = displayObject.worldTransform;
-    var global = this.global;
+    this.compile();
 
-    // do a cheeky transform to get the mouse coords;
-    var a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx,
-        a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty,
-        id = 1 / (a00 * a11 + a01 * -a10);
-    // set the mouse coords...
-    return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id,
-                               a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id);
+    this.gl.useProgram(this.program);
+
+    this.cacheUniformLocations(Object.keys(this.uniforms));
+    this.cacheAttributeLocations(Object.keys(this.attributes));
 };
 
-// constructor
-PIXI.InteractionData.prototype.constructor = PIXI.InteractionData;
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+/*
+ * Caches the locations of the uniform for reuse
+ * @param keys {string} the uniforms to cache
  */
+Shader.prototype.cacheUniformLocations = function (keys)
+{
+    for (var i = 0; i < keys.length; ++i)
+    {
+        this.uniforms[keys[i]]._location = this.gl.getUniformLocation(this.program, keys[i]);
+    }
+};
 
- /**
- * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive
- * if its interactive parameter is set to true
- * This manager also supports multitouch.
- *
- * @class InteractionManager
- * @constructor
- * @param stage {Stage} The stage to handle interactions
+/*
+ * Caches the locations of the attribute for reuse
+ * @param keys {string} the attributes to cache
  */
-PIXI.InteractionManager = function(stage)
+Shader.prototype.cacheAttributeLocations = function (keys)
 {
-    /**
-     * a reference to the stage
-     *
-     * @property stage
-     * @type Stage
-     */
-    this.stage = stage;
+    for (var i = 0; i < keys.length; ++i)
+    {
+        this.attributes[keys[i]] = this.gl.getAttribLocation(this.program, keys[i]);
+    }
 
-    /**
-     * the mouse data
-     *
-     * @property mouse
-     * @type InteractionData
-     */
-    this.mouse = new PIXI.InteractionData();
+    // TODO: Check if this is needed anymore...
 
-    /**
-     * an object that stores current touches (InteractionData) by id reference
-     *
-     * @property touchs
-     * @type Object
-     */
-    this.touchs = {};
+    // Begin worst hack eva //
+
+    // WHY??? ONLY on my chrome pixel the line above returns -1 when using filters?
+    // maybe its something to do with the current state of the gl context.
+    // I'm convinced this is a bug in the chrome browser as there is NO reason why this should be returning -1 especially as it only manifests on my chrome pixel
+    // If theres any webGL people that know why could happen please help :)
+    // if (this.attributes.aColor === -1){
+    //     this.attributes.aColor = 2;
+    // }
 
-    // helpers
-    this.tempPoint = new PIXI.Point();
+    // End worst hack eva //
+};
 
-    /**
-     * 
-     * @property mouseoverEnabled
-     * @type Boolean
-     * @default
-     */
-    this.mouseoverEnabled = true;
+/*
+ * Attaches the shaders and creates the program
+ * @return {WebGLProgram}
+ */
+Shader.prototype.compile = function ()
+{
+    var gl = this.gl;
 
-    /**
-     * tiny little interactiveData pool !
-     * 
-     * @property pool
-     * @type Array
-     */
-    this.pool = [];
+    var glVertShader = this._glCompile(gl.VERTEX_SHADER, this.vertexSrc);
+    var glFragShader = this._glCompile(gl.FRAGMENT_SHADER, this.fragmentSrc);
 
-    /**
-     * An array containing all the iterative items from the our interactive tree
-     * @property interactiveItems
-     * @type Array
-     * @private
-     *
-     */
-    this.interactiveItems = [];
+    var program = gl.createProgram();
 
-    /**
-     * Our canvas
-     * @property interactionDOMElement
-     * @type HTMLCanvasElement
-     * @private
-     */
-    this.interactionDOMElement = null;
+    gl.attachShader(program, glVertShader);
+    gl.attachShader(program, glFragShader);
+    gl.linkProgram(program);
 
-    //this will make it so that you dont have to call bind all the time
-    this.onMouseMove = this.onMouseMove.bind( this );
-    this.onMouseDown = this.onMouseDown.bind(this);
-    this.onMouseOut = this.onMouseOut.bind(this);
-    this.onMouseUp = this.onMouseUp.bind(this);
+    // if linking fails, then log and cleanup
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS))
+    {
+        console.error('Pixi.js Error: Could not initialize shader.');
+        console.error('gl.VALIDATE_STATUS', gl.getProgramParameter(program, gl.VALIDATE_STATUS));
+        console.error('gl.getError()', gl.getError());
 
-    this.onTouchStart = this.onTouchStart.bind(this);
-    this.onTouchEnd = this.onTouchEnd.bind(this);
-    this.onTouchMove = this.onTouchMove.bind(this);
+        // if there is a program info log, log it
+        if (gl.getProgramInfoLog(program) !== '')
+        {
+            console.warn('Pixi.js Warning: gl.getProgramInfoLog()', gl.getProgramInfoLog(program));
+        }
 
-    this.last = 0;
+        gl.deleteProgram(program);
+        program = null;
+    }
 
-    /**
-     * The css style of the cursor that is being used
-     * @property currentCursorStyle
-     * @type String
-     *
-     */
-    this.currentCursorStyle = 'inherit';
+    // clean up some shaders
+    gl.deleteShader(glVertShader);
+    gl.deleteShader(glFragShader);
 
-    /**
-     * Is set to true when the mouse is moved out of the canvas
-     * @property mouseOut
-     * @type Boolean
-     *
-     */
-    this.mouseOut = false;
+    return (this.program = program);
 };
 
-// constructor
-PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager;
+/*
+Shader.prototype.buildSync = function ()
+{
+   // var str = ""
+
+   // str =  "Shader.prototype.syncUniforms = function()";
+   // str += "{\n";
+
+    for (var key in this.uniforms)
+    {
+        var uniform = this.uniforms[key];
+
+        Object.defineProperty(this, key, {
+
+            get: function ()
+            {
+                return uniform.value
+            },
+            set: function (value)
+            {
+                this.setUniform(uniform, value);
+            }
+        });
+
+        console.log( makePropSetter( key, " bloop", uniform.type )  )
+  //      Object.def
+        //    location = uniform._location,
+          //  value = uniform.value,
+            //i, il;
+
+    //    str += "gl.uniform1i(this.uniforms."+ key +"._location, this.uniforms." + key + ".value );\n"
+
+    }
+
+}*/
 
 /**
- * Collects an interactive sprite recursively to have their interactions managed
- *
- * @method collectInteractiveSprite
- * @param displayObject {DisplayObject} the displayObject to collect
- * @param iParent {DisplayObject} the display object's parent
- * @private
- */
-PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent)
+* Adds a new uniform
+*
+* @param uniform {Object} the new uniform to attach
+*/
+Shader.prototype.syncUniform = function (uniform)
 {
-    var children = displayObject.children;
-    var length = children.length;
+    var location = uniform._location,
+        value = uniform.value,
+        gl = this.gl,
+        i, il;
 
-    // make an interaction tree... {item.__interactiveParent}
-    for (var i = length-1; i >= 0; i--)
+    switch (uniform.type)
     {
-        var child = children[i];
+        // single int value
+        case 'i':
+        case '1i':
+            gl.uniform1i(location, value);
+            break;
+
+        // single float value
+        case 'f':
+        case '1f':
+            gl.uniform1f(location, value);
+            break;
+
+        // Float32Array(2) or JS Arrray
+        case '2f':
+            gl.uniform2f(location, value[0], value[1]);
+            break;
+
+        // Float32Array(3) or JS Arrray
+        case '3f':
+            gl.uniform3f(location, value[0], value[1], value[2]);
+            break;
+
+        // Float32Array(4) or JS Arrray
+        case '4f':
+            gl.uniform4f(location, value[0], value[1], value[2], value[3]);
+            break;
+
+        // a 2D Point object
+        case 'v2':
+            gl.uniform2f(location, value.x, value.y);
+            break;
+
+        // a 3D Point object
+        case 'v3':
+            gl.uniform3f(location, value.x, value.y, value.z);
+            break;
+
+        // a 4D Point object
+        case 'v4':
+            gl.uniform4f(location, value.x, value.y, value.z, value.w);
+            break;
+
+        // Int32Array or JS Array
+        case '1iv':
+            gl.uniform1iv(location, value);
+            break;
+
+        // Int32Array or JS Array
+        case '2iv':
+            gl.uniform2iv(location, value);
+            break;
+
+        // Int32Array or JS Array
+        case '3iv':
+            gl.uniform3iv(location, value);
+            break;
+
+        // Int32Array or JS Array
+        case '4iv':
+            gl.uniform4iv(location, value);
+            break;
+
+        // Float32Array or JS Array
+        case '1fv':
+            gl.uniform1fv(location, value);
+            break;
+
+        // Float32Array or JS Array
+        case '2fv':
+            gl.uniform2fv(location, value);
+            break;
+
+        // Float32Array or JS Array
+        case '3fv':
+            gl.uniform3fv(location, value);
+            break;
+
+        // Float32Array or JS Array
+        case '4fv':
+            gl.uniform4fv(location, value);
+            break;
+
+        // Float32Array or JS Array
+        case 'm2':
+        case 'mat2':
+        case 'Matrix2fv':
+            gl.uniformMatrix2fv(location, uniform.transpose, value);
+            break;
+
+        // Float32Array or JS Array
+        case 'm3':
+        case 'mat3':
+        case 'Matrix3fv':
+
+            gl.uniformMatrix3fv(location, uniform.transpose, value);
+            break;
+
+        // Float32Array or JS Array
+        case 'm4':
+        case 'mat4':
+        case 'Matrix4fv':
+            gl.uniformMatrix4fv(location, uniform.transpose, value);
+            break;
+
+        // a Color Value
+        case 'c':
+            if (typeof value === 'number')
+            {
+                value = utils.hex2rgb(value);
+            }
 
-        // push all interactive bits
-        if(child.interactive)
-        {
-            iParent.interactiveChildren = true;
-            //child.__iParent = iParent;
-            this.interactiveItems.push(child);
+            gl.uniform3f(location, value[0], value[1], value[2]);
+            break;
+
+        // flat array of integers (JS or typed array)
+        case 'iv1':
+            gl.uniform1iv(location, value);
+            break;
+
+        // flat array of integers with 3 x N size (JS or typed array)
+        case 'iv':
+            gl.uniform3iv(location, value);
+            break;
 
-            if(child.children.length > 0)
+        // flat array of floats (JS or typed array)
+        case 'fv1':
+            gl.uniform1fv(location, value);
+            break;
+
+        // flat array of floats with 3 x N size (JS or typed array)
+        case 'fv':
+            gl.uniform3fv(location, value);
+            break;
+
+        // array of 2D Point objects
+        case 'v2v':
+            if (!uniform._array)
             {
-                this.collectInteractiveSprite(child, child);
+                uniform._array = new Float32Array(2 * value.length);
             }
-        }
-        else
-        {
-            child.__iParent = null;
 
-            if(child.children.length > 0)
+            for (i = 0, il = value.length; i < il; ++i)
             {
-                this.collectInteractiveSprite(child, iParent);
+                uniform._array[i * 2]       = value[i].x;
+                uniform._array[i * 2 + 1]   = value[i].y;
             }
-        }
 
-    }
-};
+            gl.uniform2fv(location, uniform._array);
+            break;
 
-/**
- * Sets the target for event delegation
- *
- * @method setTarget
- * @param target {WebGLRenderer|CanvasRenderer} the renderer to bind events to
- * @private
- */
-PIXI.InteractionManager.prototype.setTarget = function(target)
-{
-    this.target = target;
+        // array of 3D Point objects
+        case 'v3v':
+            if (!uniform._array)
+            {
+                uniform._array = new Float32Array(3 * value.length);
+            }
 
-    //check if the dom element has been set. If it has don't do anything
-    if( this.interactionDOMElement === null ) {
+            for (i = 0, il = value.length; i < il; ++i)
+            {
+                uniform._array[i * 3]       = value[i].x;
+                uniform._array[i * 3 + 1]   = value[i].y;
+                uniform._array[i * 3 + 2]   = value[i].z;
 
-        this.setTargetDomElement( target.view );
-    }
+            }
 
-    
-};
+            gl.uniform3fv(location, uniform._array);
+            break;
 
+        // array of 4D Point objects
+        case 'v4v':
+            if (!uniform._array)
+            {
+                uniform._array = new Float32Array(4 * value.length);
+            }
 
-/**
- * Sets the DOM element which will receive mouse/touch events. This is useful for when you have other DOM
- * elements on top of the renderers Canvas element. With this you'll be able to delegate another DOM element
- * to receive those events
- *
- * @method setTargetDomElement
- * @param domElement {DOMElement} the DOM element which will receive mouse and touch events
- * @private
- */
-PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement)
-{
+            for (i = 0, il = value.length; i < il; ++i)
+            {
+                uniform._array[i * 4]       = value[i].x;
+                uniform._array[i * 4 + 1]   = value[i].y;
+                uniform._array[i * 4 + 2]   = value[i].z;
+                uniform._array[i * 4 + 3]   = value[i].w;
 
-    this.removeEvents();
+            }
 
+            gl.uniform4fv(location, uniform._array);
+            break;
 
-    if (window.navigator.msPointerEnabled)
-    {
-        // time to remove some of that zoom in ja..
-        domElement.style['-ms-content-zooming'] = 'none';
-        domElement.style['-ms-touch-action'] = 'none';
+        // PIXI.Texture
+        case 't':
+        case 'sampler2D':
 
-        // DO some window specific touch!
-    }
+            if (!uniform.value || !uniform.value.baseTexture.hasLoaded)
+            {
+                break;
+            }
 
-    this.interactionDOMElement = domElement;
+            // activate this texture
+            gl.activeTexture(gl['TEXTURE' + this.textureCount]);
 
-    domElement.addEventListener('mousemove',  this.onMouseMove, true);
-    domElement.addEventListener('mousedown',  this.onMouseDown, true);
-    domElement.addEventListener('mouseout',   this.onMouseOut, true);
+            var texture = uniform.value.baseTexture._glTextures[gl.id];
 
-    // aint no multi touch just yet!
-    domElement.addEventListener('touchstart', this.onTouchStart, true);
-    domElement.addEventListener('touchend', this.onTouchEnd, true);
-    domElement.addEventListener('touchmove', this.onTouchMove, true);
+            if (!texture)
+            {
+                this.initSampler2D(uniform);
 
-    document.body.addEventListener('mouseup',  this.onMouseUp, true);
-};
+                // set the textur to the newly created one..
+                texture = uniform.value.baseTexture._glTextures[gl.id];
+            }
 
+            // bind the texture
+            gl.bindTexture(gl.TEXTURE_2D, texture);
 
-PIXI.InteractionManager.prototype.removeEvents = function()
-{
-    if(!this.interactionDOMElement)return;
+            // set uniform to texture index
+            gl.uniform1i(uniform._location, this.textureCount);
 
-    this.interactionDOMElement.style['-ms-content-zooming'] = '';
-    this.interactionDOMElement.style['-ms-touch-action'] = '';
+            // increment next texture id
+            this.textureCount++;
 
-    this.interactionDOMElement.removeEventListener('mousemove',  this.onMouseMove, true);
-    this.interactionDOMElement.removeEventListener('mousedown',  this.onMouseDown, true);
-    this.interactionDOMElement.removeEventListener('mouseout',   this.onMouseOut, true);
+            break;
 
-    // aint no multi touch just yet!
-    this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true);
-    this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true);
-    this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true);
+        default:
+            console.warn('Pixi.js Shader Warning: Unknown uniform type: ' + uniform.type);
+    }
+};
 
-    this.interactionDOMElement = null;
+/*
+ * Updates the shader uniform values.
+ */
+Shader.prototype.syncUniforms = function ()
+{
+    this.textureCount = 1;
 
-    document.body.removeEventListener('mouseup',  this.onMouseUp, true);
+    for (var key in this.uniforms)
+    {
+        this.syncUniform(this.uniforms[key]);
+    }
 };
 
+
 /**
- * updates the state of interactive objects
+ * Initialises a Sampler2D uniform (which may only be available later on after initUniforms once the texture has loaded)
  *
- * @method update
- * @private
  */
-PIXI.InteractionManager.prototype.update = function()
+Shader.prototype.initSampler2D = function (uniform)
 {
-    if(!this.target)return;
-
-    // frequency of 30fps??
-    var now = Date.now();
-    var diff = now - this.last;
-    diff = (diff * PIXI.INTERACTION_FREQUENCY ) / 1000;
-    if(diff < 1)return;
-    this.last = now;
+    var gl = this.gl;
 
-    var i = 0;
+    var texture = uniform.value.baseTexture;
 
-    // ok.. so mouse events??
-    // yes for now :)
-    // OPTIMISE - how often to check??
-    if(this.dirty)
+    if(!texture.hasLoaded)
     {
-        this.dirty = false;
+        return;
+    }
 
-        var len = this.interactiveItems.length;
 
-        for (i = 0; i < len; i++) {
-            this.interactiveItems[i].interactiveChildren = false;
-        }
 
-        this.interactiveItems = [];
+    if (uniform.textureData)
+    {
 
-        if(this.stage.interactive)this.interactiveItems.push(this.stage);
-        // go through and collect all the objects that are interactive..
-        this.collectInteractiveSprite(this.stage, this.stage);
-    }
+        //TODO move this...
+        var data = uniform.textureData;
 
-    // loop through interactive objects!
-    var length = this.interactiveItems.length;
-    var cursor = 'inherit';
-    var over = false;
+        texture._glTextures[gl.id] = gl.createTexture();
 
-    for (i = 0; i < length; i++)
-    {
-        var item = this.interactiveItems[i];
+        gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);
 
-        // OPTIMISATION - only calculate every time if the mousemove function exists..
-        // OK so.. does the object have any other interactive functions?
-        // hit-test the clip!
-       // if(item.mouseover || item.mouseout || item.buttonMode)
-       // {
-        // ok so there are some functions so lets hit test it..
-        item.__hit = this.hitTest(item, this.mouse);
-        this.mouse.target = item;
-        // ok so deal with interactions..
-        // looks like there was a hit!
-        if(item.__hit && !over)
-        {
-            if(item.buttonMode) cursor = item.defaultCursor;
+        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha);
+        // GLTexture = mag linear, min linear_mipmap_linear, wrap repeat + gl.generateMipmap(gl.TEXTURE_2D);
+        // GLTextureLinear = mag/min linear, wrap clamp
+        // GLTextureNearestRepeat = mag/min NEAREST, wrap repeat
+        // GLTextureNearest = mag/min nearest, wrap clamp
+        // AudioTexture = whatever + luminance + width 512, height 2, border 0
+        // KeyTexture = whatever + luminance + width 256, height 2, border 0
 
-            if(!item.interactiveChildren)over = true;
+        //  magFilter can be: gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR or gl.NEAREST
+        //  wrapS/T can be: gl.CLAMP_TO_EDGE or gl.REPEAT
 
-            if(!item.__isOver)
-            {
-                if(item.mouseover)item.mouseover(this.mouse);
-                item.__isOver = true;
-            }
-        }
-        else
-        {
-            if(item.__isOver)
-            {
-                // roll out!
-                if(item.mouseout)item.mouseout(this.mouse);
-                item.__isOver = false;
-            }
-        }
-    }
+        gl.texImage2D(gl.TEXTURE_2D, 0, data.luminance ? gl.LUMINANCE : gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
 
-    if( this.currentCursorStyle !== cursor )
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, data.magFilter ? data.magFilter : gl.LINEAR );
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, data.wrapS ? data.wrapS : gl.CLAMP_TO_EDGE );
+
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, data.wrapS ? data.wrapS : gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, data.wrapT ? data.wrapT : gl.CLAMP_TO_EDGE);
+    }
+    else
     {
-        this.currentCursorStyle = cursor;
-        this.interactionDOMElement.style.cursor = cursor;
+        this.shaderManager.renderer.updateTexture(texture);
     }
 };
 
 /**
- * Is called when the mouse moves across the renderer element
+ * Destroys the shader.
  *
- * @method onMouseMove
- * @param event {Event} The DOM event of the mouse moving
- * @private
  */
-PIXI.InteractionManager.prototype.onMouseMove = function(event)
+Shader.prototype.destroy = function ()
 {
-    this.mouse.originalEvent = event || window.event; //IE uses window.event
-    // TODO optimize by not check EVERY TIME! maybe half as often? //
-    var rect = this.interactionDOMElement.getBoundingClientRect();
+    this.gl.deleteProgram(this.program);
 
-    this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width);
-    this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height);
+    this.gl = null;
+    this.uniforms = null;
+    this.attributes = null;
 
-    var length = this.interactiveItems.length;
+    this.vertexSrc = null;
+    this.fragmentSrc = null;
+};
 
-    for (var i = 0; i < length; i++)
-    {
-        var item = this.interactiveItems[i];
+Shader.prototype._glCompile = function (type, src)
+{
+    var shader = this.gl.createShader(type);
 
-        if(item.mousemove)
-        {
-            //call the function!
-            item.mousemove(this.mouse);
-        }
+    this.gl.shaderSource(shader, src);
+    this.gl.compileShader(shader);
+
+    if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS))
+    {
+        console.log(this.gl.getShaderInfoLog(shader));
+        return null;
     }
+
+    return shader;
 };
 
+},{"../../../utils":74}],61:[function(require,module,exports){
+var Shader = require('./Shader');
+
 /**
- * Is called when the mouse button is pressed down on the renderer element
- *
- * @method onMouseDown
- * @param event {Event} The DOM event of a mouse button being pressed down
- * @private
+ * @class
+ * @memberof PIXI
+ * @extends PIXI.Shader
+ * @param shaderManager {ShaderManager} The webgl shader manager this shader works for.
+ * @param [vertexSrc] {string} The source of the vertex shader.
+ * @param [fragmentSrc] {string} The source of the fragment shader.
+ * @param [customUniforms] {object} Custom uniforms to use to augment the built-in ones.
+ * @param [fragmentSrc] {string} The source of the fragment shader.
  */
-PIXI.InteractionManager.prototype.onMouseDown = function(event)
+function TextureShader(shaderManager, vertexSrc, fragmentSrc, customUniforms, customAttributes)
 {
-    this.mouse.originalEvent = event || window.event; //IE uses window.event
+    var uniforms = {
 
-    if(PIXI.AUTO_PREVENT_DEFAULT)this.mouse.originalEvent.preventDefault();
-
-    // loop through interaction tree...
-    // hit test each item! ->
-    // get interactive items under point??
-    //stage.__i
-    var length = this.interactiveItems.length;
+        uSampler:           { type: 'sampler2D', value: 0 },
+        projectionMatrix:   { type: 'mat3', value: new Float32Array(1, 0, 0,
+                                                                    0, 1, 0,
+                                                                    0, 0, 1) }
+    };
 
-    // while
-    // hit test
-    for (var i = 0; i < length; i++)
+    if (customUniforms)
     {
-        var item = this.interactiveItems[i];
-
-        if(item.mousedown || item.click)
+        for (var u in customUniforms)
         {
-            item.__mouseIsDown = true;
-            item.__hit = this.hitTest(item, this.mouse);
-
-            if(item.__hit)
-            {
-                //call the function!
-                if(item.mousedown)item.mousedown(this.mouse);
-                item.__isDown = true;
-
-                // just the one!
-                if(!item.interactiveChildren)break;
-            }
+            uniforms[u] = customUniforms[u];
         }
     }
-};
 
-/**
- * Is called when the mouse button is moved out of the renderer element
- *
- * @method onMouseOut
- * @param event {Event} The DOM event of a mouse button being moved out
- * @private 
- */
-PIXI.InteractionManager.prototype.onMouseOut = function()
-{
-    var length = this.interactiveItems.length;
 
-    this.interactionDOMElement.style.cursor = 'inherit';
+    var attributes = {
+        aVertexPosition:    0,
+        aTextureCoord:      0,
+        aColor:             0
+    };
 
-    for (var i = 0; i < length; i++)
+    if (customAttributes)
     {
-        var item = this.interactiveItems[i];
-        if(item.__isOver)
+        for (var a in customAttributes)
         {
-            this.mouse.target = item;
-            if(item.mouseout)item.mouseout(this.mouse);
-            item.__isOver = false;
+            attributes[a] = customAttributes[a];
         }
     }
 
-    this.mouseOut = true;
+    /**
+     * The vertex shader.
+     * @member {Array}
+     */
+    vertexSrc = vertexSrc || TextureShader.defaultVertexSrc;
 
-    // move the mouse to an impossible position
-    this.mouse.global.x = -10000;
-    this.mouse.global.y = -10000;
-};
+    /**
+     * The fragment shader.
+     * @member {Array}
+     */
+    fragmentSrc = fragmentSrc || TextureShader.defaultFragmentSrc;
 
-/**
- * Is called when the mouse button is released on the renderer element
- *
- * @method onMouseUp
- * @param event {Event} The DOM event of a mouse button being released
- * @private
- */
-PIXI.InteractionManager.prototype.onMouseUp = function(event)
-{
+    Shader.call(this, shaderManager, vertexSrc, fragmentSrc, uniforms, attributes);
+}
 
-    this.mouse.originalEvent = event || window.event; //IE uses window.event
+// constructor
+TextureShader.prototype = Object.create(Shader.prototype);
+TextureShader.prototype.constructor = TextureShader;
+module.exports = TextureShader;
 
-    var length = this.interactiveItems.length;
-    var up = false;
+TextureShader.defaultVertexSrc = [
+    'precision lowp float;',
+    'attribute vec2 aVertexPosition;',
+    'attribute vec2 aTextureCoord;',
+    'attribute vec4 aColor;',
 
-    for (var i = 0; i < length; i++)
-    {
-        var item = this.interactiveItems[i];
+    'uniform mat3 projectionMatrix;',
 
-        item.__hit = this.hitTest(item, this.mouse);
+    'varying vec2 vTextureCoord;',
+    'varying vec4 vColor;',
 
-        if(item.__hit && !up)
-        {
-            //call the function!
-            if(item.mouseup)
-            {
-                item.mouseup(this.mouse);
-            }
-            if(item.__isDown)
-            {
-                if(item.click)item.click(this.mouse);
-            }
+    'void main(void){',
+    '   gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);',
+    '   vTextureCoord = aTextureCoord;',
+    '   vColor = vec4(aColor.rgb * aColor.a, aColor.a);',
+    '}'
+].join('\n');
 
-            if(!item.interactiveChildren)up = true;
-        }
-        else
-        {
-            if(item.__isDown)
-            {
-                if(item.mouseupoutside)item.mouseupoutside(this.mouse);
-            }
-        }
+TextureShader.defaultFragmentSrc = [
+    'precision lowp float;',
 
-        item.__isDown = false;
-        //}
-    }
-};
+    'varying vec2 vTextureCoord;',
+    'varying vec4 vColor;',
+
+    'uniform sampler2D uSampler;',
+
+    'void main(void){',
+    '   gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;',
+    '}'
+].join('\n');
+
+},{"./Shader":60}],62:[function(require,module,exports){
+var WebGLManager = require('../managers/WebGLManager');
 
 /**
- * Tests if the current mouse coordinates hit a sprite
+ * Base for a common object renderer that can be used as a system renderer plugin.
  *
- * @method hitTest
- * @param item {DisplayObject} The displayObject to test for a hit
- * @param interactionData {InteractionData} The interactionData object to update in the case there is a hit
- * @private
+ * @class
+ * @extends PIXI.WebGLManager
+ * @memberof PIXI
+ * @param renderer {WebGLRenderer} The renderer this object renderer works for.
  */
-PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
+function ObjectRenderer(renderer)
 {
-    var global = interactionData.global;
+    WebGLManager.call(this, renderer);
+}
 
-    if( !item.worldVisible )return false;
 
-    // temp fix for if the element is in a non visible
-   
-    var isSprite = (item instanceof PIXI.Sprite),
-        worldTransform = item.worldTransform,
-        a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx,
-        a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty,
-        id = 1 / (a00 * a11 + a01 * -a10),
-        x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id,
-        y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id;
+ObjectRenderer.prototype = Object.create(WebGLManager.prototype);
+ObjectRenderer.prototype.constructor = ObjectRenderer;
+module.exports = ObjectRenderer;
 
-    interactionData.target = item;
+/**
+ * Starts the renderer and sets the shader
+ *
+ */
+ObjectRenderer.prototype.start = function ()
+{
+    // set the shader..
+};
 
-    //a sprite or display object with a hit area defined
-    if(item.hitArea && item.hitArea.contains) {
-        if(item.hitArea.contains(x, y)) {
-            //if(isSprite)
-            interactionData.target = item;
+/**
+ * Stops the renderer
+ *
+ */
+ObjectRenderer.prototype.stop = function ()
+{
+    this.flush();
+};
 
-            return true;
-        }
+/**
+ * flushes
+ *
+ */
+ObjectRenderer.prototype.flush = function ()
+{
+    // flush!
+};
 
-        return false;
-    }
-    // a sprite with no hitarea defined
-    else if(isSprite)
-    {
-        var width = item.texture.frame.width,
-            height = item.texture.frame.height,
-            x1 = -width * item.anchor.x,
-            y1;
+/**
+ * Renders an object
+ *
+ */
+ObjectRenderer.prototype.render = function (object) // jshint unused:false
+{
+    // render the object
+};
 
-        if(x > x1 && x < x1 + width)
-        {
-            y1 = -height * item.anchor.y;
+},{"../managers/WebGLManager":57}],63:[function(require,module,exports){
+/**
+ * Helper class to create a quad
+ * @class
+ * @memberof PIXI
+ * @param gl {WebGLRenderingContext} The gl context for this quad to use.
+ */
+function Quad(gl)
+{
+    /*
+     * the current WebGL drawing context
+     *
+     * @member {WebGLRenderingContext}
+     */
+    this.gl = gl;
 
-            if(y > y1 && y < y1 + height)
-            {
-                // set the target property if a hit is true!
-                interactionData.target = item;
-                return true;
-            }
-        }
-    }
+//    this.textures = new TextureUvs();
 
-    var length = item.children.length;
+    /**
+     * An array of vertices
+     *
+     * @member {Float32Array}
+     */
+    this.vertices = new Float32Array([
+        0,0,
+        200,0,
+        200,200,
+        0,200
+    ]);
 
-    for (var i = 0; i < length; i++)
-    {
-        var tempItem = item.children[i];
-        var hit = this.hitTest(tempItem, interactionData);
-        if(hit)
-        {
-            // hmm.. TODO SET CORRECT TARGET?
-            interactionData.target = item;
-            return true;
-        }
-    }
+    /**
+     * The Uvs of the quad
+     *
+     * @member {Float32Array}
+     */
+    this.uvs = new Float32Array([
+        0,0,
+        1,0,
+        1,1,
+        0,1
+    ]);
+
+//    var white = (0xFFFFFF >> 16) + (0xFFFFFF & 0xff00) + ((0xFFFFFF & 0xff) << 16) + (1 * 255 << 24);
+    //TODO convert this to a 32 unsigned int array
+    /**
+     * The color components of the triangles
+     *
+     * @member {Float32Array}
+     */
+    this.colors = new Float32Array([
+        1,1,1,1,
+        1,1,1,1,
+        1,1,1,1,
+        1,1,1,1
+    ]);
 
-    return false;
-};
+    /*
+     * @member {Uint16Array} An array containing the indices of the vertices
+     */
+    this.indices = new Uint16Array([
+        0, 1, 2, 0, 3, 2
+    ]);
 
-/**
- * Is called when a touch is moved across the renderer element
- *
- * @method onTouchMove
- * @param event {Event} The DOM event of a touch moving across the renderer view
- * @private
- */
-PIXI.InteractionManager.prototype.onTouchMove = function(event)
-{
-    var rect = this.interactionDOMElement.getBoundingClientRect();
-    var changedTouches = event.changedTouches;
-    var touchData;
-    var i = 0;
+    /*
+     * @member {WebGLBuffer} The vertex buffer
+     */
+    this.vertexBuffer = gl.createBuffer();
 
-    for (i = 0; i < changedTouches.length; i++)
-    {
-        var touchEvent = changedTouches[i];
-        touchData = this.touchs[touchEvent.identifier];
-        touchData.originalEvent =  event || window.event;
+    /*
+     * @member {WebGLBuffer} The index buffer
+     */
+    this.indexBuffer = gl.createBuffer();
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, (8 + 8 + 16) * 4, gl.DYNAMIC_DRAW);
+
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW);
 
-        // update the touch position
-        touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width);
-        touchData.global.y = (touchEvent.clientY - rect.top)  * (this.target.height / rect.height);
-        if(navigator.isCocoonJS) {
-            touchData.global.x = touchEvent.clientX;
-            touchData.global.y = touchEvent.clientY;
-        }
-    }
+    this.upload();
+}
 
-    var length = this.interactiveItems.length;
-    for (i = 0; i < length; i++)
-    {
-        var item = this.interactiveItems[i];
-        if(item.touchmove)
-            item.touchmove(touchData);
-    }
-};
+Quad.prototype.constructor = Quad;
 
 /**
- * Is called when a touch is started on the renderer element
- *
- * @method onTouchStart
- * @param event {Event} The DOM event of a touch starting on the renderer view
- * @private
+ * Maps two Rectangle to the quad
+ * @param rect {Rectangle} the first rectangle
+ * @param rect2 {Rectangle} the second rectangle
  */
-PIXI.InteractionManager.prototype.onTouchStart = function(event)
+Quad.prototype.map = function(rect, rect2)
 {
-    var rect = this.interactionDOMElement.getBoundingClientRect();
+    var x = 0; //rect2.x / rect.width;
+    var y = 0; //rect2.y / rect.height;
 
-    if(PIXI.AUTO_PREVENT_DEFAULT)event.preventDefault();
-    
-    var changedTouches = event.changedTouches;
-    for (var i=0; i < changedTouches.length; i++)
-    {
-        var touchEvent = changedTouches[i];
+    this.uvs[0] = x;
+    this.uvs[1] = y;
 
-        var touchData = this.pool.pop();
-        if(!touchData)touchData = new PIXI.InteractionData();
+    this.uvs[2] = x + rect2.width / rect.width;
+    this.uvs[3] = y;
 
-        touchData.originalEvent =  event || window.event;
+    this.uvs[4] = x + rect2.width / rect.width;
+    this.uvs[5] = y + rect2.height / rect.height;
 
-        this.touchs[touchEvent.identifier] = touchData;
-        touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width);
-        touchData.global.y = (touchEvent.clientY - rect.top)  * (this.target.height / rect.height);
-        if(navigator.isCocoonJS) {
-            touchData.global.x = touchEvent.clientX;
-            touchData.global.y = touchEvent.clientY;
-        }
+    this.uvs[6] = x;
+    this.uvs[7] = y + rect2.height / rect.height;
 
-        var length = this.interactiveItems.length;
+    /// -----
+    x = rect2.x;
+    y = rect2.y;
 
-        for (var j = 0; j < length; j++)
-        {
-            var item = this.interactiveItems[j];
+    this.vertices[0] = x;
+    this.vertices[1] = y;
 
-            if(item.touchstart || item.tap)
-            {
-                item.__hit = this.hitTest(item, touchData);
+    this.vertices[2] = x + rect2.width;
+    this.vertices[3] = y;
 
-                if(item.__hit)
-                {
-                    //call the function!
-                    if(item.touchstart)item.touchstart(touchData);
-                    item.__isDown = true;
-                    item.__touchData = touchData;
+    this.vertices[4] = x + rect2.width;
+    this.vertices[5] = y + rect2.height;
 
-                    if(!item.interactiveChildren)break;
-                }
-            }
-        }
-    }
+    this.vertices[6] = x;
+    this.vertices[7] = y + rect2.height;
+
+    this.upload();
 };
 
 /**
- * Is called when a touch is ended on the renderer element
- *
- * @method onTouchEnd
- * @param event {Event} The DOM event of a touch ending on the renderer view
- * @private
+ * Binds the buffer and uploads the data
  */
-PIXI.InteractionManager.prototype.onTouchEnd = function(event)
+Quad.prototype.upload = function()
 {
-    //this.mouse.originalEvent = event || window.event; //IE uses window.event
-    var rect = this.interactionDOMElement.getBoundingClientRect();
-    var changedTouches = event.changedTouches;
-
-    for (var i=0; i < changedTouches.length; i++)
-    {
-        var touchEvent = changedTouches[i];
-        var touchData = this.touchs[touchEvent.identifier];
-        var up = false;
-        touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width);
-        touchData.global.y = (touchEvent.clientY - rect.top)  * (this.target.height / rect.height);
-        if(navigator.isCocoonJS) {
-            touchData.global.x = touchEvent.clientX;
-            touchData.global.y = touchEvent.clientY;
-        }
+    var gl = this.gl;
 
-        var length = this.interactiveItems.length;
-        for (var j = 0; j < length; j++)
-        {
-            var item = this.interactiveItems[j];
-            var itemTouchData = item.__touchData; // <-- Here!
-            item.__hit = this.hitTest(item, touchData);
+    // TODO could probably be pushed into one upload!
+    gl.bindBuffer( gl.ARRAY_BUFFER, this.vertexBuffer );
 
-            if(itemTouchData === touchData)
-            {
-                // so this one WAS down...
-                touchData.originalEvent = event || window.event;
-                // hitTest??
+    gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertices);
 
-                if(item.touchend || item.tap)
-                {
-                    if(item.__hit && !up)
-                    {
-                        if(item.touchend)item.touchend(touchData);
-                        if(item.__isDown)
-                        {
-                            if(item.tap)item.tap(touchData);
-                        }
+    gl.bufferSubData(gl.ARRAY_BUFFER, 8 * 4, this.uvs);
 
-                        if(!item.interactiveChildren)up = true;
-                    }
-                    else
-                    {
-                        if(item.__isDown)
-                        {
-                            if(item.touchendoutside)item.touchendoutside(touchData);
-                        }
-                    }
+    gl.bufferSubData(gl.ARRAY_BUFFER, (8 + 8) * 4, this.colors);
+};
 
-                    item.__isDown = false;
-                }
+module.exports = Quad;
 
-                item.__touchData = null;
 
-            }
-            /*
-            else
-            {
 
-            }
-            */
-        }
-        // remove the touch..
-        this.pool.push(touchData);
-        this.touchs[touchEvent.identifier] = null;
-    }
-};
+},{}],64:[function(require,module,exports){
+var math = require('../../../math'),
+    utils = require('../../../utils'),
+    CONST = require('../../../const'),
+    //StencilManager = require('../managers/StencilManager'),
+    StencilMaskStack = require('./StencilMaskStack');
 
 /**
  * @author Mat Groves http://matgroves.com/ @Doormat23
  */
 
 /**
- * A Stage represents the root of the display tree. Everything connected to the stage is rendered
- *
- * @class Stage
- * @extends DisplayObjectContainer
- * @constructor
- * @param backgroundColor {Number} the background color of the stage, you have to pass this in is in hex format
- *      like: 0xFFFFFF for white
- * 
- * Creating a stage is a mandatory process when you use Pixi, which is as simple as this : 
- * var stage = new PIXI.Stage(0xFFFFFF);
- * where the parameter given is the background colour of the stage, in hex
- * you will use this stage instance to add your sprites to it and therefore to the renderer
- * Here is how to add a sprite to the stage : 
- * stage.addChild(sprite);
+ * @class
+ * @memberof PIXI
+ * @param gl {WebGLRenderingContext} the current WebGL drawing context
+ * @param width {number} the horizontal range of the filter
+ * @param height {number} the vertical range of the filter
+ * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values
+ * @param resolution {number} the current resolution
+ * @param root {boolean} Whether this object is the root element or not
  */
-PIXI.Stage = function(backgroundColor)
+var RenderTarget = function(gl, width, height, scaleMode, resolution, root)
 {
-    PIXI.DisplayObjectContainer.call( this );
+    //TODO Resolution could go here ( eg low res blurs )
 
     /**
-     * [read-only] Current transform of the object based on world (parent) factors
-     *
-     * @property worldTransform
-     * @type Mat3
-     * @readOnly
-     * @private
+     * The current WebGL drawing context
+     * @member {WebGLRenderingContext}
      */
-    this.worldTransform = new PIXI.Matrix();
+    this.gl = gl;
+
+    // next time to create a frame buffer and texture
 
     /**
-     * Whether or not the stage is interactive
-     *
-     * @property interactive
-     * @type Boolean
+     * A frame buffer
+     * @member {WebGLFrameBuffer}
      */
-    this.interactive = true;
+    this.frameBuffer = null;
 
     /**
-     * The interaction manage for this stage, manages all interactive activity on the stage
-     *
-     * @property interactive
-     * @type InteractionManager
+     * @member {Texture}
+     */
+    this.texture = null;
+
+    /**
+     * The size of the object as a rectangle
+     * @member {Rectangle}
+     */
+    this.size = new math.Rectangle(0, 0, 1, 1);
+
+    /**
+     * The current resolution
+     * @member {number}
+     */
+    this.resolution = resolution || CONST.RESOLUTION;
+
+    /**
+     * The projection matrix
+     * @member {Matrix}
      */
-    this.interactionManager = new PIXI.InteractionManager(this);
+    this.projectionMatrix = new math.Matrix();
+
+    /**
+     * The object's transform
+     * @member {Matrix}
+     */
+    this.transform = null;
 
     /**
-     * Whether the stage is dirty and needs to have interactions updated
      *
-     * @property dirty
-     * @type Boolean
-     * @private
+     * @member {Rectangle}
      */
-    this.dirty = true;
+    this.frame = null;
+
+    /**
+     * The stencil buffer stores masking data for the render target
+     * @member {WebGLRenderBuffer}
+     */
+    this.stencilBuffer = null;
+
+    /**
+     * The data structure for the stencil masks
+     * @member {StencilMaskStack}
+     */
+    this.stencilMaskStack = new StencilMaskStack();
+
+    /**
+     * Stores filter data for the render target
+     * @member {Array}
+     */
+    this.filterStack = [
+        {
+            renderTarget:this,
+            filter:[],
+            bounds:this.size
+        }
+    ];
+
+
+    /**
+     * The scale mode
+     * @member {number}
+     * @default CONST.SCALE_MODES.DEFAULT
+     */
+    this.scaleMode = scaleMode || CONST.SCALE_MODES.DEFAULT;
+
+    /**
+     * Whether this object is the root element or not
+     * @member {boolean}
+     */
+    this.root = root;
+
+    if (!this.root)
+    {
+       // this.flipY = true;
+        this.frameBuffer = gl.createFramebuffer();
+
+        /*
+            A frame buffer needs a target to render to..
+            create a texture and bind it attach it to the framebuffer..
+         */
+
+        this.texture = gl.createTexture();
+
+        gl.bindTexture(gl.TEXTURE_2D,  this.texture);
+
+        // set the scale properties of the texture..
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === CONST.SCALE_MODES.LINEAR ? gl.LINEAR : gl.NEAREST);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === CONST.SCALE_MODES.LINEAR ? gl.LINEAR : gl.NEAREST);
+
+        // check to see if the texture is a power of two!
+        var isPowerOfTwo = utils.isPowerOfTwo(width, height);
+
+        //TODO for 99% of use cases if a texture is power of two we should tile the texture...
+         if (!isPowerOfTwo)
+        {
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        }
+        else
+        {
+
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
+        }
 
-    //the stage is its own stage
-    this.stage = this;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer );
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);
+    }
 
-    //optimize hit detection a bit
-    this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000);
 
-    this.setBackgroundColor(backgroundColor);
+    this.resize(width, height);
 };
 
-// constructor
-PIXI.Stage.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
-PIXI.Stage.prototype.constructor = PIXI.Stage;
+RenderTarget.prototype.constructor = RenderTarget;
+module.exports = RenderTarget;
 
 /**
- * Sets another DOM element which can receive mouse/touch interactions instead of the default Canvas element.
- * This is useful for when you have other DOM elements on top of the Canvas element.
- *
- * @method setInteractionDelegate
- * @param domElement {DOMElement} This new domElement which will receive mouse/touch events
- */
-PIXI.Stage.prototype.setInteractionDelegate = function(domElement)
+* Clears the filter texture.
+*
+*/
+RenderTarget.prototype.clear = function(bind)
 {
-    this.interactionManager.setTargetDomElement( domElement );
+    var gl = this.gl;
+    if(bind)
+    {
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer);
+    }
+
+    gl.clearColor(0,0,0,0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
 };
 
-/*
- * Updates the object transform for rendering
- *
- * @method updateTransform
- * @private
- */
-PIXI.Stage.prototype.updateTransform = function()
+/**
+* Binds the stencil buffer.
+*
+*/
+RenderTarget.prototype.attachStencilBuffer = function()
 {
-    this.worldAlpha = 1;
 
-    for(var i=0,j=this.children.length; i<j; i++)
+    if ( this.stencilBuffer )
     {
-        this.children[i].updateTransform();
+        return;
     }
 
-    if(this.dirty)
+    /*
+        The stencil buffer is used for masking in pixi
+        lets create one and then add attach it to the framebuffer..
+     */
+    if (!this.root)
     {
-        this.dirty = false;
-        // update interactive!
-        this.interactionManager.dirty = true;
-    }
+        var gl = this.gl;
 
-    if(this.interactive)this.interactionManager.update();
+        this.stencilBuffer = gl.createRenderbuffer();
+        gl.bindRenderbuffer(gl.RENDERBUFFER, this.stencilBuffer);
+        gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, this.stencilBuffer);
+        gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL,  this.size.width * this.resolution  , this.size.height * this.resolution );
+    }
 };
 
 /**
- * Sets the background color for the stage
- *
- * @method setBackgroundColor
- * @param backgroundColor {Number} the color of the background, easiest way to pass this in is in hex format
- *      like: 0xFFFFFF for white
- */
-PIXI.Stage.prototype.setBackgroundColor = function(backgroundColor)
+* Binds the buffers and initialises the viewport.
+*
+*/
+RenderTarget.prototype.activate = function()
 {
-    this.backgroundColor = backgroundColor || 0x000000;
-    this.backgroundColorSplit = PIXI.hex2rgb(this.backgroundColor);
-    var hex = this.backgroundColor.toString(16);
-    hex = '000000'.substr(0, 6 - hex.length) + hex;
-    this.backgroundColorString = '#' + hex;
-};
+    //TOOD refactor usage of frame..
+    var gl = this.gl;
 
-/**
- * This will return the point containing global coords of the mouse.
- *
- * @method getMousePosition
- * @return {Point} The point containing the coords of the global InteractionData position.
- */
-PIXI.Stage.prototype.getMousePosition = function()
-{
-    return this.interactionManager.mouse.global;
-};
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer);
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
- 
-// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
-// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+    var projectionFrame = this.frame || this.size;
 
-// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+    // TODO add a dirty flag to this of a setter for the frame?
+    this.calculateProjection( projectionFrame );
 
-// MIT license
+    if(this.transform)
+    {
+        this.projectionMatrix.append(this.transform);
+    }
+
+    gl.viewport(0,0, projectionFrame.width * this.resolution, projectionFrame.height * this.resolution);
+};
 
 /**
- * A polyfill for requestAnimationFrame
- * You can actually use both requestAnimationFrame and requestAnimFrame, 
- * you will still benefit from the polyfill
- *
- * @method requestAnimationFrame
- */
-/**
- * A polyfill for cancelAnimationFrame
- *
- * @method cancelAnimationFrame
- */
-var lastTime = 0;
-var vendors = ['ms', 'moz', 'webkit', 'o'];
-for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
-    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
-    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
-        window[vendors[x] + 'CancelRequestAnimationFrame'];
-}
-
-if (!window.requestAnimationFrame) {
-    window.requestAnimationFrame = function(callback) {
-        var currTime = new Date().getTime();
-        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
-        var id = window.setTimeout(function() { callback(currTime + timeToCall); },
-          timeToCall);
-        lastTime = currTime + timeToCall;
-        return id;
-    };
-}
+* Updates the projection matrix based on a projection frame (which is a rectangle)
+*
+*/
+RenderTarget.prototype.calculateProjection = function( projectionFrame )
+{
+    var pm = this.projectionMatrix;
 
-if (!window.cancelAnimationFrame) {
-    window.cancelAnimationFrame = function(id) {
-        clearTimeout(id);
-    };
-}
+    pm.identity();
 
-window.requestAnimFrame = window.requestAnimationFrame;
+    if (!this.root)
+    {
+        pm.a = 1 / projectionFrame.width*2;
+        pm.d = 1 / projectionFrame.height*2;
 
-/**
- * Converts a hex color number to an [R, G, B] array
- *
- * @method hex2rgb
- * @param hex {Number}
- */
-PIXI.hex2rgb = function(hex) {
-    return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255];
-};
+        pm.tx = -1 - projectionFrame.x * pm.a;
+        pm.ty = -1 - projectionFrame.y * pm.d;
+    }
+    else
+    {
+        pm.a = 1 / projectionFrame.width*2;
+        pm.d = -1 / projectionFrame.height*2;
 
-/**
- * Converts a color as an [R, G, B] array to a hex number
- *
- * @method rgb2hex
- * @param rgb {Array}
- */
-PIXI.rgb2hex = function(rgb) {
-    return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255);
+        pm.tx = -1 - projectionFrame.x * pm.a;
+        pm.ty = 1 - projectionFrame.y * pm.d;
+    }
 };
 
+
 /**
- * A polyfill for Function.prototype.bind
+ * Resizes the texture to the specified width and height
  *
- * @method bind
+ * @param width {Number} the new width of the texture
+ * @param height {Number} the new height of the texture
  */
-if (typeof Function.prototype.bind !== 'function') {
-    Function.prototype.bind = (function () {
-        var slice = Array.prototype.slice;
-        return function (thisArg) {
-            var target = this, boundArgs = slice.call(arguments, 1);
+RenderTarget.prototype.resize = function(width, height)
+{
+    width = width | 0;
+    height = height | 0;
 
-            if (typeof target !== 'function') throw new TypeError();
+    if (this.size.width === width && this.size.height === height) {
+        return;
+    }
 
-            function bound() {
-                var args = boundArgs.concat(slice.call(arguments));
-                target.apply(this instanceof bound ? this : thisArg, args);
-            }
+    this.size.width = width;
+    this.size.height = height;
 
-            bound.prototype = (function F(proto) {
-                if (proto) F.prototype = proto;
-                if (!(this instanceof F)) return new F();
-            })(target.prototype);
+    if (!this.root)
+    {
+        var gl = this.gl;
 
-            return bound;
-        };
-    })();
-}
+        gl.bindTexture(gl.TEXTURE_2D,  this.texture);
 
-/**
- * A wrapper for ajax requests to be handled cross browser
- *
- * @class AjaxRequest
- * @constructor
- */
-PIXI.AjaxRequest = function()
-{
-    var activexmodes = ['Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.3.0', 'Microsoft.XMLHTTP']; //activeX versions to check for in IE
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,  width * this.resolution, height * this.resolution , 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
 
-    if (window.ActiveXObject)
-    { //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
-        for (var i=0; i<activexmodes.length; i++)
+        if (this.stencilBuffer )
         {
-            try{
-                return new window.ActiveXObject(activexmodes[i]);
-            }
-            catch(e) {
-                //suppress error
-            }
+            // update the stencil buffer width and height
+            gl.bindRenderbuffer(gl.RENDERBUFFER, this.stencilBuffer);
+            gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL,  width * this.resolution, height * this.resolution );
         }
     }
-    else if (window.XMLHttpRequest) // if Mozilla, Safari etc
-    {
-        return new window.XMLHttpRequest();
-    }
-    else
-    {
-        return false;
-    }
-};
-/*
-PIXI.packColorRGBA = function(r, g, b, a)//r, g, b, a)
-{
-  //  console.log(r, b, c, d)
-  return (Math.floor((r)*63) << 18) | (Math.floor((g)*63) << 12) | (Math.floor((b)*63) << 6);// | (Math.floor((a)*63))
-  //  i = i | (Math.floor((a)*63));
-   // return i;
-   // var r = (i / 262144.0 ) / 64;
-   // var g = (i / 4096.0)%64 / 64;
-  //  var b = (i / 64.0)%64 / 64;
-  //  var a = (i)%64 / 64;
-     
-  //  console.log(r, g, b, a);
-  //  return i;
 
-};
-*/
-/*
-PIXI.packColorRGB = function(r, g, b)//r, g, b, a)
-{
-    return (Math.floor((r)*255) << 16) | (Math.floor((g)*255) << 8) | (Math.floor((b)*255));
-};
+    var projectionFrame = this.frame || this.size;
 
-PIXI.unpackColorRGB = function(r, g, b)//r, g, b, a)
-{
-    return (Math.floor((r)*255) << 16) | (Math.floor((g)*255) << 8) | (Math.floor((b)*255));
+    this.calculateProjection( projectionFrame );
 };
-*/
 
 /**
- * Checks whether the Canvas BlendModes are supported by the current browser
+ * Destroys the render target.
  *
- * @method canUseNewCanvasBlendModes
- * @return {Boolean} whether they are supported
  */
-PIXI.canUseNewCanvasBlendModes = function()
+RenderTarget.prototype.destroy = function()
 {
-    var canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
-    var context = canvas.getContext('2d');
-    context.fillStyle = '#000';
-    context.fillRect(0,0,1,1);
-    context.globalCompositeOperation = 'multiply';
-    context.fillStyle = '#fff';
-    context.fillRect(0,0,1,1);
-    return context.getImageData(0,0,1,1).data[0] === 0;
+    var gl = this.gl;
+    gl.deleteFramebuffer( this.frameBuffer );
+    gl.deleteTexture( this.texture );
+
+    this.frameBuffer = null;
+    this.texture = null;
 };
 
+},{"../../../const":22,"../../../math":32,"../../../utils":74,"./StencilMaskStack":65}],65:[function(require,module,exports){
 /**
- * Given a number, this function returns the closest number that is a power of two
- * this function is taken from Starling Framework as its pretty neat ;)
- *
- * @method getNextPowerOfTwo
- * @param number {Number}
- * @return {Number} the closest number that is a power of two
+ * Generic Mask Stack data structure
+ * @class
+ * @memberof PIXI
+ * @param renderer {WebGLRenderer} The renderer this manager works for.
  */
-PIXI.getNextPowerOfTwo = function(number)
+function StencilMaskStack()
 {
-    if (number > 0 && (number & (number - 1)) === 0) // see: http://goo.gl/D9kPj
-        return number;
-    else
-    {
-        var result = 1;
-        while (result < number) result <<= 1;
-        return result;
-    }
-};
+  /**
+     * The actual stack
+     *
+     * @member {Array}
+     */
+    this.stencilStack = [];
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
- 
-/**
- * https://github.com/mrdoob/eventtarget.js/
- * THankS mr DOob!
- */
+    /**
+     * TODO @alvin
+     *
+     * @member {boolean}
+     */
+    this.reverse = true;
+
+    /**
+     * Internal count
+     *
+     * @member {number}
+     */
+    this.count = 0;
+}
+
+StencilMaskStack.prototype.constructor = StencilMaskStack;
+module.exports = StencilMaskStack;
+
+},{}],66:[function(require,module,exports){
+var math = require('../math'),
+    Texture = require('../textures/Texture'),
+    Container = require('../display/Container'),
+    CanvasTinter = require('../renderers/canvas/utils/CanvasTinter'),
+    utils = require('../utils'),
+    CONST = require('../const'),
+    tempPoint = new math.Point();
 
 /**
- * Adds event emitter functionality to a class
+ * The Sprite object is the base for all textured objects that are rendered to the screen
  *
- * @class EventTarget
- * @example
- *      function MyEmitter() {
- *          PIXI.EventTarget.call(this); //mixes in event target stuff
- *      }
+ * A sprite can be created directly from an image like this:
+ *
+ * ```js
+ * var sprite = new PIXI.Sprite.fromImage('assets/image.png');
+ * ```
  *
- *      var em = new MyEmitter();
- *      em.emit({ type: 'eventName', data: 'some data' });
+ * @class
+ * @extends PIXI.Container
+ * @memberof PIXI
+ * @param texture {Texture} The texture for this sprite
  */
-PIXI.EventTarget = function () {
+function Sprite(texture)
+{
+    Container.call(this);
 
     /**
-     * Holds all the listeners
+     * The anchor sets the origin point of the texture.
+     * The default is 0,0 this means the texture's origin is the top left
+     * Setting the anchor to 0.5,0.5 means the texture's origin is centered
+     * Setting the anchor to 1,1 would mean the texture's origin point will be the bottom right corner
      *
-     * @property listeneners
-     * @type Object
+     * @member {Point}
      */
-    var listeners = {};
+    this.anchor = new math.Point();
 
     /**
-     * Adds a listener for a specific event
+     * The texture that the sprite is using
      *
-     * @method addEventListener
-     * @param type {string} A string representing the event type to listen for.
-     * @param listener {function} The callback function that will be fired when the event occurs
+     * @member {Texture}
+     * @private
      */
-    this.addEventListener = this.on = function ( type, listener ) {
-
-
-        if ( listeners[ type ] === undefined ) {
-
-            listeners[ type ] = [];
-
-        }
-
-        if ( listeners[ type ].indexOf( listener ) === - 1 ) {
-
-            listeners[ type ].push( listener );
-        }
-
-    };
+    this._texture = null;
 
     /**
-     * Fires the event, ie pretends that the event has happened
+     * The width of the sprite (this is initially set by the texture)
      *
-     * @method dispatchEvent
-     * @param event {Event} the event object
+     * @member {number}
+     * @private
      */
-    this.dispatchEvent = this.emit = function ( event ) {
-
-        if ( !listeners[ event.type ] || !listeners[ event.type ].length ) {
-
-            return;
-
-        }
-
-        for(var i = 0, l = listeners[ event.type ].length; i < l; i++) {
+    this._width = 0;
 
-            listeners[ event.type ][ i ]( event );
+    /**
+     * The height of the sprite (this is initially set by the texture)
+     *
+     * @member {number}
+     * @private
+     */
+    this._height = 0;
 
-        }
+    /**
+     * The tint applied to the sprite. This is a hex value. A value of 0xFFFFFF will remove any tint effect.
+     *
+     * @member {number}
+     * @default [0xFFFFFF]
+     */
+    this.tint = 0xFFFFFF;
 
-    };
+    /**
+     * The blend mode to be applied to the sprite. Apply a value of blendModes.NORMAL to reset the blend mode.
+     *
+     * @member {number}
+     * @default CONST.BLEND_MODES.NORMAL;
+     */
+    this.blendMode = CONST.BLEND_MODES.NORMAL;
 
     /**
-     * Removes the specified listener that was assigned to the specified event type
+     * The shader that will be used to render the sprite. Set to null to remove a current shader.
      *
-     * @method removeEventListener
-     * @param type {string} A string representing the event type which will have its listener removed
-     * @param listener {function} The callback function that was be fired when the event occured
+     * @member {AbstractFilter}
      */
-    this.removeEventListener = this.off = function ( type, listener ) {
+    this.shader = null;
 
-        var index = listeners[ type ].indexOf( listener );
+    /**
+     * An internal cached value of the tint.
+     *
+     * @member {number}
+     * @default [0xFFFFFF]
+     */
+    this.cachedTint = 0xFFFFFF;
 
-        if ( index !== - 1 ) {
+    // call texture setter
+    this.texture = texture || Texture.EMPTY;
+}
 
-            listeners[ type ].splice( index, 1 );
+// constructor
+Sprite.prototype = Object.create(Container.prototype);
+Sprite.prototype.constructor = Sprite;
+module.exports = Sprite;
 
+Object.defineProperties(Sprite.prototype, {
+    /**
+     * The width of the sprite, setting this will actually modify the scale to achieve the value set
+     *
+     * @member {number}
+     * @memberof PIXI.Sprite#
+     */
+    width: {
+        get: function ()
+        {
+            return this.scale.x * this.texture._frame.width;
+        },
+        set: function (value)
+        {
+            this.scale.x = value / this.texture._frame.width;
+            this._width = value;
         }
-
-    };
+    },
 
     /**
-     * Removes all the listeners that were active for the specified event type
+     * The height of the sprite, setting this will actually modify the scale to achieve the value set
      *
-     * @method removeAllEventListeners
-     * @param type {string} A string representing the event type which will have all its listeners removed
+     * @member {number}
+     * @memberof PIXI.Sprite#
      */
-	this.removeAllEventListeners = function( type ) {
-		var a = listeners[type];
-		if (a)
-			a.length = 0;
-	};
-};
-
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * This helper function will automatically detect which renderer you should be using.
- * WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by
- * the browser then this function will return a canvas renderer
- * @class autoDetectRenderer
- * @static
- * @param width=800 {Number} the width of the renderers view
- * @param height=600 {Number} the height of the renderers view
- * @param [view] {Canvas} the canvas to use as a view, optional 
- * @param [transparent=false] {Boolean} the transparency of the render view, default false
- * @param [antialias=false] {Boolean} sets antialias (only applicable in webGL chrome at the moment)
- *
- */
-PIXI.autoDetectRenderer = function(width, height, view, transparent, antialias)
-{
-    if(!width)width = 800;
-    if(!height)height = 600;
-
-    // BORROWED from Mr Doob (mrdoob.com)
-    var webgl = ( function () { try {
-                                    var canvas = document.createElement( 'canvas' );
-                                    return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) );
-                                } catch( e ) {
-                                    return false;
-                                }
-                            } )();
-
-
-    if( webgl )
-    {
-        return new PIXI.WebGLRenderer(width, height, view, transparent, antialias);
-    }
-
-    return  new PIXI.CanvasRenderer(width, height, view, transparent);
-};
-
-/*
-    PolyK library
-    url: http://polyk.ivank.net
-    Released under MIT licence.
-
-    Copyright (c) 2012 Ivan Kuckir
-
-    Permission is hereby granted, free of charge, to any person
-    obtaining a copy of this software and associated documentation
-    files (the "Software"), to deal in the Software without
-    restriction, including without limitation the rights to use,
-    copy, modify, merge, publish, distribute, sublicense, and/or sell
-    copies of the Software, and to permit persons to whom the
-    Software is furnished to do so, subject to the following
-    conditions:
-
-    The above copyright notice and this permission notice shall be
-    included in all copies or substantial portions of the Software.
-
-    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
-    OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-    NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
-    HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-    WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
-    OTHER DEALINGS IN THE SOFTWARE.
-
-    This is an amazing lib!
-
-    slightly modified by Mat Groves (matgroves.com);
-*/
-
-/**
- * Based on the Polyk library http://polyk.ivank.net released under MIT licence.
- * This is an amazing lib!
- * slightly modified by Mat Groves (matgroves.com);
- * @class PolyK
- *
- */
-PIXI.PolyK = {};
-
-/**
- * Triangulates shapes for webGL graphic fills
- *
- * @method Triangulate
- * 
- */
-PIXI.PolyK.Triangulate = function(p)
-{
-    var sign = true;
-
-    var n = p.length >> 1;
-    if(n < 3) return [];
-
-    var tgs = [];
-    var avl = [];
-    for(var i = 0; i < n; i++) avl.push(i);
-
-    i = 0;
-    var al = n;
-    while(al > 3)
-    {
-        var i0 = avl[(i+0)%al];
-        var i1 = avl[(i+1)%al];
-        var i2 = avl[(i+2)%al];
-
-        var ax = p[2*i0],  ay = p[2*i0+1];
-        var bx = p[2*i1],  by = p[2*i1+1];
-        var cx = p[2*i2],  cy = p[2*i2+1];
-
-        var earFound = false;
-        if(PIXI.PolyK._convex(ax, ay, bx, by, cx, cy, sign))
+    height: {
+        get: function ()
         {
-            earFound = true;
-            for(var j = 0; j < al; j++)
-            {
-                var vi = avl[j];
-                if(vi === i0 || vi === i1 || vi === i2) continue;
-
-                if(PIXI.PolyK._PointInTriangle(p[2*vi], p[2*vi+1], ax, ay, bx, by, cx, cy)) {
-                    earFound = false;
-                    break;
-                }
-            }
+            return  this.scale.y * this.texture._frame.height;
+        },
+        set: function (value)
+        {
+            this.scale.y = value / this.texture._frame.height;
+            this._height = value;
         }
+    },
 
-        if(earFound)
+    /**
+     * The texture that the sprite is using
+     *
+     * @member {PIXI.Texture}
+     * @memberof PIXI.Sprite#
+     */
+    texture: {
+        get: function ()
         {
-            tgs.push(i0, i1, i2);
-            avl.splice((i+1)%al, 1);
-            al--;
-            i = 0;
-        }
-        else if(i++ > 3*al)
+            return  this._texture;
+        },
+        set: function (value)
         {
-            // need to flip flip reverse it!
-            // reset!
-            if(sign)
+            if (this._texture === value)
             {
-                tgs = [];
-                avl = [];
-                for(i = 0; i < n; i++) avl.push(i);
+                return;
+            }
 
-                i = 0;
-                al = n;
+            this._texture = value;
+            this.cachedTint = 0xFFFFFF;
 
-                sign = false;
-            }
-            else
+            if (value)
             {
-                window.console.log("PIXI Warning: shape too complex to fill");
-                return [];
+                // wait for the texture to load
+                if (value.baseTexture.hasLoaded)
+                {
+                    this._onTextureUpdate();
+                }
+                else
+                {
+                    value.once('update', this._onTextureUpdate, this);
+                }
             }
         }
     }
-
-    tgs.push(avl[0], avl[1], avl[2]);
-    return tgs;
-};
+});
 
 /**
- * Checks whether a point is within a triangle
+ * When the texture is updated, this event will fire to update the scale and frame
  *
- * @method _PointInTriangle
- * @param px {Number} x coordinate of the point to test
- * @param py {Number} y coordinate of the point to test
- * @param ax {Number} x coordinate of the a point of the triangle
- * @param ay {Number} y coordinate of the a point of the triangle
- * @param bx {Number} x coordinate of the b point of the triangle
- * @param by {Number} y coordinate of the b point of the triangle
- * @param cx {Number} x coordinate of the c point of the triangle
- * @param cy {Number} y coordinate of the c point of the triangle
  * @private
  */
-PIXI.PolyK._PointInTriangle = function(px, py, ax, ay, bx, by, cx, cy)
+Sprite.prototype._onTextureUpdate = function ()
 {
-    var v0x = cx-ax;
-    var v0y = cy-ay;
-    var v1x = bx-ax;
-    var v1y = by-ay;
-    var v2x = px-ax;
-    var v2y = py-ay;
-
-    var dot00 = v0x*v0x+v0y*v0y;
-    var dot01 = v0x*v1x+v0y*v1y;
-    var dot02 = v0x*v2x+v0y*v2y;
-    var dot11 = v1x*v1x+v1y*v1y;
-    var dot12 = v1x*v2x+v1y*v2y;
-
-    var invDenom = 1 / (dot00 * dot11 - dot01 * dot01);
-    var u = (dot11 * dot02 - dot01 * dot12) * invDenom;
-    var v = (dot00 * dot12 - dot01 * dot02) * invDenom;
+    // so if _width is 0 then width was not set..
+    if (this._width)
+    {
+        this.scale.x = this._width / this.texture.frame.width;
+    }
 
-    // Check if point is in triangle
-    return (u >= 0) && (v >= 0) && (u + v < 1);
+    if (this._height)
+    {
+        this.scale.y = this._height / this.texture.frame.height;
+    }
 };
 
 /**
- * Checks whether a shape is convex
- *
- * @method _convex
- * 
- * @private
- */
-PIXI.PolyK._convex = function(ax, ay, bx, by, cx, cy, sign)
+*
+* Renders the object using the WebGL renderer
+*
+* @param renderer {WebGLRenderer}
+* @private
+*/
+Sprite.prototype._renderWebGL = function (renderer)
 {
-    return ((ay-by)*(cx-bx) + (bx-ax)*(cy-by) >= 0) === sign;
+    renderer.setObjectRenderer(renderer.plugins.sprite);
+    renderer.plugins.sprite.render(this);
 };
 
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * Returns the bounds of the Sprite as a rectangle. The bounds calculation takes the worldTransform into account.
+ *
+ * @param matrix {Matrix} the transformation matrix of the sprite
+ * @return {Rectangle} the framing rectangle
  */
-
-// TODO Alvin and Mat
-// Should we eventually create a Utils class ? 
-// Or just move this file to the pixi.js file ?
-PIXI.initDefaultShaders = function()
-{
-   
-  //  PIXI.stripShader = new PIXI.StripShader();
-//    PIXI.stripShader.init();
-
-};
-
-PIXI.CompileVertexShader = function(gl, shaderSrc)
-{
-    return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
-};
-
-PIXI.CompileFragmentShader = function(gl, shaderSrc)
-{
-    return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER);
-};
-
-PIXI._CompileShader = function(gl, shaderSrc, shaderType)
+Sprite.prototype.getBounds = function (matrix)
 {
-    var src = shaderSrc.join("\n");
-    var shader = gl.createShader(shaderType);
-    gl.shaderSource(shader, src);
-    gl.compileShader(shader);
-
-    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-        window.console.log(gl.getShaderInfoLog(shader));
-        return null;
-    }
+    if(!this._currentBounds)
+    {
 
-    return shader;
-};
+        var width = this._texture._frame.width;
+        var height = this._texture._frame.height;
 
-PIXI.compileProgram = function(gl, vertexSrc, fragmentSrc)
-{
-    var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc);
-    var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc);
+        var w0 = width * (1-this.anchor.x);
+        var w1 = width * -this.anchor.x;
 
-    var shaderProgram = gl.createProgram();
+        var h0 = height * (1-this.anchor.y);
+        var h1 = height * -this.anchor.y;
 
-    gl.attachShader(shaderProgram, vertexShader);
-    gl.attachShader(shaderProgram, fragmentShader);
-    gl.linkProgram(shaderProgram);
+        var worldTransform = matrix || this.worldTransform ;
 
-    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
-        window.console.log("Could not initialise shaders");
-    }
+        var a = worldTransform.a;
+        var b = worldTransform.b;
+        var c = worldTransform.c;
+        var d = worldTransform.d;
+        var tx = worldTransform.tx;
+        var ty = worldTransform.ty;
 
-    return shaderProgram;
-};
+        var minX,
+            maxX,
+            minY,
+            maxY;
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- * @author Richard Davey http://www.photonstorm.com @photonstorm
- */
 
-/**
-* @class PixiShader
-* @constructor
-*/
-PIXI.PixiShader = function(gl)
-{
-    /**
-     * @property gl
-     * @type WebGLContext
-     */
-    this.gl = gl;
+        if (b === 0 && c === 0)
+        {
+            // scale may be negative!
+            if (a < 0)
+            {
+                a *= -1;
+            }
 
-    /**
-    * @property {any} program - The WebGL program.
-    */
-    this.program = null;
+            if (d < 0)
+            {
+                d *= -1;
+            }
 
-    /**
-    * @property {array} fragmentSrc - The fragment shader.
-    */
-    this.fragmentSrc = [
-        'precision lowp float;',
-        'varying vec2 vTextureCoord;',
-        'varying vec4 vColor;',
-        'uniform sampler2D uSampler;',
-        'void main(void) {',
-        '   gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;',
-        '}'
-    ];
+            // this means there is no rotation going on right? RIGHT?
+            // if thats the case then we can avoid checking the bound values! yay
+            minX = a * w1 + tx;
+            maxX = a * w0 + tx;
+            minY = d * h1 + ty;
+            maxY = d * h0 + ty;
+        }
+        else
+        {
+            var x1 = a * w1 + c * h1 + tx;
+            var y1 = d * h1 + b * w1 + ty;
 
+            var x2 = a * w0 + c * h1 + tx;
+            var y2 = d * h1 + b * w0 + ty;
 
-    /**
-    * @property {number} textureCount - A local texture counter for multi-texture shaders.
-    */
-    this.textureCount = 0;
+            var x3 = a * w0 + c * h0 + tx;
+            var y3 = d * h0 + b * w0 + ty;
 
-    this.attributes = [];
+            var x4 =  a * w1 + c * h0 + tx;
+            var y4 =  d * h0 + b * w1 + ty;
 
-    this.init();
-};
+            minX = x1;
+            minX = x2 < minX ? x2 : minX;
+            minX = x3 < minX ? x3 : minX;
+            minX = x4 < minX ? x4 : minX;
 
-/**
-* Initialises the shader
-* @method init
-*
-*/
-PIXI.PixiShader.prototype.init = function()
-{
+            minY = y1;
+            minY = y2 < minY ? y2 : minY;
+            minY = y3 < minY ? y3 : minY;
+            minY = y4 < minY ? y4 : minY;
 
-    var gl = this.gl;
+            maxX = x1;
+            maxX = x2 > maxX ? x2 : maxX;
+            maxX = x3 > maxX ? x3 : maxX;
+            maxX = x4 > maxX ? x4 : maxX;
 
-    var program = PIXI.compileProgram(gl, this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc);
-    
-    gl.useProgram(program);
+            maxY = y1;
+            maxY = y2 > maxY ? y2 : maxY;
+            maxY = y3 > maxY ? y3 : maxY;
+            maxY = y4 > maxY ? y4 : maxY;
+        }
 
-    // get and store the uniforms for the shader
-    this.uSampler = gl.getUniformLocation(program, 'uSampler');
-    this.projectionVector = gl.getUniformLocation(program, 'projectionVector');
-    this.offsetVector = gl.getUniformLocation(program, 'offsetVector');
-    this.dimensions = gl.getUniformLocation(program, 'dimensions');
+        // check for children
+        if(this.children.length)
+        {
+            var childBounds = this.containerGetBounds();
 
-    // get and store the attributes
-    this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
-    this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord');
-    this.colorAttribute = gl.getAttribLocation(program, 'aColor');
+            w0 = childBounds.x;
+            w1 = childBounds.x + childBounds.width;
+            h0 = childBounds.y;
+            h1 = childBounds.y + childBounds.height;
 
+            minX = (minX < w0) ? minX : w0;
+            minY = (minY < h0) ? minY : h0;
 
-    // Begin worst hack eva //
+            maxX = (maxX > w1) ? maxX : w1;
+            maxY = (maxY > h1) ? maxY : h1;
+        }
 
-    // WHY??? ONLY on my chrome pixel the line above returns -1 when using filters?
-    // maybe its something to do with the current state of the gl context.
-    // Im convinced this is a bug in the chrome browser as there is NO reason why this should be returning -1 especially as it only manifests on my chrome pixel
-    // If theres any webGL people that know why could happen please help :)
-    if(this.colorAttribute === -1)
-    {
-        this.colorAttribute = 2;
-    }
+        var bounds = this._bounds;
 
-    this.attributes = [this.aVertexPosition, this.aTextureCoord, this.colorAttribute];
+        bounds.x = minX;
+        bounds.width = maxX - minX;
 
-    // End worst hack eva //
+        bounds.y = minY;
+        bounds.height = maxY - minY;
 
-    // add those custom shaders!
-    for (var key in this.uniforms)
-    {
-        // get the uniform locations..
-        this.uniforms[key].uniformLocation = gl.getUniformLocation(program, key);
+        // store a reference so that if this function gets called again in the render cycle we do not have to recalculate
+        this._currentBounds = bounds;
     }
 
-    this.initUniforms();
+    return this._currentBounds;
+};
 
-    this.program = program;
+Sprite.prototype.getLocalBounds = function ()
+{
+    this._bounds.x = -this._texture._frame.width * this.anchor.x;
+    this._bounds.y = -this._texture._frame.height * this.anchor.y;
+    this._bounds.width = this._texture._frame.width;
+    this._bounds.height = this._texture._frame.height;
+    return this._bounds;
 };
 
 /**
-* Initialises the shader uniform values.
-* Uniforms are specified in the GLSL_ES Specification: http://www.khronos.org/registry/webgl/specs/latest/1.0/
-* http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf
+* Tests if a point is inside this sprite
 *
-* @method initUniforms
+* @param point {Point} the point to test
+* @return {boolean} the result of the test
 */
-PIXI.PixiShader.prototype.initUniforms = function()
+Sprite.prototype.containsPoint = function( point )
 {
-    this.textureCount = 1;
-    var gl = this.gl;
-    var uniform;
+    this.worldTransform.applyInverse(point,  tempPoint);
 
-    for (var key in this.uniforms)
-    {
-        uniform = this.uniforms[key];
-
-        var type = uniform.type;
-
-        if (type === 'sampler2D')
-        {
-            uniform._init = false;
+    var width = this._texture._frame.width;
+    var height = this._texture._frame.height;
+    var x1 = -width * this.anchor.x;
+    var y1;
 
-            if (uniform.value !== null)
-            {
-                this.initSampler2D(uniform);
-            }
-        }
-        else if (type === 'mat2' || type === 'mat3' || type === 'mat4')
-        {
-            //  These require special handling
-            uniform.glMatrix = true;
-            uniform.glValueLength = 1;
+    if ( tempPoint.x > x1 && tempPoint.x < x1 + width )
+    {
+        y1 = -height * this.anchor.y;
 
-            if (type === 'mat2')
-            {
-                uniform.glFunc = gl.uniformMatrix2fv;
-            }
-            else if (type === 'mat3')
-            {
-                uniform.glFunc = gl.uniformMatrix3fv;
-            }
-            else if (type === 'mat4')
-            {
-                uniform.glFunc = gl.uniformMatrix4fv;
-            }
-        }
-        else
+        if ( tempPoint.y > y1 && tempPoint.y < y1 + height )
         {
-            //  GL function reference
-            uniform.glFunc = gl['uniform' + type];
-
-            if (type === '2f' || type === '2i')
-            {
-                uniform.glValueLength = 2;
-            }
-            else if (type === '3f' || type === '3i')
-            {
-                uniform.glValueLength = 3;
-            }
-            else if (type === '4f' || type === '4i')
-            {
-                uniform.glValueLength = 4;
-            }
-            else
-            {
-                uniform.glValueLength = 1;
-            }
+            return true;
         }
     }
 
+    return false;
 };
 
 /**
-* Initialises a Sampler2D uniform (which may only be available later on after initUniforms once the texture has loaded)
+* Renders the object using the Canvas renderer
 *
-* @method initSampler2D
+* @param renderer {CanvasRenderer} The renderer
+* @private
 */
-PIXI.PixiShader.prototype.initSampler2D = function(uniform)
+Sprite.prototype._renderCanvas = function (renderer)
 {
-    if (!uniform.value || !uniform.value.baseTexture || !uniform.value.baseTexture.hasLoaded)
+    if (this.texture.crop.width <= 0 || this.texture.crop.height <= 0)
     {
         return;
     }
 
-    var gl = this.gl;
-
-    gl.activeTexture(gl['TEXTURE' + this.textureCount]);
-    gl.bindTexture(gl.TEXTURE_2D, uniform.value.baseTexture._glTexture);
-
-    //  Extended texture data
-    if (uniform.textureData)
-    {
-        var data = uniform.textureData;
-
-        // GLTexture = mag linear, min linear_mipmap_linear, wrap repeat + gl.generateMipmap(gl.TEXTURE_2D);
-        // GLTextureLinear = mag/min linear, wrap clamp
-        // GLTextureNearestRepeat = mag/min NEAREST, wrap repeat
-        // GLTextureNearest = mag/min nearest, wrap clamp
-        // AudioTexture = whatever + luminance + width 512, height 2, border 0
-        // KeyTexture = whatever + luminance + width 256, height 2, border 0
+    if (this.blendMode !== renderer.currentBlendMode)
+    {
+        renderer.currentBlendMode = this.blendMode;
+        renderer.context.globalCompositeOperation = renderer.blendModes[renderer.currentBlendMode];
+    }
 
-        //  magFilter can be: gl.LINEAR, gl.LINEAR_MIPMAP_LINEAR or gl.NEAREST
-        //  wrapS/T can be: gl.CLAMP_TO_EDGE or gl.REPEAT
+    //  Ignore null sources
+    if (this.texture.valid)
+    {
+        var texture = this._texture,
+            wt = this.worldTransform,
+            dx,
+            dy,
+            width,
+            height;
 
-        var magFilter = (data.magFilter) ? data.magFilter : gl.LINEAR;
-        var minFilter = (data.minFilter) ? data.minFilter : gl.LINEAR;
-        var wrapS = (data.wrapS) ? data.wrapS : gl.CLAMP_TO_EDGE;
-        var wrapT = (data.wrapT) ? data.wrapT : gl.CLAMP_TO_EDGE;
-        var format = (data.luminance) ? gl.LUMINANCE : gl.RGBA;
+        renderer.context.globalAlpha = this.worldAlpha;
 
-        if (data.repeat)
+        // If smoothingEnabled is supported and we need to change the smoothing property for this texture
+        if (renderer.smoothProperty && renderer.currentScaleMode !== texture.baseTexture.scaleMode)
         {
-            wrapS = gl.REPEAT;
-            wrapT = gl.REPEAT;
+            renderer.currentScaleMode = texture.baseTexture.scaleMode;
+            renderer.context[renderer.smoothProperty] = (renderer.currentScaleMode === CONST.SCALE_MODES.LINEAR);
         }
 
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, !!data.flipY);
+        // If the texture is trimmed we offset by the trim x/y, otherwise we use the frame dimensions
 
-        if (data.width)
+        if(texture.rotate)
         {
-            var width = (data.width) ? data.width : 512;
-            var height = (data.height) ? data.height : 2;
-            var border = (data.border) ? data.border : 0;
 
-            // void texImage2D(GLenum target, GLint level, GLenum internalformat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, ArrayBufferView? pixels);
-            gl.texImage2D(gl.TEXTURE_2D, 0, format, width, height, border, format, gl.UNSIGNED_BYTE, null);
+            // cheeky rotation!
+            var a = wt.a;
+            var b = wt.b;
+
+            wt.a  = -wt.c;
+            wt.b  = -wt.d;
+            wt.c  =  a;
+            wt.d  =  b;
+
+            width = texture.crop.height;
+            height = texture.crop.width;
+
+            dx = (texture.trim) ? texture.trim.y - this.anchor.y * texture.trim.height : this.anchor.y * -texture._frame.height;
+            dy = (texture.trim) ? texture.trim.x - this.anchor.x * texture.trim.width : this.anchor.x * -texture._frame.width;
         }
         else
         {
-            //  void texImage2D(GLenum target, GLint level, GLenum internalformat, GLenum format, GLenum type, ImageData? pixels);
-            gl.texImage2D(gl.TEXTURE_2D, 0, format, gl.RGBA, gl.UNSIGNED_BYTE, uniform.value.baseTexture.source);
+            width = texture.crop.width;
+            height = texture.crop.height;
+
+            dx = (texture.trim) ? texture.trim.x - this.anchor.x * texture.trim.width : this.anchor.x * -texture._frame.width;
+            dy = (texture.trim) ? texture.trim.y - this.anchor.y * texture.trim.height : this.anchor.y * -texture._frame.height;
         }
 
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, magFilter);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrapS);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrapT);
-    }
 
-    gl.uniform1i(uniform.uniformLocation, this.textureCount);
 
-    uniform._init = true;
+        // Allow for pixel rounding
+        if (renderer.roundPixels)
+        {
+            renderer.context.setTransform(
+                wt.a,
+                wt.b,
+                wt.c,
+                wt.d,
+                (wt.tx * renderer.resolution) | 0,
+                (wt.ty * renderer.resolution) | 0
+            );
 
-    this.textureCount++;
+            dx = dx | 0;
+            dy = dy | 0;
+        }
+        else
+        {
 
-};
+            renderer.context.setTransform(
+                wt.a,
+                wt.b,
+                wt.c,
+                wt.d,
+                wt.tx * renderer.resolution,
+                wt.ty * renderer.resolution
+            );
 
-/**
-* Updates the shader uniform values.
-*
-* @method syncUniforms
-*/
-PIXI.PixiShader.prototype.syncUniforms = function()
-{
-    this.textureCount = 1;
-    var uniform;
-    var gl = this.gl;
 
-    //  This would probably be faster in an array and it would guarantee key order
-    for (var key in this.uniforms)
-    {
+        }
 
-        uniform = this.uniforms[key];
+        var resolution = texture.baseTexture.resolution;
 
-        if (uniform.glValueLength === 1)
+        if (this.tint !== 0xFFFFFF)
         {
-            if (uniform.glMatrix === true)
+            if (this.cachedTint !== this.tint)
             {
-                uniform.glFunc.call(gl, uniform.uniformLocation, uniform.transpose, uniform.value);
-            }
-            else
-            {
-                uniform.glFunc.call(gl, uniform.uniformLocation, uniform.value);
+                this.cachedTint = this.tint;
+
+                // TODO clean up caching - how to clean up the caches?
+                this.tintedTexture = CanvasTinter.getTintedTexture(this, this.tint);
             }
+
+            renderer.context.drawImage(
+                this.tintedTexture,
+                0,
+                0,
+                width * resolution,
+                height * resolution,
+                dx * renderer.resolution,
+                dy * renderer.resolution,
+                width * renderer.resolution,
+                height * renderer.resolution
+            );
         }
-        else if (uniform.glValueLength === 2)
-        {
-            uniform.glFunc.call(gl, uniform.uniformLocation, uniform.value.x, uniform.value.y);
-        }
-        else if (uniform.glValueLength === 3)
-        {
-            uniform.glFunc.call(gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z);
-        }
-        else if (uniform.glValueLength === 4)
-        {
-            uniform.glFunc.call(gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w);
-        }
-        else if (uniform.type === 'sampler2D')
+        else
         {
-            if (uniform._init)
-            {
-                gl.activeTexture(gl['TEXTURE' + this.textureCount]);
-                gl.bindTexture(gl.TEXTURE_2D, uniform.value.baseTexture._glTextures[gl.id] || PIXI.createWebGLTexture( uniform.value.baseTexture, gl));
-                gl.uniform1i(uniform.uniformLocation, this.textureCount);
-                this.textureCount++;
-            }
-            else
-            {
-                this.initSampler2D(uniform);
-            }
+            renderer.context.drawImage(
+                texture.baseTexture.source,
+                texture.crop.x * resolution,
+                texture.crop.y * resolution,
+                width * resolution,
+                height * resolution,
+                dx  * renderer.resolution,
+                dy  * renderer.resolution,
+                width * renderer.resolution,
+                height * renderer.resolution
+            );
         }
     }
-
 };
 
 /**
-* Destroys the shader
-* @method destroy
-*
-*/
-PIXI.PixiShader.prototype.destroy = function()
+ * Destroys this sprite and optionally its texture
+ *
+ * @param [destroyTexture=false] {boolean} Should it destroy the current texture of the sprite as well
+ * @param [destroyBaseTexture=false] {boolean} Should it destroy the base texture of the sprite as well
+ */
+Sprite.prototype.destroy = function (destroyTexture, destroyBaseTexture)
 {
-    this.gl.deleteProgram( this.program );
-    this.uniforms = null;
-    this.gl = null;
+    Container.prototype.destroy.call(this);
 
-    this.attributes = null;
-};
-
-/**
-*
-* @property defaultVertexSrc
-* @type String
-*/
-PIXI.PixiShader.defaultVertexSrc = [
-    'attribute vec2 aVertexPosition;',
-    'attribute vec2 aTextureCoord;',
-    'attribute vec2 aColor;',
+    this.anchor = null;
 
-    'uniform vec2 projectionVector;',
-    'uniform vec2 offsetVector;',
+    if (destroyTexture)
+    {
+        this._texture.destroy(destroyBaseTexture);
+    }
 
-    'varying vec2 vTextureCoord;',
-    'varying vec4 vColor;',
+    this._texture = null;
+    this.shader = null;
+};
 
-    'const vec2 center = vec2(-1.0, 1.0);',
+// some helper functions..
 
-    'void main(void) {',
-    '   gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);',
-    '   vTextureCoord = aTextureCoord;',
-    '   vec3 color = mod(vec3(aColor.y/65536.0, aColor.y/256.0, aColor.y), 256.0) / 256.0;',
-    '   vColor = vec4(color * aColor.x, aColor.x);',
-    '}'
-];
+/**
+ * Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId
+ * The frame ids are created when a Texture packer file has been loaded
+ *
+ * @static
+ * @param frameId {String} The frame Id of the texture in the cache
+ * @return {Sprite} A new Sprite using a texture from the texture cache matching the frameId
+ * @param [crossorigin=(auto)] {boolean} if you want to specify the cross-origin parameter
+ * @param [scaleMode=scaleModes.DEFAULT] {number} if you want to specify the scale mode, see {@link SCALE_MODES} for possible values
+ */
+Sprite.fromFrame = function (frameId)
+{
+    var texture = utils.TextureCache[frameId];
 
+    if (!texture)
+    {
+        throw new Error('The frameId "' + frameId + '" does not exist in the texture cache');
+    }
 
+    return new Sprite(texture);
+};
 
+/**
+ * Helper function that creates a sprite that will contain a texture based on an image url
+ * If the image is not in the texture cache it will be loaded
+ *
+ * @static
+ * @param imageId {String} The image url of the texture
+ * @return {Sprite} A new Sprite using a texture from the texture cache matching the image id
+ */
+Sprite.fromImage = function (imageId, crossorigin, scaleMode)
+{
+    return new Sprite(Texture.fromImage(imageId, crossorigin, scaleMode));
+};
 
+},{"../const":22,"../display/Container":23,"../math":32,"../renderers/canvas/utils/CanvasTinter":47,"../textures/Texture":71,"../utils":74}],67:[function(require,module,exports){
+var ObjectRenderer = require('../../renderers/webgl/utils/ObjectRenderer'),
+    WebGLRenderer = require('../../renderers/webgl/WebGLRenderer'),
+    CONST = require('../../const');
 
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- * @author Richard Davey http://www.photonstorm.com @photonstorm
+ * @author Mat Groves
+ *
+ * Big thanks to the very clever Matt DesLauriers <mattdesl> https://github.com/mattdesl/
+ * for creating the original pixi version!
+ * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now share 4 bytes on the vertex buffer
+ *
+ * Heavily inspired by LibGDX's SpriteRenderer:
+ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/SpriteRenderer.java
  */
 
 /**
-* @class PixiFastShader
-* @constructor
-* @param gl {WebGLContext} the current WebGL drawing context
-*/
-PIXI.PixiFastShader = function(gl)
+ *
+ * @class
+ * @private
+ * @memberof PIXI
+ * @extends PIXI.ObjectRenderer
+ * @param renderer {WebGLRenderer} The renderer this sprite batch works for.
+ */
+function SpriteRenderer(renderer)
 {
+    ObjectRenderer.call(this, renderer);
 
     /**
-     * @property gl
-     * @type WebGLContext
+     *
+     *
+     * @member {number}
      */
-    this.gl = gl;
+    this.vertSize = 5;
 
     /**
-     * @property {any} program - The WebGL program.
+     *
+     *
+     * @member {number}
      */
-    this.program = null;
+    this.vertByteSize = this.vertSize * 4;
 
     /**
-     * @property {array} fragmentSrc - The fragment shader.
+     * The number of images in the SpriteBatch before it flushes.
+     *
+     * @member {number}
      */
-    this.fragmentSrc = [
-        'precision lowp float;',
-        'varying vec2 vTextureCoord;',
-        'varying float vColor;',
-        'uniform sampler2D uSampler;',
-        'void main(void) {',
-        '   gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;',
-        '}'
-    ];
+    this.size = CONST.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop
+
+    // the total number of bytes in our batch
+    var numVerts = this.size * 4 * this.vertByteSize;
+    // the total number of indices in our batch
+    var numIndices = this.size * 6;
 
     /**
-    * @property {array} vertexSrc - The vertex shader
-    */
-    this.vertexSrc = [
-        'attribute vec2 aVertexPosition;',
-        'attribute vec2 aPositionCoord;',
-        'attribute vec2 aScale;',
-        'attribute float aRotation;',
-        'attribute vec2 aTextureCoord;',
-        'attribute float aColor;',
+     * Holds the vertices
+     *
+     * @member {ArrayBuffer}
+     */
+    this.vertices = new ArrayBuffer(numVerts);
 
-        'uniform vec2 projectionVector;',
-        'uniform vec2 offsetVector;',
-        'uniform mat3 uMatrix;',
+    /**
+     * View on the vertices as a Float32Array
+     *
+     * @member {Float32Array}
+     */
+    this.positions = new Float32Array(this.vertices);
 
-        'varying vec2 vTextureCoord;',
-        'varying float vColor;',
-
-        'const vec2 center = vec2(-1.0, 1.0);',
-
-        'void main(void) {',
-        '   vec2 v;',
-        '   vec2 sv = aVertexPosition * aScale;',
-        '   v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);',
-        '   v.y = (sv.x) * sin(aRotation) + (sv.y) * cos(aRotation);',
-        '   v = ( uMatrix * vec3(v + aPositionCoord , 1.0) ).xy ;',
-        '   gl_Position = vec4( ( v / projectionVector) + center , 0.0, 1.0);',
-        '   vTextureCoord = aTextureCoord;',
-      //  '   vec3 color = mod(vec3(aColor.y/65536.0, aColor.y/256.0, aColor.y), 256.0) / 256.0;',
-        '   vColor = aColor;',
-        '}'
-    ];
+    /**
+     * Holds the color components
+     *
+     * @member {Uint32Array}
+     */
+    this.colors = new Uint32Array(this.vertices);
 
+    /**
+     * Holds the indices
+     *
+     * @member {Uint16Array}
+     */
+    this.indices = new Uint16Array(numIndices);
 
     /**
-    * @property {number} textureCount - A local texture counter for multi-texture shaders.
-    */
-    this.textureCount = 0;
+     *
+     *
+     * @member {number}
+     */
+    this.lastIndexCount = 0;
 
-    
-    this.init();
+    for (var i=0, j=0; i < numIndices; i += 6, j += 4)
+    {
+        this.indices[i + 0] = j + 0;
+        this.indices[i + 1] = j + 1;
+        this.indices[i + 2] = j + 2;
+        this.indices[i + 3] = j + 0;
+        this.indices[i + 4] = j + 2;
+        this.indices[i + 5] = j + 3;
+    }
+
+    /**
+     *
+     *
+     * @member {boolean}
+     */
+    this.drawing = false;
+
+    /**
+     *
+     *
+     * @member {number}
+     */
+    this.currentBatchSize = 0;
+
+    /**
+     *
+     *
+     * @member {BaseTexture}
+     */
+    this.currentBaseTexture = null;
+
+    /**
+     *
+     *
+     * @member {Array}
+     */
+    this.textures = [];
+
+    /**
+     *
+     *
+     * @member {Array}
+     */
+    this.blendModes = [];
+
+    /**
+     *
+     *
+     * @member {Array}
+     */
+    this.shaders = [];
+
+    /**
+     *
+     *
+     * @member {Array}
+     */
+    this.sprites = [];
+
+    /**
+     * The default shader that is used if a sprite doesn't have a more specific one.
+     *
+     * @member {Shader}
+     */
+    this.shader = null;
+
+}
+
+SpriteRenderer.prototype = Object.create(ObjectRenderer.prototype);
+SpriteRenderer.prototype.constructor = SpriteRenderer;
+module.exports = SpriteRenderer;
+
+WebGLRenderer.registerPlugin('sprite', SpriteRenderer);
+
+/**
+ * Sets up the renderer context and necessary buffers.
+ *
+ * @private
+ * @param gl {WebGLRenderingContext} the current WebGL drawing context
+ */
+SpriteRenderer.prototype.onContextChange = function ()
+{
+    var gl = this.renderer.gl;
+
+    // setup default shader
+    this.shader = this.renderer.shaderManager.defaultShader;
+
+    // create a couple of buffers
+    this.vertexBuffer = gl.createBuffer();
+    this.indexBuffer = gl.createBuffer();
+
+    // 65535 is max index, so 65535 / 6 = 10922.
+
+    //upload the index data
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW);
+
+    this.currentBlendMode = 99999;
 };
 
 /**
-* Initialises the shader
-* @method init
-*
-*/
-PIXI.PixiFastShader.prototype.init = function()
+ * Renders the sprite object.
+ *
+ * @param sprite {Sprite} the sprite to render when using this spritebatch
+ */
+SpriteRenderer.prototype.render = function (sprite)
 {
+    var texture = sprite._texture;
+
+    //TODO set blend modes..
+    // check texture..
+    if (this.currentBatchSize >= this.size)
+    {
+        this.flush();
+        this.currentBaseTexture = texture.baseTexture;
+    }
+
+    // get the uvs for the texture
+    var uvs = texture._uvs;
+
+    // if the uvs have not updated then no point rendering just yet!
+    if (!uvs)
+    {
+        return;
+    }
+
+    // TODO trim??
+    var aX = sprite.anchor.x;
+    var aY = sprite.anchor.y;
+
+    var w0, w1, h0, h1;
+
+    if (texture.trim)
+    {
+        // if the sprite is trimmed then we need to add the extra space before transforming the sprite coords..
+        var trim = texture.trim;
 
-    var gl = this.gl;
+        w1 = trim.x - aX * trim.width;
+        w0 = w1 + texture.crop.width;
 
-    var program = PIXI.compileProgram(gl, this.vertexSrc, this.fragmentSrc);
-    
-    gl.useProgram(program);
+        h1 = trim.y - aY * trim.height;
+        h0 = h1 + texture.crop.height;
 
-    // get and store the uniforms for the shader
-    this.uSampler = gl.getUniformLocation(program, 'uSampler');
+    }
+    else
+    {
+        w0 = (texture._frame.width ) * (1-aX);
+        w1 = (texture._frame.width ) * -aX;
 
-    this.projectionVector = gl.getUniformLocation(program, 'projectionVector');
-    this.offsetVector = gl.getUniformLocation(program, 'offsetVector');
-    this.dimensions = gl.getUniformLocation(program, 'dimensions');
-    this.uMatrix = gl.getUniformLocation(program, 'uMatrix');
+        h0 = texture._frame.height * (1-aY);
+        h1 = texture._frame.height * -aY;
+    }
 
-    // get and store the attributes
-    this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
-    this.aPositionCoord = gl.getAttribLocation(program, 'aPositionCoord');
+    var index = this.currentBatchSize * this.vertByteSize;
 
-    this.aScale = gl.getAttribLocation(program, 'aScale');
-    this.aRotation = gl.getAttribLocation(program, 'aRotation');
+    var worldTransform = sprite.worldTransform;
 
-    this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord');
-    this.colorAttribute = gl.getAttribLocation(program, 'aColor');
-   
+    var a = worldTransform.a;
+    var b = worldTransform.b;
+    var c = worldTransform.c;
+    var d = worldTransform.d;
+    var tx = worldTransform.tx;
+    var ty = worldTransform.ty;
 
-   
-    // Begin worst hack eva //
+    var colors = this.colors;
+    var positions = this.positions;
 
-    // WHY??? ONLY on my chrome pixel the line above returns -1 when using filters?
-    // maybe its somthing to do with the current state of the gl context.
-    // Im convinced this is a bug in the chrome browser as there is NO reason why this should be returning -1 especially as it only manifests on my chrome pixel
-    // If theres any webGL people that know why could happen please help :)
-    if(this.colorAttribute === -1)
+    if (this.renderer.roundPixels)
     {
-        this.colorAttribute = 2;
-    }
+        // xy
+        positions[index] = a * w1 + c * h1 + tx | 0;
+        positions[index+1] = d * h1 + b * w1 + ty | 0;
 
-    this.attributes = [this.aVertexPosition, this.aPositionCoord,  this.aScale, this.aRotation, this.aTextureCoord, this.colorAttribute];
-    
-    // End worst hack eva //
+        // xy
+        positions[index+5] = a * w0 + c * h1 + tx | 0;
+        positions[index+6] = d * h1 + b * w0 + ty | 0;
 
+         // xy
+        positions[index+10] = a * w0 + c * h0 + tx | 0;
+        positions[index+11] = d * h0 + b * w0 + ty | 0;
 
-    this.program = program;
-};
+        // xy
+        positions[index+15] = a * w1 + c * h0 + tx | 0;
+        positions[index+16] = d * h0 + b * w1 + ty | 0;
+    }
+    else
+    {
+        // xy
+        positions[index] = a * w1 + c * h1 + tx;
+        positions[index+1] = d * h1 + b * w1 + ty;
 
-/**
-* Destroys the shader
-* @method destroy
-*
-*/
-PIXI.PixiFastShader.prototype.destroy = function()
-{
-    this.gl.deleteProgram( this.program );
-    this.uniforms = null;
-    this.gl = null;
+        // xy
+        positions[index+5] = a * w0 + c * h1 + tx;
+        positions[index+6] = d * h1 + b * w0 + ty;
 
-    this.attributes = null;
-};
+         // xy
+        positions[index+10] = a * w0 + c * h0 + tx;
+        positions[index+11] = d * h0 + b * w0 + ty;
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+        // xy
+        positions[index+15] = a * w1 + c * h0 + tx;
+        positions[index+16] = d * h0 + b * w1 + ty;
+    }
 
+    // uv
+    positions[index+2] = uvs.x0;
+    positions[index+3] = uvs.y0;
 
-PIXI.StripShader = function()
-{
-    /**
-    * @property {any} program - The WebGL program.
-    */
-    this.program = null;
+    // uv
+    positions[index+7] = uvs.x1;
+    positions[index+8] = uvs.y1;
 
-    /**
-     * @property {array} fragmentSrc - The fragment shader.
-     */
-    this.fragmentSrc = [
-        'precision mediump float;',
-        'varying vec2 vTextureCoord;',
-        'varying float vColor;',
-        'uniform float alpha;',
-        'uniform sampler2D uSampler;',
+     // uv
+    positions[index+12] = uvs.x2;
+    positions[index+13] = uvs.y2;
 
-        'void main(void) {',
-        '   gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));',
-        '   gl_FragColor = gl_FragColor * alpha;',
-        '}'
-    ];
+    // uv
+    positions[index+17] = uvs.x3;
+    positions[index+18] = uvs.y3;
 
-    /**
-    * @property {array} fragmentSrc - The fragment shader.
-    */
-    this.vertexSrc = [
-        'attribute vec2 aVertexPosition;',
-        'attribute vec2 aTextureCoord;',
-        'attribute float aColor;',
-        'uniform mat3 translationMatrix;',
-        'uniform vec2 projectionVector;',
-        'varying vec2 vTextureCoord;',
-        'uniform vec2 offsetVector;',
-        'varying float vColor;',
-
-        'void main(void) {',
-        '   vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);',
-        '   v -= offsetVector.xyx;',
-        '   gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);',
-        '   vTextureCoord = aTextureCoord;',
-        '   vColor = aColor;',
-        '}'
-    ];
+    // color and alpha
+    var tint = sprite.tint;
+    colors[index+4] = colors[index+9] = colors[index+14] = colors[index+19] = (tint >> 16) + (tint & 0xff00) + ((tint & 0xff) << 16) + (sprite.worldAlpha * 255 << 24);
+
+    // increment the batchsize
+    this.sprites[this.currentBatchSize++] = sprite;
 };
 
 /**
-* Initialises the shader
-* @method init
-*
-*/
-PIXI.StripShader.prototype.init = function()
+ * Renders the content and empties the current batch.
+ *
+ */
+SpriteRenderer.prototype.flush = function ()
 {
+    // If the batch is length 0 then return as there is nothing to draw
+    if (this.currentBatchSize === 0)
+    {
+        return;
+    }
 
-    var gl = PIXI.gl;
-
-    var program = PIXI.compileProgram(gl, this.vertexSrc, this.fragmentSrc);
-    gl.useProgram(program);
+    var gl = this.renderer.gl;
+    var shader;
 
-    // get and store the uniforms for the shader
-    this.uSampler = gl.getUniformLocation(program, 'uSampler');
-    this.projectionVector = gl.getUniformLocation(program, 'projectionVector');
-    this.offsetVector = gl.getUniformLocation(program, 'offsetVector');
-    this.colorAttribute = gl.getAttribLocation(program, 'aColor');
-    //this.dimensions = gl.getUniformLocation(this.program, 'dimensions');
+    // upload the verts to the buffer
+    if (this.currentBatchSize > ( this.size * 0.5 ) )
+    {
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertices);
+    }
+    else
+    {
+        var view = this.positions.subarray(0, this.currentBatchSize * this.vertByteSize);
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, view);
+    }
 
-    // get and store the attributes
-    this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
-    this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord');
+    var nextTexture, nextBlendMode, nextShader;
+    var batchSize = 0;
+    var start = 0;
 
-    this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix');
-    this.alpha = gl.getUniformLocation(program, 'alpha');
+    var currentBaseTexture = null;
+    var currentBlendMode = this.renderer.blendModeManager.currentBlendMode;
+    var currentShader = null;
 
-    this.program = program;
-};
+    var blendSwap = false;
+    var shaderSwap = false;
+    var sprite;
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+    for (var i = 0, j = this.currentBatchSize; i < j; i++)
+    {
 
-/**
-* @class PrimitiveShader
-* @constructor
-* @param gl {WebGLContext} the current WebGL drawing context
-*/
-PIXI.PrimitiveShader = function(gl)
-{
-    /**
-     * @property gl
-     * @type WebGLContext
-     */
-    this.gl = gl;
+        sprite = this.sprites[i];
 
-    /**
-    * @property {any} program - The WebGL program.
-    */
-    this.program = null;
+        nextTexture = sprite._texture.baseTexture;
+        nextBlendMode = sprite.blendMode;
+        nextShader = sprite.shader || this.shader;
 
-    /**
-     * @property fragmentSrc
-     * @type Array
-     */
-    this.fragmentSrc = [
-        'precision mediump float;',
-        'varying vec4 vColor;',
+        blendSwap = currentBlendMode !== nextBlendMode;
+        shaderSwap = currentShader !== nextShader; // should I use uuidS???
 
-        'void main(void) {',
-        '   gl_FragColor = vColor;',
-        '}'
-    ];
+        if (currentBaseTexture !== nextTexture || blendSwap || shaderSwap)
+        {
+            this.renderBatch(currentBaseTexture, batchSize, start);
 
-    /**
-     * @property vertexSrc
-     * @type Array
-     */
-    this.vertexSrc  = [
-        'attribute vec2 aVertexPosition;',
-        'attribute vec4 aColor;',
-        'uniform mat3 translationMatrix;',
-        'uniform vec2 projectionVector;',
-        'uniform vec2 offsetVector;',
-        'uniform float alpha;',
-        'uniform vec3 tint;',
-        'varying vec4 vColor;',
+            start = i;
+            batchSize = 0;
+            currentBaseTexture = nextTexture;
 
-        'void main(void) {',
-        '   vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);',
-        '   v -= offsetVector.xyx;',
-        '   gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);',
-        '   vColor = aColor * vec4(tint * alpha, alpha);',
-        '}'
-    ];
+            if (blendSwap)
+            {
+                currentBlendMode = nextBlendMode;
+                this.renderer.blendModeManager.setBlendMode( currentBlendMode );
+            }
 
-    this.init();
-};
+            if (shaderSwap)
+            {
+                currentShader = nextShader;
 
-/**
-* Initialises the shader
-* @method init
-*
-*/
-PIXI.PrimitiveShader.prototype.init = function()
-{
 
-    var gl = this.gl;
 
-    var program = PIXI.compileProgram(gl, this.vertexSrc, this.fragmentSrc);
-    gl.useProgram(program);
+                shader = currentShader.shaders ? currentShader.shaders[gl.id] : currentShader;
 
-    // get and store the uniforms for the shader
-    this.projectionVector = gl.getUniformLocation(program, 'projectionVector');
-    this.offsetVector = gl.getUniformLocation(program, 'offsetVector');
-    this.tintColor = gl.getUniformLocation(program, 'tint');
+                if (!shader)
+                {
+                    shader = currentShader.getShader(this.renderer);
 
+                }
 
-    // get and store the attributes
-    this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
-    this.colorAttribute = gl.getAttribLocation(program, 'aColor');
+                // set shader function???
+                this.renderer.shaderManager.setShader(shader);
 
-    this.attributes = [this.aVertexPosition, this.colorAttribute];
+                //TODO - i KNOW this can be optimised! Once v3 is stable il look at this next...
+                shader.uniforms.projectionMatrix.value = this.renderer.currentRenderTarget.projectionMatrix.toArray(true);
+                //Make this a little more dynamic / intelligent!
+                shader.syncUniforms();
 
-    this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix');
-    this.alpha = gl.getUniformLocation(program, 'alpha');
+                //TODO investigate some kind of texture state managment??
+                // need to make sure this texture is the active one for all the batch swaps..
+                gl.activeTexture(gl.TEXTURE0);
 
-    this.program = program;
-};
+                // both thease only need to be set if they are changing..
+                // set the projection
+                //gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, this.renderer.currentRenderTarget.projectionMatrix.toArray(true));
 
-/**
-* Destroys the shader
-* @method destroy
-*
-*/
-PIXI.PrimitiveShader.prototype.destroy = function()
-{
-    this.gl.deleteProgram( this.program );
-    this.uniforms = null;
-    this.gl = null;
 
-    this.attribute = null;
-};
+            }
+        }
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+        batchSize++;
+    }
 
-/**
- * A set of functions used by the webGL renderer to draw the primitive graphics data
- *
- * @class WebGLGraphics
- * @private
- * @static
- */
-PIXI.WebGLGraphics = function()
-{
+    this.renderBatch(currentBaseTexture, batchSize, start);
 
+    // then reset the batch!
+    this.currentBatchSize = 0;
 };
 
 /**
- * Renders the graphics object
+ * Draws the currently batches sprites.
  *
- * @static
  * @private
- * @method renderGraphics
- * @param graphics {Graphics}
- * @param renderSession {Object}
+ * @param texture {Texture}
+ * @param size {number}
+ * @param startIndex {number}
  */
-PIXI.WebGLGraphics.renderGraphics = function(graphics, renderSession)//projection, offset)
+SpriteRenderer.prototype.renderBatch = function (texture, size, startIndex)
 {
-    var gl = renderSession.gl;
-    var projection = renderSession.projection,
-        offset = renderSession.offset,
-        shader = renderSession.shaderManager.primitiveShader;
-
-    if(!graphics._webGL[gl.id])graphics._webGL[gl.id] = {points:[], indices:[], lastIndex:0,
-                                           buffer:gl.createBuffer(),
-                                           indexBuffer:gl.createBuffer()};
+    if (size === 0)
+    {
+        return;
+    }
 
-    var webGL = graphics._webGL[gl.id];
+    var gl = this.renderer.gl;
 
-    if(graphics.dirty)
+    if (!texture._glTextures[gl.id])
     {
-        graphics.dirty = false;
+        this.renderer.updateTexture(texture);
+    }
+    else
+    {
+        // bind the current texture
+        gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);
+    }
 
-        if(graphics.clearDirty)
-        {
-            graphics.clearDirty = false;
+    // now draw those suckas!
+    gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2);
 
-            webGL.lastIndex = 0;
-            webGL.points = [];
-            webGL.indices = [];
+    // increment the draw count
+    this.renderer.drawCount++;
+};
 
-        }
+/**
+ * Starts a new sprite batch.
+ *
+ */
+SpriteRenderer.prototype.start = function ()
+{
+    var gl = this.renderer.gl;
 
-        PIXI.WebGLGraphics.updateGraphics(graphics, gl);
-    }
+    // bind the main texture
 
-    renderSession.shaderManager.activatePrimitiveShader();
 
-    // This  could be speeded up for sure!
+    // bind the buffers
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
 
-    // set the matrix transform
-    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    // this is the same for each shader?
+    var stride =  this.vertByteSize;
+    gl.vertexAttribPointer(this.shader.attributes.aVertexPosition, 2, gl.FLOAT, false, stride, 0);
+    gl.vertexAttribPointer(this.shader.attributes.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4);
 
-    gl.uniformMatrix3fv(shader.translationMatrix, false, graphics.worldTransform.toArray(true));
+    // color attributes will be interpreted as unsigned bytes and normalized
+    gl.vertexAttribPointer(this.shader.attributes.aColor, 4, gl.UNSIGNED_BYTE, true, stride, 4 * 4);
+};
 
-    gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
-    gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
+/**
+ * Destroys the SpriteBatch.
+ *
+ */
+SpriteRenderer.prototype.destroy = function ()
+{
+    this.renderer.gl.deleteBuffer(this.vertexBuffer);
+    this.renderer.gl.deleteBuffer(this.indexBuffer);
 
-    gl.uniform3fv(shader.tintColor, PIXI.hex2rgb(graphics.tint));
+    this.shader.destroy();
 
-    gl.uniform1f(shader.alpha, graphics.worldAlpha);
-    gl.bindBuffer(gl.ARRAY_BUFFER, webGL.buffer);
+    this.renderer = null;
 
-    gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
-    gl.vertexAttribPointer(shader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
+    this.vertices = null;
+    this.positions = null;
+    this.colors = null;
+    this.indices = null;
 
-    // set the index buffer!
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGL.indexBuffer);
+    this.vertexBuffer = null;
+    this.indexBuffer = null;
 
-    gl.drawElements(gl.TRIANGLE_STRIP,  webGL.indices.length, gl.UNSIGNED_SHORT, 0 );
+    this.currentBaseTexture = null;
 
-    renderSession.shaderManager.deactivatePrimitiveShader();
+    this.drawing = false;
 
-    // return to default shader...
-//  PIXI.activateShader(PIXI.defaultShader);
+    this.textures = null;
+    this.blendModes = null;
+    this.shaders = null;
+    this.sprites = null;
+    this.shader = null;
 };
 
+},{"../../const":22,"../../renderers/webgl/WebGLRenderer":48,"../../renderers/webgl/utils/ObjectRenderer":62}],68:[function(require,module,exports){
+var Sprite = require('../sprites/Sprite'),
+    Texture = require('../textures/Texture'),
+    math = require('../math'),
+    utils = require('../utils'),
+    CONST = require('../const');
+
 /**
- * Updates the graphics object
+ * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string,
+ * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object.
  *
- * @static
- * @private
- * @method updateGraphics
- * @param graphicsData {Graphics} The graphics object to update
- * @param gl {WebGLContext} the current WebGL drawing context
- */
-PIXI.WebGLGraphics.updateGraphics = function(graphics, gl)
+ * A Text can be created directly from a string and a style object
+ *
+ * ```js
+ * var text = new PIXI.Text('This is a pixi text',{font : '24px Arial', fill : 0xff1010, align : 'center'});
+ * ```
+ *
+ * @class
+ * @extends PIXI.Sprite
+ * @memberof PIXI
+ * @param text {string} The copy that you would like the text to display
+ * @param [style] {object} The style parameters
+ * @param [style.font] {string} default 'bold 20px Arial' The style and size of the font
+ * @param [style.fill='black'] {String|Number} A canvas fillstyle that will be used on the text e.g 'red', '#00FF00'
+ * @param [style.align='left'] {string} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
+ * @param [style.stroke] {String|Number} A canvas fillstyle that will be used on the text stroke e.g 'blue', '#FCFF00'
+ * @param [style.strokeThickness=0] {number} A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ * @param [style.wordWrap=false] {boolean} Indicates if word wrap should be used
+ * @param [style.wordWrapWidth=100] {number} The width at which text will wrap, it needs wordWrap to be set to true
+ * @param [style.lineHeight] {number} The line height, a number that represents the vertical space that a letter uses
+ * @param [style.dropShadow=false] {boolean} Set a drop shadow for the text
+ * @param [style.dropShadowColor='#000000'] {string} A fill style to be used on the dropshadow e.g 'red', '#00FF00'
+ * @param [style.dropShadowAngle=Math.PI/4] {number} Set a angle of the drop shadow
+ * @param [style.dropShadowDistance=5] {number} Set a distance of the drop shadow
+ * @param [style.padding=0] {number} Occasionally some fonts are cropped on top or bottom. Adding some padding will
+ *      prevent this from happening by adding padding to the top and bottom of text height.
+ * @param [style.textBaseline='alphabetic'] {string} The baseline of the text that is rendered.
+ * @param [style.lineJoin='miter'] {string} The lineJoin property sets the type of corner created, it can resolve
+ *      spiked text issues. Default is 'miter' (creates a sharp corner).
+ * @param [style.miterLimit=10] {number} The miter limit to use when using the 'miter' lineJoin mode. This can reduce
+ *      or increase the spikiness of rendered text.
+ */
+function Text(text, style, resolution)
 {
-    var webGL = graphics._webGL[gl.id];
-    
-    for (var i = webGL.lastIndex; i < graphics.graphicsData.length; i++)
-    {
-        var data = graphics.graphicsData[i];
-
-        if(data.type === PIXI.Graphics.POLY)
-        {
-            if(data.fill)
-            {
-                if(data.points.length>3)
-                    PIXI.WebGLGraphics.buildPoly(data, webGL);
-            }
+    /**
+     * The canvas element that everything is drawn to
+     *
+     * @member {HTMLCanvasElement}
+     */
+    this.canvas = document.createElement('canvas');
 
-            if(data.lineWidth > 0)
-            {
-                PIXI.WebGLGraphics.buildLine(data, webGL);
-            }
-        }
-        else if(data.type === PIXI.Graphics.RECT)
-        {
-            PIXI.WebGLGraphics.buildRectangle(data, webGL);
-        }
-        else if(data.type === PIXI.Graphics.CIRC || data.type === PIXI.Graphics.ELIP)
-        {
-            PIXI.WebGLGraphics.buildCircle(data, webGL);
-        }
-    }
+    /**
+     * The canvas 2d context that everything is drawn with
+     * @member {HTMLCanvasElement}
+     */
+    this.context = this.canvas.getContext('2d');
 
-    webGL.lastIndex = graphics.graphicsData.length;
+    /**
+     * The resolution of the canvas.
+     * @member {number}
+     */
+    this.resolution = resolution || CONST.RESOLUTION;
 
-   
+    /**
+     * Private tracker for the current text.
+     *
+     * @member {string}
+     * @private
+     */
+    this._text = null;
 
-    webGL.glPoints = new Float32Array(webGL.points);
+    /**
+     * Private tracker for the current style.
+     *
+     * @member {object}
+     * @private
+     */
+    this._style = null;
 
-    gl.bindBuffer(gl.ARRAY_BUFFER, webGL.buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, webGL.glPoints, gl.STATIC_DRAW);
+    var texture = Texture.fromCanvas(this.canvas);
+    texture.trim = new math.Rectangle();
+    Sprite.call(this, texture);
 
-    webGL.glIndicies = new Uint16Array(webGL.indices);
+    this.text = text;
+    this.style = style;
+}
 
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGL.indexBuffer);
-    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, webGL.glIndicies, gl.STATIC_DRAW);
-};
+// constructor
+Text.prototype = Object.create(Sprite.prototype);
+Text.prototype.constructor = Text;
+module.exports = Text;
 
-/**
- * Builds a rectangle to draw
- *
- * @static
- * @private
- * @method buildRectangle
- * @param graphicsData {Graphics} The graphics object containing all the necessary properties
- * @param webGLData {Object}
- */
-PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
-{
-    // --- //
-    // need to convert points to a nice regular data
-    //
-    var rectData = graphicsData.points;
-    var x = rectData[0];
-    var y = rectData[1];
-    var width = rectData[2];
-    var height = rectData[3];
+Text.fontPropertiesCache = {};
+Text.fontPropertiesCanvas = document.createElement('canvas');
+Text.fontPropertiesContext = Text.fontPropertiesCanvas.getContext('2d');
 
+Object.defineProperties(Text.prototype, {
+    /**
+     * The width of the Text, setting this will actually modify the scale to achieve the value set
+     *
+     * @member {number}
+     * @memberof Text#
+     */
+    width: {
+        get: function ()
+        {
+            if (this.dirty)
+            {
+                this.updateText();
+            }
 
-    if(graphicsData.fill)
-    {
-        var color = PIXI.hex2rgb(graphicsData.fillColor);
-        var alpha = graphicsData.fillAlpha;
+            return this.scale.x * this._texture._frame.width;
+        },
+        set: function (value)
+        {
+            this.scale.x = value / this._texture._frame.width;
+            this._width = value;
+        }
+    },
 
-        var r = color[0] * alpha;
-        var g = color[1] * alpha;
-        var b = color[2] * alpha;
+    /**
+     * The height of the Text, setting this will actually modify the scale to achieve the value set
+     *
+     * @member {number}
+     * @memberof Text#
+     */
+    height: {
+        get: function ()
+        {
+            if (this.dirty)
+            {
+                this.updateText();
+            }
 
-        var verts = webGLData.points;
-        var indices = webGLData.indices;
+            return  this.scale.y * this._texture._frame.height;
+        },
+        set: function (value)
+        {
+            this.scale.y = value / this._texture._frame.height;
+            this._height = value;
+        }
+    },
 
-        var vertPos = verts.length/6;
+    /**
+     * Set the style of the text
+     *
+     * @param [style] {object} The style parameters
+     * @param [style.font='bold 20pt Arial'] {string} The style and size of the font
+     * @param [style.fill='black'] {string|number} A canvas fillstyle that will be used on the text eg 'red', '#00FF00'
+     * @param [style.align='left'] {string} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text
+     * @param [style.stroke='black'] {string|number} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00'
+     * @param [style.strokeThickness=0] {number} A number that represents the thickness of the stroke. Default is 0 (no stroke)
+     * @param [style.wordWrap=false] {boolean} Indicates if word wrap should be used
+     * @param [style.wordWrapWidth=100] {number} The width at which text will wrap
+     * @param [style.lineHeight] {number} The line height, a number that represents the vertical space that a letter uses
+     * @param [style.dropShadow=false] {boolean} Set a drop shadow for the text
+     * @param [style.dropShadowColor='#000000'] {string|number} A fill style to be used on the dropshadow e.g 'red', '#00FF00'
+     * @param [style.dropShadowAngle=Math.PI/6] {number} Set a angle of the drop shadow
+     * @param [style.dropShadowDistance=5] {number} Set a distance of the drop shadow
+     * @param [style.padding=0] {number} Occasionally some fonts are cropped on top or bottom. Adding some padding will
+     *      prevent this from happening by adding padding to the top and bottom of text height.
+     * @param [style.textBaseline='alphabetic'] {string} The baseline of the text that is rendered.
+     * @param [style.lineJoin='miter'] {string} The lineJoin property sets the type of corner created, it can resolve
+     *      spiked text issues. Default is 'miter' (creates a sharp corner).
+     * @param [style.miterLimit=10] {number} The miter limit to use when using the 'miter' lineJoin mode. This can reduce
+     *      or increase the spikiness of rendered text.
+     * @memberof Text#
+     */
+    style: {
+        get: function ()
+        {
+            return this._style;
+        },
+        set: function (style)
+        {
+            style = style || {};
 
-        // start
-        verts.push(x, y);
-        verts.push(r, g, b, alpha);
+            if (typeof style.fill === 'number') {
+                style.fill = utils.hex2string(style.fill);
+            }
 
-        verts.push(x + width, y);
-        verts.push(r, g, b, alpha);
+            if (typeof style.stroke === 'number') {
+                style.stroke = utils.hex2string(style.stroke);
+            }
 
-        verts.push(x , y + height);
-        verts.push(r, g, b, alpha);
+            if (typeof style.dropShadowColor === 'number') {
+                style.dropShadowColor = utils.hex2string(style.dropShadowColor);
+            }
 
-        verts.push(x + width, y + height);
-        verts.push(r, g, b, alpha);
+            style.font = style.font || 'bold 20pt Arial';
+            style.fill = style.fill || 'black';
+            style.align = style.align || 'left';
+            style.stroke = style.stroke || 'black'; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136
+            style.strokeThickness = style.strokeThickness || 0;
+            style.wordWrap = style.wordWrap || false;
+            style.wordWrapWidth = style.wordWrapWidth || 100;
 
-        // insert 2 dead triangles..
-        indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3);
-    }
+            style.dropShadow = style.dropShadow || false;
+            style.dropShadowColor = style.dropShadowColor || '#000000';
+            style.dropShadowAngle = style.dropShadowAngle || Math.PI / 6;
+            style.dropShadowDistance = style.dropShadowDistance || 5;
 
-    if(graphicsData.lineWidth)
-    {
-        var tempPoints = graphicsData.points;
+            style.padding = style.padding || 0;
 
-        graphicsData.points = [x, y,
-                  x + width, y,
-                  x + width, y + height,
-                  x, y + height,
-                  x, y];
+            style.textBaseline = style.textBaseline || 'alphabetic';
 
+            style.lineJoin = style.lineJoin || 'miter';
+            style.miterLimit = style.miterLimit || 10;
 
-        PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
+            this._style = style;
+            this.dirty = true;
+        }
+    },
 
-        graphicsData.points = tempPoints;
+    /**
+     * Set the copy for the text object. To split a line you can use '\n'.
+     *
+     * @param text {string} The copy that you would like the text to display
+     * @memberof Text#
+     */
+    text: {
+        get: function()
+        {
+            return this._text;
+        },
+        set: function (text){
+            text = text.toString() || ' ';
+            if (this._text === text)
+            {
+                return;
+            }
+            this._text = text;
+            this.dirty = true;
+        }
     }
-};
+});
 
 /**
- * Builds a circle to draw
+ * Renders text and updates it when needed
  *
- * @static
  * @private
- * @method buildCircle
- * @param graphicsData {Graphics} The graphics object to draw
- * @param webGLData {Object}
  */
-PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
+Text.prototype.updateText = function ()
 {
-    
-    // need to convert points to a nice regular data
-    var rectData = graphicsData.points;
-    var x = rectData[0];
-    var y = rectData[1];
-    var width = rectData[2];
-    var height = rectData[3];
+    var style = this._style;
+    this.context.font = style.font;
 
-    var totalSegs = 40;
-    var seg = (Math.PI * 2) / totalSegs ;
+    // word wrap
+    // preserve original text
+    var outputText = style.wordWrap ? this.wordWrap(this._text) : this._text;
 
-    var i = 0;
+    // split text into lines
+    var lines = outputText.split(/(?:\r\n|\r|\n)/);
 
-    if(graphicsData.fill)
+    // calculate text width
+    var lineWidths = new Array(lines.length);
+    var maxLineWidth = 0;
+    var fontProperties = this.determineFontProperties(style.font);
+    for (var i = 0; i < lines.length; i++)
     {
-        var color = PIXI.hex2rgb(graphicsData.fillColor);
-        var alpha = graphicsData.fillAlpha;
+        var lineWidth = this.context.measureText(lines[i]).width;
+        lineWidths[i] = lineWidth;
+        maxLineWidth = Math.max(maxLineWidth, lineWidth);
+    }
 
-        var r = color[0] * alpha;
-        var g = color[1] * alpha;
-        var b = color[2] * alpha;
+    var width = maxLineWidth + style.strokeThickness;
+    if (style.dropShadow)
+    {
+        width += style.dropShadowDistance;
+    }
 
-        var verts = webGLData.points;
-        var indices = webGLData.indices;
+    this.canvas.width = ( width + this.context.lineWidth ) * this.resolution;
 
-        var vecPos = verts.length/6;
+    // calculate text height
+    var lineHeight = this.style.lineHeight || fontProperties.fontSize + style.strokeThickness;
 
-        indices.push(vecPos);
+    var height = lineHeight * lines.length;
+    if (style.dropShadow)
+    {
+        height += style.dropShadowDistance;
+    }
 
-        for (i = 0; i < totalSegs + 1 ; i++)
-        {
-            verts.push(x,y, r, g, b, alpha);
+    this.canvas.height = ( height + this._style.padding * 2 ) * this.resolution;
 
-            verts.push(x + Math.sin(seg * i) * width,
-                       y + Math.cos(seg * i) * height,
-                       r, g, b, alpha);
+    this.context.scale( this.resolution, this.resolution);
 
-            indices.push(vecPos++, vecPos++);
-        }
+    if (navigator.isCocoonJS)
+    {
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
-        indices.push(vecPos-1);
     }
 
-    if(graphicsData.lineWidth)
-    {
-        var tempPoints = graphicsData.points;
+    //this.context.fillStyle="#FF0000";
+    //this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
 
-        graphicsData.points = [];
+    this.context.font = style.font;
+    this.context.strokeStyle = style.stroke;
+    this.context.lineWidth = style.strokeThickness;
+    this.context.textBaseline = style.textBaseline;
+    this.context.lineJoin = style.lineJoin;
+    this.context.miterLimit = style.miterLimit;
 
-        for (i = 0; i < totalSegs + 1; i++)
-        {
-            graphicsData.points.push(x + Math.sin(seg * i) * width,
-                                     y + Math.cos(seg * i) * height);
-        }
+    var linePositionX;
+    var linePositionY;
 
-        PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
+    if (style.dropShadow)
+    {
+        this.context.fillStyle = style.dropShadowColor;
 
-        graphicsData.points = tempPoints;
-    }
-};
+        var xShadowOffset = Math.cos(style.dropShadowAngle) * style.dropShadowDistance;
+        var yShadowOffset = Math.sin(style.dropShadowAngle) * style.dropShadowDistance;
 
-/**
- * Builds a line to draw
- *
- * @static
- * @private
- * @method buildLine
- * @param graphicsData {Graphics} The graphics object containing all the necessary properties
- * @param webGLData {Object}
- */
-PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
-{
-    // TODO OPTIMISE!
-    var i = 0;
+        for (i = 0; i < lines.length; i++)
+        {
+            linePositionX = style.strokeThickness / 2;
+            linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent;
 
-    var points = graphicsData.points;
-    if(points.length === 0)return;
+            if (style.align === 'right')
+            {
+                linePositionX += maxLineWidth - lineWidths[i];
+            }
+            else if (style.align === 'center')
+            {
+                linePositionX += (maxLineWidth - lineWidths[i]) / 2;
+            }
 
-    // if the line width is an odd number add 0.5 to align to a whole pixel
-    if(graphicsData.lineWidth%2)
-    {
-        for (i = 0; i < points.length; i++) {
-            points[i] += 0.5;
+            if (style.fill)
+            {
+                this.context.fillText(lines[i], linePositionX + xShadowOffset, linePositionY + yShadowOffset + this._style.padding);
+            }
         }
     }
 
-    // get first and last point.. figure out the middle!
-    var firstPoint = new PIXI.Point( points[0], points[1] );
-    var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
+    //set canvas text styles
+    this.context.fillStyle = style.fill;
 
-    // if the first point is the last point - gonna have issues :)
-    if(firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y)
+    //draw lines line by line
+    for (i = 0; i < lines.length; i++)
     {
-        points.pop();
-        points.pop();
+        linePositionX = style.strokeThickness / 2;
+        linePositionY = (style.strokeThickness / 2 + i * lineHeight) + fontProperties.ascent;
 
-        lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
+        if (style.align === 'right')
+        {
+            linePositionX += maxLineWidth - lineWidths[i];
+        }
+        else if (style.align === 'center')
+        {
+            linePositionX += (maxLineWidth - lineWidths[i]) / 2;
+        }
 
-        var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
-        var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
+        if (style.stroke && style.strokeThickness)
+        {
+            this.context.strokeText(lines[i], linePositionX, linePositionY + this._style.padding);
+        }
 
-        points.unshift(midPointX, midPointY);
-        points.push(midPointX, midPointY);
+        if (style.fill)
+        {
+            this.context.fillText(lines[i], linePositionX, linePositionY + this._style.padding);
+        }
     }
 
-    var verts = webGLData.points;
-    var indices = webGLData.indices;
-    var length = points.length / 2;
-    var indexCount = points.length;
-    var indexStart = verts.length/6;
-
-    // DRAW the Line
-    var width = graphicsData.lineWidth / 2;
-
-    // sort color
-    var color = PIXI.hex2rgb(graphicsData.lineColor);
-    var alpha = graphicsData.lineAlpha;
-    var r = color[0] * alpha;
-    var g = color[1] * alpha;
-    var b = color[2] * alpha;
+    this.updateTexture();
+};
 
-    var px, py, p1x, p1y, p2x, p2y, p3x, p3y;
-    var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
-    var a1, b1, c1, a2, b2, c2;
-    var denom, pdist, dist;
+/**
+ * Updates texture size based on canvas size
+ *
+ * @private
+ */
+Text.prototype.updateTexture = function ()
+{
+    var texture = this._texture;
 
-    p1x = points[0];
-    p1y = points[1];
+    texture.baseTexture.hasLoaded = true;
+    texture.baseTexture.resolution = this.resolution;
 
-    p2x = points[2];
-    p2y = points[3];
+    texture.baseTexture.width = this.canvas.width / this.resolution;
+    texture.baseTexture.height = this.canvas.height / this.resolution;
+    texture.crop.width = texture._frame.width = this.canvas.width / this.resolution;
+    texture.crop.height = texture._frame.height = this.canvas.height / this.resolution;
 
-    perpx = -(p1y - p2y);
-    perpy =  p1x - p2x;
+    texture.trim.x = 0;
+    texture.trim.y = -this._style.padding;
 
-    dist = Math.sqrt(perpx*perpx + perpy*perpy);
+    texture.trim.width = texture._frame.width;
+    texture.trim.height = texture._frame.height - this._style.padding*2;
 
-    perpx /= dist;
-    perpy /= dist;
-    perpx *= width;
-    perpy *= width;
+    this._width = this.canvas.width / this.resolution;
+    this._height = this.canvas.height / this.resolution;
 
-    // start
-    verts.push(p1x - perpx , p1y - perpy,
-                r, g, b, alpha);
+    texture.baseTexture.emit('update',  texture.baseTexture);
 
-    verts.push(p1x + perpx , p1y + perpy,
-                r, g, b, alpha);
+    this.dirty = false;
+};
 
-    for (i = 1; i < length-1; i++)
+/**
+ * Renders the object using the WebGL renderer
+ *
+ * @param renderer {WebGLRenderer}
+ */
+Text.prototype.renderWebGL = function (renderer)
+{
+    if (this.dirty)
     {
-        p1x = points[(i-1)*2];
-        p1y = points[(i-1)*2 + 1];
-
-        p2x = points[(i)*2];
-        p2y = points[(i)*2 + 1];
-
-        p3x = points[(i+1)*2];
-        p3y = points[(i+1)*2 + 1];
-
-        perpx = -(p1y - p2y);
-        perpy = p1x - p2x;
-
-        dist = Math.sqrt(perpx*perpx + perpy*perpy);
-        perpx /= dist;
-        perpy /= dist;
-        perpx *= width;
-        perpy *= width;
-
-        perp2x = -(p2y - p3y);
-        perp2y = p2x - p3x;
-
-        dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
-        perp2x /= dist;
-        perp2y /= dist;
-        perp2x *= width;
-        perp2y *= width;
-
-        a1 = (-perpy + p1y) - (-perpy + p2y);
-        b1 = (-perpx + p2x) - (-perpx + p1x);
-        c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
-        a2 = (-perp2y + p3y) - (-perp2y + p2y);
-        b2 = (-perp2x + p2x) - (-perp2x + p3x);
-        c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
-
-        denom = a1*b2 - a2*b1;
+        //this.resolution = 1//renderer.resolution;
 
-        if(Math.abs(denom) < 0.1 )
-        {
+        this.updateText();
+    }
 
-            denom+=10.1;
-            verts.push(p2x - perpx , p2y - perpy,
-                r, g, b, alpha);
+    Sprite.prototype.renderWebGL.call(this, renderer);
+};
 
-            verts.push(p2x + perpx , p2y + perpy,
-                r, g, b, alpha);
+/**
+ * Renders the object using the Canvas renderer
+ *
+ * @param renderer {CanvasRenderer}
+ * @private
+ */
+Text.prototype._renderCanvas = function (renderer)
+{
+    if (this.dirty)
+    {
+     //   this.resolution = 1//renderer.resolution;
 
-            continue;
-        }
+        this.updateText();
+    }
 
-        px = (b1*c2 - b2*c1)/denom;
-        py = (a2*c1 - a1*c2)/denom;
+    Sprite.prototype._renderCanvas.call(this, renderer);
+};
 
+/**
+ * Calculates the ascent, descent and fontSize of a given fontStyle
+ *
+ * @param fontStyle {object}
+ * @private
+ */
+Text.prototype.determineFontProperties = function (fontStyle)
+{
+    var properties = Text.fontPropertiesCache[fontStyle];
 
-        pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
+    if (!properties)
+    {
+        properties = {};
 
+        var canvas = Text.fontPropertiesCanvas;
+        var context = Text.fontPropertiesContext;
 
-        if(pdist > 140 * 140)
-        {
-            perp3x = perpx - perp2x;
-            perp3y = perpy - perp2y;
+        context.font = fontStyle;
 
-            dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
-            perp3x /= dist;
-            perp3y /= dist;
-            perp3x *= width;
-            perp3y *= width;
+        var width = Math.ceil(context.measureText('|MÉq').width);
+        var baseline = Math.ceil(context.measureText('M').width);
+        var height = 2 * baseline;
 
-            verts.push(p2x - perp3x, p2y -perp3y);
-            verts.push(r, g, b, alpha);
+        baseline = baseline * 1.4 | 0;
 
-            verts.push(p2x + perp3x, p2y +perp3y);
-            verts.push(r, g, b, alpha);
+        canvas.width = width;
+        canvas.height = height;
 
-            verts.push(p2x - perp3x, p2y -perp3y);
-            verts.push(r, g, b, alpha);
+        context.fillStyle = '#f00';
+        context.fillRect(0, 0, width, height);
 
-            indexCount++;
-        }
-        else
-        {
+        context.font = fontStyle;
 
-            verts.push(px , py);
-            verts.push(r, g, b, alpha);
+        context.textBaseline = 'alphabetic';
+        context.fillStyle = '#000';
+        context.fillText('|MÉq', 0, baseline);
 
-            verts.push(p2x - (px-p2x), p2y - (py - p2y));
-            verts.push(r, g, b, alpha);
-        }
-    }
+        var imagedata = context.getImageData(0, 0, width, height).data;
+        var pixels = imagedata.length;
+        var line = width * 4;
 
-    p1x = points[(length-2)*2];
-    p1y = points[(length-2)*2 + 1];
+        var i, j;
 
-    p2x = points[(length-1)*2];
-    p2y = points[(length-1)*2 + 1];
+        var idx = 0;
+        var stop = false;
 
-    perpx = -(p1y - p2y);
-    perpy = p1x - p2x;
+        // ascent. scan from top to bottom until we find a non red pixel
+        for (i = 0; i < baseline; i++)
+        {
+            for (j = 0; j < line; j += 4)
+            {
+                if (imagedata[idx + j] !== 255)
+                {
+                    stop = true;
+                    break;
+                }
+            }
+            if (!stop)
+            {
+                idx += line;
+            }
+            else
+            {
+                break;
+            }
+        }
 
-    dist = Math.sqrt(perpx*perpx + perpy*perpy);
-    perpx /= dist;
-    perpy /= dist;
-    perpx *= width;
-    perpy *= width;
+        properties.ascent = baseline - i;
 
-    verts.push(p2x - perpx , p2y - perpy);
-    verts.push(r, g, b, alpha);
+        idx = pixels - line;
+        stop = false;
 
-    verts.push(p2x + perpx , p2y + perpy);
-    verts.push(r, g, b, alpha);
+        // descent. scan from bottom to top until we find a non red pixel
+        for (i = height; i > baseline; i--)
+        {
+            for (j = 0; j < line; j += 4)
+            {
+                if (imagedata[idx + j] !== 255)
+                {
+                    stop = true;
+                    break;
+                }
+            }
+            if (!stop)
+            {
+                idx -= line;
+            }
+            else
+            {
+                break;
+            }
+        }
 
-    indices.push(indexStart);
+        properties.descent = i - baseline;
+        properties.fontSize = properties.ascent + properties.descent;
 
-    for (i = 0; i < indexCount; i++)
-    {
-        indices.push(indexStart++);
+        Text.fontPropertiesCache[fontStyle] = properties;
     }
 
-    indices.push(indexStart-1);
+    return properties;
 };
 
 /**
- * Builds a polygon to draw
+ * Applies newlines to a string to have it optimally fit into the horizontal
+ * bounds set by the Text object's wordWrapWidth property.
  *
- * @static
+ * @param text {string}
  * @private
- * @method buildPoly
- * @param graphicsData {Graphics} The graphics object containing all the necessary properties
- * @param webGLData {Object}
  */
-PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
+Text.prototype.wordWrap = function (text)
 {
-    var points = graphicsData.points;
-    if(points.length < 6)return;
-
-    // get first and last point.. figure out the middle!
-    var verts = webGLData.points;
-    var indices = webGLData.indices;
-
-    var length = points.length / 2;
-
-    // sort color
-    var color = PIXI.hex2rgb(graphicsData.fillColor);
-    var alpha = graphicsData.fillAlpha;
-    var r = color[0] * alpha;
-    var g = color[1] * alpha;
-    var b = color[2] * alpha;
-
-    var triangles = PIXI.PolyK.Triangulate(points);
-
-    var vertPos = verts.length / 6;
-
-    var i = 0;
-
-    for (i = 0; i < triangles.length; i+=3)
+    // Greedy wrapping algorithm that will wrap words as the line grows longer
+    // than its horizontal bounds.
+    var result = '';
+    var lines = text.split('\n');
+    var wordWrapWidth = this._style.wordWrapWidth;
+    for (var i = 0; i < lines.length; i++)
     {
-        indices.push(triangles[i] + vertPos);
-        indices.push(triangles[i] + vertPos);
-        indices.push(triangles[i+1] + vertPos);
-        indices.push(triangles[i+2] +vertPos);
-        indices.push(triangles[i+2] + vertPos);
+        var spaceLeft = wordWrapWidth;
+        var words = lines[i].split(' ');
+        for (var j = 0; j < words.length; j++)
+        {
+            var wordWidth = this.context.measureText(words[j]).width;
+            var wordWidthWithSpace = wordWidth + this.context.measureText(' ').width;
+            if (j === 0 || wordWidthWithSpace > spaceLeft)
+            {
+                // Skip printing the newline if it's the first word of the line that is
+                // greater than the word wrap width.
+                if (j > 0)
+                {
+                    result += '\n';
+                }
+                result += words[j];
+                spaceLeft = wordWrapWidth - wordWidth;
+            }
+            else
+            {
+                spaceLeft -= wordWidthWithSpace;
+                result += ' ' + words[j];
+            }
+        }
+
+        if (i < lines.length-1)
+        {
+            result += '\n';
+        }
     }
+    return result;
+};
 
-    for (i = 0; i < length; i++)
+/**
+ * Returns the bounds of the Text as a rectangle. The bounds calculation takes the worldTransform into account.
+ *
+ * @param matrix {Matrix} the transformation matrix of the Text
+ * @return {Rectangle} the framing rectangle
+ */
+Text.prototype.getBounds = function (matrix)
+{
+    if (this.dirty)
     {
-        verts.push(points[i * 2], points[i * 2 + 1],
-                   r, g, b, alpha);
+        this.updateText();
     }
+
+    return Sprite.prototype.getBounds.call(this, matrix);
 };
 
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * Destroys this text object.
+ *
+ * @param [destroyBaseTexture=true] {boolean} whether to destroy the base texture as well
  */
+Text.prototype.destroy = function (destroyBaseTexture)
+{
+    // make sure to reset the the context and canvas.. dont want this hanging around in memory!
+    this.context = null;
+    this.canvas = null;
+
+    this._style = null;
+
+    this._texture.destroy(destroyBaseTexture === undefined ? true : destroyBaseTexture);
+};
 
-PIXI.glContexts = []; // this is where we store the webGL contexts for easy access.
+},{"../const":22,"../math":32,"../sprites/Sprite":66,"../textures/Texture":71,"../utils":74}],69:[function(require,module,exports){
+var utils = require('../utils'),
+    CONST = require('../const'),
+    EventEmitter = require('eventemitter3');
 
 /**
- * the WebGLRenderer draws the stage and all its content onto a webGL enabled canvas. This renderer
- * should be used for browsers that support webGL. This Render works by automatically managing webGLBatch's.
- * So no need for Sprite Batch's or Sprite Cloud's
- * Dont forget to add the view to your DOM or you will not see anything :)
- *
- * @class WebGLRenderer
- * @constructor
- * @param width=0 {Number} the width of the canvas view
- * @param height=0 {Number} the height of the canvas view
- * @param view {HTMLCanvasElement} the canvas to use as a view, optional
- * @param transparent=false {Boolean} If the render view is transparent, default false
- * @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment)
+ * A texture stores the information that represents an image. All textures have a base texture.
  *
+ * @class
+ * @memberof PIXI
+ * @param source {Image|Canvas} the source object of the texture.
+ * @param [scaleMode=scaleModes.DEFAULT] {number} See {@link SCALE_MODES} for possible values
+ * @param resolution {number} the resolution of the texture for devices with different pixel ratios
  */
-PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
+function BaseTexture(source, scaleMode, resolution)
 {
-    if(!PIXI.defaultRenderer)PIXI.defaultRenderer = this;
+    EventEmitter.call(this);
 
-    this.type = PIXI.WEBGL_RENDERER;
+    this.uuid = utils.uuid();
 
-    // do a catch.. only 1 webGL renderer..
     /**
-     * Whether the render view is transparent
+     * The Resolution of the texture.
      *
-     * @property transparent
-     * @type Boolean
+     * @member {number}
      */
-    this.transparent = !!transparent;
+    this.resolution = resolution || 1;
 
     /**
-     * The width of the canvas view
+     * The width of the base texture set when the image has loaded
      *
-     * @property width
-     * @type Number
-     * @default 800
+     * @member {number}
+     * @readOnly
      */
-    this.width = width || 800;
+    this.width = 100;
 
     /**
-     * The height of the canvas view
+     * The height of the base texture set when the image has loaded
      *
-     * @property height
-     * @type Number
-     * @default 600
+     * @member {number}
+     * @readOnly
      */
-    this.height = height || 600;
+    this.height = 100;
 
+    // TODO docs
+    // used to store the actual dimensions of the source
     /**
-     * The canvas element that everything is drawn to
+     * Used to store the actual width of the source of this texture
+     *
+     * @member {number}
+     * @readOnly
+     */
+    this.realWidth = 100;
+    /**
+     * Used to store the actual height of the source of this texture
      *
-     * @property view
-     * @type HTMLCanvasElement
+     * @member {number}
+     * @readOnly
      */
-    this.view = view || document.createElement( 'canvas' );
-    this.view.width = this.width;
-    this.view.height = this.height;
-
-    // deal with losing context..
-    this.contextLost = this.handleContextLost.bind(this);
-    this.contextRestoredLost = this.handleContextRestored.bind(this);
-    
-    this.view.addEventListener('webglcontextlost', this.contextLost, false);
-    this.view.addEventListener('webglcontextrestored', this.contextRestoredLost, false);
+    this.realHeight = 100;
 
-    this.options = {
-        alpha: this.transparent,
-        antialias:!!antialias, // SPEED UP??
-        premultipliedAlpha:!!transparent,
-        stencil:true
-    };
+    /**
+     * The scale mode to apply when scaling this texture
+     *
+     * @member {{number}}
+     * @default scaleModes.LINEAR
+     */
+    this.scaleMode = scaleMode || CONST.SCALE_MODES.DEFAULT;
 
-    //try 'experimental-webgl'
-    try {
-        this.gl = this.view.getContext('experimental-webgl',  this.options);
-    } catch (e) {
-        //try 'webgl'
-        try {
-            this.gl = this.view.getContext('webgl',  this.options);
-        } catch (e2) {
-            // fail, not able to get a context
-            throw new Error(' This browser does not support webGL. Try using the canvas renderer' + this);
-        }
-    }
+    /**
+     * Set to true once the base texture has successfully loaded.
+     *
+     * This is never true if the underlying source fails to load or has no texture data.
+     *
+     * @member {boolean}
+     * @readOnly
+     */
+    this.hasLoaded = false;
 
-    var gl = this.gl;
-    this.glContextId = gl.id = PIXI.WebGLRenderer.glContextId ++;
+    /**
+     * Set to true if the source is currently loading.
+     *
+     * If an Image source is loading the 'loaded' or 'error' event will be
+     * dispatched when the operation ends. An underyling source that is
+     * immediately-available bypasses loading entirely.
+     *
+     * @member {boolean}
+     * @readonly
+     */
+    this.isLoading = false;
 
-    PIXI.glContexts[this.glContextId] = gl;
+    /**
+     * The image source that is used to create the texture.
+     *
+     * TODO: Make this a setter that calls loadSource();
+     *
+     * @member {Image|Canvas}
+     * @readonly
+     */
+    this.source = null; // set in loadSource, if at all
 
-    if(!PIXI.blendModesWebGL)
-    {
-        PIXI.blendModesWebGL = [];
+    /**
+     * Controls if RGB channels should be pre-multiplied by Alpha  (WebGL only)
+     *
+     * @member {boolean}
+     * @default true
+     */
+    this.premultipliedAlpha = true;
 
-        PIXI.blendModesWebGL[PIXI.blendModes.NORMAL]        = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
-        PIXI.blendModesWebGL[PIXI.blendModes.ADD]           = [gl.SRC_ALPHA, gl.DST_ALPHA];
-        PIXI.blendModesWebGL[PIXI.blendModes.MULTIPLY]      = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA];
-        PIXI.blendModesWebGL[PIXI.blendModes.SCREEN]        = [gl.SRC_ALPHA, gl.ONE];
-        PIXI.blendModesWebGL[PIXI.blendModes.OVERLAY]       = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
-        PIXI.blendModesWebGL[PIXI.blendModes.DARKEN]        = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
-        PIXI.blendModesWebGL[PIXI.blendModes.LIGHTEN]       = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
-        PIXI.blendModesWebGL[PIXI.blendModes.COLOR_DODGE]   = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
-        PIXI.blendModesWebGL[PIXI.blendModes.COLOR_BURN]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
-        PIXI.blendModesWebGL[PIXI.blendModes.HARD_LIGHT]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
-        PIXI.blendModesWebGL[PIXI.blendModes.SOFT_LIGHT]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
-        PIXI.blendModesWebGL[PIXI.blendModes.DIFFERENCE]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
-        PIXI.blendModesWebGL[PIXI.blendModes.EXCLUSION]     = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
-        PIXI.blendModesWebGL[PIXI.blendModes.HUE]           = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
-        PIXI.blendModesWebGL[PIXI.blendModes.SATURATION]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
-        PIXI.blendModesWebGL[PIXI.blendModes.COLOR]         = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
-        PIXI.blendModesWebGL[PIXI.blendModes.LUMINOSITY]    = [gl.ONE,       gl.ONE_MINUS_SRC_ALPHA];
-    }
+    /**
+     * @member {string}
+     */
+    this.imageUrl = null;
 
+    /**
+     * Wether or not the texture is a power of two, try to use power of two textures as much as you can
+     * @member {boolean}
+     * @private
+     */
+    this.isPowerOfTwo = false;
 
+    // used for webGL
 
+    /**
+     *
+     * Set this to true if a mipmap of this texture needs to be generated. This value needs to be set before the texture is used
+     * Also the texture must be a power of two size to work
+     *
+     * @member {boolean}
+     */
+    this.mipmap = false;
 
-    this.projection = new PIXI.Point();
-    this.projection.x =  this.width/2;
-    this.projection.y =  -this.height/2;
+    /**
+     * A map of renderer IDs to webgl textures
+     *
+     * @member {object<number, WebGLTexture>}
+     * @private
+     */
+    this._glTextures = [];
 
-    this.offset = new PIXI.Point(0, 0);
+    // if no source passed don't try to load
+    if (source)
+    {
+        this.loadSource(source);
+    }
 
-    this.resize(this.width, this.height);
-    this.contextLost = false;
+    /**
+     * Fired when a not-immediately-available source finishes loading.
+     *
+     * @event loaded
+     * @memberof PIXI.BaseTexture#
+     * @protected
+     */
 
-    // time to create the render managers! each one focuses on managine a state in webGL
-    this.shaderManager = new PIXI.WebGLShaderManager(gl);                   // deals with managing the shader programs and their attribs
-    this.spriteBatch = new PIXI.WebGLSpriteBatch(gl);                       // manages the rendering of sprites
-    this.maskManager = new PIXI.WebGLMaskManager(gl);                       // manages the masks using the stencil buffer
-    this.filterManager = new PIXI.WebGLFilterManager(gl, this.transparent); // manages the filters
+    /**
+     * Fired when a not-immediately-available source fails to load.
+     *
+     * @event error
+     * @memberof PIXI.BaseTexture#
+     * @protected
+     */
+}
 
-    this.renderSession = {};
-    this.renderSession.gl = this.gl;
-    this.renderSession.drawCount = 0;
-    this.renderSession.shaderManager = this.shaderManager;
-    this.renderSession.maskManager = this.maskManager;
-    this.renderSession.filterManager = this.filterManager;
-    this.renderSession.spriteBatch = this.spriteBatch;
+BaseTexture.prototype = Object.create(EventEmitter.prototype);
+BaseTexture.prototype.constructor = BaseTexture;
+module.exports = BaseTexture;
 
+/**
+ * Updates the texture on all the webgl renderers, this also assumes the src has changed.
+ *
+ * @fires update
+ */
+BaseTexture.prototype.update = function ()
+{
+    this.realWidth = this.source.naturalWidth || this.source.width;
+    this.realHeight = this.source.naturalHeight || this.source.height;
 
-    gl.useProgram(this.shaderManager.defaultShader.program);
+    this.width = this.realWidth / this.resolution;
+    this.height = this.realHeight / this.resolution;
 
-    gl.disable(gl.DEPTH_TEST);
-    gl.disable(gl.CULL_FACE);
+    this.isPowerOfTwo = utils.isPowerOfTwo(this.realWidth, this.realHeight);
 
-    gl.enable(gl.BLEND);
-    gl.colorMask(true, true, true, this.transparent);
+    this.emit('update', this);
 };
 
-// constructor
-PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer;
-
 /**
- * Renders the stage to its webGL view
+ * Load a source.
  *
- * @method render
- * @param stage {Stage} the Stage element to be rendered
+ * If the source is not-immediately-available, such as an image that needs to be
+ * downloaded, then the 'loaded' or 'error' event will be dispatched in the future
+ * and `hasLoaded` will remain false after this call.
+ *
+ * The logic state after calling `loadSource` directly or indirectly (eg. `fromImage`, `new BaseTexture`) is:
+ *
+ *     if (texture.hasLoaded)
+ {
+ *        // texture ready for use
+ *     } else if (texture.isLoading)
+ {
+ *        // listen to 'loaded' and/or 'error' events on texture
+ *     } else {
+ *        // not loading, not going to load UNLESS the source is reloaded
+ *        // (it may still make sense to listen to the events)
+ *     }
+ *
+ * @protected
+ * @param source {Image|Canvas} the source object of the texture.
  */
-PIXI.WebGLRenderer.prototype.render = function(stage)
+BaseTexture.prototype.loadSource = function (source)
 {
-    if(this.contextLost)return;
-
+    var wasLoading = this.isLoading;
+    this.hasLoaded = false;
+    this.isLoading = false;
 
-    // if rendering a new stage clear the batches..
-    if(this.__stage !== stage)
+    if (wasLoading && this.source)
     {
-        if(stage.interactive)stage.interactionManager.removeEvents();
-
-        // TODO make this work
-        // dont think this is needed any more?
-        this.__stage = stage;
+        this.source.onload = null;
+        this.source.onerror = null;
     }
 
-    // update any textures this includes uvs and uploading them to the gpu
-    PIXI.WebGLRenderer.updateTextures();
-
-    // update the scene graph
-    stage.updateTransform();
-
-    var gl = this.gl;
-
-    // -- Does this need to be set every frame? -- //
-    //gl.colorMask(true, true, true, this.transparent);
-    gl.viewport(0, 0, this.width, this.height);
-
-    // make sure we are bound to the main frame buffer
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    this.source = source;
 
-    if(this.transparent)
+    // Apply source if loaded. Otherwise setup appropriate loading monitors.
+    if ((this.source.complete || this.source.getContext) && this.source.width && this.source.height)
     {
-        gl.clearColor(0, 0, 0, 0);
+        this._sourceLoaded();
     }
-    else
+    else if (!source.getContext)
     {
-        gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], 1);
-    }
 
+        // Image fail / not ready
+        this.isLoading = true;
+
+        var scope = this;
+
+        source.onload = function ()
+        {
+            source.onload = null;
+            source.onerror = null;
+
+            if (!scope.isLoading)
+            {
+                return;
+            }
 
-    gl.clear(gl.COLOR_BUFFER_BIT);
+            scope.isLoading = false;
+            scope._sourceLoaded();
 
-    this.renderDisplayObject( stage, this.projection );
+            scope.emit('loaded', scope);
+        };
 
-    // interaction
-    if(stage.interactive)
-    {
-        //need to add some events!
-        if(!stage._interactiveEventsAdded)
-        {
-            stage._interactiveEventsAdded = true;
-            stage.interactionManager.setTarget(this);
-        }
-    }
-    else
-    {
-        if(stage._interactiveEventsAdded)
+        source.onerror = function ()
         {
-            stage._interactiveEventsAdded = false;
-            stage.interactionManager.setTarget(this);
-        }
-    }
+            source.onload = null;
+            source.onerror = null;
 
-    /*
-    //can simulate context loss in Chrome like so:
-     this.view.onmousedown = function(ev) {
-     console.dir(this.gl.getSupportedExtensions());
-        var ext = (
-            gl.getExtension("WEBGL_scompressed_texture_s3tc")
-       // gl.getExtension("WEBGL_compressed_texture_s3tc") ||
-       // gl.getExtension("MOZ_WEBGL_compressed_texture_s3tc") ||
-       // gl.getExtension("WEBKIT_WEBGL_compressed_texture_s3tc")
-     );
-     console.dir(ext);
-     var loseCtx = this.gl.getExtension("WEBGL_lose_context");
-      console.log("killing context");
-      loseCtx.loseContext();
-     setTimeout(function() {
-          console.log("restoring context...");
-          loseCtx.restoreContext();
-      }.bind(this), 1000);
-     }.bind(this);
-     */
-};
-
-/**
- * Renders a display Object
- *
- * @method renderDIsplayObject
- * @param displayObject {DisplayObject} The DisplayObject to render
- * @param projection {Point} The projection
- * @param buffer {Array} a standard WebGL buffer 
- */
-PIXI.WebGLRenderer.prototype.renderDisplayObject = function(displayObject, projection, buffer)
-{
-    // reset the render session data..
-    this.renderSession.drawCount = 0;
-    this.renderSession.currentBlendMode = 9999;
+            if (!scope.isLoading)
+            {
+                return;
+            }
 
-    this.renderSession.projection = projection;
-    this.renderSession.offset = this.offset;
+            scope.isLoading = false;
+            scope.emit('error', scope);
+        };
 
-    // start the sprite batch
-    this.spriteBatch.begin(this.renderSession);
+        // Per http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element
+        //   "The value of `complete` can thus change while a script is executing."
+        // So complete needs to be re-checked after the callbacks have been added..
+        // NOTE: complete will be true if the image has no src so best to check if the src is set.
+        if (source.complete && source.src)
+        {
+            this.isLoading = false;
 
-    // start the filter manager
-    this.filterManager.begin(this.renderSession, buffer);
+            // ..and if we're complete now, no need for callbacks
+            source.onload = null;
+            source.onerror = null;
 
-    // render the scene!
-    displayObject._renderWebGL(this.renderSession);
+            if (source.width && source.height)
+            {
+                this._sourceLoaded();
 
-    // finish the sprite batch
-    this.spriteBatch.end();
+                // If any previous subscribers possible
+                if (wasLoading)
+                {
+                    this.emit('loaded', this);
+                }
+            }
+            else
+            {
+                // If any previous subscribers possible
+                if (wasLoading)
+                {
+                    this.emit('error', this);
+                }
+            }
+        }
+    }
 };
 
 /**
- * Updates the textures loaded into this webgl renderer
+ * Used internally to update the width, height, and some other tracking vars once
+ * a source has successfully loaded.
  *
- * @static
- * @method updateTextures
  * @private
  */
-PIXI.WebGLRenderer.updateTextures = function()
+BaseTexture.prototype._sourceLoaded = function ()
 {
-    var i = 0;
-
-    //TODO break this out into a texture manager...
-    //for (i = 0; i < PIXI.texturesToUpdate.length; i++)
-    //    PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]);
-
-
-    for (i=0; i < PIXI.Texture.frameUpdates.length; i++)
-        PIXI.WebGLRenderer.updateTextureFrame(PIXI.Texture.frameUpdates[i]);
-
-    for (i = 0; i < PIXI.texturesToDestroy.length; i++)
-        PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]);
-
-    PIXI.texturesToUpdate.length = 0;
-    PIXI.texturesToDestroy.length = 0;
-    PIXI.Texture.frameUpdates.length = 0;
+    this.hasLoaded = true;
+    this.update();
 };
 
 /**
- * Destroys a loaded webgl texture
+ * Destroys this base texture
  *
- * @method destroyTexture
- * @param texture {Texture} The texture to update
- * @private
  */
-PIXI.WebGLRenderer.destroyTexture = function(texture)
+BaseTexture.prototype.destroy = function ()
 {
-    //TODO break this out into a texture manager...
-
-    for (var i = texture._glTextures.length - 1; i >= 0; i--)
+    if (this.imageUrl)
     {
-        var glTexture = texture._glTextures[i];
-        var gl = PIXI.glContexts[i];
+        delete utils.BaseTextureCache[this.imageUrl];
+        delete utils.TextureCache[this.imageUrl];
+
+        this.imageUrl = null;
 
-        if(gl && glTexture)
+        if (!navigator.isCocoonJS)
         {
-            gl.deleteTexture(glTexture);
+            this.source.src = '';
         }
     }
+    else if (this.source && this.source._pixiId)
+    {
+        delete utils.BaseTextureCache[this.source._pixiId];
+    }
+
+    this.source = null;
 
-    texture._glTextures.length = 0;
+    this.dispose();
 };
 
 /**
+ * Frees the texture from WebGL memory without destroying this texture object.
+ * This means you can still use the texture later which will upload it to GPU
+ * memory again.
  *
- * @method updateTextureFrame
- * @param texture {Texture} The texture to update the frame from
- * @private
  */
-PIXI.WebGLRenderer.updateTextureFrame = function(texture)
+BaseTexture.prototype.dispose = function ()
 {
-    texture.updateFrame = false;
+    this.emit('dispose', this);
 
-    // now set the uvs. Figured that the uv data sits with a texture rather than a sprite.
-    // so uv data is stored on the texture itself
-    texture._updateWebGLuvs();
+    this._glTextures.length = 0;
 };
 
 /**
- * resizes the webGL view to the specified width and height
+ * Changes the source image of the texture.
+ * The original source must be an Image element.
  *
- * @method resize
- * @param width {Number} the new width of the webGL view
- * @param height {Number} the new height of the webGL view
+ * @param newSrc {string} the path of the image
  */
-PIXI.WebGLRenderer.prototype.resize = function(width, height)
+BaseTexture.prototype.updateSourceImage = function (newSrc)
 {
-    this.width = width;
-    this.height = height;
-
-    this.view.width = width;
-    this.view.height = height;
-
-    this.gl.viewport(0, 0, this.width, this.height);
+    this.source.src = newSrc;
 
-    this.projection.x =  this.width/2;
-    this.projection.y =  -this.height/2;
+    this.loadSource(this.source);
 };
 
 /**
- * Creates a WebGL texture
+ * Helper function that creates a base texture from the given image url.
+ * If the image is not in the base texture cache it will be created and loaded.
  *
- * @method createWebGLTexture
- * @param texture {Texture} the texture to render
- * @param gl {webglContext} the WebGL context
  * @static
+ * @param imageUrl {string} The image url of the texture
+ * @param [crossorigin=(auto)] {boolean} Should use anonymous CORS? Defaults to true if the URL is not a data-URI.
+ * @param [scaleMode=scaleModes.DEFAULT] {number} See {@link SCALE_MODES} for possible values
+ * @return BaseTexture
  */
-PIXI.createWebGLTexture = function(texture, gl)
+BaseTexture.fromImage = function (imageUrl, crossorigin, scaleMode)
 {
+    var baseTexture = utils.BaseTextureCache[imageUrl];
 
-
-    if(texture.hasLoaded)
+    if (crossorigin === undefined && imageUrl.indexOf('data:') !== 0)
     {
-        texture._glTextures[gl.id] = gl.createTexture();
+        crossorigin = true;
+    }
 
-        gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);
-        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+    if (!baseTexture)
+    {
+        // new Image() breaks tex loading in some versions of Chrome.
+        // See https://code.google.com/p/chromium/issues/detail?id=238071
+        var image = new Image();//document.createElement('img');
+        if (crossorigin)
+        {
+            image.crossOrigin = '';
+        }
 
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST);
+        baseTexture = new BaseTexture(image, scaleMode);
+        baseTexture.imageUrl = imageUrl;
 
-        // reguler...
+        image.src = imageUrl;
 
-        if(!texture._powerOf2)
-        {
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        }
-        else
-        {
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
-        }
+        utils.BaseTextureCache[imageUrl] = baseTexture;
 
-        gl.bindTexture(gl.TEXTURE_2D, null);
+        // if there is an @2x at the end of the url we are going to assume its a highres image
+        baseTexture.resolution = utils.getResolutionOfUrl(imageUrl);
     }
 
-    return  texture._glTextures[gl.id];
+    return baseTexture;
 };
 
 /**
- * Updates a WebGL texture
+ * Helper function that creates a base texture from the given canvas element.
  *
- * @method updateWebGLTexture
- * @param texture {Texture} the texture to update
- * @param gl {webglContext} the WebGL context
- * @private
+ * @static
+ * @param canvas {Canvas} The canvas element source of the texture
+ * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values
+ * @return BaseTexture
  */
-PIXI.updateWebGLTexture = function(texture, gl)
+BaseTexture.fromCanvas = function (canvas, scaleMode)
 {
-    if( texture._glTextures[gl.id] )
+    if (!canvas._pixiId)
     {
-        gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);
-        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
-
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST);
-
-        // reguler...
+        canvas._pixiId = 'canvas_' + utils.uuid();
+    }
 
-        if(!texture._powerOf2)
-        {
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        }
-        else
-        {
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
-        }
+    var baseTexture = utils.BaseTextureCache[canvas._pixiId];
 
-        gl.bindTexture(gl.TEXTURE_2D, null);
+    if (!baseTexture)
+    {
+        baseTexture = new BaseTexture(canvas, scaleMode);
+        utils.BaseTextureCache[canvas._pixiId] = baseTexture;
     }
-    
-};
 
-/**
- * Handles a lost webgl context
- *
- * @method handleContextLost
- * @param event {Event}
- * @private
- */
-PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
-{
-    event.preventDefault();
-    this.contextLost = true;
+    return baseTexture;
 };
 
+},{"../const":22,"../utils":74,"eventemitter3":11}],70:[function(require,module,exports){
+var BaseTexture = require('./BaseTexture'),
+    Texture = require('./Texture'),
+    RenderTarget = require('../renderers/webgl/utils/RenderTarget'),
+    FilterManager = require('../renderers/webgl/managers/FilterManager'),
+    CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'),
+    math = require('../math'),
+    CONST = require('../const'),
+    tempMatrix = new math.Matrix();
+
 /**
- * Handles a restored webgl context
+ * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it.
  *
- * @method handleContextRestored
- * @param event {Event}
- * @private
- */
-PIXI.WebGLRenderer.prototype.handleContextRestored = function()
-{
-
-    //try 'experimental-webgl'
-    try {
-        this.gl = this.view.getContext('experimental-webgl',  this.options);
-    } catch (e) {
-        //try 'webgl'
-        try {
-            this.gl = this.view.getContext('webgl',  this.options);
-        } catch (e2) {
-            // fail, not able to get a context
-            throw new Error(' This browser does not support webGL. Try using the canvas renderer' + this);
-        }
+ * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded
+ * otherwise black rectangles will be drawn instead.
+ *
+ * A RenderTexture takes a snapshot of any Display Object given to its render method. The position
+ * and rotation of the given Display Objects is ignored. For example:
+ *
+ * ```js
+ * var renderTexture = new PIXI.RenderTexture(800, 600);
+ * var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
+ *
+ * sprite.position.x = 800/2;
+ * sprite.position.y = 600/2;
+ * sprite.anchor.x = 0.5;
+ * sprite.anchor.y = 0.5;
+ *
+ * renderTexture.render(sprite);
+ * ```
+ *
+ * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual
+ * position a Container should be used:
+ *
+ * ```js
+ * var doc = new Container();
+ *
+ * doc.addChild(sprite);
+ *
+ * renderTexture.render(doc);  // Renders to center of renderTexture
+ * ```
+ *
+ * @class
+ * @extends PIXI.Texture
+ * @memberof PIXI
+ * @param renderer {CanvasRenderer|WebGLRenderer} The renderer used for this RenderTexture
+ * @param [width=100] {number} The width of the render texture
+ * @param [height=100] {number} The height of the render texture
+ * @param [scaleMode] {number} See {@link SCALE_MODES} for possible values
+ * @param [resolution=1] {number} The resolution of the texture being generated
+ */
+function RenderTexture(renderer, width, height, scaleMode, resolution)
+{
+    if (!renderer)
+    {
+        throw new Error('Unable to create RenderTexture, you must pass a renderer into the constructor.');
     }
 
-    var gl = this.gl;
-    gl.id = PIXI.WebGLRenderer.glContextId ++;
+    width = width || 100;
+    height = height || 100;
+    resolution = resolution || CONST.RESOLUTION;
 
+    /**
+     * The base texture object that this texture uses
+     *
+     * @member {BaseTexture}
+     */
+    var baseTexture = new BaseTexture();
+    baseTexture.width = width;
+    baseTexture.height = height;
+    baseTexture.resolution = resolution;
+    baseTexture.scaleMode = scaleMode || CONST.SCALE_MODES.DEFAULT;
+    baseTexture.hasLoaded = true;
 
 
-    // need to set the context...
-    this.shaderManager.setContext(gl);
-    this.spriteBatch.setContext(gl);
-    this.maskManager.setContext(gl);
-    this.filterManager.setContext(gl);
+    Texture.call(this,
+        baseTexture,
+        new math.Rectangle(0, 0, width, height)
+    );
 
 
-    this.renderSession.gl = this.gl;
+    /**
+     * The with of the render texture
+     *
+     * @member {number}
+     */
+    this.width = width;
 
-    gl.disable(gl.DEPTH_TEST);
-    gl.disable(gl.CULL_FACE);
+    /**
+     * The height of the render texture
+     *
+     * @member {number}
+     */
+    this.height = height;
 
-    gl.enable(gl.BLEND);
-    gl.colorMask(true, true, true, this.transparent);
+    /**
+     * The Resolution of the texture.
+     *
+     * @member {number}
+     */
+    this.resolution = resolution;
 
-    this.gl.viewport(0, 0, this.width, this.height);
+    /**
+     * The framing rectangle of the render texture
+     *
+     * @member {Rectangle}
+     */
+    //this._frame = new math.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution);
 
-    for(var key in PIXI.TextureCache)
-    {
-        var texture = PIXI.TextureCache[key].baseTexture;
-        texture._glTextures = [];
-    }
+    /**
+     * This is the area of the BaseTexture image to actually copy to the Canvas / WebGL when rendering,
+     * irrespective of the actual frame size or placement (which can be influenced by trimmed texture atlases)
+     *
+     * @member {Rectangle}
+     */
+    //this.crop = new math.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution);
 
     /**
-     * Whether the context was lost 
-     * @property contextLost
-     * @type Boolean
+     * Draw/render the given DisplayObject onto the texture.
+     *
+     * The displayObject and descendents are transformed during this operation.
+     * If `updateTransform` is true then the transformations will be restored before the
+     * method returns. Otherwise it is up to the calling code to correctly use or reset
+     * the transformed display objects.
+     *
+     * The display object is always rendered with a worldAlpha value of 1.
+     *
+     * @method
+     * @param displayObject {DisplayObject} The display object to render this texture on
+     * @param [matrix] {Matrix} Optional matrix to apply to the display object before rendering.
+     * @param [clear=false] {boolean} If true the texture will be cleared before the displayObject is drawn
+     * @param [updateTransform=true] {boolean} If true the displayObject's worldTransform/worldAlpha and all children
+     *  transformations will be restored. Not restoring this information will be a little faster.
      */
-    this.contextLost = false;
+    this.render = null;
 
-};
+    /**
+     * The renderer this RenderTexture uses. A RenderTexture can only belong to one renderer at the moment if its webGL.
+     *
+     * @member {CanvasRenderer|WebGLRenderer}
+     */
+    this.renderer = renderer;
 
-/**
- * Removes everything from the renderer (event listeners, spritebatch, etc...)
- *
- * @method destroy
- */
-PIXI.WebGLRenderer.prototype.destroy = function()
-{
+    if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL)
+    {
+        var gl = this.renderer.gl;
 
-    // deal with losing context..
-    
-    // remove listeners
-    this.view.removeEventListener('webglcontextlost', this.contextLost);
-    this.view.removeEventListener('webglcontextrestored', this.contextRestoredLost);
+        this.textureBuffer = new RenderTarget(gl, this.width, this.height, baseTexture.scaleMode, this.resolution);//, this.baseTexture.scaleMode);
+        this.baseTexture._glTextures[gl.id] =  this.textureBuffer.texture;
 
-    PIXI.glContexts[this.glContextId] = null;
+        //TODO refactor filter manager.. as really its no longer a manager if we use it here..
+        this.filterManager = new FilterManager(this.renderer);
+        this.filterManager.onContextChange();
+        this.filterManager.resize(width, height);
+        this.render = this.renderWebGL;
 
-    this.projection = null;
-    this.offset = null;
+        // the creation of a filter manager unbinds the buffers..
+        this.renderer.currentRenderer.start();
+        this.renderer.currentRenderTarget.activate();
+    }
+    else
+    {
 
-    // time to create the render managers! each one focuses on managine a state in webGL
-    this.shaderManager.destroy();
-    this.spriteBatch.destroy();
-    this.maskManager.destroy();
-    this.filterManager.destroy();
+        this.render = this.renderCanvas;
+        this.textureBuffer = new CanvasBuffer(this.width* this.resolution, this.height* this.resolution);
+        this.baseTexture.source = this.textureBuffer.canvas;
+    }
 
-    this.shaderManager = null;
-    this.spriteBatch = null;
-    this.maskManager = null;
-    this.filterManager = null;
-    
-    this.gl = null;
-    //
-    this.renderSession = null;
-};
+    /**
+     * @member {boolean}
+     */
+    this.valid = true;
 
+    this._updateUvs();
+}
 
-PIXI.WebGLRenderer.glContextId = 0;
+RenderTexture.prototype = Object.create(Texture.prototype);
+RenderTexture.prototype.constructor = RenderTexture;
+module.exports = RenderTexture;
 
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * Resizes the RenderTexture.
+ *
+ * @param width {number} The width to resize to.
+ * @param height {number} The height to resize to.
+ * @param updateBase {boolean} Should the baseTexture.width and height values be resized as well?
  */
- 
-
-/**
-* @class WebGLMaskManager
-* @constructor
-* @param gl {WebGLContext} the current WebGL drawing context
-* @private
-*/
-PIXI.WebGLMaskManager = function(gl)
+RenderTexture.prototype.resize = function (width, height, updateBase)
 {
-    this.maskStack = [];
-    this.maskPosition = 0;
-
-    this.setContext(gl);
-};
+    if (width === this.width && height === this.height)
+    {
+        return;
+    }
 
-/**
-* Sets the drawing context to the one given in parameter
-* @method setContext 
-* @param gl {WebGLContext} the current WebGL drawing context
-*/
-PIXI.WebGLMaskManager.prototype.setContext = function(gl)
-{
-    this.gl = gl;
-};
+    this.valid = (width > 0 && height > 0);
 
-/**
-* Applies the Mask and adds it to the current filter stack
-* @method pushMask
-* @param maskData {Array}
-* @param renderSession {RenderSession}
-*/
-PIXI.WebGLMaskManager.prototype.pushMask = function(maskData, renderSession)
-{
-    var gl = this.gl;
+    this.width = this._frame.width = this.crop.width = width;
+    this.height =  this._frame.height = this.crop.height = height;
 
-    if(this.maskStack.length === 0)
+    if (updateBase)
     {
-        gl.enable(gl.STENCIL_TEST);
-        gl.stencilFunc(gl.ALWAYS,1,1);
+        this.baseTexture.width = this.width;
+        this.baseTexture.height = this.height;
     }
-    
-  //  maskData.visible = false;
 
-    this.maskStack.push(maskData);
-    
-    gl.colorMask(false, false, false, true);
-    gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR);
+    if (!this.valid)
+    {
+        return;
+    }
 
-    PIXI.WebGLGraphics.renderGraphics(maskData, renderSession);
+    this.textureBuffer.resize(this.width, this.height);
 
-    gl.colorMask(true, true, true, true);
-    gl.stencilFunc(gl.NOTEQUAL,0, this.maskStack.length);
-    gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
+    if(this.filterManager)
+    {
+        this.filterManager.resize(this.width, this.height);
+    }
 };
 
 /**
-* Removes the last filter from the filter stack and doesn't return it
-* @method popMask
-*
-* @param renderSession {RenderSession} an object containing all the useful parameters
-*/
-PIXI.WebGLMaskManager.prototype.popMask = function(renderSession)
+ * Clears the RenderTexture.
+ *
+ */
+RenderTexture.prototype.clear = function ()
 {
-    var gl = this.gl;
-
-    var maskData = this.maskStack.pop();
-
-    if(maskData)
+    if (!this.valid)
     {
-        gl.colorMask(false, false, false, false);
-
-        //gl.stencilFunc(gl.ALWAYS,1,1);
-        gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR);
-
-        PIXI.WebGLGraphics.renderGraphics(maskData, renderSession);
+        return;
+    }
 
-        gl.colorMask(true, true, true, true);
-        gl.stencilFunc(gl.NOTEQUAL,0,this.maskStack.length);
-        gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
+    if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL)
+    {
+        this.renderer.gl.bindFramebuffer(this.renderer.gl.FRAMEBUFFER, this.textureBuffer.frameBuffer);
     }
-   
-    if(this.maskStack.length === 0)gl.disable(gl.STENCIL_TEST);
-};
 
-/**
-* Destroys the mask stack
-* @method destroy
-*/
-PIXI.WebGLMaskManager.prototype.destroy = function()
-{
-    this.maskStack = null;
-    this.gl = null;
+    this.textureBuffer.clear();
 };
+
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * Internal method assigned to the `render` property if using a CanvasRenderer.
+ *
+ * @private
+ * @param displayObject {DisplayObject} The display object to render this texture on
+ * @param [matrix] {Matrix} Optional matrix to apply to the display object before rendering.
+ * @param [clear=false] {boolean} If true the texture will be cleared before the displayObject is drawn
+ * @param [updateTransform=true] {boolean} If true the displayObject's worldTransform/worldAlpha and all children
+ *  transformations will be restored. Not restoring this information will be a little faster.
  */
+RenderTexture.prototype.renderWebGL = function (displayObject, matrix, clear, updateTransform)
+{
+    if (!this.valid)
+    {
+        return;
+    }
+
+
+    updateTransform = (updateTransform !== undefined) ? updateTransform : true;//!updateTransform;
+
+    this.textureBuffer.transform = matrix;
 
-/**
-* @class WebGLShaderManager
-* @constructor
-* @param gl {WebGLContext} the current WebGL drawing context
-* @private
-*/
-PIXI.WebGLShaderManager = function(gl)
-{
+    //TODO not a fan that this is here... it will move!
+    this.textureBuffer.activate();
+    
+    // setWorld Alpha to ensure that the object is renderer at full opacity
+    displayObject.worldAlpha = displayObject.alpha;
 
-    this.maxAttibs = 10;
-    this.attribState = [];
-    this.tempAttribState = [];
+    if (updateTransform)
+    {
 
-    for (var i = 0; i < this.maxAttibs; i++) {
-        this.attribState[i] = false;
+        // reset the matrix of the displatyObject..
+        displayObject.worldTransform.identity();
+
+        displayObject.currentBounds = null;
+
+        // Time to update all the children of the displayObject with the new matrix..
+        var children = displayObject.children;
+        var i, j;
+
+        for (i = 0, j = children.length; i < j; ++i)
+        {
+            children[i].updateTransform();
+        }
     }
 
-    this.setContext(gl);
-    // the final one is used for the rendering strips
-    //this.stripShader = new PIXI.StripShader(gl);
+    //TODO rename textureBuffer to renderTarget..
+    var temp =  this.renderer.filterManager;
+
+    this.renderer.filterManager = this.filterManager;
+    this.renderer.renderDisplayObject(displayObject, this.textureBuffer, clear);
+
+    this.renderer.filterManager = temp;
 };
 
 
 /**
-* Initialises the context and the properties
-* @method setContext 
-* @param gl {WebGLContext} the current WebGL drawing context
-* @param transparent {Boolean} Whether or not the drawing context should be transparent
-*/
-PIXI.WebGLShaderManager.prototype.setContext = function(gl)
+ * Internal method assigned to the `render` property if using a CanvasRenderer.
+ *
+ * @private
+ * @param displayObject {DisplayObject} The display object to render this texture on
+ * @param [matrix] {Matrix} Optional matrix to apply to the display object before rendering.
+ * @param [clear] {boolean} If true the texture will be cleared before the displayObject is drawn
+ */
+RenderTexture.prototype.renderCanvas = function (displayObject, matrix, clear, updateTransform)
 {
-    this.gl = gl;
-    
-    // the next one is used for rendering primatives
-    this.primitiveShader = new PIXI.PrimitiveShader(gl);
+    if (!this.valid)
+    {
+        return;
+    }
 
-    // this shader is used for the default sprite rendering
-    this.defaultShader = new PIXI.PixiShader(gl);
+    updateTransform = !!updateTransform;
+    var cachedWt = displayObject.worldTransform;
 
-    // this shader is used for the fast sprite rendering
-    this.fastShader = new PIXI.PixiFastShader(gl);
+    var wt = tempMatrix;
 
+    wt.identity();
 
-    this.activateShader(this.defaultShader);
-};
+    if (matrix)
+    {
+        wt.append(matrix);
+    }
 
+    displayObject.worldTransform = wt;
 
-/**
-* Takes the attributes given in parameters 
-* @method setAttribs
-* @param attribs {Array} attribs 
-*/
-PIXI.WebGLShaderManager.prototype.setAttribs = function(attribs)
-{
-    // reset temp state
+    // setWorld Alpha to ensure that the object is renderer at full opacity
+    displayObject.worldAlpha = 1;
 
-    var i;
+    // Time to update all the children of the displayObject with the new matrix..
+    var children = displayObject.children;
+    var i, j;
 
-    for (i = 0; i < this.tempAttribState.length; i++)
+    for (i = 0, j = children.length; i < j; ++i)
     {
-        this.tempAttribState[i] = false;
+        children[i].updateTransform();
     }
 
-    // set the new attribs
-    for (i = 0; i < attribs.length; i++)
+    if (clear)
     {
-        var attribId = attribs[i];
-        this.tempAttribState[attribId] = true;
+        this.textureBuffer.clear();
     }
 
-    var gl = this.gl;
+    displayObject.worldTransform = cachedWt;
 
-    for (i = 0; i < this.attribState.length; i++)
-    {
+//    this.textureBuffer.
+    var context = this.textureBuffer.context;
 
-        if(this.attribState[i] !== this.tempAttribState[i])
-        {
-            this.attribState[i] = this.tempAttribState[i];
+    var realResolution = this.renderer.resolution;
+
+    this.renderer.resolution = this.resolution;
+
+    this.renderer.renderDisplayObject(displayObject, context);
+
+    this.renderer.resolution = realResolution;
+ //   context.setTransform(1, 0, 0, 1, 0, 0);
+   // context.fillStyle ="#FF0000"
+//    context.fillRect(0, 0, 800, 600);
 
-            if(this.tempAttribState[i])
-            {
-                gl.enableVertexAttribArray(i);
-            }
-            else
-            {
-                gl.disableVertexAttribArray(i);
-            }
-        }
-    }
 };
 
 /**
-* Sets-up the given shader 
-*
-* @method activateShader
-* @param shader {Object} the shader that is going to be activated
-*/
-PIXI.WebGLShaderManager.prototype.activateShader = function(shader)
+ * Destroys this texture
+ *
+ * @param destroyBase {boolean} Whether to destroy the base texture as well
+ */
+RenderTexture.prototype.destroy = function ()
 {
-    //if(this.currentShader == shader)return;
+    Texture.prototype.destroy.call(this, true);
 
-    this.currentShader = shader;
+    this.textureBuffer.destroy();
 
-    this.gl.useProgram(shader.program);
-    this.setAttribs(shader.attributes);
-  
+    // destroy the filtermanager..
+    if(this.filterManager)
+    {
+        this.filterManager.destroy();
+    }
+
+    this.renderer = null;
 };
 
 /**
-* Triggers the primitive shader
-* @method activatePrimitiveShader
-*/
-PIXI.WebGLShaderManager.prototype.activatePrimitiveShader = function()
+ * Will return a HTML Image of the texture
+ *
+ * @return {Image}
+ */
+RenderTexture.prototype.getImage = function ()
 {
-    var gl = this.gl;
-
-    gl.useProgram(this.primitiveShader.program);
+    var image = new Image();
+    image.src = this.getBase64();
+    return image;
+};
 
-    this.setAttribs(this.primitiveShader.attributes);
-    
+/**
+ * Will return a a base64 encoded string of this texture. It works by calling RenderTexture.getCanvas and then running toDataURL on that.
+ *
+ * @return {string} A base64 encoded string of the texture.
+ */
+RenderTexture.prototype.getBase64 = function ()
+{
+    return this.getCanvas().toDataURL();
 };
 
 /**
-* Disable the primitive shader
-* @method deactivatePrimitiveShader
-*/
-PIXI.WebGLShaderManager.prototype.deactivatePrimitiveShader = function()
+ * Creates a Canvas element, renders this RenderTexture to it and then returns it.
+ *
+ * @return {HTMLCanvasElement} A Canvas element with the texture rendered on.
+ */
+RenderTexture.prototype.getCanvas = function ()
 {
-    var gl = this.gl;
+    if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL)
+    {
+        var gl = this.renderer.gl;
+        var width = this.textureBuffer.size.width;
+        var height = this.textureBuffer.size.height;
+
+        var webGLPixels = new Uint8Array(4 * width * height);
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer);
+        gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 
-    gl.useProgram(this.defaultShader.program);
+        var tempCanvas = new CanvasBuffer(width, height);
+        var canvasData = tempCanvas.context.getImageData(0, 0, width, height);
+        canvasData.data.set(webGLPixels);
 
-    this.setAttribs(this.defaultShader.attributes);
+        tempCanvas.context.putImageData(canvasData, 0, 0);
+
+        return tempCanvas.canvas;
+    }
+    else
+    {
+        return this.textureBuffer.canvas;
+    }
 };
 
 /**
-* Destroys
-* @method destroy
-*/
-PIXI.WebGLShaderManager.prototype.destroy = function()
+ * Will return a one-dimensional array containing the pixel data of the entire texture in RGBA order, with integer values between 0 and 255 (included).
+ *
+ * @return {Uint8ClampedArray}
+ */
+RenderTexture.prototype.getPixels = function ()
 {
-    this.attribState = null;
+    var width, height;
 
-    this.tempAttribState = null;
+    if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL)
+    {
+        var gl = this.renderer.gl;
+        width = this.textureBuffer.size.width;
+        height = this.textureBuffer.size.height;
 
-    this.primitiveShader.destroy();
+        var webGLPixels = new Uint8Array(4 * width * height);
 
-    this.defaultShader.destroy();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer);
+        gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 
-    this.fastShader.destroy();
+        return webGLPixels;
+    }
+    else
+    {
+        width = this.textureBuffer.canvas.width;
+        height = this.textureBuffer.canvas.height;
 
-    this.gl = null;
+        return this.textureBuffer.canvas.getContext('2d').getImageData(0, 0, width, height).data;
+    }
 };
 
-
 /**
- * @author Mat Groves
- * 
- * Big thanks to the very clever Matt DesLauriers <mattdesl> https://github.com/mattdesl/
- * for creating the original pixi version!
+ * Will return a one-dimensional array containing the pixel data of a pixel within the texture in RGBA order, with integer values between 0 and 255 (included).
  *
- * Heavily inspired by LibGDX's WebGLSpriteBatch:
- * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java
+ * @param x {number} The x coordinate of the pixel to retrieve.
+ * @param y {number} The y coordinate of the pixel to retrieve.
+ * @return {Uint8ClampedArray}
  */
+RenderTexture.prototype.getPixel = function (x, y)
+{
+    if (this.renderer.type === CONST.RENDERER_TYPE.WEBGL)
+    {
+        var gl = this.renderer.gl;
+
+        var webGLPixels = new Uint8Array(4);
+
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer);
+        gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, webGLPixels);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+        return webGLPixels;
+    }
+    else
+    {
+        return this.textureBuffer.canvas.getContext('2d').getImageData(x, y, 1, 1).data;
+    }
+};
+
+},{"../const":22,"../math":32,"../renderers/canvas/utils/CanvasBuffer":44,"../renderers/webgl/managers/FilterManager":53,"../renderers/webgl/utils/RenderTarget":64,"./BaseTexture":69,"./Texture":71}],71:[function(require,module,exports){
+var BaseTexture = require('./BaseTexture'),
+    VideoBaseTexture = require('./VideoBaseTexture'),
+    TextureUvs = require('./TextureUvs'),
+    EventEmitter = require('eventemitter3'),
+    math = require('../math'),
+    utils = require('../utils');
 
- /**
+/**
+ * A texture stores the information that represents an image or part of an image. It cannot be added
+ * to the display list directly. Instead use it as the texture for a Sprite. If no frame is provided then the whole image is used.
  *
- * @class WebGLSpriteBatch
- * @private
- * @constructor
- * @param gl {WebGLContext} the current WebGL drawing context
+ * You can directly create a texture from an image and then reuse it multiple times like this :
  *
+ * ```js
+ * var texture = PIXI.Texture.fromImage('assets/image.png');
+ * var sprite1 = new PIXI.Sprite(texture);
+ * var sprite2 = new PIXI.Sprite(texture);
+ * ```
+ *
+ * @class
+ * @memberof PIXI
+ * @param baseTexture {BaseTexture} The base texture source to create the texture from
+ * @param [frame] {Rectangle} The rectangle frame of the texture to show
+ * @param [crop] {Rectangle} The area of original texture
+ * @param [trim] {Rectangle} Trimmed texture rectangle
+ * @param [rotate] {boolean} indicates whether the texture should be rotated by 90 degrees ( used by texture packer )
  */
-PIXI.WebGLSpriteBatch = function(gl)
+function Texture(baseTexture, frame, crop, trim, rotate)
 {
+    EventEmitter.call(this);
 
     /**
-     * 
+     * Does this Texture have any frame data assigned to it?
      *
-     * @property vertSize
-     * @type Number
+     * @member {boolean}
      */
-    this.vertSize = 6;
+    this.noFrame = false;
 
-    /**
-     * The number of images in the SpriteBatch before it flushes
-     * @property size
-     * @type Number
-     */
-    this.size = 10000;//Math.pow(2, 16) /  this.vertSize;
+    if (!frame)
+    {
+        this.noFrame = true;
+        frame = new math.Rectangle(0, 0, 1, 1);
+    }
 
-    //the total number of floats in our batch
-    var numVerts = this.size * 4 *  this.vertSize;
-    //the total number of indices in our batch
-    var numIndices = this.size * 6;
+    if (baseTexture instanceof Texture)
+    {
+        baseTexture = baseTexture.baseTexture;
+    }
 
-    //vertex data
+  //  console.log(frame);
 
     /**
-    * Holds the vertices
-    *
-    * @property vertices
-    * @type Float32Array
-    */
-    this.vertices = new Float32Array(numVerts);
+     * The base texture that this texture uses.
+     *
+     * @member {BaseTexture}
+     */
+    this.baseTexture = baseTexture;
 
-    //index data
     /**
-     * Holds the indices
+     * The frame specifies the region of the base texture that this texture uses
      *
-     * @property indices
-     * @type Uint16Array
+     * @member {Rectangle}
+     * @private
      */
-    this.indices = new Uint16Array(numIndices);
-    
-    this.lastIndexCount = 0;
-
-    for (var i=0, j=0; i < numIndices; i += 6, j += 4)
-    {
-        this.indices[i + 0] = j + 0;
-        this.indices[i + 1] = j + 1;
-        this.indices[i + 2] = j + 2;
-        this.indices[i + 3] = j + 0;
-        this.indices[i + 4] = j + 2;
-        this.indices[i + 5] = j + 3;
-    }
-
-
-    this.drawing = false;
-    this.currentBatchSize = 0;
-    this.currentBaseTexture = null;
-    
-    this.setContext(gl);
-};
-
-/**
-* 
-* @method setContext
-*
-* @param gl {WebGLContext} the current WebGL drawing context
-*/
-PIXI.WebGLSpriteBatch.prototype.setContext = function(gl)
-{
-    this.gl = gl;
-
-    // create a couple of buffers
-    this.vertexBuffer = gl.createBuffer();
-    this.indexBuffer = gl.createBuffer();
+    this._frame = frame;
 
-    // 65535 is max index, so 65535 / 6 = 10922.
+    /**
+     * The texture trim data.
+     *
+     * @member {Rectangle}
+     */
+    this.trim = trim;
 
+    /**
+     * This will let the renderer know if the texture is valid. If it's not then it cannot be rendered.
+     *
+     * @member {boolean}
+     */
+    this.valid = false;
 
-    //upload the index data
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
-    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW);
+    /**
+     * This will let a renderer know that a texture has been updated (used mainly for webGL uv updates)
+     *
+     * @member {boolean}
+     */
+    this.requiresUpdate = false;
 
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW);
+    /**
+     * The WebGL UV data cache.
+     *
+     * @member {TextureUvs}
+     * @private
+     */
+    this._uvs = null;
 
-    this.currentBlendMode = 99999;
-};
+    /**
+     * The width of the Texture in pixels.
+     *
+     * @member {number}
+     */
+    this.width = 0;
 
-/**
-* 
-* @method begin
-*
-* @param renderSession {RenderSession} the RenderSession
-*/
-PIXI.WebGLSpriteBatch.prototype.begin = function(renderSession)
-{
-    this.renderSession = renderSession;
-    this.shader = this.renderSession.shaderManager.defaultShader;
+    /**
+     * The height of the Texture in pixels.
+     *
+     * @member {number}
+     */
+    this.height = 0;
 
-    this.start();
-};
+    /**
+     * This is the area of the BaseTexture image to actually copy to the Canvas / WebGL when rendering,
+     * irrespective of the actual frame size or placement (which can be influenced by trimmed texture atlases)
+     *
+     * @member {Rectangle}
+     */
+    this.crop = crop || frame;//new math.Rectangle(0, 0, 1, 1);
 
-/**
-* 
-* @method end
-*
-*/
-PIXI.WebGLSpriteBatch.prototype.end = function()
-{
-    this.flush();
-};
+    /**
+     * Indicates whether the texture should be rotated by 90 degrees
+     *
+     * @private
+     * @member {boolean}
+     */
+    this.rotate = !!rotate;
 
-/**
-* 
-* @method render
-* 
-* @param sprite {Sprite} the sprite to render when using this spritebatch
-*/
-PIXI.WebGLSpriteBatch.prototype.render = function(sprite)
-{
-    // check texture..
-    if(sprite.texture.baseTexture !== this.currentBaseTexture || this.currentBatchSize >= this.size)
+    if (baseTexture.hasLoaded)
     {
-        this.flush();
-        this.currentBaseTexture = sprite.texture.baseTexture;
-    }
-
+        if (this.noFrame)
+        {
+            frame = new math.Rectangle(0, 0, baseTexture.width, baseTexture.height);
 
-    // check blend mode
-    if(sprite.blendMode !== this.currentBlendMode)
+            // if there is no frame we should monitor for any base texture changes..
+            baseTexture.on('update', this.onBaseTextureUpdated, this);
+        }
+        this.frame = frame;
+    }
+    else
     {
-        this.setBlendMode(sprite.blendMode);
+        baseTexture.once('loaded', this.onBaseTextureLoaded, this);
     }
 
-    // get the uvs for the texture
-    var uvs = sprite._uvs || sprite.texture._uvs;
-    // if the uvs have not updated then no point rendering just yet!
-    if(!uvs)return;
-
-    // get the sprites current alpha
-    var alpha = sprite.worldAlpha;
-    var tint = sprite.tint;
-
-    var verticies = this.vertices;
+    /**
+     * Fired when the texture is updated. This happens if the frame or the baseTexture is updated.
+     *
+     * @event update
+     * @memberof PIXI.Texture#
+     * @protected
+     */
+}
 
-    var width = sprite.texture.frame.width;
-    var height = sprite.texture.frame.height;
+Texture.prototype = Object.create(EventEmitter.prototype);
+Texture.prototype.constructor = Texture;
+module.exports = Texture;
 
-    // TODO trim??
-    var aX = sprite.anchor.x;
-    var aY = sprite.anchor.y;
+Object.defineProperties(Texture.prototype, {
+    frame: {
+        get: function ()
+        {
+            return this._frame;
+        },
+        set: function (frame)
+        {
+            this._frame = frame;
 
-    var w0, w1, h0, h1;
-        
-    if (sprite.texture.trim)
-    {
-        // if the sprite is trimmed then we need to add the extra space before transforming the sprite coords..
-        var trim = sprite.texture.trim;
+            this.noFrame = false;
 
-        w1 = trim.x - aX * trim.width;
-        w0 = w1 + width;
+            this.width = frame.width;
+            this.height = frame.height;
 
-        h1 = trim.y - aY * trim.height;
-        h0 = h1 + height;
-    }
-    else
-    {
-        w0 = (width ) * (1-aX);
-        w1 = (width ) * -aX;
 
-        h0 = height * (1-aY);
-        h1 = height * -aY;
-    }
 
-    var index = this.currentBatchSize * 4 * this.vertSize;
+            if (!this.trim && !this.rotate && (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height))
+            {
+                throw new Error('Texture Error: frame does not fit inside the base Texture dimensions ' + this);
+            }
 
-    var worldTransform = sprite.worldTransform;//.toArray();
+            //this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded;
+            this.valid = frame && frame.width && frame.height && this.baseTexture.hasLoaded;
 
-    var a = worldTransform.a;//[0];
-    var b = worldTransform.c;//[3];
-    var c = worldTransform.b;//[1];
-    var d = worldTransform.d;//[4];
-    var tx = worldTransform.tx;//[2];
-    var ty = worldTransform.ty;///[5];
+            if (this.trim)
+            {
 
-    // xy
-    verticies[index++] = a * w1 + c * h1 + tx;
-    verticies[index++] = d * h1 + b * w1 + ty;
-    // uv
-    verticies[index++] = uvs.x0;
-    verticies[index++] = uvs.y0;
-    // color
-    verticies[index++] = alpha;
-    verticies[index++] = tint;
-
-    // xy
-    verticies[index++] = a * w0 + c * h1 + tx;
-    verticies[index++] = d * h1 + b * w0 + ty;
-    // uv
-    verticies[index++] = uvs.x1;
-    verticies[index++] = uvs.y1;
-    // color
-    verticies[index++] = alpha;
-    verticies[index++] = tint;
-
-    // xy
-    verticies[index++] = a * w0 + c * h0 + tx;
-    verticies[index++] = d * h0 + b * w0 + ty;
-    // uv
-    verticies[index++] = uvs.x2;
-    verticies[index++] = uvs.y2;
-    // color
-    verticies[index++] = alpha;
-    verticies[index++] = tint;
-
-    // xy
-    verticies[index++] = a * w1 + c * h0 + tx;
-    verticies[index++] = d * h0 + b * w1 + ty;
-    // uv
-    verticies[index++] = uvs.x3;
-    verticies[index++] = uvs.y3;
-    // color
-    verticies[index++] = alpha;
-    verticies[index++] = tint;
-    
-    // increment the batchsize
-    this.currentBatchSize++;
+                this.width = this.trim.width;
+                this.height = this.trim.height;
+                this._frame.width = this.trim.width;
+                this._frame.height = this.trim.height;
+            }
+            else
+            {
+                this.crop = frame;
+            }
 
+             if (this.valid)
+            {
+                this._updateUvs();
+            }
+        }
+    }
+});
 
+/**
+ * Updates this texture on the gpu.
+ *
+ */
+Texture.prototype.update = function ()
+{
+    this.baseTexture.update();
 };
 
 /**
-* Renders a tilingSprite using the spriteBatch
-* @method renderTilingSprite
-* 
-* @param sprite {TilingSprite} the tilingSprite to render
-*/
-PIXI.WebGLSpriteBatch.prototype.renderTilingSprite = function(tilingSprite)
+ * Called when the base texture is loaded
+ *
+ * @private
+ */
+Texture.prototype.onBaseTextureLoaded = function (baseTexture)
 {
-    var texture = tilingSprite.tilingTexture;
-
-    if(texture.baseTexture !== this.currentBaseTexture || this.currentBatchSize >= this.size)
+    // TODO this code looks confusing.. boo to abusing getters and setterss!
+    if (this.noFrame)
     {
-        this.flush();
-        this.currentBaseTexture = texture.baseTexture;
+        this.frame = new math.Rectangle(0, 0, baseTexture.width, baseTexture.height);
     }
-
-     // check blend mode
-    if(tilingSprite.blendMode !== this.currentBlendMode)
+    else
     {
-        this.setBlendMode(tilingSprite.blendMode);
+        this.frame = this._frame;
     }
 
-     // set the textures uvs temporarily
-    // TODO create a separate texture so that we can tile part of a texture
-
-    if(!tilingSprite._uvs)tilingSprite._uvs = new PIXI.TextureUvs();
-
-    var uvs = tilingSprite._uvs;
-
-    tilingSprite.tilePosition.x %= texture.baseTexture.width;
-    tilingSprite.tilePosition.y %= texture.baseTexture.height;
+    this.emit( 'update', this );
+};
 
-    var offsetX =  tilingSprite.tilePosition.x/texture.baseTexture.width;
-    var offsetY =  tilingSprite.tilePosition.y/texture.baseTexture.height;
+Texture.prototype.onBaseTextureUpdated = function (baseTexture)
+{
+    this._frame.width = baseTexture.width;
+    this._frame.height = baseTexture.height;
 
-    var scaleX =  (tilingSprite.width / texture.baseTexture.width)  / (tilingSprite.tileScale.x * tilingSprite.tileScaleOffset.x);
-    var scaleY =  (tilingSprite.height / texture.baseTexture.height) / (tilingSprite.tileScale.y * tilingSprite.tileScaleOffset.y);
+    this.emit( 'update', this );
+};
 
-    uvs.x0 = 0 - offsetX;
-    uvs.y0 = 0 - offsetY;
+/**
+ * Destroys this texture
+ *
+ * @param destroyBase {boolean} Whether to destroy the base texture as well
+ */
+Texture.prototype.destroy = function (destroyBase)
+{
+    if (this.baseTexture)
+    {
+        if (destroyBase)
+        {
+            this.baseTexture.destroy();
+        }
 
-    uvs.x1 = (1 * scaleX) - offsetX;
-    uvs.y1 = 0 - offsetY;
+        this.baseTexture.off('update', this.onBaseTextureUpdated, this);
+        this.baseTexture.off('loaded', this.onBaseTextureLoaded, this);
 
-    uvs.x2 = (1 * scaleX) - offsetX;
-    uvs.y2 = (1 * scaleY) - offsetY;
+        this.baseTexture = null;
+    }
 
-    uvs.x3 = 0 - offsetX;
-    uvs.y3 = (1 *scaleY) - offsetY;
+    this._frame = null;
+    this._uvs = null;
+    this.trim = null;
+    this.crop = null;
 
-    // get the tilingSprites current alpha
-    var alpha = tilingSprite.worldAlpha;
-    var tint = tilingSprite.tint;
+    this.valid = false;
+};
 
-    var  verticies = this.vertices;
+Texture.prototype.clone = function ()
+{
+    return new Texture(this.baseTexture, this.frame, this.crop, this.trim, this.rotate);
+};
 
-    var width = tilingSprite.width;
-    var height = tilingSprite.height;
+/**
+ * Updates the internal WebGL UV cache.
+ *
+ * @private
+ */
+Texture.prototype._updateUvs = function ()
+{
+    if (!this._uvs)
+    {
+        this._uvs = new TextureUvs();
+    }
 
-    // TODO trim??
-    var aX = tilingSprite.anchor.x; // - tilingSprite.texture.trim.x
-    var aY = tilingSprite.anchor.y; //- tilingSprite.texture.trim.y
-    var w0 = width * (1-aX);
-    var w1 = width * -aX;
+    this._uvs.set(this.crop, this.baseTexture, this.rotate);
+};
 
-    var h0 = height * (1-aY);
-    var h1 = height * -aY;
+/**
+ * Helper function that creates a Texture object from the given image url.
+ * If the image is not in the texture cache it will be  created and loaded.
+ *
+ * @static
+ * @param imageUrl {string} The image url of the texture
+ * @param crossorigin {boolean} Whether requests should be treated as crossorigin
+ * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values
+ * @return {Texture} The newly created texture
+ */
+Texture.fromImage = function (imageUrl, crossorigin, scaleMode)
+{
+    var texture = utils.TextureCache[imageUrl];
 
-    var index = this.currentBatchSize * 4 * this.vertSize;
+    if (!texture)
+    {
+        texture = new Texture(BaseTexture.fromImage(imageUrl, crossorigin, scaleMode));
+        utils.TextureCache[imageUrl] = texture;
+    }
 
-    var worldTransform = tilingSprite.worldTransform;
+    return texture;
+};
 
-    var a = worldTransform.a;//[0];
-    var b = worldTransform.c;//[3];
-    var c = worldTransform.b;//[1];
-    var d = worldTransform.d;//[4];
-    var tx = worldTransform.tx;//[2];
-    var ty = worldTransform.ty;///[5];
+/**
+ * Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId
+ * The frame ids are created when a Texture packer file has been loaded
+ *
+ * @static
+ * @param frameId {String} The frame Id of the texture in the cache
+ * @return {Texture} The newly created texture
+ */
+Texture.fromFrame = function (frameId)
+{
+    var texture = utils.TextureCache[frameId];
 
-    // xy
-    verticies[index++] = a * w1 + c * h1 + tx;
-    verticies[index++] = d * h1 + b * w1 + ty;
-    // uv
-    verticies[index++] = uvs.x0;
-    verticies[index++] = uvs.y0;
-    // color
-    verticies[index++] = alpha;
-    verticies[index++] = tint;
-
-    // xy
-    verticies[index++] = a * w0 + c * h1 + tx;
-    verticies[index++] = d * h1 + b * w0 + ty;
-    // uv
-    verticies[index++] = uvs.x1;
-    verticies[index++] = uvs.y1;
-    // color
-    verticies[index++] = alpha;
-    verticies[index++] = tint;
-    
-    // xy
-    verticies[index++] = a * w0 + c * h0 + tx;
-    verticies[index++] = d * h0 + b * w0 + ty;
-    // uv
-    verticies[index++] = uvs.x2;
-    verticies[index++] = uvs.y2;
-    // color
-    verticies[index++] = alpha;
-    verticies[index++] = tint;
-
-    // xy
-    verticies[index++] = a * w1 + c * h0 + tx;
-    verticies[index++] = d * h0 + b * w1 + ty;
-    // uv
-    verticies[index++] = uvs.x3;
-    verticies[index++] = uvs.y3;
-    // color
-    verticies[index++] = alpha;
-    verticies[index++] = tint;
+    if (!texture)
+    {
+        throw new Error('The frameId "' + frameId + '" does not exist in the texture cache');
+    }
 
-    // increment the batchs
-    this.currentBatchSize++;
+    return texture;
 };
 
-
 /**
-* Renders the content and empties the current batch
-*
-* @method flush
-* 
-*/
-PIXI.WebGLSpriteBatch.prototype.flush = function()
+ * Helper function that creates a new Texture based on the given canvas element.
+ *
+ * @static
+ * @param canvas {Canvas} The canvas element source of the texture
+ * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values
+ * @return {Texture}
+ */
+Texture.fromCanvas = function (canvas, scaleMode)
 {
-    // If the batch is length 0 then return as there is nothing to draw
-    if (this.currentBatchSize===0)return;
-
-    var gl = this.gl;
-    
-    // bind the current texture
-    gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id] || PIXI.createWebGLTexture(this.currentBaseTexture, gl));
+    return new Texture(BaseTexture.fromCanvas(canvas, scaleMode));
+};
 
-    // upload the verts to the buffer
-    
-    if(this.currentBatchSize > ( this.size * 0.5 ) )
+/**
+ * Helper function that creates a new Texture based on the given video element.
+ *
+ * @static
+ * @param video {HTMLVideoElement}
+ * @param scaleMode {number} See {{#crossLink "PIXI/scaleModes:property"}}scaleModes{{/crossLink}} for possible values
+ * @return {Texture} A Texture
+ */
+Texture.fromVideo = function (video, scaleMode)
+{
+    if (typeof video === 'string')
     {
-        gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertices);
+        return Texture.fromVideoUrl(video, scaleMode);
     }
     else
     {
-        var view = this.vertices.subarray(0, this.currentBatchSize * 4 * this.vertSize);
-
-        gl.bufferSubData(gl.ARRAY_BUFFER, 0, view);
+        return new Texture(VideoBaseTexture.fromVideo(video, scaleMode));
     }
-
-   // var view = this.vertices.subarray(0, this.currentBatchSize * 4 * this.vertSize);
-    //gl.bufferSubData(gl.ARRAY_BUFFER, 0, view);
-    
-    // now draw those suckas!
-    gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0);
-   
-    // then reset the batch!
-    this.currentBatchSize = 0;
-
-    // increment the draw count
-    this.renderSession.drawCount++;
 };
 
 /**
-* 
-* @method stop
-*
-*/
-PIXI.WebGLSpriteBatch.prototype.stop = function()
+ * Helper function that creates a new Texture based on the video url.
+ *
+ * @static
+ * @param videoUrl {string}
+ * @param scaleMode {number} See {{@link SCALE_MODES}} for possible values
+ * @return {Texture} A Texture
+ */
+Texture.fromVideoUrl = function (videoUrl, scaleMode)
 {
-    this.flush();
+    return new Texture(VideoBaseTexture.fromUrl(videoUrl, scaleMode));
 };
 
 /**
-* 
-* @method start
-*
-*/
-PIXI.WebGLSpriteBatch.prototype.start = function()
+ * Adds a texture to the global utils.TextureCache. This cache is shared across the whole PIXI object.
+ *
+ * @static
+ * @param texture {Texture} The Texture to add to the cache.
+ * @param id {string} The id that the texture will be stored against.
+ */
+Texture.addTextureToCache = function (texture, id)
 {
-    var gl = this.gl;
+    utils.TextureCache[id] = texture;
+};
 
-    // bind the main texture
-    gl.activeTexture(gl.TEXTURE0);
+/**
+ * Remove a texture from the global utils.TextureCache.
+ *
+ * @static
+ * @param id {string} The id of the texture to be removed
+ * @return {Texture} The texture that was removed
+ */
+Texture.removeTextureFromCache = function (id)
+{
+    var texture = utils.TextureCache[id];
 
-    // bind the buffers
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+    delete utils.TextureCache[id];
+    delete utils.BaseTextureCache[id];
 
-    // set the projection
-    var projection = this.renderSession.projection;
-    gl.uniform2f(this.shader.projectionVector, projection.x, projection.y);
+    return texture;
+};
 
-    // set the pointers
-    var stride =  this.vertSize * 4;
-    gl.vertexAttribPointer(this.shader.aVertexPosition, 2, gl.FLOAT, false, stride, 0);
-    gl.vertexAttribPointer(this.shader.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4);
-    gl.vertexAttribPointer(this.shader.colorAttribute, 2, gl.FLOAT, false, stride, 4 * 4);
+Texture.EMPTY = new Texture(new BaseTexture());
 
-    // set the blend mode..
-    if(this.currentBlendMode !== PIXI.blendModes.NORMAL)
-    {
-        this.setBlendMode(PIXI.blendModes.NORMAL);
-    }
-};
+},{"../math":32,"../utils":74,"./BaseTexture":69,"./TextureUvs":72,"./VideoBaseTexture":73,"eventemitter3":11}],72:[function(require,module,exports){
 
 /**
-* Sets-up the given blendMode from WebGL's point of view
-* @method setBlendMode 
-*
-* @param blendMode {Number} the blendMode, should be a Pixi const, such as PIXI.BlendModes.ADD
-*/
-PIXI.WebGLSpriteBatch.prototype.setBlendMode = function(blendMode)
+ * A standard object to store the Uvs of a texture
+ *
+ * @class
+ * @private
+ */
+function TextureUvs()
 {
-    this.flush();
+    this.x0 = 0;
+    this.y0 = 0;
 
-    this.currentBlendMode = blendMode;
-    
-    var blendModeWebGL = PIXI.blendModesWebGL[this.currentBlendMode];
-    this.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]);
-};
+    this.x1 = 1;
+    this.y1 = 0;
+
+    this.x2 = 1;
+    this.y2 = 1;
+
+    this.x3 = 0;
+    this.y3 = 1;
+}
+
+module.exports = TextureUvs;
 
 /**
-* Destroys the SpriteBatch
-* @method destroy
-*/
-PIXI.WebGLSpriteBatch.prototype.destroy = function()
+ * Sets the texture Uvs based on the given frame information
+ * @param frame {Rectangle}
+ * @param baseFrame {Rectangle}
+ * @param rotate {boolean} Whether or not the frame is rotated
+ * @private
+ */
+TextureUvs.prototype.set = function (frame, baseFrame, rotate)
 {
+    var tw = baseFrame.width;
+    var th = baseFrame.height;
 
-    this.vertices = null;
-    this.indices = null;
-    
-    this.gl.deleteBuffer( this.vertexBuffer );
-    this.gl.deleteBuffer( this.indexBuffer );
-    
-    this.currentBaseTexture = null;
-    
-    this.gl = null;
+    if(rotate)
+    {
+        this.x0 = (frame.x + frame.height) / tw;
+        this.y0 = frame.y / th;
+
+        this.x1 = (frame.x + frame.height) / tw;
+        this.y1 = (frame.y + frame.width) / th;
+
+        this.x2 = frame.x / tw;
+        this.y2 = (frame.y + frame.width) / th;
+
+        this.x3 = frame.x / tw;
+        this.y3 = frame.y / th;
+    }
+    else
+    {
+
+        this.x0 = frame.x / tw;
+        this.y0 = frame.y / th;
+
+        this.x1 = (frame.x + frame.width) / tw;
+        this.y1 = frame.y / th;
+
+        this.x2 = (frame.x + frame.width) / tw;
+        this.y2 = (frame.y + frame.height) / th;
+
+        this.x3 = frame.x / tw;
+        this.y3 = (frame.y + frame.height) / th;
+    }
 };
 
+},{}],73:[function(require,module,exports){
+var BaseTexture = require('./BaseTexture'),
+    utils = require('../utils');
 
 /**
- * @author Mat Groves
- * 
- * Big thanks to the very clever Matt DesLauriers <mattdesl> https://github.com/mattdesl/
- * for creating the original pixi version!
+ * A texture of a [playing] Video.
+ *
+ * Video base textures mimic Pixi BaseTexture.from.... method in their creation process.
+ *
+ * This can be used in several ways, such as:
+ *
+ * ```js
+ * var texture = PIXI.VideoBaseTexture.fromUrl('http://mydomain.com/video.mp4');
+ *
+ * var texture = PIXI.VideoBaseTexture.fromUrl({ src: 'http://mydomain.com/video.mp4', mime: 'video/mp4' });
+ *
+ * var texture = PIXI.VideoBaseTexture.fromUrls(['/video.webm', '/video.mp4']);
+ *
+ * var texture = PIXI.VideoBaseTexture.fromUrls([
+ *     { src: '/video.webm', mime: 'video/webm' },
+ *     { src: '/video.mp4', mime: 'video/mp4' }
+ * ]);
+ * ```
+ *
+ * See the ["deus" demo](http://www.goodboydigital.com/pixijs/examples/deus/).
  *
- * Heavily inspired by LibGDX's WebGLSpriteBatch:
- * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java
+ * @class
+ * @extends PIXI.BaseTexture
+ * @memberof PIXI
+ * @param source {HTMLVideoElement}
+ * @param [scaleMode] {number} See {@link SCALE_MODES} for possible values
  */
-
-PIXI.WebGLFastSpriteBatch = function(gl)
+function VideoBaseTexture(source, scaleMode)
 {
-   
+    if (!source)
+    {
+        throw new Error('No video source element specified.');
+    }
 
-    this.vertSize = 10;
-    this.maxSize = 6000;//Math.pow(2, 16) /  this.vertSize;
-    this.size = this.maxSize;
+    // hook in here to check if video is already available.
+    // BaseTexture looks for a source.complete boolean, plus width & height.
 
-    //the total number of floats in our batch
-    var numVerts = this.size * 4 *  this.vertSize;
-    //the total number of indices in our batch
-    var numIndices = this.maxSize * 6;
+    if ((source.readyState === source.HAVE_ENOUGH_DATA || source.readyState === source.HAVE_FUTURE_DATA) && source.width && source.height)
+    {
+        source.complete = true;
+    }
 
-     //vertex data
-    this.vertices = new Float32Array(numVerts);
-    //index data
-    this.indices = new Uint16Array(numIndices);
-    
-    this.vertexBuffer = null;
-    this.indexBuffer = null;
+    BaseTexture.call(this, source, scaleMode);
 
-    this.lastIndexCount = 0;
+    /**
+     * Should the base texture automatically update itself, set to true by default
+     *
+     * @member {boolean}
+     * @default true
+     */
+    this.autoUpdate = false;
 
-    for (var i=0, j=0; i < numIndices; i += 6, j += 4)
+    this._onUpdate = this._onUpdate.bind(this);
+    this._onCanPlay = this._onCanPlay.bind(this);
+
+    if (!source.complete)
     {
-        this.indices[i + 0] = j + 0;
-        this.indices[i + 1] = j + 1;
-        this.indices[i + 2] = j + 2;
-        this.indices[i + 3] = j + 0;
-        this.indices[i + 4] = j + 2;
-        this.indices[i + 5] = j + 3;
-    }
+        source.addEventListener('canplay', this._onCanPlay);
+        source.addEventListener('canplaythrough', this._onCanPlay);
 
-    this.drawing = false;
-    this.currentBatchSize = 0;
-    this.currentBaseTexture = null;
-   
-    this.currentBlendMode = 0;
-    this.renderSession = null;
-    
+        // started playing..
+        source.addEventListener('play', this._onPlayStart.bind(this));
+        source.addEventListener('pause', this._onPlayStop.bind(this));
+    }
 
-    this.shader = null;
+    this.__loaded = false;
+}
 
-    this.matrix = null;
+VideoBaseTexture.prototype = Object.create(BaseTexture.prototype);
+VideoBaseTexture.prototype.constructor = VideoBaseTexture;
+module.exports = VideoBaseTexture;
 
-    this.setContext(gl);
+/**
+ * The internal update loop of the video base texture, only runs when autoUpdate is set to true
+ * @private
+ */
+VideoBaseTexture.prototype._onUpdate = function ()
+{
+    if (this.autoUpdate)
+    {
+        window.requestAnimationFrame(this._onUpdate);
+        this.update();
+    }
 };
 
-PIXI.WebGLFastSpriteBatch.prototype.setContext = function(gl)
+/**
+ * Runs the update loop when the video is ready to play
+ * @private
+ */
+VideoBaseTexture.prototype._onPlayStart = function ()
 {
-    this.gl = gl;
-
-    // create a couple of buffers
-    this.vertexBuffer = gl.createBuffer();
-    this.indexBuffer = gl.createBuffer();
+    if (!this.autoUpdate)
+    {
+        window.requestAnimationFrame(this._onUpdate);
+        this.autoUpdate = true;
+    }
+};
 
-    // 65535 is max index, so 65535 / 6 = 10922.
+/**
+ * Fired when a pause event is triggered, stops the update loop
+ * @private
+ */
+VideoBaseTexture.prototype._onPlayStop = function ()
+{
+    this.autoUpdate = false;
+};
 
+/**
+ * Fired when the video is loaded and ready to play
+ * @private
+ */
+VideoBaseTexture.prototype._onCanPlay = function ()
+{
+    this.hasLoaded = true;
 
-    //upload the index data
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
-    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW);
+    if (this.source)
+    {
+        this.source.removeEventListener('canplay', this._onCanPlay);
+        this.source.removeEventListener('canplaythrough', this._onCanPlay);
 
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW);
+        this.width = this.source.videoWidth;
+        this.height = this.source.videoHeight;
 
-    this.currentBlendMode = 99999;
+        this.source.play();
+
+        // prevent multiple loaded dispatches..
+        if (!this.__loaded)
+        {
+            this.__loaded = true;
+            this.emit('loaded', this);
+        }
+    }
 };
 
-PIXI.WebGLFastSpriteBatch.prototype.begin = function(spriteBatch, renderSession)
+/**
+ * Destroys this texture
+ *
+ */
+VideoBaseTexture.prototype.destroy = function ()
 {
-    this.renderSession = renderSession;
-    this.shader = this.renderSession.shaderManager.fastShader;
-
-    this.matrix = spriteBatch.worldTransform.toArray(true);
+    if (this.source && this.source._pixiId)
+    {
+        delete utils.BaseTextureCache[ this.source._pixiId ];
+        delete this.source._pixiId;
+    }
 
-    this.start();
+    BaseTexture.prototype.destroy.call(this);
 };
 
-PIXI.WebGLFastSpriteBatch.prototype.end = function()
+/**
+ * Mimic Pixi BaseTexture.from.... method.
+ *
+ * @static
+ * @param video {HTMLVideoElement}
+ * @param scaleMode {number} See {@link SCALE_MODES} for possible values
+ * @return {VideoBaseTexture}
+ */
+VideoBaseTexture.fromVideo = function (video, scaleMode)
 {
-    this.flush();
-};
+    if (!video._pixiId)
+    {
+        video._pixiId = 'video_' + utils.uuid();
+    }
 
+    var baseTexture = utils.BaseTextureCache[video._pixiId];
 
-PIXI.WebGLFastSpriteBatch.prototype.render = function(spriteBatch)
-{
+    if (!baseTexture)
+    {
+        baseTexture = new VideoBaseTexture(video, scaleMode);
+        utils.BaseTextureCache[ video._pixiId ] = baseTexture;
+    }
 
-    var children = spriteBatch.children;
-    var sprite = children[0];
+    return baseTexture;
+};
 
-    // if the uvs have not updated then no point rendering just yet!
-    
-    // check texture.
-    if(!sprite.texture._uvs)return;
-   
-    this.currentBaseTexture = sprite.texture.baseTexture;
-    // check blend mode
-    if(sprite.blendMode !== this.currentBlendMode)
+/**
+ * Helper function that creates a new BaseTexture based on the given video element.
+ * This BaseTexture can then be used to create a texture
+ *
+ * @static
+ * @param videoSrc {string|object|string[]|object[]} The URL(s) for the video.
+ * @param [videoSrc.src] {string} One of the source urls for the video
+ * @param [videoSrc.mime] {string} The mimetype of the video (e.g. 'video/mp4'). If not specified
+ *  the url's extension will be used as the second part of the mime type.
+ * @param scaleMode {number} See {@link SCALE_MODES} for possible values
+ * @return {VideoBaseTexture}
+ */
+VideoBaseTexture.fromUrl = function (videoSrc, scaleMode)
+{
+    var video = document.createElement('video');
+
+    // array of objects or strings
+    if (Array.isArray(videoSrc))
     {
-        this.setBlendMode(sprite.blendMode);
+        for (var i = 0; i < videoSrc.length; ++i)
+        {
+            video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime));
+        }
     }
-    
-    for(var i=0,j= children.length; i<j; i++)
+    // single object or string
+    else
     {
-        this.renderSprite(children[i]);
+        video.appendChild(createSource(videoSrc.src || videoSrc, videoSrc.mime));
     }
 
-    this.flush();
+    video.load();
+    video.play();
+
+    return VideoBaseTexture.fromVideo(video, scaleMode);
 };
 
-PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite)
+VideoBaseTexture.fromUrls = VideoBaseTexture.fromUrl;
+
+function createSource(path, type)
 {
-    //sprite = children[i];
-    
-    // TODO trim??
-    if(sprite.texture.baseTexture !== this.currentBaseTexture)
+    if (!type)
     {
-        this.flush();
-        this.currentBaseTexture = sprite.texture.baseTexture;
-        
-        if(!sprite.texture._uvs)return;
+        type = 'video/' + path.substr(path.lastIndexOf('.') + 1);
     }
 
-    var uvs, verticies = this.vertices, width, height, w0, w1, h0, h1, index;
+    var source = document.createElement('source');
 
-    uvs = sprite.texture._uvs;
+    source.src = path;
+    source.type = type;
 
+    return source;
+}
 
-    width = sprite.texture.frame.width;
-    height = sprite.texture.frame.height;
+},{"../utils":74,"./BaseTexture":69}],74:[function(require,module,exports){
+var CONST = require('../const');
 
-    if (sprite.texture.trim)
-    {
-        // if the sprite is trimmed then we need to add the extra space before transforming the sprite coords..
-        var trim = sprite.texture.trim;
+/**
+ * @namespace PIXI.utils
+ */
+var utils = module.exports = {
+    _uid: 0,
+    _saidHello: false,
 
-        w1 = trim.x - sprite.anchor.x * trim.width;
-        w0 = w1 + sprite.texture.frame.width;
+    pluginTarget:   require('./pluginTarget'),
+    async:          require('async'),
 
-        h1 = trim.y - sprite.anchor.y * trim.height;
-        h0 = h1 + sprite.texture.frame.height;
-    }
-    else
+    /**
+     * Gets the next uuid
+     *
+     * @return {number} The next uuid to use.
+     */
+    uuid: function ()
     {
-        w0 = (sprite.texture.frame.width ) * (1-sprite.anchor.x);
-        w1 = (sprite.texture.frame.width ) * -sprite.anchor.x;
-
-        h0 = sprite.texture.frame.height * (1-sprite.anchor.y);
-        h1 = sprite.texture.frame.height * -sprite.anchor.y;
-    }
+        return ++utils._uid;
+    },
 
-    index = this.currentBatchSize * 4 * this.vertSize;
+    /**
+     * Converts a hex color number to an [R, G, B] array
+     *
+     * @param hex {number}
+     * @return {number[]} An array representing the [R, G, B] of the color.
+     */
+    hex2rgb: function (hex, out)
+    {
+        out = out || [];
 
-    // xy
-    verticies[index++] = w1;
-    verticies[index++] = h1;
+        out[0] = (hex >> 16 & 0xFF) / 255;
+        out[1] = (hex >> 8 & 0xFF) / 255;
+        out[2] = (hex & 0xFF) / 255;
 
-    verticies[index++] = sprite.position.x;
-    verticies[index++] = sprite.position.y;
+        return out;
+    },
 
-    //scale
-    verticies[index++] = sprite.scale.x;
-    verticies[index++] = sprite.scale.y;
+    /**
+     * Converts a hex color number to a string.
+     *
+     * @param hex {number}
+     * @return {string} The string color.
+     */
+    hex2string: function (hex)
+    {
+        hex = hex.toString(16);
+        hex = '000000'.substr(0, 6 - hex.length) + hex;
 
-    //rotation
-    verticies[index++] = sprite.rotation;
+        return '#' + hex;
+    },
 
-    // uv
-    verticies[index++] = uvs.x0;
-    verticies[index++] = uvs.y1;
-    // color
-    verticies[index++] = sprite.alpha;
- 
+    /**
+     * Converts a color as an [R, G, B] array to a hex number
+     *
+     * @param rgb {number[]}
+     * @return {number} The color number
+     */
+    rgb2hex: function (rgb)
+    {
+        return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255);
+    },
 
-    // xy
-    verticies[index++] = w0;
-    verticies[index++] = h1;
+    /**
+     * Checks whether the Canvas BlendModes are supported by the current browser
+     *
+     * @return {boolean} whether they are supported
+     */
+    canUseNewCanvasBlendModes: function ()
+    {
+        if (typeof document === 'undefined')
+        {
+            return false;
+        }
 
-    verticies[index++] = sprite.position.x;
-    verticies[index++] = sprite.position.y;
+        var pngHead = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABAQMAAADD8p2OAAAAA1BMVEX/';
+        var pngEnd = 'AAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==';
 
-    //scale
-    verticies[index++] = sprite.scale.x;
-    verticies[index++] = sprite.scale.y;
+        var magenta = new Image();
+        magenta.src = pngHead + 'AP804Oa6' + pngEnd;
 
-     //rotation
-    verticies[index++] = sprite.rotation;
+        var yellow = new Image();
+        yellow.src = pngHead + '/wCKxvRF' + pngEnd;
 
-    // uv
-    verticies[index++] = uvs.x1;
-    verticies[index++] = uvs.y1;
-    // color
-    verticies[index++] = sprite.alpha;
-  
+        var canvas = document.createElement('canvas');
+        canvas.width = 6;
+        canvas.height = 1;
 
-    // xy
-    verticies[index++] = w0;
-    verticies[index++] = h0;
+        var context = canvas.getContext('2d');
+        context.globalCompositeOperation = 'multiply';
+        context.drawImage(magenta, 0, 0);
+        context.drawImage(yellow, 2, 0);
 
-    verticies[index++] = sprite.position.x;
-    verticies[index++] = sprite.position.y;
+        var data = context.getImageData(2,0,1,1).data;
 
-    //scale
-    verticies[index++] = sprite.scale.x;
-    verticies[index++] = sprite.scale.y;
+        return (data[0] === 255 && data[1] === 0 && data[2] === 0);
+    },
 
-     //rotation
-    verticies[index++] = sprite.rotation;
+    /**
+     * Given a number, this function returns the closest number that is a power of two
+     * this function is taken from Starling Framework as its pretty neat ;)
+     *
+     * @param number {number}
+     * @return {number} the closest number that is a power of two
+     */
+    getNextPowerOfTwo: function (number)
+    {
+        // see: http://en.wikipedia.org/wiki/Power_of_two#Fast_algorithm_to_check_if_a_positive_number_is_a_power_of_two
+        if (number > 0 && (number & (number - 1)) === 0)
+        {
+            return number;
+        }
+        else
+        {
+            var result = 1;
 
-    // uv
-    verticies[index++] = uvs.x2;
-    verticies[index++] = uvs.y2;
-    // color
-    verticies[index++] = sprite.alpha;
- 
+            while (result < number)
+            {
+                result <<= 1;
+            }
 
+            return result;
+        }
+    },
 
+    /**
+     * checks if the given width and height make a power of two rectangle
+     *
+     * @param width {number}
+     * @param height {number}
+     * @return {boolean}
+     */
+    isPowerOfTwo: function (width, height)
+    {
+        return (width > 0 && (width & (width - 1)) === 0 && height > 0 && (height & (height - 1)) === 0);
+    },
 
-    // xy
-    verticies[index++] = w1;
-    verticies[index++] = h0;
+    /**
+     * get the resolution of an asset by looking for the prefix
+     * used by spritesheets and image urls
+     *
+     * @param url {string} the image path
+     * @return {boolean}
+     */
+    getResolutionOfUrl: function (url)
+    {
+        var resolution = CONST.RETINA_PREFIX.exec(url);
 
-    verticies[index++] = sprite.position.x;
-    verticies[index++] = sprite.position.y;
+        if (resolution)
+        {
+           return parseFloat(resolution[1]);
+        }
 
-    //scale
-    verticies[index++] = sprite.scale.x;
-    verticies[index++] = sprite.scale.y;
+        return 1;
+    },
 
-     //rotation
-    verticies[index++] = sprite.rotation;
+    /**
+     * Logs out the version and renderer information for this running instance of PIXI.
+     * If you don't want to see this message you can set `PIXI.utils._saidHello = true;`
+     * so the library thinks it already said it. Keep in mind that doing that will forever
+     * makes you a jerk face.
+     *
+     * @param {string} type - The string renderer type to log.
+     * @constant
+     * @static
+     */
+    sayHello: function (type)
+    {
+        if (utils._saidHello)
+        {
+            return;
+        }
 
-    // uv
-    verticies[index++] = uvs.x3;
-    verticies[index++] = uvs.y3;
-    // color
-    verticies[index++] = sprite.alpha;
+        if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
+        {
+            var args = [
+                '\n %c %c %c Pixi.js ' + CONST.VERSION + ' - ✰ ' + type + ' ✰  %c ' + ' %c ' + ' http://www.pixijs.com/  %c %c ♥%c♥%c♥ \n\n',
+                'background: #ff66a5; padding:5px 0;',
+                'background: #ff66a5; padding:5px 0;',
+                'color: #ff66a5; background: #030307; padding:5px 0;',
+                'background: #ff66a5; padding:5px 0;',
+                'background: #ffc3dc; padding:5px 0;',
+                'background: #ff66a5; padding:5px 0;',
+                'color: #ff2424; background: #fff; padding:5px 0;',
+                'color: #ff2424; background: #fff; padding:5px 0;',
+                'color: #ff2424; background: #fff; padding:5px 0;',
+            ];
+
+            window.console.log.apply(console, args); //jshint ignore:line
+        }
+        else if (window.console)
+        {
+            window.console.log('Pixi.js ' + CONST.VERSION + ' - ' + type + ' - http://www.pixijs.com/'); //jshint ignore:line
+        }
 
-    // increment the batchs
-    this.currentBatchSize++;
+        utils._saidHello = true;
+    },
 
-    if(this.currentBatchSize >= this.size)
+    /**
+     * Helper for checking for webgl support
+     *
+     * @return {boolean}
+     */
+    isWebGLSupported: function ()
     {
-        this.flush();
-    }
+        var contextOptions = { stencil: true };
+        try
+        {
+            if (!window.WebGLRenderingContext)
+            {
+                return false;
+            }
+
+            var canvas = document.createElement('canvas'),
+                gl = canvas.getContext('webgl', contextOptions) || canvas.getContext('experimental-webgl', contextOptions);
+
+            return !!(gl && gl.getContextAttributes().stencil);
+        }
+        catch (e)
+        {
+            return false;
+        }
+    },
+
+    TextureCache: {},
+    BaseTextureCache: {}
 };
 
-PIXI.WebGLFastSpriteBatch.prototype.flush = function()
+},{"../const":22,"./pluginTarget":75,"async":2}],75:[function(require,module,exports){
+/**
+ * Mixins functionality to make an object have "plugins".
+ *
+ * @mixin
+ * @memberof PIXI.utils
+ * @param obj {object} The object to mix into.
+ * @example
+ *      function MyObject() {}
+ *
+ *      pluginTarget.mixin(MyObject);
+ */
+function pluginTarget(obj)
 {
+    obj.__plugins = {};
 
-    // If the batch is length 0 then return as there is nothing to draw
-    if (this.currentBatchSize===0)return;
+    /**
+     * Adds a plugin to an object
+     *
+     * @param pluginName {string} The events that should be listed.
+     * @param ctor {Object} ?? @alvin
+     */
+    obj.registerPlugin = function (pluginName, ctor)
+    {
+        obj.__plugins[pluginName] = ctor;
+    };
 
-    var gl = this.gl;
-    
-    // bind the current texture
+    /**
+     * Instantiates all the plugins of this object
+     *
+     */
+    obj.prototype.initPlugins = function ()
+    {
+        this.plugins = this.plugins || {};
 
-    if(!this.currentBaseTexture._glTextures[gl.id])PIXI.createWebGLTexture(this.currentBaseTexture, gl);
+        for (var o in obj.__plugins)
+        {
+            this.plugins[o] = new (obj.__plugins[o])(this);
+        }
+    };
+
+    /**
+     * Removes all the plugins of this object
+     *
+     */
+    obj.prototype.destroyPlugins = function ()
+    {
+        for (var o in this.plugins)
+        {
+            this.plugins[o].destroy();
+            this.plugins[o] = null;
+        }
 
-    gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]);// || PIXI.createWebGLTexture(this.currentBaseTexture, gl));
+        this.plugins = null;
+    };
+}
 
-    // upload the verts to the buffer
 
-   
-    if(this.currentBatchSize > ( this.size * 0.5 ) )
-    {
-        gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertices);
-    }
-    else
+module.exports = {
+    /**
+     * Mixes in the properties of the pluginTarget into another object
+     *
+     * @param object {object} The obj to mix into
+     */
+    mixin: function mixin(obj)
     {
-        var view = this.vertices.subarray(0, this.currentBatchSize * 4 * this.vertSize);
-
-        gl.bufferSubData(gl.ARRAY_BUFFER, 0, view);
+        pluginTarget(obj);
     }
-    
-    
-    // now draw those suckas!
-    gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0);
-   
-    // then reset the batch!
-    this.currentBatchSize = 0;
-
-    // increment the draw count
-    this.renderSession.drawCount++;
 };
 
+},{}],76:[function(require,module,exports){
+/*global console */
+var core = require('./core'),
+    mesh = require('./mesh'),
+    extras = require('./extras'),
+    utils = require('./core/utils');
 
-PIXI.WebGLFastSpriteBatch.prototype.stop = function()
-{
-    this.flush();
+/**
+ * @class
+ * @private
+ * @name PIXI.SpriteBatch
+ * @see {@link PIXI.ParticleContainer}
+ * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead.
+ */
+core.SpriteBatch = function() {
+    throw new ReferenceError('SpriteBatch does not exist any more, please use the new ParticleContainer instead.');
 };
 
-PIXI.WebGLFastSpriteBatch.prototype.start = function()
-{
-    var gl = this.gl;
-
-    // bind the main texture
-    gl.activeTexture(gl.TEXTURE0);
-
-    // bind the buffers
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+/**
+ * @class
+ * @private
+ * @name PIXI.AssetLoader
+ * @see {@link PIXI.loaders.Loader}
+ * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.
+ */
+core.AssetLoader = function() {
+    throw new ReferenceError('The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.');
+};
 
-    // set the projection
-    var projection = this.renderSession.projection;
-    gl.uniform2f(this.shader.projectionVector, projection.x, projection.y);
+Object.defineProperties(core, {
 
-    // set the matrix
-    gl.uniformMatrix3fv(this.shader.uMatrix, false, this.matrix);
+    /**
+     * @class
+     * @private
+     * @name PIXI.Stage
+     * @see {@link PIXI.Container}
+     * @deprecated since version 3.0
+     */
+    Stage: {
+        get: function() {
+            console.warn('You do not need to use a PIXI Stage any more, you can simply render any container.');
+            return core.Container;
+        }
+    },
 
-    // set the pointers
-    var stride =  this.vertSize * 4;
+    /**
+     * @class
+     * @private
+     * @name PIXI.DisplayObjectContainer
+     * @see {@link PIXI.Container}
+     * @deprecated since version 3.0
+     */
+    DisplayObjectContainer: {
+        get: function() {
+            console.warn('DisplayObjectContainer has been shortened to Container, please use Container from now on.');
+            return core.Container;
+        }
+    },
 
-    gl.vertexAttribPointer(this.shader.aVertexPosition, 2, gl.FLOAT, false, stride, 0);
-    gl.vertexAttribPointer(this.shader.aPositionCoord, 2, gl.FLOAT, false, stride, 2 * 4);
-    gl.vertexAttribPointer(this.shader.aScale, 2, gl.FLOAT, false, stride, 4 * 4);
-    gl.vertexAttribPointer(this.shader.aRotation, 1, gl.FLOAT, false, stride, 6 * 4);
-    gl.vertexAttribPointer(this.shader.aTextureCoord, 2, gl.FLOAT, false, stride, 7 * 4);
-    gl.vertexAttribPointer(this.shader.colorAttribute, 1, gl.FLOAT, false, stride, 9 * 4);
+    /**
+     * @class
+     * @private
+     * @name PIXI.Strip
+     * @see {@link PIXI.mesh.Mesh}
+     * @deprecated since version 3.0
+     */
+    Strip: {
+        get: function() {
+            console.warn('The Strip class has been renamed to Mesh and moved to mesh.Mesh, please use mesh.Mesh from now on.');
+            return mesh.Mesh;
+        }
+    },
 
-    // set the blend mode..
-    if(this.currentBlendMode !== PIXI.blendModes.NORMAL)
-    {
-        this.setBlendMode(PIXI.blendModes.NORMAL);
-    }
-};
+    /**
+     * @class
+     * @private
+     * @name PIXI.Rope
+     * @see {@link PIXI.mesh.Rope}
+     * @deprecated since version 3.0
+     */
+    Rope: {
+        get: function() {
+            console.warn('The Rope class has been moved to mesh.Rope, please use mesh.Rope from now on.');
+            return mesh.Rope;
+        }
+    },
 
-PIXI.WebGLFastSpriteBatch.prototype.setBlendMode = function(blendMode)
-{
-    this.flush();
+    /**
+     * @class
+     * @private
+     * @name PIXI.MovieClip
+     * @see {@link PIXI.MovieClip}
+     * @deprecated since version 3.0
+     */
+    MovieClip: {
+        get: function() {
+            console.warn('The MovieClip class has been moved to extras.MovieClip, please use extras.MovieClip from now on.');
+            return extras.MovieClip;
+        }
+    },
+    /**
+     * @class
+     * @private
+     * @name PIXI.TilingSprite
+     * @see {@link PIXI.TilingSprite}
+     * @deprecated since version 3.0
+     */
+    TilingSprite: {
+        get: function() {
+            console.warn('The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.');
+            return extras.TilingSprite;
+        }
+    },
+    /**
+     * @class
+     * @private
+     * @name PIXI.BitmapText
+     * @see {@link PIXI.extras.BitmapText}
+     * @deprecated since version 3.0
+     */
+    BitmapText: {
+        get: function() {
+            console.warn('The BitmapText class has been moved to extras.BitmapText, please use extras.BitmapText from now on.');
+            return extras.BitmapText;
+        }
+    },
+    /**
+     * @class
+     * @private
+     * @name PIXI.blendModes
+     * @see {@link PIXI.BLEND_MODES}
+     * @deprecated since version 3.0
+     */
+    blendModes: {
+        get: function() {
+            console.warn('The blendModes has been moved to BLEND_MODES, please use BLEND_MODES from now on.');
+            return core.BLEND_MODES;
+        }
+    },
+    /**
+     * @class
+     * @private
+     * @name PIXI.scaleModes
+     * @see {@link PIXI.SCALE_MODES}
+     * @deprecated since version 3.0
+     */
+    scaleModes: {
+        get: function() {
+            console.warn('The scaleModes has been moved to SCALE_MODES, please use SCALE_MODES from now on.');
+            return core.SCALE_MODES;
+        }
+    },
+    /**
+     * @class
+     * @private
+     * @name PIXI.BaseTextureCache
+     * @see {@link PIXI.utils.BaseTextureCache}
+     * @deprecated since version 3.0
+     */
+    BaseTextureCache: {
+        get: function () {
+            console.warn('The BaseTextureCache class has been moved to utils.BaseTextureCache, please use utils.BaseTextureCache from now on.');
+            return utils.BaseTextureCache;
+        }
+    },
+    /**
+     * @class
+     * @private
+     * @name PIXI.TextureCache
+     * @see {@link PIXI.utils.TextureCache}
+     * @deprecated since version 3.0
+     */
+    TextureCache: {
+        get: function () {
+            console.warn('The TextureCache class has been moved to utils.TextureCache, please use utils.TextureCache from now on.');
+            return utils.TextureCache;
+        }
+    }
+});
 
-    this.currentBlendMode = blendMode;
-    
-    var blendModeWebGL = PIXI.blendModesWebGL[this.currentBlendMode];
-    this.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]);
+/**
+ * @method
+ * @private
+ * @name PIXI.Sprite#setTexture
+ * @see {@link PIXI.Sprite#texture}
+ * @deprecated since version 3.0
+ */
+core.Sprite.prototype.setTexture = function(texture) {
+    this.texture = texture;
+    console.warn('setTexture is now deprecated, please use the texture property, e.g : sprite.texture = texture;');
 };
 
-
-
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * @method
+ * @name PIXI.extras.BitmapText#setText
+ * @see {@link PIXI.BitmapText#text}
+ * @deprecated since version 3.0
  */
+extras.BitmapText.prototype.setText = function(text) {
+    this.text = text;
+    console.warn('setText is now deprecated, please use the text property, e.g : myBitmapText.text = \'my text\';');
+};
 
 /**
-* @class WebGLFilterManager
-* @constructor
-* @param gl {WebGLContext} the current WebGL drawing context
-* @param transparent {Boolean} Whether or not the drawing context should be transparent
-* @private
-*/
-PIXI.WebGLFilterManager = function(gl, transparent)
-{
-    this.transparent = transparent;
-
-    this.filterStack = [];
-    
-    this.offsetX = 0;
-    this.offsetY = 0;
-
-    this.setContext(gl);
+ * @method
+ * @name PIXI.Text#setText
+ * @see {@link PIXI.Text#text}
+ * @deprecated since version 3.0
+ */
+core.Text.prototype.setText = function(text) {
+    this.text = text;
+    console.warn('setText is now deprecated, please use the text property, e.g : myText.text = \'my text\';');
 };
 
-// API
 /**
-* Initialises the context and the properties
-* @method setContext 
-* @param gl {WebGLContext} the current WebGL drawing context
-*/
-PIXI.WebGLFilterManager.prototype.setContext = function(gl)
-{
-    this.gl = gl;
-    this.texturePool = [];
-
-    this.initShaderBuffers();
+ * @method
+ * @name PIXI.Text#setStyle
+ * @see {@link PIXI.Text#style}
+ * @deprecated since version 3.0
+ */
+core.Text.prototype.setStyle = function(style) {
+    this.style = style;
+    console.warn('setStyle is now deprecated, please use the style property, e.g : myText.style = style;');
 };
 
 /**
-* 
-* @method begin
-* @param renderSession {RenderSession} 
-* @param buffer {ArrayBuffer} 
-*/
-PIXI.WebGLFilterManager.prototype.begin = function(renderSession, buffer)
-{
-    this.renderSession = renderSession;
-    this.defaultShader = renderSession.shaderManager.defaultShader;
-
-    var projection = this.renderSession.projection;
-
-    this.width = projection.x * 2;
-    this.height = -projection.y * 2;
-    this.buffer = buffer;
+ * @method
+ * @name PIXI.Texture#setFrame
+ * @see {@link PIXI.Texture#setFrame}
+ * @deprecated since version 3.0
+ */
+core.Texture.prototype.setFrame = function(frame) {
+    this.frame = frame;
+    console.warn('setFrame is now deprecated, please use the frame property, e.g : myTexture.frame = frame;');
 };
 
+},{"./core":29,"./core/utils":74,"./extras":83,"./mesh":124}],77:[function(require,module,exports){
+var core = require('../core');
+
 /**
-* Applies the filter and adds it to the current filter stack
-* @method pushFilter
-* @param filterBlock {Object} the filter that will be pushed to the current filter stack
-*/
-PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock)
-{
-    var gl = this.gl;
+ * A BitmapText object will create a line or multiple lines of text using bitmap font. To
+ * split a line you can use '\n', '\r' or '\r\n' in your string. You can generate the fnt files using:
+ *
+ * A BitmapText can only be created when the font is loaded
+ *
+ * ```js
+ * // in this case the font is in a file called 'desyrel.fnt'
+ * var bitmapText = new PIXI.BitmapText("text using a fancy font!", {font: "35px Desyrel", align: "right"});
+ * ```
+ *
+ *
+ * http://www.angelcode.com/products/bmfont/ for windows or
+ * http://www.bmglyph.com/ for mac.
+ *
+ * @class
+ * @extends PIXI.Container
+ * @memberof PIXI.extras
+ * @param text {string} The copy that you would like the text to display
+ * @param style {object} The style parameters
+ * @param style.font {string|object} The font descriptor for the object, can be passed as a string of form
+ *      "24px FontName" or "FontName" or as an object with explicit name/size properties.
+ * @param [style.font.name] {string} The bitmap font id
+ * @param [style.font.size] {number} The size of the font in pixels, e.g. 24
+ * @param [style.align='left'] {string} Alignment for multiline text ('left', 'center' or 'right'), does not affect
+ *      single line text
+ * @param [style.tint=0xFFFFFF] {number} The tint color
+ */
+function BitmapText(text, style)
+{
+    core.Container.call(this);
 
-    var projection = this.renderSession.projection;
-    var offset = this.renderSession.offset;
+    style = style || {};
 
+    /**
+     * The width of the overall text, different from fontSize,
+     * which is defined in the style object
+     *
+     * @member {number}
+     * @readOnly
+     */
+    this.textWidth = 0;
 
-    // filter program
-    // OPTIMISATION - the first filter is free if its a simple color change?
-    this.filterStack.push(filterBlock);
+    /**
+     * The height of the overall text, different from fontSize,
+     * which is defined in the style object
+     *
+     * @member {number}
+     * @readOnly
+     */
+    this.textHeight = 0;
 
-    var filter = filterBlock.filterPasses[0];
+    /**
+     * Private tracker for the letter sprite pool.
+     *
+     * @member {Sprite[]}
+     * @private
+     */
+    this._glyphs = [];
 
-    this.offsetX += filterBlock.target.filterArea.x;
-    this.offsetY += filterBlock.target.filterArea.y;
+    /**
+     * Private tracker for the current style.
+     *
+     * @member {object}
+     * @private
+     */
+    this._font = {
+        tint: style.tint !== undefined ? style.tint : 0xFFFFFF,
+        align: style.align || 'left',
+        name: null,
+        size: 0
+    };
 
-    var texture = this.texturePool.pop();
-    if(!texture)
-    {
-        texture = new PIXI.FilterTexture(this.gl, this.width, this.height);
-    }
-    else
-    {
-        texture.resize(this.width, this.height);
-    }
+    /**
+     * Private tracker for the current font.
+     *
+     * @member {object}
+     * @private
+     */
+    this.font = style.font; // run font setter
 
-    gl.bindTexture(gl.TEXTURE_2D,  texture.texture);
+    /**
+     * Private tracker for the current text.
+     *
+     * @member {string}
+     * @private
+     */
+    this._text = text;
 
-    filterBlock.target.filterArea = filterBlock.target.getBounds();
+    /**
+     * The max width of this bitmap text in pixels. If the text provided is longer than the value provided, line breaks will be automatically inserted in the last whitespace.
+     * Disable by setting value to 0
+     *
+     * @member {number}
+     */
+    this.maxWidth = 0;
 
-    var filterArea = filterBlock.target.filterArea;
+    /**
+     * The dirty state of this object.
+     *
+     * @member {boolean}
+     */
+    this.dirty = false;
 
-    var padidng = filter.padding;
-    filterArea.x -= padidng;
-    filterArea.y -= padidng;
-    filterArea.width += padidng * 2;
-    filterArea.height += padidng * 2;
+    this.updateText();
+}
 
-    // cap filter to screen size..
-    if(filterArea.x < 0)filterArea.x = 0;
-    if(filterArea.width > this.width)filterArea.width = this.width;
-    if(filterArea.y < 0)filterArea.y = 0;
-    if(filterArea.height > this.height)filterArea.height = this.height;
+// constructor
+BitmapText.prototype = Object.create(core.Container.prototype);
+BitmapText.prototype.constructor = BitmapText;
+module.exports = BitmapText;
 
-    //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,  filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-    gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer);
+Object.defineProperties(BitmapText.prototype, {
+    /**
+     * The tint of the BitmapText object
+     *
+     * @member {number}
+     * @memberof BitmapText#
+     */
+    tint: {
+        get: function ()
+        {
+            return this._font.tint;
+        },
+        set: function (value)
+        {
+            this._font.tint = (typeof value === 'number' && value >= 0) ? value : 0xFFFFFF;
 
-    // set view port
-    gl.viewport(0, 0, filterArea.width, filterArea.height);
+            this.dirty = true;
+        }
+    },
 
-    projection.x = filterArea.width/2;
-    projection.y = -filterArea.height/2;
+    /**
+     * The alignment of the BitmapText object
+     *
+     * @member {string}
+     * @default 'left'
+     * @memberof BitmapText#
+     */
+    align: {
+        get: function ()
+        {
+            return this._font.align;
+        },
+        set: function (value)
+        {
+            this._font.align = value || 'left';
 
-    offset.x = -filterArea.x;
-    offset.y = -filterArea.y;
+            this.dirty = true;
+        }
+    },
 
-    // update projection
-    gl.uniform2f(this.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2);
-    gl.uniform2f(this.defaultShader.offsetVector, -filterArea.x, -filterArea.y);
+    /**
+     * The font descriptor of the BitmapText object
+     *
+     * @member {Font}
+     * @memberof BitmapText#
+     */
+    font: {
+        get: function ()
+        {
+            return this._font;
+        },
+        set: function (value)
+        {
+            if (!value) {
+                return;
+            }
 
-    gl.colorMask(true, true, true, true);
-    gl.clearColor(0,0,0, 0);
-    gl.clear(gl.COLOR_BUFFER_BIT);
+            if (typeof value === 'string') {
+                value = value.split(' ');
 
-    filterBlock._glFilterTexture = texture;
+                this._font.name = value.length === 1 ? value[0] : value.slice(1).join(' ');
+                this._font.size = value.length >= 2 ? parseInt(value[0], 10) : BitmapText.fonts[this._font.name].size;
+            }
+            else {
+                this._font.name = value.name;
+                this._font.size = typeof value.size === 'number' ? value.size : parseInt(value.size, 10);
+            }
 
-};
+            this.dirty = true;
+        }
+    },
 
+    /**
+     * The text of the BitmapText object
+     *
+     * @member {string}
+     * @memberof BitmapText#
+     */
+    text: {
+        get: function ()
+        {
+            return this._text;
+        },
+        set: function (value)
+        {
+            value = value.toString() || ' ';
+            if (this._text === value)
+            {
+                return;
+            }
+            this._text = value;
+            this.dirty = true;
+        }
+    }
+});
 
 /**
-* Removes the last filter from the filter stack and doesn't return it
-* @method popFilter
-*/
-PIXI.WebGLFilterManager.prototype.popFilter = function()
+ * Renders text and updates it when needed
+ *
+ * @private
+ */
+BitmapText.prototype.updateText = function ()
 {
-    var gl = this.gl;
-    var filterBlock = this.filterStack.pop();
-    var filterArea = filterBlock.target.filterArea;
-    var texture = filterBlock._glFilterTexture;
-    var projection = this.renderSession.projection;
-    var offset = this.renderSession.offset;
+    var data = BitmapText.fonts[this._font.name];
+    var pos = new core.math.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var lastLineWidth = 0;
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this._font.size / data.size;
+    var lastSpace = -1;
 
-    if(filterBlock.filterPasses.length > 1)
+    for (var i = 0; i < this.text.length; i++)
     {
-        gl.viewport(0, 0, filterArea.width, filterArea.height);
-
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-
-        this.vertexArray[0] = 0;
-        this.vertexArray[1] = filterArea.height;
-
-        this.vertexArray[2] = filterArea.width;
-        this.vertexArray[3] = filterArea.height;
-
-        this.vertexArray[4] = 0;
-        this.vertexArray[5] = 0;
-
-        this.vertexArray[6] = filterArea.width;
-        this.vertexArray[7] = 0;
+        var charCode = this.text.charCodeAt(i);
+        lastSpace = /(\s)/.test(this.text.charAt(i)) ? i : lastSpace;
 
-        gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray);
+        if (/(?:\r\n|\r|\n)/.test(this.text.charAt(i)))
+        {
+            lineWidths.push(lastLineWidth);
+            maxLineWidth = Math.max(maxLineWidth, lastLineWidth);
+            line++;
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
-        // now set the uvs..
-        this.uvArray[2] = filterArea.width/this.width;
-        this.uvArray[5] = filterArea.height/this.height;
-        this.uvArray[6] = filterArea.width/this.width;
-        this.uvArray[7] = filterArea.height/this.height;
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
 
-        gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray);
+        if (lastSpace !== -1 && this.maxWidth > 0 && pos.x * scale > this.maxWidth)
+        {
+            chars.splice(lastSpace, i - lastSpace);
+            i = lastSpace;
+            lastSpace = -1;
 
-        var inputTexture = texture;
-        var outputTexture = this.texturePool.pop();
-        if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.gl, this.width, this.height);
+            lineWidths.push(lastLineWidth);
+            maxLineWidth = Math.max(maxLineWidth, lastLineWidth);
+            line++;
 
-        // need to clear this FBO as it may have some left over elements from a previous filter.
-        gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer );
-        gl.clear(gl.COLOR_BUFFER_BIT);
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
 
-        gl.disable(gl.BLEND);
+        var charData = data.chars[charCode];
 
-        for (var i = 0; i < filterBlock.filterPasses.length-1; i++)
+        if (!charData)
         {
-            var filterPass = filterBlock.filterPasses[i];
-
-            gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer );
-
-            // set texture
-            gl.activeTexture(gl.TEXTURE0);
-            gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture);
-
-            // draw texture..
-            //filterPass.applyFilterPass(filterArea.width, filterArea.height);
-            this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height);
+            continue;
+        }
 
-            // swap the textures..
-            var temp = inputTexture;
-            inputTexture = outputTexture;
-            outputTexture = temp;
+        if (prevCharCode && charData.kerning[prevCharCode])
+        {
+            pos.x += charData.kerning[prevCharCode];
         }
 
-        gl.enable(gl.BLEND);
+        chars.push({texture:charData.texture, line: line, charCode: charCode, position: new core.math.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        lastLineWidth = pos.x + (charData.texture.width + charData.xOffset);
+        pos.x += charData.xAdvance;
 
-        texture = inputTexture;
-        this.texturePool.push(outputTexture);
+        prevCharCode = charCode;
     }
 
-    var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1];
-
-    this.offsetX -= filterArea.x;
-    this.offsetY -= filterArea.y;
+    lineWidths.push(lastLineWidth);
+    maxLineWidth = Math.max(maxLineWidth, lastLineWidth);
 
+    var lineAlignOffsets = [];
 
-    var sizeX = this.width;
-    var sizeY = this.height;
-
-    var offsetX = 0;
-    var offsetY = 0;
-
-    var buffer = this.buffer;
-
-    // time to render the filters texture to the previous scene
-    if(this.filterStack.length === 0)
+    for (i = 0; i <= line; i++)
     {
-        gl.colorMask(true, true, true, this.transparent);
-    }
-    else
-    {
-        var currentFilter = this.filterStack[this.filterStack.length-1];
-        filterArea = currentFilter.target.filterArea;
-
-        sizeX = filterArea.width;
-        sizeY = filterArea.height;
+        var alignOffset = 0;
 
-        offsetX = filterArea.x;
-        offsetY = filterArea.y;
+        if (this._font.align === 'right')
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if (this._font.align === 'center')
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
 
-        buffer =  currentFilter._glFilterTexture.frameBuffer;
+        lineAlignOffsets.push(alignOffset);
     }
 
+    var lenChars = chars.length;
+    var tint = this.tint;
 
-
-    // TODO need toremove thease global elements..
-    projection.x = sizeX/2;
-    projection.y = -sizeY/2;
-
-    offset.x = offsetX;
-    offset.y = offsetY;
-
-    filterArea = filterBlock.target.filterArea;
-
-    var x = filterArea.x-offsetX;
-    var y = filterArea.y-offsetY;
-
-    // update the buffers..
-    // make sure to flip the y!
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-
-    this.vertexArray[0] = x;
-    this.vertexArray[1] = y + filterArea.height;
-
-    this.vertexArray[2] = x + filterArea.width;
-    this.vertexArray[3] = y + filterArea.height;
-
-    this.vertexArray[4] = x;
-    this.vertexArray[5] = y;
-
-    this.vertexArray[6] = x + filterArea.width;
-    this.vertexArray[7] = y;
-
-    gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray);
-
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
-
-    this.uvArray[2] = filterArea.width/this.width;
-    this.uvArray[5] = filterArea.height/this.height;
-    this.uvArray[6] = filterArea.width/this.width;
-    this.uvArray[7] = filterArea.height/this.height;
-
-    gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray);
-
-    gl.viewport(0, 0, sizeX, sizeY);
-    // bind the buffer
-    gl.bindFramebuffer(gl.FRAMEBUFFER, buffer );
-
-    // set the blend mode! 
-    //gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)
-
-    // set texture
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, texture.texture);
-
-    // apply!
-    this.applyFilterPass(filter, filterArea, sizeX, sizeY);
-
-    // now restore the regular shader..
-    gl.useProgram(this.defaultShader.program);
-    gl.uniform2f(this.defaultShader.projectionVector, sizeX/2, -sizeY/2);
-    gl.uniform2f(this.defaultShader.offsetVector, -offsetX, -offsetY);
-
-    // return the texture to the pool
-    this.texturePool.push(texture);
-    filterBlock._glFilterTexture = null;
-};
-
-
-/**
-* Applies the filter to the specified area
-* @method applyFilterPass
-* @param filter {AbstractFilter} the filter that needs to be applied
-* @param filterArea {texture} TODO - might need an update
-* @param width {Number} the horizontal range of the filter
-* @param height {Number} the vertical range of the filter
-*/
-PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height)
-{
-    // use program
-    var gl = this.gl;
-    var shader = filter.shaders[gl.id];
-
-    if(!shader)
+    for (i = 0; i < lenChars; i++)
     {
-        shader = new PIXI.PixiShader(gl);
-
-        shader.fragmentSrc = filter.fragmentSrc;
-        shader.uniforms = filter.uniforms;
-        shader.init();
+        var c = this._glyphs[i]; // get the next glyph sprite
 
-        filter.shaders[gl.id] = shader;
-    }
+        if (c)
+        {
+            c.texture = chars[i].texture;
+        }
+        else
+        {
+            c = new core.Sprite(chars[i].texture);
+            this._glyphs.push(c);
+        }
 
-    // set the shader
-    gl.useProgram(shader.program);
+        c.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        c.position.y = chars[i].position.y * scale;
+        c.scale.x = c.scale.y = scale;
+        c.tint = tint;
 
-    gl.uniform2f(shader.projectionVector, width/2, -height/2);
-    gl.uniform2f(shader.offsetVector, 0,0);
+        if (!c.parent)
+        {
+            this.addChild(c);
+        }
+    }
 
-    if(filter.uniforms.dimensions)
+    // remove unnecessary children.
+    for (i = lenChars; i < this._glyphs.length; ++i)
     {
-        filter.uniforms.dimensions.value[0] = this.width;//width;
-        filter.uniforms.dimensions.value[1] = this.height;//height;
-        filter.uniforms.dimensions.value[2] = this.vertexArray[0];
-        filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height;
+        this.removeChild(this._glyphs[i]);
     }
 
-    shader.syncUniforms();
-
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-    gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
-
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
-    gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
-
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer);
-    gl.vertexAttribPointer(shader.colorAttribute, 2, gl.FLOAT, false, 0, 0);
+    this.textWidth = maxLineWidth * scale;
+    this.textHeight = (pos.y + data.lineHeight) * scale;
+};
 
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+/**
+ * Updates the transform of this object
+ *
+ * @private
+ */
+BitmapText.prototype.updateTransform = function ()
+{
+    this.validate();
+    this.containerUpdateTransform();
+};
 
-    // draw the filter...
-    gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 );
+/**
+ * Validates text before calling parent's getLocalBounds
+ *
+ * @return {Rectangle} The rectangular bounding area
+ */
 
-    this.renderSession.drawCount++;
+BitmapText.prototype.getLocalBounds = function()
+{
+    this.validate();
+    return core.Container.prototype.getLocalBounds.call(this);
 };
 
 /**
-* Initialises the shader buffers
-* @method initShaderBuffers
-*/
-PIXI.WebGLFilterManager.prototype.initShaderBuffers = function()
+ * Updates text when needed
+ *
+ * @private
+ */
+BitmapText.prototype.validate = function()
 {
-    var gl = this.gl;
-
-    // create some buffers
-    this.vertexBuffer = gl.createBuffer();
-    this.uvBuffer = gl.createBuffer();
-    this.colorBuffer = gl.createBuffer();
-    this.indexBuffer = gl.createBuffer();
-
+    if (this.dirty)
+    {
+        this.updateText();
+        this.dirty = false;
+    }
+};
 
-    // bind and upload the vertexs..
-    // keep a reference to the vertexFloatData..
-    this.vertexArray = new Float32Array([0.0, 0.0,
-                                         1.0, 0.0,
-                                         0.0, 1.0,
-                                         1.0, 1.0]);
+BitmapText.fonts = {};
 
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
-    gl.bufferData(
-    gl.ARRAY_BUFFER,
-    this.vertexArray,
-    gl.STATIC_DRAW);
-
-
-    // bind and upload the uv buffer
-    this.uvArray = new Float32Array([0.0, 0.0,
-                                     1.0, 0.0,
-                                     0.0, 1.0,
-                                     1.0, 1.0]);
-
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
-    gl.bufferData(
-    gl.ARRAY_BUFFER,
-    this.uvArray,
-    gl.STATIC_DRAW);
-
-    this.colorArray = new Float32Array([1.0, 0xFFFFFF,
-                                        1.0, 0xFFFFFF,
-                                        1.0, 0xFFFFFF,
-                                        1.0, 0xFFFFFF]);
-
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer);
-    gl.bufferData(
-    gl.ARRAY_BUFFER,
-    this.colorArray,
-    gl.STATIC_DRAW);
-
-    // bind and upload the index
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
-    gl.bufferData(
-    gl.ELEMENT_ARRAY_BUFFER,
-    new Uint16Array([0, 1, 2, 1, 3, 2]),
-    gl.STATIC_DRAW);
-};
+},{"../core":29}],78:[function(require,module,exports){
+var core    = require('../core'),
+    ticker  = require('../ticker');
 
 /**
-* Destroys the filter and removes it from the filter stack
-* @method destroy
-*/
-PIXI.WebGLFilterManager.prototype.destroy = function()
+ * A MovieClip is a simple way to display an animation depicted by a list of textures.
+ *
+ * ```js
+ * var alienImages = ["image_sequence_01.png","image_sequence_02.png","image_sequence_03.png","image_sequence_04.png"];
+ * var textureArray = [];
+ *
+ * for (var i=0; i < 4; i++)
+ * {
+ *      var texture = PIXI.Texture.fromImage(alienImages[i]);
+ *      textureArray.push(texture);
+ * };
+ *
+ * var mc = new PIXI.MovieClip(textureArray);
+ * ```
+ *
+ * @class
+ * @extends PIXI.Sprite
+ * @memberof PIXI.extras
+ * @param textures {Texture[]} an array of {Texture} objects that make up the animation
+ */
+function MovieClip(textures)
 {
-    var gl = this.gl;
+    core.Sprite.call(this, textures[0]);
 
-    this.filterStack = null;
-    
-    this.offsetX = 0;
-    this.offsetY = 0;
+    /**
+     * @private
+     */
+    this._textures = textures;
 
-    // destroy textures
-    for (var i = 0; i < this.texturePool.length; i++) {
-        this.texturePool.destroy();
-    }
-    
-    this.texturePool = null;
+    /**
+     * The speed that the MovieClip will play at. Higher is faster, lower is slower
+     *
+     * @member {number}
+     * @default 1
+     */
+    this.animationSpeed = 1;
 
-    //destroy buffers..
-    gl.deleteBuffer(this.vertexBuffer);
-    gl.deleteBuffer(this.uvBuffer);
-    gl.deleteBuffer(this.colorBuffer);
-    gl.deleteBuffer(this.indexBuffer);
-};
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+    /**
+     * Whether or not the movie clip repeats after playing.
+     *
+     * @member {boolean}
+     * @default true
+     */
+    this.loop = true;
 
-/**
-* @class FilterTexture
-* @constructor
-* @param gl {WebGLContext} the current WebGL drawing context
-* @param width {Number} the horizontal range of the filter
-* @param height {Number} the vertical range of the filter
-* @private
-*/
-PIXI.FilterTexture = function(gl, width, height)
-{
     /**
-     * @property gl
-     * @type WebGLContext
+     * Function to call when a MovieClip finishes playing
+     *
+     * @method
+     * @memberof MovieClip#
      */
-    this.gl = gl;
+    this.onComplete = null;
 
-    // next time to create a frame buffer and texture
-    this.frameBuffer = gl.createFramebuffer();
-    this.texture = gl.createTexture();
+    /**
+     * Elapsed time since animation has been started, used internally to display current texture
+     *
+     * @member {number}
+     * @private
+     */
+    this._currentTime = 0;
 
-    gl.bindTexture(gl.TEXTURE_2D,  this.texture);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-    gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer );
+    /**
+     * Indicates if the MovieClip is currently playing
+     *
+     * @member {boolean}
+     * @readonly
+     */
+    this.playing = false;
+}
 
-    gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer );
-    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);
+// constructor
+MovieClip.prototype = Object.create(core.Sprite.prototype);
+MovieClip.prototype.constructor = MovieClip;
+module.exports = MovieClip;
 
-    this.resize(width, height);
-};
+Object.defineProperties(MovieClip.prototype, {
+    /**
+     * totalFrames is the total number of frames in the MovieClip. This is the same as number of textures
+     * assigned to the MovieClip.
+     *
+     * @member {number}
+     * @memberof PIXI.MovieClip#
+     * @default 0
+     * @readonly
+     */
+    totalFrames: {
+        get: function()
+        {
+            return this._textures.length;
+        }
+    },
+
+    /**
+     * The array of textures used for this MovieClip
+     *
+     * @member {PIXI.Texture[]}
+     * @memberof PIXI.MovieClip#
+     *
+     */
+    textures: {
+        get: function ()
+        {
+            return this._textures;
+        },
+        set: function (value)
+        {
+            this._textures = value;
+
+            this.texture = this._textures[Math.floor(this._currentTime) % this._textures.length];
+        }
+    },
+
+    /**
+    * The MovieClips current frame index
+    *
+    * @member {number}
+    * @memberof PIXI.MovieClip#
+    * @readonly 
+    */
+    currentFrame: {
+        get: function ()
+        {
+            return Math.floor(this._currentTime) % this._textures.length;
+        }
+    }
 
+});
 
 /**
-* Clears the filter texture
-* @method clear
-*/
-PIXI.FilterTexture.prototype.clear = function()
+ * Stops the MovieClip
+ *
+ */
+MovieClip.prototype.stop = function ()
 {
-    var gl = this.gl;
-    
-    gl.clearColor(0,0,0, 0);
-    gl.clear(gl.COLOR_BUFFER_BIT);
+    if(!this.playing)
+    {
+        return;
+    }
+
+    this.playing = false;
+    ticker.shared.remove(this.update, this);
 };
 
 /**
- * Resizes the texture to the specified width and height
+ * Plays the MovieClip
  *
- * @method resize
- * @param width {Number} the new width of the texture
- * @param height {Number} the new height of the texture
  */
-PIXI.FilterTexture.prototype.resize = function(width, height)
+MovieClip.prototype.play = function ()
 {
-    if(this.width === width && this.height === height) return;
-
-    this.width = width;
-    this.height = height;
-
-    var gl = this.gl;
-
-    gl.bindTexture(gl.TEXTURE_2D,  this.texture);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,  width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+    if(this.playing)
+    {
+        return;
+    }
 
+    this.playing = true;
+    ticker.shared.add(this.update, this);
 };
 
 /**
-* Destroys the filter texture
-* @method destroy
-*/
-PIXI.FilterTexture.prototype.destroy = function()
+ * Stops the MovieClip and goes to a specific frame
+ *
+ * @param frameNumber {number} frame index to stop at
+ */
+MovieClip.prototype.gotoAndStop = function (frameNumber)
 {
-    var gl = this.gl;
-    gl.deleteFramebuffer( this.frameBuffer );
-    gl.deleteTexture( this.texture );
+    this.stop();
 
-    this.frameBuffer = null;
-    this.texture = null;
+    this._currentTime = frameNumber;
+
+    var round = Math.floor(this._currentTime);
+    this._texture = this._textures[round % this._textures.length];
 };
 
 /**
- * @author Mat Groves
- * 
- * 
- */
-/**
- * A set of functions used to handle masking
+ * Goes to a specific frame and begins playing the MovieClip
  *
- * @class CanvasMaskManager
+ * @param frameNumber {number} frame index to start at
  */
-PIXI.CanvasMaskManager = function()
+MovieClip.prototype.gotoAndPlay = function (frameNumber)
 {
-    
+    this._currentTime = frameNumber;
+    this.play();
 };
 
-/**
- * This method adds it to the current stack of masks
- *
- * @method pushMask
- * @param maskData the maskData that will be pushed
- * @param context {Context2D} the 2d drawing method of the canvas
+/*
+ * Updates the object transform for rendering
+ * @private
  */
-PIXI.CanvasMaskManager.prototype.pushMask = function(maskData, context)
+MovieClip.prototype.update = function (deltaTime)
 {
-    context.save();
-    
-    var cacheAlpha = maskData.alpha;
-    var transform = maskData.worldTransform;
 
-    context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty);
+    this._currentTime += this.animationSpeed * deltaTime;
 
-    PIXI.CanvasGraphics.renderGraphicsMask(maskData, context);
+    var floor = Math.floor(this._currentTime);
 
-    context.clip();
+    if (floor < 0)
+    {
+        if (this.loop)
+        {
+            this._currentTime += this._textures.length;
+            this._texture = this._textures[this._currentTime];
+        }
+        else
+        {
+            this.gotoAndStop(0);
 
-    maskData.worldAlpha = cacheAlpha;
+            if (this.onComplete)
+            {
+                this.onComplete();
+            }
+        }
+    }
+    else if (this.loop || floor < this._textures.length)
+    {
+        this._texture = this._textures[floor % this._textures.length];
+    }
+    else if (floor >= this._textures.length)
+    {
+        this.gotoAndStop(this.textures.length - 1);
+
+        if (this.onComplete)
+        {
+            this.onComplete();
+        }
+    }
 };
 
-/**
- * Restores the current drawing context to the state it was before the mask was applied
+/*
+ * Stops the MovieClip and destroys it
  *
- * @method popMask
- * @param context {Context2D} the 2d drawing method of the canvas
  */
-PIXI.CanvasMaskManager.prototype.popMask = function(context)
+MovieClip.prototype.destroy = function ( )
 {
-    context.restore();
+    this.stop();
+    core.Sprite.prototype.destroy.call(this);
 };
 
 /**
- * @author Mat Groves
- * 
- * 
+ * A short hand way of creating a movieclip from an array of frame ids
+ *
+ * @static
+ * @param frames {string[]} the array of frames ids the movieclip will use as its texture frames
  */
+MovieClip.fromFrames = function (frames)
+{
+    var textures = [];
+
+    for (var i = 0; i < frames.length; ++i)
+    {
+        textures.push(new core.Texture.fromFrame(frames[i]));
+    }
+
+    return new MovieClip(textures);
+};
 
 /**
- * @class CanvasTinter
- * @constructor
+ * A short hand way of creating a movieclip from an array of image ids
+ *
  * @static
+ * @param images {string[]} the array of image urls the movieclip will use as its texture frames
  */
-PIXI.CanvasTinter = function()
+MovieClip.fromImages = function (images)
 {
-    /// this.textureCach
+    var textures = [];
+
+    for (var i = 0; i < images.length; ++i)
+    {
+        textures.push(new core.Texture.fromImage(images[i]));
+    }
+
+    return new MovieClip(textures);
 };
 
-//PIXI.CanvasTinter.cachTint = true;
-    
+},{"../core":29,"../ticker":131}],79:[function(require,module,exports){
+var core = require('../core'),
+    // a sprite use dfor rendering textures..
+    tempPoint = new core.Point();
 
 /**
- * Basically this method just needs a sprite and a color and tints the sprite 
- * with the given color
- * 
- * @method getTintedTexture 
- * @param sprite {Sprite} the sprite to tint
- * @param color {Number} the color to use to tint the sprite with
+ * A tiling sprite is a fast way of rendering a tiling image
+ *
+ * @class
+ * @extends PIXI.Sprite
+ * @memberof PIXI.extras
+ * @param texture {Texture} the texture of the tiling sprite
+ * @param width {number}  the width of the tiling sprite
+ * @param height {number} the height of the tiling sprite
  */
-PIXI.CanvasTinter.getTintedTexture = function(sprite, color)
+function TilingSprite(texture, width, height)
 {
+    core.Sprite.call(this, texture);
 
-    var texture = sprite.texture;
+    /**
+     * The scaling of the image that is being tiled
+     *
+     * @member {Point}
+     */
+    this.tileScale = new core.math.Point(1,1);
 
-    color = PIXI.CanvasTinter.roundColor(color);
 
-    var stringColor = "#" + ("00000" + ( color | 0).toString(16)).substr(-6);
-   
-    texture.tintCache = texture.tintCache || {};
+    /**
+     * The offset position of the image that is being tiled
+     *
+     * @member {Point}
+     */
+    this.tilePosition = new core.math.Point(0,0);
 
-    if(texture.tintCache[stringColor]) return texture.tintCache[stringColor];
+    ///// private
 
-     // clone texture..
-    var canvas = PIXI.CanvasTinter.canvas || document.createElement("canvas");
-    
-    //PIXI.CanvasTinter.tintWithPerPixel(texture, stringColor, canvas);
+    /**
+     * The with of the tiling sprite
+     *
+     * @member {number}
+     * @private
+     */
+    this._width = width || 100;
+
+    /**
+     * The height of the tiling sprite
+     *
+     * @member {number}
+     * @private
+     */
+    this._height = height || 100;
+
+    /**
+     * An internal WebGL UV cache.
+     *
+     * @member {TextureUvs}
+     * @private
+     */
+    this._uvs = new core.TextureUvs();
+
+    this._canvasPattern = null;
+
+    //TODO move..
+    this.shader = new core.AbstractFilter(
+
+      [
+        'precision lowp float;',
+        'attribute vec2 aVertexPosition;',
+        'attribute vec2 aTextureCoord;',
+        'attribute vec4 aColor;',
+
+        'uniform mat3 projectionMatrix;',
+
+        'uniform vec4 uFrame;',
+        'uniform vec4 uTransform;',
+
+        'varying vec2 vTextureCoord;',
+        'varying vec4 vColor;',
+
+        'void main(void){',
+        '   gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);',
+
+        '   vec2 coord = aTextureCoord;',
+        '   coord -= uTransform.xy;',
+        '   coord /= uTransform.zw;',
+        '   coord /= uFrame.zw;',
+        '   vTextureCoord = coord;',
+
+        '   vColor = vec4(aColor.rgb * aColor.a, aColor.a);',
+        '}'
+      ].join('\n'),
+      [
+        'precision lowp float;',
+
+        'varying vec2 vTextureCoord;',
+        'varying vec4 vColor;',
+
+        'uniform sampler2D uSampler;',
+        'uniform vec4 uFrame;',
+
+        'void main(void){',
+
+        '   vec2 coord = fract(vTextureCoord);',
+        '   coord *= uFrame.zw;',
+        '   coord += uFrame.xy;',
+
+        '   gl_FragColor =  texture2D(uSampler, coord) * vColor ;',
+        '}'
+      ].join('\n'),
+
+            // set the uniforms
+            {
+                uFrame: { type: '4fv', value: [0,0,1,1] },
+
+                uTransform: { type: '4fv', value: [0,0,1,1] }
+            }
+      );
+}
 
-    
-    PIXI.CanvasTinter.tintMethod(texture, color, canvas);
+TilingSprite.prototype = Object.create(core.Sprite.prototype);
+TilingSprite.prototype.constructor = TilingSprite;
+module.exports = TilingSprite;
 
-    if(PIXI.CanvasTinter.convertTintToImage)
-    {
-        // is this better?
-        var tintImage = new Image();
-        tintImage.src = canvas.toDataURL();
 
-        texture.tintCache[stringColor] = tintImage;
-    }
-    else
-    {
-      
-        texture.tintCache[stringColor] = canvas;
-        // if we are not converting the texture to an image then we need to lose the reference to the canvas
-        PIXI.CanvasTinter.canvas = null;
+Object.defineProperties(TilingSprite.prototype, {
+    /**
+     * The width of the sprite, setting this will actually modify the scale to achieve the value set
+     *
+     * @member {number}
+     * @memberof TilingSprite#
+     */
+    width: {
+        get: function ()
+        {
+            return this._width;
+        },
+        set: function (value)
+        {
+            this._width = value;
+        }
+    },
 
+    /**
+     * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set
+     *
+     * @member {number}
+     * @memberof TilingSprite#
+     */
+    height: {
+        get: function ()
+        {
+            return this._height;
+        },
+        set: function (value)
+        {
+            this._height = value;
+        }
     }
+});
 
-    return canvas;
+TilingSprite.prototype._onTextureUpdate = function ()
+{
+    return;
 };
 
+
 /**
- * Tint a texture using the "multiply" operation
- * @method tintWithMultiply
- * @param texture {texture} the texture to tint
- * @param color {Number} the color to use to tint the sprite with
- * @param canvas {HTMLCanvasElement} the current canvas
+ * Renders the object using the WebGL renderer
+ *
+ * @param renderer {WebGLRenderer}
+ * @private
  */
-PIXI.CanvasTinter.tintWithMultiply = function(texture, color, canvas)
+TilingSprite.prototype._renderWebGL = function (renderer)
 {
-    var context = canvas.getContext( "2d" );
+    // tweak our texture temporarily..
+    var texture = this._texture;
 
-    var frame = texture.frame;
+    if(!texture || !texture._uvs)
+    {
+        return;
+    }
 
-    canvas.width = frame.width;
-    canvas.height = frame.height;
+    var tempUvs = texture._uvs,
+        tempWidth = texture._frame.width,
+        tempHeight = texture._frame.height,
+        tw = texture.baseTexture.width,
+        th = texture.baseTexture.height;
 
-    context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6);
-    
-    context.fillRect(0, 0, frame.width, frame.height);
-    
-    context.globalCompositeOperation = "multiply";
-
-    context.drawImage(texture.baseTexture.source,
-                           frame.x,
-                           frame.y,
-                           frame.width,
-                           frame.height,
-                           0,
-                           0,
-                           frame.width,
-                           frame.height);
-
-    context.globalCompositeOperation = "destination-atop";
-    
-    context.drawImage(texture.baseTexture.source,
-                           frame.x,
-                           frame.y,
-                           frame.width,
-                           frame.height,
-                           0,
-                           0,
-                           frame.width,
-                           frame.height);
-};
-
-/**
- * Tint a texture using the "overlay" operation
- * @method tintWithOverlay
- * @param texture {texture} the texture to tint
- * @param color {Number} the color to use to tint the sprite with
- * @param canvas {HTMLCanvasElement} the current canvas
- */
-PIXI.CanvasTinter.tintWithOverlay = function(texture, color, canvas)
-{
-    var context = canvas.getContext( "2d" );
+    texture._uvs = this._uvs;
+    texture._frame.width = this.width;
+    texture._frame.height = this.height;
 
-    var frame = texture.frame;
+    //PADDING
 
-    canvas.width = frame.width;
-    canvas.height = frame.height;
+    // apply padding to stop gaps in the tile when numbers are not rounded
+    this.shader.uniforms.uFrame.value[0] = tempUvs.x0;
+    this.shader.uniforms.uFrame.value[1] = tempUvs.y0;
+    this.shader.uniforms.uFrame.value[2] = tempUvs.x1 - tempUvs.x0;
+    this.shader.uniforms.uFrame.value[3] = tempUvs.y2 - tempUvs.y0;
 
-    
-    
-    context.globalCompositeOperation = "copy";
-    context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6);
-    context.fillRect(0, 0, frame.width, frame.height);
-
-    context.globalCompositeOperation = "destination-atop";
-    context.drawImage(texture.baseTexture.source,
-                           frame.x,
-                           frame.y,
-                           frame.width,
-                           frame.height,
-                           0,
-                           0,
-                           frame.width,
-                           frame.height);
+    this.shader.uniforms.uTransform.value[0] = (this.tilePosition.x % tempWidth) / this._width;
+    this.shader.uniforms.uTransform.value[1] = (this.tilePosition.y % tempHeight) / this._height;
+    this.shader.uniforms.uTransform.value[2] = ( tw / this._width ) * this.tileScale.x;
+    this.shader.uniforms.uTransform.value[3] = ( th / this._height ) * this.tileScale.y;
 
-    
-    //context.globalCompositeOperation = "copy";
+    renderer.setObjectRenderer(renderer.plugins.sprite);
+    renderer.plugins.sprite.render(this);
 
+    texture._uvs = tempUvs;
+    texture._frame.width = tempWidth;
+    texture._frame.height = tempHeight;
 };
 
 /**
- * Tint a texture pixel per pixel
- * @method tintPerPixel
- * @param texture {texture} the texture to tint
- * @param color {Number} the color to use to tint the sprite with
- * @param canvas {HTMLCanvasElement} the current canvas
+ * Renders the object using the Canvas renderer
+ *
+ * @param renderer {CanvasRenderer} a reference to the canvas renderer
+ * @private
  */
-PIXI.CanvasTinter.tintWithPerPixel = function(texture, color, canvas)
+TilingSprite.prototype._renderCanvas = function (renderer)
 {
-    var context = canvas.getContext( "2d" );
+    var texture = this._texture;
 
-    var frame = texture.frame;
+    if (!texture.baseTexture.hasLoaded)
+    {
+      return;
+    }
 
-    canvas.width = frame.width;
-    canvas.height = frame.height;
-  
-    context.globalCompositeOperation = "copy";
-    context.drawImage(texture.baseTexture.source,
-                           frame.x,
-                           frame.y,
-                           frame.width,
-                           frame.height,
-                           0,
-                           0,
-                           frame.width,
-                           frame.height);
+    var context = renderer.context,
+        transform = this.worldTransform,
+        resolution = renderer.resolution,
+        baseTexture = texture.baseTexture,
+        modX = this.tilePosition.x % texture._frame.width,
+        modY = this.tilePosition.y % texture._frame.height;
 
-    var rgbValues = PIXI.hex2rgb(color);
-    var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2];
+    // create a nice shiny pattern!
+    // TODO this needs to be refreshed if texture changes..
+    if(!this._canvasPattern)
+    {
+        // cut an object from a spritesheet..
+        var tempCanvas = new core.CanvasBuffer(texture._frame.width, texture._frame.height);
+        tempCanvas.context.drawImage(baseTexture.source, -texture._frame.x,-texture._frame.y);
+        this._canvasPattern = tempCanvas.context.createPattern( tempCanvas.canvas, 'repeat' );
+    }
 
-    var pixelData = context.getImageData(0, 0, frame.width, frame.height);
+    // set context state..
+    context.globalAlpha = this.worldAlpha;
+    context.setTransform(transform.a * resolution,
+                       transform.b * resolution,
+                       transform.c * resolution,
+                       transform.d * resolution,
+                       transform.tx * resolution,
+                       transform.ty * resolution);
 
-    var pixels = pixelData.data;
+    // TODO - this should be rolled into the setTransform above..
+    context.scale(this.tileScale.x,this.tileScale.y);
 
-    for (var i = 0; i < pixels.length; i += 4)
-    {
-        pixels[i+0] *= r;
-        pixels[i+1] *= g;
-        pixels[i+2] *= b;
-    }
 
-    context.putImageData(pixelData, 0, 0);
-};
+    context.translate(modX + (this.anchor.x * -this._width ),
+                      modY + (this.anchor.y * -this._height));
 
-/**
- * Rounds the specified color according to the PIXI.CanvasTinter.cacheStepsPerColorChannel
- * @method roundColor
- * @param color {number} the color to round, should be a hex color
- */
-PIXI.CanvasTinter.roundColor = function(color)
-{
-    var step = PIXI.CanvasTinter.cacheStepsPerColorChannel;
+    // check blend mode
+    if (this.blendMode !== renderer.currentBlendMode)
+    {
+        renderer.currentBlendMode = this.blendMode;
+        context.globalCompositeOperation = renderer.blendModes[renderer.currentBlendMode];
+    }
 
-    var rgbValues = PIXI.hex2rgb(color);
+    // fill the pattern!
+    context.fillStyle = this._canvasPattern;
+    context.fillRect(-modX,
+                     -modY,
+                     this._width / this.tileScale.x,
+                     this._height / this.tileScale.y);
 
-    rgbValues[0] = Math.min(255, (rgbValues[0] / step) * step);
-    rgbValues[1] = Math.min(255, (rgbValues[1] / step) * step);
-    rgbValues[2] = Math.min(255, (rgbValues[2] / step) * step);
 
-    return PIXI.rgb2hex(rgbValues);
+    //TODO - pretty sure this can be deleted...
+    //context.translate(-this.tilePosition.x + (this.anchor.x * this._width), -this.tilePosition.y + (this.anchor.y * this._height));
+    //context.scale(1 / this.tileScale.x, 1 / this.tileScale.y);
 };
 
-/**
- * 
- * Number of steps which will be used as a cap when rounding colors
- *
- * @property cacheStepsPerColorChannel
- * @type Number
- */
-PIXI.CanvasTinter.cacheStepsPerColorChannel = 8;
-/**
- * 
- * Number of steps which will be used as a cap when rounding colors
- *
- * @property convertTintToImage
- * @type Boolean
- */
-PIXI.CanvasTinter.convertTintToImage = false;
 
 /**
- * Whether or not the Canvas BlendModes are supported, consequently the ability to tint using the multiply method
- *
- * @property canUseMultiply
- * @type Boolean
+ * Returns the framing rectangle of the sprite as a Rectangle object
+*
+ * @return {Rectangle} the framing rectangle
  */
-PIXI.CanvasTinter.canUseMultiply = PIXI.canUseNewCanvasBlendModes();
+TilingSprite.prototype.getBounds = function ()
+{
+    var width = this._width;
+    var height = this._height;
 
-PIXI.CanvasTinter.tintMethod = PIXI.CanvasTinter.canUseMultiply ? PIXI.CanvasTinter.tintWithMultiply :  PIXI.CanvasTinter.tintWithPerPixel;
+    var w0 = width * (1-this.anchor.x);
+    var w1 = width * -this.anchor.x;
 
+    var h0 = height * (1-this.anchor.y);
+    var h1 = height * -this.anchor.y;
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+    var worldTransform = this.worldTransform;
 
-/**
- * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL.
- * Dont forget to add the view to your DOM or you will not see anything :)
- *
- * @class CanvasRenderer
- * @constructor
- * @param width=800 {Number} the width of the canvas view
- * @param height=600 {Number} the height of the canvas view
- * @param [view] {HTMLCanvasElement} the canvas to use as a view, optional
- * @param [transparent=false] {Boolean} the transparency of the render view, default false
- */
-PIXI.CanvasRenderer = function(width, height, view, transparent)
-{
-    PIXI.defaultRenderer = PIXI.defaultRenderer || this;
+    var a = worldTransform.a;
+    var b = worldTransform.b;
+    var c = worldTransform.c;
+    var d = worldTransform.d;
+    var tx = worldTransform.tx;
+    var ty = worldTransform.ty;
 
-    this.type = PIXI.CANVAS_RENDERER;
+    var x1 = a * w1 + c * h1 + tx;
+    var y1 = d * h1 + b * w1 + ty;
 
-    /**
-     * This sets if the CanvasRenderer will clear the canvas or not before the new render pass.
-     * If the Stage is NOT transparent Pixi will use a canvas sized fillRect operation every frame to set the canvas background color.
-     * If the Stage is transparent Pixi will use clearRect to clear the canvas every frame.
-     * Disable this by setting this to false. For example if your game has a canvas filling background image you often don't need this set.
-     *
-     * @property clearBeforeRender
-     * @type Boolean
-     * @default
-     */
-    this.clearBeforeRender = true;
+    var x2 = a * w0 + c * h1 + tx;
+    var y2 = d * h1 + b * w0 + ty;
 
-    /**
-     * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation.
-     * Handy for crisp pixel art and speed on legacy devices.
-     *
-     * @property roundPixels
-     * @type Boolean
-     * @default
-     */
-    this.roundPixels = false;
+    var x3 = a * w0 + c * h0 + tx;
+    var y3 = d * h0 + b * w0 + ty;
 
-    /**
-     * Whether the render view is transparent
-     *
-     * @property transparent
-     * @type Boolean
-     */
-    this.transparent = !!transparent;
+    var x4 =  a * w1 + c * h0 + tx;
+    var y4 =  d * h0 + b * w1 + ty;
 
-    if(!PIXI.blendModesCanvas)
-    {
-        PIXI.blendModesCanvas = [];
-        
-        if(PIXI.canUseNewCanvasBlendModes())
-        {
-            PIXI.blendModesCanvas[PIXI.blendModes.NORMAL]   = "source-over";
-            PIXI.blendModesCanvas[PIXI.blendModes.ADD]      = "lighter"; //IS THIS OK???
-            PIXI.blendModesCanvas[PIXI.blendModes.MULTIPLY] = "multiply";
-            PIXI.blendModesCanvas[PIXI.blendModes.SCREEN]   = "screen";
-            PIXI.blendModesCanvas[PIXI.blendModes.OVERLAY]  = "overlay";
-            PIXI.blendModesCanvas[PIXI.blendModes.DARKEN]   = "darken";
-            PIXI.blendModesCanvas[PIXI.blendModes.LIGHTEN]  = "lighten";
-            PIXI.blendModesCanvas[PIXI.blendModes.COLOR_DODGE] = "color-dodge";
-            PIXI.blendModesCanvas[PIXI.blendModes.COLOR_BURN] = "color-burn";
-            PIXI.blendModesCanvas[PIXI.blendModes.HARD_LIGHT] = "hard-light";
-            PIXI.blendModesCanvas[PIXI.blendModes.SOFT_LIGHT] = "soft-light";
-            PIXI.blendModesCanvas[PIXI.blendModes.DIFFERENCE] = "difference";
-            PIXI.blendModesCanvas[PIXI.blendModes.EXCLUSION] = "exclusion";
-            PIXI.blendModesCanvas[PIXI.blendModes.HUE]       = "hue";
-            PIXI.blendModesCanvas[PIXI.blendModes.SATURATION] = "saturation";
-            PIXI.blendModesCanvas[PIXI.blendModes.COLOR]      = "color";
-            PIXI.blendModesCanvas[PIXI.blendModes.LUMINOSITY] = "luminosity";
-        }
-        else
-        {
-            // this means that the browser does not support the cool new blend modes in canvas "cough" ie "cough"
-            PIXI.blendModesCanvas[PIXI.blendModes.NORMAL]   = "source-over";
-            PIXI.blendModesCanvas[PIXI.blendModes.ADD]      = "lighter"; //IS THIS OK???
-            PIXI.blendModesCanvas[PIXI.blendModes.MULTIPLY] = "source-over";
-            PIXI.blendModesCanvas[PIXI.blendModes.SCREEN]   = "source-over";
-            PIXI.blendModesCanvas[PIXI.blendModes.OVERLAY]  = "source-over";
-            PIXI.blendModesCanvas[PIXI.blendModes.DARKEN]   = "source-over";
-            PIXI.blendModesCanvas[PIXI.blendModes.LIGHTEN]  = "source-over";
-            PIXI.blendModesCanvas[PIXI.blendModes.COLOR_DODGE] = "source-over";
-            PIXI.blendModesCanvas[PIXI.blendModes.COLOR_BURN] = "source-over";
-            PIXI.blendModesCanvas[PIXI.blendModes.HARD_LIGHT] = "source-over";
-            PIXI.blendModesCanvas[PIXI.blendModes.SOFT_LIGHT] = "source-over";
-            PIXI.blendModesCanvas[PIXI.blendModes.DIFFERENCE] = "source-over";
-            PIXI.blendModesCanvas[PIXI.blendModes.EXCLUSION] = "source-over";
-            PIXI.blendModesCanvas[PIXI.blendModes.HUE]       = "source-over";
-            PIXI.blendModesCanvas[PIXI.blendModes.SATURATION] = "source-over";
-            PIXI.blendModesCanvas[PIXI.blendModes.COLOR]      = "source-over";
-            PIXI.blendModesCanvas[PIXI.blendModes.LUMINOSITY] = "source-over";
-        }
-    }
+    var minX,
+        maxX,
+        minY,
+        maxY;
 
-    /**
-     * The width of the canvas view
-     *
-     * @property width
-     * @type Number
-     * @default 800
-     */
-    this.width = width || 800;
+    minX = x1;
+    minX = x2 < minX ? x2 : minX;
+    minX = x3 < minX ? x3 : minX;
+    minX = x4 < minX ? x4 : minX;
 
-    /**
-     * The height of the canvas view
-     *
-     * @property height
-     * @type Number
-     * @default 600
-     */
-    this.height = height || 600;
+    minY = y1;
+    minY = y2 < minY ? y2 : minY;
+    minY = y3 < minY ? y3 : minY;
+    minY = y4 < minY ? y4 : minY;
 
-    /**
-     * The canvas element that everything is drawn to
-     *
-     * @property view
-     * @type HTMLCanvasElement
-     */
-    this.view = view || document.createElement( "canvas" );
+    maxX = x1;
+    maxX = x2 > maxX ? x2 : maxX;
+    maxX = x3 > maxX ? x3 : maxX;
+    maxX = x4 > maxX ? x4 : maxX;
 
-    /**
-     * The canvas 2d context that everything is drawn with
-     * @property context
-     * @type HTMLCanvasElement 2d Context
-     */
-    this.context = this.view.getContext( "2d", { alpha: this.transparent } );
+    maxY = y1;
+    maxY = y2 > maxY ? y2 : maxY;
+    maxY = y3 > maxY ? y3 : maxY;
+    maxY = y4 > maxY ? y4 : maxY;
 
-    this.refresh = true;
-    // hack to enable some hardware acceleration!
-    //this.view.style["transform"] = "translatez(0)";
+    var bounds = this._bounds;
 
-    this.view.width = this.width;
-    this.view.height = this.height;
-    this.count = 0;
+    bounds.x = minX;
+    bounds.width = maxX - minX;
 
-    /**
-     * Instance of a PIXI.CanvasMaskManager, handles masking when using the canvas renderer
-     * @property CanvasMaskManager
-     * @type CanvasMaskManager
-     */
-    this.maskManager = new PIXI.CanvasMaskManager();
+    bounds.y = minY;
+    bounds.height = maxY - minY;
 
-    /**
-     * The render session is just a bunch of parameter used for rendering
-     * @property renderSession
-     * @type Object
-     */
-    this.renderSession = {
-        context: this.context,
-        maskManager: this.maskManager,
-        scaleMode: null,
-        smoothProperty: null
-    };
+    // store a reference so that if this function gets called again in the render cycle we do not have to recalculate
+    this._currentBounds = bounds;
 
-    if("imageSmoothingEnabled" in this.context)
-        this.renderSession.smoothProperty = "imageSmoothingEnabled";
-    else if("webkitImageSmoothingEnabled" in this.context)
-        this.renderSession.smoothProperty = "webkitImageSmoothingEnabled";
-    else if("mozImageSmoothingEnabled" in this.context)
-        this.renderSession.smoothProperty = "mozImageSmoothingEnabled";
-    else if("oImageSmoothingEnabled" in this.context)
-        this.renderSession.smoothProperty = "oImageSmoothingEnabled";
+    return bounds;
 };
 
-// constructor
-PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer;
-
 /**
- * Renders the stage to its canvas view
- *
- * @method render
- * @param stage {Stage} the Stage element to be rendered
+ * Checks if a point is inside this tiling sprite
+ * @param point {Point} the point to check
  */
-PIXI.CanvasRenderer.prototype.render = function(stage)
+TilingSprite.prototype.containsPoint = function( point )
 {
-    // update textures if need be
-    PIXI.texturesToUpdate.length = 0;
-    PIXI.texturesToDestroy.length = 0;
-
-    stage.updateTransform();
+    this.worldTransform.applyInverse(point,  tempPoint);
 
-    this.context.setTransform(1,0,0,1,0,0);
-    this.context.globalAlpha = 1;
+    var width = this._width;
+    var height = this._height;
+    var x1 = -width * this.anchor.x;
+    var y1;
 
-    if (!this.transparent && this.clearBeforeRender)
-    {
-        this.context.fillStyle = stage.backgroundColorString;
-        this.context.fillRect(0, 0, this.width, this.height);
-    }
-    else if (this.transparent && this.clearBeforeRender)
+    if ( tempPoint.x > x1 && tempPoint.x < x1 + width )
     {
-        this.context.clearRect(0, 0, this.width, this.height);
-    }
+        y1 = -height * this.anchor.y;
 
-    this.renderDisplayObject(stage);
-
-    // run interaction!
-    if(stage.interactive)
-    {
-        //need to add some events!
-        if(!stage._interactiveEventsAdded)
+        if ( tempPoint.y > y1 && tempPoint.y < y1 + height )
         {
-            stage._interactiveEventsAdded = true;
-            stage.interactionManager.setTarget(this);
+            return true;
         }
     }
 
-    // remove frame updates..
-    if(PIXI.Texture.frameUpdates.length > 0)
-    {
-        PIXI.Texture.frameUpdates.length = 0;
-    }
+    return false;
 };
 
 /**
- * Resizes the canvas view to the specified width and height
+ * Destroys this tiling sprite
  *
- * @method resize
- * @param width {Number} the new width of the canvas view
- * @param height {Number} the new height of the canvas view
  */
-PIXI.CanvasRenderer.prototype.resize = function(width, height)
-{
-    this.width = width;
-    this.height = height;
+TilingSprite.prototype.destroy = function () {
+    core.Sprite.prototype.destroy.call(this);
 
-    this.view.width = width;
-    this.view.height = height;
+    this.tileScale = null;
+    this._tileScaleOffset = null;
+    this.tilePosition = null;
+
+    this._uvs = null;
 };
 
 /**
- * Renders a display object
+ * Helper function that creates a tiling sprite that will use a texture from the TextureCache based on the frameId
+ * The frame ids are created when a Texture packer file has been loaded
  *
- * @method renderDisplayObject
- * @param displayObject {DisplayObject} The displayObject to render
- * @param context {Context2D} the context 2d method of the canvas
- * @private
+ * @static
+ * @param frameId {String} The frame Id of the texture in the cache
+ * @return {TilingSprite} A new TilingSprite using a texture from the texture cache matching the frameId
+ * @param width {number}  the width of the tiling sprite
+ * @param height {number} the height of the tiling sprite
  */
-PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject, context)
+TilingSprite.fromFrame = function (frameId,width,height)
 {
-    // no longer recursive!
-    //var transform;
-    //var context = this.context;
+    var texture = core.utils.TextureCache[frameId];
+
+    if (!texture)
+    {
+        throw new Error('The frameId "' + frameId + '" does not exist in the texture cache ' + this);
+    }
 
-    this.renderSession.context = context || this.context;
-    displayObject._renderCanvas(this.renderSession);
+    return new TilingSprite(texture,width,height);
 };
 
 /**
- * Renders a flat strip
+ * Helper function that creates a sprite that will contain a texture based on an image url
+ * If the image is not in the texture cache it will be loaded
  *
- * @method renderStripFlat
- * @param strip {Strip} The Strip to render
- * @private
+ * @static
+ * @param imageId {String} The image url of the texture
+ * @param width {number}  the width of the tiling sprite
+ * @param height {number} the height of the tiling sprite
+ * @param [crossorigin=(auto)] {boolean} if you want to specify the cross-origin parameter
+ * @param [scaleMode=scaleModes.DEFAULT] {number} if you want to specify the scale mode, see {@link SCALE_MODES} for possible values
+ * @return {TilingSprite} A new TilingSprite using a texture from the texture cache matching the image id
  */
-PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
+TilingSprite.fromImage = function (imageId, width, height, crossorigin, scaleMode)
 {
-    var context = this.context;
-    var verticies = strip.verticies;
+    return new TilingSprite(core.Texture.fromImage(imageId, crossorigin, scaleMode),width,height);
+};
 
-    var length = verticies.length/2;
-    this.count++;
+},{"../core":29}],80:[function(require,module,exports){
+var core = require('../core'),
+    DisplayObject = core.DisplayObject,
+    _tempMatrix = new core.Matrix();
 
-    context.beginPath();
-    for (var i=1; i < length-2; i++)
-    {
-        // draw some triangles!
-        var index = i*2;
+DisplayObject.prototype._cacheAsBitmap = false;
+DisplayObject.prototype._originalRenderWebGL = null;
+DisplayObject.prototype._originalRenderCanvas = null;
 
-        var x0 = verticies[index],   x1 = verticies[index+2], x2 = verticies[index+4];
-        var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
+DisplayObject.prototype._originalUpdateTransform = null;
+DisplayObject.prototype._originalHitTest = null;
+DisplayObject.prototype._originalDestroy = null;
+DisplayObject.prototype._cachedSprite = null;
 
-        context.moveTo(x0, y0);
-        context.lineTo(x1, y1);
-        context.lineTo(x2, y2);
+Object.defineProperties(DisplayObject.prototype, {
+
+    /**
+     * Set this to true if you want this display object to be cached as a bitmap.
+     * This basically takes a snap shot of the display object as it is at that moment. It can provide a performance benefit for complex static displayObjects.
+     * To remove simply set this property to 'null'
+     *
+     * @member {boolean}
+     * @memberof DisplayObject#
+     */
+    cacheAsBitmap: {
+        get: function ()
+        {
+            return this._cacheAsBitmap;
+        },
+        set: function (value)
+        {
+            if (this._cacheAsBitmap === value)
+            {
+                return;
+            }
+
+            this._cacheAsBitmap = value;
+
+            if (value)
+            {
+                this._originalRenderWebGL = this.renderWebGL;
+                this._originalRenderCanvas = this.renderCanvas;
+
+                this._originalUpdateTransform = this.updateTransform;
+                this._originalGetBounds = this.getBounds;
+
+                this._originalDestroy = this.destroy;
+
+                this._originalContainesPoint = this.containsPoint;
+
+                this.renderWebGL = this._renderCachedWebGL;
+                this.renderCanvas = this._renderCachedCanvas;
+
+                this.destroy = this._cacheAsBitmapDestroy;
+
+            }
+            else
+            {
+                if (this._cachedSprite)
+                {
+                    this._destroyCachedDisplayObject();
+                }
+
+                this.renderWebGL = this._originalRenderWebGL;
+                this.renderCanvas = this._originalRenderCanvas;
+                this.getBounds = this._originalGetBounds;
+
+                this.destroy = this._originalDestroy;
+
+                this.updateTransform = this._originalUpdateTransform;
+                this.containsPoint = this._originalContainsPoint;
+            }
+        }
     }
+});
+/**
+* Renders a cached version of the sprite with WebGL
+*
+* @param renderer {WebGLRenderer} the WebGL renderer
+* @private
+*/
+DisplayObject.prototype._renderCachedWebGL = function (renderer)
+{
+    this._initCachedDisplayObject( renderer );
 
-    context.fillStyle = "#FF0000";
-    context.fill();
-    context.closePath();
+    this._cachedSprite.worldAlpha = this.worldAlpha;
+
+    renderer.setObjectRenderer(renderer.plugins.sprite);
+    renderer.plugins.sprite.render( this._cachedSprite );
 };
 
 /**
- * Renders a strip
- *
- * @method renderStrip
- * @param strip {Strip} The Strip to render
- * @private
- */
-PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
+* Prepares the WebGL renderer to cache the sprite
+*
+* @param renderer {WebGLRenderer} the WebGL renderer
+* @private
+*/
+DisplayObject.prototype._initCachedDisplayObject = function (renderer)
 {
-    var context = this.context;
-
-    // draw triangles!!
-    var verticies = strip.verticies;
-    var uvs = strip.uvs;
+    if(this._cachedSprite)
+    {
+        return;
+    }
 
-    var length = verticies.length/2;
-    this.count++;
+    // first we flush anything left in the renderer (otherwise it would get rendered to the cached texture)
+    renderer.currentRenderer.flush();
+    //this.filters= [];
+    // next we find the dimensions of the untransformed object
+    // this function also calls updatetransform on all its children as part of the measuring. This means we don't need to update the transform again in this function
+    // TODO pass an object to clone too? saves having to create a new one each time!
+    var bounds = this.getLocalBounds().clone();
 
-    for (var i = 1; i < length-2; i++)
+    // add some padding!
+    if(this._filters)
     {
-        // draw some triangles!
-        var index = i*2;
+        var padding = this._filters[0].padding;
+        bounds.x -= padding;
+        bounds.y -= padding;
 
-        var x0 = verticies[index],   x1 = verticies[index+2], x2 = verticies[index+4];
-        var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
-
-        var u0 = uvs[index] * strip.texture.width,   u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width;
-        var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height;
+        bounds.width += padding * 2;
+        bounds.height += padding * 2;
+    }
 
-        context.save();
-        context.beginPath();
-        context.moveTo(x0, y0);
-        context.lineTo(x1, y1);
-        context.lineTo(x2, y2);
-        context.closePath();
+    // for now we cache the current renderTarget that the webGL renderer is currently using.
+    // this could be more elegent..
+    var cachedRenderTarget = renderer.currentRenderTarget;
+    // We also store the filter stack - I will definitely look to change how this works a little later down the line.
+    var stack = renderer.filterManager.filterStack;
 
-        context.clip();
+    // this renderTexture will be used to store the cached DisplayObject
+    var renderTexture = new core.RenderTexture(renderer, bounds.width | 0, bounds.height | 0);
 
-        // Compute matrix transform
-        var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
-        var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
-        var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
-        var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2;
-        var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
-        var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
-        var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2;
+    // need to set //
+    var m = _tempMatrix;
 
-        context.transform(deltaA / delta, deltaD / delta,
-                            deltaB / delta, deltaE / delta,
-                            deltaC / delta, deltaF / delta);
+    m.tx = -bounds.x;
+    m.ty = -bounds.y;
 
-        context.drawImage(strip.texture.baseTexture.source, 0, 0);
-        context.restore();
-    }
-};
 
-/**
- * Creates a Canvas element of the given size
- *
- * @method CanvasBuffer
- * @param width {Number} the width for the newly created canvas
- * @param height {Number} the height for the newly created canvas
- * @static
- * @private
- */
-PIXI.CanvasBuffer = function(width, height)
-{
-    this.width = width;
-    this.height = height;
 
-    this.canvas = document.createElement( "canvas" );
-    this.context = this.canvas.getContext( "2d" );
+    // set all properties to there original so we can render to a texture
+    this.renderWebGL = this._originalRenderWebGL;
 
-    this.canvas.width = width;
-    this.canvas.height = height;
-};
+    renderTexture.render(this, m, true, true);
 
-/**
- * Clears the canvas that was created by the CanvasBuffer class
- *
- * @method clear
- * @private
- */
-PIXI.CanvasBuffer.prototype.clear = function()
-{
-    this.context.clearRect(0,0, this.width, this.height);
-};
+    // now restore the state be setting the new properties
+    renderer.setRenderTarget(cachedRenderTarget);
+    renderer.filterManager.filterStack = stack;
 
-/**
- * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height
- *
- * @method resize
- * @param width {Number} the new width of the canvas
- * @param height {Number} the new height of the canvas
- * @private
- */
+    this.renderWebGL     = this._renderCachedWebGL;
+    this.updateTransform = this.displayObjectUpdateTransform;
+    this.getBounds       = this._getCachedBounds;
 
-PIXI.CanvasBuffer.prototype.resize = function(width, height)
-{
-    this.width = this.canvas.width = width;
-    this.height = this.canvas.height = height;
-};
 
+    // create our cached sprite
+    this._cachedSprite = new core.Sprite(renderTexture);
+    this._cachedSprite.worldTransform = this.worldTransform;
+    this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
+    this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+    // restore the transform of the cached sprite to avoid the nasty flicker..
+    this.updateTransform();
 
+    // map the hit test..
+    this.containsPoint = this._cachedSprite.containsPoint.bind(this._cachedSprite);
+};
 
 /**
- * A set of functions used by the canvas renderer to draw the primitive graphics data
- *
- * @class CanvasGraphics
- */
-PIXI.CanvasGraphics = function()
+* Renders a cached version of the sprite with canvas
+*
+* @param renderer {CanvasRenderer} the Canvas renderer
+* @private
+*/
+DisplayObject.prototype._renderCachedCanvas = function (renderer)
 {
+    this._initCachedDisplayObjectCanvas( renderer );
 
-};
+    this._cachedSprite.worldAlpha = this.worldAlpha;
 
+    this._cachedSprite.renderCanvas(renderer);
+};
 
-/*
- * Renders the graphics object
- *
- * @static
- * @private
- * @method renderGraphics
- * @param graphics {Graphics} the actual graphics object to render
- * @param context {Context2D} the 2d drawing method of the canvas
- */
-PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
+//TODO this can be the same as the webGL verison.. will need to do a little tweaking first though..
+/**
+* Prepares the Canvas renderer to cache the sprite
+*
+* @param renderer {CanvasRenderer} the Canvas renderer
+* @private
+*/
+DisplayObject.prototype._initCachedDisplayObjectCanvas = function (renderer)
 {
-    var worldAlpha = graphics.worldAlpha;
-    var color = '';
-
-    for (var i = 0; i < graphics.graphicsData.length; i++)
+    if(this._cachedSprite)
     {
-        var data = graphics.graphicsData[i];
-        var points = data.points;
+        return;
+    }
 
-        context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6);
+    //get bounds actually transforms the object for us already!
+    var bounds = this.getLocalBounds();
 
-        context.lineWidth = data.lineWidth;
+    var cachedRenderTarget = renderer.context;
 
-        if(data.type === PIXI.Graphics.POLY)
-        {
-            context.beginPath();
+    var renderTexture = new core.RenderTexture(renderer, bounds.width | 0, bounds.height | 0);
 
-            context.moveTo(points[0], points[1]);
+    // need to set //
+    var m = _tempMatrix;
 
-            for (var j=1; j < points.length/2; j++)
-            {
-                context.lineTo(points[j * 2], points[j * 2 + 1]);
-            }
+    m.tx = -bounds.x;
+    m.ty = -bounds.y;
 
-            // if the first and last point are the same close the path - much neater :)
-            if(points[0] === points[points.length-2] && points[1] === points[points.length-1])
-            {
-                context.closePath();
-            }
+    // set all properties to there original so we can render to a texture
+    this.renderCanvas = this._originalRenderCanvas;
 
-            if(data.fill)
-            {
-                context.globalAlpha = data.fillAlpha * worldAlpha;
-                context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
-                context.fill();
-            }
-            if(data.lineWidth)
-            {
-                context.globalAlpha = data.lineAlpha * worldAlpha;
-                context.stroke();
-            }
-        }
-        else if(data.type === PIXI.Graphics.RECT)
-        {
+    renderTexture.render(this, m, true);
 
-            if(data.fillColor || data.fillColor === 0)
-            {
-                context.globalAlpha = data.fillAlpha * worldAlpha;
-                context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
-                context.fillRect(points[0], points[1], points[2], points[3]);
+    // now restore the state be setting the new properties
+    renderer.context = cachedRenderTarget;
 
-            }
-            if(data.lineWidth)
-            {
-                context.globalAlpha = data.lineAlpha * worldAlpha;
-                context.strokeRect(points[0], points[1], points[2], points[3]);
-            }
+    this.renderCanvas = this._renderCachedCanvas;
+    this.updateTransform = this.displayObjectUpdateTransform;
+    this.getBounds  = this._getCachedBounds;
 
-        }
-        else if(data.type === PIXI.Graphics.CIRC)
-        {
-            // TODO - need to be Undefined!
-            context.beginPath();
-            context.arc(points[0], points[1], points[2],0,2*Math.PI);
-            context.closePath();
 
-            if(data.fill)
-            {
-                context.globalAlpha = data.fillAlpha * worldAlpha;
-                context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
-                context.fill();
-            }
-            if(data.lineWidth)
-            {
-                context.globalAlpha = data.lineAlpha * worldAlpha;
-                context.stroke();
-            }
-        }
-        else if(data.type === PIXI.Graphics.ELIP)
-        {
+    // create our cached sprite
+    this._cachedSprite = new core.Sprite(renderTexture);
+    this._cachedSprite.worldTransform = this.worldTransform;
+    this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
+    this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
 
-            // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+    this.updateTransform();
 
-            var ellipseData =  data.points;
+    this.containsPoint = this._cachedSprite.containsPoint.bind(this._cachedSprite);
+};
 
-            var w = ellipseData[2] * 2;
-            var h = ellipseData[3] * 2;
+/**
+* Calculates the bounds of the cached sprite
+*
+* @private
+*/
+DisplayObject.prototype._getCachedBounds = function ()
+{
+    this._cachedSprite._currentBounds = null;
 
-            var x = ellipseData[0] - w/2;
-            var y = ellipseData[1] - h/2;
+    return this._cachedSprite.getBounds();
+};
 
-            context.beginPath();
+/**
+* Destroys the cached sprite.
+*
+* @private
+*/
+DisplayObject.prototype._destroyCachedDisplayObject = function ()
+{
+    this._cachedSprite._texture.destroy();
+    this._cachedSprite = null;
+};
 
-            var kappa = 0.5522848,
-                ox = (w / 2) * kappa, // control point offset horizontal
-                oy = (h / 2) * kappa, // control point offset vertical
-                xe = x + w,           // x-end
-                ye = y + h,           // y-end
-                xm = x + w / 2,       // x-middle
-                ym = y + h / 2;       // y-middle
+DisplayObject.prototype._cacheAsBitmapDestroy = function ()
+{
+    this.cacheAsBitmap = false;
+    this._originalDestroy();
+};
 
-            context.moveTo(x, ym);
-            context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
-            context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
-            context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
-            context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+},{"../core":29}],81:[function(require,module,exports){
+var core = require('../core');
 
-            context.closePath();
+/**
+ * The instance name of the object.
+ *
+ * @member {string}
+ */
+core.DisplayObject.prototype.name = null;
 
-            if(data.fill)
-            {
-                context.globalAlpha = data.fillAlpha * worldAlpha;
-                context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
-                context.fill();
-            }
-            if(data.lineWidth)
-            {
-                context.globalAlpha = data.lineAlpha * worldAlpha;
-                context.stroke();
-            }
+/**
+* Returns the display object in the container
+*
+* @param name {string} instance name
+* @return {DisplayObject}
+*/
+core.Container.prototype.getChildByName = function (name)
+{
+    for (var i = 0; i < this.children.length; i++) 
+    {
+        if (this.children[i].name === name) 
+        {
+            return this.children[i];
         }
     }
+    return null;
 };
 
-/*
- * Renders a graphics mask
- *
- * @static
- * @private
- * @method renderGraphicsMask
- * @param graphics {Graphics} the graphics which will be used as a mask
- * @param context {Context2D} the context 2d method of the canvas
- */
-PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
+},{"../core":29}],82:[function(require,module,exports){
+var core = require('../core');
+
+/**
+* Returns the global position of the displayObject
+*
+* @param point {Point} the point to write the global value to. If null a new point will be returned
+* @return {Point}
+*/
+core.DisplayObject.prototype.getGlobalPosition = function (point)
 {
-    var len = graphics.graphicsData.length;
+    point = point || new core.Point();
 
-    if(len === 0) return;
+    if(this.parent)
+    {
+        this.displayObjectUpdateTransform();
 
-    if(len > 1)
+        point.x = this.worldTransform.tx;
+        point.y = this.worldTransform.ty;
+    }
+    else
     {
-        len = 1;
-        window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object');
+        point.x = this.position.x;
+        point.y = this.position.y;
     }
 
-    for (var i = 0; i < 1; i++)
-    {
-        var data = graphics.graphicsData[i];
-        var points = data.points;
+    return point;
+};
 
-        if(data.type === PIXI.Graphics.POLY)
-        {
-            context.beginPath();
-            context.moveTo(points[0], points[1]);
+},{"../core":29}],83:[function(require,module,exports){
+/**
+ * @file        Main export of the PIXI extras library
+ * @author      Mat Groves <mat@goodboydigital.com>
+ * @copyright   2013-2015 GoodBoyDigital
+ * @license     {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License}
+ */
 
-            for (var j=1; j < points.length/2; j++)
-            {
-                context.lineTo(points[j * 2], points[j * 2 + 1]);
-            }
+require('./cacheAsBitmap');
+require('./getChildByName');
+require('./getGlobalPosition');
 
-            // if the first and last point are the same close the path - much neater :)
-            if(points[0] === points[points.length-2] && points[1] === points[points.length-1])
-            {
-                context.closePath();
-            }
+/**
+ * @namespace PIXI.extras
+ */
+module.exports = {
+    MovieClip:      require('./MovieClip'),
+    TilingSprite:   require('./TilingSprite'),
+    BitmapText:     require('./BitmapText')
+};
 
-        }
-        else if(data.type === PIXI.Graphics.RECT)
-        {
-            context.beginPath();
-            context.rect(points[0], points[1], points[2], points[3]);
-            context.closePath();
-        }
-        else if(data.type === PIXI.Graphics.CIRC)
-        {
-            // TODO - need to be Undefined!
-            context.beginPath();
-            context.arc(points[0], points[1], points[2],0,2*Math.PI);
-            context.closePath();
-        }
-        else if(data.type === PIXI.Graphics.ELIP)
-        {
+},{"./BitmapText":77,"./MovieClip":78,"./TilingSprite":79,"./cacheAsBitmap":80,"./getChildByName":81,"./getGlobalPosition":82}],84:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
 
-            // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
-            var ellipseData =  data.points;
 
-            var w = ellipseData[2] * 2;
-            var h = ellipseData[3] * 2;
+// TODO (cengler) - The Y is flipped in this shader for some reason.
 
-            var x = ellipseData[0] - w/2;
-            var y = ellipseData[1] - h/2;
+/**
+ * @author Vico @vicocotea
+ * original shader : https://www.shadertoy.com/view/lssGDj by @movAX13h
+ */
 
-            context.beginPath();
+/**
+ * An ASCII filter.
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function AsciiFilter()
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        null,
+        // fragment shader
+        "precision mediump float;\n\nuniform vec4 dimensions;\nuniform float pixelSize;\nuniform sampler2D uSampler;\n\nfloat character(float n, vec2 p)\n{\n    p = floor(p*vec2(4.0, -4.0) + 2.5);\n    if (clamp(p.x, 0.0, 4.0) == p.x && clamp(p.y, 0.0, 4.0) == p.y)\n    {\n        if (int(mod(n/exp2(p.x + 5.0*p.y), 2.0)) == 1) return 1.0;\n    }\n    return 0.0;\n}\n\nvoid main()\n{\n    vec2 uv = gl_FragCoord.xy;\n\n    vec3 col = texture2D(uSampler, floor( uv / pixelSize ) * pixelSize / dimensions.xy).rgb;\n\n    float gray = (col.r + col.g + col.b) / 3.0;\n\n    float n =  65536.0;             // .\n    if (gray > 0.2) n = 65600.0;    // :\n    if (gray > 0.3) n = 332772.0;   // *\n    if (gray > 0.4) n = 15255086.0; // o\n    if (gray > 0.5) n = 23385164.0; // &\n    if (gray > 0.6) n = 15252014.0; // 8\n    if (gray > 0.7) n = 13199452.0; // @\n    if (gray > 0.8) n = 11512810.0; // #\n\n    vec2 p = mod( uv / ( pixelSize * 0.5 ), 2.0) - vec2(1.0);\n    col = col * character(n, p);\n\n    gl_FragColor = vec4(col, 1.0);\n}\n",
+        // custom uniforms
+        {
+            dimensions: { type: '4fv', value: new Float32Array([0, 0, 0, 0]) },
+            pixelSize:  { type: '1f', value: 8 }
+        }
+    );
+}
 
-            var kappa = 0.5522848,
-                ox = (w / 2) * kappa, // control point offset horizontal
-                oy = (h / 2) * kappa, // control point offset vertical
-                xe = x + w,           // x-end
-                ye = y + h,           // y-end
-                xm = x + w / 2,       // x-middle
-                ym = y + h / 2;       // y-middle
+AsciiFilter.prototype = Object.create(core.AbstractFilter.prototype);
+AsciiFilter.prototype.constructor = AsciiFilter;
+module.exports = AsciiFilter;
 
-            context.moveTo(x, ym);
-            context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
-            context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
-            context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
-            context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
-            context.closePath();
+Object.defineProperties(AsciiFilter.prototype, {
+    /**
+     * The pixel size used by the filter.
+     *
+     * @member {number}
+     * @memberof AsciiFilter#
+     */
+    size: {
+        get: function ()
+        {
+            return this.uniforms.pixelSize.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.pixelSize.value = value;
         }
     }
-};
-
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+});
 
+},{"../../core":29}],85:[function(require,module,exports){
+var core = require('../../core'),
+    BlurXFilter = require('../blur/BlurXFilter'),
+    BlurYFilter = require('../blur/BlurYFilter');
 
 /**
- * The Graphics class contains a set of methods that you can use to create primitive shapes and lines.
- * It is important to know that with the webGL renderer only simple polygons can be filled at this stage
- * Complex polygons will not be filled. Heres an example of a complex polygon: http://www.goodboydigital.com/wp-content/uploads/2013/06/complexPolygon.png
+ * The BloomFilter applies a Gaussian blur to an object.
+ * The strength of the blur can be set for x- and y-axis separately.
  *
- * @class Graphics
- * @extends DisplayObjectContainer
- * @constructor
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
  */
-PIXI.Graphics = function()
+function BloomFilter()
 {
-    PIXI.DisplayObjectContainer.call( this );
+    core.AbstractFilter.call(this);
 
-    this.renderable = true;
+    this.blurXFilter = new BlurXFilter();
+    this.blurYFilter = new BlurYFilter();
 
-    /**
-     * The alpha of the fill of this graphics object
-     *
-     * @property fillAlpha
-     * @type Number
-     */
-    this.fillAlpha = 1;
+    this.defaultFilter = new core.AbstractFilter();
+}
 
-    /**
-     * The width of any lines drawn
-     *
-     * @property lineWidth
-     * @type Number
-     */
-    this.lineWidth = 0;
+BloomFilter.prototype = Object.create(core.AbstractFilter.prototype);
+BloomFilter.prototype.constructor = BloomFilter;
+module.exports = BloomFilter;
 
-    /**
-     * The color of any lines drawn
-     *
-     * @property lineColor
-     * @type String
-     */
-    this.lineColor = "black";
+BloomFilter.prototype.applyFilter = function (renderer, input, output)
+{
+    var renderTarget = renderer.filterManager.getRenderTarget(true);
 
-    /**
-     * Graphics data
-     *
-     * @property graphicsData
-     * @type Array
-     * @private
-     */
-    this.graphicsData = [];
+    //TODO - copyTexSubImage2D could be used here?
+    this.defaultFilter.applyFilter(renderer, input, output);
 
+    this.blurXFilter.applyFilter(renderer, input, renderTarget);
 
+    renderer.blendModeManager.setBlendMode(core.BLEND_MODES.SCREEN);
+
+    this.blurYFilter.applyFilter(renderer, renderTarget, output);
+
+    renderer.blendModeManager.setBlendMode(core.BLEND_MODES.NORMAL);
+
+    renderer.filterManager.returnRenderTarget(renderTarget);
+};
+
+Object.defineProperties(BloomFilter.prototype, {
     /**
-     * The tint applied to the graphic shape. This is a hex value
-     *
-     * @property tint
-     * @type Number
-     * @default 0xFFFFFF
-     */
-    this.tint = 0xFFFFFF;// * Math.random();
-    
-    /**
-     * The blend mode to be applied to the graphic shape
+     * Sets the strength of both the blurX and blurY properties simultaneously
      *
-     * @property blendMode
-     * @type Number
-     * @default PIXI.blendModes.NORMAL;
+     * @member {number}
+     * @memberOf BloomFilter#
+     * @default 2
      */
-    this.blendMode = PIXI.blendModes.NORMAL;
-    
+    blur: {
+        get: function ()
+        {
+            return this.blurXFilter.blur;
+        },
+        set: function (value)
+        {
+            this.blurXFilter.blur = this.blurYFilter.blur = value;
+        }
+    },
+
     /**
-     * Current path
+     * Sets the strength of the blurX property
      *
-     * @property currentPath
-     * @type Object
-     * @private
+     * @member {number}
+     * @memberOf BloomFilter#
+     * @default 2
      */
-    this.currentPath = {points:[]};
+    blurX: {
+        get: function ()
+        {
+            return this.blurXFilter.blur;
+        },
+        set: function (value)
+        {
+            this.blurXFilter.blur = value;
+        }
+    },
 
     /**
-     * Array containing some WebGL-related properties used by the WebGL renderer
+     * Sets the strength of the blurY property
      *
-     * @property _webGL
-     * @type Array
-     * @private
+     * @member {number}
+     * @memberOf BloomFilter#
+     * @default 2
      */
-    this._webGL = [];
+    blurY: {
+        get: function ()
+        {
+            return this.blurYFilter.blur;
+        },
+        set: function (value)
+        {
+            this.blurYFilter.blur = value;
+        }
+    }
+});
+
+},{"../../core":29,"../blur/BlurXFilter":88,"../blur/BlurYFilter":89}],86:[function(require,module,exports){
+var core = require('../../core');
+
+
+/**
+ * The BlurDirFilter applies a Gaussian blur toward a direction to an object.
+ *
+ * @class
+ * @param {number} dirX
+ * @param {number} dirY
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function BlurDirFilter(dirX, dirY)
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        "attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\nattribute vec4 aColor;\n\nuniform float strength;\nuniform float dirX;\nuniform float dirY;\nuniform mat3 projectionMatrix;\n\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\nvarying vec2 vBlurTexCoords[3];\n\nvoid main(void)\n{\n    gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0);\n    vTextureCoord = aTextureCoord;\n\n    vBlurTexCoords[0] = aTextureCoord + vec2( (0.004 * strength) * dirX, (0.004 * strength) * dirY );\n    vBlurTexCoords[1] = aTextureCoord + vec2( (0.008 * strength) * dirX, (0.008 * strength) * dirY );\n    vBlurTexCoords[2] = aTextureCoord + vec2( (0.012 * strength) * dirX, (0.012 * strength) * dirY );\n\n    vColor = vec4(aColor.rgb * aColor.a, aColor.a);\n}\n",
+        // fragment shader
+        "precision lowp float;\n\nvarying vec2 vTextureCoord;\nvarying vec2 vBlurTexCoords[3];\nvarying vec4 vColor;\n\nuniform sampler2D uSampler;\n\nvoid main(void)\n{\n    gl_FragColor = vec4(0.0);\n\n    gl_FragColor += texture2D(uSampler, vTextureCoord     ) * 0.3989422804014327;\n    gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0]) * 0.2419707245191454;\n    gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1]) * 0.05399096651318985;\n    gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2]) * 0.004431848411938341;\n}\n",
+        // set the uniforms
+        {
+            strength: { type: '1f', value: 1 },
+            dirX: { type: '1f', value: dirX || 0 },
+            dirY: { type: '1f', value: dirY || 0 }
+        }
+    );
+
+    this.defaultFilter = new core.AbstractFilter();
 
     /**
-     * Whether this shape is being used as a mask
+     * Sets the number of passes for blur. More passes means higher quaility bluring.
      *
-     * @property isMask
-     * @type isMask
+     * @member {number}
+     * @memberof BlurDirFilter#
+     * @default 1
      */
-    this.isMask = false;
+    this.passes = 1;
 
     /**
-     * The bounds of the graphic shape as rectangle object
+     * Sets the X direction of the blur
      *
-     * @property bounds
-     * @type Rectangle
+     * @member {number}
+     * @memberof BlurDirFilter#
+     * @default 0
      */
-    this.bounds = null;
+    this.dirX = dirX || 0;
 
     /**
-     * the bounds' padding used for bounds calculation
+     * Sets the Y direction of the blur
      *
-     * @property bounds
-     * @type Number
+     * @member {number}
+     * @memberof BlurDirFilter#
+     * @default 0
      */
-    this.boundsPadding = 10;
-};
+    this.dirY = dirY || 0;
 
-// constructor
-PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
-PIXI.Graphics.prototype.constructor = PIXI.Graphics;
+    this.strength = 4;
+}
 
-/**
- * If cacheAsBitmap is true the graphics object will then be rendered as if it was a sprite.
- * This is useful if your graphics element does not change often as it will speed up the rendering of the object
- * It is also usful as the graphics object will always be antialiased because it will be rendered using canvas
- * Not recommended if you are constanly redrawing the graphics element.
- *
- * @property cacheAsBitmap
- * @default false
- * @type Boolean
- * @private
- */
-Object.defineProperty(PIXI.Graphics.prototype, "cacheAsBitmap", {
-    get: function() {
-        return  this._cacheAsBitmap;
-    },
-    set: function(value) {
-        this._cacheAsBitmap = value;
+BlurDirFilter.prototype = Object.create(core.AbstractFilter.prototype);
+BlurDirFilter.prototype.constructor = BlurDirFilter;
+module.exports = BlurDirFilter;
 
-        if(this._cacheAsBitmap)
-        {
-            this._generateCachedSprite();
-        }
-        else
-        {
-            this.destroyCachedSprite();
-            this.dirty = true;
-        }
+BlurDirFilter.prototype.applyFilter = function (renderer, input, output, clear) {
 
-    }
-});
+    var shader = this.getShader(renderer);
 
+    this.uniforms.strength.value = this.strength / 4 / this.passes * (input.frame.width / input.size.width);
 
-/**
- * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
- *
- * @method lineStyle
- * @param lineWidth {Number} width of the line to draw, will update the object's stored style
- * @param color {Number} color of the line to draw, will update the object's stored style
- * @param alpha {Number} alpha of the line to draw, will update the object's stored style
- */
-PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
-{
-    if (!this.currentPath.points.length) this.graphicsData.pop();
+    if (this.passes === 1) {
+        renderer.filterManager.applyFilter(shader, input, output, clear);
+    } else {
+        var renderTarget = renderer.filterManager.getRenderTarget(true);
 
-    this.lineWidth = lineWidth || 0;
-    this.lineColor = color || 0;
-    this.lineAlpha = (arguments.length < 3) ? 1 : alpha;
+        renderer.filterManager.applyFilter(shader, input, renderTarget, clear);
 
-    this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
-                        fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
+        for(var i = 0; i < this.passes-2; i++)
+        {
+            //this.uniforms.strength.value = this.strength / 4 / (this.passes+(i*2)) * (input.frame.width / input.size.width);
+            renderer.filterManager.applyFilter(shader, renderTarget, renderTarget, clear);
+        }
 
-    this.graphicsData.push(this.currentPath);
+        renderer.filterManager.applyFilter(shader, renderTarget, output, clear);
 
-    return this;
+        renderer.filterManager.returnRenderTarget(renderTarget);
+    }
 };
 
-/**
- * Moves the current drawing position to (x, y).
- *
- * @method moveTo
- * @param x {Number} the X coordinate to move to
- * @param y {Number} the Y coordinate to move to
- */
-PIXI.Graphics.prototype.moveTo = function(x, y)
-{
-    if (!this.currentPath.points.length) this.graphicsData.pop();
-
-    this.currentPath = this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
-                        fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
-
-    this.currentPath.points.push(x, y);
 
-    this.graphicsData.push(this.currentPath);
+Object.defineProperties(BlurDirFilter.prototype, {
+    /**
+     * Sets the strength of both the blur.
+     *
+     * @member {number}
+     * @memberof BlurDirFilter#
+     * @default 2
+     */
+    blur: {
+        get: function ()
+        {
+            return this.strength;
+        },
+        set: function (value)
+        {
+            this.padding = value * 0.5;
+            this.strength = value;
+        }
+    },
+    /**
+     * Sets the X direction of the blur.
+     *
+     * @member {number}
+     * @memberof BlurYFilter#
+     * @default 0
+     */
+    dirX: {
+        get: function ()
+        {
+            return this.dirX;
+        },
+        set: function (value)
+        {
+            this.uniforms.dirX.value = value;
+        }
+    },
+    /**
+     * Sets the Y direction of the blur.
+     *
+     * @member {number}
+     * @memberof BlurDirFilter#
+     * @default 0
+     */
+    dirY: {
+        get: function ()
+        {
+            return this.dirY;
+        },
+        set: function (value)
+        {
+            this.uniforms.dirY.value = value;
+        }
+    }
+});
 
-    return this;
-};
+},{"../../core":29}],87:[function(require,module,exports){
+var core = require('../../core'),
+    BlurXFilter = require('./BlurXFilter'),
+    BlurYFilter = require('./BlurYFilter');
 
 /**
- * Draws a line using the current line style from the current drawing position to (x, y);
- * the current drawing position is then set to (x, y).
+ * The BlurFilter applies a Gaussian blur to an object.
+ * The strength of the blur can be set for x- and y-axis separately.
  *
- * @method lineTo
- * @param x {Number} the X coordinate to draw to
- * @param y {Number} the Y coordinate to draw to
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
  */
-PIXI.Graphics.prototype.lineTo = function(x, y)
+function BlurFilter()
 {
-    this.currentPath.points.push(x, y);
-    this.dirty = true;
+    core.AbstractFilter.call(this);
 
-    return this;
-};
+    this.blurXFilter = new BlurXFilter();
+    this.blurYFilter = new BlurYFilter();
+}
 
-/**
- * Specifies a simple one-color fill that subsequent calls to other Graphics methods
- * (such as lineTo() or drawCircle()) use when drawing.
- *
- * @method beginFill
- * @param color {Number} the color of the fill
- * @param alpha {Number} the alpha of the fill
- */
-PIXI.Graphics.prototype.beginFill = function(color, alpha)
+BlurFilter.prototype = Object.create(core.AbstractFilter.prototype);
+BlurFilter.prototype.constructor = BlurFilter;
+module.exports = BlurFilter;
+
+BlurFilter.prototype.applyFilter = function (renderer, input, output)
 {
+    var renderTarget = renderer.filterManager.getRenderTarget(true);
 
-    this.filling = true;
-    this.fillColor = color || 0;
-    this.fillAlpha = (arguments.length < 2) ? 1 : alpha;
+    this.blurXFilter.applyFilter(renderer, input, renderTarget);
+    this.blurYFilter.applyFilter(renderer, renderTarget, output);
 
-    return this;
+    renderer.filterManager.returnRenderTarget(renderTarget);
 };
 
-/**
- * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
- *
- * @method endFill
- */
-PIXI.Graphics.prototype.endFill = function()
-{
-    this.filling = false;
-    this.fillColor = null;
-    this.fillAlpha = 1;
+Object.defineProperties(BlurFilter.prototype, {
+    /**
+     * Sets the strength of both the blurX and blurY properties simultaneously
+     *
+     * @member {number}
+     * @memberOf BlurFilter#
+     * @default 2
+     */
+    blur: {
+        get: function ()
+        {
+            return this.blurXFilter.blur;
+        },
+        set: function (value)
+        {
+            this.padding = Math.abs(value) * 0.5;
+            this.blurXFilter.blur = this.blurYFilter.blur = value;
+        }
+    },
 
-    return this;
-};
+    /**
+     * Sets the number of passes for blur. More passes means higher quaility bluring.
+     *
+     * @member {number}
+     * @memberof BlurYFilter#
+     * @default 1
+     */
+    passes: {
+        get: function ()
+        {
+            return  this.blurXFilter.passes;
+        },
+        set: function (value)
+        {
+            this.blurXFilter.passes = this.blurYFilter.passes = value;
+        }
+    },
 
-/**
- * @method drawRect
- *
- * @param x {Number} The X coord of the top-left of the rectangle
- * @param y {Number} The Y coord of the top-left of the rectangle
- * @param width {Number} The width of the rectangle
- * @param height {Number} The height of the rectangle
- */
-PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
-{
-    if (!this.currentPath.points.length) this.graphicsData.pop();
+    /**
+     * Sets the strength of the blurX property
+     *
+     * @member {number}
+     * @memberOf BlurFilter#
+     * @default 2
+     */
+    blurX: {
+        get: function ()
+        {
+            return this.blurXFilter.blur;
+        },
+        set: function (value)
+        {
+            this.blurXFilter.blur = value;
+        }
+    },
 
-    this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
-                        fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
-                        points:[x, y, width, height], type:PIXI.Graphics.RECT};
+    /**
+     * Sets the strength of the blurY property
+     *
+     * @member {number}
+     * @memberOf BlurFilter#
+     * @default 2
+     */
+    blurY: {
+        get: function ()
+        {
+            return this.blurYFilter.blur;
+        },
+        set: function (value)
+        {
+            this.blurYFilter.blur = value;
+        }
+    }
+});
 
-    this.graphicsData.push(this.currentPath);
-    this.dirty = true;
+},{"../../core":29,"./BlurXFilter":88,"./BlurYFilter":89}],88:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
 
-    return this;
-};
 
 /**
- * Draws a circle.
+ * The BlurXFilter applies a horizontal Gaussian blur to an object.
  *
- * @method drawCircle
- * @param x {Number} The X coordinate of the center of the circle
- * @param y {Number} The Y coordinate of the center of the circle
- * @param radius {Number} The radius of the circle
- */
-PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
-{
-
-    if (!this.currentPath.points.length) this.graphicsData.pop();
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function BlurXFilter()
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        "attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\nattribute vec4 aColor;\n\nuniform float strength;\nuniform mat3 projectionMatrix;\n\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\nvarying vec2 vBlurTexCoords[6];\n\nvoid main(void)\n{\n    gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0);\n    vTextureCoord = aTextureCoord;\n\n    vBlurTexCoords[ 0] = aTextureCoord + vec2(-0.012 * strength, 0.0);\n    vBlurTexCoords[ 1] = aTextureCoord + vec2(-0.008 * strength, 0.0);\n    vBlurTexCoords[ 2] = aTextureCoord + vec2(-0.004 * strength, 0.0);\n    vBlurTexCoords[ 3] = aTextureCoord + vec2( 0.004 * strength, 0.0);\n    vBlurTexCoords[ 4] = aTextureCoord + vec2( 0.008 * strength, 0.0);\n    vBlurTexCoords[ 5] = aTextureCoord + vec2( 0.012 * strength, 0.0);\n\n    vColor = vec4(aColor.rgb * aColor.a, aColor.a);\n}\n",
+        // fragment shader
+        "precision lowp float;\n\nvarying vec2 vTextureCoord;\nvarying vec2 vBlurTexCoords[6];\nvarying vec4 vColor;\n\nuniform sampler2D uSampler;\n\nvoid main(void)\n{\n    gl_FragColor = vec4(0.0);\n\n    gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0])*0.004431848411938341;\n    gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1])*0.05399096651318985;\n    gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2])*0.2419707245191454;\n    gl_FragColor += texture2D(uSampler, vTextureCoord     )*0.3989422804014327;\n    gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 3])*0.2419707245191454;\n    gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 4])*0.05399096651318985;\n    gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 5])*0.004431848411938341;\n}\n",
+        // set the uniforms
+        {
+            strength: { type: '1f', value: 1 }
+        }
+    );
 
-    this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
-                        fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
-                        points:[x, y, radius, radius], type:PIXI.Graphics.CIRC};
+    /**
+     * Sets the number of passes for blur. More passes means higher quaility bluring.
+     *
+     * @member {number}
+     * @memberof BlurXFilter#
+     * @default 1
+     */
+    this.passes = 1;
 
-    this.graphicsData.push(this.currentPath);
-    this.dirty = true;
+    this.strength = 4;
+}
 
-    return this;
-};
+BlurXFilter.prototype = Object.create(core.AbstractFilter.prototype);
+BlurXFilter.prototype.constructor = BlurXFilter;
+module.exports = BlurXFilter;
 
-/**
- * Draws an ellipse.
- *
- * @method drawEllipse
- * @param x {Number} The X coordinate of the upper-left corner of the framing rectangle of this ellipse
- * @param y {Number} The Y coordinate of the upper-left corner of the framing rectangle of this ellipse
- * @param width {Number} The width of the ellipse
- * @param height {Number} The height of the ellipse
- */
-PIXI.Graphics.prototype.drawEllipse = function( x, y, width, height)
+BlurXFilter.prototype.applyFilter = function (renderer, input, output, clear)
 {
+    var shader = this.getShader(renderer);
 
-    if (!this.currentPath.points.length) this.graphicsData.pop();
+    this.uniforms.strength.value = this.strength / 4 / this.passes * (input.frame.width / input.size.width);
 
-    this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
-                        fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
-                        points:[x, y, width, height], type:PIXI.Graphics.ELIP};
-
-    this.graphicsData.push(this.currentPath);
-    this.dirty = true;
-
-    return this;
-};
+    if(this.passes === 1)
+    {
+        renderer.filterManager.applyFilter(shader, input, output, clear);
+    }
+    else
+    {
+        var renderTarget = renderer.filterManager.getRenderTarget(true);
+        var flip = input;
+        var flop = renderTarget;
 
-/**
- * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
- *
- * @method clear
- */
-PIXI.Graphics.prototype.clear = function()
-{
-    this.lineWidth = 0;
-    this.filling = false;
+        for(var i = 0; i < this.passes-1; i++)
+        {
+            renderer.filterManager.applyFilter(shader, flip, flop, true);
 
-    this.dirty = true;
-    this.clearDirty = true;
-    this.graphicsData = [];
+           var temp = flop;
+           flop = flip;
+           flip = temp;
+        }
 
-    this.bounds = null; //new PIXI.Rectangle();
+        renderer.filterManager.applyFilter(shader, flip, output, clear);
 
-    return this;
+        renderer.filterManager.returnRenderTarget(renderTarget);
+    }
 };
 
-/**
- * Useful function that returns a texture of the graphics object that can then be used to create sprites
- * This can be quite useful if your geometry is complicated and needs to be reused multiple times.
- *
- * @method generateTexture
- * @return {Texture} a texture of the graphics object
- */
-PIXI.Graphics.prototype.generateTexture = function()
-{
-    var bounds = this.getBounds();
-
-    var canvasBuffer = new PIXI.CanvasBuffer(bounds.width, bounds.height);
-    var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas);
 
-    canvasBuffer.context.translate(-bounds.x,-bounds.y);
-    
-    PIXI.CanvasGraphics.renderGraphics(this, canvasBuffer.context);
+Object.defineProperties(BlurXFilter.prototype, {
+    /**
+     * Sets the strength of both the blur.
+     *
+     * @member {number}
+     * @memberof BlurXFilter#
+     * @default 2
+     */
+    blur: {
+        get: function ()
+        {
+            return  this.strength;
+        },
+        set: function (value)
+        {
+            this.padding =  Math.abs(value) * 0.5;
+            this.strength = value;
+        }
+    }
+});
 
-    return texture;
-};
+},{"../../core":29}],89:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
 
-/**
-* Renders the object using the WebGL renderer
-*
-* @method _renderWebGL
-* @param renderSession {RenderSession} 
-* @private
-*/
-PIXI.Graphics.prototype._renderWebGL = function(renderSession)
-{
-    // if the sprite is not visible or the alpha is 0 then no need to render this element
-    if(this.visible === false || this.alpha === 0 || this.isMask === true)return;
-    
-    if(this._cacheAsBitmap)
-    {
-       
-        if(this.dirty)
+
+/**
+ * The BlurYFilter applies a horizontal Gaussian blur to an object.
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function BlurYFilter()
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        "attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\nattribute vec4 aColor;\n\nuniform float strength;\nuniform mat3 projectionMatrix;\n\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\nvarying vec2 vBlurTexCoords[6];\n\nvoid main(void)\n{\n    gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0);\n    vTextureCoord = aTextureCoord;\n\n    vBlurTexCoords[ 0] = aTextureCoord + vec2(0.0, -0.012 * strength);\n    vBlurTexCoords[ 1] = aTextureCoord + vec2(0.0, -0.008 * strength);\n    vBlurTexCoords[ 2] = aTextureCoord + vec2(0.0, -0.004 * strength);\n    vBlurTexCoords[ 3] = aTextureCoord + vec2(0.0,  0.004 * strength);\n    vBlurTexCoords[ 4] = aTextureCoord + vec2(0.0,  0.008 * strength);\n    vBlurTexCoords[ 5] = aTextureCoord + vec2(0.0,  0.012 * strength);\n\n   vColor = vec4(aColor.rgb * aColor.a, aColor.a);\n}\n",
+        // fragment shader
+        "precision lowp float;\n\nvarying vec2 vTextureCoord;\nvarying vec2 vBlurTexCoords[6];\nvarying vec4 vColor;\n\nuniform sampler2D uSampler;\n\nvoid main(void)\n{\n    gl_FragColor = vec4(0.0);\n\n    gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 0])*0.004431848411938341;\n    gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 1])*0.05399096651318985;\n    gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 2])*0.2419707245191454;\n    gl_FragColor += texture2D(uSampler, vTextureCoord     )*0.3989422804014327;\n    gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 3])*0.2419707245191454;\n    gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 4])*0.05399096651318985;\n    gl_FragColor += texture2D(uSampler, vBlurTexCoords[ 5])*0.004431848411938341;\n}\n",
+        // set the uniforms
         {
-            this._generateCachedSprite();
-            // we will also need to update the texture on the gpu too!
-            PIXI.updateWebGLTexture(this._cachedSprite.texture.baseTexture, renderSession.gl);
-            
-            this.dirty =  false;
+            strength: { type: '1f', value: 1 }
         }
+    );
+
+    this.passes = 1;
+    this.strength = 4;
+}
 
-        PIXI.Sprite.prototype._renderWebGL.call(this._cachedSprite, renderSession);
+BlurYFilter.prototype = Object.create(core.AbstractFilter.prototype);
+BlurYFilter.prototype.constructor = BlurYFilter;
+module.exports = BlurYFilter;
 
-        return;
+BlurYFilter.prototype.applyFilter = function (renderer, input, output, clear)
+{
+    var shader = this.getShader(renderer);
+
+    this.uniforms.strength.value = Math.abs(this.strength) / 4 / this.passes * (input.frame.height / input.size.height);
+
+    if(this.passes === 1)
+    {
+        renderer.filterManager.applyFilter(shader, input, output, clear);
     }
     else
     {
-        renderSession.spriteBatch.stop();
+        var renderTarget = renderer.filterManager.getRenderTarget(true);
+        var flip = input;
+        var flop = renderTarget;
 
-        if(this._mask)renderSession.maskManager.pushMask(this.mask, renderSession);
-        if(this._filters)renderSession.filterManager.pushFilter(this._filterBlock);
-      
-        // check blend mode
-        if(this.blendMode !== renderSession.spriteBatch.currentBlendMode)
-        {
-            renderSession.spriteBatch.currentBlendMode = this.blendMode;
-            var blendModeWebGL = PIXI.blendModesWebGL[renderSession.spriteBatch.currentBlendMode];
-            renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]);
-        }
-     
-        PIXI.WebGLGraphics.renderGraphics(this, renderSession);
-        
-        // only render if it has children!
-        if(this.children.length)
+        for(var i = 0; i < this.passes-1; i++)
         {
-            renderSession.spriteBatch.start();
+            renderer.filterManager.applyFilter(shader, flip, flop, true);
 
-             // simple render children!
-            for(var i=0, j=this.children.length; i<j; i++)
-            {
-                this.children[i]._renderWebGL(renderSession);
-            }
-
-            renderSession.spriteBatch.stop();
+           var temp = flop;
+           flop = flip;
+           flip = temp;
         }
 
-        if(this._filters)renderSession.filterManager.popFilter();
-        if(this._mask)renderSession.maskManager.popMask(renderSession);
-          
-        renderSession.drawCount++;
+        renderer.filterManager.applyFilter(shader, flip, output, clear);
 
-        renderSession.spriteBatch.start();
+        renderer.filterManager.returnRenderTarget(renderTarget);
     }
 };
 
-/**
-* Renders the object using the Canvas renderer
-*
-* @method _renderCanvas
-* @param renderSession {RenderSession} 
-* @private
-*/
-PIXI.Graphics.prototype._renderCanvas = function(renderSession)
-{
-    // if the sprite is not visible or the alpha is 0 then no need to render this element
-    if(this.visible === false || this.alpha === 0 || this.isMask === true)return;
-    
-    var context = renderSession.context;
-    var transform = this.worldTransform;
-    
-    if(this.blendMode !== renderSession.currentBlendMode)
-    {
-        renderSession.currentBlendMode = this.blendMode;
-        context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode];
+
+Object.defineProperties(BlurYFilter.prototype, {
+    /**
+     * Sets the strength of both the blur.
+     *
+     * @member {number}
+     * @memberof BlurYFilter#
+     * @default 2
+     */
+    blur: {
+        get: function ()
+        {
+            return  this.strength;
+        },
+        set: function (value)
+        {
+            this.padding = Math.abs(value) * 0.5;
+            this.strength = value;
+        }
     }
+});
 
-    context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty);
-    PIXI.CanvasGraphics.renderGraphics(this, context);
+},{"../../core":29}],90:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
 
-     // simple render children!
-    for(var i=0, j=this.children.length; i<j; i++)
-    {
-        this.children[i]._renderCanvas(renderSession);
-    }
-};
 
 /**
- * Retrieves the bounds of the graphic shape as a rectangle object
+ * A Smart Blur Filter.
  *
- * @method getBounds
- * @return {Rectangle} the rectangular bounding area
- */
-PIXI.Graphics.prototype.getBounds = function( matrix )
-{
-    if(!this.bounds)this.updateBounds();
-
-    var w0 = this.bounds.x;
-    var w1 = this.bounds.width + this.bounds.x;
-
-    var h0 = this.bounds.y;
-    var h1 = this.bounds.height + this.bounds.y;
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function SmartBlurFilter()
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        null,
+        // fragment shader
+        "precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform vec2 delta;\n\nfloat random(vec3 scale, float seed)\n{\n    return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);\n}\n\nvoid main(void)\n{\n    vec4 color = vec4(0.0);\n    float total = 0.0;\n\n    float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);\n\n    for (float t = -30.0; t <= 30.0; t++)\n    {\n        float percent = (t + offset - 0.5) / 30.0;\n        float weight = 1.0 - abs(percent);\n        vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);\n        sample.rgb *= sample.a;\n        color += sample * weight;\n        total += weight;\n    }\n\n    gl_FragColor = color / total;\n    gl_FragColor.rgb /= gl_FragColor.a + 0.00001;\n}\n",
+        // uniforms
+        {
+          delta: { type: 'v2', value: { x: 0.1, y: 0.0 } }
+        }
+    );
+}
 
-    var worldTransform = matrix || this.worldTransform;
+SmartBlurFilter.prototype = Object.create(core.AbstractFilter.prototype);
+SmartBlurFilter.prototype.constructor = SmartBlurFilter;
+module.exports = SmartBlurFilter;
 
-    var a = worldTransform.a;
-    var b = worldTransform.c;
-    var c = worldTransform.b;
-    var d = worldTransform.d;
-    var tx = worldTransform.tx;
-    var ty = worldTransform.ty;
+},{"../../core":29}],91:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
 
-    var x1 = a * w1 + c * h1 + tx;
-    var y1 = d * h1 + b * w1 + ty;
 
-    var x2 = a * w0 + c * h1 + tx;
-    var y2 = d * h1 + b * w0 + ty;
+/**
+ * The ColorMatrixFilter class lets you apply a 5x4 matrix transformation on the RGBA
+ * color and alpha values of every pixel on your displayObject to produce a result
+ * with a new set of RGBA color and alpha values. It's pretty powerful!
+ *
+ * ```js
+ *  var colorMatrix = new PIXI.ColorMatrixFilter();
+ *  container.filters = [colorMatrix];
+ *  colorMatrix.contrast(2);
+ * ```
+ * @author Clément Chenebault <clement@goodboydigital.com>
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function ColorMatrixFilter()
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        null,
+        // fragment shader
+        "precision mediump float;\n\nvarying vec2 vTextureCoord;\nuniform sampler2D uSampler;\nuniform float m[25];\n\nvoid main(void)\n{\n\n    vec4 c = texture2D(uSampler, vTextureCoord);\n\n    gl_FragColor.r = (m[0] * c.r);\n        gl_FragColor.r += (m[1] * c.g);\n        gl_FragColor.r += (m[2] * c.b);\n        gl_FragColor.r += (m[3] * c.a);\n        gl_FragColor.r += m[4];\n\n    gl_FragColor.g = (m[5] * c.r);\n        gl_FragColor.g += (m[6] * c.g);\n        gl_FragColor.g += (m[7] * c.b);\n        gl_FragColor.g += (m[8] * c.a);\n        gl_FragColor.g += m[9];\n\n     gl_FragColor.b = (m[10] * c.r);\n        gl_FragColor.b += (m[11] * c.g);\n        gl_FragColor.b += (m[12] * c.b);\n        gl_FragColor.b += (m[13] * c.a);\n        gl_FragColor.b += m[14];\n\n     gl_FragColor.a = (m[15] * c.r);\n        gl_FragColor.a += (m[16] * c.g);\n        gl_FragColor.a += (m[17] * c.b);\n        gl_FragColor.a += (m[18] * c.a);\n        gl_FragColor.a += m[19];\n\n}\n",
+        // custom uniforms
+        {
+            m: {
+                type: '1fv', value: [
+                    1, 0, 0, 0, 0,
+                    0, 1, 0, 0, 0,
+                    0, 0, 1, 0, 0,
+                    0, 0, 0, 1, 0
+                ]
+            }
+        }
+    );
+}
 
-    var x3 = a * w0 + c * h0 + tx;
-    var y3 = d * h0 + b * w0 + ty;
+ColorMatrixFilter.prototype = Object.create(core.AbstractFilter.prototype);
+ColorMatrixFilter.prototype.constructor = ColorMatrixFilter;
+module.exports = ColorMatrixFilter;
 
-    var x4 =  a * w1 + c * h0 + tx;
-    var y4 =  d * h0 + b * w1 + ty;
 
-    var maxX = -Infinity;
-    var maxY = -Infinity;
+/**
+ * Transforms current matrix and set the new one
+ *
+ * @param matrix {number[]} (mat 5x4)
+ * @param multiply {boolean} if true, current matrix and matrix are multiplied. If false, just set the current matrix with @param matrix
+ */
+ColorMatrixFilter.prototype._loadMatrix = function (matrix, multiply)
+{
+    multiply = !!multiply;
 
-    var minX = Infinity;
-    var minY = Infinity;
+    var newMatrix = matrix;
 
-    minX = x1 < minX ? x1 : minX;
-    minX = x2 < minX ? x2 : minX;
-    minX = x3 < minX ? x3 : minX;
-    minX = x4 < minX ? x4 : minX;
+    if (multiply) {
+        this._multiply(newMatrix, this.uniforms.m.value, matrix);
+        newMatrix = this._colorMatrix(newMatrix);
+    }
 
-    minY = y1 < minY ? y1 : minY;
-    minY = y2 < minY ? y2 : minY;
-    minY = y3 < minY ? y3 : minY;
-    minY = y4 < minY ? y4 : minY;
+    // set the new matrix
+    this.uniforms.m.value = newMatrix;
+};
 
-    maxX = x1 > maxX ? x1 : maxX;
-    maxX = x2 > maxX ? x2 : maxX;
-    maxX = x3 > maxX ? x3 : maxX;
-    maxX = x4 > maxX ? x4 : maxX;
+/**
+ * Multiplies two mat5's
+ *
+ * @param out {array} (mat 5x4) the receiving matrix
+ * @param a {array} (mat 5x4) the first operand
+ * @param b {array} (mat 5x4) the second operand
+ * @returns out {array} (mat 5x4)
+ */
+ColorMatrixFilter.prototype._multiply = function (out, a, b)
+{
 
-    maxY = y1 > maxY ? y1 : maxY;
-    maxY = y2 > maxY ? y2 : maxY;
-    maxY = y3 > maxY ? y3 : maxY;
-    maxY = y4 > maxY ? y4 : maxY;
+    // Red Channel
+    out[0] = (a[0] * b[0]) + (a[1] * b[5]) + (a[2] * b[10]) + (a[3] * b[15]);
+    out[1] = (a[0] * b[1]) + (a[1] * b[6]) + (a[2] * b[11]) + (a[3] * b[16]);
+    out[2] = (a[0] * b[2]) + (a[1] * b[7]) + (a[2] * b[12]) + (a[3] * b[17]);
+    out[3] = (a[0] * b[3]) + (a[1] * b[8]) + (a[2] * b[13]) + (a[3] * b[18]);
+    out[4] = (a[0] * b[4]) + (a[1] * b[9]) + (a[2] * b[14]) + (a[3] * b[19]);
 
-    var bounds = this._bounds;
+    // Green Channel
+    out[5] = (a[5] * b[0]) + (a[6] * b[5]) + (a[7] * b[10]) + (a[8] * b[15]);
+    out[6] = (a[5] * b[1]) + (a[6] * b[6]) + (a[7] * b[11]) + (a[8] * b[16]);
+    out[7] = (a[5] * b[2]) + (a[6] * b[7]) + (a[7] * b[12]) + (a[8] * b[17]);
+    out[8] = (a[5] * b[3]) + (a[6] * b[8]) + (a[7] * b[13]) + (a[8] * b[18]);
+    out[9] = (a[5] * b[4]) + (a[6] * b[9]) + (a[7] * b[14]) + (a[8] * b[19]);
 
-    bounds.x = minX;
-    bounds.width = maxX - minX;
+    // Blue Channel
+    out[10] = (a[10] * b[0]) + (a[11] * b[5]) + (a[12] * b[10]) + (a[13] * b[15]);
+    out[11] = (a[10] * b[1]) + (a[11] * b[6]) + (a[12] * b[11]) + (a[13] * b[16]);
+    out[12] = (a[10] * b[2]) + (a[11] * b[7]) + (a[12] * b[12]) + (a[13] * b[17]);
+    out[13] = (a[10] * b[3]) + (a[11] * b[8]) + (a[12] * b[13]) + (a[13] * b[18]);
+    out[14] = (a[10] * b[4]) + (a[11] * b[9]) + (a[12] * b[14]) + (a[13] * b[19]);
 
-    bounds.y = minY;
-    bounds.height = maxY - minY;
+    // Alpha Channel
+    out[15] = (a[15] * b[0]) + (a[16] * b[5]) + (a[17] * b[10]) + (a[18] * b[15]);
+    out[16] = (a[15] * b[1]) + (a[16] * b[6]) + (a[17] * b[11]) + (a[18] * b[16]);
+    out[17] = (a[15] * b[2]) + (a[16] * b[7]) + (a[17] * b[12]) + (a[18] * b[17]);
+    out[18] = (a[15] * b[3]) + (a[16] * b[8]) + (a[17] * b[13]) + (a[18] * b[18]);
+    out[19] = (a[15] * b[4]) + (a[16] * b[9]) + (a[17] * b[14]) + (a[18] * b[19]);
 
-    return bounds;
+    return out;
 };
 
 /**
- * Update the bounds of the object
+ * Create a Float32 Array and normalize the offset component to 0-1
  *
- * @method updateBounds
+ * @param matrix {number[]} (mat 5x4)
+ * @return m {number[]} (mat 5x4) with all values between 0-1
  */
-PIXI.Graphics.prototype.updateBounds = function()
+ColorMatrixFilter.prototype._colorMatrix = function (matrix)
 {
-    
-    var minX = Infinity;
-    var maxX = -Infinity;
-
-    var minY = Infinity;
-    var maxY = -Infinity;
-
-    var points, x, y, w, h;
+    // Create a Float32 Array and normalize the offset component to 0-1
+    var m = new Float32Array(matrix);
+    m[4] /= 255;
+    m[9] /= 255;
+    m[14] /= 255;
+    m[19] /= 255;
 
-    for (var i = 0; i < this.graphicsData.length; i++) {
-        var data = this.graphicsData[i];
-        var type = data.type;
-        var lineWidth = data.lineWidth;
-
-        points = data.points;
+    return m;
+};
 
-        if(type === PIXI.Graphics.RECT)
-        {
-            x = points[0] - lineWidth/2;
-            y = points[1] - lineWidth/2;
-            w = points[2] + lineWidth;
-            h = points[3] + lineWidth;
+/**
+ * Adjusts brightness
+ *
+ * Multiply the current matrix
+ * @param b {number} value of the brigthness (0 is black)
+ * @param multiply {boolean} refer to ._loadMatrix() method
+ */
+ColorMatrixFilter.prototype.brightness = function (b, multiply)
+{
+    var matrix = [
+        b, 0, 0, 0, 0,
+        0, b, 0, 0, 0,
+        0, 0, b, 0, 0,
+        0, 0, 0, 1, 0
+    ];
 
-            minX = x < minX ? x : minX;
-            maxX = x + w > maxX ? x + w : maxX;
+    this._loadMatrix(matrix, multiply);
+};
 
-            minY = y < minY ? x : minY;
-            maxY = y + h > maxY ? y + h : maxY;
-        }
-        else if(type === PIXI.Graphics.CIRC || type === PIXI.Graphics.ELIP)
-        {
-            x = points[0];
-            y = points[1];
-            w = points[2] + lineWidth/2;
-            h = points[3] + lineWidth/2;
+/**
+ * Set the matrices in grey scales
+ *
+ * Multiply the current matrix
+ * @param scale {number} value of the grey (0 is black)
+ * @param multiply {boolean} refer to ._loadMatrix() method
+ */
+ColorMatrixFilter.prototype.greyscale = function (scale, multiply)
+{
+    var matrix = [
+        scale, scale, scale, 0, 0,
+        scale, scale, scale, 0, 0,
+        scale, scale, scale, 0, 0,
+        0, 0, 0, 1, 0
+    ];
 
-            minX = x - w < minX ? x - w : minX;
-            maxX = x + w > maxX ? x + w : maxX;
+    this._loadMatrix(matrix, multiply);
+};
+//Americanized alias
+ColorMatrixFilter.prototype.grayscale = ColorMatrixFilter.prototype.greyscale;
 
-            minY = y - h < minY ? y - h : minY;
-            maxY = y + h > maxY ? y + h : maxY;
-        }
-        else
-        {
-            // POLY
-            for (var j = 0; j < points.length; j+=2)
-            {
+/**
+ * Set the black and white matrice
+ * Multiply the current matrix
+ *
+ * @param multiply {boolean} refer to ._loadMatrix() method
+ */
+ColorMatrixFilter.prototype.blackAndWhite = function (multiply)
+{
+    var matrix = [
+        0.3, 0.6, 0.1, 0, 0,
+        0.3, 0.6, 0.1, 0, 0,
+        0.3, 0.6, 0.1, 0, 0,
+        0, 0, 0, 1, 0
+    ];
 
-                x = points[j];
-                y = points[j+1];
-                minX = x-lineWidth < minX ? x-lineWidth : minX;
-                maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
+    this._loadMatrix(matrix, multiply);
+};
 
-                minY = y-lineWidth < minY ? y-lineWidth : minY;
-                maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
-            }
-        }
-    }
+/**
+ * Set the hue property of the color
+ *
+ * Multiply the current matrix
+ * @param rotation {number} in degrees
+ * @param multiply {boolean} refer to ._loadMatrix() method
+ */
+ColorMatrixFilter.prototype.hue = function (rotation, multiply)
+{
+    rotation = (rotation || 0) / 180 * Math.PI;
+    var cos = Math.cos(rotation),
+        sin = Math.sin(rotation);
+
+    // luminanceRed, luminanceGreen, luminanceBlue
+    var lumR = 0.213, // or 0.3086
+        lumG = 0.715, // or 0.6094
+        lumB = 0.072; // or 0.0820
+
+    var matrix = [
+        lumR + cos * (1 - lumR) + sin * (-lumR), lumG + cos * (-lumG) + sin * (-lumG), lumB + cos * (-lumB) + sin * (1 - lumB), 0, 0,
+        lumR + cos * (-lumR) + sin * (0.143), lumG + cos * (1 - lumG) + sin * (0.140), lumB + cos * (-lumB) + sin * (-0.283), 0, 0,
+        lumR + cos * (-lumR) + sin * (-(1 - lumR)), lumG + cos * (-lumG) + sin * (lumG), lumB + cos * (1 - lumB) + sin * (lumB), 0, 0,
+        0, 0, 0, 1, 0
+    ];
 
-    var padding = this.boundsPadding;
-    this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2);
+    this._loadMatrix(matrix, multiply);
 };
 
 
 /**
- * Generates the cached sprite when the sprite has cacheAsBitmap = true
+ * Set the contrast matrix, increase the separation between dark and bright
+ * Increase contrast : shadows darker and highlights brighter
+ * Decrease contrast : bring the shadows up and the highlights down
  *
- * @method _generateCachedSprite
- * @private
+ * @param amount {number} value of the contrast
+ * @param multiply {boolean} refer to ._loadMatrix() method
  */
-PIXI.Graphics.prototype._generateCachedSprite = function()
+ColorMatrixFilter.prototype.contrast = function (amount, multiply)
 {
-    var bounds = this.getLocalBounds();
+    var v = (amount || 0) + 1;
+    var o = -128 * (v - 1);
 
-    if(!this._cachedSprite)
-    {
-        var canvasBuffer = new PIXI.CanvasBuffer(bounds.width, bounds.height);
-        var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas);
-        
-        this._cachedSprite = new PIXI.Sprite(texture);
-        this._cachedSprite.buffer = canvasBuffer;
+    var matrix = [
+        v, 0, 0, 0, o,
+        0, v, 0, 0, o,
+        0, 0, v, 0, o,
+        0, 0, 0, 1, 0
+    ];
 
-        this._cachedSprite.worldTransform = this.worldTransform;
-    }
-    else
-    {
-        this._cachedSprite.buffer.resize(bounds.width, bounds.height);
-    }
+    this._loadMatrix(matrix, multiply);
+};
 
-    // leverage the anchor to account for the offset of the element
-    this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
-    this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
+/**
+ * Set the saturation matrix, increase the separation between colors
+ * Increase saturation : increase contrast, brightness, and sharpness
+ * @param amount {number}
+ * @param multiply {boolean} refer to ._loadMatrix() method
+ */
+ColorMatrixFilter.prototype.saturate = function (amount, multiply)
+{
+    var x = (amount || 0) * 2 / 3 + 1;
+    var y = ((x - 1) * -0.5);
 
-   // this._cachedSprite.buffer.context.save();
-    this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y);
-    
-    PIXI.CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context);
-   // this._cachedSprite.buffer.context.restore();
+    var matrix = [
+        x, y, y, 0, 0,
+        y, x, y, 0, 0,
+        y, y, x, 0, 0,
+        0, 0, 0, 1, 0
+    ];
+
+    this._loadMatrix(matrix, multiply);
 };
 
-PIXI.Graphics.prototype.destroyCachedSprite = function()
+/**
+ * Desaturate image (remove color)
+ *
+ * Call the saturate function
+ *
+ * @param multiply {boolean} refer to ._loadMatrix() method
+ */
+ColorMatrixFilter.prototype.desaturate = function (multiply) // jshint unused:false
 {
-    this._cachedSprite.texture.destroy(true);
-
-    // let the gc collect the unused sprite
-    // TODO could be object pooled!
-    this._cachedSprite = null;
+    this.saturate(-1);
 };
 
+/**
+ * Negative image (inverse of classic rgb matrix)
+ *
+ * @param multiply {boolean} refer to ._loadMatrix() method
+ */
+ColorMatrixFilter.prototype.negative = function (multiply)
+{
+    var matrix = [
+        0, 1, 1, 0, 0,
+        1, 0, 1, 0, 0,
+        1, 1, 0, 0, 0,
+        0, 0, 0, 1, 0
+    ];
 
-// SOME TYPES:
-PIXI.Graphics.POLY = 0;
-PIXI.Graphics.RECT = 1;
-PIXI.Graphics.CIRC = 2;
-PIXI.Graphics.ELIP = 3;
+    this._loadMatrix(matrix, multiply);
+};
 
 /**
- * @author Mat Groves http://matgroves.com/
+ * Sepia image
+ *
+ * @param multiply {boolean} refer to ._loadMatrix() method
  */
+ColorMatrixFilter.prototype.sepia = function (multiply)
+{
+    var matrix = [
+        0.393, 0.7689999, 0.18899999, 0, 0,
+        0.349, 0.6859999, 0.16799999, 0, 0,
+        0.272, 0.5339999, 0.13099999, 0, 0,
+        0, 0, 0, 1, 0
+    ];
 
- /**
- * 
- * @class Strip
- * @extends DisplayObjectContainer
- * @constructor
- * @param texture {Texture} The texture to use
- * @param width {Number} the width 
- * @param height {Number} the height
- * 
+    this._loadMatrix(matrix, multiply);
+};
+
+/**
+ * Color motion picture process invented in 1916 (thanks Dominic Szablewski)
+ *
+ * @param multiply {boolean} refer to ._loadMatrix() method
  */
-PIXI.Strip = function(texture, width, height)
+ColorMatrixFilter.prototype.technicolor = function (multiply)
 {
-    PIXI.DisplayObjectContainer.call( this );
-    this.texture = texture;
-    this.blendMode = PIXI.blendModes.NORMAL;
+    var matrix = [
+        1.9125277891456083, -0.8545344976951645, -0.09155508482755585, 0, 11.793603434377337,
+        -0.3087833385928097, 1.7658908555458428, -0.10601743074722245, 0, -70.35205161461398,
+        -0.231103377548616, -0.7501899197440212, 1.847597816108189, 0, 30.950940869491138,
+        0, 0, 0, 1, 0
+    ];
 
-    try
-    {
-        this.uvs = new Float32Array([0, 1,
-                1, 1,
-                1, 0, 0,1]);
+    this._loadMatrix(matrix, multiply);
+};
 
-        this.verticies = new Float32Array([0, 0,
-                          0,0,
-                          0,0, 0,
-                          0, 0]);
+/**
+ * Polaroid filter
+ *
+ * @param multiply {boolean} refer to ._loadMatrix() method
+ */
+ColorMatrixFilter.prototype.polaroid = function (multiply)
+{
+    var matrix = [
+        1.438, -0.062, -0.062, 0, 0,
+        -0.122, 1.378, -0.122, 0, 0,
+        -0.016, -0.016, 1.483, 0, 0,
+        0, 0, 0, 1, 0
+    ];
 
-        this.colors = new Float32Array([1, 1, 1, 1]);
+    this._loadMatrix(matrix, multiply);
+};
 
-        this.indices = new Uint16Array([0, 1, 2, 3]);
-    }
-    catch(error)
-    {
-        this.uvs = [0, 1,
-                1, 1,
-                1, 0, 0,1];
+/**
+ * Filter who transforms : Red -> Blue and Blue -> Red
+ *
+ * @param multiply {boolean} refer to ._loadMatrix() method
+ */
+ColorMatrixFilter.prototype.toBGR = function (multiply)
+{
+    var matrix = [
+        0, 0, 1, 0, 0,
+        0, 1, 0, 0, 0,
+        1, 0, 0, 0, 0,
+        0, 0, 0, 1, 0
+    ];
 
-        this.verticies = [0, 0,
-                          0,0,
-                          0,0, 0,
-                          0, 0];
+    this._loadMatrix(matrix, multiply);
+};
 
-        this.colors = [1, 1, 1, 1];
+/**
+ * Color reversal film introduced by Eastman Kodak in 1935. (thanks Dominic Szablewski)
+ *
+ * @param multiply {boolean} refer to ._loadMatrix() method
+ */
+ColorMatrixFilter.prototype.kodachrome = function (multiply)
+{
+    var matrix = [
+        1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502,
+        -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203,
+        -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946,
+        0, 0, 0, 1, 0
+    ];
 
-        this.indices = [0, 1, 2, 3];
-    }
+    this._loadMatrix(matrix, multiply);
+};
 
+/**
+ * Brown delicious browni filter (thanks Dominic Szablewski)
+ *
+ * @param multiply {boolean} refer to ._loadMatrix() method
+ */
+ColorMatrixFilter.prototype.browni = function (multiply)
+{
+    var matrix = [
+        0.5997023498159715, 0.34553243048391263, -0.2708298674538042, 0, 47.43192855600873,
+        -0.037703249837783157, 0.8609577587992641, 0.15059552388459913, 0, -36.96841498319127,
+        0.24113635128153335, -0.07441037908422492, 0.44972182064877153, 0, -7.562075277591283,
+        0, 0, 0, 1, 0
+    ];
 
-    /*
-    this.uvs = new Float32Array()
-    this.verticies = new Float32Array()
-    this.colors = new Float32Array()
-    this.indices = new Uint16Array()
-    */
-    
-    this.width = width;
-    this.height = height;
+    this._loadMatrix(matrix, multiply);
+};
 
-    // load the texture!
-    if(texture.baseTexture.hasLoaded)
-    {
-        this.width   = this.texture.frame.width;
-        this.height  = this.texture.frame.height;
-        this.updateFrame = true;
-    }
-    else
-    {
-        this.onTextureUpdateBind = this.onTextureUpdate.bind(this);
-        this.texture.addEventListener( 'update', this.onTextureUpdateBind );
-    }
+/*
+ * Vintage filter (thanks Dominic Szablewski)
+ *
+ * @param multiply {boolean} refer to ._loadMatrix() method
+ */
+ColorMatrixFilter.prototype.vintage = function (multiply)
+{
+    var matrix = [
+        0.6279345635605994, 0.3202183420819367, -0.03965408211312453, 0, 9.651285835294123,
+        0.02578397704808868, 0.6441188644374771, 0.03259127616149294, 0, 7.462829176470591,
+        0.0466055556782719, -0.0851232987247891, 0.5241648018700465, 0, 5.159190588235296,
+        0, 0, 0, 1, 0
+    ];
 
-    this.renderable = true;
+    this._loadMatrix(matrix, multiply);
 };
 
-// constructor
-PIXI.Strip.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
-PIXI.Strip.prototype.constructor = PIXI.Strip;
-
 /*
- * Sets the texture that the Strip will use 
+ * We don't know exactly what it does, kind of gradient map, but funny to play with!
  *
- * @method setTexture
- * @param texture {Texture} the texture that will be used
- * @private
+ * @param desaturation {number}
+ * @param toned {number}
+ * @param lightColor {string} (example : "0xFFE580")
+ * @param darkColor {string}  (example : "0xFFE580")
+ *
+ * @param multiply {boolean} refer to ._loadMatrix() method
  */
-PIXI.Strip.prototype.setTexture = function(texture)
+ColorMatrixFilter.prototype.colorTone = function (desaturation, toned, lightColor, darkColor, multiply)
 {
-    //TODO SET THE TEXTURES
-    //TODO VISIBILITY
+    desaturation = desaturation || 0.2;
+    toned = toned || 0.15;
+    lightColor = lightColor || 0xFFE580;
+    darkColor = darkColor || 0x338000;
 
-    // stop current texture
-    this.texture = texture;
-    this.width   = texture.frame.width;
-    this.height  = texture.frame.height;
-    this.updateFrame = true;
+    var lR = ((lightColor >> 16) & 0xFF) / 255;
+    var lG = ((lightColor >> 8) & 0xFF) / 255;
+    var lB = (lightColor & 0xFF) / 255;
+
+    var dR = ((darkColor >> 16) & 0xFF) / 255;
+    var dG = ((darkColor >> 8) & 0xFF) / 255;
+    var dB = (darkColor & 0xFF) / 255;
+
+    var matrix = [
+        0.3, 0.59, 0.11, 0, 0,
+        lR, lG, lB, desaturation, 0,
+        dR, dG, dB, toned, 0,
+        lR - dR, lG - dG, lB - dB, 0, 0
+    ];
+
+    this._loadMatrix(matrix, multiply);
 };
 
-/**
- * When the texture is updated, this event will fire to update the scale and frame
+/*
+ * Night effect
  *
- * @method onTextureUpdate
- * @param event
- * @private
+ * @param intensity {number}
+ * @param multiply {boolean} refer to ._loadMatrix() method
  */
-PIXI.Strip.prototype.onTextureUpdate = function()
+ColorMatrixFilter.prototype.night = function (intensity, multiply)
 {
-    this.updateFrame = true;
+    intensity = intensity || 0.1;
+    var matrix = [
+        intensity * ( -2.0), -intensity, 0, 0, 0,
+        -intensity, 0, intensity, 0, 0,
+        0, intensity, intensity * 2.0, 0, 0,
+        0, 0, 0, 1, 0
+    ];
+
+    this._loadMatrix(matrix, multiply);
 };
-/* @author Mat Groves http://matgroves.com/ @Doormat23
- */
 
-/**
- * 
- * @class Rope
- * @constructor
- * @param texture {Texture} The texture to use
- * @param points {Array}
- * 
+
+/*
+ * Predator effect
+ *
+ * Erase the current matrix by setting a new indepent one
+ *
+ * @param amount {number} how much the predator feels his future victim
+ * @param multiply {boolean} refer to ._loadMatrix() method
  */
-PIXI.Rope = function(texture, points)
+ColorMatrixFilter.prototype.predator = function (amount, multiply)
 {
-    PIXI.Strip.call( this, texture );
-    this.points = points;
-
-    try
-    {
-        this.verticies = new Float32Array(points.length * 4);
-        this.uvs = new Float32Array(points.length * 4);
-        this.colors = new Float32Array(points.length * 2);
-        this.indices = new Uint16Array(points.length * 2);
-    }
-    catch(error)
-    {
-        this.verticies = new Array(points.length * 4);
-        this.uvs = new Array(points.length * 4);
-        this.colors = new Array(points.length * 2);
-        this.indices = new Array(points.length * 2);
-    }
+    var matrix = [
+        11.224130630493164 * amount, -4.794486999511719 * amount, -2.8746118545532227 * amount, 0 * amount, 0.40342438220977783 * amount,
+        -3.6330697536468506 * amount, 9.193157196044922 * amount, -2.951810836791992 * amount, 0 * amount, -1.316135048866272 * amount,
+        -3.2184197902679443 * amount, -4.2375030517578125 * amount, 7.476448059082031 * amount, 0 * amount, 0.8044459223747253 * amount,
+        0, 0, 0, 1, 0
+    ];
 
-    this.refresh();
+    this._loadMatrix(matrix, multiply);
 };
 
+/*
+ * LSD effect
+ *
+ * Multiply the current matrix
+ *
+ * @param amount {number} How crazy is your effect
+ * @param multiply {boolean} refer to ._loadMatrix() method
+ */
+ColorMatrixFilter.prototype.lsd = function (multiply)
+{
+    var matrix = [
+        2, -0.4, 0.5, 0, 0,
+        -0.5, 2, -0.4, 0, 0,
+        -0.4, -0.5, 3, 0, 0,
+        0, 0, 0, 1, 0
+    ];
 
-// constructor
-PIXI.Rope.prototype = Object.create( PIXI.Strip.prototype );
-PIXI.Rope.prototype.constructor = PIXI.Rope;
+    this._loadMatrix(matrix, multiply);
+};
 
 /*
- * Refreshes 
+ * Reset function
+ *
+ * Erase the current matrix by setting the default one
  *
- * @method refresh
  */
-PIXI.Rope.prototype.refresh = function()
+ColorMatrixFilter.prototype.reset = function ()
 {
-    var points = this.points;
-    if(points.length < 1) return;
+    var matrix = [
+        1, 0, 0, 0, 0,
+        0, 1, 0, 0, 0,
+        0, 0, 1, 0, 0,
+        0, 0, 0, 1, 0
+    ];
 
-    var uvs = this.uvs;
+    this._loadMatrix(matrix, false);
+};
 
-    var lastPoint = points[0];
-    var indices = this.indices;
-    var colors = this.colors;
 
-    this.count-=0.2;
+Object.defineProperties(ColorMatrixFilter.prototype, {
+    /**
+     * Sets the matrix of the color matrix filter
+     *
+     * @member {number[]}
+     * @memberof ColorMatrixFilter#
+     * @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]
+     */
+    matrix: {
+        get: function ()
+        {
+            return this.uniforms.m.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.m.value = value;
+        }
+    }
+});
 
+},{"../../core":29}],92:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
 
-    uvs[0] = 0;
-    uvs[1] = 1;
-    uvs[2] = 0;
-    uvs[3] = 1;
 
-    colors[0] = 1;
-    colors[1] = 1;
+/**
+ * This lowers the color depth of your image by the given amount, producing an image with a smaller palette.
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function ColorStepFilter()
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        null,
+        // fragment shader
+        "precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform float step;\n\nvoid main(void)\n{\n    vec4 color = texture2D(uSampler, vTextureCoord);\n\n    color = floor(color * step) / step;\n\n    gl_FragColor = color;\n}\n",
+        // custom uniforms
+        {
+            step: { type: '1f', value: 5 }
+        }
+    );
+}
 
-    indices[0] = 0;
-    indices[1] = 1;
+ColorStepFilter.prototype = Object.create(core.AbstractFilter.prototype);
+ColorStepFilter.prototype.constructor = ColorStepFilter;
+module.exports = ColorStepFilter;
 
-    var total = points.length,
-        point, index, amount;
+Object.defineProperties(ColorStepFilter.prototype, {
+    /**
+     * The number of steps to reduce the palette by.
+     *
+     * @member {number}
+     * @memberof ColorStepFilter#
+     */
+    step: {
+        get: function ()
+        {
+            return this.uniforms.step.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.step.value = value;
+        }
+    }
+});
 
-    for (var i = 1; i < total; i++)
-    {
+},{"../../core":29}],93:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
 
-        point = points[i];
-        index = i * 4;
-        // time to do some smart drawing!
-        amount = i / (total-1);
 
-        if(i%2)
+/**
+ * The ConvolutionFilter class applies a matrix convolution filter effect.
+ * A convolution combines pixels in the input image with neighboring pixels to produce a new image.
+ * A wide variety of image effects can be achieved through convolutions, including blurring, edge
+ * detection, sharpening, embossing, and beveling. The matrix should be specified as a 9 point Array.
+ * See http://docs.gimp.org/en/plug-in-convmatrix.html for more info.
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ * @param matrix {number[]} An array of values used for matrix transformation. Specified as a 9 point Array.
+ * @param width {number} Width of the object you are transforming
+ * @param height {number} Height of the object you are transforming
+ */
+function ConvolutionFilter(matrix, width, height)
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        null,
+        // fragment shader
+        "precision mediump float;\n\nvarying mediump vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform vec2 texelSize;\nuniform float matrix[9];\n\nvoid main(void)\n{\n   vec4 c11 = texture2D(uSampler, vTextureCoord - texelSize); // top left\n   vec4 c12 = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - texelSize.y)); // top center\n   vec4 c13 = texture2D(uSampler, vec2(vTextureCoord.x + texelSize.x, vTextureCoord.y - texelSize.y)); // top right\n\n   vec4 c21 = texture2D(uSampler, vec2(vTextureCoord.x - texelSize.x, vTextureCoord.y)); // mid left\n   vec4 c22 = texture2D(uSampler, vTextureCoord); // mid center\n   vec4 c23 = texture2D(uSampler, vec2(vTextureCoord.x + texelSize.x, vTextureCoord.y)); // mid right\n\n   vec4 c31 = texture2D(uSampler, vec2(vTextureCoord.x - texelSize.x, vTextureCoord.y + texelSize.y)); // bottom left\n   vec4 c32 = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + texelSize.y)); // bottom center\n   vec4 c33 = texture2D(uSampler, vTextureCoord + texelSize); // bottom right\n\n   gl_FragColor =\n       c11 * matrix[0] + c12 * matrix[1] + c13 * matrix[2] +\n       c21 * matrix[3] + c22 * matrix[4] + c23 * matrix[5] +\n       c31 * matrix[6] + c32 * matrix[7] + c33 * matrix[8];\n\n   gl_FragColor.a = c22.a;\n}\n",
+        // custom uniforms
         {
-            uvs[index] = amount;
-            uvs[index+1] = 0;
+            matrix:     { type: '1fv', value: new Float32Array(matrix) },
+            texelSize:  { type: '2v', value: { x: 1 / width, y: 1 / height } }
+        }
+    );
+}
 
-            uvs[index+2] = amount;
-            uvs[index+3] = 1;
+ConvolutionFilter.prototype = Object.create(core.AbstractFilter.prototype);
+ConvolutionFilter.prototype.constructor = ConvolutionFilter;
+module.exports = ConvolutionFilter;
 
-        }
-        else
+Object.defineProperties(ConvolutionFilter.prototype, {
+    /**
+     * An array of values used for matrix transformation. Specified as a 9 point Array.
+     *
+     * @member {number[]}
+     * @memberof ConvolutionFilter#
+     */
+    matrix: {
+        get: function ()
+        {
+            return this.uniforms.matrix.value;
+        },
+        set: function (value)
         {
-            uvs[index] = amount;
-            uvs[index+1] = 0;
+            this.uniforms.matrix.value = new Float32Array(value);
+        }
+    },
 
-            uvs[index+2] = amount;
-            uvs[index+3] = 1;
+    /**
+     * Width of the object you are transforming
+     *
+     * @member {number}
+     * @memberof ConvolutionFilter#
+     */
+    width: {
+        get: function ()
+        {
+            return 1/this.uniforms.texelSize.value.x;
+        },
+        set: function (value)
+        {
+            this.uniforms.texelSize.value.x = 1/value;
         }
+    },
 
-        index = i * 2;
-        colors[index] = 1;
-        colors[index+1] = 1;
+    /**
+     * Height of the object you are transforming
+     *
+     * @member {number}
+     * @memberof ConvolutionFilter#
+     */
+    height: {
+        get: function ()
+        {
+            return 1/this.uniforms.texelSize.value.y;
+        },
+        set: function (value)
+        {
+            this.uniforms.texelSize.value.y = 1/value;
+        }
+    }
+});
 
-        index = i * 2;
-        indices[index] = index;
-        indices[index + 1] = index + 1;
+},{"../../core":29}],94:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
 
-        lastPoint = point;
-    }
-};
 
-/*
- * Updates the object transform for rendering
+/**
+ * A Cross Hatch effect filter.
  *
- * @method updateTransform
- * @private
- */
-PIXI.Rope.prototype.updateTransform = function()
-{
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function CrossHatchFilter()
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        null,
+        // fragment shader
+        "precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\n\nvoid main(void)\n{\n    float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);\n\n    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n\n    if (lum < 1.00)\n    {\n        if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0)\n        {\n            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n        }\n    }\n\n    if (lum < 0.75)\n    {\n        if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0)\n        {\n            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n        }\n    }\n\n    if (lum < 0.50)\n    {\n        if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0)\n        {\n            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n        }\n    }\n\n    if (lum < 0.3)\n    {\n        if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0)\n        {\n            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n        }\n    }\n}\n"
+    );
+}
 
-    var points = this.points;
-    if(points.length < 1)return;
+CrossHatchFilter.prototype = Object.create(core.AbstractFilter.prototype);
+CrossHatchFilter.prototype.constructor = CrossHatchFilter;
+module.exports = CrossHatchFilter;
 
-    var lastPoint = points[0];
-    var nextPoint;
-    var perp = {x:0, y:0};
+},{"../../core":29}],95:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
 
-    this.count-=0.2;
 
-    var verticies = this.verticies;
-    verticies[0] = lastPoint.x + perp.x;
-    verticies[1] = lastPoint.y + perp.y; //+ 200
-    verticies[2] = lastPoint.x - perp.x;
-    verticies[3] = lastPoint.y - perp.y;//+200
-    // time to do some smart drawing!
+/**
+ * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object.
+ * You can use this filter to apply all manor of crazy warping effects
+ * Currently the r property of the texture is used to offset the x and the g property of the texture is used to offset the y.
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ * @param sprite {Sprite} the sprite used for the displacement map. (make sure its added to the scene!)
+ */
+function DisplacementFilter(sprite)
+{
+    var maskMatrix = new core.math.Matrix();
+    sprite.renderable = false;
+
+    core.AbstractFilter.call(this,
+        // vertex shader
+        "attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\nattribute vec4 aColor;\n\nuniform mat3 projectionMatrix;\nuniform mat3 otherMatrix;\n\nvarying vec2 vMapCoord;\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\n\nvoid main(void)\n{\n   gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n   vTextureCoord = aTextureCoord;\n   vMapCoord = ( otherMatrix * vec3( aTextureCoord, 1.0)  ).xy;\n   vColor = vec4(aColor.rgb * aColor.a, aColor.a);\n}\n",
+        // fragment shader
+        "precision lowp float;\n\nvarying vec2 vMapCoord;\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\n\nuniform vec2 scale;\n\nuniform sampler2D uSampler;\nuniform sampler2D mapSampler;\n\nvoid main(void)\n{\n   vec4 original =  texture2D(uSampler, vTextureCoord);\n   vec4 map =  texture2D(mapSampler, vMapCoord);\n\n   map -= 0.5;\n   map.xy *= scale;\n\n   gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + map.x, vTextureCoord.y + map.y));\n}\n",
+        // uniforms
+        {
+            mapSampler:     { type: 'sampler2D', value: sprite.texture },
+            otherMatrix:    { type: 'mat3', value: maskMatrix.toArray(true) },
+            scale:          { type: 'v2', value: { x: 1, y: 1 } }
+        }
+    );
 
-    var total = points.length,
-        point, index, ratio, perpLength, num;
+    this.maskSprite = sprite;
+    this.maskMatrix = maskMatrix;
 
-    for (var i = 1; i < total; i++)
-    {
-        point = points[i];
-        index = i * 4;
 
-        if(i < points.length-1)
-        {
-            nextPoint = points[i+1];
-        }
-        else
-        {
-            nextPoint = point;
-        }
+    this.scale = new core.math.Point(20,20);
 
-        perp.y = -(nextPoint.x - lastPoint.x);
-        perp.x = nextPoint.y - lastPoint.y;
+}
 
-        ratio = (1 - (i / (total-1))) * 10;
+DisplacementFilter.prototype = Object.create(core.AbstractFilter.prototype);
+DisplacementFilter.prototype.constructor = DisplacementFilter;
+module.exports = DisplacementFilter;
 
-        if(ratio > 1) ratio = 1;
+DisplacementFilter.prototype.applyFilter = function (renderer, input, output)
+{
+    var filterManager = renderer.filterManager;
 
-        perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y);
-        num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio;
-        perp.x /= perpLength;
-        perp.y /= perpLength;
+    filterManager.calculateMappedMatrix(input.frame, this.maskSprite, this.maskMatrix);
 
-        perp.x *= num;
-        perp.y *= num;
+    this.uniforms.otherMatrix.value = this.maskMatrix.toArray(true);
+    this.uniforms.scale.value.x = this.scale.x * (1/input.frame.width);
+    this.uniforms.scale.value.y = this.scale.y * (1/input.frame.height);
 
-        verticies[index] = point.x + perp.x;
-        verticies[index+1] = point.y + perp.y;
-        verticies[index+2] = point.x - perp.x;
-        verticies[index+3] = point.y - perp.y;
+    var shader = this.getShader(renderer);
+     // draw the filter...
+    filterManager.applyFilter(shader, input, output);
+};
 
-        lastPoint = point;
+
+Object.defineProperties(DisplacementFilter.prototype, {
+    /**
+     * The texture used for the displacement map. Must be power of 2 sized texture.
+     *
+     * @member {Texture}
+     * @memberof DisplacementFilter#
+     */
+    map: {
+        get: function ()
+        {
+            return this.uniforms.mapSampler.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.mapSampler.value = value;
+
+        }
     }
+});
+
+},{"../../core":29}],96:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
 
-    PIXI.DisplayObjectContainer.prototype.updateTransform.call( this );
-};
-/*
- * Sets the texture that the Rope will use 
- *
- * @method setTexture
- * @param texture {Texture} the texture that will be used
- */
-PIXI.Rope.prototype.setTexture = function(texture)
-{
-    // stop current texture
-    this.texture = texture;
-    this.updateFrame = true;
-};
 
 /**
- * @author Mat Groves http://matgroves.com/
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js
  */
 
 /**
- * A tiling sprite is a fast way of rendering a tiling image
+ * This filter applies a dotscreen effect making display objects appear to be made out of
+ * black and white halftone dots like an old printer.
  *
- * @class TilingSprite
- * @extends DisplayObjectContainer
- * @constructor
- * @param texture {Texture} the texture of the tiling sprite
- * @param width {Number}  the width of the tiling sprite
- * @param height {Number} the height of the tiling sprite
- */
-PIXI.TilingSprite = function(texture, width, height)
-{
-    PIXI.Sprite.call( this, texture);
-
-    /**
-     * The with of the tiling sprite
-     *
-     * @property width
-     * @type Number
-     */
-    this.width = width || 100;
-    /**
-     * The height of the tiling sprite
-     *
-     * @property height
-     * @type Number
-     */
-    this.height = height || 100;
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function DotScreenFilter()
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        null,
+        // fragment shader
+        "precision mediump float;\n\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\n\nuniform vec4 dimensions;\nuniform sampler2D uSampler;\n\nuniform float angle;\nuniform float scale;\n\nfloat pattern()\n{\n   float s = sin(angle), c = cos(angle);\n   vec2 tex = vTextureCoord * dimensions.xy;\n   vec2 point = vec2(\n       c * tex.x - s * tex.y,\n       s * tex.x + c * tex.y\n   ) * scale;\n   return (sin(point.x) * sin(point.y)) * 4.0;\n}\n\nvoid main()\n{\n   vec4 color = texture2D(uSampler, vTextureCoord);\n   float average = (color.r + color.g + color.b) / 3.0;\n   gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);\n}\n",
+        // custom uniforms
+        {
+            scale:      { type: '1f', value: 1 },
+            angle:      { type: '1f', value: 5 },
+            dimensions: { type: '4fv', value: [0, 0, 0, 0] }
+        }
+    );
+}
 
-    /**
-     * The scaling of the image that is being tiled
-     *
-     * @property tileScale
-     * @type Point
-     */
-    this.tileScale = new PIXI.Point(1,1);
+DotScreenFilter.prototype = Object.create(core.AbstractFilter.prototype);
+DotScreenFilter.prototype.constructor = DotScreenFilter;
+module.exports = DotScreenFilter;
 
+Object.defineProperties(DotScreenFilter.prototype, {
     /**
-     * A point that represents the scale of the texture object
-     *
-     * @property tileScaleOffset
-     * @type Point
-     */
-    this.tileScaleOffset = new PIXI.Point(1,1);
-    
-    /**
-     * The offset position of the image that is being tiled
-     *
-     * @property tilePosition
-     * @type Point
+     * The scale of the effect.
+     * @member {number}
+     * @memberof DotScreenFilter#
      */
-    this.tilePosition = new PIXI.Point(0,0);
-
+    scale: {
+        get: function ()
+        {
+            return this.uniforms.scale.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.scale.value = value;
+        }
+    },
 
     /**
-     * Whether this sprite is renderable or not
-     *
-     * @property renderable
-     * @type Boolean
-     * @default true
+     * The radius of the effect.
+     * @member {number}
+     * @memberof DotScreenFilter#
      */
-    this.renderable = true;
+    angle: {
+        get: function ()
+        {
+            return this.uniforms.angle.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.angle.value = value;
+        }
+    }
+});
 
-    /**
-     * The tint applied to the sprite. This is a hex value
-     *
-     * @property tint
-     * @type Number
-     * @default 0xFFFFFF
-     */
-    this.tint = 0xFFFFFF;
-    
-    /**
-     * The blend mode to be applied to the sprite
-     *
-     * @property blendMode
-     * @type Number
-     * @default PIXI.blendModes.NORMAL;
-     */
-    this.blendMode = PIXI.blendModes.NORMAL;
-};
+},{"../../core":29}],97:[function(require,module,exports){
+var core = require('../../core');
 
-// constructor
-PIXI.TilingSprite.prototype = Object.create(PIXI.Sprite.prototype);
-PIXI.TilingSprite.prototype.constructor = PIXI.TilingSprite;
+// @see https://github.com/substack/brfs/issues/25
 
 
 /**
- * The width of the sprite, setting this will actually modify the scale to achieve the value set
+ * The BlurYTintFilter applies a vertical Gaussian blur to an object.
  *
- * @property width
- * @type Number
- */
-Object.defineProperty(PIXI.TilingSprite.prototype, 'width', {
-    get: function() {
-        return this._width;
-    },
-    set: function(value) {
-        
-        this._width = value;
-    }
-});
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function BlurYTintFilter()
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        "attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\nattribute vec4 aColor;\n\nuniform float strength;\nuniform vec2 offset;\n\nuniform mat3 projectionMatrix;\n\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\nvarying vec2 vBlurTexCoords[6];\n\nvoid main(void)\n{\n    gl_Position = vec4((projectionMatrix * vec3((aVertexPosition+offset), 1.0)).xy, 0.0, 1.0);\n    vTextureCoord = aTextureCoord;\n\n    vBlurTexCoords[ 0] = aTextureCoord + vec2(0.0, -0.012 * strength);\n    vBlurTexCoords[ 1] = aTextureCoord + vec2(0.0, -0.008 * strength);\n    vBlurTexCoords[ 2] = aTextureCoord + vec2(0.0, -0.004 * strength);\n    vBlurTexCoords[ 3] = aTextureCoord + vec2(0.0,  0.004 * strength);\n    vBlurTexCoords[ 4] = aTextureCoord + vec2(0.0,  0.008 * strength);\n    vBlurTexCoords[ 5] = aTextureCoord + vec2(0.0,  0.012 * strength);\n\n   vColor = vec4(aColor.rgb * aColor.a, aColor.a);\n}\n",
+        // fragment shader
+        "precision lowp float;\n\nvarying vec2 vTextureCoord;\nvarying vec2 vBlurTexCoords[6];\nvarying vec4 vColor;\n\nuniform vec3 color;\nuniform float alpha;\n\nuniform sampler2D uSampler;\n\nvoid main(void)\n{\n    vec4 sum = vec4(0.0);\n\n    sum += texture2D(uSampler, vBlurTexCoords[ 0])*0.004431848411938341;\n    sum += texture2D(uSampler, vBlurTexCoords[ 1])*0.05399096651318985;\n    sum += texture2D(uSampler, vBlurTexCoords[ 2])*0.2419707245191454;\n    sum += texture2D(uSampler, vTextureCoord     )*0.3989422804014327;\n    sum += texture2D(uSampler, vBlurTexCoords[ 3])*0.2419707245191454;\n    sum += texture2D(uSampler, vBlurTexCoords[ 4])*0.05399096651318985;\n    sum += texture2D(uSampler, vBlurTexCoords[ 5])*0.004431848411938341;\n\n    gl_FragColor = vec4( color.rgb * sum.a * alpha, sum.a * alpha );\n}\n",
+        // set the uniforms
+        {
+            blur: { type: '1f', value: 1 / 512 },
+            color: { type: 'c', value: [0,0,0]},
+            alpha: { type: '1f', value: 0.7 },
+            offset: { type: '2f', value:[5, 5]},
+            strength: { type: '1f', value:1}
+        }
+    );
 
-/**
- * The height of the TilingSprite, setting this will actually modify the scale to achieve the value set
- *
- * @property height
- * @type Number
- */
-Object.defineProperty(PIXI.TilingSprite.prototype, 'height', {
-    get: function() {
-        return  this._height;
-    },
-    set: function(value) {
-        this._height = value;
-    }
-});
+    this.passes = 1;
+    this.strength = 4;
+}
 
-/**
- * When the texture is updated, this event will be fired to update the scale and frame
- *
- * @method onTextureUpdate
- * @param event
- * @private
- */
-PIXI.TilingSprite.prototype.onTextureUpdate = function()
-{
-    this.updateFrame = true;
-};
+BlurYTintFilter.prototype = Object.create(core.AbstractFilter.prototype);
+BlurYTintFilter.prototype.constructor = BlurYTintFilter;
+module.exports = BlurYTintFilter;
 
-/**
-* Renders the object using the WebGL renderer
-*
-* @method _renderWebGL
-* @param renderSession {RenderSession} 
-* @private
-*/
-PIXI.TilingSprite.prototype._renderWebGL = function(renderSession)
+BlurYTintFilter.prototype.applyFilter = function (renderer, input, output, clear)
 {
+    var shader = this.getShader(renderer);
 
-    if(this.visible === false || this.alpha === 0)return;
-    
-    var i,j;
+    this.uniforms.strength.value = this.strength / 4 / this.passes * (input.frame.height / input.size.height);
 
-    if(this.mask || this.filters)
+    if(this.passes === 1)
     {
-        if(this.mask)
-        {
-            renderSession.spriteBatch.stop();
-            renderSession.maskManager.pushMask(this.mask, renderSession);
-            renderSession.spriteBatch.start();
-        }
-
-        if(this.filters)
-        {
-            renderSession.spriteBatch.flush();
-            renderSession.filterManager.pushFilter(this._filterBlock);
-        }
-
-        if(!this.tilingTexture)this.generateTilingTexture(true);
-        else renderSession.spriteBatch.renderTilingSprite(this);
+        renderer.filterManager.applyFilter(shader, input, output, clear);
+    }
+    else
+    {
+        var renderTarget = renderer.filterManager.getRenderTarget(true);
+        var flip = input;
+        var flop = renderTarget;
 
-        // simple render children!
-        for(i=0,j=this.children.length; i<j; i++)
+        for(var i = 0; i < this.passes-1; i++)
         {
-            this.children[i]._renderWebGL(renderSession);
+            renderer.filterManager.applyFilter(shader, flip, flop, clear);
+
+           var temp = flop;
+           flop = flip;
+           flip = temp;
         }
 
-        renderSession.spriteBatch.stop();
+        renderer.filterManager.applyFilter(shader, flip, output, clear);
 
-        if(this.filters)renderSession.filterManager.popFilter();
-        if(this.mask)renderSession.maskManager.popMask(renderSession);
-        
-        renderSession.spriteBatch.start();
+        renderer.filterManager.returnRenderTarget(renderTarget);
     }
-    else
-    {
-        if(!this.tilingTexture)this.generateTilingTexture(true);
-        else renderSession.spriteBatch.renderTilingSprite(this);
-        
-        // simple render children!
-        for(i=0,j=this.children.length; i<j; i++)
+};
+
+
+Object.defineProperties(BlurYTintFilter.prototype, {
+    /**
+     * Sets the strength of both the blur.
+     *
+     * @member {number}
+     * @memberof BlurYFilter#
+     * @default 2
+     */
+    blur: {
+        get: function ()
         {
-            this.children[i]._renderWebGL(renderSession);
+            return  this.strength;
+        },
+        set: function (value)
+        {
+            this.padding = value * 0.5;
+            this.strength = value;
         }
     }
-};
+});
+
+},{"../../core":29}],98:[function(require,module,exports){
+var core = require('../../core'),
+    BlurXFilter = require('../blur/BlurXFilter'),
+    BlurYTintFilter = require('./BlurYTintFilter');
 
 /**
-* Renders the object using the Canvas renderer
-*
-* @method _renderCanvas
-* @param renderSession {RenderSession} 
-* @private
-*/
-PIXI.TilingSprite.prototype._renderCanvas = function(renderSession)
+ * The DropShadowFilter applies a Gaussian blur to an object.
+ * The strength of the blur can be set for x- and y-axis separately.
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function DropShadowFilter()
 {
-    if(this.visible === false || this.alpha === 0)return;
-    
-    var context = renderSession.context;
+    core.AbstractFilter.call(this);
 
-    if(this._mask)
-    {
-        renderSession.maskManager.pushMask(this._mask, context);
-    }
+    this.blurXFilter = new BlurXFilter();
+    this.blurYTintFilter = new BlurYTintFilter();
 
-    context.globalAlpha = this.worldAlpha;
+    this.defaultFilter = new core.AbstractFilter();
 
-    
-    var transform = this.worldTransform;
+    this.padding = 30;
 
-    // allow for trimming
+    this._dirtyPosition = true;
+    this._angle = 45 * Math.PI / 180;
+    this._distance = 10;
+    this.alpha = 0.75;
+    this.hideObject = false;
+    this.blendMode = core.BLEND_MODES.MULTIPLY;
+}
 
-    context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty);
+DropShadowFilter.prototype = Object.create(core.AbstractFilter.prototype);
+DropShadowFilter.prototype.constructor = DropShadowFilter;
+module.exports = DropShadowFilter;
 
+DropShadowFilter.prototype.applyFilter = function (renderer, input, output)
+{
+    var renderTarget = renderer.filterManager.getRenderTarget(true);
 
-    if(!this.__tilePattern)
+    //TODO - copyTexSubImage2D could be used here?
+    if(this._dirtyPosition)
     {
-        this.generateTilingTexture(false);
-        
-        if(this.tilingTexture)
-        {
-            this.__tilePattern = context.createPattern(this.tilingTexture.baseTexture.source, 'repeat');
-        }
-
-    }
+        this._dirtyPosition = false;
 
-    // check blend mode
-    if(this.blendMode !== renderSession.currentBlendMode)
-    {
-        renderSession.currentBlendMode = this.blendMode;
-        context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode];
+        this.blurYTintFilter.uniforms.offset.value[0] = Math.sin(this._angle) * this._distance;
+        this.blurYTintFilter.uniforms.offset.value[1] = Math.cos(this._angle) * this._distance;
     }
 
-    context.beginPath();
-
-    var tilePosition = this.tilePosition;
-    var tileScale = this.tileScale;
-
-    tilePosition.x %= this.tilingTexture.baseTexture.width;
-    tilePosition.y %= this.tilingTexture.baseTexture.height;
+    this.blurXFilter.applyFilter(renderer, input, renderTarget);
 
-    // offset
-    context.scale(tileScale.x,tileScale.y);
-    context.translate(tilePosition.x, tilePosition.y);
+    renderer.blendModeManager.setBlendMode(this.blendMode);
 
-    context.fillStyle = this.__tilePattern;
-    context.fillRect(-tilePosition.x,-tilePosition.y,this.width / tileScale.x, this.height / tileScale.y);
+    this.blurYTintFilter.applyFilter(renderer, renderTarget, output);
 
-    context.scale(1/tileScale.x, 1/tileScale.y);
-    context.translate(-tilePosition.x, -tilePosition.y);
+    renderer.blendModeManager.setBlendMode(core.BLEND_MODES.NORMAL);
 
-    context.closePath();
-
-    if(this._mask)
+    if(!this.hideObject)
     {
-        renderSession.maskManager.popMask(renderSession.context);
-    }
-};
 
+        this.defaultFilter.applyFilter(renderer, input, output);
+    }
 
-/**
-* Returns the framing rectangle of the sprite as a PIXI.Rectangle object
-*
-* @method getBounds
-* @return {Rectangle} the framing rectangle
-*/
-PIXI.TilingSprite.prototype.getBounds = function()
-{
 
-    var width = this._width;
-    var height = this._height;
+    renderer.filterManager.returnRenderTarget(renderTarget);
+};
 
-    var w0 = width * (1-this.anchor.x);
-    var w1 = width * -this.anchor.x;
+Object.defineProperties(DropShadowFilter.prototype, {
+    /**
+     * Sets the strength of both the blurX and blurY properties simultaneously
+     *
+     * @member {number}
+     * @memberOf DropShadowFilter#
+     * @default 2
+     */
+    blur: {
+        get: function ()
+        {
+            return this.blurXFilter.blur;
+        },
+        set: function (value)
+        {
+            this.blurXFilter.blur = this.blurYTintFilter.blur = value;
+        }
+    },
 
-    var h0 = height * (1-this.anchor.y);
-    var h1 = height * -this.anchor.y;
+    /**
+     * Sets the strength of the blurX property
+     *
+     * @member {number}
+     * @memberOf DropShadowFilter#
+     * @default 2
+     */
+    blurX: {
+        get: function ()
+        {
+            return this.blurXFilter.blur;
+        },
+        set: function (value)
+        {
+            this.blurXFilter.blur = value;
+        }
+    },
 
-    var worldTransform = this.worldTransform;
+    /**
+     * Sets the strength of the blurY property
+     *
+     * @member {number}
+     * @memberOf DropShadowFilter#
+     * @default 2
+     */
+    blurY: {
+        get: function ()
+        {
+            return this.blurYTintFilter.blur;
+        },
+        set: function (value)
+        {
+            this.blurYTintFilter.blur = value;
+        }
+    },
 
-    var a = worldTransform.a;
-    var b = worldTransform.c;
-    var c = worldTransform.b;
-    var d = worldTransform.d;
-    var tx = worldTransform.tx;
-    var ty = worldTransform.ty;
-    
-    var x1 = a * w1 + c * h1 + tx;
-    var y1 = d * h1 + b * w1 + ty;
+    color: {
+        get: function ()
+        {
+            return  core.utils.rgb2hex( this.blurYTintFilter.uniforms.color.value );
+        },
+        set: function (value)
+        {
+            this.blurYTintFilter.uniforms.color.value = core.utils.hex2rgb(value);
+        }
+    },
 
-    var x2 = a * w0 + c * h1 + tx;
-    var y2 = d * h1 + b * w0 + ty;
+    alpha: {
+        get: function ()
+        {
+            return  this.blurYTintFilter.uniforms.alpha.value;
+        },
+        set: function (value)
+        {
+            this.blurYTintFilter.uniforms.alpha.value = value;
+        }
+    },
 
-    var x3 = a * w0 + c * h0 + tx;
-    var y3 = d * h0 + b * w0 + ty;
+    distance: {
+        get: function ()
+        {
+            return  this._distance;
+        },
+        set: function (value)
+        {
+            this._dirtyPosition = true;
+            this._distance = value;
+        }
+    },
 
-    var x4 =  a * w1 + c * h0 + tx;
-    var y4 =  d * h0 + b * w1 + ty;
+    angle: {
+        get: function ()
+        {
+            return  this._angle;
+        },
+        set: function (value)
+        {
+            this._dirtyPosition = true;
+            this._angle = value;
+        }
+    }
+});
 
-    var maxX = -Infinity;
-    var maxY = -Infinity;
+},{"../../core":29,"../blur/BlurXFilter":88,"./BlurYTintFilter":97}],99:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
 
-    var minX = Infinity;
-    var minY = Infinity;
 
-    minX = x1 < minX ? x1 : minX;
-    minX = x2 < minX ? x2 : minX;
-    minX = x3 < minX ? x3 : minX;
-    minX = x4 < minX ? x4 : minX;
+/**
+ * This greyscales the palette of your Display Objects.
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function GrayFilter()
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        null,
+        // fragment shader
+        "precision mediump float;\n\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\n\nuniform sampler2D uSampler;\nuniform float gray;\n\nvoid main(void)\n{\n   gl_FragColor = texture2D(uSampler, vTextureCoord);\n   gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);\n}\n",
+        // set the uniforms
+        {
+            gray: { type: '1f', value: 1 }
+        }
+    );
+}
 
-    minY = y1 < minY ? y1 : minY;
-    minY = y2 < minY ? y2 : minY;
-    minY = y3 < minY ? y3 : minY;
-    minY = y4 < minY ? y4 : minY;
+GrayFilter.prototype = Object.create(core.AbstractFilter.prototype);
+GrayFilter.prototype.constructor = GrayFilter;
+module.exports = GrayFilter;
 
-    maxX = x1 > maxX ? x1 : maxX;
-    maxX = x2 > maxX ? x2 : maxX;
-    maxX = x3 > maxX ? x3 : maxX;
-    maxX = x4 > maxX ? x4 : maxX;
+Object.defineProperties(GrayFilter.prototype, {
+    /**
+     * The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color.
+     *
+     * @member {number}
+     * @memberof GrayFilter#
+     */
+    gray: {
+        get: function ()
+        {
+            return this.uniforms.gray.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.gray.value = value;
+        }
+    }
+});
 
-    maxY = y1 > maxY ? y1 : maxY;
-    maxY = y2 > maxY ? y2 : maxY;
-    maxY = y3 > maxY ? y3 : maxY;
-    maxY = y4 > maxY ? y4 : maxY;
+},{"../../core":29}],100:[function(require,module,exports){
+/**
+ * @file        Main export of the PIXI filters library
+ * @author      Mat Groves <mat@goodboydigital.com>
+ * @copyright   2013-2015 GoodBoyDigital
+ * @license     {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License}
+ */
+
+/**
+ * @namespace PIXI.filters
+ */
+module.exports = {
+    // expose some internal filters...
+    AbstractFilter:     require('../core/renderers/webgl/filters/AbstractFilter'),
+    FXAAFilter:         require('../core/renderers/webgl/filters/FXAAFilter'),
+    SpriteMaskFilter:   require('../core/renderers/webgl/filters/SpriteMaskFilter'),
+    // add the rest!
+    AsciiFilter:        require('./ascii/AsciiFilter'),
+    BloomFilter:        require('./bloom/BloomFilter'),
+    BlurFilter:         require('./blur/BlurFilter'),
+    BlurXFilter:        require('./blur/BlurXFilter'),
+    BlurYFilter:        require('./blur/BlurYFilter'),
+    BlurDirFilter:      require('./blur/BlurDirFilter'),
+    ColorMatrixFilter:  require('./color/ColorMatrixFilter'),
+    ColorStepFilter:    require('./color/ColorStepFilter'),
+    ConvolutionFilter:  require('./convolution/ConvolutionFilter'),
+    CrossHatchFilter:   require('./crosshatch/CrossHatchFilter'),
+    DisplacementFilter: require('./displacement/DisplacementFilter'),
+    DotScreenFilter:    require('./dot/DotScreenFilter'),
+    GrayFilter:         require('./gray/GrayFilter'),
+    DropShadowFilter:   require('./dropshadow/DropShadowFilter'),
+    InvertFilter:       require('./invert/InvertFilter'),
+    NoiseFilter:        require('./noise/NoiseFilter'),
+    NormalMapFilter:    require('./normal/NormalMapFilter'),
+    PixelateFilter:     require('./pixelate/PixelateFilter'),
+    RGBSplitFilter:     require('./rgb/RGBSplitFilter'),
+    ShockwaveFilter:    require('./shockwave/ShockwaveFilter'),
+    SepiaFilter:        require('./sepia/SepiaFilter'),
+    SmartBlurFilter:    require('./blur/SmartBlurFilter'),
+    TiltShiftFilter:    require('./tiltshift/TiltShiftFilter'),
+    TiltShiftXFilter:   require('./tiltshift/TiltShiftXFilter'),
+    TiltShiftYFilter:   require('./tiltshift/TiltShiftYFilter'),
+    TwistFilter:        require('./twist/TwistFilter')
+};
+
+},{"../core/renderers/webgl/filters/AbstractFilter":49,"../core/renderers/webgl/filters/FXAAFilter":50,"../core/renderers/webgl/filters/SpriteMaskFilter":51,"./ascii/AsciiFilter":84,"./bloom/BloomFilter":85,"./blur/BlurDirFilter":86,"./blur/BlurFilter":87,"./blur/BlurXFilter":88,"./blur/BlurYFilter":89,"./blur/SmartBlurFilter":90,"./color/ColorMatrixFilter":91,"./color/ColorStepFilter":92,"./convolution/ConvolutionFilter":93,"./crosshatch/CrossHatchFilter":94,"./displacement/DisplacementFilter":95,"./dot/DotScreenFilter":96,"./dropshadow/DropShadowFilter":98,"./gray/GrayFilter":99,"./invert/InvertFilter":101,"./noise/NoiseFilter":102,"./normal/NormalMapFilter":103,"./pixelate/PixelateFilter":104,"./rgb/RGBSplitFilter":105,"./sepia/SepiaFilter":106,"./shockwave/ShockwaveFilter":107,"./tiltshift/TiltShiftFilter":109,"./tiltshift/TiltShiftXFilter":110,"./tiltshift/TiltShiftYFilter":111,"./twist/TwistFilter":112}],101:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
+
+
+/**
+ * This inverts your Display Objects colors.
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function InvertFilter()
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        null,
+        // fragment shader
+        "precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform float invert;\nuniform sampler2D uSampler;\n\nvoid main(void)\n{\n    gl_FragColor = texture2D(uSampler, vTextureCoord);\n\n    gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);\n}\n",
+        // custom uniforms
+        {
+            invert: { type: '1f', value: 1 }
+        }
+    );
+}
 
-    var bounds = this._bounds;
+InvertFilter.prototype = Object.create(core.AbstractFilter.prototype);
+InvertFilter.prototype.constructor = InvertFilter;
+module.exports = InvertFilter;
 
-    bounds.x = minX;
-    bounds.width = maxX - minX;
+Object.defineProperties(InvertFilter.prototype, {
+    /**
+     * The strength of the invert. `1` will fully invert the colors, and
+     * `0` will make the object its normal color.
+     *
+     * @member {number}
+     * @memberof InvertFilter#
+     */
+    invert: {
+        get: function ()
+        {
+            return this.uniforms.invert.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.invert.value = value;
+        }
+    }
+});
 
-    bounds.y = minY;
-    bounds.height = maxY - minY;
+},{"../../core":29}],102:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
 
-    // store a reference so that if this function gets called again in the render cycle we do not have to recalculate
-    this._currentBounds = bounds;
 
-    return bounds;
-};
+/**
+ * @author Vico @vicocotea
+ * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/adjust/noise.js
+ */
 
 /**
-* 
-* @method generateTilingTexture
-* 
-* @param forcePowerOfTwo {Boolean} Whether we want to force the texture to be a power of two
-*/
-PIXI.TilingSprite.prototype.generateTilingTexture = function(forcePowerOfTwo)
-{
-    var texture = this.texture;
+ * A Noise effect filter.
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function NoiseFilter()
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        null,
+        // fragment shader
+        "precision mediump float;\n\nvarying vec2 vTextureCoord;\nvarying vec4 vColor;\n\nuniform float noise;\nuniform sampler2D uSampler;\n\nfloat rand(vec2 co)\n{\n    return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);\n}\n\nvoid main()\n{\n    vec4 color = texture2D(uSampler, vTextureCoord);\n\n    float diff = (rand(vTextureCoord) - 0.5) * noise;\n\n    color.r += diff;\n    color.g += diff;\n    color.b += diff;\n\n    gl_FragColor = color;\n}\n",
+        // custom uniforms
+        {
+            noise: { type: '1f', value: 0.5 }
+        }
+    );
+}
 
-    if(!texture.baseTexture.hasLoaded)return;
+NoiseFilter.prototype = Object.create(core.AbstractFilter.prototype);
+NoiseFilter.prototype.constructor = NoiseFilter;
+module.exports = NoiseFilter;
 
-    var baseTexture = texture.baseTexture;
-    var frame = texture.frame;
+Object.defineProperties(NoiseFilter.prototype, {
+    /**
+     * The amount of noise to apply.
+     *
+     * @member {number}
+     * @memberof NoiseFilter#
+     * @default 0.5
+     */
+    noise: {
+        get: function ()
+        {
+            return this.uniforms.noise.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.noise.value = value;
+        }
+    }
+});
 
-    var targetWidth, targetHeight;
+},{"../../core":29}],103:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
 
-    // check that the frame is the same size as the base texture.
-    
-    var isFrame = frame.width !== baseTexture.width || frame.height !== baseTexture.height;
 
-    this.tilingTexture = texture;
+/**
+ * The NormalMapFilter class uses the pixel values from the specified texture (called the normal map)
+ * to project lighting onto an object.
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ * @param texture {Texture} The texture used for the normal map, must be power of 2 texture at the moment
+ */
+function NormalMapFilter(texture)
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        null,
+        // fragment shader
+        "precision mediump float;\n\nvarying vec2 vTextureCoord;\nvarying float vColor;\n\nuniform sampler2D displacementMap;\nuniform sampler2D uSampler;\n\nuniform vec4 dimensions;\n\nconst vec2 Resolution = vec2(1.0,1.0);      //resolution of screen\nuniform vec3 LightPos;    //light position, normalized\nconst vec4 LightColor = vec4(1.0, 1.0, 1.0, 1.0);      //light RGBA -- alpha is intensity\nconst vec4 AmbientColor = vec4(1.0, 1.0, 1.0, 0.5);    //ambient RGBA -- alpha is intensity\nconst vec3 Falloff = vec3(0.0, 1.0, 0.2);         //attenuation coefficients\n\nuniform vec3 LightDir; // = vec3(1.0, 0.0, 1.0);\n\nuniform vec2 mapDimensions; // = vec2(256.0, 256.0);\n\n\nvoid main(void)\n{\n    vec2 mapCords = vTextureCoord.xy;\n\n    vec4 color = texture2D(uSampler, vTextureCoord.st);\n    vec3 nColor = texture2D(displacementMap, vTextureCoord.st).rgb;\n\n\n    mapCords *= vec2(dimensions.x/512.0, dimensions.y/512.0);\n\n    mapCords.y *= -1.0;\n    mapCords.y += 1.0;\n\n    // RGBA of our diffuse color\n    vec4 DiffuseColor = texture2D(uSampler, vTextureCoord);\n\n    // RGB of our normal map\n    vec3 NormalMap = texture2D(displacementMap, mapCords).rgb;\n\n    // The delta position of light\n    // vec3 LightDir = vec3(LightPos.xy - (gl_FragCoord.xy / Resolution.xy), LightPos.z);\n    vec3 LightDir = vec3(LightPos.xy - (mapCords.xy), LightPos.z);\n\n    // Correct for aspect ratio\n    // LightDir.x *= Resolution.x / Resolution.y;\n\n    // Determine distance (used for attenuation) BEFORE we normalize our LightDir\n    float D = length(LightDir);\n\n    // normalize our vectors\n    vec3 N = normalize(NormalMap * 2.0 - 1.0);\n    vec3 L = normalize(LightDir);\n\n    // Pre-multiply light color with intensity\n    // Then perform 'N dot L' to determine our diffuse term\n    vec3 Diffuse = (LightColor.rgb * LightColor.a) * max(dot(N, L), 0.0);\n\n    // pre-multiply ambient color with intensity\n    vec3 Ambient = AmbientColor.rgb * AmbientColor.a;\n\n    // calculate attenuation\n    float Attenuation = 1.0 / ( Falloff.x + (Falloff.y*D) + (Falloff.z*D*D) );\n\n    // the calculation which brings it all together\n    vec3 Intensity = Ambient + Diffuse * Attenuation;\n    vec3 FinalColor = DiffuseColor.rgb * Intensity;\n    gl_FragColor = vColor * vec4(FinalColor, DiffuseColor.a);\n\n    // gl_FragColor = vec4(1.0, 0.0, 0.0, Attenuation); // vColor * vec4(FinalColor, DiffuseColor.a);\n\n/*\n    // normalise color\n    vec3 normal = normalize(nColor * 2.0 - 1.0);\n\n    vec3 deltaPos = vec3( (light.xy - gl_FragCoord.xy) / resolution.xy, light.z );\n\n    float lambert = clamp(dot(normal, lightDir), 0.0, 1.0);\n\n    float d = sqrt(dot(deltaPos, deltaPos));\n    float att = 1.0 / ( attenuation.x + (attenuation.y*d) + (attenuation.z*d*d) );\n\n    vec3 result = (ambientColor * ambientIntensity) + (lightColor.rgb * lambert) * att;\n    result *= color.rgb;\n\n    gl_FragColor = vec4(result, 1.0);\n*/\n}\n",
+        // custom uniforms
+        {
+            displacementMap:  { type: 'sampler2D', value: texture },
+            scale:            { type: '2f', value: { x: 15, y: 15 } },
+            offset:           { type: '2f', value: { x: 0,  y: 0 } },
+            mapDimensions:    { type: '2f', value: { x: 1,  y: 1 } },
+            dimensions:       { type: '4f', value: [0, 0, 0, 0] },
+            // LightDir:         { type: 'f3', value: [0, 1, 0] },
+            LightPos:         { type: '3f', value: [0, 1, 0] }
+        }
+    );
 
-    var newTextureRequired = false;
+    texture.baseTexture._powerOf2 = true;
 
-    if(!forcePowerOfTwo)
+    if (texture.baseTexture.hasLoaded)
     {
-        if(isFrame)
-        {
-            targetWidth = frame.width;
-            targetHeight = frame.height;
-            
-            newTextureRequired = true;
-        }
+        this.onTextureLoaded();
     }
     else
     {
-        targetWidth = PIXI.getNextPowerOfTwo(texture.frame.width);
-        targetHeight = PIXI.getNextPowerOfTwo(texture.frame.height);
-
-        if(frame.width !== targetWidth && frame.height !== targetHeight)newTextureRequired = true;
+        texture.baseTexture.once('loaded', this.onTextureLoaded, this);
     }
+}
 
-    if(newTextureRequired)
-    {
-        var canvasBuffer = new PIXI.CanvasBuffer(targetWidth, targetHeight);
-        
-        canvasBuffer.context.drawImage(texture.baseTexture.source,
-                                       frame.x,
-                                       frame.y,
-                                       frame.width,
-                                       frame.height,
-                                       0,
-                                       0,
-                                       targetWidth,
-                                       targetHeight);
-
-        this.tilingTexture = PIXI.Texture.fromCanvas(canvasBuffer.canvas);
-
-        this.tileScaleOffset.x = frame.width / targetWidth;
-        this.tileScaleOffset.y = frame.height / targetHeight;
-    }
+NormalMapFilter.prototype = Object.create(core.AbstractFilter.prototype);
+NormalMapFilter.prototype.constructor = NormalMapFilter;
+module.exports = NormalMapFilter;
 
-   
-    this.tilingTexture.baseTexture._powerOf2 = true;
-};
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi
- *
- * Awesome JS run time provided by EsotericSoftware
- * https://github.com/EsotericSoftware/spine-runtimes
- *
- */
-
-/*
- * Awesome JS run time provided by EsotericSoftware
- *
- * https://github.com/EsotericSoftware/spine-runtimes
+ * Sets the map dimensions uniforms when the texture becomes available.
  *
+ * @private
  */
-
-
-
-var spine = {};
-
-spine.BoneData = function (name, parent) {
-    this.name = name;
-    this.parent = parent;
-};
-spine.BoneData.prototype = {
-    length: 0,
-    x: 0, y: 0,
-    rotation: 0,
-    scaleX: 1, scaleY: 1
+NormalMapFilter.prototype.onTextureLoaded = function ()
+{
+    this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width;
+    this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height;
 };
 
-spine.SlotData = function (name, boneData) {
-    this.name = name;
-    this.boneData = boneData;
-};
-spine.SlotData.prototype = {
-    r: 1, g: 1, b: 1, a: 1,
-    attachmentName: null
-};
-
-spine.Bone = function (boneData, parent) {
-    this.data = boneData;
-    this.parent = parent;
-    this.setToSetupPose();
-};
-spine.Bone.yDown = false;
-spine.Bone.prototype = {
-    x: 0, y: 0,
-    rotation: 0,
-    scaleX: 1, scaleY: 1,
-    m00: 0, m01: 0, worldX: 0, // a b x
-    m10: 0, m11: 0, worldY: 0, // c d y
-    worldRotation: 0,
-    worldScaleX: 1, worldScaleY: 1,
-    updateWorldTransform: function (flipX, flipY) {
-        var parent = this.parent;
-        if (parent != null) {
-            this.worldX = this.x * parent.m00 + this.y * parent.m01 + parent.worldX;
-            this.worldY = this.x * parent.m10 + this.y * parent.m11 + parent.worldY;
-            this.worldScaleX = parent.worldScaleX * this.scaleX;
-            this.worldScaleY = parent.worldScaleY * this.scaleY;
-            this.worldRotation = parent.worldRotation + this.rotation;
-        } else {
-            this.worldX = this.x;
-            this.worldY = this.y;
-            this.worldScaleX = this.scaleX;
-            this.worldScaleY = this.scaleY;
-            this.worldRotation = this.rotation;
-        }
-        var radians = this.worldRotation * Math.PI / 180;
-        var cos = Math.cos(radians);
-        var sin = Math.sin(radians);
-        this.m00 = cos * this.worldScaleX;
-        this.m10 = sin * this.worldScaleX;
-        this.m01 = -sin * this.worldScaleY;
-        this.m11 = cos * this.worldScaleY;
-        if (flipX) {
-            this.m00 = -this.m00;
-            this.m01 = -this.m01;
-        }
-        if (flipY) {
-            this.m10 = -this.m10;
-            this.m11 = -this.m11;
-        }
-        if (spine.Bone.yDown) {
-            this.m10 = -this.m10;
-            this.m11 = -this.m11;
+Object.defineProperties(NormalMapFilter.prototype, {
+    /**
+     * The texture used for the displacement map. Must be power of 2 texture.
+     *
+     * @member {Texture}
+     * @memberof NormalMapFilter#
+     */
+    map: {
+        get: function ()
+        {
+            return this.uniforms.displacementMap.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.displacementMap.value = value;
         }
     },
-    setToSetupPose: function () {
-        var data = this.data;
-        this.x = data.x;
-        this.y = data.y;
-        this.rotation = data.rotation;
-        this.scaleX = data.scaleX;
-        this.scaleY = data.scaleY;
-    }
-};
-
-spine.Slot = function (slotData, skeleton, bone) {
-    this.data = slotData;
-    this.skeleton = skeleton;
-    this.bone = bone;
-    this.setToSetupPose();
-};
-spine.Slot.prototype = {
-    r: 1, g: 1, b: 1, a: 1,
-    _attachmentTime: 0,
-    attachment: null,
-    setAttachment: function (attachment) {
-        this.attachment = attachment;
-        this._attachmentTime = this.skeleton.time;
-    },
-    setAttachmentTime: function (time) {
-        this._attachmentTime = this.skeleton.time - time;
-    },
-    getAttachmentTime: function () {
-        return this.skeleton.time - this._attachmentTime;
+
+    /**
+     * The multiplier used to scale the displacement result from the map calculation.
+     *
+     * @member {Point}
+     * @memberof NormalMapFilter#
+     */
+    scale: {
+        get: function ()
+        {
+            return this.uniforms.scale.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.scale.value = value;
+        }
     },
-    setToSetupPose: function () {
-        var data = this.data;
-        this.r = data.r;
-        this.g = data.g;
-        this.b = data.b;
-        this.a = data.a;
-
-        var slotDatas = this.skeleton.data.slots;
-        for (var i = 0, n = slotDatas.length; i < n; i++) {
-            if (slotDatas[i] == data) {
-                this.setAttachment(!data.attachmentName ? null : this.skeleton.getAttachmentBySlotIndex(i, data.attachmentName));
-                break;
-            }
+
+    /**
+     * The offset used to move the displacement map.
+     *
+     * @member {Point}
+     * @memberof NormalMapFilter#
+     */
+    offset: {
+        get: function ()
+        {
+            return this.uniforms.offset.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.offset.value = value;
         }
     }
-};
+});
 
-spine.Skin = function (name) {
-    this.name = name;
-    this.attachments = {};
-};
-spine.Skin.prototype = {
-    addAttachment: function (slotIndex, name, attachment) {
-        this.attachments[slotIndex + ":" + name] = attachment;
-    },
-    getAttachment: function (slotIndex, name) {
-        return this.attachments[slotIndex + ":" + name];
-    },
-    _attachAll: function (skeleton, oldSkin) {
-        for (var key in oldSkin.attachments) {
-            var colon = key.indexOf(":");
-            var slotIndex = parseInt(key.substring(0, colon), 10);
-            var name = key.substring(colon + 1);
-            var slot = skeleton.slots[slotIndex];
-            if (slot.attachment && slot.attachment.name == name) {
-                var attachment = this.getAttachment(slotIndex, name);
-                if (attachment) slot.setAttachment(attachment);
-            }
+},{"../../core":29}],104:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
+
+
+/**
+ * This filter applies a pixelate effect making display objects appear 'blocky'.
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function PixelateFilter()
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        null,
+        // fragment shader
+        "precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform vec4 dimensions;\nuniform vec2 pixelSize;\nuniform sampler2D uSampler;\n\nvoid main(void)\n{\n    vec2 coord = vTextureCoord;\n\n    vec2 size = dimensions.xy / pixelSize;\n\n    vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;\n\n    gl_FragColor = texture2D(uSampler, color);\n}\n",
+        // custom uniforms
+        {
+            dimensions: { type: '4fv',  value: new Float32Array([0, 0, 0, 0]) },
+            pixelSize:  { type: 'v2',   value: { x: 10, y: 10 } }
         }
-    }
-};
+    );
+}
 
-spine.Animation = function (name, timelines, duration) {
-    this.name = name;
-    this.timelines = timelines;
-    this.duration = duration;
-};
-spine.Animation.prototype = {
-    apply: function (skeleton, time, loop) {
-        if (loop && this.duration) time %= this.duration;
-        var timelines = this.timelines;
-        for (var i = 0, n = timelines.length; i < n; i++)
-            timelines[i].apply(skeleton, time, 1);
-    },
-    mix: function (skeleton, time, loop, alpha) {
-        if (loop && this.duration) time %= this.duration;
-        var timelines = this.timelines;
-        for (var i = 0, n = timelines.length; i < n; i++)
-            timelines[i].apply(skeleton, time, alpha);
-    }
-};
-
-spine.binarySearch = function (values, target, step) {
-    var low = 0;
-    var high = Math.floor(values.length / step) - 2;
-    if (!high) return step;
-    var current = high >>> 1;
-    while (true) {
-        if (values[(current + 1) * step] <= target)
-            low = current + 1;
-        else
-            high = current;
-        if (low == high) return (low + 1) * step;
-        current = (low + high) >>> 1;
+PixelateFilter.prototype = Object.create(core.AbstractFilter.prototype);
+PixelateFilter.prototype.constructor = PixelateFilter;
+module.exports = PixelateFilter;
+
+Object.defineProperties(PixelateFilter.prototype, {
+    /**
+     * This a point that describes the size of the blocks.
+     * x is the width of the block and y is the height.
+     *
+     * @member {Point}
+     * @memberof PixelateFilter#
+     */
+    size: {
+        get: function ()
+        {
+            return this.uniforms.pixelSize.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.pixelSize.value = value;
+        }
     }
-};
-spine.linearSearch = function (values, target, step) {
-    for (var i = 0, last = values.length - step; i <= last; i += step)
-        if (values[i] > target) return i;
-    return -1;
-};
-
-spine.Curves = function (frameCount) {
-    this.curves = []; // dfx, dfy, ddfx, ddfy, dddfx, dddfy, ...
-    this.curves.length = (frameCount - 1) * 6;
-};
-spine.Curves.prototype = {
-    setLinear: function (frameIndex) {
-        this.curves[frameIndex * 6] = 0/*LINEAR*/;
-    },
-    setStepped: function (frameIndex) {
-        this.curves[frameIndex * 6] = -1/*STEPPED*/;
-    },
-    /** Sets the control handle positions for an interpolation bezier curve used to transition from this keyframe to the next.
-     * cx1 and cx2 are from 0 to 1, representing the percent of time between the two keyframes. cy1 and cy2 are the percent of
-     * the difference between the keyframe's values. */
-    setCurve: function (frameIndex, cx1, cy1, cx2, cy2) {
-        var subdiv_step = 1 / 10/*BEZIER_SEGMENTS*/;
-        var subdiv_step2 = subdiv_step * subdiv_step;
-        var subdiv_step3 = subdiv_step2 * subdiv_step;
-        var pre1 = 3 * subdiv_step;
-        var pre2 = 3 * subdiv_step2;
-        var pre4 = 6 * subdiv_step2;
-        var pre5 = 6 * subdiv_step3;
-        var tmp1x = -cx1 * 2 + cx2;
-        var tmp1y = -cy1 * 2 + cy2;
-        var tmp2x = (cx1 - cx2) * 3 + 1;
-        var tmp2y = (cy1 - cy2) * 3 + 1;
-        var i = frameIndex * 6;
-        var curves = this.curves;
-        curves[i] = cx1 * pre1 + tmp1x * pre2 + tmp2x * subdiv_step3;
-        curves[i + 1] = cy1 * pre1 + tmp1y * pre2 + tmp2y * subdiv_step3;
-        curves[i + 2] = tmp1x * pre4 + tmp2x * pre5;
-        curves[i + 3] = tmp1y * pre4 + tmp2y * pre5;
-        curves[i + 4] = tmp2x * pre5;
-        curves[i + 5] = tmp2y * pre5;
-    },
-    getCurvePercent: function (frameIndex, percent) {
-        percent = percent < 0 ? 0 : (percent > 1 ? 1 : percent);
-        var curveIndex = frameIndex * 6;
-        var curves = this.curves;
-        var dfx = curves[curveIndex];
-        if (!dfx/*LINEAR*/) return percent;
-        if (dfx == -1/*STEPPED*/) return 0;
-        var dfy = curves[curveIndex + 1];
-        var ddfx = curves[curveIndex + 2];
-        var ddfy = curves[curveIndex + 3];
-        var dddfx = curves[curveIndex + 4];
-        var dddfy = curves[curveIndex + 5];
-        var x = dfx, y = dfy;
-        var i = 10/*BEZIER_SEGMENTS*/ - 2;
-        while (true) {
-            if (x >= percent) {
-                var lastX = x - dfx;
-                var lastY = y - dfy;
-                return lastY + (y - lastY) * (percent - lastX) / (x - lastX);
-            }
-            if (!i) break;
-            i--;
-            dfx += ddfx;
-            dfy += ddfy;
-            ddfx += dddfx;
-            ddfy += dddfy;
-            x += dfx;
-            y += dfy;
-        }
-        return y + (1 - y) * (percent - x) / (1 - x); // Last point is 1,1.
-    }
-};
-
-spine.RotateTimeline = function (frameCount) {
-    this.curves = new spine.Curves(frameCount);
-    this.frames = []; // time, angle, ...
-    this.frames.length = frameCount * 2;
-};
-spine.RotateTimeline.prototype = {
-    boneIndex: 0,
-    getFrameCount: function () {
-        return this.frames.length / 2;
-    },
-    setFrame: function (frameIndex, time, angle) {
-        frameIndex *= 2;
-        this.frames[frameIndex] = time;
-        this.frames[frameIndex + 1] = angle;
-    },
-    apply: function (skeleton, time, alpha) {
-        var frames = this.frames,
-            amount;
+});
 
-        if (time < frames[0]) return; // Time is before first frame.
+},{"../../core":29}],105:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
 
-        var bone = skeleton.bones[this.boneIndex];
 
-        if (time >= frames[frames.length - 2]) { // Time is after last frame.
-            amount = bone.data.rotation + frames[frames.length - 1] - bone.rotation;
-            while (amount > 180)
-                amount -= 360;
-            while (amount < -180)
-                amount += 360;
-            bone.rotation += amount * alpha;
-            return;
+/**
+ * An RGB Split Filter.
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function RGBSplitFilter()
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        null,
+        // fragment shader
+        "precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform vec4 dimensions;\nuniform vec2 red;\nuniform vec2 green;\nuniform vec2 blue;\n\nvoid main(void)\n{\n   gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;\n   gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;\n   gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;\n   gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;\n}\n",
+        // custom uniforms
+        {
+            red:        { type: 'v2', value: { x: 20, y: 20 } },
+            green:      { type: 'v2', value: { x: -20, y: 20 } },
+            blue:       { type: 'v2', value: { x: 20, y: -20 } },
+            dimensions: { type: '4fv', value: [0, 0, 0, 0] }
         }
+    );
+}
 
-        // Interpolate between the last frame and the current frame.
-        var frameIndex = spine.binarySearch(frames, time, 2);
-        var lastFrameValue = frames[frameIndex - 1];
-        var frameTime = frames[frameIndex];
-        var percent = 1 - (time - frameTime) / (frames[frameIndex - 2/*LAST_FRAME_TIME*/] - frameTime);
-        percent = this.curves.getCurvePercent(frameIndex / 2 - 1, percent);
-
-        amount = frames[frameIndex + 1/*FRAME_VALUE*/] - lastFrameValue;
-        while (amount > 180)
-            amount -= 360;
-        while (amount < -180)
-            amount += 360;
-        amount = bone.data.rotation + (lastFrameValue + amount * percent) - bone.rotation;
-        while (amount > 180)
-            amount -= 360;
-        while (amount < -180)
-            amount += 360;
-        bone.rotation += amount * alpha;
-    }
-};
-
-spine.TranslateTimeline = function (frameCount) {
-    this.curves = new spine.Curves(frameCount);
-    this.frames = []; // time, x, y, ...
-    this.frames.length = frameCount * 3;
-};
-spine.TranslateTimeline.prototype = {
-    boneIndex: 0,
-    getFrameCount: function () {
-        return this.frames.length / 3;
+RGBSplitFilter.prototype = Object.create(core.AbstractFilter.prototype);
+RGBSplitFilter.prototype.constructor = RGBSplitFilter;
+module.exports = RGBSplitFilter;
+
+Object.defineProperties(RGBSplitFilter.prototype, {
+    /**
+     * Red channel offset.
+     *
+     * @member {Point}
+     * @memberof RGBSplitFilter#
+     */
+    red: {
+        get: function ()
+        {
+            return this.uniforms.red.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.red.value = value;
+        }
     },
-    setFrame: function (frameIndex, time, x, y) {
-        frameIndex *= 3;
-        this.frames[frameIndex] = time;
-        this.frames[frameIndex + 1] = x;
-        this.frames[frameIndex + 2] = y;
+
+    /**
+     * Green channel offset.
+     *
+     * @member {Point}
+     * @memberof RGBSplitFilter#
+     */
+    green: {
+        get: function ()
+        {
+            return this.uniforms.green.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.green.value = value;
+        }
     },
-    apply: function (skeleton, time, alpha) {
-        var frames = this.frames;
-        if (time < frames[0]) return; // Time is before first frame.
 
-        var bone = skeleton.bones[this.boneIndex];
+    /**
+     * Blue offset.
+     *
+     * @member {Point}
+     * @memberof RGBSplitFilter#
+     */
+    blue: {
+        get: function ()
+        {
+            return this.uniforms.blue.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.blue.value = value;
+        }
+    }
+});
+
+},{"../../core":29}],106:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
 
-        if (time >= frames[frames.length - 3]) { // Time is after last frame.
-            bone.x += (bone.data.x + frames[frames.length - 2] - bone.x) * alpha;
-            bone.y += (bone.data.y + frames[frames.length - 1] - bone.y) * alpha;
-            return;
+
+/**
+ * This applies a sepia effect to your Display Objects.
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function SepiaFilter()
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        null,
+        // fragment shader
+        "precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform float sepia;\n\nconst mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);\n\nvoid main(void)\n{\n   gl_FragColor = texture2D(uSampler, vTextureCoord);\n   gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);\n}\n",
+        // custom uniforms
+        {
+            sepia: { type: '1f', value: 1 }
         }
+    );
+}
 
-        // Interpolate between the last frame and the current frame.
-        var frameIndex = spine.binarySearch(frames, time, 3);
-        var lastFrameX = frames[frameIndex - 2];
-        var lastFrameY = frames[frameIndex - 1];
-        var frameTime = frames[frameIndex];
-        var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime);
-        percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent);
+SepiaFilter.prototype = Object.create(core.AbstractFilter.prototype);
+SepiaFilter.prototype.constructor = SepiaFilter;
+module.exports = SepiaFilter;
 
-        bone.x += (bone.data.x + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.x) * alpha;
-        bone.y += (bone.data.y + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.y) * alpha;
+Object.defineProperties(SepiaFilter.prototype, {
+    /**
+     * The strength of the sepia. `1` will apply the full sepia effect, and
+     * `0` will make the object its normal color.
+     *
+     * @member {number}
+     * @memberof SepiaFilter#
+     */
+    sepia: {
+        get: function ()
+        {
+            return this.uniforms.sepia.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.sepia.value = value;
+        }
     }
-};
+});
 
-spine.ScaleTimeline = function (frameCount) {
-    this.curves = new spine.Curves(frameCount);
-    this.frames = []; // time, x, y, ...
-    this.frames.length = frameCount * 3;
-};
-spine.ScaleTimeline.prototype = {
-    boneIndex: 0,
-    getFrameCount: function () {
-        return this.frames.length / 3;
-    },
-    setFrame: function (frameIndex, time, x, y) {
-        frameIndex *= 3;
-        this.frames[frameIndex] = time;
-        this.frames[frameIndex + 1] = x;
-        this.frames[frameIndex + 2] = y;
-    },
-    apply: function (skeleton, time, alpha) {
-        var frames = this.frames;
-        if (time < frames[0]) return; // Time is before first frame.
+},{"../../core":29}],107:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
 
-        var bone = skeleton.bones[this.boneIndex];
 
-        if (time >= frames[frames.length - 3]) { // Time is after last frame.
-            bone.scaleX += (bone.data.scaleX - 1 + frames[frames.length - 2] - bone.scaleX) * alpha;
-            bone.scaleY += (bone.data.scaleY - 1 + frames[frames.length - 1] - bone.scaleY) * alpha;
-            return;
+/**
+ * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA
+ * color and alpha values of every pixel on your displayObject to produce a result
+ * with a new set of RGBA color and alpha values. It's pretty powerful!
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function ShockwaveFilter()
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        null,
+        // fragment shader
+        "precision lowp float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\n\nuniform vec2 center;\nuniform vec3 params; // 10.0, 0.8, 0.1\nuniform float time;\n\nvoid main()\n{\n    vec2 uv = vTextureCoord;\n    vec2 texCoord = uv;\n\n    float dist = distance(uv, center);\n\n    if ( (dist <= (time + params.z)) && (dist >= (time - params.z)) )\n    {\n        float diff = (dist - time);\n        float powDiff = 1.0 - pow(abs(diff*params.x), params.y);\n\n        float diffTime = diff  * powDiff;\n        vec2 diffUV = normalize(uv - center);\n        texCoord = uv + (diffUV * diffTime);\n    }\n\n    gl_FragColor = texture2D(uSampler, texCoord);\n}\n",
+        // custom uniforms
+        {
+            center: { type: 'v2', value: { x: 0.5, y: 0.5 } },
+            params: { type: 'v3', value: { x: 10, y: 0.8, z: 0.1 } },
+            time: { type: '1f', value: 0 }
         }
+    );
+}
 
-        // Interpolate between the last frame and the current frame.
-        var frameIndex = spine.binarySearch(frames, time, 3);
-        var lastFrameX = frames[frameIndex - 2];
-        var lastFrameY = frames[frameIndex - 1];
-        var frameTime = frames[frameIndex];
-        var percent = 1 - (time - frameTime) / (frames[frameIndex + -3/*LAST_FRAME_TIME*/] - frameTime);
-        percent = this.curves.getCurvePercent(frameIndex / 3 - 1, percent);
-
-        bone.scaleX += (bone.data.scaleX - 1 + lastFrameX + (frames[frameIndex + 1/*FRAME_X*/] - lastFrameX) * percent - bone.scaleX) * alpha;
-        bone.scaleY += (bone.data.scaleY - 1 + lastFrameY + (frames[frameIndex + 2/*FRAME_Y*/] - lastFrameY) * percent - bone.scaleY) * alpha;
-    }
-};
+ShockwaveFilter.prototype = Object.create(core.AbstractFilter.prototype);
+ShockwaveFilter.prototype.constructor = ShockwaveFilter;
+module.exports = ShockwaveFilter;
 
-spine.ColorTimeline = function (frameCount) {
-    this.curves = new spine.Curves(frameCount);
-    this.frames = []; // time, r, g, b, a, ...
-    this.frames.length = frameCount * 5;
-};
-spine.ColorTimeline.prototype = {
-    slotIndex: 0,
-    getFrameCount: function () {
-        return this.frames.length / 2;
+Object.defineProperties(ShockwaveFilter.prototype, {
+    /**
+     * Sets the center of the shockwave in normalized screen coords. That is
+     * (0,0) is the top-left and (1,1) is the bottom right.
+     *
+     * @member {object<string, number>}
+     * @memberof ShockwaveFilter#
+     */
+    center: {
+        get: function ()
+        {
+            return this.uniforms.center.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.center.value = value;
+        }
     },
-    setFrame: function (frameIndex, time, x, y) {
-        frameIndex *= 5;
-        this.frames[frameIndex] = time;
-        this.frames[frameIndex + 1] = r;
-        this.frames[frameIndex + 2] = g;
-        this.frames[frameIndex + 3] = b;
-        this.frames[frameIndex + 4] = a;
+    /**
+     * Sets the params of the shockwave. These modify the look and behavior of
+     * the shockwave as it ripples out.
+     *
+     * @member {object<string, number>}
+     * @memberof ShockwaveFilter#
+     */
+    params: {
+        get: function ()
+        {
+            return this.uniforms.params.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.params.value = value;
+        }
     },
-    apply: function (skeleton, time, alpha) {
-        var frames = this.frames;
-        if (time < frames[0]) return; // Time is before first frame.
-
-        var slot = skeleton.slots[this.slotIndex];
-
-        if (time >= frames[frames.length - 5]) { // Time is after last frame.
-            var i = frames.length - 1;
-            slot.r = frames[i - 3];
-            slot.g = frames[i - 2];
-            slot.b = frames[i - 1];
-            slot.a = frames[i];
-            return;
+    /**
+     * Sets the elapsed time of the shockwave. This controls the speed at which
+     * the shockwave ripples out.
+     *
+     * @member {number}
+     * @memberof ShockwaveFilter#
+     */
+    time: {
+        get: function ()
+        {
+            return this.uniforms.time.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.time.value = value;
         }
+    }
+});
 
-        // Interpolate between the last frame and the current frame.
-        var frameIndex = spine.binarySearch(frames, time, 5);
-        var lastFrameR = frames[frameIndex - 4];
-        var lastFrameG = frames[frameIndex - 3];
-        var lastFrameB = frames[frameIndex - 2];
-        var lastFrameA = frames[frameIndex - 1];
-        var frameTime = frames[frameIndex];
-        var percent = 1 - (time - frameTime) / (frames[frameIndex - 5/*LAST_FRAME_TIME*/] - frameTime);
-        percent = this.curves.getCurvePercent(frameIndex / 5 - 1, percent);
-
-        var r = lastFrameR + (frames[frameIndex + 1/*FRAME_R*/] - lastFrameR) * percent;
-        var g = lastFrameG + (frames[frameIndex + 2/*FRAME_G*/] - lastFrameG) * percent;
-        var b = lastFrameB + (frames[frameIndex + 3/*FRAME_B*/] - lastFrameB) * percent;
-        var a = lastFrameA + (frames[frameIndex + 4/*FRAME_A*/] - lastFrameA) * percent;
-        if (alpha < 1) {
-            slot.r += (r - slot.r) * alpha;
-            slot.g += (g - slot.g) * alpha;
-            slot.b += (b - slot.b) * alpha;
-            slot.a += (a - slot.a) * alpha;
-        } else {
-            slot.r = r;
-            slot.g = g;
-            slot.b = b;
-            slot.a = a;
+},{"../../core":29}],108:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
+
+
+/**
+ * @author Vico @vicocotea
+ * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/
+ */
+
+/**
+ * A TiltShiftAxisFilter.
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function TiltShiftAxisFilter()
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        null,
+        // fragment shader
+        "precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform float blur;\nuniform float gradientBlur;\nuniform vec2 start;\nuniform vec2 end;\nuniform vec2 delta;\nuniform vec2 texSize;\n\nfloat random(vec3 scale, float seed)\n{\n    return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);\n}\n\nvoid main(void)\n{\n    vec4 color = vec4(0.0);\n    float total = 0.0;\n\n    float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);\n    vec2 normal = normalize(vec2(start.y - end.y, end.x - start.x));\n    float radius = smoothstep(0.0, 1.0, abs(dot(vTextureCoord * texSize - start, normal)) / gradientBlur) * blur;\n\n    for (float t = -30.0; t <= 30.0; t++)\n    {\n        float percent = (t + offset - 0.5) / 30.0;\n        float weight = 1.0 - abs(percent);\n        vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * radius);\n        sample.rgb *= sample.a;\n        color += sample * weight;\n        total += weight;\n    }\n\n    gl_FragColor = color / total;\n    gl_FragColor.rgb /= gl_FragColor.a + 0.00001;\n}\n",
+        // custom uniforms
+        {
+            blur:           { type: '1f', value: 100 },
+            gradientBlur:   { type: '1f', value: 600 },
+            start:          { type: 'v2', value: { x: 0,    y: window.innerHeight / 2 } },
+            end:            { type: 'v2', value: { x: 600,  y: window.innerHeight / 2 } },
+            delta:          { type: 'v2', value: { x: 30,   y: 30 } },
+            texSize:        { type: 'v2', value: { x: window.innerWidth, y: window.innerHeight } }
         }
-    }
-};
+    );
 
-spine.AttachmentTimeline = function (frameCount) {
-    this.curves = new spine.Curves(frameCount);
-    this.frames = []; // time, ...
-    this.frames.length = frameCount;
-    this.attachmentNames = []; // time, ...
-    this.attachmentNames.length = frameCount;
-};
-spine.AttachmentTimeline.prototype = {
-    slotIndex: 0,
-    getFrameCount: function () {
-            return this.frames.length;
-    },
-    setFrame: function (frameIndex, time, attachmentName) {
-        this.frames[frameIndex] = time;
-        this.attachmentNames[frameIndex] = attachmentName;
-    },
-    apply: function (skeleton, time, alpha) {
-        var frames = this.frames;
-        if (time < frames[0]) return; // Time is before first frame.
+    this.updateDelta();
+}
 
-        var frameIndex;
-        if (time >= frames[frames.length - 1]) // Time is after last frame.
-            frameIndex = frames.length - 1;
-        else
-            frameIndex = spine.binarySearch(frames, time, 1) - 1;
+TiltShiftAxisFilter.prototype = Object.create(core.AbstractFilter.prototype);
+TiltShiftAxisFilter.prototype.constructor = TiltShiftAxisFilter;
+module.exports = TiltShiftAxisFilter;
 
-        var attachmentName = this.attachmentNames[frameIndex];
-        skeleton.slots[this.slotIndex].setAttachment(!attachmentName ? null : skeleton.getAttachmentBySlotIndex(this.slotIndex, attachmentName));
-    }
+/**
+ * Updates the filter delta values.
+ * This is overridden in the X and Y filters, does nothing for this class.
+ *
+ */
+TiltShiftAxisFilter.prototype.updateDelta = function ()
+{
+    this.uniforms.delta.value.x = 0;
+    this.uniforms.delta.value.y = 0;
 };
 
-spine.SkeletonData = function () {
-    this.bones = [];
-    this.slots = [];
-    this.skins = [];
-    this.animations = [];
-};
-spine.SkeletonData.prototype = {
-    defaultSkin: null,
-    /** @return May be null. */
-    findBone: function (boneName) {
-        var bones = this.bones;
-        for (var i = 0, n = bones.length; i < n; i++)
-            if (bones[i].name == boneName) return bones[i];
-        return null;
-    },
-    /** @return -1 if the bone was not found. */
-    findBoneIndex: function (boneName) {
-        var bones = this.bones;
-        for (var i = 0, n = bones.length; i < n; i++)
-            if (bones[i].name == boneName) return i;
-        return -1;
-    },
-    /** @return May be null. */
-    findSlot: function (slotName) {
-        var slots = this.slots;
-        for (var i = 0, n = slots.length; i < n; i++) {
-            if (slots[i].name == slotName) return slot[i];
+Object.defineProperties(TiltShiftAxisFilter.prototype, {
+    /**
+     * The strength of the blur.
+     *
+     * @member {number}
+     * @memberof TiltShiftAxisFilter#
+     */
+    blur: {
+        get: function ()
+        {
+            return this.uniforms.blur.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.blur.value = value;
         }
-        return null;
-    },
-    /** @return -1 if the bone was not found. */
-    findSlotIndex: function (slotName) {
-        var slots = this.slots;
-        for (var i = 0, n = slots.length; i < n; i++)
-            if (slots[i].name == slotName) return i;
-        return -1;
-    },
-    /** @return May be null. */
-    findSkin: function (skinName) {
-        var skins = this.skins;
-        for (var i = 0, n = skins.length; i < n; i++)
-            if (skins[i].name == skinName) return skins[i];
-        return null;
     },
-    /** @return May be null. */
-    findAnimation: function (animationName) {
-        var animations = this.animations;
-        for (var i = 0, n = animations.length; i < n; i++)
-            if (animations[i].name == animationName) return animations[i];
-        return null;
-    }
-};
 
-spine.Skeleton = function (skeletonData) {
-    this.data = skeletonData;
-
-    this.bones = [];
-    for (var i = 0, n = skeletonData.bones.length; i < n; i++) {
-        var boneData = skeletonData.bones[i];
-        var parent = !boneData.parent ? null : this.bones[skeletonData.bones.indexOf(boneData.parent)];
-        this.bones.push(new spine.Bone(boneData, parent));
-    }
-
-    this.slots = [];
-    this.drawOrder = [];
-    for (i = 0, n = skeletonData.slots.length; i < n; i++) {
-        var slotData = skeletonData.slots[i];
-        var bone = this.bones[skeletonData.bones.indexOf(slotData.boneData)];
-        var slot = new spine.Slot(slotData, this, bone);
-        this.slots.push(slot);
-        this.drawOrder.push(slot);
-    }
-};
-spine.Skeleton.prototype = {
-    x: 0, y: 0,
-    skin: null,
-    r: 1, g: 1, b: 1, a: 1,
-    time: 0,
-    flipX: false, flipY: false,
-    /** Updates the world transform for each bone. */
-    updateWorldTransform: function () {
-        var flipX = this.flipX;
-        var flipY = this.flipY;
-        var bones = this.bones;
-        for (var i = 0, n = bones.length; i < n; i++)
-            bones[i].updateWorldTransform(flipX, flipY);
-    },
-    /** Sets the bones and slots to their setup pose values. */
-    setToSetupPose: function () {
-        this.setBonesToSetupPose();
-        this.setSlotsToSetupPose();
-    },
-    setBonesToSetupPose: function () {
-        var bones = this.bones;
-        for (var i = 0, n = bones.length; i < n; i++)
-            bones[i].setToSetupPose();
-    },
-    setSlotsToSetupPose: function () {
-        var slots = this.slots;
-        for (var i = 0, n = slots.length; i < n; i++)
-            slots[i].setToSetupPose(i);
-    },
-    /** @return May return null. */
-    getRootBone: function () {
-        return this.bones.length ? this.bones[0] : null;
-    },
-    /** @return May be null. */
-    findBone: function (boneName) {
-        var bones = this.bones;
-        for (var i = 0, n = bones.length; i < n; i++)
-            if (bones[i].data.name == boneName) return bones[i];
-        return null;
-    },
-    /** @return -1 if the bone was not found. */
-    findBoneIndex: function (boneName) {
-        var bones = this.bones;
-        for (var i = 0, n = bones.length; i < n; i++)
-            if (bones[i].data.name == boneName) return i;
-        return -1;
-    },
-    /** @return May be null. */
-    findSlot: function (slotName) {
-        var slots = this.slots;
-        for (var i = 0, n = slots.length; i < n; i++)
-            if (slots[i].data.name == slotName) return slots[i];
-        return null;
-    },
-    /** @return -1 if the bone was not found. */
-    findSlotIndex: function (slotName) {
-        var slots = this.slots;
-        for (var i = 0, n = slots.length; i < n; i++)
-            if (slots[i].data.name == slotName) return i;
-        return -1;
-    },
-    setSkinByName: function (skinName) {
-        var skin = this.data.findSkin(skinName);
-        if (!skin) throw "Skin not found: " + skinName;
-        this.setSkin(skin);
-    },
-    /** Sets the skin used to look up attachments not found in the {@link SkeletonData#getDefaultSkin() default skin}. Attachments
-     * from the new skin are attached if the corresponding attachment from the old skin was attached.
-     * @param newSkin May be null. */
-    setSkin: function (newSkin) {
-        if (this.skin && newSkin) newSkin._attachAll(this, this.skin);
-        this.skin = newSkin;
-    },
-    /** @return May be null. */
-    getAttachmentBySlotName: function (slotName, attachmentName) {
-        return this.getAttachmentBySlotIndex(this.data.findSlotIndex(slotName), attachmentName);
-    },
-    /** @return May be null. */
-    getAttachmentBySlotIndex: function (slotIndex, attachmentName) {
-        if (this.skin) {
-            var attachment = this.skin.getAttachment(slotIndex, attachmentName);
-            if (attachment) return attachment;
+    /**
+     * The strength of the gradient blur.
+     *
+     * @member {number}
+     * @memberof TiltShiftAxisFilter#
+     */
+    gradientBlur: {
+        get: function ()
+        {
+            return this.uniforms.gradientBlur.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.gradientBlur.value = value;
         }
-        if (this.data.defaultSkin) return this.data.defaultSkin.getAttachment(slotIndex, attachmentName);
-        return null;
     },
-    /** @param attachmentName May be null. */
-    setAttachment: function (slotName, attachmentName) {
-        var slots = this.slots;
-        for (var i = 0, n = slots.size; i < n; i++) {
-            var slot = slots[i];
-            if (slot.data.name == slotName) {
-                var attachment = null;
-                if (attachmentName) {
-                    attachment = this.getAttachment(i, attachmentName);
-                    if (attachment == null) throw "Attachment not found: " + attachmentName + ", for slot: " + slotName;
-                }
-                slot.setAttachment(attachment);
-                return;
-            }
+
+    /**
+     * The X value to start the effect at.
+     *
+     * @member {Point}
+     * @memberof TiltShiftAxisFilter#
+     */
+    start: {
+        get: function ()
+        {
+            return this.uniforms.start.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.start.value = value;
+            this.updateDelta();
         }
-        throw "Slot not found: " + slotName;
     },
-    update: function (delta) {
-        time += delta;
-    }
-};
-
-spine.AttachmentType = {
-    region: 0
-};
-
-spine.RegionAttachment = function () {
-    this.offset = [];
-    this.offset.length = 8;
-    this.uvs = [];
-    this.uvs.length = 8;
-};
-spine.RegionAttachment.prototype = {
-    x: 0, y: 0,
-    rotation: 0,
-    scaleX: 1, scaleY: 1,
-    width: 0, height: 0,
-    rendererObject: null,
-    regionOffsetX: 0, regionOffsetY: 0,
-    regionWidth: 0, regionHeight: 0,
-    regionOriginalWidth: 0, regionOriginalHeight: 0,
-    setUVs: function (u, v, u2, v2, rotate) {
-        var uvs = this.uvs;
-        if (rotate) {
-            uvs[2/*X2*/] = u;
-            uvs[3/*Y2*/] = v2;
-            uvs[4/*X3*/] = u;
-            uvs[5/*Y3*/] = v;
-            uvs[6/*X4*/] = u2;
-            uvs[7/*Y4*/] = v;
-            uvs[0/*X1*/] = u2;
-            uvs[1/*Y1*/] = v2;
-        } else {
-            uvs[0/*X1*/] = u;
-            uvs[1/*Y1*/] = v2;
-            uvs[2/*X2*/] = u;
-            uvs[3/*Y2*/] = v;
-            uvs[4/*X3*/] = u2;
-            uvs[5/*Y3*/] = v;
-            uvs[6/*X4*/] = u2;
-            uvs[7/*Y4*/] = v2;
+
+    /**
+     * The X value to end the effect at.
+     *
+     * @member {Point}
+     * @memberof TiltShiftAxisFilter#
+     */
+    end: {
+        get: function ()
+        {
+            return this.uniforms.end.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.end.value = value;
+            this.updateDelta();
         }
-    },
-    updateOffset: function () {
-        var regionScaleX = this.width / this.regionOriginalWidth * this.scaleX;
-        var regionScaleY = this.height / this.regionOriginalHeight * this.scaleY;
-        var localX = -this.width / 2 * this.scaleX + this.regionOffsetX * regionScaleX;
-        var localY = -this.height / 2 * this.scaleY + this.regionOffsetY * regionScaleY;
-        var localX2 = localX + this.regionWidth * regionScaleX;
-        var localY2 = localY + this.regionHeight * regionScaleY;
-        var radians = this.rotation * Math.PI / 180;
-        var cos = Math.cos(radians);
-        var sin = Math.sin(radians);
-        var localXCos = localX * cos + this.x;
-        var localXSin = localX * sin;
-        var localYCos = localY * cos + this.y;
-        var localYSin = localY * sin;
-        var localX2Cos = localX2 * cos + this.x;
-        var localX2Sin = localX2 * sin;
-        var localY2Cos = localY2 * cos + this.y;
-        var localY2Sin = localY2 * sin;
-        var offset = this.offset;
-        offset[0/*X1*/] = localXCos - localYSin;
-        offset[1/*Y1*/] = localYCos + localXSin;
-        offset[2/*X2*/] = localXCos - localY2Sin;
-        offset[3/*Y2*/] = localY2Cos + localXSin;
-        offset[4/*X3*/] = localX2Cos - localY2Sin;
-        offset[5/*Y3*/] = localY2Cos + localX2Sin;
-        offset[6/*X4*/] = localX2Cos - localYSin;
-        offset[7/*Y4*/] = localYCos + localX2Sin;
-    },
-    computeVertices: function (x, y, bone, vertices) {
-        x += bone.worldX;
-        y += bone.worldY;
-        var m00 = bone.m00;
-        var m01 = bone.m01;
-        var m10 = bone.m10;
-        var m11 = bone.m11;
-        var offset = this.offset;
-        vertices[0/*X1*/] = offset[0/*X1*/] * m00 + offset[1/*Y1*/] * m01 + x;
-        vertices[1/*Y1*/] = offset[0/*X1*/] * m10 + offset[1/*Y1*/] * m11 + y;
-        vertices[2/*X2*/] = offset[2/*X2*/] * m00 + offset[3/*Y2*/] * m01 + x;
-        vertices[3/*Y2*/] = offset[2/*X2*/] * m10 + offset[3/*Y2*/] * m11 + y;
-        vertices[4/*X3*/] = offset[4/*X3*/] * m00 + offset[5/*X3*/] * m01 + x;
-        vertices[5/*X3*/] = offset[4/*X3*/] * m10 + offset[5/*X3*/] * m11 + y;
-        vertices[6/*X4*/] = offset[6/*X4*/] * m00 + offset[7/*Y4*/] * m01 + x;
-        vertices[7/*Y4*/] = offset[6/*X4*/] * m10 + offset[7/*Y4*/] * m11 + y;
-    }
-}
-
-spine.AnimationStateData = function (skeletonData) {
-    this.skeletonData = skeletonData;
-    this.animationToMixTime = {};
-};
-spine.AnimationStateData.prototype = {
-        defaultMix: 0,
-    setMixByName: function (fromName, toName, duration) {
-        var from = this.skeletonData.findAnimation(fromName);
-        if (!from) throw "Animation not found: " + fromName;
-        var to = this.skeletonData.findAnimation(toName);
-        if (!to) throw "Animation not found: " + toName;
-        this.setMix(from, to, duration);
-    },
-    setMix: function (from, to, duration) {
-        this.animationToMixTime[from.name + ":" + to.name] = duration;
-    },
-    getMix: function (from, to) {
-        var time = this.animationToMixTime[from.name + ":" + to.name];
-            return time ? time : this.defaultMix;
     }
-};
+});
 
-spine.AnimationState = function (stateData) {
-    this.data = stateData;
-    this.queue = [];
-};
-spine.AnimationState.prototype = {
-    current: null,
-    previous: null,
-    currentTime: 0,
-    previousTime: 0,
-    currentLoop: false,
-    previousLoop: false,
-    mixTime: 0,
-    mixDuration: 0,
-    update: function (delta) {
-        this.currentTime += delta;
-        this.previousTime += delta;
-        this.mixTime += delta;
+},{"../../core":29}],109:[function(require,module,exports){
+var core = require('../../core'),
+    TiltShiftXFilter = require('./TiltShiftXFilter'),
+    TiltShiftYFilter = require('./TiltShiftYFilter');
 
-        if (this.queue.length > 0) {
-            var entry = this.queue[0];
-            if (this.currentTime >= entry.delay) {
-                this._setAnimation(entry.animation, entry.loop);
-                this.queue.shift();
-            }
-        }
-    },
-    apply: function (skeleton) {
-        if (!this.current) return;
-        if (this.previous) {
-            this.previous.apply(skeleton, this.previousTime, this.previousLoop);
-            var alpha = this.mixTime / this.mixDuration;
-            if (alpha >= 1) {
-                alpha = 1;
-                this.previous = null;
-            }
-            this.current.mix(skeleton, this.currentTime, this.currentLoop, alpha);
-        } else
-            this.current.apply(skeleton, this.currentTime, this.currentLoop);
-    },
-    clearAnimation: function () {
-        this.previous = null;
-        this.current = null;
-        this.queue.length = 0;
-    },
-    _setAnimation: function (animation, loop) {
-        this.previous = null;
-        if (animation && this.current) {
-            this.mixDuration = this.data.getMix(this.current, animation);
-            if (this.mixDuration > 0) {
-                this.mixTime = 0;
-                this.previous = this.current;
-                this.previousTime = this.currentTime;
-                this.previousLoop = this.currentLoop;
-            }
-        }
-        this.current = animation;
-        this.currentLoop = loop;
-        this.currentTime = 0;
-    },
-    /** @see #setAnimation(Animation, Boolean) */
-    setAnimationByName: function (animationName, loop) {
-        var animation = this.data.skeletonData.findAnimation(animationName);
-        if (!animation) throw "Animation not found: " + animationName;
-        this.setAnimation(animation, loop);
-    },
-    /** Set the current animation. Any queued animations are cleared and the current animation time is set to 0.
-     * @param animation May be null. */
-    setAnimation: function (animation, loop) {
-        this.queue.length = 0;
-        this._setAnimation(animation, loop);
-    },
-    /** @see #addAnimation(Animation, Boolean, Number) */
-    addAnimationByName: function (animationName, loop, delay) {
-        var animation = this.data.skeletonData.findAnimation(animationName);
-        if (!animation) throw "Animation not found: " + animationName;
-        this.addAnimation(animation, loop, delay);
-    },
-    /** Adds an animation to be played delay seconds after the current or last queued animation.
-     * @param delay May be <= 0 to use duration of previous animation minus any mix duration plus the negative delay. */
-    addAnimation: function (animation, loop, delay) {
-        var entry = {};
-        entry.animation = animation;
-        entry.loop = loop;
-
-        if (!delay || delay <= 0) {
-            var previousAnimation = this.queue.length ? this.queue[this.queue.length - 1].animation : this.current;
-            if (previousAnimation != null)
-                delay = previousAnimation.duration - this.data.getMix(previousAnimation, animation) + (delay || 0);
-            else
-                delay = 0;
-        }
-        entry.delay = delay;
+/**
+ * @author Vico @vicocotea
+ * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/
+ */
 
-        this.queue.push(entry);
-    },
-    /** Returns true if no animation is set or if the current time is greater than the animation duration, regardless of looping. */
-    isComplete: function () {
-        return !this.current || this.currentTime >= this.current.duration;
-    }
-};
-
-spine.SkeletonJson = function (attachmentLoader) {
-    this.attachmentLoader = attachmentLoader;
-};
-spine.SkeletonJson.prototype = {
-    scale: 1,
-    readSkeletonData: function (root) {
-        /*jshint -W069*/
-        var skeletonData = new spine.SkeletonData(),
-            boneData;
-
-        // Bones.
-        var bones = root["bones"];
-        for (var i = 0, n = bones.length; i < n; i++) {
-            var boneMap = bones[i];
-            var parent = null;
-            if (boneMap["parent"]) {
-                parent = skeletonData.findBone(boneMap["parent"]);
-                if (!parent) throw "Parent bone not found: " + boneMap["parent"];
-            }
-            boneData = new spine.BoneData(boneMap["name"], parent);
-            boneData.length = (boneMap["length"] || 0) * this.scale;
-            boneData.x = (boneMap["x"] || 0) * this.scale;
-            boneData.y = (boneMap["y"] || 0) * this.scale;
-            boneData.rotation = (boneMap["rotation"] || 0);
-            boneData.scaleX = boneMap["scaleX"] || 1;
-            boneData.scaleY = boneMap["scaleY"] || 1;
-            skeletonData.bones.push(boneData);
-        }
-
-        // Slots.
-        var slots = root["slots"];
-        for (i = 0, n = slots.length; i < n; i++) {
-            var slotMap = slots[i];
-            boneData = skeletonData.findBone(slotMap["bone"]);
-            if (!boneData) throw "Slot bone not found: " + slotMap["bone"];
-            var slotData = new spine.SlotData(slotMap["name"], boneData);
-
-            var color = slotMap["color"];
-            if (color) {
-                slotData.r = spine.SkeletonJson.toColor(color, 0);
-                slotData.g = spine.SkeletonJson.toColor(color, 1);
-                slotData.b = spine.SkeletonJson.toColor(color, 2);
-                slotData.a = spine.SkeletonJson.toColor(color, 3);
-            }
-
-            slotData.attachmentName = slotMap["attachment"];
-
-            skeletonData.slots.push(slotData);
-        }
-
-        // Skins.
-        var skins = root["skins"];
-        for (var skinName in skins) {
-            if (!skins.hasOwnProperty(skinName)) continue;
-            var skinMap = skins[skinName];
-            var skin = new spine.Skin(skinName);
-            for (var slotName in skinMap) {
-                if (!skinMap.hasOwnProperty(slotName)) continue;
-                var slotIndex = skeletonData.findSlotIndex(slotName);
-                var slotEntry = skinMap[slotName];
-                for (var attachmentName in slotEntry) {
-                    if (!slotEntry.hasOwnProperty(attachmentName)) continue;
-                    var attachment = this.readAttachment(skin, attachmentName, slotEntry[attachmentName]);
-                    if (attachment != null) skin.addAttachment(slotIndex, attachmentName, attachment);
-                }
-            }
-            skeletonData.skins.push(skin);
-            if (skin.name == "default") skeletonData.defaultSkin = skin;
-        }
+/**
+ * A TiltShift Filter. Manages the pass of both a TiltShiftXFilter and TiltShiftYFilter.
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function TiltShiftFilter()
+{
+    core.AbstractFilter.call(this);
 
-        // Animations.
-        var animations = root["animations"];
-        for (var animationName in animations) {
-            if (!animations.hasOwnProperty(animationName)) continue;
-            this.readAnimation(animationName, animations[animationName], skeletonData);
-        }
+    this.tiltShiftXFilter = new TiltShiftXFilter();
+    this.tiltShiftYFilter = new TiltShiftYFilter();
+}
 
-        return skeletonData;
-    },
-    readAttachment: function (skin, name, map) {
-        /*jshint -W069*/
-        name = map["name"] || name;
-
-        var type = spine.AttachmentType[map["type"] || "region"];
-
-        if (type == spine.AttachmentType.region) {
-            var attachment = new spine.RegionAttachment();
-            attachment.x = (map["x"] || 0) * this.scale;
-            attachment.y = (map["y"] || 0) * this.scale;
-            attachment.scaleX = map["scaleX"] || 1;
-            attachment.scaleY = map["scaleY"] || 1;
-            attachment.rotation = map["rotation"] || 0;
-            attachment.width = (map["width"] || 32) * this.scale;
-            attachment.height = (map["height"] || 32) * this.scale;
-            attachment.updateOffset();
-
-            attachment.rendererObject = {};
-            attachment.rendererObject.name = name;
-            attachment.rendererObject.scale = {};
-            attachment.rendererObject.scale.x = attachment.scaleX;
-            attachment.rendererObject.scale.y = attachment.scaleY;
-            attachment.rendererObject.rotation = -attachment.rotation * Math.PI / 180;
-            return attachment;
-        }
-
-            throw "Unknown attachment type: " + type;
-    },
+TiltShiftFilter.prototype = Object.create(core.AbstractFilter.prototype);
+TiltShiftFilter.prototype.constructor = TiltShiftFilter;
+module.exports = TiltShiftFilter;
 
-    readAnimation: function (name, map, skeletonData) {
-        /*jshint -W069*/
-        var timelines = [];
-        var duration = 0;
-        var frameIndex, timeline, timelineName, valueMap, values,
-            i, n;
-
-        var bones = map["bones"];
-        for (var boneName in bones) {
-            if (!bones.hasOwnProperty(boneName)) continue;
-            var boneIndex = skeletonData.findBoneIndex(boneName);
-            if (boneIndex == -1) throw "Bone not found: " + boneName;
-            var boneMap = bones[boneName];
-
-            for (timelineName in boneMap) {
-                if (!boneMap.hasOwnProperty(timelineName)) continue;
-                values = boneMap[timelineName];
-                if (timelineName == "rotate") {
-                    timeline = new spine.RotateTimeline(values.length);
-                    timeline.boneIndex = boneIndex;
-
-                    frameIndex = 0;
-                    for (i = 0, n = values.length; i < n; i++) {
-                        valueMap = values[i];
-                        timeline.setFrame(frameIndex, valueMap["time"], valueMap["angle"]);
-                        spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap);
-                        frameIndex++;
-                    }
-                    timelines.push(timeline);
-                    duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 2 - 2]);
+TiltShiftFilter.prototype.applyFilter = function (renderer, input, output)
+{
+    var renderTarget = renderer.filterManager.getRenderTarget(true);
 
-                } else if (timelineName == "translate" || timelineName == "scale") {
-                    var timelineScale = 1;
-                    if (timelineName == "scale")
-                        timeline = new spine.ScaleTimeline(values.length);
-                    else {
-                        timeline = new spine.TranslateTimeline(values.length);
-                        timelineScale = this.scale;
-                    }
-                    timeline.boneIndex = boneIndex;
-
-                    frameIndex = 0;
-                    for (i = 0, n = values.length; i < n; i++) {
-                        valueMap = values[i];
-                        var x = (valueMap["x"] || 0) * timelineScale;
-                        var y = (valueMap["y"] || 0) * timelineScale;
-                        timeline.setFrame(frameIndex, valueMap["time"], x, y);
-                        spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap);
-                        frameIndex++;
-                    }
-                    timelines.push(timeline);
-                    duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 3 - 3]);
-
-                } else
-                    throw "Invalid timeline type for a bone: " + timelineName + " (" + boneName + ")";
-            }
-        }
-        var slots = map["slots"];
-        for (var slotName in slots) {
-            if (!slots.hasOwnProperty(slotName)) continue;
-            var slotMap = slots[slotName];
-            var slotIndex = skeletonData.findSlotIndex(slotName);
-
-            for (timelineName in slotMap) {
-                if (!slotMap.hasOwnProperty(timelineName)) continue;
-                values = slotMap[timelineName];
-                if (timelineName == "color") {
-                    timeline = new spine.ColorTimeline(values.length);
-                    timeline.slotIndex = slotIndex;
-
-                    frameIndex = 0;
-                    for (i = 0, n = values.length; i < n; i++) {
-                        valueMap = values[i];
-                        var color = valueMap["color"];
-                        var r = spine.SkeletonJson.toColor(color, 0);
-                        var g = spine.SkeletonJson.toColor(color, 1);
-                        var b = spine.SkeletonJson.toColor(color, 2);
-                        var a = spine.SkeletonJson.toColor(color, 3);
-                        timeline.setFrame(frameIndex, valueMap["time"], r, g, b, a);
-                        spine.SkeletonJson.readCurve(timeline, frameIndex, valueMap);
-                        frameIndex++;
-                    }
-                    timelines.push(timeline);
-                    duration = Math.max(duration, timeline.frames[timeline.getFrameCount() * 5 - 5]);
+    this.tiltShiftXFilter.applyFilter(renderer, input, renderTarget);
 
-                } else if (timelineName == "attachment") {
-                    timeline = new spine.AttachmentTimeline(values.length);
-                    timeline.slotIndex = slotIndex;
+    this.tiltShiftYFilter.applyFilter(renderer, renderTarget, output);
 
-                    frameIndex = 0;
-                    for (i = 0, n = values.length; i < n; i++) {
-                        valueMap = values[i];
-                        timeline.setFrame(frameIndex++, valueMap["time"], valueMap["name"]);
-                    }
-                    timelines.push(timeline);
-                        duration = Math.max(duration, timeline.frames[timeline.getFrameCount() - 1]);
+    renderer.filterManager.returnRenderTarget(renderTarget);
+};
 
-                } else
-                    throw "Invalid timeline type for a slot: " + timelineName + " (" + slotName + ")";
-            }
+Object.defineProperties(TiltShiftFilter.prototype, {
+    /**
+     * The strength of the blur.
+     *
+     * @member {number}
+     * @memberof TiltShiftFilter#
+     */
+    blur: {
+        get: function ()
+        {
+            return this.tiltShiftXFilter.blur;
+        },
+        set: function (value)
+        {
+            this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value;
         }
-        skeletonData.animations.push(new spine.Animation(name, timelines, duration));
-    }
-};
-spine.SkeletonJson.readCurve = function (timeline, frameIndex, valueMap) {
-    /*jshint -W069*/
-    var curve = valueMap["curve"];
-    if (!curve) return;
-    if (curve == "stepped")
-        timeline.curves.setStepped(frameIndex);
-    else if (curve instanceof Array)
-        timeline.curves.setCurve(frameIndex, curve[0], curve[1], curve[2], curve[3]);
-};
-spine.SkeletonJson.toColor = function (hexString, colorIndex) {
-    if (hexString.length != 8) throw "Color hexidecimal length must be 8, recieved: " + hexString;
-    return parseInt(hexString.substring(colorIndex * 2, 2), 16) / 255;
-};
+    },
+
+    /**
+     * The strength of the gradient blur.
+     *
+     * @member {number}
+     * @memberof TiltShiftFilter#
+     */
+    gradientBlur: {
+        get: function ()
+        {
+            return this.tiltShiftXFilter.gradientBlur;
+        },
+        set: function (value)
+        {
+            this.tiltShiftXFilter.gradientBlur = this.tiltShiftYFilter.gradientBlur = value;
+        }
+    },
 
-spine.Atlas = function (atlasText, textureLoader) {
-    this.textureLoader = textureLoader;
-    this.pages = [];
-    this.regions = [];
+    /**
+     * The Y value to start the effect at.
+     *
+     * @member {number}
+     * @memberof TiltShiftFilter#
+     */
+    start: {
+        get: function ()
+        {
+            return this.tiltShiftXFilter.start;
+        },
+        set: function (value)
+        {
+            this.tiltShiftXFilter.start = this.tiltShiftYFilter.start = value;
+        }
+    },
 
-    var reader = new spine.AtlasReader(atlasText);
-    var tuple = [];
-    tuple.length = 4;
-    var page = null;
-    while (true) {
-        var line = reader.readLine();
-        if (line == null) break;
-        line = reader.trim(line);
-        if (!line.length)
-            page = null;
-        else if (!page) {
-            page = new spine.AtlasPage();
-            page.name = line;
+    /**
+     * The Y value to end the effect at.
+     *
+     * @member {number}
+     * @memberof TiltShiftFilter#
+     */
+    end: {
+        get: function ()
+        {
+            return this.tiltShiftXFilter.end;
+        },
+        set: function (value)
+        {
+            this.tiltShiftXFilter.end = this.tiltShiftYFilter.end = value;
+        }
+    }
+});
 
-            page.format = spine.Atlas.Format[reader.readValue()];
+},{"../../core":29,"./TiltShiftXFilter":110,"./TiltShiftYFilter":111}],110:[function(require,module,exports){
+var TiltShiftAxisFilter = require('./TiltShiftAxisFilter');
 
-            reader.readTuple(tuple);
-            page.minFilter = spine.Atlas.TextureFilter[tuple[0]];
-            page.magFilter = spine.Atlas.TextureFilter[tuple[1]];
+/**
+ * @author Vico @vicocotea
+ * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/
+ */
 
-            var direction = reader.readValue();
-            page.uWrap = spine.Atlas.TextureWrap.clampToEdge;
-            page.vWrap = spine.Atlas.TextureWrap.clampToEdge;
-            if (direction == "x")
-                page.uWrap = spine.Atlas.TextureWrap.repeat;
-            else if (direction == "y")
-                page.vWrap = spine.Atlas.TextureWrap.repeat;
-            else if (direction == "xy")
-                page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat;
+/**
+ * A TiltShiftXFilter.
+ *
+ * @class
+ * @extends PIXI.TiltShiftAxisFilter
+ * @memberof PIXI.filters
+ */
+function TiltShiftXFilter()
+{
+    TiltShiftAxisFilter.call(this);
+}
 
-            textureLoader.load(page, line);
+TiltShiftXFilter.prototype = Object.create(TiltShiftAxisFilter.prototype);
+TiltShiftXFilter.prototype.constructor = TiltShiftXFilter;
+module.exports = TiltShiftXFilter;
 
-            this.pages.push(page);
+/**
+ * Updates the filter delta values.
+ *
+ */
+TiltShiftXFilter.prototype.updateDelta = function ()
+{
+    var dx = this.uniforms.end.value.x - this.uniforms.start.value.x;
+    var dy = this.uniforms.end.value.y - this.uniforms.start.value.y;
+    var d = Math.sqrt(dx * dx + dy * dy);
 
-        } else {
-            var region = new spine.AtlasRegion();
-            region.name = line;
-            region.page = page;
+    this.uniforms.delta.value.x = dx / d;
+    this.uniforms.delta.value.y = dy / d;
+};
 
-            region.rotate = reader.readValue() == "true";
+},{"./TiltShiftAxisFilter":108}],111:[function(require,module,exports){
+var TiltShiftAxisFilter = require('./TiltShiftAxisFilter');
 
-            reader.readTuple(tuple);
-            var x = parseInt(tuple[0], 10);
-            var y = parseInt(tuple[1], 10);
+/**
+ * @author Vico @vicocotea
+ * original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js by Evan Wallace : http://madebyevan.com/
+ */
 
-            reader.readTuple(tuple);
-            var width = parseInt(tuple[0], 10);
-            var height = parseInt(tuple[1], 10);
+/**
+ * A TiltShiftYFilter.
+ *
+ * @class
+ * @extends PIXI.TiltShiftAxisFilter
+ * @memberof PIXI.filters
+ */
+function TiltShiftYFilter()
+{
+    TiltShiftAxisFilter.call(this);
+}
 
-            region.u = x / page.width;
-            region.v = y / page.height;
-            if (region.rotate) {
-                region.u2 = (x + height) / page.width;
-                region.v2 = (y + width) / page.height;
-            } else {
-                region.u2 = (x + width) / page.width;
-                region.v2 = (y + height) / page.height;
-            }
-            region.x = x;
-            region.y = y;
-            region.width = Math.abs(width);
-            region.height = Math.abs(height);
+TiltShiftYFilter.prototype = Object.create(TiltShiftAxisFilter.prototype);
+TiltShiftYFilter.prototype.constructor = TiltShiftYFilter;
+module.exports = TiltShiftYFilter;
 
-            if (reader.readTuple(tuple) == 4) { // split is optional
-                region.splits = [parseInt(tuple[0], 10), parseInt(tuple[1], 10), parseInt(tuple[2], 10), parseInt(tuple[3], 10)];
+/**
+ * Updates the filter delta values.
+ *
+ */
+TiltShiftYFilter.prototype.updateDelta = function ()
+{
+    var dx = this.uniforms.end.value.x - this.uniforms.start.value.x;
+    var dy = this.uniforms.end.value.y - this.uniforms.start.value.y;
+    var d = Math.sqrt(dx * dx + dy * dy);
 
-                if (reader.readTuple(tuple) == 4) { // pad is optional, but only present with splits
-                    region.pads = [parseInt(tuple[0], 10), parseInt(tuple[1], 10), parseInt(tuple[2], 10), parseInt(tuple[3], 10)];
+    this.uniforms.delta.value.x = -dy / d;
+    this.uniforms.delta.value.y = dx / d;
+};
 
-                    reader.readTuple(tuple);
-                }
-            }
+},{"./TiltShiftAxisFilter":108}],112:[function(require,module,exports){
+var core = require('../../core');
+// @see https://github.com/substack/brfs/issues/25
 
-            region.originalWidth = parseInt(tuple[0], 10);
-            region.originalHeight = parseInt(tuple[1], 10);
 
-            reader.readTuple(tuple);
-            region.offsetX = parseInt(tuple[0], 10);
-            region.offsetY = parseInt(tuple[1], 10);
+/**
+ * This filter applies a twist effect making display objects appear twisted in the given direction.
+ *
+ * @class
+ * @extends PIXI.AbstractFilter
+ * @memberof PIXI.filters
+ */
+function TwistFilter()
+{
+    core.AbstractFilter.call(this,
+        // vertex shader
+        null,
+        // fragment shader
+        "precision mediump float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform float radius;\nuniform float angle;\nuniform vec2 offset;\n\nvoid main(void)\n{\n   vec2 coord = vTextureCoord - offset;\n   float dist = length(coord);\n\n   if (dist < radius)\n   {\n       float ratio = (radius - dist) / radius;\n       float angleMod = ratio * ratio * angle;\n       float s = sin(angleMod);\n       float c = cos(angleMod);\n       coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);\n   }\n\n   gl_FragColor = texture2D(uSampler, coord+offset);\n}\n",
+        // custom uniforms
+        {
+            radius:     { type: '1f', value: 0.5 },
+            angle:      { type: '1f', value: 5 },
+            offset:     { type: 'v2', value: { x: 0.5, y: 0.5 } }
+        }
+    );
+}
 
-            region.index = parseInt(reader.readValue(), 10);
+TwistFilter.prototype = Object.create(core.AbstractFilter.prototype);
+TwistFilter.prototype.constructor = TwistFilter;
+module.exports = TwistFilter;
 
-            this.regions.push(region);
+Object.defineProperties(TwistFilter.prototype, {
+    /**
+     * This point describes the the offset of the twist.
+     *
+     * @member {Point}
+     * @memberof TwistFilter#
+     */
+    offset: {
+        get: function ()
+        {
+            return this.uniforms.offset.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.offset.value = value;
         }
-    }
-};
-spine.Atlas.prototype = {
-    findRegion: function (name) {
-        var regions = this.regions;
-        for (var i = 0, n = regions.length; i < n; i++)
-            if (regions[i].name == name) return regions[i];
-        return null;
-    },
-    dispose: function () {
-        var pages = this.pages;
-        for (var i = 0, n = pages.length; i < n; i++)
-            this.textureLoader.unload(pages[i].rendererObject);
-    },
-    updateUVs: function (page) {
-        var regions = this.regions;
-        for (var i = 0, n = regions.length; i < n; i++) {
-            var region = regions[i];
-            if (region.page != page) continue;
-            region.u = region.x / page.width;
-            region.v = region.y / page.height;
-            if (region.rotate) {
-                region.u2 = (region.x + region.height) / page.width;
-                region.v2 = (region.y + region.width) / page.height;
-            } else {
-                region.u2 = (region.x + region.width) / page.width;
-                region.v2 = (region.y + region.height) / page.height;
-            }
-        }
-    }
-};
-
-spine.Atlas.Format = {
-    alpha: 0,
-    intensity: 1,
-    luminanceAlpha: 2,
-    rgb565: 3,
-    rgba4444: 4,
-    rgb888: 5,
-    rgba8888: 6
-};
-
-spine.Atlas.TextureFilter = {
-    nearest: 0,
-    linear: 1,
-    mipMap: 2,
-    mipMapNearestNearest: 3,
-    mipMapLinearNearest: 4,
-    mipMapNearestLinear: 5,
-    mipMapLinearLinear: 6
-};
-
-spine.Atlas.TextureWrap = {
-    mirroredRepeat: 0,
-    clampToEdge: 1,
-    repeat: 2
-};
-
-spine.AtlasPage = function () {};
-spine.AtlasPage.prototype = {
-    name: null,
-    format: null,
-    minFilter: null,
-    magFilter: null,
-    uWrap: null,
-    vWrap: null,
-    rendererObject: null,
-    width: 0,
-    height: 0
-};
-
-spine.AtlasRegion = function () {};
-spine.AtlasRegion.prototype = {
-    page: null,
-    name: null,
-    x: 0, y: 0,
-    width: 0, height: 0,
-    u: 0, v: 0, u2: 0, v2: 0,
-    offsetX: 0, offsetY: 0,
-    originalWidth: 0, originalHeight: 0,
-    index: 0,
-    rotate: false,
-    splits: null,
-    pads: null,
-};
-
-spine.AtlasReader = function (text) {
-    this.lines = text.split(/\r\n|\r|\n/);
-};
-spine.AtlasReader.prototype = {
-    index: 0,
-    trim: function (value) {
-        return value.replace(/^\s+|\s+$/g, "");
-    },
-    readLine: function () {
-        if (this.index >= this.lines.length) return null;
-        return this.lines[this.index++];
     },
-    readValue: function () {
-        var line = this.readLine();
-        var colon = line.indexOf(":");
-        if (colon == -1) throw "Invalid line: " + line;
-        return this.trim(line.substring(colon + 1));
-    },
-    /** Returns the number of tuple values read (2 or 4). */
-    readTuple: function (tuple) {
-        var line = this.readLine();
-        var colon = line.indexOf(":");
-        if (colon == -1) throw "Invalid line: " + line;
-        var i = 0, lastMatch= colon + 1;
-        for (; i < 3; i++) {
-            var comma = line.indexOf(",", lastMatch);
-            if (comma == -1) {
-                if (!i) throw "Invalid line: " + line;
-                break;
-            }
-            tuple[i] = this.trim(line.substr(lastMatch, comma - lastMatch));
-            lastMatch = comma + 1;
+
+    /**
+     * This radius of the twist.
+     *
+     * @member {number}
+     * @memberof TwistFilter#
+     */
+    radius: {
+        get: function ()
+        {
+            return this.uniforms.radius.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.radius.value = value;
         }
-        tuple[i] = this.trim(line.substring(lastMatch));
-        return i + 1;
-    }
-}
+    },
 
-spine.AtlasAttachmentLoader = function (atlas) {
-    this.atlas = atlas;
-}
-spine.AtlasAttachmentLoader.prototype = {
-    newAttachment: function (skin, type, name) {
-        switch (type) {
-        case spine.AttachmentType.region:
-            var region = this.atlas.findRegion(name);
-            if (!region) throw "Region not found in atlas: " + name + " (" + type + ")";
-            var attachment = new spine.RegionAttachment(name);
-            attachment.rendererObject = region;
-            attachment.setUVs(region.u, region.v, region.u2, region.v2, region.rotate);
-            attachment.regionOffsetX = region.offsetX;
-            attachment.regionOffsetY = region.offsetY;
-            attachment.regionWidth = region.width;
-            attachment.regionHeight = region.height;
-            attachment.regionOriginalWidth = region.originalWidth;
-            attachment.regionOriginalHeight = region.originalHeight;
-            return attachment;
+    /**
+     * This angle of the twist.
+     *
+     * @member {number}
+     * @memberof TwistFilter#
+     */
+    angle: {
+        get: function ()
+        {
+            return this.uniforms.angle.value;
+        },
+        set: function (value)
+        {
+            this.uniforms.angle.value = value;
         }
-        throw "Unknown attachment type: " + type;
     }
-}
+});
 
-spine.Bone.yDown = true;
-PIXI.AnimCache = {};
+},{"../../core":29}],113:[function(require,module,exports){
+var core = require('../core');
 
 /**
- * A class that enables the you to import and run your spine animations in pixi.
- * Spine animation data needs to be loaded using the PIXI.AssetLoader or PIXI.SpineLoader before it can be used by this class
- * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source
+ * Holds all information related to an Interaction event
  *
- * @class Spine
- * @extends DisplayObjectContainer
- * @constructor
- * @param url {String} The url of the spine anim file to be used
+ * @class
+ * @memberof PIXI.interaction
  */
-PIXI.Spine = function (url) {
-    PIXI.DisplayObjectContainer.call(this);
-
-    this.spineData = PIXI.AnimCache[url];
-
-    if (!this.spineData) {
-        throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: " + url);
-    }
-
-    this.skeleton = new spine.Skeleton(this.spineData);
-    this.skeleton.updateWorldTransform();
-
-    this.stateData = new spine.AnimationStateData(this.spineData);
-    this.state = new spine.AnimationState(this.stateData);
+function InteractionData()
+{
+    /**
+     * This point stores the global coords of where the touch/mouse event happened
+     *
+     * @member {Point}
+     */
+    this.global = new core.Point();
 
-    this.slotContainers = [];
+    /**
+     * The target Sprite that was interacted with
+     *
+     * @member {Sprite}
+     */
+    this.target = null;
 
-    for (var i = 0, n = this.skeleton.drawOrder.length; i < n; i++) {
-        var slot = this.skeleton.drawOrder[i];
-        var attachment = slot.attachment;
-        var slotContainer = new PIXI.DisplayObjectContainer();
-        this.slotContainers.push(slotContainer);
-        this.addChild(slotContainer);
-        if (!(attachment instanceof spine.RegionAttachment)) {
-            continue;
-        }
-        var spriteName = attachment.rendererObject.name;
-        var sprite = this.createSprite(slot, attachment.rendererObject);
-        slot.currentSprite = sprite;
-        slot.currentSpriteName = spriteName;
-        slotContainer.addChild(sprite);
-    }
-};
+    /**
+     * When passed to an event handler, this will be the original DOM Event that was captured
+     *
+     * @member {Event}
+     */
+    this.originalEvent = null;
+}
 
-PIXI.Spine.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
-PIXI.Spine.prototype.constructor = PIXI.Spine;
+InteractionData.prototype.constructor = InteractionData;
+module.exports = InteractionData;
 
-/*
- * Updates the object transform for rendering
+/**
+ * This will return the local coordinates of the specified displayObject for this InteractionData
  *
- * @method updateTransform
- * @private
+ * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off
+ * @param [point] {Point} A Point object in which to store the value, optional (otherwise will create a new point)
+ * param [globalPos] {Point} A Point object containing your custom global coords, optional (otherwise will use the current global coords)
+ * @return {Point} A point containing the coordinates of the InteractionData position relative to the DisplayObject
  */
-PIXI.Spine.prototype.updateTransform = function () {
-    this.lastTime = this.lastTime || Date.now();
-    var timeDelta = (Date.now() - this.lastTime) * 0.001;
-    this.lastTime = Date.now();
-    this.state.update(timeDelta);
-    this.state.apply(this.skeleton);
-    this.skeleton.updateWorldTransform();
-
-    var drawOrder = this.skeleton.drawOrder;
-    for (var i = 0, n = drawOrder.length; i < n; i++) {
-        var slot = drawOrder[i];
-        var attachment = slot.attachment;
-        var slotContainer = this.slotContainers[i];
-        if (!(attachment instanceof spine.RegionAttachment)) {
-            slotContainer.visible = false;
-            continue;
-        }
-
-        if (attachment.rendererObject) {
-            if (!slot.currentSpriteName || slot.currentSpriteName != attachment.name) {
-                var spriteName = attachment.rendererObject.name;
-                if (slot.currentSprite !== undefined) {
-                    slot.currentSprite.visible = false;
-                }
-                slot.sprites = slot.sprites || {};
-                if (slot.sprites[spriteName] !== undefined) {
-                    slot.sprites[spriteName].visible = true;
-                } else {
-                    var sprite = this.createSprite(slot, attachment.rendererObject);
-                    slotContainer.addChild(sprite);
-                }
-                slot.currentSprite = slot.sprites[spriteName];
-                slot.currentSpriteName = spriteName;
-            }
-        }
-        slotContainer.visible = true;
+InteractionData.prototype.getLocalPosition = function (displayObject, point, globalPos)
+{
+    var worldTransform = displayObject.worldTransform;
+    var global = globalPos ? globalPos : this.global;
 
-        var bone = slot.bone;
+    // do a cheeky transform to get the mouse coords;
+    var a00 = worldTransform.a, a01 = worldTransform.c, a02 = worldTransform.tx,
+        a10 = worldTransform.b, a11 = worldTransform.d, a12 = worldTransform.ty,
+        id = 1 / (a00 * a11 + a01 * -a10);
 
-        slotContainer.position.x = bone.worldX + attachment.x * bone.m00 + attachment.y * bone.m01;
-        slotContainer.position.y = bone.worldY + attachment.x * bone.m10 + attachment.y * bone.m11;
-        slotContainer.scale.x = bone.worldScaleX;
-        slotContainer.scale.y = bone.worldScaleY;
+    point = point || new core.math.Point();
 
-        slotContainer.rotation = -(slot.bone.worldRotation * Math.PI / 180);
-    }
+    point.x = a11 * id * global.x + -a01 * id * global.x + (a12 * a01 - a02 * a11) * id;
+    point.y = a00 * id * global.y + -a10 * id * global.y + (-a12 * a00 + a02 * a10) * id;
 
-    PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+    // set the mouse coords...
+    return point;
 };
 
+},{"../core":29}],114:[function(require,module,exports){
+var core = require('../core'),
+    InteractionData = require('./InteractionData');
 
-PIXI.Spine.prototype.createSprite = function (slot, descriptor) {
-    var name = PIXI.TextureCache[descriptor.name] ? descriptor.name : descriptor.name + ".png";
-    var sprite = new PIXI.Sprite(PIXI.Texture.fromFrame(name));
-    sprite.scale = descriptor.scale;
-    sprite.rotation = descriptor.rotation;
-    sprite.anchor.x = sprite.anchor.y = 0.5;
-
-    slot.sprites = slot.sprites || {};
-    slot.sprites[descriptor.name] = sprite;
-    return sprite;
-};
+// Mix interactiveTarget into core.DisplayObject.prototype
+Object.assign(
+    core.DisplayObject.prototype,
+    require('./interactiveTarget')
+);
 
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive
+ * if its interactive parameter is set to true
+ * This manager also supports multitouch.
+ *
+ * @class
+ * @memberof PIXI.interaction
+ * @param renderer {CanvasRenderer|WebGLRenderer} A reference to the current renderer
+ * @param [options] {object}
+ * @param [options.autoPreventDefault=true] {boolean} Should the manager automatically prevent default browser actions.
+ * @param [options.interactionFrequency=10] {number} Frequency increases the interaction events will be checked.
  */
+function InteractionManager(renderer, options)
+{
+    options = options || {};
 
-PIXI.BaseTextureCache = {};
-PIXI.texturesToUpdate = [];
-PIXI.texturesToDestroy = [];
+    /**
+     * The renderer this interaction manager works for.
+     *
+     * @member {SystemRenderer}
+     */
+    this.renderer = renderer;
 
-PIXI.BaseTextureCacheIdGenerator = 0;
+    /**
+     * Should default browser actions automatically be prevented.
+     *
+     * @member {boolean}
+     * @default true
+     */
+    this.autoPreventDefault = options.autoPreventDefault !== undefined ? options.autoPreventDefault : true;
 
-/**
- * A texture stores the information that represents an image. All textures have a base texture
- *
- * @class BaseTexture
- * @uses EventTarget
- * @constructor
- * @param source {String} the source object (image or canvas)
- * @param scaleMode {Number} Should be one of the PIXI.scaleMode consts
- */
-PIXI.BaseTexture = function(source, scaleMode)
-{
-    PIXI.EventTarget.call( this );
+    /**
+     * As this frequency increases the interaction events will be checked more often.
+     *
+     * @member {number}
+     * @default 10
+     */
+    this.interactionFrequency = options.interactionFrequency || 10;
 
     /**
-     * [read-only] The width of the base texture set when the image has loaded
+     * The mouse data
      *
-     * @property width
-     * @type Number
-     * @readOnly
+     * @member {InteractionData}
      */
-    this.width = 100;
+    this.mouse = new InteractionData();
 
     /**
-     * [read-only] The height of the base texture set when the image has loaded
+     * An event data object to handle all the event tracking/dispatching
      *
-     * @property height
-     * @type Number
-     * @readOnly
+     * @member {EventData}
      */
-    this.height = 100;
+    this.eventData = {
+        stopped: false,
+        target: null,
+        type: null,
+        data: this.mouse,
+        stopPropagation:function(){
+            this.stopped = true;
+        }
+    };
 
     /**
-     * The scale mode to apply when scaling this texture
-     * @property scaleMode
-     * @type PIXI.scaleModes
-     * @default PIXI.scaleModes.LINEAR
+     * Tiny little interactiveData pool !
+     *
+     * @member {Array}
      */
-    this.scaleMode = scaleMode || PIXI.scaleModes.DEFAULT;
+    this.interactiveDataPool = [];
 
     /**
-     * [read-only] Describes if the base texture has loaded or not
+     * The DOM element to bind to.
      *
-     * @property hasLoaded
-     * @type Boolean
-     * @readOnly
+     * @member {HTMLElement}
+     * @private
      */
-    this.hasLoaded = false;
+    this.interactionDOMElement = null;
 
     /**
-     * The source that is loaded to create the texture
+     * Have events been attached to the dom element?
      *
-     * @property source
-     * @type Image
+     * @member {boolean}
+     * @private
      */
-    this.source = source;
+    this.eventsAdded = false;
 
-    if(!source)return;
+    //this will make it so that you don't have to call bind all the time
 
-    if(this.source.complete || this.source.getContext)
-    {
-        this.hasLoaded = true;
-        this.width = this.source.width;
-        this.height = this.source.height;
+    /**
+     * @member {Function}
+     */
+    this.onMouseUp = this.onMouseUp.bind(this);
+    this.processMouseUp = this.processMouseUp.bind( this );
 
-        PIXI.texturesToUpdate.push(this);
-    }
-    else
-    {
 
-        var scope = this;
-        this.source.onload = function() {
+    /**
+     * @member {Function}
+     */
+    this.onMouseDown = this.onMouseDown.bind(this);
+    this.processMouseDown = this.processMouseDown.bind( this );
 
-            scope.hasLoaded = true;
-            scope.width = scope.source.width;
-            scope.height = scope.source.height;
+    /**
+     * @member {Function}
+     */
+    this.onMouseMove = this.onMouseMove.bind( this );
+    this.processMouseMove = this.processMouseMove.bind( this );
 
-            // add it to somewhere...
-            PIXI.texturesToUpdate.push(scope);
-            scope.dispatchEvent( { type: 'loaded', content: scope } );
-        };
-    }
+    /**
+     * @member {Function}
+     */
+    this.onMouseOut = this.onMouseOut.bind(this);
+    this.processMouseOverOut = this.processMouseOverOut.bind( this );
 
-    this.imageUrl = null;
-    this._powerOf2 = false;
 
-    //TODO will be used for futer pixi 1.5...
-    this.id = PIXI.BaseTextureCacheIdGenerator++;
+    /**
+     * @member {Function}
+     */
+    this.onTouchStart = this.onTouchStart.bind(this);
+    this.processTouchStart = this.processTouchStart.bind(this);
 
-    // used for webGL
-    this._glTextures = [];
+    /**
+     * @member {Function}
+     */
+    this.onTouchEnd = this.onTouchEnd.bind(this);
+    this.processTouchEnd = this.processTouchEnd.bind(this);
 
-};
+    /**
+     * @member {Function}
+     */
+    this.onTouchMove = this.onTouchMove.bind(this);
+    this.processTouchMove = this.processTouchMove.bind(this);
 
-PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture;
+    /**
+     * @member {number}
+     */
+    this.last = 0;
 
-/**
- * Destroys this base texture
- *
- * @method destroy
- */
-PIXI.BaseTexture.prototype.destroy = function()
-{
-    if(this.imageUrl)
-    {
-        delete PIXI.BaseTextureCache[this.imageUrl];
-        this.imageUrl = null;
-        this.source.src = null;
-    }
-    this.source = null;
-    PIXI.texturesToDestroy.push(this);
-};
+    /**
+     * The css style of the cursor that is being used
+     * @member {string}
+     */
+    this.currentCursorStyle = 'inherit';
+
+    /**
+     * Internal cached var
+     * @member {Point}
+     * @private
+     */
+    this._tempPoint = new core.Point();
+
+    /**
+     * The current resolution
+     * @member {number}
+     */
+    this.resolution = 1;
+
+    this.setTargetElement(this.renderer.view, this.renderer.resolution);
+}
+
+InteractionManager.prototype.constructor = InteractionManager;
+module.exports = InteractionManager;
 
 /**
- * Changes the source image of the texture
+ * Sets the DOM element which will receive mouse/touch events. This is useful for when you have
+ * other DOM elements on top of the renderers Canvas element. With this you'll be bale to deletegate
+ * another DOM element to receive those events.
  *
- * @method updateSourceImage
- * @param newSrc {String} the path of the image
+ * @param element {HTMLElement} the DOM element which will receive mouse and touch events.
+ * @param [resolution=1] {number} THe resolution of the new element (relative to the canvas).
+ * @private
  */
-PIXI.BaseTexture.prototype.updateSourceImage = function(newSrc)
+InteractionManager.prototype.setTargetElement = function (element, resolution)
 {
-    this.hasLoaded = false;
-    this.source.src = null;
-    this.source.src = newSrc;
+    this.removeEvents();
+
+    this.interactionDOMElement = element;
+
+    this.resolution = resolution || 1;
+
+    this.addEvents();
 };
 
 /**
- * Helper function that returns a base texture based on an image url
- * If the image is not in the base texture cache it will be created and loaded
- *
- * @static
- * @method fromImage
- * @param imageUrl {String} The image url of the texture
- * @param crossorigin {Boolean} 
- * @param scaleMode {Number} Should be one of the PIXI.scaleMode consts
- * @return BaseTexture
+ * Registers all the DOM events
+ * @private
  */
-PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin, scaleMode)
+InteractionManager.prototype.addEvents = function ()
 {
-    var baseTexture = PIXI.BaseTextureCache[imageUrl];
-    crossorigin = !crossorigin;
+    if (!this.interactionDOMElement)
+    {
+        return;
+    }
 
-    if(!baseTexture)
+    core.ticker.shared.add(this.update, this);
+
+    if (window.navigator.msPointerEnabled)
     {
-        // new Image() breaks tex loading in some versions of Chrome.
-        // See https://code.google.com/p/chromium/issues/detail?id=238071
-        var image = new Image();//document.createElement('img');
-        if (crossorigin)
-        {
-            image.crossOrigin = '';
-        }
-        image.src = imageUrl;
-        baseTexture = new PIXI.BaseTexture(image, scaleMode);
-        baseTexture.imageUrl = imageUrl;
-        PIXI.BaseTextureCache[imageUrl] = baseTexture;
+        this.interactionDOMElement.style['-ms-content-zooming'] = 'none';
+        this.interactionDOMElement.style['-ms-touch-action'] = 'none';
     }
 
-    return baseTexture;
+    window.document.addEventListener('mousemove',    this.onMouseMove, true);
+    this.interactionDOMElement.addEventListener('mousedown',    this.onMouseDown, true);
+    this.interactionDOMElement.addEventListener('mouseout',     this.onMouseOut, true);
+
+    this.interactionDOMElement.addEventListener('touchstart',   this.onTouchStart, true);
+    this.interactionDOMElement.addEventListener('touchend',     this.onTouchEnd, true);
+    this.interactionDOMElement.addEventListener('touchmove',    this.onTouchMove, true);
+
+    window.addEventListener('mouseup',  this.onMouseUp, true);
+
+    this.eventsAdded = true;
 };
 
-PIXI.BaseTexture.fromCanvas = function(canvas, scaleMode)
+/**
+ * Removes all the DOM events that were previously registered
+ * @private
+ */
+InteractionManager.prototype.removeEvents = function ()
 {
-    if(!canvas._pixiId)
+    if (!this.interactionDOMElement)
     {
-        canvas._pixiId = 'canvas_' + PIXI.TextureCacheIdGenerator++;
+        return;
     }
 
-    var baseTexture = PIXI.BaseTextureCache[canvas._pixiId];
+    core.ticker.shared.remove(this.update);
 
-    if(!baseTexture)
+    if (window.navigator.msPointerEnabled)
     {
-        baseTexture = new PIXI.BaseTexture(canvas, scaleMode);
-        PIXI.BaseTextureCache[canvas._pixiId] = baseTexture;
+        this.interactionDOMElement.style['-ms-content-zooming'] = '';
+        this.interactionDOMElement.style['-ms-touch-action'] = '';
     }
 
-    return baseTexture;
-};
-
+    window.document.removeEventListener('mousemove', this.onMouseMove, true);
+    this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true);
+    this.interactionDOMElement.removeEventListener('mouseout',  this.onMouseOut, true);
 
+    this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true);
+    this.interactionDOMElement.removeEventListener('touchend',  this.onTouchEnd, true);
+    this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true);
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+    this.interactionDOMElement = null;
 
-PIXI.TextureCache = {};
-PIXI.FrameCache = {};
+    window.removeEventListener('mouseup',  this.onMouseUp, true);
 
-PIXI.TextureCacheIdGenerator = 0;
+    this.eventsAdded = false;
+};
 
 /**
- * A texture stores the information that represents an image or part of an image. It cannot be added
- * to the display list directly. To do this use PIXI.Sprite. If no frame is provided then the whole image is used
+ * Updates the state of interactive objects.
+ * Invoked by a throttled ticker update from
+ * {@link PIXI.ticker.shared}.
  *
- * @class Texture
- * @uses EventTarget
- * @constructor
- * @param baseTexture {BaseTexture} The base texture source to create the texture from
- * @param frame {Rectangle} The rectangle frame of the texture to show
+ * @param deltaTime {number}
  */
-PIXI.Texture = function(baseTexture, frame)
+InteractionManager.prototype.update = function (deltaTime)
 {
-    PIXI.EventTarget.call( this );
+    this._deltaTime += deltaTime;
 
-    if(!frame)
+    if (this._deltaTime < this.interactionFrequency)
     {
-        this.noFrame = true;
-        frame = new PIXI.Rectangle(0,0,1,1);
+        return;
     }
 
-    if(baseTexture instanceof PIXI.Texture)
-        baseTexture = baseTexture.baseTexture;
-
-    /**
-     * The base texture of that this texture uses
-     *
-     * @property baseTexture
-     * @type BaseTexture
-     */
-    this.baseTexture = baseTexture;
-
-    /**
-     * The frame specifies the region of the base texture that this texture uses
-     *
-     * @property frame
-     * @type Rectangle
-     */
-    this.frame = frame;
+    this._deltaTime = 0;
 
-    /**
-     * The trim point
-     *
-     * @property trim
-     * @type Rectangle
-     */
-    this.trim = null;
-  
-    this.scope = this;
+    if (!this.interactionDOMElement)
+    {
+        return;
+    }
 
-    if(baseTexture.hasLoaded)
+    // if the user move the mouse this check has already been dfone using the mouse move!
+    if(this.didMove)
     {
-        if(this.noFrame)frame = new PIXI.Rectangle(0,0, baseTexture.width, baseTexture.height);
-      
-        this.setFrame(frame);
+        this.didMove = false;
+        return;
     }
-    else
+
+    this.cursor = 'inherit';
+
+    this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, true );
+
+    if (this.currentCursorStyle !== this.cursor)
     {
-        var scope = this;
-        baseTexture.addEventListener('loaded', function(){ scope.onBaseTextureLoaded(); });
+        this.currentCursorStyle = this.cursor;
+        this.interactionDOMElement.style.cursor = this.cursor;
     }
-};
 
-PIXI.Texture.prototype.constructor = PIXI.Texture;
+    //TODO
+};
 
 /**
- * Called when the base texture is loaded
- *
- * @method onBaseTextureLoaded
- * @param event
+ * Dispatches an event on the display object that was interacted with
+ * @param displayObject {Container|Sprite|TilingSprite} the display object in question
+ * @param eventString {string} the name of the event (e.g, mousedown)
+ * @param eventData {EventData} the event data object
  * @private
  */
-PIXI.Texture.prototype.onBaseTextureLoaded = function()
+InteractionManager.prototype.dispatchEvent = function ( displayObject, eventString, eventData )
 {
-    var baseTexture = this.baseTexture;
-    baseTexture.removeEventListener( 'loaded', this.onLoaded );
+    if(!eventData.stopped)
+    {
+        eventData.target = displayObject;
+        eventData.type = eventString;
 
-    if(this.noFrame)this.frame = new PIXI.Rectangle(0,0, baseTexture.width, baseTexture.height);
-    
-    this.setFrame(this.frame);
+        displayObject.emit( eventString, eventData );
 
-    this.scope.dispatchEvent( { type: 'update', content: this } );
+        if( displayObject[eventString] )
+        {
+            displayObject[eventString]( eventData );
+        }
+    }
 };
 
 /**
- * Destroys this texture
+ * Maps x and y coords from a DOM object and maps them correctly to the pixi view. The resulting value is stored in the point.
+ * This takes into account the fact that the DOM element could be scaled and positioned anywhere on the screen.
  *
- * @method destroy
- * @param destroyBase {Boolean} Whether to destroy the base texture as well
+ * @param  {Point} point the point that the result will be stored in
+ * @param  {number} x     the x coord of the position to map
+ * @param  {number} y     the y coord of the position to map
  */
-PIXI.Texture.prototype.destroy = function(destroyBase)
+InteractionManager.prototype.mapPositionToPoint = function ( point, x, y )
 {
-    if(destroyBase) this.baseTexture.destroy();
+    var rect = this.interactionDOMElement.getBoundingClientRect();
+    point.x = ( ( x - rect.left ) * (this.interactionDOMElement.width  / rect.width  ) ) / this.resolution;
+    point.y = ( ( y - rect.top  ) * (this.interactionDOMElement.height / rect.height ) ) / this.resolution;
 };
 
 /**
- * Specifies the rectangle region of the baseTexture
+ * This function is provides a neat way of crawling through the scene graph and running a specified function on all interactive objects it finds.
+ * It will also take care of hit testing the interactive objects and passes the hit across in the function.
  *
- * @method setFrame
- * @param frame {Rectangle} The frame of the texture to set it to
+ * @param  {Point} point the point that is tested for collision
+ * @param  {Container|Sprite|TilingSprite} displayObject the displayObject that will be hit test (recurcsivly crawls its children)
+ * @param  {function} func the function that will be called on each interactive object. The displayObject and hit will be passed to the function
+ * @param  {boolean} hitTest this indicates if the objects inside should be hit test against the point
+ * @return {boolean} returns true if the displayObject hit the point
  */
-PIXI.Texture.prototype.setFrame = function(frame)
+InteractionManager.prototype.processInteractive = function (point, displayObject, func, hitTest, interactive )
 {
-    this.frame = frame;
-    this.width = frame.width;
-    this.height = frame.height;
-
-    if(frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height)
+    if(!displayObject.visible)
     {
-        throw new Error('Texture Error: frame does not fit inside the base Texture dimensions ' + this);
+        return false;
     }
 
-    this.updateFrame = true;
-
-    PIXI.Texture.frameUpdates.push(this);
+    var children = displayObject.children;
 
+    var hit = false;
 
-    //this.dispatchEvent( { type: 'update', content: this } );
-};
+    // if the object is interactive we must hit test all its children..
+    interactive = interactive || displayObject.interactive;
 
-PIXI.Texture.prototype._updateWebGLuvs = function()
-{
-    if(!this._uvs)this._uvs = new PIXI.TextureUvs();
+    if(displayObject.interactiveChildren)
+    {
 
-    var frame = this.frame;
-    var tw = this.baseTexture.width;
-    var th = this.baseTexture.height;
+        for (var i = children.length-1; i >= 0; i--)
+        {
+            if(! hit  && hitTest)
+            {
+                hit = this.processInteractive(point, children[i], func, true, interactive );
+            }
+            else
+            {
+                // now we know we can miss it all!
+                this.processInteractive(point, children[i], func, false, false );
+            }
+        }
 
-    this._uvs.x0 = frame.x / tw;
-    this._uvs.y0 = frame.y / th;
+    }
 
-    this._uvs.x1 = (frame.x + frame.width) / tw;
-    this._uvs.y1 = frame.y / th;
+    if(interactive)
+    {
+        if(hitTest)
+        {
+            if(displayObject.hitArea)
+            {
+                // lets use the hit object first!
+                displayObject.worldTransform.applyInverse(point,  this._tempPoint);
+                hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y );
+            }
+            else if(displayObject.containsPoint)
+            {
+                hit = displayObject.containsPoint(point);
+            }
+        }
 
-    this._uvs.x2 = (frame.x + frame.width) / tw;
-    this._uvs.y2 = (frame.y + frame.height) / th;
+        if(displayObject.interactive)
+        {
+            func(displayObject, hit);
+        }
+    }
 
-    this._uvs.x3 = frame.x / tw;
-    this._uvs.y3 = (frame.y + frame.height) / th;
+    return hit;
 };
 
+
+
+
 /**
- * Helper function that returns a texture based on an image url
- * If the image is not in the texture cache it will be  created and loaded
+ * Is called when the mouse button is pressed down on the renderer element
  *
- * @static
- * @method fromImage
- * @param imageUrl {String} The image url of the texture
- * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
- * @return Texture
+ * @param event {Event} The DOM event of a mouse button being pressed down
+ * @private
  */
-PIXI.Texture.fromImage = function(imageUrl, crossorigin, scaleMode)
+InteractionManager.prototype.onMouseDown = function (event)
 {
-    var texture = PIXI.TextureCache[imageUrl];
+    this.mouse.originalEvent = event;
+    this.eventData.data = this.mouse;
+    this.eventData.stopped = false;
 
-    if(!texture)
+    // Update internal mouse reference
+    this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY);
+
+    if (this.autoPreventDefault)
     {
-        texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin, scaleMode));
-        PIXI.TextureCache[imageUrl] = texture;
+        this.mouse.originalEvent.preventDefault();
     }
 
-    return texture;
-};
-
-/**
- * Helper function that returns a texture based on a frame id
- * If the frame id is not in the texture cache an error will be thrown
- *
- * @static
- * @method fromFrame
- * @param frameId {String} The frame id of the texture
- * @return Texture
- */
-PIXI.Texture.fromFrame = function(frameId)
-{
-    var texture = PIXI.TextureCache[frameId];
-    if(!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache ');
-    return texture;
+    this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseDown, true );
 };
 
 /**
- * Helper function that returns a texture based on a canvas element
- * If the canvas is not in the texture cache it will be  created and loaded
+ * Processes the result of the mouse down check and dispatches the event if need be
  *
- * @static
- * @method fromCanvas
- * @param canvas {Canvas} The canvas element source of the texture
- * @return Texture
+ * @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
+ * @param hit {boolean} the result of the hit test on the dispay object
+ * @private
  */
-PIXI.Texture.fromCanvas = function(canvas, scaleMode)
+InteractionManager.prototype.processMouseDown = function ( displayObject, hit )
 {
-    var baseTexture = PIXI.BaseTexture.fromCanvas(canvas, scaleMode);
+    var e = this.mouse.originalEvent;
 
-    return new PIXI.Texture( baseTexture );
+    var isRightButton = e.button === 2 || e.which === 3;
 
+    if(hit)
+    {
+        displayObject[ isRightButton ? '_isRightDown' : '_isLeftDown' ] = true;
+        this.dispatchEvent( displayObject, isRightButton ? 'rightdown' : 'mousedown', this.eventData );
+    }
 };
 
 
+
 /**
- * Adds a texture to the textureCache.
+ * Is called when the mouse button is released on the renderer element
  *
- * @static
- * @method addTextureToCache
- * @param texture {Texture}
- * @param id {String} the id that the texture will be stored against.
+ * @param event {Event} The DOM event of a mouse button being released
+ * @private
  */
-PIXI.Texture.addTextureToCache = function(texture, id)
+InteractionManager.prototype.onMouseUp = function (event)
 {
-    PIXI.TextureCache[id] = texture;
+    this.mouse.originalEvent = event;
+    this.eventData.data = this.mouse;
+    this.eventData.stopped = false;
+
+    // Update internal mouse reference
+    this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY);
+
+    this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseUp, true );
 };
 
 /**
- * Remove a texture from the textureCache.
+ * Processes the result of the mouse up check and dispatches the event if need be
  *
- * @static
- * @method removeTextureFromCache
- * @param id {String} the id of the texture to be removed
- * @return {Texture} the texture that was removed
+ * @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
+ * @param hit {boolean} the result of the hit test on the display object
+ * @private
  */
-PIXI.Texture.removeTextureFromCache = function(id)
-{
-    var texture = PIXI.TextureCache[id];
-    PIXI.TextureCache[id] = null;
-    return texture;
-};
-
-// this is more for webGL.. it contains updated frames..
-PIXI.Texture.frameUpdates = [];
-
-PIXI.TextureUvs = function()
+InteractionManager.prototype.processMouseUp = function ( displayObject, hit )
 {
-    this.x0 = 0;
-    this.y0 = 0;
+    var e = this.mouse.originalEvent;
 
-    this.x1 = 0;
-    this.y1 = 0;
-
-    this.x2 = 0;
-    this.y2 = 0;
-
-    this.x3 = 0;
-    this.y4 = 0;
+    var isRightButton = e.button === 2 || e.which === 3;
+    var isDown =  isRightButton ? '_isRightDown' : '_isLeftDown';
 
+    if(hit)
+    {
+        this.dispatchEvent( displayObject, isRightButton ? 'rightup' : 'mouseup', this.eventData );
 
+        if( displayObject[ isDown ] )
+        {
+            displayObject[ isDown ] = false;
+            this.dispatchEvent( displayObject, isRightButton ? 'rightclick' : 'click', this.eventData );
+        }
+    }
+    else
+    {
+        if( displayObject[ isDown ] )
+        {
+            displayObject[ isDown ] = false;
+            this.dispatchEvent( displayObject, isRightButton ? 'rightupoutside' : 'mouseupoutside', this.eventData );
+        }
+    }
 };
 
 
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * Is called when the mouse moves across the renderer element
+ *
+ * @param event {Event} The DOM event of the mouse moving
+ * @private
  */
+InteractionManager.prototype.onMouseMove = function (event)
+{
+    this.mouse.originalEvent = event;
+    this.eventData.data = this.mouse;
+    this.eventData.stopped = false;
 
-/**
- A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it.
+    this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY);
 
- __Hint__: All DisplayObjects (exmpl. Sprites) that render on RenderTexture should be preloaded.
- Otherwise black rectangles will be drawn instead.
+    this.didMove = true;
 
- RenderTexture takes snapshot of DisplayObject passed to render method. If DisplayObject is passed to render method, position and rotation of it will be ignored. For example:
+    this.cursor = 'inherit';
 
-    var renderTexture = new PIXI.RenderTexture(800, 600);
-    var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
-    sprite.position.x = 800/2;
-    sprite.position.y = 600/2;
-    sprite.anchor.x = 0.5;
-    sprite.anchor.y = 0.5;
-    renderTexture.render(sprite);
+    this.processInteractive(this.mouse.global, this.renderer._lastObjectRendered, this.processMouseMove, true );
 
- Sprite in this case will be rendered to 0,0 position. To render this sprite at center DisplayObjectContainer should be used:
+    if (this.currentCursorStyle !== this.cursor)
+    {
+        this.currentCursorStyle = this.cursor;
+        this.interactionDOMElement.style.cursor = this.cursor;
+    }
 
-    var doc = new PIXI.DisplayObjectContainer();
-    doc.addChild(sprite);
-    renderTexture.render(doc);  // Renders to center of renderTexture
+    //TODO BUG for parents ineractive object (border order issue)
+};
 
- * @class RenderTexture
- * @extends Texture
- * @constructor
- * @param width {Number} The width of the render texture
- * @param height {Number} The height of the render texture
+/**
+ * Processes the result of the mouse move check and dispatches the event if need be
+ *
+ * @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
+ * @param hit {boolean} the result of the hit test on the display object
+ * @private
  */
-PIXI.RenderTexture = function(width, height, renderer)
+InteractionManager.prototype.processMouseMove = function ( displayObject, hit )
 {
-    PIXI.EventTarget.call( this );
-
-    /**
-     * The with of the render texture
-     *
-     * @property width
-     * @type Number
-     */
-    this.width = width || 100;
-    /**
-     * The height of the render texture
-     *
-     * @property height
-     * @type Number
-     */
-    this.height = height || 100;
-
-    /**
-     * The framing rectangle of the render texture
-     *
-     * @property frame
-     * @type Rectangle
-     */
-    this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
-
-    /**
-     * The base texture object that this texture uses
-     *
-     * @property baseTexture
-     * @type BaseTexture
-     */
-    this.baseTexture = new PIXI.BaseTexture();
-    this.baseTexture.width = this.width;
-    this.baseTexture.height = this.height;
-    this.baseTexture._glTextures = [];
-
-    this.baseTexture.hasLoaded = true;
-
-    // each render texture can only belong to one renderer at the moment if its webGL
-    this.renderer = renderer || PIXI.defaultRenderer;
+    this.dispatchEvent( displayObject, 'mousemove', this.eventData);
+    this.processMouseOverOut(displayObject, hit);
+};
 
-    if(this.renderer.type === PIXI.WEBGL_RENDERER)
-    {
-        var gl = this.renderer.gl;
 
-        this.textureBuffer = new PIXI.FilterTexture(gl, this.width, this.height);
-        this.baseTexture._glTextures[gl.id] =  this.textureBuffer.texture;
+/**
+ * Is called when the mouse is moved out of the renderer element
+ *
+ * @param event {Event} The DOM event of a mouse being moved out
+ * @private
+ */
+InteractionManager.prototype.onMouseOut = function (event)
+{
+    this.mouse.originalEvent = event;
+    this.eventData.stopped = false;
 
-        this.render = this.renderWebGL;
-        this.projection = new PIXI.Point(this.width/2 , -this.height/2);
-    }
-    else
-    {
-        this.render = this.renderCanvas;
-        this.textureBuffer = new PIXI.CanvasBuffer(this.width, this.height);
-        this.baseTexture.source = this.textureBuffer.canvas;
-    }
+    // Update internal mouse reference
+    this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY);
 
-    PIXI.Texture.frameUpdates.push(this);
+    this.interactionDOMElement.style.cursor = 'inherit';
 
+    // TODO optimize by not check EVERY TIME! maybe half as often? //
+    this.mapPositionToPoint( this.mouse.global, event.clientX, event.clientY );
 
+    this.processInteractive( this.mouse.global, this.renderer._lastObjectRendered, this.processMouseOverOut, false );
 };
 
-PIXI.RenderTexture.prototype = Object.create(PIXI.Texture.prototype);
-PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture;
-
-PIXI.RenderTexture.prototype.resize = function(width, height)
+/**
+ * Processes the result of the mouse over/out check and dispatches the event if need be
+ *
+ * @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
+ * @param hit {boolean} the result of the hit test on the display object
+ * @private
+ */
+InteractionManager.prototype.processMouseOverOut = function ( displayObject, hit )
 {
-    this.width = width;
-    this.height = height;
-
-    this.frame.width = this.width;
-    this.frame.height = this.height;
-
-    if(this.renderer.type === PIXI.WEBGL_RENDERER)
+    if(hit)
     {
-        this.projection.x = this.width / 2;
-        this.projection.y = -this.height / 2;
+        if(!displayObject._over)
+        {
+            displayObject._over = true;
+            this.dispatchEvent( displayObject, 'mouseover', this.eventData );
+        }
 
-        var gl = this.renderer.gl;
-        gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTextures[gl.id]);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,  this.width,  this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        if (displayObject.buttonMode)
+        {
+            this.cursor = displayObject.defaultCursor;
+        }
     }
     else
     {
-        this.textureBuffer.resize(this.width, this.height);
+        if(displayObject._over)
+        {
+            displayObject._over = false;
+            this.dispatchEvent( displayObject, 'mouseout', this.eventData);
+        }
     }
-
-    PIXI.Texture.frameUpdates.push(this);
 };
 
+
 /**
- * This function will draw the display object to the texture.
+ * Is called when a touch is started on the renderer element
  *
- * @method renderWebGL
- * @param displayObject {DisplayObject} The display object to render this texture on
- * @param clear {Boolean} If true the texture will be cleared before the displayObject is drawn
+ * @param event {Event} The DOM event of a touch starting on the renderer view
  * @private
  */
-PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, clear)
+InteractionManager.prototype.onTouchStart = function (event)
 {
-    //TOOD replace position with matrix..
-    var gl = this.renderer.gl;
-
-    gl.colorMask(true, true, true, true);
+    if (this.autoPreventDefault)
+    {
+        event.preventDefault();
+    }
 
-    gl.viewport(0, 0, this.width, this.height);
+    var changedTouches = event.changedTouches;
+    var cLength = changedTouches.length;
 
-    gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer );
+    for (var i=0; i < cLength; i++)
+    {
+        var touchEvent = changedTouches[i];
+        //TODO POOL
+        var touchData = this.getTouchData( touchEvent );
 
-    if(clear)this.textureBuffer.clear();
+        touchData.originalEvent = event;
 
-    // THIS WILL MESS WITH HIT TESTING!
-    var children = displayObject.children;
+        this.eventData.data = touchData;
+        this.eventData.stopped = false;
 
-    //TODO -? create a new one??? dont think so!
-    var originalWorldTransform = displayObject.worldTransform;
-    displayObject.worldTransform = PIXI.RenderTexture.tempMatrix;
-    // modify to flip...
-    displayObject.worldTransform.d = -1;
-    displayObject.worldTransform.ty = this.projection.y * -2;
+        this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchStart, true );
 
-    if(position)
-    {
-        displayObject.worldTransform.tx = position.x;
-        displayObject.worldTransform.ty -= position.y;
+        this.returnTouchData( touchData );
     }
+};
 
-    for(var i=0,j=children.length; i<j; i++)
+/**
+ * Processes the result of a touch check and dispatches the event if need be
+ *
+ * @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
+ * @param hit {boolean} the result of the hit test on the display object
+ * @private
+ */
+InteractionManager.prototype.processTouchStart = function ( displayObject, hit )
+{
+    //console.log("hit" + hit)
+    if(hit)
     {
-        children[i].updateTransform();
+        displayObject._touchDown = true;
+        this.dispatchEvent( displayObject, 'touchstart', this.eventData );
     }
-
-    // update the textures!
-    PIXI.WebGLRenderer.updateTextures();
-
-    // 
-    this.renderer.renderDisplayObject(displayObject, this.projection, this.textureBuffer.frameBuffer);
-
-    displayObject.worldTransform = originalWorldTransform;
 };
 
 
 /**
- * This function will draw the display object to the texture.
+ * Is called when a touch ends on the renderer element
+ * @param event {Event} The DOM event of a touch ending on the renderer view
  *
- * @method renderCanvas
- * @param displayObject {DisplayObject} The display object to render this texture on
- * @param clear {Boolean} If true the texture will be cleared before the displayObject is drawn
- * @private
  */
-PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, clear)
+InteractionManager.prototype.onTouchEnd = function (event)
 {
-    var children = displayObject.children;
-
-    displayObject.worldTransform = PIXI.RenderTexture.tempMatrix;
-
-    if(position)
+    if (this.autoPreventDefault)
     {
-        displayObject.worldTransform.tx = position.x;
-        displayObject.worldTransform.ty = position.y;
+        event.preventDefault();
     }
 
-    for(var i = 0, j = children.length; i < j; i++)
+    var changedTouches = event.changedTouches;
+    var cLength = changedTouches.length;
+
+    for (var i=0; i < cLength; i++)
     {
-        children[i].updateTransform();
-    }
+        var touchEvent = changedTouches[i];
 
-    if(clear)this.textureBuffer.clear();
+        var touchData = this.getTouchData( touchEvent );
 
-    var context = this.textureBuffer.context;
+        touchData.originalEvent = event;
 
-    this.renderer.renderDisplayObject(displayObject, context);
+        //TODO this should be passed along.. no set
+        this.eventData.data = touchData;
+        this.eventData.stopped = false;
 
-    context.setTransform(1,0,0,1,0,0);
+
+        this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchEnd, true );
+
+        this.returnTouchData( touchData );
+    }
 };
 
-PIXI.RenderTexture.tempMatrix = new PIXI.Matrix();
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * Processes the result of the end of a touch and dispatches the event if need be
+ *
+ * @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
+ * @param hit {boolean} the result of the hit test on the display object
+ * @private
  */
+InteractionManager.prototype.processTouchEnd = function ( displayObject, hit )
+{
+    if(hit)
+    {
+        this.dispatchEvent( displayObject, 'touchend', this.eventData );
+
+        if( displayObject._touchDown )
+        {
+            displayObject._touchDown = false;
+            this.dispatchEvent( displayObject, 'tap', this.eventData );
+        }
+    }
+    else
+    {
+        if( displayObject._touchDown )
+        {
+            displayObject._touchDown = false;
+            this.dispatchEvent( displayObject, 'touchendoutside', this.eventData );
+        }
+    }
+};
 
 /**
- * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the
- * assets have been loaded they are added to the PIXI Texture cache and can be accessed
- * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()
- * When all items have been loaded this class will dispatch a 'onLoaded' event
- * As each individual item is loaded this class will dispatch a 'onProgress' event
+ * Is called when a touch is moved across the renderer element
  *
- * @class AssetLoader
- * @constructor
- * @uses EventTarget
- * @param {Array<String>} assetURLs an array of image/sprite sheet urls that you would like loaded
- *      supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported
- *      sprite sheet data formats only include 'JSON' at this time. Supported bitmap font
- *      data formats include 'xml' and 'fnt'.
- * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
+ * @param event {Event} The DOM event of a touch moving across the renderer view
+ * @private
  */
-PIXI.AssetLoader = function(assetURLs, crossorigin)
+InteractionManager.prototype.onTouchMove = function (event)
 {
-    PIXI.EventTarget.call(this);
+    if (this.autoPreventDefault)
+    {
+        event.preventDefault();
+    }
 
-    /**
-     * The array of asset URLs that are going to be loaded
-     *
-     * @property assetURLs
-     * @type Array<String>
-     */
-    this.assetURLs = assetURLs;
+    var changedTouches = event.changedTouches;
+    var cLength = changedTouches.length;
 
-    /**
-     * Whether the requests should be treated as cross origin
-     *
-     * @property crossorigin
-     * @type Boolean
-     */
-    this.crossorigin = crossorigin;
+    for (var i=0; i < cLength; i++)
+    {
+        var touchEvent = changedTouches[i];
 
-    /**
-     * Maps file extension to loader types
-     *
-     * @property loadersByType
-     * @type Object
-     */
-    this.loadersByType = {
-        'jpg':  PIXI.ImageLoader,
-        'jpeg': PIXI.ImageLoader,
-        'png':  PIXI.ImageLoader,
-        'gif':  PIXI.ImageLoader,
-        'json': PIXI.JsonLoader,
-        'atlas': PIXI.AtlasLoader,
-        'anim': PIXI.SpineLoader,
-        'xml':  PIXI.BitmapFontLoader,
-        'fnt':  PIXI.BitmapFontLoader
-    };
-};
+        var touchData = this.getTouchData( touchEvent );
 
-/**
- * Fired when an item has loaded
- * @event onProgress
- */
+        touchData.originalEvent = event;
+
+        this.eventData.data = touchData;
+        this.eventData.stopped = false;
+
+        this.processInteractive( touchData.global, this.renderer._lastObjectRendered, this.processTouchMove, false );
+
+        this.returnTouchData( touchData );
+    }
+};
 
 /**
- * Fired when all the assets have loaded
- * @event onComplete
+ * Processes the result of a touch move check and dispatches the event if need be
+ *
+ * @param displayObject {Container|Sprite|TilingSprite} The display object that was tested
+ * @param hit {boolean} the result of the hit test on the display object
+ * @private
  */
-
-// constructor
-PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader;
+InteractionManager.prototype.processTouchMove = function ( displayObject, hit )
+{
+    hit = hit;
+    this.dispatchEvent( displayObject, 'touchmove', this.eventData);
+};
 
 /**
- * Given a filename, returns its extension, wil
+ * Grabs an interaction data object from the internal pool
  *
- * @method _getDataType
- * @param str {String} the name of the asset
+ * @param touchEvent {EventData} The touch event we need to pair with an interactionData object
+ *
+ * @private
  */
-PIXI.AssetLoader.prototype._getDataType = function(str)
+InteractionManager.prototype.getTouchData = function (touchEvent)
 {
-    var test = 'data:';
-    //starts with 'data:'
-    var start = str.slice(0, test.length).toLowerCase();
-    if (start === test) {
-        var data = str.slice(test.length);
+    var touchData = this.interactiveDataPool.pop();
 
-        var sepIdx = data.indexOf(',');
-        if (sepIdx === -1) //malformed data URI scheme
-            return null;
-
-        //e.g. 'image/gif;base64' => 'image/gif'
-        var info = data.slice(0, sepIdx).split(';')[0];
+    if(!touchData)
+    {
+        touchData = new InteractionData();
+    }
 
-        //We might need to handle some special cases here...
-        //standardize text/plain to 'txt' file extension
-        if (!info || info.toLowerCase() === 'text/plain')
-            return 'txt';
+    touchData.identifier = touchEvent.identifier;
+    this.mapPositionToPoint( touchData.global, touchEvent.clientX, touchEvent.clientY );
 
-        //User specified mime type, try splitting it by '/'
-        return info.split('/').pop().toLowerCase();
+    if(navigator.isCocoonJS)
+    {
+        touchData.global.x = touchData.global.x / this.resolution;
+        touchData.global.y = touchData.global.y / this.resolution;
     }
 
-    return null;
+    touchEvent.globalX = touchData.global.x;
+    touchEvent.globalY = touchData.global.y;
+
+    return touchData;
 };
 
 /**
- * Starts loading the assets sequentially
+ * Returns an interaction data object to the internal pool
  *
- * @method load
+ * @param touchData {InteractionData} The touch data object we want to return to the pool
+ *
+ * @private
  */
-PIXI.AssetLoader.prototype.load = function()
+InteractionManager.prototype.returnTouchData = function ( touchData )
 {
-    var scope = this;
+    this.interactiveDataPool.push( touchData );
+};
 
-    function onLoad(evt) {
-        scope.onAssetLoaded(evt.loader);
-    }
+/**
+ * Destroys the interaction manager
+ */
+InteractionManager.prototype.destroy = function () {
+    this.removeEvents();
 
-    this.loadCount = this.assetURLs.length;
+    this.renderer = null;
 
-    for (var i=0; i < this.assetURLs.length; i++)
-    {
-        var fileName = this.assetURLs[i];
-        //first see if we have a data URI scheme..
-        var fileType = this._getDataType(fileName);
+    this.mouse = null;
 
-        //if not, assume it's a file URI
-        if (!fileType)
-            fileType = fileName.split('?').shift().split('.').pop().toLowerCase();
+    this.eventData = null;
 
-        var Constructor = this.loadersByType[fileType];
-        if(!Constructor)
-            throw new Error(fileType + ' is an unsupported file type');
+    this.interactiveDataPool = null;
 
-        var loader = new Constructor(fileName, this.crossorigin);
+    this.interactionDOMElement = null;
 
-        loader.addEventListener('loaded', onLoad);
-        loader.load();
-    }
+    this.onMouseUp = null;
+    this.processMouseUp = null;
+
+
+    this.onMouseDown = null;
+    this.processMouseDown = null;
+
+    this.onMouseMove = null;
+    this.processMouseMove = null;
+
+    this.onMouseOut = null;
+    this.processMouseOverOut = null;
+
+
+    this.onTouchStart = null;
+    this.processTouchStart = null;
+
+    this.onTouchEnd = null;
+    this.processTouchEnd = null;
+
+    this.onTouchMove = null;
+    this.processTouchMove = null;
+
+    this._tempPoint = null;
 };
 
+core.WebGLRenderer.registerPlugin('interaction', InteractionManager);
+core.CanvasRenderer.registerPlugin('interaction', InteractionManager);
+
+},{"../core":29,"./InteractionData":113,"./interactiveTarget":116}],115:[function(require,module,exports){
 /**
- * Invoked after each file is loaded
- *
- * @method onAssetLoaded
- * @private
+ * @file        Main export of the PIXI interactions library
+ * @author      Mat Groves <mat@goodboydigital.com>
+ * @copyright   2013-2015 GoodBoyDigital
+ * @license     {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License}
  */
-PIXI.AssetLoader.prototype.onAssetLoaded = function(loader)
-{
-    this.loadCount--;
-    this.dispatchEvent({ type: 'onProgress', content: this, loader: loader });
-    if (this.onProgress) this.onProgress(loader);
-
-    if (!this.loadCount)
-    {
-        this.dispatchEvent({type: 'onComplete', content: this});
-        if(this.onComplete) this.onComplete();
-    }
-};
 
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * @namespace PIXI.interaction
  */
+module.exports = {
+    InteractionData:    require('./InteractionData'),
+    InteractionManager: require('./InteractionManager'),
+    interactiveTarget:  require('./interactiveTarget')
+};
 
+},{"./InteractionData":113,"./InteractionManager":114,"./interactiveTarget":116}],116:[function(require,module,exports){
 /**
- * The json file loader is used to load in JSON data and parse it
- * When loaded this class will dispatch a 'loaded' event
- * If loading fails this class will dispatch an 'error' event
+ * Default property values of interactive objects
+ * used by {@link PIXI.interaction.InteractionManager}.
  *
- * @class JsonLoader
- * @uses EventTarget
- * @constructor
- * @param url {String} The url of the JSON file
- * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
+ * @mixin
+ * @memberof PIXI.interaction
+ * @example
+ *      function MyObject() {}
+ *
+ *      Object.assign(
+ *          MyObject.prototype,
+ *          PIXI.interaction.interactiveTarget)
+ *      );
  */
-PIXI.JsonLoader = function (url, crossorigin) {
-    PIXI.EventTarget.call(this);
-
+var interactiveTarget = {
     /**
-     * The url of the bitmap font data
-     *
-     * @property url
-     * @type String
+     * @todo Needs docs.
      */
-    this.url = url;
-
+    interactive: false,
     /**
-     * Whether the requests should be treated as cross origin
-     *
-     * @property crossorigin
-     * @type Boolean
+     * @todo Needs docs.
      */
-    this.crossorigin = crossorigin;
-
+    buttonMode: false,
     /**
-     * [read-only] The base url of the bitmap font data
-     *
-     * @property baseUrl
-     * @type String
-     * @readOnly
+     * @todo Needs docs.
      */
-    this.baseUrl = url.replace(/[^\/]*$/, '');
-
+    interactiveChildren: true,
     /**
-     * [read-only] Whether the data has loaded yet
-     *
-     * @property loaded
-     * @type Boolean
-     * @readOnly
+     * @todo Needs docs.
      */
-    this.loaded = false;
+    defaultCursor: 'pointer',
+
+    // some internal checks..
 
+    /**
+     * @todo Needs docs.
+     * @private
+     */
+    _over: false,
+    /**
+     * @todo Needs docs.
+     * @private
+     */
+    _touchDown: false
 };
 
-// constructor
-PIXI.JsonLoader.prototype.constructor = PIXI.JsonLoader;
+module.exports = interactiveTarget;
 
-/**
- * Loads the JSON data
- *
- * @method load
- */
-PIXI.JsonLoader.prototype.load = function () {
-    this.ajaxRequest = new PIXI.AjaxRequest(this.crossorigin);
-    var scope = this;
-    this.ajaxRequest.onreadystatechange = function () {
-        scope.onJSONLoaded();
-    };
+},{}],117:[function(require,module,exports){
+var Resource = require('resource-loader').Resource,
+    core = require('../core'),
+    utils = require('../core/utils'),
+    extras = require('../extras'),
+    path = require('path');
 
-    this.ajaxRequest.open('GET', this.url, true);
-    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json');
-    this.ajaxRequest.send(null);
-};
 
-/**
- * Invoke when JSON file is loaded
- *
- * @method onJSONLoaded
- * @private
- */
-PIXI.JsonLoader.prototype.onJSONLoaded = function () {
-    if (this.ajaxRequest.readyState === 4) {
-        if (this.ajaxRequest.status === 200 || window.location.protocol.indexOf('http') === -1) {
-            this.json = JSON.parse(this.ajaxRequest.responseText);
+function parse(resource, texture) {
+    var data = {};
+    var info = resource.data.getElementsByTagName('info')[0];
+    var common = resource.data.getElementsByTagName('common')[0];
 
-            if(this.json.frames)
-            {
-                // sprite sheet
-                var scope = this;
-                var textureUrl = this.baseUrl + this.json.meta.image;
-                var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
-                var frameData = this.json.frames;
-
-                this.texture = image.texture.baseTexture;
-                image.addEventListener('loaded', function() {
-                    scope.onLoaded();
-                });
+    data.font = info.getAttribute('face');
+    data.size = parseInt(info.getAttribute('size'), 10);
+    data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10);
+    data.chars = {};
 
-                for (var i in frameData) {
-                    var rect = frameData[i].frame;
-                    if (rect) {
-                        PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {
-                            x: rect.x,
-                            y: rect.y,
-                            width: rect.w,
-                            height: rect.h
-                        });
+    //parse letters
+    var letters = resource.data.getElementsByTagName('char');
 
-                        // check to see ifthe sprite ha been trimmed..
-                        if (frameData[i].trimmed) {
+    for (var i = 0; i < letters.length; i++)
+    {
+        var charCode = parseInt(letters[i].getAttribute('id'), 10);
+
+        var textureRect = new core.math.Rectangle(
+            parseInt(letters[i].getAttribute('x'), 10) + texture.frame.x,
+            parseInt(letters[i].getAttribute('y'), 10) + texture.frame.y,
+            parseInt(letters[i].getAttribute('width'), 10),
+            parseInt(letters[i].getAttribute('height'), 10)
+        );
+
+        data.chars[charCode] = {
+            xOffset: parseInt(letters[i].getAttribute('xoffset'), 10),
+            yOffset: parseInt(letters[i].getAttribute('yoffset'), 10),
+            xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10),
+            kerning: {},
+            texture: new core.Texture(texture.baseTexture, textureRect)
 
-                            var texture =  PIXI.TextureCache[i];
-                            
-                            var actualSize = frameData[i].sourceSize;
-                            var realSize = frameData[i].spriteSourceSize;
+        };
+    }
 
-                            texture.trim = new PIXI.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h);
-                        }
-                    }
-                }
+    //parse kernings
+    var kernings = resource.data.getElementsByTagName('kerning');
+    for (i = 0; i < kernings.length; i++)
+    {
+        var first = parseInt(kernings[i].getAttribute('first'), 10);
+        var second = parseInt(kernings[i].getAttribute('second'), 10);
+        var amount = parseInt(kernings[i].getAttribute('amount'), 10);
 
-                image.load();
+        data.chars[second].kerning[first] = amount;
+    }
 
-            }
-            else if(this.json.bones)
-            {
-                // spine animation
-                var spineJsonParser = new spine.SkeletonJson();
-                var skeletonData = spineJsonParser.readSkeletonData(this.json);
-                PIXI.AnimCache[this.url] = skeletonData;
-                this.onLoaded();
-            }
-            else
-            {
-                this.onLoaded();
-            }
+    resource.bitmapFont = data;
+
+    // I'm leaving this as a temporary fix so we can test the bitmap fonts in v3
+    // but it's very likely to change
+    extras.BitmapText.fonts[data.font] = data;
+}
+
+
+module.exports = function ()
+{
+    return function (resource, next)
+    {
+        // skip if no data or not xml data
+        if (!resource.data || !resource.isXml)
+        {
+            return next();
         }
-        else
+
+        // skip if not bitmap font data, using some silly duck-typing
+        if (
+            resource.data.getElementsByTagName('page').length === 0 ||
+            resource.data.getElementsByTagName('info').length === 0 ||
+            resource.data.getElementsByTagName('info')[0].getAttribute('face') === null
+            )
         {
-            this.onError();
+            return next();
         }
-    }
+
+        var xmlUrl = path.dirname(resource.url);
+
+        if (xmlUrl === '.') {
+            xmlUrl = '';
+        }
+
+        if (this.baseUrl && xmlUrl) {
+            // if baseurl has a trailing slash then add one to xmlUrl so the replace works below
+            if (this.baseUrl.charAt(this.baseUrl.length - 1) === '/') {
+                xmlUrl += '/';
+            }
+
+            // remove baseUrl from xmlUrl
+            xmlUrl = xmlUrl.replace(this.baseUrl, '');
+        }
+
+        // if there is an xmlUrl now, it needs a trailing slash. Ensure that it does if the string isn't empty.
+        if (xmlUrl && xmlUrl.charAt(xmlUrl.length - 1) !== '/') {
+            xmlUrl += '/';
+        }
+        var textureUrl = xmlUrl + resource.data.getElementsByTagName('page')[0].getAttribute('file');
+        if (utils.TextureCache[textureUrl]) {
+            //reuse existing texture
+            parse(resource, utils.TextureCache[textureUrl]);
+            next();
+        }
+        else {
+            var loadOptions = {
+                crossOrigin: resource.crossOrigin,
+                loadType: Resource.LOAD_TYPE.IMAGE
+            };
+            // load the texture for the font
+            this.add(resource.name + '_image', textureUrl, loadOptions, function (res) {
+                parse(resource, res.texture);
+                next();
+            });
+        }
+    };
 };
 
+},{"../core":29,"../core/utils":74,"../extras":83,"path":3,"resource-loader":18}],118:[function(require,module,exports){
 /**
- * Invoke when json file loaded
- *
- * @method onLoaded
- * @private
+ * @file        Main export of the PIXI loaders library
+ * @author      Mat Groves <mat@goodboydigital.com>
+ * @copyright   2013-2015 GoodBoyDigital
+ * @license     {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License}
  */
-PIXI.JsonLoader.prototype.onLoaded = function () {
-    this.loaded = true;
-    this.dispatchEvent({
-        type: 'loaded',
-        content: this
-    });
-};
 
 /**
- * Invoke when error occured
- *
- * @method onError
- * @private
+ * @namespace PIXI.loaders
  */
-PIXI.JsonLoader.prototype.onError = function () {
-    this.dispatchEvent({
-        type: 'error',
-        content: this
-    });
+module.exports = {
+    Loader:             require('./loader'),
+
+    // parsers
+    bitmapFontParser:   require('./bitmapFontParser'),
+    spritesheetParser:  require('./spritesheetParser'),
+    textureParser:      require('./textureParser'),
+    Resource:           require('resource-loader').Resource
 };
-/**
- * @author Martin Kelm http://mkelm.github.com
- */
+
+},{"./bitmapFontParser":117,"./loader":119,"./spritesheetParser":120,"./textureParser":121,"resource-loader":18}],119:[function(require,module,exports){
+var ResourceLoader = require('resource-loader'),
+    textureParser = require('./textureParser'),
+    spritesheetParser = require('./spritesheetParser'),
+    bitmapFontParser = require('./bitmapFontParser');
 
 /**
- * The atlas file loader is used to load in Atlas data and parse it
- * When loaded this class will dispatch a 'loaded' event
- * If loading fails this class will dispatch an 'error' event
- * @class AtlasLoader
- * @extends EventTarget
- * @constructor
- * @param {String} url the url of the JSON file
- * @param {Boolean} crossorigin
+ *
+ * The new loader, extends Resource Loader by Chad Engler : https://github.com/englercj/resource-loader
+ *
+ * ```js
+ * var loader = PIXI.loader; // pixi exposes a premade instance for you to use.
+ * //or
+ * var loader = new PIXI.loaders.Loader(); // you can also create your own if you want
+ *
+ * loader.add('bunny',"data/bunny.png");
+ *
+ * loader.once('complete',onAssetsLoaded);
+ *
+ * loader.load();
+ * ```
+ *
+ * @class
+ * @extends PIXI.ResourceLoader
+ * @memberof PIXI.loaders
+ * @param [baseUrl=''] {string} The base url for all resources loaded by this loader.
+ * @param [concurrency=10] {number} The number of resources to load concurrently.
  */
+function Loader(baseUrl, concurrency)
+{
+    ResourceLoader.call(this, baseUrl, concurrency);
 
-PIXI.AtlasLoader = function (url, crossorigin) {
-    PIXI.EventTarget.call(this);
-    this.url = url;
-    this.baseUrl = url.replace(/[^\/]*$/, '');
-    this.crossorigin = crossorigin;
-    this.loaded = false;
+    for (var i = 0; i < Loader._pixiMiddleware.length; ++i) {
+        this.use(Loader._pixiMiddleware[i]());
+    }
+}
+
+Loader.prototype = Object.create(ResourceLoader.prototype);
+Loader.prototype.constructor = Loader;
+
+module.exports = Loader;
+
+Loader._pixiMiddleware = [
+    // parse any blob into more usable objects (e.g. Image)
+    ResourceLoader.middleware.parsing.blob,
+    // parse any Image objects into textures
+    textureParser,
+    // parse any spritesheet data into multiple textures
+    spritesheetParser,
+    // parse any spritesheet data into multiple textures
+    bitmapFontParser
+];
 
+Loader.addPixiMiddleware = function (fn) {
+    Loader._pixiMiddleware.push(fn);
 };
 
-// constructor
-PIXI.AtlasLoader.constructor = PIXI.AtlasLoader;
+// Add custom extentions
+var Resource = ResourceLoader.Resource;
 
+Resource.setExtensionXhrType('fnt', Resource.XHR_RESPONSE_TYPE.DOCUMENT);
 
- /**
- * Starts loading the JSON file
- *
- * @method load
- */
-PIXI.AtlasLoader.prototype.load = function () {
-    this.ajaxRequest = new PIXI.AjaxRequest();
-    this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this);
+},{"./bitmapFontParser":117,"./spritesheetParser":120,"./textureParser":121,"resource-loader":18}],120:[function(require,module,exports){
+var Resource = require('resource-loader').Resource,
+    path = require('path'),
+    core = require('../core');
 
-    this.ajaxRequest.open('GET', this.url, true);
-    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json');
-    this.ajaxRequest.send(null);
-};
+module.exports = function ()
+{
+    return function (resource, next)
+    {
+        // skip if no data, its not json, or it isn't spritesheet data
+        if (!resource.data || !resource.isJson || !resource.data.frames)
+        {
+            return next();
+        }
 
-/**
- * Invoke when JSON file is loaded
- * @method onAtlasLoaded
- * @private
- */
-PIXI.AtlasLoader.prototype.onAtlasLoaded = function () {
-    if (this.ajaxRequest.readyState === 4) {
-        if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) {
-            this.atlas = {
-                meta : {
-                    image : []
-                },
-                frames : []
-            };
-            var result = this.ajaxRequest.responseText.split(/\r?\n/);
-            var lineCount = -3;
-
-            var currentImageId = 0;
-            var currentFrame = null;
-            var nameInNextLine = false;
-
-            var i = 0,
-                j = 0,
-                selfOnLoaded = this.onLoaded.bind(this);
-
-            // parser without rotation support yet!
-            for (i = 0; i < result.length; i++) {
-                result[i] = result[i].replace(/^\s+|\s+$/g, '');
-                if (result[i] === '') {
-                    nameInNextLine = i+1;
-                }
-                if (result[i].length > 0) {
-                    if (nameInNextLine === i) {
-                        this.atlas.meta.image.push(result[i]);
-                        currentImageId = this.atlas.meta.image.length - 1;
-                        this.atlas.frames.push({});
-                        lineCount = -3;
-                    } else if (lineCount > 0) {
-                        if (lineCount % 7 === 1) { // frame name
-                            if (currentFrame != null) { //jshint ignore:line
-                                this.atlas.frames[currentImageId][currentFrame.name] = currentFrame;
-                            }
-                            currentFrame = { name: result[i], frame : {} };
-                        } else {
-                            var text = result[i].split(' ');
-                            if (lineCount % 7 === 3) { // position
-                                currentFrame.frame.x = Number(text[1].replace(',', ''));
-                                currentFrame.frame.y = Number(text[2]);
-                            } else if (lineCount % 7 === 4) { // size
-                                currentFrame.frame.w = Number(text[1].replace(',', ''));
-                                currentFrame.frame.h = Number(text[2]);
-                            } else if (lineCount % 7 === 5) { // real size
-                                var realSize = {
-                                    x : 0,
-                                    y : 0,
-                                    w : Number(text[1].replace(',', '')),
-                                    h : Number(text[2])
-                                };
-
-                                if (realSize.w > currentFrame.frame.w || realSize.h > currentFrame.frame.h) {
-                                    currentFrame.trimmed = true;
-                                    currentFrame.realSize = realSize;
-                                } else {
-                                    currentFrame.trimmed = false;
-                                }
-                            }
-                        }
+        var loadOptions = {
+            crossOrigin: resource.crossOrigin,
+            loadType: Resource.LOAD_TYPE.IMAGE
+        };
+
+        var route = path.dirname(resource.url.replace(this.baseUrl, ''));
+
+        var resolution = core.utils.getResolutionOfUrl( resource.url );
+
+        // load the image for this sheet
+        this.add(resource.name + '_image', route + '/' + resource.data.meta.image, loadOptions, function (res)
+        {
+            resource.textures = {};
+
+            var frames = resource.data.frames;
+
+            for (var i in frames)
+            {
+                var rect = frames[i].frame;
+
+                if (rect)
+                {
+                    var size = null;
+                    var trim = null;
+
+                    if (frames[i].rotated) {
+                        size = new core.math.Rectangle(rect.x, rect.y, rect.h, rect.w);
+                    }
+                    else {
+                        size = new core.math.Rectangle(rect.x, rect.y, rect.w, rect.h);
                     }
-                    lineCount++;
-                }
-            }
 
-            if (currentFrame != null) { //jshint ignore:line
-                this.atlas.frames[currentImageId][currentFrame.name] = currentFrame;
-            }
-
-            if (this.atlas.meta.image.length > 0) {
-                this.images = [];
-                for (j = 0; j < this.atlas.meta.image.length; j++) {
-                    // sprite sheet
-                    var textureUrl = this.baseUrl + this.atlas.meta.image[j];
-                    var frameData = this.atlas.frames[j];
-                    this.images.push(new PIXI.ImageLoader(textureUrl, this.crossorigin));
-
-                    for (i in frameData) {
-                        var rect = frameData[i].frame;
-                        if (rect) {
-                            PIXI.TextureCache[i] = new PIXI.Texture(this.images[j].texture.baseTexture, {
-                                x: rect.x,
-                                y: rect.y,
-                                width: rect.w,
-                                height: rect.h
-                            });
-                            if (frameData[i].trimmed) {
-                                PIXI.TextureCache[i].realSize = frameData[i].realSize;
-                                // trim in pixi not supported yet, todo update trim properties if it is done ...
-                                PIXI.TextureCache[i].trim.x = 0;
-                                PIXI.TextureCache[i].trim.y = 0;
-                            }
-                        }
+                    //  Check to see if the sprite is trimmed
+                    if (frames[i].trimmed)
+                    {
+                        trim = new core.math.Rectangle(
+                            frames[i].spriteSourceSize.x / resolution,
+                            frames[i].spriteSourceSize.y / resolution,
+                            frames[i].sourceSize.w / resolution,
+                            frames[i].sourceSize.h / resolution
+                         );
                     }
-                }
 
-                this.currentImageId = 0;
-                for (j = 0; j < this.images.length; j++) {
-                    this.images[j].addEventListener('loaded', selfOnLoaded);
-                }
-                this.images[this.currentImageId].load();
+                    // flip the width and height!
+                    if (frames[i].rotated)
+                    {
+                        var temp = size.width;
+                        size.width = size.height;
+                        size.height = temp;
+                    }
 
-            } else {
-                this.onLoaded();
-            }
+                    size.x /= resolution;
+                    size.y /= resolution;
+                    size.width /= resolution;
+                    size.height /= resolution;
 
-        } else {
-            this.onError();
-        }
-    }
-};
+                    resource.textures[i] = new core.Texture(res.texture.baseTexture, size, size.clone(), trim, frames[i].rotated);
 
-/**
- * Invoke when json file has loaded
- * @method onLoaded
- * @private
- */
-PIXI.AtlasLoader.prototype.onLoaded = function () {
-    if (this.images.length - 1 > this.currentImageId) {
-        this.currentImageId++;
-        this.images[this.currentImageId].load();
-    } else {
-        this.loaded = true;
-        this.dispatchEvent({
-            type: 'loaded',
-            content: this
+                    // lets also add the frame to pixi's global cache for fromFrame and fromImage functions
+                    core.utils.TextureCache[i] = resource.textures[i];
+                }
+            }
+
+            next();
         });
-    }
+    };
 };
 
-/**
- * Invoke when error occured
- * @method onError
- * @private
- */
-PIXI.AtlasLoader.prototype.onError = function () {
-    this.dispatchEvent({
-        type: 'error',
-        content: this
-    });
+},{"../core":29,"path":3,"resource-loader":18}],121:[function(require,module,exports){
+var core = require('../core');
+
+module.exports = function ()
+{
+    return function (resource, next)
+    {
+        // create a new texture if the data is an Image object
+        if (resource.data && resource.isImage)
+        {
+            resource.texture = new core.Texture(new core.BaseTexture(resource.data, null, core.utils.getResolutionOfUrl(resource.url)));
+            // lets also add the frame to pixi's global cache for fromFrame and fromImage fucntions
+            core.utils.TextureCache[resource.url] = resource.texture;
+        }
+
+        next();
+    };
 };
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+},{"../core":29}],122:[function(require,module,exports){
+var core = require('../core');
 
 /**
- * The sprite sheet loader is used to load in JSON sprite sheet data
- * To generate the data you can use http://www.codeandweb.com/texturepacker and publish in the 'JSON' format
- * There is a free version so thats nice, although the paid version is great value for money.
- * It is highly recommended to use Sprite sheets (also know as a 'texture atlas') as it means sprites can be batched and drawn together for highly increased rendering speed.
- * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFrameId()
- * This loader will load the image file that the Spritesheet points to as well as the data.
- * When loaded this class will dispatch a 'loaded' event
- *
- * @class SpriteSheetLoader
- * @uses EventTarget
- * @constructor
- * @param url {String} The url of the sprite sheet JSON file
- * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
+ * Base mesh class
+ * @class
+ * @extends PIXI.Container
+ * @memberof PIXI.mesh
+ * @param texture {Texture} The texture to use
+ * @param [vertices] {Float32Arrif you want to specify the vertices
+ * @param [uvs] {Float32Array} if you want to specify the uvs
+ * @param [indices] {Uint16Array} if you want to specify the indices
+ * @param [drawMode] {number} the drawMode, can be any of the Mesh.DRAW_MODES consts
  */
-PIXI.SpriteSheetLoader = function (url, crossorigin) {
-    /*
-     * i use texture packer to load the assets..
-     * http://www.codeandweb.com/texturepacker
-     * make sure to set the format as 'JSON'
+function Mesh(texture, vertices, uvs, indices, drawMode)
+{
+    core.Container.call(this);
+
+    /**
+     * The texture of the Mesh
+     *
+     * @member {Texture}
      */
-    PIXI.EventTarget.call(this);
+    this.texture = texture;
 
     /**
-     * The url of the bitmap font data
+     * The Uvs of the Mesh
      *
-     * @property url
-     * @type String
+     * @member {Float32Array}
      */
-    this.url = url;
+    this.uvs = uvs || new Float32Array([0, 1,
+                                 1, 1,
+                                 1, 0,
+                                 0, 1]);
 
     /**
-     * Whether the requests should be treated as cross origin
+     * An array of vertices
      *
-     * @property crossorigin
-     * @type Boolean
+     * @member {Float32Array}
+     */
+    this.vertices = vertices || new Float32Array([0, 0,
+                                      100, 0,
+                                      100, 100,
+                                      0, 100]);
+
+    /*
+     * @member {Uint16Array} An array containing the indices of the vertices
      */
-    this.crossorigin = crossorigin;
+    //  TODO auto generate this based on draw mode!
+    this.indices = indices || new Uint16Array([0, 1, 2, 3]);
 
     /**
-     * [read-only] The base url of the bitmap font data
+     * Whether the Mesh is dirty or not
      *
-     * @property baseUrl
-     * @type String
-     * @readOnly
+     * @member {boolean}
      */
-    this.baseUrl = url.replace(/[^\/]*$/, '');
+    this.dirty = true;
 
     /**
-     * The texture being loaded
+     * The blend mode to be applied to the sprite. Set to blendModes.NORMAL to remove any blend mode.
      *
-     * @property texture
-     * @type Texture
+     * @member {number}
+     * @default CONST.BLEND_MODES.NORMAL;
      */
-    this.texture = null;
+    this.blendMode = core.BLEND_MODES.NORMAL;
 
     /**
-     * The frames of the sprite sheet
+     * Triangles in canvas mode are automatically antialiased, use this value to force triangles to overlap a bit with each other.
      *
-     * @property frames
-     * @type Object
+     * @member {number}
+     */
+    this.canvasPadding = 0;
+
+    /**
+     * The way the Mesh should be drawn, can be any of the Mesh.DRAW_MODES consts
+     *
+     * @member {number}
      */
-    this.frames = {};
+    this.drawMode = drawMode || Mesh.DRAW_MODES.TRIANGLE_MESH;
+}
+
+// constructor
+Mesh.prototype = Object.create(core.Container.prototype);
+Mesh.prototype.constructor = Mesh;
+module.exports = Mesh;
+
+/**
+ * Renders the object using the WebGL renderer
+ *
+ * @param renderer {WebGLRenderer} a reference to the WebGL renderer
+ * @private
+ */
+Mesh.prototype._renderWebGL = function (renderer)
+{
+    renderer.setObjectRenderer(renderer.plugins.mesh);
+    renderer.plugins.mesh.render(this);
+};
+
+/**
+ * Renders the object using the Canvas renderer
+ *
+ * @param renderer {CanvasRenderer}
+ * @private
+ */
+Mesh.prototype._renderCanvas = function (renderer)
+{
+    var context = renderer.context;
+
+    var transform = this.worldTransform;
+
+    if (renderer.roundPixels)
+    {
+        context.setTransform(transform.a, transform.b, transform.c, transform.d, transform.tx | 0, transform.ty | 0);
+    }
+    else
+    {
+        context.setTransform(transform.a, transform.b, transform.c, transform.d, transform.tx, transform.ty);
+    }
+
+    if (this.drawMode === Mesh.DRAW_MODES.TRIANGLE_MESH)
+    {
+        this._renderCanvasTriangleMesh(context);
+    }
+    else
+    {
+        this._renderCanvasTriangles(context);
+    }
 };
 
-// constructor
-PIXI.SpriteSheetLoader.prototype.constructor = PIXI.SpriteSheetLoader;
-
 /**
- * This will begin loading the JSON file
+ * Draws the object in Triangle Mesh mode using canvas
  *
- * @method load
+ * @param context {CanvasRenderingContext2D} the current drawing context
+ * @private
  */
-PIXI.SpriteSheetLoader.prototype.load = function () {
-    var scope = this;
-    var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin);
-    jsonLoader.addEventListener('loaded', function (event) {
-        scope.json = event.content.json;
-        scope.onLoaded();
-    });
-    jsonLoader.load();
+Mesh.prototype._renderCanvasTriangleMesh = function (context)
+{
+    // draw triangles!!
+    var vertices = this.vertices;
+    var uvs = this.uvs;
+
+    var length = vertices.length / 2;
+    // this.count++;
+
+    for (var i = 0; i < length - 2; i++)
+    {
+        // draw some triangles!
+        var index = i * 2;
+        this._renderCanvasDrawTriangle(context, vertices, uvs, index, (index + 2), (index + 4));
+    }
 };
 
 /**
- * Invoke when all files are loaded (json and texture)
+ * Draws the object in triangle mode using canvas
  *
- * @method onLoaded
+ * @param context {CanvasRenderingContext2D} the current drawing context
  * @private
  */
-PIXI.SpriteSheetLoader.prototype.onLoaded = function () {
-    this.dispatchEvent({
-        type: 'loaded',
-        content: this
-    });
-};
+Mesh.prototype._renderCanvasTriangles = function (context)
+{
+    // draw triangles!!
+    var vertices = this.vertices;
+    var uvs = this.uvs;
+    var indices = this.indices;
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+    var length = indices.length;
+    // this.count++;
+
+    for (var i = 0; i < length; i += 3)
+    {
+        // draw some triangles!
+        var index0 = indices[i] * 2, index1 = indices[i + 1] * 2, index2 = indices[i + 2] * 2;
+        this._renderCanvasDrawTriangle(context, vertices, uvs, index0, index1, index2);
+    }
+};
 
 /**
- * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif')
- * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFrameId()
- * When loaded this class will dispatch a 'loaded' event
+ * Draws one of the triangles that form this Mesh
  *
- * @class ImageLoader
- * @uses EventTarget
- * @constructor
- * @param url {String} The url of the image
- * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
+ * @param context {CanvasRenderingContext2D} the current drawing context
+ * @param vertices {Float32Array} a reference to the vertices of the Mesh
+ * @param uvs {Float32Array} a reference to the uvs of the Mesh
+ * @param index0 {number} the index of the first vertex
+ * @param index1 {number} the index of the second vertex
+ * @param index2 {number} the index of the third vertex
+ * @private
  */
-PIXI.ImageLoader = function(url, crossorigin)
+Mesh.prototype._renderCanvasDrawTriangle = function (context, vertices, uvs, index0, index1, index2)
 {
-    PIXI.EventTarget.call(this);
+    var textureSource = this.texture.baseTexture.source;
+    var textureWidth = this.texture.baseTexture.width;
+    var textureHeight = this.texture.baseTexture.height;
 
-    /**
-     * The texture being loaded
-     *
-     * @property texture
-     * @type Texture
-     */
-    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+    var x0 = vertices[index0], x1 = vertices[index1], x2 = vertices[index2];
+    var y0 = vertices[index0 + 1], y1 = vertices[index1 + 1], y2 = vertices[index2 + 1];
 
-    /**
-     * if the image is loaded with loadFramedSpriteSheet
-     * frames will contain the sprite sheet frames
-     *
-     */
-    this.frames = [];
+    var u0 = uvs[index0] * textureWidth, u1 = uvs[index1] * textureWidth, u2 = uvs[index2] * textureWidth;
+    var v0 = uvs[index0 + 1] * textureHeight, v1 = uvs[index1 + 1] * textureHeight, v2 = uvs[index2 + 1] * textureHeight;
+
+    if (this.canvasPadding > 0)
+    {
+        var paddingX = this.canvasPadding / this.worldTransform.a;
+        var paddingY = this.canvasPadding / this.worldTransform.d;
+        var centerX = (x0 + x1 + x2) / 3;
+        var centerY = (y0 + y1 + y2) / 3;
+
+        var normX = x0 - centerX;
+        var normY = y0 - centerY;
+
+        var dist = Math.sqrt(normX * normX + normY * normY);
+        x0 = centerX + (normX / dist) * (dist + paddingX);
+        y0 = centerY + (normY / dist) * (dist + paddingY);
+
+        //
+
+        normX = x1 - centerX;
+        normY = y1 - centerY;
+
+        dist = Math.sqrt(normX * normX + normY * normY);
+        x1 = centerX + (normX / dist) * (dist + paddingX);
+        y1 = centerY + (normY / dist) * (dist + paddingY);
+
+        normX = x2 - centerX;
+        normY = y2 - centerY;
+
+        dist = Math.sqrt(normX * normX + normY * normY);
+        x2 = centerX + (normX / dist) * (dist + paddingX);
+        y2 = centerY + (normY / dist) * (dist + paddingY);
+    }
+
+    context.save();
+    context.beginPath();
+
+
+    context.moveTo(x0, y0);
+    context.lineTo(x1, y1);
+    context.lineTo(x2, y2);
+
+    context.closePath();
+
+    context.clip();
+
+    // Compute matrix transform
+    var delta =  (u0 * v1)      + (v0 * u2)      + (u1 * v2)      - (v1 * u2)      - (v0 * u1)      - (u0 * v2);
+    var deltaA = (x0 * v1)      + (v0 * x2)      + (x1 * v2)      - (v1 * x2)      - (v0 * x1)      - (x0 * v2);
+    var deltaB = (u0 * x1)      + (x0 * u2)      + (u1 * x2)      - (x1 * u2)      - (x0 * u1)      - (u0 * x2);
+    var deltaC = (u0 * v1 * x2) + (v0 * x1 * u2) + (x0 * u1 * v2) - (x0 * v1 * u2) - (v0 * u1 * x2) - (u0 * x1 * v2);
+    var deltaD = (y0 * v1)      + (v0 * y2)      + (y1 * v2)      - (v1 * y2)      - (v0 * y1)      - (y0 * v2);
+    var deltaE = (u0 * y1)      + (y0 * u2)      + (u1 * y2)      - (y1 * u2)      - (y0 * u1)      - (u0 * y2);
+    var deltaF = (u0 * v1 * y2) + (v0 * y1 * u2) + (y0 * u1 * v2) - (y0 * v1 * u2) - (v0 * u1 * y2) - (u0 * y1 * v2);
+
+    context.transform(deltaA / delta, deltaD / delta,
+        deltaB / delta, deltaE / delta,
+        deltaC / delta, deltaF / delta);
+
+    context.drawImage(textureSource, 0, 0);
+    context.restore();
 };
 
-// constructor
-PIXI.ImageLoader.prototype.constructor = PIXI.ImageLoader;
+
 
 /**
- * Loads image or takes it from cache
+ * Renders a flat Mesh
  *
- * @method load
+ * @param Mesh {Mesh} The Mesh to render
+ * @private
  */
-PIXI.ImageLoader.prototype.load = function()
+Mesh.prototype.renderMeshFlat = function (Mesh)
 {
-    if(!this.texture.baseTexture.hasLoaded)
-    {
-        var scope = this;
-        this.texture.baseTexture.addEventListener('loaded', function()
-        {
-            scope.onLoaded();
-        });
-    }
-    else
+    var context = this.context;
+    var vertices = Mesh.vertices;
+
+    var length = vertices.length/2;
+    // this.count++;
+
+    context.beginPath();
+    for (var i=1; i < length-2; i++)
     {
-        this.onLoaded();
+        // draw some triangles!
+        var index = i*2;
+
+        var x0 = vertices[index],   x1 = vertices[index+2], x2 = vertices[index+4];
+        var y0 = vertices[index+1], y1 = vertices[index+3], y2 = vertices[index+5];
+
+        context.moveTo(x0, y0);
+        context.lineTo(x1, y1);
+        context.lineTo(x2, y2);
     }
+
+    context.fillStyle = '#FF0000';
+    context.fill();
+    context.closePath();
+};
+
+/*
+Mesh.prototype.setTexture = function (texture)
+{
+    //TODO SET THE TEXTURES
+    //TODO VISIBILITY
+    //TODO SETTER
+
+    // stop current texture
+    this.texture = texture;
+    this.width   = texture.frame.width;
+    this.height  = texture.frame.height;
+    this.updateFrame = true;
 };
+ */
 
 /**
- * Invoked when image file is loaded or it is already cached and ready to use
+ * When the texture is updated, this event will fire to update the scale and frame
  *
- * @method onLoaded
+ * @param event
  * @private
  */
-PIXI.ImageLoader.prototype.onLoaded = function()
+
+Mesh.prototype.onTextureUpdate = function ()
 {
-    this.dispatchEvent({type: 'loaded', content: this});
+    this.updateFrame = true;
 };
 
 /**
- * Loads image and split it to uniform sized frames
- *
+ * Returns the bounds of the mesh as a rectangle. The bounds calculation takes the worldTransform into account.
  *
- * @method loadFramedSpriteSheet
- * @param frameWidth {Number} width of each frame
- * @param frameHeight {Number} height of each frame
- * @param textureName {String} if given, the frames will be cached in <textureName>-<ord> format
+ * @param matrix {Matrix} the transformation matrix of the sprite
+ * @return {Rectangle} the framing rectangle
  */
-PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName)
+Mesh.prototype.getBounds = function (matrix)
 {
-    this.frames = [];
-    var cols = Math.floor(this.texture.width / frameWidth);
-    var rows = Math.floor(this.texture.height / frameHeight);
+    var worldTransform = matrix || this.worldTransform;
 
-    var i=0;
-    for (var y=0; y<rows; y++)
-    {
-        for (var x=0; x<cols; x++,i++)
-        {
-            var texture = new PIXI.Texture(this.texture, {
-                x: x*frameWidth,
-                y: y*frameHeight,
-                width: frameWidth,
-                height: frameHeight
-            });
+    var a = worldTransform.a;
+    var b = worldTransform.b;
+    var c = worldTransform.c;
+    var d = worldTransform.d;
+    var tx = worldTransform.tx;
+    var ty = worldTransform.ty;
 
-            this.frames.push(texture);
-            if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture;
-        }
-    }
+    var maxX = -Infinity;
+    var maxY = -Infinity;
 
-    if(!this.texture.baseTexture.hasLoaded)
+    var minX = Infinity;
+    var minY = Infinity;
+
+    var vertices = this.vertices;
+    for (var i = 0, n = vertices.length; i < n; i += 2)
     {
-        var scope = this;
-        this.texture.baseTexture.addEventListener('loaded', function() {
-            scope.onLoaded();
-        });
+        var rawX = vertices[i], rawY = vertices[i + 1];
+        var x = (a * rawX) + (c * rawY) + tx;
+        var y = (d * rawY) + (b * rawX) + ty;
+
+        minX = x < minX ? x : minX;
+        minY = y < minY ? y : minY;
+
+        maxX = x > maxX ? x : maxX;
+        maxY = y > maxY ? y : maxY;
     }
-    else
+
+    if (minX === -Infinity || maxY === Infinity)
     {
-        this.onLoaded();
+        return core.math.Rectangle.EMPTY;
     }
+
+    var bounds = this._bounds;
+
+    bounds.x = minX;
+    bounds.width = maxX - minX;
+
+    bounds.y = minY;
+    bounds.height = maxY - minY;
+
+    // store a reference so that if this function gets called again in the render cycle we do not have to recalculate
+    this._currentBounds = bounds;
+
+    return bounds;
 };
 
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * Different drawing buffer modes supported
+ *
+ * @static
+ * @constant
+ * @property {object} DRAW_MODES
+ * @property {number} DRAW_MODES.TRIANGLE_MESH
+ * @property {number} DRAW_MODES.TRIANGLES
  */
+Mesh.DRAW_MODES = {
+    TRIANGLE_MESH: 0,
+    TRIANGLES: 1
+};
+
+},{"../core":29}],123:[function(require,module,exports){
+var Mesh = require('./Mesh');
+var core = require('../core');
 
 /**
- * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt')
- * To generate the data you can use http://www.angelcode.com/products/bmfont/
- * This loader will also load the image file as the data.
- * When loaded this class will dispatch a 'loaded' event
+ * The rope allows you to draw a texture across several points and them manipulate these points
+ *
+ *```js
+ * for (var i = 0; i < 20; i++) {
+ *     points.push(new PIXI.Point(i * 50, 0));
+ * };
+ * var rope = new PIXI.Rope(PIXI.Texture.fromImage("snake.png"), points);
+ *  ```
+ *
+ * @class
+ * @extends PIXI.Mesh
+ * @memberof PIXI.mesh
+ * @param {Texture} texture - The texture to use on the rope.
+ * @param {Array} points - An array of {Point} objects to construct this rope.
  *
- * @class BitmapFontLoader
- * @uses EventTarget
- * @constructor
- * @param url {String} The url of the sprite sheet JSON file
- * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
  */
-PIXI.BitmapFontLoader = function(url, crossorigin)
+function Rope(texture, points)
 {
+    Mesh.call(this, texture);
+
     /*
-     * I use texture packer to load the assets..
-     * http://www.codeandweb.com/texturepacker
-     * make sure to set the format as 'JSON'
+     * @member {Array} An array of points that determine the rope
      */
-    PIXI.EventTarget.call(this);
+    this.points = points;
 
-    /**
-     * The url of the bitmap font data
-     *
-     * @property url
-     * @type String
+    /*
+     * @member {Float32Array} An array of vertices used to construct this rope.
      */
-    this.url = url;
+    this.vertices = new Float32Array(points.length * 4);
 
-    /**
-     * Whether the requests should be treated as cross origin
-     *
-     * @property crossorigin
-     * @type Boolean
+    /*
+     * @member {Float32Array} The WebGL Uvs of the rope.
      */
-    this.crossorigin = crossorigin;
+    this.uvs = new Float32Array(points.length * 4);
 
-    /**
-     * [read-only] The base url of the bitmap font data
-     *
-     * @property baseUrl
-     * @type String
-     * @readOnly
+    /*
+     * @member {Float32Array} An array containing the color components
      */
-    this.baseUrl = url.replace(/[^\/]*$/, '');
+    this.colors = new Float32Array(points.length * 2);
 
-    /**
-     * [read-only] The texture of the bitmap font
-     *
-     * @property baseUrl
-     * @type String
+    /*
+     * @member {Uint16Array} An array containing the indices of the vertices
      */
-    this.texture = null;
-};
+    this.indices = new Uint16Array(points.length * 2);
 
-// constructor
-PIXI.BitmapFontLoader.prototype.constructor = PIXI.BitmapFontLoader;
+    /*
+     * @member {TextureUvs} Current texture uvs
+     * @private
+     */
+    this._textureUvs = null;
 
-/**
- * Loads the XML font data
- *
- * @method load
- */
-PIXI.BitmapFontLoader.prototype.load = function()
-{
-    this.ajaxRequest = new PIXI.AjaxRequest();
-    var scope = this;
-    this.ajaxRequest.onreadystatechange = function()
-    {
-        scope.onXMLLoaded();
-    };
+    this.refresh();
+}
 
-    this.ajaxRequest.open('GET', this.url, true);
-    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml');
-    this.ajaxRequest.send(null);
-};
+
+// constructor
+Rope.prototype = Object.create(Mesh.prototype);
+Rope.prototype.constructor = Rope;
+module.exports = Rope;
 
 /**
- * Invoked when the XML file is loaded, parses the data
+ * Refreshes
  *
- * @method onXMLLoaded
- * @private
  */
-PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+Rope.prototype.refresh = function ()
 {
-    if (this.ajaxRequest.readyState === 4)
+    var points = this.points;
+
+    if (points.length < 1)
     {
-        if (this.ajaxRequest.status === 200 || window.location.protocol.indexOf('http') === -1)
-        {
-            var responseXML = this.ajaxRequest.responseXML;
-            if(!responseXML || /MSIE 9/i.test(navigator.userAgent) || navigator.isCocoonJS) {
-                if(typeof(window.DOMParser) === 'function') {
-                    var domparser = new DOMParser();
-                    responseXML = domparser.parseFromString(this.ajaxRequest.responseText, 'text/xml');
-                } else {
-                    var div = document.createElement('div');
-                    div.innerHTML = this.ajaxRequest.responseText;
-                    responseXML = div;
-                }
-            }
+        return;
+    }
 
-            var textureUrl = this.baseUrl + responseXML.getElementsByTagName('page')[0].getAttribute('file');
-            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
-            this.texture = image.texture.baseTexture;
+    var uvs = this.uvs;
 
-            var data = {};
-            var info = responseXML.getElementsByTagName('info')[0];
-            var common = responseXML.getElementsByTagName('common')[0];
-            data.font = info.getAttribute('face');
-            data.size = parseInt(info.getAttribute('size'), 10);
-            data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10);
-            data.chars = {};
+    var indices = this.indices;
+    var colors = this.colors;
 
-            //parse letters
-            var letters = responseXML.getElementsByTagName('char');
+    var textureUvs = this._getTextureUvs();
+    var offset = new core.math.Point(textureUvs.x0, textureUvs.y0);
+    var factor = new core.math.Point(textureUvs.x2 - textureUvs.x0, textureUvs.y2 - textureUvs.y0);
 
-            for (var i = 0; i < letters.length; i++)
-            {
-                var charCode = parseInt(letters[i].getAttribute('id'), 10);
+    uvs[0] = 0 + offset.x;
+    uvs[1] = 0 + offset.y;
+    uvs[2] = 0 + offset.x;
+    uvs[3] = 1 * factor.y + offset.y;
 
-                var textureRect = new PIXI.Rectangle(
-                    parseInt(letters[i].getAttribute('x'), 10),
-                    parseInt(letters[i].getAttribute('y'), 10),
-                    parseInt(letters[i].getAttribute('width'), 10),
-                    parseInt(letters[i].getAttribute('height'), 10)
-                );
+    colors[0] = 1;
+    colors[1] = 1;
 
-                data.chars[charCode] = {
-                    xOffset: parseInt(letters[i].getAttribute('xoffset'), 10),
-                    yOffset: parseInt(letters[i].getAttribute('yoffset'), 10),
-                    xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10),
-                    kerning: {},
-                    texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect)
+    indices[0] = 0;
+    indices[1] = 1;
 
-                };
-            }
+    var total = points.length,
+        point, index, amount;
 
-            //parse kernings
-            var kernings = responseXML.getElementsByTagName('kerning');
-            for (i = 0; i < kernings.length; i++)
-            {
-                var first = parseInt(kernings[i].getAttribute('first'), 10);
-                var second = parseInt(kernings[i].getAttribute('second'), 10);
-                var amount = parseInt(kernings[i].getAttribute('amount'), 10);
+    for (var i = 1; i < total; i++)
+    {
+        point = points[i];
+        index = i * 4;
+        // time to do some smart drawing!
+        amount = i / (total-1);
 
-                data.chars[second].kerning[first] = amount;
+        uvs[index] = amount * factor.x + offset.x;
+        uvs[index+1] = 0 + offset.y;
 
-            }
+        uvs[index+2] = amount * factor.x + offset.x;
+        uvs[index+3] = 1 * factor.y + offset.y;
 
-            PIXI.BitmapText.fonts[data.font] = data;
+        index = i * 2;
+        colors[index] = 1;
+        colors[index+1] = 1;
 
-            var scope = this;
-            image.addEventListener('loaded', function() {
-                scope.onLoaded();
-            });
-            image.load();
-        }
+        index = i * 2;
+        indices[index] = index;
+        indices[index + 1] = index + 1;
     }
 };
 
-/**
- * Invoked when all files are loaded (xml/fnt and texture)
+/*
+ * Returns texture UVs
  *
- * @method onLoaded
  * @private
  */
-PIXI.BitmapFontLoader.prototype.onLoaded = function()
-{
-    this.dispatchEvent({type: 'loaded', content: this});
-};
-
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi
- *
- * Awesome JS run time provided by EsotericSoftware
- * https://github.com/EsotericSoftware/spine-runtimes
- *
- */
 
-/**
- * The Spine loader is used to load in JSON spine data
- * To generate the data you need to use http://esotericsoftware.com/ and export in the "JSON" format
- * Due to a clash of names  You will need to change the extension of the spine file from *.json to *.anim for it to load
- * See example 12 (http://www.goodboydigital.com/pixijs/examples/12/) to see a working example and check out the source
- * You will need to generate a sprite sheet to accompany the spine data
- * When loaded this class will dispatch a "loaded" event
- *
- * @class Spine
- * @uses EventTarget
- * @constructor
- * @param url {String} The url of the JSON file
- * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
- */
-PIXI.SpineLoader = function(url, crossorigin)
+Rope.prototype._getTextureUvs = function()
 {
-    PIXI.EventTarget.call(this);
-
-    /**
-     * The url of the bitmap font data
-     *
-     * @property url
-     * @type String
-     */
-    this.url = url;
-
-    /**
-     * Whether the requests should be treated as cross origin
-     *
-     * @property crossorigin
-     * @type Boolean
-     */
-    this.crossorigin = crossorigin;
-
-    /**
-     * [read-only] Whether the data has loaded yet
-     *
-     * @property loaded
-     * @type Boolean
-     * @readOnly
-     */
-    this.loaded = false;
-};
-
-PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader;
-
-/**
- * Loads the JSON data
- *
- * @method load
- */
-PIXI.SpineLoader.prototype.load = function () {
-
-    var scope = this;
-    var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin);
-    jsonLoader.addEventListener("loaded", function (event) {
-        scope.json = event.content.json;
-        scope.onLoaded();
-    });
-    jsonLoader.load();
+    if(!this._textureUvs)
+    {
+        this._textureUvs = new core.TextureUvs();
+        this._textureUvs.set(this.texture.crop, this.texture.baseTexture, this.texture.rotate);
+    }
+    return this._textureUvs;
 };
 
-/**
- * Invoke when JSON file is loaded
+/*
+ * Clear texture UVs when new texture is set
  *
- * @method onLoaded
  * @private
  */
-PIXI.SpineLoader.prototype.onLoaded = function () {
-    this.loaded = true;
-    this.dispatchEvent({type: "loaded", content: this});
-};
-
-
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
 
-/**
- * This is the base class for creating a pixi.js filter. Currently only webGL supports filters.
- * If you want to make a custom filter this should be your base class.
- * @class AbstractFilter
- * @constructor
- * @param fragmentSrc
- * @param uniforms
- */
-PIXI.AbstractFilter = function(fragmentSrc, uniforms)
+Rope.prototype.onTextureUpdate = function ()
 {
-    /**
-    * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion.
-    * For example the blur filter has two passes blurX and blurY.
-    * @property passes
-    * @type Array an array of filter objects
-    * @private
-    */
-    this.passes = [this];
-
-    /**
-    * @property shaders
-    * @type Array an array of shaders
-    * @private
-    */
-    this.shaders = [];
-    
-    this.dirty = true;
-    this.padding = 0;
-
-    /**
-    * @property uniforms
-    * @type object
-    * @private
-    */
-    this.uniforms = uniforms || {};
-    /**
-    * @property fragmentSrc
-    * @type Array
-    * @private
-    */
-    this.fragmentSrc = fragmentSrc || [];
+    this._textureUvs = null;
+    Mesh.prototype.onTextureUpdate.call(this);
 };
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
+/*
+ * Updates the object transform for rendering
  *
- * The AlphaMaskFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object.
- * You can use this filter to apply all manor of crazy warping effects
- * Currently the r property of the texture is used to offset the x and the g propery of the texture is used to offset the y.
- * @class AlphaMaskFilter
- * @contructor
- * @param texture {Texture} The texture used for the displacemtent map * must be power of 2 texture at the moment
+ * @private
  */
-PIXI.AlphaMaskFilter = function(texture)
+Rope.prototype.updateTransform = function ()
 {
-    PIXI.AbstractFilter.call( this );
-
-    this.passes = [this];
-    texture.baseTexture._powerOf2 = true;
-
-    // set the uniforms
-    this.uniforms = {
-        mask: {type: 'sampler2D', value:texture},
-        mapDimensions:   {type: '2f', value:{x:1, y:5112}},
-        dimensions:   {type: '4fv', value:[0,0,0,0]}
-    };
+    var points = this.points;
 
-    if(texture.baseTexture.hasLoaded)
+    if (points.length < 1)
     {
-        this.uniforms.mask.value.x = texture.width;
-        this.uniforms.mask.value.y = texture.height;
+        return;
     }
-    else
-    {
-        this.boundLoadedFunction = this.onTextureLoaded.bind(this);
 
-        texture.baseTexture.on('loaded', this.boundLoadedFunction);
-    }
+    var lastPoint = points[0];
+    var nextPoint;
+    var perpX = 0;
+    var perpY = 0;
 
-    this.fragmentSrc = [
-        'precision mediump float;',
-        'varying vec2 vTextureCoord;',
-        'varying vec4 vColor;',
-        'uniform sampler2D mask;',
-        'uniform sampler2D uSampler;',
-        'uniform vec2 offset;',
-        'uniform vec4 dimensions;',
-        'uniform vec2 mapDimensions;',
-
-        'void main(void) {',
-        '   vec2 mapCords = vTextureCoord.xy;',
-        '   mapCords += (dimensions.zw + offset)/ dimensions.xy ;',
-        '   mapCords.y *= -1.0;',
-        '   mapCords.y += 1.0;',
-        '   mapCords *= dimensions.xy / mapDimensions;',
-
-        '   vec4 original =  texture2D(uSampler, vTextureCoord);',
-        '   float maskAlpha =  texture2D(mask, mapCords).r;',
-        '   original *= maskAlpha;',
-        //'   original.rgb *= maskAlpha;',
-        '   gl_FragColor =  original;',
-        //'   gl_FragColor = gl_FragColor;',
-        '}'
-    ];
-};
+    // this.count -= 0.2;
 
-PIXI.AlphaMaskFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
-PIXI.AlphaMaskFilter.prototype.constructor = PIXI.AlphaMaskFilter;
+    var vertices = this.vertices;
+    var total = points.length,
+        point, index, ratio, perpLength, num;
 
-PIXI.AlphaMaskFilter.prototype.onTextureLoaded = function()
-{
-    this.uniforms.mapDimensions.value.x = this.uniforms.mask.value.width;
-    this.uniforms.mapDimensions.value.y = this.uniforms.mask.value.height;
+    for (var i = 0; i < total; i++)
+    {
+        point = points[i];
+        index = i * 4;
 
-    this.uniforms.mask.value.baseTexture.off('loaded', this.boundLoadedFunction);
-};
+        if (i < points.length-1)
+        {
+            nextPoint = points[i+1];
+        }
+        else
+        {
+            nextPoint = point;
+        }
 
-/**
- * The texture used for the displacemtent map * must be power of 2 texture at the moment
- *
- * @property map
- * @type Texture
- */
-Object.defineProperty(PIXI.AlphaMaskFilter.prototype, 'map', {
-    get: function() {
-        return this.uniforms.mask.value;
-    },
-    set: function(value) {
-        this.uniforms.mask.value = value;
-    }
-});
+        perpY = -(nextPoint.x - lastPoint.x);
+        perpX = nextPoint.y - lastPoint.y;
 
+        ratio = (1 - (i / (total-1))) * 10;
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+        if (ratio > 1)
+        {
+            ratio = 1;
+        }
 
-/**
- *
- * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA
- * color and alpha values of every pixel on your displayObject to produce a result
- * with a new set of RGBA color and alpha values. Its pretty powerful!
- * @class ColorMatrixFilter
- * @contructor
- */
-PIXI.ColorMatrixFilter = function()
-{
-    PIXI.AbstractFilter.call( this );
+        perpLength = Math.sqrt(perpX * perpX + perpY * perpY);
+        num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio;
+        perpX /= perpLength;
+        perpY /= perpLength;
 
-    this.passes = [this];
+        perpX *= num;
+        perpY *= num;
 
-    // set the uniforms
-    this.uniforms = {
-        matrix: {type: 'mat4', value: [1,0,0,0,
-                                       0,1,0,0,
-                                       0,0,1,0,
-                                       0,0,0,1]},
-    };
+        vertices[index] = point.x + perpX;
+        vertices[index+1] = point.y + perpY;
+        vertices[index+2] = point.x - perpX;
+        vertices[index+3] = point.y - perpY;
 
-    this.fragmentSrc = [
-        'precision mediump float;',
-        'varying vec2 vTextureCoord;',
-        'varying vec4 vColor;',
-        'uniform float invert;',
-        'uniform mat4 matrix;',
-        'uniform sampler2D uSampler;',
+        lastPoint = point;
+    }
 
-        'void main(void) {',
-        '   gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;',
-      //  '   gl_FragColor = gl_FragColor;',
-        '}'
-    ];
+    this.containerUpdateTransform();
 };
 
-PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
-PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter;
-
+},{"../core":29,"./Mesh":122}],124:[function(require,module,exports){
 /**
- * Sets the matrix of the color matrix filter
- *
- * @property matrix
- * @type Array and array of 26 numbers
- * @default [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
- */
-Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', {
-    get: function() {
-        return this.uniforms.matrix.value;
-    },
-    set: function(value) {
-        this.uniforms.matrix.value = value;
-    }
-});
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * @file        Main export of the PIXI extras library
+ * @author      Mat Groves <mat@goodboydigital.com>
+ * @copyright   2013-2015 GoodBoyDigital
+ * @license     {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License}
  */
 
 /**
- *
- * This turns your displayObjects to black and white.
- * @class GrayFilter
- * @contructor
+ * @namespace PIXI.mesh
  */
-PIXI.GrayFilter = function()
-{
-    PIXI.AbstractFilter.call( this );
-
-    this.passes = [this];
-
-    // set the uniforms
-    this.uniforms = {
-        gray: {type: '1f', value: 1},
-    };
-
-    this.fragmentSrc = [
-        'precision mediump float;',
-        'varying vec2 vTextureCoord;',
-        'varying vec4 vColor;',
-        'uniform sampler2D uSampler;',
-        'uniform float gray;',
-
-        'void main(void) {',
-        '   gl_FragColor = texture2D(uSampler, vTextureCoord);',
-        '   gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);',
-     //   '   gl_FragColor = gl_FragColor;',
-        '}'
-    ];
+module.exports = {
+    Mesh:           require('./Mesh'),
+    Rope:           require('./Rope'),
+    MeshRenderer:   require('./webgl/MeshRenderer'),
+    MeshShader:     require('./webgl/MeshShader')
 };
 
-PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
-PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter;
-
-/**
-The strength of the gray. 1 will make the object black and white, 0 will make the object its normal color
-@property gray
-*/
-Object.defineProperty(PIXI.GrayFilter.prototype, 'gray', {
-    get: function() {
-        return this.uniforms.gray.value;
-    },
-    set: function(value) {
-        this.uniforms.gray.value = value;
-    }
-});
+},{"./Mesh":122,"./Rope":123,"./webgl/MeshRenderer":125,"./webgl/MeshShader":126}],125:[function(require,module,exports){
+var ObjectRenderer = require('../../core/renderers/webgl/utils/ObjectRenderer'),
+    WebGLRenderer = require('../../core/renderers/webgl/WebGLRenderer'),
+    Mesh = require('../Mesh');
 
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * @author Mat Groves
+ *
+ * Big thanks to the very clever Matt DesLauriers <mattdesl> https://github.com/mattdesl/
+ * for creating the original pixi version!
+ * Also a thanks to https://github.com/bchevalier for tweaking the tint and alpha so that they now share 4 bytes on the vertex buffer
+ *
+ * Heavily inspired by LibGDX's MeshRenderer:
+ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/MeshRenderer.java
  */
 
 /**
  *
- * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object.
- * You can use this filter to apply all manor of crazy warping effects
- * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y.
- * @class DisplacementFilter
- * @contructor
- * @param texture {Texture} The texture used for the displacemtent map * must be power of 2 texture at the moment
+ * @class
+ * @private
+ * @memberof PIXI.mesh
+ * @extends PIXI.ObjectRenderer
+ * @param renderer {WebGLRenderer} The renderer this sprite batch works for.
  */
-PIXI.DisplacementFilter = function(texture)
+function MeshRenderer(renderer)
 {
-    PIXI.AbstractFilter.call( this );
+    ObjectRenderer.call(this, renderer);
 
-    this.passes = [this];
-    texture.baseTexture._powerOf2 = true;
 
-    // set the uniforms
-    this.uniforms = {
-        displacementMap: {type: 'sampler2D', value:texture},
-        scale:           {type: '2f', value:{x:30, y:30}},
-        offset:          {type: '2f', value:{x:0, y:0}},
-        mapDimensions:   {type: '2f', value:{x:1, y:5112}},
-        dimensions:   {type: '4fv', value:[0,0,0,0]}
-    };
+    /**
+     * Holds the indices
+     *
+     * @member {Uint16Array}
+     */
+    this.indices = new Uint16Array(15000);
 
-    if(texture.baseTexture.hasLoaded)
+    //TODO this could be a single buffer shared amongst all renderers as we reuse this set up in most renderers
+    for (var i=0, j=0; i < 15000; i += 6, j += 4)
     {
-        this.uniforms.mapDimensions.value.x = texture.width;
-        this.uniforms.mapDimensions.value.y = texture.height;
-    }
-    else
-    {
-        this.boundLoadedFunction = this.onTextureLoaded.bind(this);
-
-        texture.baseTexture.on('loaded', this.boundLoadedFunction);
+        this.indices[i + 0] = j + 0;
+        this.indices[i + 1] = j + 1;
+        this.indices[i + 2] = j + 2;
+        this.indices[i + 3] = j + 0;
+        this.indices[i + 4] = j + 2;
+        this.indices[i + 5] = j + 3;
     }
+}
 
-    this.fragmentSrc = [
-        'precision mediump float;',
-        'varying vec2 vTextureCoord;',
-        'varying vec4 vColor;',
-        'uniform sampler2D displacementMap;',
-        'uniform sampler2D uSampler;',
-        'uniform vec2 scale;',
-        'uniform vec2 offset;',
-        'uniform vec4 dimensions;',
-        'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);',
-        // 'const vec2 textureDimensions = vec2(750.0, 750.0);',
-
-        'void main(void) {',
-        '   vec2 mapCords = vTextureCoord.xy;',
-        //'   mapCords -= ;',
-        '   mapCords += (dimensions.zw + offset)/ dimensions.xy ;',
-        '   mapCords.y *= -1.0;',
-        '   mapCords.y += 1.0;',
-        '   vec2 matSample = texture2D(displacementMap, mapCords).xy;',
-        '   matSample -= 0.5;',
-        '   matSample *= scale;',
-        '   matSample /= mapDimensions;',
-        '   gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));',
-        '   gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);',
-        '   vec2 cord = vTextureCoord;',
-
-        //'   gl_FragColor =  texture2D(displacementMap, cord);',
-     //   '   gl_FragColor = gl_FragColor;',
-        '}'
-    ];
-};
-
-PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
-PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter;
-
-PIXI.DisplacementFilter.prototype.onTextureLoaded = function()
-{
-    this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width;
-    this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height;
+MeshRenderer.prototype = Object.create(ObjectRenderer.prototype);
+MeshRenderer.prototype.constructor = MeshRenderer;
+module.exports = MeshRenderer;
 
-    this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction);
-};
+WebGLRenderer.registerPlugin('mesh', MeshRenderer);
 
 /**
- * The texture used for the displacemtent map * must be power of 2 texture at the moment
+ * Sets up the renderer context and necessary buffers.
  *
- * @property map
- * @type Texture
+ * @private
+ * @param gl {WebGLRenderingContext} the current WebGL drawing context
  */
-Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', {
-    get: function() {
-        return this.uniforms.displacementMap.value;
-    },
-    set: function(value) {
-        this.uniforms.displacementMap.value = value;
-    }
-});
+MeshRenderer.prototype.onContextChange = function ()
+{
 
-/**
- * The multiplier used to scale the displacement result from the map calculation.
- *
- * @property scale
- * @type Point
- */
-Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', {
-    get: function() {
-        return this.uniforms.scale.value;
-    },
-    set: function(value) {
-        this.uniforms.scale.value = value;
-    }
-});
+};
 
 /**
- * The offset used to move the displacement map.
+ * Renders the sprite object.
  *
- * @property offset
- * @type Point
+ * @param mesh {Mesh} the mesh to render
  */
-Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', {
-    get: function() {
-        return this.uniforms.offset.value;
-    },
-    set: function(value) {
-        this.uniforms.offset.value = value;
+MeshRenderer.prototype.render = function (mesh)
+{
+//    return;
+    if(!mesh._vertexBuffer)
+    {
+        this._initWebGL(mesh);
     }
-});
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+    var renderer = this.renderer,
+        gl = renderer.gl,
+        texture = mesh.texture.baseTexture,
+        shader = renderer.shaderManager.plugins.meshShader;
 
-/**
- *
- * This filter applies a pixelate effect making display objects appear 'blocky'
- * @class PixelateFilter
- * @contructor
- */
-PIXI.PixelateFilter = function()
-{
-    PIXI.AbstractFilter.call( this );
+    var drawMode = mesh.drawMode === Mesh.DRAW_MODES.TRIANGLE_STRIP ? gl.TRIANGLE_STRIP : gl.TRIANGLES;
 
-    this.passes = [this];
+    renderer.blendModeManager.setBlendMode(mesh.blendMode);
 
-    // set the uniforms
-    this.uniforms = {
-        invert: {type: '1f', value: 0},
-        dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])},
-        pixelSize: {type: '2f', value:{x:10, y:10}},
-    };
 
-    this.fragmentSrc = [
-        'precision mediump float;',
-        'varying vec2 vTextureCoord;',
-        'varying vec4 vColor;',
-        'uniform vec2 testDim;',
-        'uniform vec4 dimensions;',
-        'uniform vec2 pixelSize;',
-        'uniform sampler2D uSampler;',
+    // set uniforms
+    gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, mesh.worldTransform.toArray(true));
 
-        'void main(void) {',
-        '   vec2 coord = vTextureCoord;',
+    gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true));
+    gl.uniform1f(shader.uniforms.alpha._location, mesh.worldAlpha);
 
-        '   vec2 size = dimensions.xy/pixelSize;',
+    if (!mesh.dirty)
+    {
 
-        '   vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;',
-        '   gl_FragColor = texture2D(uSampler, color);',
-        '}'
-    ];
-};
+        gl.bindBuffer(gl.ARRAY_BUFFER, mesh._vertexBuffer);
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, mesh.vertices);
+        gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
 
-PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
-PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter;
 
-/**
- *
- * This a point that describes the size of the blocs. x is the width of the block and y is the the height
- * @property size
- * @type Point
- */
-Object.defineProperty(PIXI.PixelateFilter.prototype, 'size', {
-    get: function() {
-        return this.uniforms.pixelSize.value;
-    },
-    set: function(value) {
-        this.dirty = true;
-        this.uniforms.pixelSize.value = value;
-    }
-});
+        // update the uvs
+        gl.bindBuffer(gl.ARRAY_BUFFER, mesh._uvBuffer);
+        gl.vertexAttribPointer(shader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
 
-PIXI.BlurXFilter = function()
-{
-    PIXI.AbstractFilter.call( this );
+        gl.activeTexture(gl.TEXTURE0);
 
-    this.passes = [this];
+       if (!texture._glTextures[gl.id])
+        {
+            this.renderer.updateTexture(texture);
+        }
+        else
+        {
+            // bind the current texture
+            gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);
+        }
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, mesh._indexBuffer);
+    }
+    else
+    {
 
-    // set the uniforms
-    this.uniforms = {
-        blur: {type: '1f', value: 1/512},
-    };
+        mesh.dirty = false;
+        gl.bindBuffer(gl.ARRAY_BUFFER, mesh._vertexBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, mesh.vertices, gl.STATIC_DRAW);
+        gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
 
-    this.fragmentSrc = [
-        'precision mediump float;',
-        'varying vec2 vTextureCoord;',
-        'varying vec4 vColor;',
-        'uniform float blur;',
-        'uniform sampler2D uSampler;',
+        // update the uvs
+        gl.bindBuffer(gl.ARRAY_BUFFER, mesh._uvBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, mesh.uvs, gl.STATIC_DRAW);
+         gl.vertexAttribPointer(shader.attributes.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
 
-        'void main(void) {',
-        '   vec4 sum = vec4(0.0);',
+         gl.activeTexture(gl.TEXTURE0);
 
-        '   sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;',
-        '   sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;',
-        '   sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;',
-        '   sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;',
-        '   sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;',
-        '   sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;',
-        '   sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;',
-        '   sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;',
-        '   sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;',
+       if (!texture._glTextures[gl.id])
+        {
+            this.renderer.updateTexture(texture);
+        }
+        else
+        {
+            // bind the current texture
+            gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);
+        }
 
-        '   gl_FragColor = sum;',
-        '}'
-    ];
-};
+        // dont need to upload!
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, mesh._indexBuffer);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, mesh.indices, gl.STATIC_DRAW);
 
-PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
-PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter;
+    }
 
-Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', {
-    get: function() {
-        return this.uniforms.blur.value / (1/7000);
-    },
-    set: function(value) {
+    gl.drawElements(drawMode, mesh.indices.length, gl.UNSIGNED_SHORT, 0);
 
-        this.dirty = true;
-        this.uniforms.blur.value = (1/7000) * value;
-    }
-});
+};
 
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * Prepares all the buffers to render this mesh
+ * @param mesh {Mesh} the mesh to render
  */
-
-PIXI.BlurYFilter = function()
+MeshRenderer.prototype._initWebGL = function (mesh)
 {
-    PIXI.AbstractFilter.call( this );
-
-    this.passes = [this];
-
-    // set the uniforms
-    this.uniforms = {
-        blur: {type: '1f', value: 1/512},
-    };
+    // build the strip!
+    var gl = this.renderer.gl;
 
-    this.fragmentSrc = [
-        'precision mediump float;',
-        'varying vec2 vTextureCoord;',
-        'varying vec4 vColor;',
-        'uniform float blur;',
-        'uniform sampler2D uSampler;',
+    mesh._vertexBuffer = gl.createBuffer();
+    mesh._indexBuffer = gl.createBuffer();
+    mesh._uvBuffer = gl.createBuffer();
 
-        'void main(void) {',
-        '   vec4 sum = vec4(0.0);',
 
-        '   sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;',
-        '   sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;',
-        '   sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;',
-        '   sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;',
-        '   sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;',
-        '   sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;',
-        '   sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;',
-        '   sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;',
-        '   sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;',
 
-        '   gl_FragColor = sum;',
-        '}'
-    ];
-};
+    gl.bindBuffer(gl.ARRAY_BUFFER, mesh._vertexBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, mesh.vertices, gl.DYNAMIC_DRAW);
 
-PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
-PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter;
+    gl.bindBuffer(gl.ARRAY_BUFFER, mesh._uvBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER,  mesh.uvs, gl.STATIC_DRAW);
 
-Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', {
-    get: function() {
-        return this.uniforms.blur.value / (1/7000);
-    },
-    set: function(value) {
-        //this.padding = value;
-        this.uniforms.blur.value = (1/7000) * value;
+    if(mesh.colors){
+        mesh._colorBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, mesh._colorBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, mesh.colors, gl.STATIC_DRAW);
     }
-});
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, mesh._indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, mesh.indices, gl.STATIC_DRAW);
+};
+
 
 /**
+ * Empties the current batch.
  *
- * The BlurFilter applies a Gaussian blur to an object.
- * The strength of the blur can be set for x- and y-axis separately (always relative to the stage).
- *
- * @class BlurFilter
- * @contructor
  */
-PIXI.BlurFilter = function()
+MeshRenderer.prototype.flush = function ()
 {
-    this.blurXFilter = new PIXI.BlurXFilter();
-    this.blurYFilter = new PIXI.BlurYFilter();
 
-    this.passes =[this.blurXFilter, this.blurYFilter];
-};
-
-/**
- * Sets the strength of both the blurX and blurY properties simultaneously
- *
- * @property blur
- * @type Number the strength of the blur
- * @default 2
- */
-Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', {
-    get: function() {
-        return this.blurXFilter.blur;
-    },
-    set: function(value) {
-        this.blurXFilter.blur = this.blurYFilter.blur = value;
-    }
-});
+};
 
 /**
- * Sets the strength of the blurX property
+ * Starts a new mesh renderer.
  *
- * @property blurX
- * @type Number the strength of the blurX
- * @default 2
  */
-Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', {
-    get: function() {
-        return this.blurXFilter.blur;
-    },
-    set: function(value) {
-        this.blurXFilter.blur = value;
-    }
-});
+MeshRenderer.prototype.start = function ()
+{
+    var shader = this.renderer.shaderManager.plugins.meshShader;
+
+    this.renderer.shaderManager.setShader(shader);
+};
 
 /**
- * Sets the strength of the blurX property
+ * Destroys the Mesh renderer
  *
- * @property blurY
- * @type Number the strength of the blurY
- * @default 2
  */
-Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', {
-    get: function() {
-        return this.blurYFilter.blur;
-    },
-    set: function(value) {
-        this.blurYFilter.blur = value;
-    }
-});
+MeshRenderer.prototype.destroy = function ()
+{
+};
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+},{"../../core/renderers/webgl/WebGLRenderer":48,"../../core/renderers/webgl/utils/ObjectRenderer":62,"../Mesh":122}],126:[function(require,module,exports){
+var core = require('../../core');
 
 /**
- *
- * This inverts your displayObjects colors.
- * @class InvertFilter
- * @contructor
+ * @class
+ * @extends PIXI.Shader
+ * @memberof PIXI.mesh
+ * @param shaderManager {ShaderManager} The WebGL shader manager this shader works for.
  */
-PIXI.InvertFilter = function()
+function StripShader(shaderManager)
 {
-    PIXI.AbstractFilter.call( this );
+    core.Shader.call(this,
+        shaderManager,
+        // vertex shader
+        [
+            'precision lowp float;',
+            'attribute vec2 aVertexPosition;',
+            'attribute vec2 aTextureCoord;',
 
-    this.passes = [this];
+            'uniform mat3 translationMatrix;',
+            'uniform mat3 projectionMatrix;',
 
-    // set the uniforms
-    this.uniforms = {
-        invert: {type: '1f', value: 1},
-    };
+            'varying vec2 vTextureCoord;',
 
-    this.fragmentSrc = [
-        'precision mediump float;',
-        'varying vec2 vTextureCoord;',
-        'varying vec4 vColor;',
-        'uniform float invert;',
-        'uniform sampler2D uSampler;',
+            'void main(void){',
+            '   gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);',
+            '   vTextureCoord = aTextureCoord;',
+            '}'
+        ].join('\n'),
+        [
+            'precision lowp float;',
 
-        'void main(void) {',
-        '   gl_FragColor = texture2D(uSampler, vTextureCoord);',
-        '   gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);',
-        //'   gl_FragColor.rgb = gl_FragColor.rgb  * gl_FragColor.a;',
-      //  '   gl_FragColor = gl_FragColor * vColor;',
-        '}'
-    ];
-};
+            'varying vec2 vTextureCoord;',
+            'uniform float alpha;',
 
-PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
-PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter;
+            'uniform sampler2D uSampler;',
 
-/**
-The strength of the invert. 1 will fully invert the colors, 0 will make the object its normal color
-@property invert
-*/
-Object.defineProperty(PIXI.InvertFilter.prototype, 'invert', {
-    get: function() {
-        return this.uniforms.invert.value;
-    },
-    set: function(value) {
-        this.uniforms.invert.value = value;
-    }
-});
+            'void main(void){',
+            '   gl_FragColor = texture2D(uSampler, vTextureCoord) * alpha ;',
+            '}'
+        ].join('\n'),
+        // custom uniforms
+        {
+            alpha:  { type: '1f', value: 0 },
+            translationMatrix: { type: 'mat3', value: new Float32Array(9) },
+            projectionMatrix: { type: 'mat3', value: new Float32Array(9) }
+        },
+        // custom attributes
+        {
+            aVertexPosition:0,
+            aTextureCoord:0
+        }
+    );
+}
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+StripShader.prototype = Object.create(core.Shader.prototype);
+StripShader.prototype.constructor = StripShader;
+module.exports = StripShader;
 
-/**
- *
- * This applies a sepia effect to your displayObjects.
- * @class SepiaFilter
- * @contructor
- */
-PIXI.SepiaFilter = function()
+core.ShaderManager.registerPlugin('meshShader', StripShader);
+
+},{"../../core":29}],127:[function(require,module,exports){
+// References:
+// https://github.com/sindresorhus/object-assign
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
+
+if (!Object.assign)
 {
-    PIXI.AbstractFilter.call( this );
+    Object.assign = require('object-assign');
+}
 
-    this.passes = [this];
+},{"object-assign":12}],128:[function(require,module,exports){
+require('./Object.assign');
+require('./requestAnimationFrame');
 
-    // set the uniforms
-    this.uniforms = {
-        sepia: {type: '1f', value: 1},
+},{"./Object.assign":127,"./requestAnimationFrame":129}],129:[function(require,module,exports){
+(function (global){
+// References:
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// https://gist.github.com/1579671
+// http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision
+// https://gist.github.com/timhall/4078614
+// https://github.com/Financial-Times/polyfill-service/tree/master/polyfills/requestAnimationFrame
+
+// Expected to be used with Browserfiy
+// Browserify automatically detects the use of `global` and passes the
+// correct reference of `global`, `self`, and finally `window`
+
+// Date.now
+if (!(Date.now && Date.prototype.getTime)) {
+    Date.now = function now() {
+        return new Date().getTime();
     };
+}
 
-    this.fragmentSrc = [
-        'precision mediump float;',
-        'varying vec2 vTextureCoord;',
-        'varying vec4 vColor;',
-        'uniform float sepia;',
-        'uniform sampler2D uSampler;',
+// performance.now
+if (!(global.performance && global.performance.now)) {
+    var startTime = Date.now();
+    if (!global.performance) {
+        global.performance = {};
+    }
+    global.performance.now = function () {
+        return Date.now() - startTime;
+    };
+}
 
-        'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);',
+// requestAnimationFrame
+var lastTime = Date.now();
+var vendors = ['ms', 'moz', 'webkit', 'o'];
 
-        'void main(void) {',
-        '   gl_FragColor = texture2D(uSampler, vTextureCoord);',
-        '   gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);',
-       // '   gl_FragColor = gl_FragColor * vColor;',
-        '}'
-    ];
-};
+for(var x = 0; x < vendors.length && !global.requestAnimationFrame; ++x) {
+    global.requestAnimationFrame = global[vendors[x] + 'RequestAnimationFrame'];
+    global.cancelAnimationFrame = global[vendors[x] + 'CancelAnimationFrame'] ||
+        global[vendors[x] + 'CancelRequestAnimationFrame'];
+}
 
-PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
-PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter;
+if (!global.requestAnimationFrame) {
+    global.requestAnimationFrame = function (callback) {
+        if (typeof callback !== 'function') {
+            throw new TypeError(callback + 'is not a function');
+        }
 
-/**
-The strength of the sepia. 1 will apply the full sepia effect, 0 will make the object its normal color
-@property sepia
-*/
-Object.defineProperty(PIXI.SepiaFilter.prototype, 'sepia', {
-    get: function() {
-        return this.uniforms.sepia.value;
-    },
-    set: function(value) {
-        this.uniforms.sepia.value = value;
-    }
-});
+        var currentTime = Date.now(),
+            delay = 16 + lastTime - currentTime;
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
+        if (delay < 0) {
+            delay = 0;
+        }
+
+        lastTime = currentTime;
+
+        return setTimeout(function () {
+            lastTime = Date.now();
+            callback(performance.now());
+        }, delay);
+    };
+}
+
+if (!global.cancelAnimationFrame) {
+    global.cancelAnimationFrame = function(id) {
+        clearTimeout(id);
+    };
+}
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+
+},{}],130:[function(require,module,exports){
+var core = require('../core'),
+    EventEmitter = require('eventemitter3'),
+    // Internal event used by composed emitter
+    TICK = 'tick';
 
 /**
+ * A Ticker class that runs an update loop that other objects listen to.
+ * This class is composed around an EventEmitter object to add listeners
+ * meant for execution on the next requested animation frame.
+ * Animation frames are requested only when necessary,
+ * e.g. When the ticker is started and the emitter has listeners.
  *
- * This filter applies a twist effect making display objects appear twisted in the given direction
- * @class TwistFilter
- * @contructor
+ * @class
+ * @memberof PIXI.ticker
  */
-PIXI.TwistFilter = function()
+function Ticker()
 {
-    PIXI.AbstractFilter.call( this );
+    var _this = this;
+    /**
+     * Internal tick method bound to ticker instance.
+     * This is because in early 2015, Function.bind
+     * is still 60% slower in high performance scenarios.
+     * Also separating frame requests from update method
+     * so listeners may be called at any time and with
+     * any animation API, just invoke ticker.update(time).
+     *
+     * @private
+     */
+    this._tick = function _tick(time) {
 
-    this.passes = [this];
+        _this._requestId = null;
 
-    // set the uniforms
-    this.uniforms = {
-        radius: {type: '1f', value:0.5},
-        angle: {type: '1f', value:5},
-        offset: {type: '2f', value:{x:0.5, y:0.5}},
+        if (_this.started)
+        {
+            // Invoke listeners now
+            _this.update(time);
+            // Listener side effects may have modified ticker state.
+            if (_this.started && _this._requestId === null && _this._emitter.listeners(TICK, true))
+            {
+                _this._requestId = requestAnimationFrame(_this._tick);
+            }
+        }
     };
+    /**
+     * Internal emitter used to fire 'tick' event
+     * @private
+     */
+    this._emitter = new EventEmitter();
+    /**
+     * Internal current frame request ID
+     * @private
+     */
+    this._requestId = null;
+    /**
+     * Internal value managed by minFPS property setter and getter.
+     * This is the maximum allowed milliseconds between updates.
+     * @private
+     */
+    this._maxElapsedMS = 100;
 
-    this.fragmentSrc = [
-        'precision mediump float;',
-        'varying vec2 vTextureCoord;',
-        'varying vec4 vColor;',
-        'uniform vec4 dimensions;',
-        'uniform sampler2D uSampler;',
+    /**
+     * Whether or not this ticker should invoke the method
+     * {@link PIXI.ticker.Ticker#start} automatically
+     * when a listener is added.
+     *
+     * @member {boolean}
+     * @default false
+     */
+    this.autoStart = false;
 
-        'uniform float radius;',
-        'uniform float angle;',
-        'uniform vec2 offset;',
+    /**
+     * Scalar time value from last frame to this frame.
+     * This value is capped by setting {@link PIXI.ticker.Ticker#minFPS}
+     * and is scaled with {@link PIXI.ticker.Ticker#speed}.
+     * **Note:** The cap may be exceeded by scaling.
+     *
+     * @member {number}
+     * @default 1
+     */
+    this.deltaTime = 1;
 
-        'void main(void) {',
-        '   vec2 coord = vTextureCoord - offset;',
-        '   float distance = length(coord);',
+    /**
+     * Time elapsed in milliseconds from last frame to this frame.
+     * Opposed to what the scalar {@link PIXI.ticker.Ticker#deltaTime}
+     * is based, this value is neither capped nor scaled.
+     * If the platform supports DOMHighResTimeStamp,
+     * this value will have a precision of 1 µs.
+     *
+     * @member {DOMHighResTimeStamp|number}
+     * @default 1 / TARGET_FPMS
+     */
+    this.elapsedMS = 1 / core.TARGET_FPMS; // default to target frame time
 
-        '   if (distance < radius) {',
-        '       float ratio = (radius - distance) / radius;',
-        '       float angleMod = ratio * ratio * angle;',
-        '       float s = sin(angleMod);',
-        '       float c = cos(angleMod);',
-        '       coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);',
-        '   }',
+    /**
+     * The last time {@link PIXI.ticker.Ticker#update} was invoked.
+     * This value is also reset internally outside of invoking
+     * update, but only when a new animation frame is requested.
+     * If the platform supports DOMHighResTimeStamp,
+     * this value will have a precision of 1 µs.
+     *
+     * @member {DOMHighResTimeStamp|number}
+     * @default 0
+     */
+    this.lastTime = 0;
 
-        '   gl_FragColor = texture2D(uSampler, coord+offset);',
-        '}'
-    ];
-};
+    /**
+     * Factor of current {@link PIXI.ticker.Ticker#deltaTime}.
+     * @example
+     *     // Scales ticker.deltaTime to what would be
+     *     // the equivalent of approximately 120 FPS
+     *     ticker.speed = 2;
+     *
+     * @member {number}
+     * @default 1
+     */
+    this.speed = 1;
 
-PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
-PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter;
+    /**
+     * Whether or not this ticker has been started.
+     * `true` if {@link PIXI.ticker.Ticker#start} has been called.
+     * `false` if {@link PIXI.ticker.Ticker#stop} has been called.
+     * While `false`, this value may change to `true` in the
+     * event of {@link PIXI.ticker.Ticker#autoStart} being `true`
+     * and a listener is added.
+     *
+     * @member {boolean}
+     * @default false
+     */
+    this.started = false;
+}
 
-/**
- *
- * This point describes the the offset of the twist
- * @property size
- * @type Point
- */
-Object.defineProperty(PIXI.TwistFilter.prototype, 'offset', {
-    get: function() {
-        return this.uniforms.offset.value;
+Object.defineProperties(Ticker.prototype, {
+    /**
+     * The frames per second at which this ticker is running.
+     * The default is approximately 60 in most modern browsers.
+     * **Note:** This does not factor in the value of
+     * {@link PIXI.ticker.Ticker#speed}, which is specific
+     * to scaling {@link PIXI.ticker.Ticker#deltaTime}.
+     *
+     * @member
+     * @memberof PIXI.ticker.Ticker#
+     * @readonly
+     */
+    FPS: {
+        get: function()
+        {
+            return 1000 / this.elapsedMS;
+        }
     },
-    set: function(value) {
-        this.dirty = true;
-        this.uniforms.offset.value = value;
+
+    /**
+     * Manages the maximum amount of milliseconds allowed to
+     * elapse between invoking {@link PIXI.ticker.Ticker#update}.
+     * This value is used to cap {@link PIXI.ticker.Ticker#deltaTime},
+     * but does not effect the measured value of {@link PIXI.ticker.Ticker#FPS}.
+     * When setting this property it is clamped to a value between
+     * `0` and `PIXI.TARGET_FPMS * 1000`.
+     *
+     * @member
+     * @memberof PIXI.ticker.Ticker#
+     * @default 10
+     */
+    minFPS: {
+        get: function()
+        {
+            return 1000 / this._maxElapsedMS;
+        },
+        set: function(fps)
+        {
+            // Clamp: 0 to TARGET_FPMS
+            var minFPMS = Math.min(Math.max(0, fps) / 1000, core.TARGET_FPMS);
+            this._maxElapsedMS = 1 / minFPMS;
+        }
     }
 });
 
 /**
+ * Conditionally requests a new animation frame.
+ * If a frame has not already been requested, and if the internal
+ * emitter has listeners, a new frame is requested.
  *
- * This radius describes size of the twist
- * @property size
- * @type Number
+ * @private
  */
-Object.defineProperty(PIXI.TwistFilter.prototype, 'radius', {
-    get: function() {
-        return this.uniforms.radius.value;
-    },
-    set: function(value) {
-        this.dirty = true;
-        this.uniforms.radius.value = value;
+Ticker.prototype._requestIfNeeded = function _requestIfNeeded()
+{
+    if (this._requestId === null && this._emitter.listeners(TICK, true))
+    {
+        // ensure callbacks get correct delta
+        this.lastTime = performance.now();
+        this._requestId = requestAnimationFrame(this._tick);
     }
-});
+};
 
 /**
+ * Conditionally cancels a pending animation frame.
  *
- * This radius describes angle of the twist
- * @property angle
- * @type Number
+ * @private
  */
-Object.defineProperty(PIXI.TwistFilter.prototype, 'angle', {
-    get: function() {
-        return this.uniforms.angle.value;
-    },
-    set: function(value) {
-        this.dirty = true;
-        this.uniforms.angle.value = value;
+Ticker.prototype._cancelIfNeeded = function _cancelIfNeeded()
+{
+    if (this._requestId !== null)
+    {
+        cancelAnimationFrame(this._requestId);
+        this._requestId = null;
     }
-});
+};
+
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * Conditionally requests a new animation frame.
+ * If the ticker has been started it checks if a frame has not already
+ * been requested, and if the internal emitter has listeners. If these
+ * conditions are met, a new frame is requested. If the ticker has not
+ * been started, but autoStart is `true`, then the ticker starts now,
+ * and continues with the previous conditions to request a new frame.
+ *
+ * @private
  */
+Ticker.prototype._startIfPossible = function _startIfPossible()
+{
+    if (this.started)
+    {
+        this._requestIfNeeded();
+    }
+    else if (this.autoStart)
+    {
+        this.start();
+    }
+};
 
 /**
+ * Calls {@link module:eventemitter3.EventEmitter#on} internally for the
+ * internal 'tick' event. It checks if the emitter has listeners,
+ * and if so it requests a new animation frame at this point.
  *
- * This lowers the color depth of your image by the given amount, producing an image with a smaller palette.
- * @class ColorStepFilter
- * @contructor
+ * @param fn {Function} The listener function to be added for updates
+ * @param [context] {Function} The listener context
+ * @returns {PIXI.ticker.Ticker} this
  */
-PIXI.ColorStepFilter = function()
+Ticker.prototype.add = function add(fn, context)
 {
-    PIXI.AbstractFilter.call( this );
+    this._emitter.on(TICK, fn, context);
 
-    this.passes = [this];
+    this._startIfPossible();
 
-    // set the uniforms
-    this.uniforms = {
-        step: {type: '1f', value: 5},
-    };
-
-    this.fragmentSrc = [
-        'precision mediump float;',
-        'varying vec2 vTextureCoord;',
-        'varying vec4 vColor;',
-        'uniform sampler2D uSampler;',
-        'uniform float step;',
-
-        'void main(void) {',
-        '   vec4 color = texture2D(uSampler, vTextureCoord);',
-        '   color = floor(color * step) / step;',
-        '   gl_FragColor = color;',
-        '}'
-    ];
+    return this;
 };
 
-PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
-PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter;
-
-/**
-The number of steps.
-@property step
-*/
-Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', {
-    get: function() {
-        return this.uniforms.step.value;
-    },
-    set: function(value) {
-        this.uniforms.step.value = value;
-    }
-});
-
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- * original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js
+ * Calls {@link module:eventemitter3.EventEmitter#once} internally for the
+ * internal 'tick' event. It checks if the emitter has listeners,
+ * and if so it requests a new animation frame at this point.
+ *
+ * @param fn {Function} The listener function to be added for one update
+ * @param [context] {Function} The listener context
+ * @returns {PIXI.ticker.Ticker} this
  */
+Ticker.prototype.addOnce = function addOnce(fn, context)
+{
+    this._emitter.once(TICK, fn, context);
+
+    this._startIfPossible();
+
+    return this;
+};
 
 /**
+ * Calls {@link module:eventemitter3.EventEmitter#off} internally for 'tick' event.
+ * It checks if the emitter has listeners for 'tick' event.
+ * If it does, then it cancels the animation frame.
  *
- * This filter applies a dotscreen effect making display objects appear to be made out of black and white halftone dots like an old printer
- * @class DotScreenFilter
- * @contructor
+ * @param [fn] {Function} The listener function to be removed
+ * @param [context] {Function} The listener context to be removed
+ * @returns {PIXI.ticker.Ticker} this
  */
-PIXI.DotScreenFilter = function()
+Ticker.prototype.remove = function remove(fn, context)
 {
-    PIXI.AbstractFilter.call( this );
+    this._emitter.off(TICK, fn, context);
 
-    this.passes = [this];
-
-    // set the uniforms
-    this.uniforms = {
-        scale: {type: '1f', value:1},
-        angle: {type: '1f', value:5},
-        dimensions:   {type: '4fv', value:[0,0,0,0]}
-    };
-
-    this.fragmentSrc = [
-        'precision mediump float;',
-        'varying vec2 vTextureCoord;',
-        'varying vec4 vColor;',
-        'uniform vec4 dimensions;',
-        'uniform sampler2D uSampler;',
+    if (!this._emitter.listeners(TICK, true))
+    {
+        this._cancelIfNeeded();
+    }
 
-        'uniform float angle;',
-        'uniform float scale;',
-
-        'float pattern() {',
-        '   float s = sin(angle), c = cos(angle);',
-        '   vec2 tex = vTextureCoord * dimensions.xy;',
-        '   vec2 point = vec2(',
-        '       c * tex.x - s * tex.y,',
-        '       s * tex.x + c * tex.y',
-        '   ) * scale;',
-        '   return (sin(point.x) * sin(point.y)) * 4.0;',
-        '}',
-
-        'void main() {',
-        '   vec4 color = texture2D(uSampler, vTextureCoord);',
-        '   float average = (color.r + color.g + color.b) / 3.0;',
-        '   gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);',
-        '}'
-    ];
+    return this;
 };
 
-PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype );
-PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter;
-
 /**
- *
- * This describes the the scale
- * @property scale
- * @type Number
+ * Starts the ticker. If the ticker has listeners
+ * a new animation frame is requested at this point.
  */
-Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', {
-    get: function() {
-        return this.uniforms.scale.value;
-    },
-    set: function(value) {
-        this.dirty = true;
-        this.uniforms.scale.value = value;
+Ticker.prototype.start = function start()
+{
+    if (!this.started)
+    {
+        this.started = true;
+        this._requestIfNeeded();
     }
-});
+};
 
 /**
- *
- * This radius describes angle
- * @property angle
- * @type Number
+ * Stops the ticker. If the ticker has requested
+ * an animation frame it is canceled at this point.
  */
-Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', {
-    get: function() {
-        return this.uniforms.angle.value;
-    },
-    set: function(value) {
-        this.dirty = true;
-        this.uniforms.angle.value = value;
+Ticker.prototype.stop = function stop()
+{
+    if (this.started)
+    {
+        this.started = false;
+        this._cancelIfNeeded();
     }
-});
+};
+
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * Triggers an update. An update entails setting the
+ * current {@link PIXI.ticker.Ticker#elapsedMS},
+ * the current {@link PIXI.ticker.Ticker#deltaTime},
+ * invoking all listeners with current deltaTime,
+ * and then finally setting {@link PIXI.ticker.Ticker#lastTime}
+ * with the value of currentTime that was provided.
+ * This method will be called automatically by animation
+ * frame callbacks if the ticker instance has been started
+ * and listeners are added.
+ *
+ * @param [currentTime=performance.now()] {DOMHighResTimeStamp|number} the current time of execution
  */
-
-PIXI.CrossHatchFilter = function()
+Ticker.prototype.update = function update(currentTime)
 {
-    PIXI.AbstractFilter.call( this );
+    var elapsedMS;
 
-    this.passes = [this];
+    // Allow calling update directly with default currentTime.
+    currentTime = currentTime || performance.now();
+    // Save uncapped elapsedMS for measurement
+    elapsedMS = this.elapsedMS = currentTime - this.lastTime;
 
-    // set the uniforms
-    this.uniforms = {
-        blur: {type: '1f', value: 1 / 512},
-    };
+    // cap the milliseconds elapsed used for deltaTime
+    if (elapsedMS > this._maxElapsedMS)
+    {
+        elapsedMS = this._maxElapsedMS;
+    }
 
-    this.fragmentSrc = [
-        'precision mediump float;',
-        'varying vec2 vTextureCoord;',
-        'varying vec4 vColor;',
-        'uniform float blur;',
-        'uniform sampler2D uSampler;',
+    this.deltaTime = elapsedMS * core.TARGET_FPMS * this.speed;
 
-        'void main(void) {',
-        '    float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);',
-
-        '    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);',
-
-        '    if (lum < 1.00) {',
-        '        if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {',
-        '            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);',
-        '        }',
-        '    }',
-
-        '    if (lum < 0.75) {',
-        '        if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {',
-        '            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);',
-        '        }',
-        '    }',
-
-        '    if (lum < 0.50) {',
-        '        if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {',
-        '            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);',
-        '        }',
-        '    }',
-
-        '    if (lum < 0.3) {',
-        '        if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {',
-        '            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);',
-        '        }',
-        '    }',
-        '}'
-    ];
-};
+    // Invoke listeners added to internal emitter
+    this._emitter.emit(TICK, this.deltaTime);
 
-PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
-PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter;
+    this.lastTime = currentTime;
+};
 
-Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', {
-    get: function() {
-        return this.uniforms.blur.value / (1/7000);
-    },
-    set: function(value) {
-        //this.padding = value;
-        this.uniforms.blur.value = (1/7000) * value;
-    }
-});
+module.exports = Ticker;
 
+},{"../core":29,"eventemitter3":11}],131:[function(require,module,exports){
 /**
- * @author Mat Groves http://matgroves.com/ @Doormat23
+ * @file        Main export of the PIXI extras library
+ * @author      Mat Groves <mat@goodboydigital.com>
+ * @copyright   2013-2015 GoodBoyDigital
+ * @license     {@link https://github.com/GoodBoyDigital/pixi.js/blob/master/LICENSE|MIT License}
  */
+var Ticker = require('./Ticker');
 
-PIXI.RGBSplitFilter = function()
-{
-    PIXI.AbstractFilter.call( this );
-
-    this.passes = [this];
-
-    // set the uniforms
-    this.uniforms = {
-        red: {type: '2f', value: {x:20, y:20}},
-        green: {type: '2f', value: {x:-20, y:20}},
-        blue: {type: '2f', value: {x:20, y:-20}},
-        dimensions:   {type: '4fv', value:[0,0,0,0]}
-    };
-
-    this.fragmentSrc = [
-        'precision mediump float;',
-        'varying vec2 vTextureCoord;',
-        'varying vec4 vColor;',
-        'uniform vec2 red;',
-        'uniform vec2 green;',
-        'uniform vec2 blue;',
-        'uniform vec4 dimensions;',
-        'uniform sampler2D uSampler;',
+/**
+ * The shared ticker instance used by {@link PIXI.extras.MovieClip}.
+ * and by {@link PIXI.interaction.InteractionManager}.
+ * The property {@link PIXI.ticker.Ticker#autoStart} is set to `true`
+ * for this instance. Please follow the examples for usage, including
+ * how to opt-out of auto-starting the shared ticker.
+ *
+ * @example
+ *     var ticker = PIXI.ticker.shared;
+ *     // Set this to prevent starting this ticker when listeners are added.
+ *     // By default this is true only for the PIXI.ticker.shared instance.
+ *     ticker.autoStart = false;
+ *     // FYI, call this to ensure the ticker is stopped. It should be stopped
+ *     // if you have not attempted to render anything yet.
+ *     ticker.stop();
+ *     // Call this when you are ready for a running shared ticker.
+ *     ticker.start();
+ *
+ * @example
+ *     // You may use the shared ticker to render...
+ *     var renderer = PIXI.autoDetectRenderer(800, 600);
+ *     var stage = new PIXI.Container();
+ *     var interactionManager = PIXI.interaction.InteractionManager(renderer);
+ *     document.body.appendChild(renderer.view);
+ *     ticker.add(function (time) {
+ *         renderer.render(stage);
+ *     });
+ *
+ * @example
+ *     // Or you can just update it manually.
+ *     ticker.autoStart = false;
+ *     ticker.stop();
+ *     function animate(time) {
+ *         ticker.update(time);
+ *         renderer.render(stage);
+ *         requestAnimationFrame(animate);
+ *     }
+ *     animate(performance.now());
+ *
+ * @type {PIXI.ticker.Ticker}
+ * @memberof PIXI.ticker
+ */
+var shared = new Ticker();
+shared.autoStart = true;
 
-        'void main(void) {',
-        '   gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;',
-        '   gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;',
-        '   gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;',
-        '   gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;',
-        '}'
-    ];
+module.exports = {
+    shared: shared,
+    Ticker: Ticker
 };
 
-PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
-PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter;
-
-Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'angle', {
-    get: function() {
-        return this.uniforms.blur.value / (1/7000);
-    },
-    set: function(value) {
-        //this.padding = value;
-        this.uniforms.blur.value = (1/7000) * value;
-    }
+},{"./Ticker":130}]},{},[1])(1)
 });
 
-/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
 
-    if (typeof exports !== 'undefined') {
-        if (typeof module !== 'undefined' && module.exports) {
-            exports = module.exports = PIXI;
-        }
-        exports.PIXI = PIXI;
-    } else if (typeof define !== 'undefined' && define.amd) {
-        define(PIXI);
-    } else {
-        root.PIXI = PIXI;
-    }
-}).call(this);
\ No newline at end of file
+//# sourceMappingURL=pixi.js.map
\ No newline at end of file
diff --git a/src/render/RenderPixi.js b/src/render/RenderPixi.js
index 3cbd22cf..844e383d 100644
--- a/src/render/RenderPixi.js
+++ b/src/render/RenderPixi.js
@@ -46,11 +46,15 @@ var RenderPixi = {};
             transparent = !render.options.wireframes && render.options.background === 'transparent';
 
         // init pixi
-        render.context = new PIXI.WebGLRenderer(render.options.width, render.options.height, render.canvas, transparent, true);
+        render.context = new PIXI.WebGLRenderer(render.options.width, render.options.height, {
+            view: render.canvas,
+            autoResize: true,
+            transparent: transparent,
+            antialias: true,
+            backgroundColor: options.background
+        });
         render.canvas = render.context.view;
-        render.container = new PIXI.DisplayObjectContainer();
-        render.stage = new PIXI.Stage();
-        render.stage.addChild(render.container);
+        render.container = new PIXI.Container();
         render.bounds = render.bounds || { 
             min: { 
                 x: 0,
@@ -68,8 +72,8 @@ var RenderPixi = {};
         render.primitives = {};
 
         // use a sprite batch for performance
-        render.spriteBatch = new PIXI.SpriteBatch();
-        render.container.addChild(render.spriteBatch);
+        render.bodies = new PIXI.Container();
+        render.container.addChild(render.bodies);
 
         // insert canvas
         if (Common.isElement(render.element)) {
@@ -92,7 +96,7 @@ var RenderPixi = {};
      */
     RenderPixi.clear = function(render) {
         var container = render.container,
-            spriteBatch = render.spriteBatch;
+            bodies = render.bodies;
 
         // clear stage container
         while (container.children[0]) { 
@@ -100,8 +104,8 @@ var RenderPixi = {};
         }
 
         // clear sprite batch
-        while (spriteBatch.children[0]) { 
-            spriteBatch.removeChild(spriteBatch.children[0]); 
+        while (bodies.children[0]) { 
+            bodies.removeChild(bodies.children[0]); 
         }
 
         var bgSprite = render.sprites['bg-0'];
@@ -114,10 +118,10 @@ var RenderPixi = {};
         // set background sprite
         render.sprites['bg-0'] = bgSprite;
         if (bgSprite)
-            spriteBatch.addChildAt(bgSprite, 0);
+            container.addChildAt(bgSprite, 0);
 
         // add sprite batch back into container
-        render.container.addChild(render.spriteBatch);
+        render.container.addChild(render.bodies);
 
         // reset background state
         render.currentBackground = null;
@@ -141,11 +145,11 @@ var RenderPixi = {};
             if (isColor) {
                 // if solid background color
                 var color = Common.colorToNumber(background);
-                render.stage.setBackgroundColor(color);
+                render.context.backgroundColor = color;
 
                 // remove background sprite if existing
                 if (bgSprite)
-                    render.spriteBatch.removeChild(bgSprite); 
+                    render.container.removeChild(bgSprite); 
             } else {
                 // initialise background sprite if needed
                 if (!bgSprite) {
@@ -154,7 +158,7 @@ var RenderPixi = {};
                     bgSprite = render.sprites['bg-0'] = new PIXI.Sprite(texture);
                     bgSprite.position.x = 0;
                     bgSprite.position.y = 0;
-                    render.spriteBatch.addChildAt(bgSprite, 0);
+                    render.container.addChildAt(bgSprite, 0);
                 }
             }
 
@@ -171,7 +175,6 @@ var RenderPixi = {};
         var render = engine.render,
             world = engine.world,
             context = render.context,
-            stage = render.stage,
             container = render.container,
             options = render.options,
             bodies = Composite.allBodies(world),
@@ -229,7 +232,7 @@ var RenderPixi = {};
         for (i = 0; i < constraints.length; i++)
             RenderPixi.constraint(engine, constraints[i]);
 
-        context.render(stage);
+        context.render(container); // render just render.bodies?
     };
 
 
@@ -300,15 +303,15 @@ var RenderPixi = {};
         if (bodyRender.sprite && bodyRender.sprite.texture) {
             var spriteId = 'b-' + body.id,
                 sprite = render.sprites[spriteId],
-                spriteBatch = render.spriteBatch;
+                bodies = render.bodies;
 
             // initialise body sprite if not existing
             if (!sprite)
                 sprite = render.sprites[spriteId] = _createBodySprite(render, body);
 
             // add to scene graph if not already there
-            if (Common.indexOf(spriteBatch.children, sprite) === -1)
-                spriteBatch.addChild(sprite);
+            if (Common.indexOf(bodies.children, sprite) === -1)
+                bodies.addChild(sprite);
 
             // update body sprite
             sprite.position.x = body.position.x;
@@ -366,7 +369,7 @@ var RenderPixi = {};
      * @param {body} body
      * @return {PIXI.Graphics} graphics
      */
-    var _createBodyPrimitive = function(render, body) {
+    var _createBodyPrimitive = function(render, body) { // TODO: use canvas to create sprite, not PIXI.Graphics
         var bodyRender = body.render,
             options = render.options,
             primitive = new PIXI.Graphics(),