diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }

diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }
diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js
index 07cf0d1..80b5ec6 100644
--- a/gulp/tasks/jshint.js
+++ b/gulp/tasks/jshint.js
@@ -3,8 +3,9 @@
     handleErrors = require('../util/handleErrors');
 
 gulp.task('jshint', function () {
+    console.log(paths.scripts, process.cwd());
     return gulp.src(paths.scripts)
         .pipe(handleErrors())
-        .pipe(jshint('../.jshintrc'))
+        .pipe(jshint())
         .pipe(jshint.reporter('jshint-summary'));
 });

diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }
diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js
index 07cf0d1..80b5ec6 100644
--- a/gulp/tasks/jshint.js
+++ b/gulp/tasks/jshint.js
@@ -3,8 +3,9 @@
     handleErrors = require('../util/handleErrors');
 
 gulp.task('jshint', function () {
+    console.log(paths.scripts, process.cwd());
     return gulp.src(paths.scripts)
         .pipe(handleErrors())
-        .pipe(jshint('../.jshintrc'))
+        .pipe(jshint())
         .pipe(jshint.reporter('jshint-summary'));
 });
diff --git a/gulpfile.js b/gulpfile.js
index 84e7a00..fe1a054 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,8 +21,8 @@
     src: './src',
     out: './dist',
 
-    get scripts() { return this.source + '/js/**/*.js'; },
-    get jsEntry() { return this.source + '/js/index'; }
+    get scripts() { return this.src + '/**/*.js'; },
+    get jsEntry() { return this.src + '/index'; }
 };
 
 // Require all tasks in gulp/tasks, including subfolders

diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }
diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js
index 07cf0d1..80b5ec6 100644
--- a/gulp/tasks/jshint.js
+++ b/gulp/tasks/jshint.js
@@ -3,8 +3,9 @@
     handleErrors = require('../util/handleErrors');
 
 gulp.task('jshint', function () {
+    console.log(paths.scripts, process.cwd());
     return gulp.src(paths.scripts)
         .pipe(handleErrors())
-        .pipe(jshint('../.jshintrc'))
+        .pipe(jshint())
         .pipe(jshint.reporter('jshint-summary'));
 });
diff --git a/gulpfile.js b/gulpfile.js
index 84e7a00..fe1a054 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,8 +21,8 @@
     src: './src',
     out: './dist',
 
-    get scripts() { return this.source + '/js/**/*.js'; },
-    get jsEntry() { return this.source + '/js/index'; }
+    get scripts() { return this.src + '/**/*.js'; },
+    get jsEntry() { return this.src + '/index'; }
 };
 
 // Require all tasks in gulp/tasks, including subfolders
diff --git a/package.json b/package.json
index 82bebce..5132759 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "docs": "./node_modules/.bin/jsdoc -c ./gulp/util/jsdoc.conf.json"
   },
   "devDependencies": {
+    "browserify": "^8.0.2",
     "chai": "^1.10.0",
     "del": "^1.1.0",
     "gulp": "^3.8.10",
@@ -28,11 +29,20 @@
     "gulp-util": "^3.0.1",
     "ink-docstrap": "^0.4.12",
     "jsdoc": "^3.3.0-alpha13",
+    "jshint-summary": "^0.4.0",
     "karma": "^0.12.28",
     "karma-firefox-launcher": "^0.1.0",
     "karma-mocha": "^0.1.10",
     "karma-spec-reporter": "^0.0.16",
     "mocha": "^2.1.0",
-    "run-sequence": "^1.0.2"
+    "require-dir": "^0.1.0",
+    "run-sequence": "^1.0.2",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "dependencies": {
+    "raf": "^2.0.4",
+    "superagent": "^0.21.0",
+    "webgl-enabled": "^1.0.2"
   }
 }

diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }
diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js
index 07cf0d1..80b5ec6 100644
--- a/gulp/tasks/jshint.js
+++ b/gulp/tasks/jshint.js
@@ -3,8 +3,9 @@
     handleErrors = require('../util/handleErrors');
 
 gulp.task('jshint', function () {
+    console.log(paths.scripts, process.cwd());
     return gulp.src(paths.scripts)
         .pipe(handleErrors())
-        .pipe(jshint('../.jshintrc'))
+        .pipe(jshint())
         .pipe(jshint.reporter('jshint-summary'));
 });
diff --git a/gulpfile.js b/gulpfile.js
index 84e7a00..fe1a054 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,8 +21,8 @@
     src: './src',
     out: './dist',
 
-    get scripts() { return this.source + '/js/**/*.js'; },
-    get jsEntry() { return this.source + '/js/index'; }
+    get scripts() { return this.src + '/**/*.js'; },
+    get jsEntry() { return this.src + '/index'; }
 };
 
 // Require all tasks in gulp/tasks, including subfolders
diff --git a/package.json b/package.json
index 82bebce..5132759 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "docs": "./node_modules/.bin/jsdoc -c ./gulp/util/jsdoc.conf.json"
   },
   "devDependencies": {
+    "browserify": "^8.0.2",
     "chai": "^1.10.0",
     "del": "^1.1.0",
     "gulp": "^3.8.10",
@@ -28,11 +29,20 @@
     "gulp-util": "^3.0.1",
     "ink-docstrap": "^0.4.12",
     "jsdoc": "^3.3.0-alpha13",
+    "jshint-summary": "^0.4.0",
     "karma": "^0.12.28",
     "karma-firefox-launcher": "^0.1.0",
     "karma-mocha": "^0.1.10",
     "karma-spec-reporter": "^0.0.16",
     "mocha": "^2.1.0",
-    "run-sequence": "^1.0.2"
+    "require-dir": "^0.1.0",
+    "run-sequence": "^1.0.2",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "dependencies": {
+    "raf": "^2.0.4",
+    "superagent": "^0.21.0",
+    "webgl-enabled": "^1.0.2"
   }
 }
diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js
index bed6259..d8fba7c 100644
--- a/src/extras/TilingSprite.js
+++ b/src/extras/TilingSprite.js
@@ -1,3 +1,6 @@
+var Sprite = require('../display/Sprite'),
+    utils = require('../utils');
+
 /**
  * A tiling sprite is a fast way of rendering a tiling image
  *
@@ -366,8 +369,8 @@
         }
     }
     else {
-        targetWidth = getNextPowerOfTwo(frame.width);
-        targetHeight = getNextPowerOfTwo(frame.height);
+        targetWidth = utils.getNextPowerOfTwo(frame.width);
+        targetHeight = utils.getNextPowerOfTwo(frame.height);
 
         //  If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas
         if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true;

diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }
diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js
index 07cf0d1..80b5ec6 100644
--- a/gulp/tasks/jshint.js
+++ b/gulp/tasks/jshint.js
@@ -3,8 +3,9 @@
     handleErrors = require('../util/handleErrors');
 
 gulp.task('jshint', function () {
+    console.log(paths.scripts, process.cwd());
     return gulp.src(paths.scripts)
         .pipe(handleErrors())
-        .pipe(jshint('../.jshintrc'))
+        .pipe(jshint())
         .pipe(jshint.reporter('jshint-summary'));
 });
diff --git a/gulpfile.js b/gulpfile.js
index 84e7a00..fe1a054 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,8 +21,8 @@
     src: './src',
     out: './dist',
 
-    get scripts() { return this.source + '/js/**/*.js'; },
-    get jsEntry() { return this.source + '/js/index'; }
+    get scripts() { return this.src + '/**/*.js'; },
+    get jsEntry() { return this.src + '/index'; }
 };
 
 // Require all tasks in gulp/tasks, including subfolders
diff --git a/package.json b/package.json
index 82bebce..5132759 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "docs": "./node_modules/.bin/jsdoc -c ./gulp/util/jsdoc.conf.json"
   },
   "devDependencies": {
+    "browserify": "^8.0.2",
     "chai": "^1.10.0",
     "del": "^1.1.0",
     "gulp": "^3.8.10",
@@ -28,11 +29,20 @@
     "gulp-util": "^3.0.1",
     "ink-docstrap": "^0.4.12",
     "jsdoc": "^3.3.0-alpha13",
+    "jshint-summary": "^0.4.0",
     "karma": "^0.12.28",
     "karma-firefox-launcher": "^0.1.0",
     "karma-mocha": "^0.1.10",
     "karma-spec-reporter": "^0.0.16",
     "mocha": "^2.1.0",
-    "run-sequence": "^1.0.2"
+    "require-dir": "^0.1.0",
+    "run-sequence": "^1.0.2",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "dependencies": {
+    "raf": "^2.0.4",
+    "superagent": "^0.21.0",
+    "webgl-enabled": "^1.0.2"
   }
 }
diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js
index bed6259..d8fba7c 100644
--- a/src/extras/TilingSprite.js
+++ b/src/extras/TilingSprite.js
@@ -1,3 +1,6 @@
+var Sprite = require('../display/Sprite'),
+    utils = require('../utils');
+
 /**
  * A tiling sprite is a fast way of rendering a tiling image
  *
@@ -366,8 +369,8 @@
         }
     }
     else {
-        targetWidth = getNextPowerOfTwo(frame.width);
-        targetHeight = getNextPowerOfTwo(frame.height);
+        targetWidth = utils.getNextPowerOfTwo(frame.width);
+        targetHeight = utils.getNextPowerOfTwo(frame.height);
 
         //  If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas
         if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true;
diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js
index e792a92..9da29ef 100644
--- a/src/extras/spine/PIXISpine.js
+++ b/src/extras/spine/PIXISpine.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /* Esoteric Software SPINE wrapper for pixi.js */
 
 spine.Bone.yDown = true;
@@ -137,7 +139,7 @@
 
             slotContainer.rotation = -(slot.bone.worldRotation * spine.degRad);
 
-            slot.currentSprite.tint = rgb2hex([slot.r,slot.g,slot.b]);
+            slot.currentSprite.tint = utils.rgb2hex([slot.r,slot.g,slot.b]);
         }
         else if (type === spine.AttachmentType.skinnedmesh) {
             if (!slot.currentMeshName || slot.currentMeshName !== attachment.name) {

diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }
diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js
index 07cf0d1..80b5ec6 100644
--- a/gulp/tasks/jshint.js
+++ b/gulp/tasks/jshint.js
@@ -3,8 +3,9 @@
     handleErrors = require('../util/handleErrors');
 
 gulp.task('jshint', function () {
+    console.log(paths.scripts, process.cwd());
     return gulp.src(paths.scripts)
         .pipe(handleErrors())
-        .pipe(jshint('../.jshintrc'))
+        .pipe(jshint())
         .pipe(jshint.reporter('jshint-summary'));
 });
diff --git a/gulpfile.js b/gulpfile.js
index 84e7a00..fe1a054 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,8 +21,8 @@
     src: './src',
     out: './dist',
 
-    get scripts() { return this.source + '/js/**/*.js'; },
-    get jsEntry() { return this.source + '/js/index'; }
+    get scripts() { return this.src + '/**/*.js'; },
+    get jsEntry() { return this.src + '/index'; }
 };
 
 // Require all tasks in gulp/tasks, including subfolders
diff --git a/package.json b/package.json
index 82bebce..5132759 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "docs": "./node_modules/.bin/jsdoc -c ./gulp/util/jsdoc.conf.json"
   },
   "devDependencies": {
+    "browserify": "^8.0.2",
     "chai": "^1.10.0",
     "del": "^1.1.0",
     "gulp": "^3.8.10",
@@ -28,11 +29,20 @@
     "gulp-util": "^3.0.1",
     "ink-docstrap": "^0.4.12",
     "jsdoc": "^3.3.0-alpha13",
+    "jshint-summary": "^0.4.0",
     "karma": "^0.12.28",
     "karma-firefox-launcher": "^0.1.0",
     "karma-mocha": "^0.1.10",
     "karma-spec-reporter": "^0.0.16",
     "mocha": "^2.1.0",
-    "run-sequence": "^1.0.2"
+    "require-dir": "^0.1.0",
+    "run-sequence": "^1.0.2",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "dependencies": {
+    "raf": "^2.0.4",
+    "superagent": "^0.21.0",
+    "webgl-enabled": "^1.0.2"
   }
 }
diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js
index bed6259..d8fba7c 100644
--- a/src/extras/TilingSprite.js
+++ b/src/extras/TilingSprite.js
@@ -1,3 +1,6 @@
+var Sprite = require('../display/Sprite'),
+    utils = require('../utils');
+
 /**
  * A tiling sprite is a fast way of rendering a tiling image
  *
@@ -366,8 +369,8 @@
         }
     }
     else {
-        targetWidth = getNextPowerOfTwo(frame.width);
-        targetHeight = getNextPowerOfTwo(frame.height);
+        targetWidth = utils.getNextPowerOfTwo(frame.width);
+        targetHeight = utils.getNextPowerOfTwo(frame.height);
 
         //  If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas
         if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true;
diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js
index e792a92..9da29ef 100644
--- a/src/extras/spine/PIXISpine.js
+++ b/src/extras/spine/PIXISpine.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /* Esoteric Software SPINE wrapper for pixi.js */
 
 spine.Bone.yDown = true;
@@ -137,7 +139,7 @@
 
             slotContainer.rotation = -(slot.bone.worldRotation * spine.degRad);
 
-            slot.currentSprite.tint = rgb2hex([slot.r,slot.g,slot.b]);
+            slot.currentSprite.tint = utils.rgb2hex([slot.r,slot.g,slot.b]);
         }
         else if (type === spine.AttachmentType.skinnedmesh) {
             if (!slot.currentMeshName || slot.currentMeshName !== attachment.name) {
diff --git a/src/index.js b/src/index.js
index 1fdd6bd..2238a0e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,3 @@
-/* global PIXI:true */
 /**
  * @file        Main export of the PIXI library
  * @namespace   PIXI

diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }
diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js
index 07cf0d1..80b5ec6 100644
--- a/gulp/tasks/jshint.js
+++ b/gulp/tasks/jshint.js
@@ -3,8 +3,9 @@
     handleErrors = require('../util/handleErrors');
 
 gulp.task('jshint', function () {
+    console.log(paths.scripts, process.cwd());
     return gulp.src(paths.scripts)
         .pipe(handleErrors())
-        .pipe(jshint('../.jshintrc'))
+        .pipe(jshint())
         .pipe(jshint.reporter('jshint-summary'));
 });
diff --git a/gulpfile.js b/gulpfile.js
index 84e7a00..fe1a054 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,8 +21,8 @@
     src: './src',
     out: './dist',
 
-    get scripts() { return this.source + '/js/**/*.js'; },
-    get jsEntry() { return this.source + '/js/index'; }
+    get scripts() { return this.src + '/**/*.js'; },
+    get jsEntry() { return this.src + '/index'; }
 };
 
 // Require all tasks in gulp/tasks, including subfolders
diff --git a/package.json b/package.json
index 82bebce..5132759 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "docs": "./node_modules/.bin/jsdoc -c ./gulp/util/jsdoc.conf.json"
   },
   "devDependencies": {
+    "browserify": "^8.0.2",
     "chai": "^1.10.0",
     "del": "^1.1.0",
     "gulp": "^3.8.10",
@@ -28,11 +29,20 @@
     "gulp-util": "^3.0.1",
     "ink-docstrap": "^0.4.12",
     "jsdoc": "^3.3.0-alpha13",
+    "jshint-summary": "^0.4.0",
     "karma": "^0.12.28",
     "karma-firefox-launcher": "^0.1.0",
     "karma-mocha": "^0.1.10",
     "karma-spec-reporter": "^0.0.16",
     "mocha": "^2.1.0",
-    "run-sequence": "^1.0.2"
+    "require-dir": "^0.1.0",
+    "run-sequence": "^1.0.2",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "dependencies": {
+    "raf": "^2.0.4",
+    "superagent": "^0.21.0",
+    "webgl-enabled": "^1.0.2"
   }
 }
diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js
index bed6259..d8fba7c 100644
--- a/src/extras/TilingSprite.js
+++ b/src/extras/TilingSprite.js
@@ -1,3 +1,6 @@
+var Sprite = require('../display/Sprite'),
+    utils = require('../utils');
+
 /**
  * A tiling sprite is a fast way of rendering a tiling image
  *
@@ -366,8 +369,8 @@
         }
     }
     else {
-        targetWidth = getNextPowerOfTwo(frame.width);
-        targetHeight = getNextPowerOfTwo(frame.height);
+        targetWidth = utils.getNextPowerOfTwo(frame.width);
+        targetHeight = utils.getNextPowerOfTwo(frame.height);
 
         //  If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas
         if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true;
diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js
index e792a92..9da29ef 100644
--- a/src/extras/spine/PIXISpine.js
+++ b/src/extras/spine/PIXISpine.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /* Esoteric Software SPINE wrapper for pixi.js */
 
 spine.Bone.yDown = true;
@@ -137,7 +139,7 @@
 
             slotContainer.rotation = -(slot.bone.worldRotation * spine.degRad);
 
-            slot.currentSprite.tint = rgb2hex([slot.r,slot.g,slot.b]);
+            slot.currentSprite.tint = utils.rgb2hex([slot.r,slot.g,slot.b]);
         }
         else if (type === spine.AttachmentType.skinnedmesh) {
             if (!slot.currentMeshName || slot.currentMeshName !== attachment.name) {
diff --git a/src/index.js b/src/index.js
index 1fdd6bd..2238a0e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,3 @@
-/* global PIXI:true */
 /**
  * @file        Main export of the PIXI library
  * @namespace   PIXI
diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js
index ab2cd17..4402e77 100644
--- a/src/renderers/canvas/CanvasRenderer.js
+++ b/src/renderers/canvas/CanvasRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /**
  * 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.
  * Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :)
@@ -268,7 +270,7 @@
     if (!blendModesCanvas) {
         blendModesCanvas = [];
 
-        if (canUseNewCanvasBlendModes()) {
+        if (utils.canUseNewCanvasBlendModes()) {
             blendModesCanvas[blendModes.NORMAL]   = "source-over";
             blendModesCanvas[blendModes.ADD]      = "lighter"; //IS THIS OK???
             blendModesCanvas[blendModes.MULTIPLY] = "multiply";

diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }
diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js
index 07cf0d1..80b5ec6 100644
--- a/gulp/tasks/jshint.js
+++ b/gulp/tasks/jshint.js
@@ -3,8 +3,9 @@
     handleErrors = require('../util/handleErrors');
 
 gulp.task('jshint', function () {
+    console.log(paths.scripts, process.cwd());
     return gulp.src(paths.scripts)
         .pipe(handleErrors())
-        .pipe(jshint('../.jshintrc'))
+        .pipe(jshint())
         .pipe(jshint.reporter('jshint-summary'));
 });
diff --git a/gulpfile.js b/gulpfile.js
index 84e7a00..fe1a054 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,8 +21,8 @@
     src: './src',
     out: './dist',
 
-    get scripts() { return this.source + '/js/**/*.js'; },
-    get jsEntry() { return this.source + '/js/index'; }
+    get scripts() { return this.src + '/**/*.js'; },
+    get jsEntry() { return this.src + '/index'; }
 };
 
 // Require all tasks in gulp/tasks, including subfolders
diff --git a/package.json b/package.json
index 82bebce..5132759 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "docs": "./node_modules/.bin/jsdoc -c ./gulp/util/jsdoc.conf.json"
   },
   "devDependencies": {
+    "browserify": "^8.0.2",
     "chai": "^1.10.0",
     "del": "^1.1.0",
     "gulp": "^3.8.10",
@@ -28,11 +29,20 @@
     "gulp-util": "^3.0.1",
     "ink-docstrap": "^0.4.12",
     "jsdoc": "^3.3.0-alpha13",
+    "jshint-summary": "^0.4.0",
     "karma": "^0.12.28",
     "karma-firefox-launcher": "^0.1.0",
     "karma-mocha": "^0.1.10",
     "karma-spec-reporter": "^0.0.16",
     "mocha": "^2.1.0",
-    "run-sequence": "^1.0.2"
+    "require-dir": "^0.1.0",
+    "run-sequence": "^1.0.2",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "dependencies": {
+    "raf": "^2.0.4",
+    "superagent": "^0.21.0",
+    "webgl-enabled": "^1.0.2"
   }
 }
diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js
index bed6259..d8fba7c 100644
--- a/src/extras/TilingSprite.js
+++ b/src/extras/TilingSprite.js
@@ -1,3 +1,6 @@
+var Sprite = require('../display/Sprite'),
+    utils = require('../utils');
+
 /**
  * A tiling sprite is a fast way of rendering a tiling image
  *
@@ -366,8 +369,8 @@
         }
     }
     else {
-        targetWidth = getNextPowerOfTwo(frame.width);
-        targetHeight = getNextPowerOfTwo(frame.height);
+        targetWidth = utils.getNextPowerOfTwo(frame.width);
+        targetHeight = utils.getNextPowerOfTwo(frame.height);
 
         //  If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas
         if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true;
diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js
index e792a92..9da29ef 100644
--- a/src/extras/spine/PIXISpine.js
+++ b/src/extras/spine/PIXISpine.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /* Esoteric Software SPINE wrapper for pixi.js */
 
 spine.Bone.yDown = true;
@@ -137,7 +139,7 @@
 
             slotContainer.rotation = -(slot.bone.worldRotation * spine.degRad);
 
-            slot.currentSprite.tint = rgb2hex([slot.r,slot.g,slot.b]);
+            slot.currentSprite.tint = utils.rgb2hex([slot.r,slot.g,slot.b]);
         }
         else if (type === spine.AttachmentType.skinnedmesh) {
             if (!slot.currentMeshName || slot.currentMeshName !== attachment.name) {
diff --git a/src/index.js b/src/index.js
index 1fdd6bd..2238a0e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,3 @@
-/* global PIXI:true */
 /**
  * @file        Main export of the PIXI library
  * @namespace   PIXI
diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js
index ab2cd17..4402e77 100644
--- a/src/renderers/canvas/CanvasRenderer.js
+++ b/src/renderers/canvas/CanvasRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /**
  * 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.
  * Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :)
@@ -268,7 +270,7 @@
     if (!blendModesCanvas) {
         blendModesCanvas = [];
 
-        if (canUseNewCanvasBlendModes()) {
+        if (utils.canUseNewCanvasBlendModes()) {
             blendModesCanvas[blendModes.NORMAL]   = "source-over";
             blendModesCanvas[blendModes.ADD]      = "lighter"; //IS THIS OK???
             blendModesCanvas[blendModes.MULTIPLY] = "multiply";
diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js
index ba70d9a..3d8e32f 100644
--- a/src/renderers/canvas/utils/CanvasMaskManager.js
+++ b/src/renderers/canvas/utils/CanvasMaskManager.js
@@ -1,3 +1,5 @@
+var CanvasGraphics = require('../CanvasGraphics');
+
 /**
  * A set of functions used to handle masking.
  *

diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }
diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js
index 07cf0d1..80b5ec6 100644
--- a/gulp/tasks/jshint.js
+++ b/gulp/tasks/jshint.js
@@ -3,8 +3,9 @@
     handleErrors = require('../util/handleErrors');
 
 gulp.task('jshint', function () {
+    console.log(paths.scripts, process.cwd());
     return gulp.src(paths.scripts)
         .pipe(handleErrors())
-        .pipe(jshint('../.jshintrc'))
+        .pipe(jshint())
         .pipe(jshint.reporter('jshint-summary'));
 });
diff --git a/gulpfile.js b/gulpfile.js
index 84e7a00..fe1a054 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,8 +21,8 @@
     src: './src',
     out: './dist',
 
-    get scripts() { return this.source + '/js/**/*.js'; },
-    get jsEntry() { return this.source + '/js/index'; }
+    get scripts() { return this.src + '/**/*.js'; },
+    get jsEntry() { return this.src + '/index'; }
 };
 
 // Require all tasks in gulp/tasks, including subfolders
diff --git a/package.json b/package.json
index 82bebce..5132759 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "docs": "./node_modules/.bin/jsdoc -c ./gulp/util/jsdoc.conf.json"
   },
   "devDependencies": {
+    "browserify": "^8.0.2",
     "chai": "^1.10.0",
     "del": "^1.1.0",
     "gulp": "^3.8.10",
@@ -28,11 +29,20 @@
     "gulp-util": "^3.0.1",
     "ink-docstrap": "^0.4.12",
     "jsdoc": "^3.3.0-alpha13",
+    "jshint-summary": "^0.4.0",
     "karma": "^0.12.28",
     "karma-firefox-launcher": "^0.1.0",
     "karma-mocha": "^0.1.10",
     "karma-spec-reporter": "^0.0.16",
     "mocha": "^2.1.0",
-    "run-sequence": "^1.0.2"
+    "require-dir": "^0.1.0",
+    "run-sequence": "^1.0.2",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "dependencies": {
+    "raf": "^2.0.4",
+    "superagent": "^0.21.0",
+    "webgl-enabled": "^1.0.2"
   }
 }
diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js
index bed6259..d8fba7c 100644
--- a/src/extras/TilingSprite.js
+++ b/src/extras/TilingSprite.js
@@ -1,3 +1,6 @@
+var Sprite = require('../display/Sprite'),
+    utils = require('../utils');
+
 /**
  * A tiling sprite is a fast way of rendering a tiling image
  *
@@ -366,8 +369,8 @@
         }
     }
     else {
-        targetWidth = getNextPowerOfTwo(frame.width);
-        targetHeight = getNextPowerOfTwo(frame.height);
+        targetWidth = utils.getNextPowerOfTwo(frame.width);
+        targetHeight = utils.getNextPowerOfTwo(frame.height);
 
         //  If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas
         if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true;
diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js
index e792a92..9da29ef 100644
--- a/src/extras/spine/PIXISpine.js
+++ b/src/extras/spine/PIXISpine.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /* Esoteric Software SPINE wrapper for pixi.js */
 
 spine.Bone.yDown = true;
@@ -137,7 +139,7 @@
 
             slotContainer.rotation = -(slot.bone.worldRotation * spine.degRad);
 
-            slot.currentSprite.tint = rgb2hex([slot.r,slot.g,slot.b]);
+            slot.currentSprite.tint = utils.rgb2hex([slot.r,slot.g,slot.b]);
         }
         else if (type === spine.AttachmentType.skinnedmesh) {
             if (!slot.currentMeshName || slot.currentMeshName !== attachment.name) {
diff --git a/src/index.js b/src/index.js
index 1fdd6bd..2238a0e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,3 @@
-/* global PIXI:true */
 /**
  * @file        Main export of the PIXI library
  * @namespace   PIXI
diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js
index ab2cd17..4402e77 100644
--- a/src/renderers/canvas/CanvasRenderer.js
+++ b/src/renderers/canvas/CanvasRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /**
  * 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.
  * Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :)
@@ -268,7 +270,7 @@
     if (!blendModesCanvas) {
         blendModesCanvas = [];
 
-        if (canUseNewCanvasBlendModes()) {
+        if (utils.canUseNewCanvasBlendModes()) {
             blendModesCanvas[blendModes.NORMAL]   = "source-over";
             blendModesCanvas[blendModes.ADD]      = "lighter"; //IS THIS OK???
             blendModesCanvas[blendModes.MULTIPLY] = "multiply";
diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js
index ba70d9a..3d8e32f 100644
--- a/src/renderers/canvas/utils/CanvasMaskManager.js
+++ b/src/renderers/canvas/utils/CanvasMaskManager.js
@@ -1,3 +1,5 @@
+var CanvasGraphics = require('../CanvasGraphics');
+
 /**
  * A set of functions used to handle masking.
  *
diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js
index acd4441..d14f59c 100644
--- a/src/renderers/canvas/utils/CanvasTinter.js
+++ b/src/renderers/canvas/utils/CanvasTinter.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * Utility methods for Sprite/Texture tinting.
  *
@@ -21,7 +23,9 @@
 
     texture.tintCache = texture.tintCache || {};
 
-    if (texture.tintCache[stringColor]) return texture.tintCache[stringColor];
+    if (texture.tintCache[stringColor]) {
+        return texture.tintCache[stringColor];
+    }
 
      // clone texture..
     var canvas = CanvasTinter.canvas || document.createElement("canvas");
@@ -156,7 +160,7 @@
         crop.height
     );
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
     var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2];
 
     var pixelData = context.getImageData(0, 0, crop.width, crop.height);
@@ -180,13 +184,13 @@
 CanvasTinter.roundColor = function (color) {
     var step = CanvasTinter.cacheStepsPerColorChannel;
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
 
     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 rgb2hex(rgbValues);
+    return utils.rgb2hex(rgbValues);
 };
 
 /**
@@ -208,7 +212,7 @@
  *
  * @member
  */
-CanvasTinter.canUseMultiply = canUseNewCanvasBlendModes();
+CanvasTinter.canUseMultiply = utils.canUseNewCanvasBlendModes();
 
 /**
  * The tinting method that will be used.

diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }
diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js
index 07cf0d1..80b5ec6 100644
--- a/gulp/tasks/jshint.js
+++ b/gulp/tasks/jshint.js
@@ -3,8 +3,9 @@
     handleErrors = require('../util/handleErrors');
 
 gulp.task('jshint', function () {
+    console.log(paths.scripts, process.cwd());
     return gulp.src(paths.scripts)
         .pipe(handleErrors())
-        .pipe(jshint('../.jshintrc'))
+        .pipe(jshint())
         .pipe(jshint.reporter('jshint-summary'));
 });
diff --git a/gulpfile.js b/gulpfile.js
index 84e7a00..fe1a054 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,8 +21,8 @@
     src: './src',
     out: './dist',
 
-    get scripts() { return this.source + '/js/**/*.js'; },
-    get jsEntry() { return this.source + '/js/index'; }
+    get scripts() { return this.src + '/**/*.js'; },
+    get jsEntry() { return this.src + '/index'; }
 };
 
 // Require all tasks in gulp/tasks, including subfolders
diff --git a/package.json b/package.json
index 82bebce..5132759 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "docs": "./node_modules/.bin/jsdoc -c ./gulp/util/jsdoc.conf.json"
   },
   "devDependencies": {
+    "browserify": "^8.0.2",
     "chai": "^1.10.0",
     "del": "^1.1.0",
     "gulp": "^3.8.10",
@@ -28,11 +29,20 @@
     "gulp-util": "^3.0.1",
     "ink-docstrap": "^0.4.12",
     "jsdoc": "^3.3.0-alpha13",
+    "jshint-summary": "^0.4.0",
     "karma": "^0.12.28",
     "karma-firefox-launcher": "^0.1.0",
     "karma-mocha": "^0.1.10",
     "karma-spec-reporter": "^0.0.16",
     "mocha": "^2.1.0",
-    "run-sequence": "^1.0.2"
+    "require-dir": "^0.1.0",
+    "run-sequence": "^1.0.2",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "dependencies": {
+    "raf": "^2.0.4",
+    "superagent": "^0.21.0",
+    "webgl-enabled": "^1.0.2"
   }
 }
diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js
index bed6259..d8fba7c 100644
--- a/src/extras/TilingSprite.js
+++ b/src/extras/TilingSprite.js
@@ -1,3 +1,6 @@
+var Sprite = require('../display/Sprite'),
+    utils = require('../utils');
+
 /**
  * A tiling sprite is a fast way of rendering a tiling image
  *
@@ -366,8 +369,8 @@
         }
     }
     else {
-        targetWidth = getNextPowerOfTwo(frame.width);
-        targetHeight = getNextPowerOfTwo(frame.height);
+        targetWidth = utils.getNextPowerOfTwo(frame.width);
+        targetHeight = utils.getNextPowerOfTwo(frame.height);
 
         //  If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas
         if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true;
diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js
index e792a92..9da29ef 100644
--- a/src/extras/spine/PIXISpine.js
+++ b/src/extras/spine/PIXISpine.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /* Esoteric Software SPINE wrapper for pixi.js */
 
 spine.Bone.yDown = true;
@@ -137,7 +139,7 @@
 
             slotContainer.rotation = -(slot.bone.worldRotation * spine.degRad);
 
-            slot.currentSprite.tint = rgb2hex([slot.r,slot.g,slot.b]);
+            slot.currentSprite.tint = utils.rgb2hex([slot.r,slot.g,slot.b]);
         }
         else if (type === spine.AttachmentType.skinnedmesh) {
             if (!slot.currentMeshName || slot.currentMeshName !== attachment.name) {
diff --git a/src/index.js b/src/index.js
index 1fdd6bd..2238a0e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,3 @@
-/* global PIXI:true */
 /**
  * @file        Main export of the PIXI library
  * @namespace   PIXI
diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js
index ab2cd17..4402e77 100644
--- a/src/renderers/canvas/CanvasRenderer.js
+++ b/src/renderers/canvas/CanvasRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /**
  * 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.
  * Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :)
@@ -268,7 +270,7 @@
     if (!blendModesCanvas) {
         blendModesCanvas = [];
 
-        if (canUseNewCanvasBlendModes()) {
+        if (utils.canUseNewCanvasBlendModes()) {
             blendModesCanvas[blendModes.NORMAL]   = "source-over";
             blendModesCanvas[blendModes.ADD]      = "lighter"; //IS THIS OK???
             blendModesCanvas[blendModes.MULTIPLY] = "multiply";
diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js
index ba70d9a..3d8e32f 100644
--- a/src/renderers/canvas/utils/CanvasMaskManager.js
+++ b/src/renderers/canvas/utils/CanvasMaskManager.js
@@ -1,3 +1,5 @@
+var CanvasGraphics = require('../CanvasGraphics');
+
 /**
  * A set of functions used to handle masking.
  *
diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js
index acd4441..d14f59c 100644
--- a/src/renderers/canvas/utils/CanvasTinter.js
+++ b/src/renderers/canvas/utils/CanvasTinter.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * Utility methods for Sprite/Texture tinting.
  *
@@ -21,7 +23,9 @@
 
     texture.tintCache = texture.tintCache || {};
 
-    if (texture.tintCache[stringColor]) return texture.tintCache[stringColor];
+    if (texture.tintCache[stringColor]) {
+        return texture.tintCache[stringColor];
+    }
 
      // clone texture..
     var canvas = CanvasTinter.canvas || document.createElement("canvas");
@@ -156,7 +160,7 @@
         crop.height
     );
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
     var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2];
 
     var pixelData = context.getImageData(0, 0, crop.width, crop.height);
@@ -180,13 +184,13 @@
 CanvasTinter.roundColor = function (color) {
     var step = CanvasTinter.cacheStepsPerColorChannel;
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
 
     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 rgb2hex(rgbValues);
+    return utils.rgb2hex(rgbValues);
 };
 
 /**
@@ -208,7 +212,7 @@
  *
  * @member
  */
-CanvasTinter.canUseMultiply = canUseNewCanvasBlendModes();
+CanvasTinter.canUseMultiply = utils.canUseNewCanvasBlendModes();
 
 /**
  * The tinting method that will be used.
diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js
index d43e680..7eb67ef 100644
--- a/src/renderers/webgl/WebGLRenderer.js
+++ b/src/renderers/webgl/WebGLRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 glContexts = []; // this is where we store the webGL contexts for easy access.
 instances = [];
 
@@ -380,7 +382,7 @@
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST);
 
 
-    if (texture.mipmap && isPowerOfTwo(texture.width, texture.height)) {
+    if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST);
         gl.generateMipmap(gl.TEXTURE_2D);
     }

diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }
diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js
index 07cf0d1..80b5ec6 100644
--- a/gulp/tasks/jshint.js
+++ b/gulp/tasks/jshint.js
@@ -3,8 +3,9 @@
     handleErrors = require('../util/handleErrors');
 
 gulp.task('jshint', function () {
+    console.log(paths.scripts, process.cwd());
     return gulp.src(paths.scripts)
         .pipe(handleErrors())
-        .pipe(jshint('../.jshintrc'))
+        .pipe(jshint())
         .pipe(jshint.reporter('jshint-summary'));
 });
diff --git a/gulpfile.js b/gulpfile.js
index 84e7a00..fe1a054 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,8 +21,8 @@
     src: './src',
     out: './dist',
 
-    get scripts() { return this.source + '/js/**/*.js'; },
-    get jsEntry() { return this.source + '/js/index'; }
+    get scripts() { return this.src + '/**/*.js'; },
+    get jsEntry() { return this.src + '/index'; }
 };
 
 // Require all tasks in gulp/tasks, including subfolders
diff --git a/package.json b/package.json
index 82bebce..5132759 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "docs": "./node_modules/.bin/jsdoc -c ./gulp/util/jsdoc.conf.json"
   },
   "devDependencies": {
+    "browserify": "^8.0.2",
     "chai": "^1.10.0",
     "del": "^1.1.0",
     "gulp": "^3.8.10",
@@ -28,11 +29,20 @@
     "gulp-util": "^3.0.1",
     "ink-docstrap": "^0.4.12",
     "jsdoc": "^3.3.0-alpha13",
+    "jshint-summary": "^0.4.0",
     "karma": "^0.12.28",
     "karma-firefox-launcher": "^0.1.0",
     "karma-mocha": "^0.1.10",
     "karma-spec-reporter": "^0.0.16",
     "mocha": "^2.1.0",
-    "run-sequence": "^1.0.2"
+    "require-dir": "^0.1.0",
+    "run-sequence": "^1.0.2",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "dependencies": {
+    "raf": "^2.0.4",
+    "superagent": "^0.21.0",
+    "webgl-enabled": "^1.0.2"
   }
 }
diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js
index bed6259..d8fba7c 100644
--- a/src/extras/TilingSprite.js
+++ b/src/extras/TilingSprite.js
@@ -1,3 +1,6 @@
+var Sprite = require('../display/Sprite'),
+    utils = require('../utils');
+
 /**
  * A tiling sprite is a fast way of rendering a tiling image
  *
@@ -366,8 +369,8 @@
         }
     }
     else {
-        targetWidth = getNextPowerOfTwo(frame.width);
-        targetHeight = getNextPowerOfTwo(frame.height);
+        targetWidth = utils.getNextPowerOfTwo(frame.width);
+        targetHeight = utils.getNextPowerOfTwo(frame.height);
 
         //  If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas
         if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true;
diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js
index e792a92..9da29ef 100644
--- a/src/extras/spine/PIXISpine.js
+++ b/src/extras/spine/PIXISpine.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /* Esoteric Software SPINE wrapper for pixi.js */
 
 spine.Bone.yDown = true;
@@ -137,7 +139,7 @@
 
             slotContainer.rotation = -(slot.bone.worldRotation * spine.degRad);
 
-            slot.currentSprite.tint = rgb2hex([slot.r,slot.g,slot.b]);
+            slot.currentSprite.tint = utils.rgb2hex([slot.r,slot.g,slot.b]);
         }
         else if (type === spine.AttachmentType.skinnedmesh) {
             if (!slot.currentMeshName || slot.currentMeshName !== attachment.name) {
diff --git a/src/index.js b/src/index.js
index 1fdd6bd..2238a0e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,3 @@
-/* global PIXI:true */
 /**
  * @file        Main export of the PIXI library
  * @namespace   PIXI
diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js
index ab2cd17..4402e77 100644
--- a/src/renderers/canvas/CanvasRenderer.js
+++ b/src/renderers/canvas/CanvasRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /**
  * 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.
  * Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :)
@@ -268,7 +270,7 @@
     if (!blendModesCanvas) {
         blendModesCanvas = [];
 
-        if (canUseNewCanvasBlendModes()) {
+        if (utils.canUseNewCanvasBlendModes()) {
             blendModesCanvas[blendModes.NORMAL]   = "source-over";
             blendModesCanvas[blendModes.ADD]      = "lighter"; //IS THIS OK???
             blendModesCanvas[blendModes.MULTIPLY] = "multiply";
diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js
index ba70d9a..3d8e32f 100644
--- a/src/renderers/canvas/utils/CanvasMaskManager.js
+++ b/src/renderers/canvas/utils/CanvasMaskManager.js
@@ -1,3 +1,5 @@
+var CanvasGraphics = require('../CanvasGraphics');
+
 /**
  * A set of functions used to handle masking.
  *
diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js
index acd4441..d14f59c 100644
--- a/src/renderers/canvas/utils/CanvasTinter.js
+++ b/src/renderers/canvas/utils/CanvasTinter.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * Utility methods for Sprite/Texture tinting.
  *
@@ -21,7 +23,9 @@
 
     texture.tintCache = texture.tintCache || {};
 
-    if (texture.tintCache[stringColor]) return texture.tintCache[stringColor];
+    if (texture.tintCache[stringColor]) {
+        return texture.tintCache[stringColor];
+    }
 
      // clone texture..
     var canvas = CanvasTinter.canvas || document.createElement("canvas");
@@ -156,7 +160,7 @@
         crop.height
     );
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
     var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2];
 
     var pixelData = context.getImageData(0, 0, crop.width, crop.height);
@@ -180,13 +184,13 @@
 CanvasTinter.roundColor = function (color) {
     var step = CanvasTinter.cacheStepsPerColorChannel;
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
 
     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 rgb2hex(rgbValues);
+    return utils.rgb2hex(rgbValues);
 };
 
 /**
@@ -208,7 +212,7 @@
  *
  * @member
  */
-CanvasTinter.canUseMultiply = canUseNewCanvasBlendModes();
+CanvasTinter.canUseMultiply = utils.canUseNewCanvasBlendModes();
 
 /**
  * The tinting method that will be used.
diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js
index d43e680..7eb67ef 100644
--- a/src/renderers/webgl/WebGLRenderer.js
+++ b/src/renderers/webgl/WebGLRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 glContexts = []; // this is where we store the webGL contexts for easy access.
 instances = [];
 
@@ -380,7 +382,7 @@
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST);
 
 
-    if (texture.mipmap && isPowerOfTwo(texture.width, texture.height)) {
+    if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST);
         gl.generateMipmap(gl.TEXTURE_2D);
     }
diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js
index c7c7772..8f333f2 100644
--- a/src/renderers/webgl/utils/WebGLGraphics.js
+++ b/src/renderers/webgl/utils/WebGLGraphics.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * A set of functions used by the webGL renderer to draw the primitive graphics data
  *
@@ -53,7 +55,7 @@
             gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
             gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-            gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+            gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
 
             gl.uniform1f(shader.alpha, graphics.worldAlpha);
 
@@ -224,7 +226,7 @@
     var height = rectData.height;
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -294,7 +296,7 @@
     recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x + radius, y, x, y, x, y + radius));
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -348,7 +350,7 @@
  * @param cpY {number} Control point y
  * @param toX {number} Destination point x
  * @param toY {number} Destination point y
- * @return {Array(Number)}
+ * @return {number[]}
  */
 WebGLGraphics.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) {
 
@@ -418,7 +420,7 @@
     var i = 0;
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -513,7 +515,7 @@
     var width = graphicsData.lineWidth / 2;
 
     // sort color
-    var color = hex2rgb(graphicsData.lineColor);
+    var color = utils.hex2rgb(graphicsData.lineColor);
     var alpha = graphicsData.lineAlpha;
     var r = color[0] * alpha;
     var g = color[1] * alpha;
@@ -681,7 +683,7 @@
     var indices = webGLData.indices;
     webGLData.points = points;
     webGLData.alpha = graphicsData.fillAlpha;
-    webGLData.color = hex2rgb(graphicsData.fillColor);
+    webGLData.color = utils.hex2rgb(graphicsData.fillColor);
 
     /*
         calclate the bounds..
@@ -741,7 +743,7 @@
     var length = points.length / 2;
 
     // sort color
-    var color = hex2rgb(graphicsData.fillColor);
+    var color = utils.hex2rgb(graphicsData.fillColor);
     var alpha = graphicsData.fillAlpha;
     var r = color[0] * alpha;
     var g = color[1] * alpha;

diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }
diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js
index 07cf0d1..80b5ec6 100644
--- a/gulp/tasks/jshint.js
+++ b/gulp/tasks/jshint.js
@@ -3,8 +3,9 @@
     handleErrors = require('../util/handleErrors');
 
 gulp.task('jshint', function () {
+    console.log(paths.scripts, process.cwd());
     return gulp.src(paths.scripts)
         .pipe(handleErrors())
-        .pipe(jshint('../.jshintrc'))
+        .pipe(jshint())
         .pipe(jshint.reporter('jshint-summary'));
 });
diff --git a/gulpfile.js b/gulpfile.js
index 84e7a00..fe1a054 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,8 +21,8 @@
     src: './src',
     out: './dist',
 
-    get scripts() { return this.source + '/js/**/*.js'; },
-    get jsEntry() { return this.source + '/js/index'; }
+    get scripts() { return this.src + '/**/*.js'; },
+    get jsEntry() { return this.src + '/index'; }
 };
 
 // Require all tasks in gulp/tasks, including subfolders
diff --git a/package.json b/package.json
index 82bebce..5132759 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "docs": "./node_modules/.bin/jsdoc -c ./gulp/util/jsdoc.conf.json"
   },
   "devDependencies": {
+    "browserify": "^8.0.2",
     "chai": "^1.10.0",
     "del": "^1.1.0",
     "gulp": "^3.8.10",
@@ -28,11 +29,20 @@
     "gulp-util": "^3.0.1",
     "ink-docstrap": "^0.4.12",
     "jsdoc": "^3.3.0-alpha13",
+    "jshint-summary": "^0.4.0",
     "karma": "^0.12.28",
     "karma-firefox-launcher": "^0.1.0",
     "karma-mocha": "^0.1.10",
     "karma-spec-reporter": "^0.0.16",
     "mocha": "^2.1.0",
-    "run-sequence": "^1.0.2"
+    "require-dir": "^0.1.0",
+    "run-sequence": "^1.0.2",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "dependencies": {
+    "raf": "^2.0.4",
+    "superagent": "^0.21.0",
+    "webgl-enabled": "^1.0.2"
   }
 }
diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js
index bed6259..d8fba7c 100644
--- a/src/extras/TilingSprite.js
+++ b/src/extras/TilingSprite.js
@@ -1,3 +1,6 @@
+var Sprite = require('../display/Sprite'),
+    utils = require('../utils');
+
 /**
  * A tiling sprite is a fast way of rendering a tiling image
  *
@@ -366,8 +369,8 @@
         }
     }
     else {
-        targetWidth = getNextPowerOfTwo(frame.width);
-        targetHeight = getNextPowerOfTwo(frame.height);
+        targetWidth = utils.getNextPowerOfTwo(frame.width);
+        targetHeight = utils.getNextPowerOfTwo(frame.height);
 
         //  If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas
         if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true;
diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js
index e792a92..9da29ef 100644
--- a/src/extras/spine/PIXISpine.js
+++ b/src/extras/spine/PIXISpine.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /* Esoteric Software SPINE wrapper for pixi.js */
 
 spine.Bone.yDown = true;
@@ -137,7 +139,7 @@
 
             slotContainer.rotation = -(slot.bone.worldRotation * spine.degRad);
 
-            slot.currentSprite.tint = rgb2hex([slot.r,slot.g,slot.b]);
+            slot.currentSprite.tint = utils.rgb2hex([slot.r,slot.g,slot.b]);
         }
         else if (type === spine.AttachmentType.skinnedmesh) {
             if (!slot.currentMeshName || slot.currentMeshName !== attachment.name) {
diff --git a/src/index.js b/src/index.js
index 1fdd6bd..2238a0e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,3 @@
-/* global PIXI:true */
 /**
  * @file        Main export of the PIXI library
  * @namespace   PIXI
diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js
index ab2cd17..4402e77 100644
--- a/src/renderers/canvas/CanvasRenderer.js
+++ b/src/renderers/canvas/CanvasRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /**
  * 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.
  * Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :)
@@ -268,7 +270,7 @@
     if (!blendModesCanvas) {
         blendModesCanvas = [];
 
-        if (canUseNewCanvasBlendModes()) {
+        if (utils.canUseNewCanvasBlendModes()) {
             blendModesCanvas[blendModes.NORMAL]   = "source-over";
             blendModesCanvas[blendModes.ADD]      = "lighter"; //IS THIS OK???
             blendModesCanvas[blendModes.MULTIPLY] = "multiply";
diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js
index ba70d9a..3d8e32f 100644
--- a/src/renderers/canvas/utils/CanvasMaskManager.js
+++ b/src/renderers/canvas/utils/CanvasMaskManager.js
@@ -1,3 +1,5 @@
+var CanvasGraphics = require('../CanvasGraphics');
+
 /**
  * A set of functions used to handle masking.
  *
diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js
index acd4441..d14f59c 100644
--- a/src/renderers/canvas/utils/CanvasTinter.js
+++ b/src/renderers/canvas/utils/CanvasTinter.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * Utility methods for Sprite/Texture tinting.
  *
@@ -21,7 +23,9 @@
 
     texture.tintCache = texture.tintCache || {};
 
-    if (texture.tintCache[stringColor]) return texture.tintCache[stringColor];
+    if (texture.tintCache[stringColor]) {
+        return texture.tintCache[stringColor];
+    }
 
      // clone texture..
     var canvas = CanvasTinter.canvas || document.createElement("canvas");
@@ -156,7 +160,7 @@
         crop.height
     );
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
     var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2];
 
     var pixelData = context.getImageData(0, 0, crop.width, crop.height);
@@ -180,13 +184,13 @@
 CanvasTinter.roundColor = function (color) {
     var step = CanvasTinter.cacheStepsPerColorChannel;
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
 
     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 rgb2hex(rgbValues);
+    return utils.rgb2hex(rgbValues);
 };
 
 /**
@@ -208,7 +212,7 @@
  *
  * @member
  */
-CanvasTinter.canUseMultiply = canUseNewCanvasBlendModes();
+CanvasTinter.canUseMultiply = utils.canUseNewCanvasBlendModes();
 
 /**
  * The tinting method that will be used.
diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js
index d43e680..7eb67ef 100644
--- a/src/renderers/webgl/WebGLRenderer.js
+++ b/src/renderers/webgl/WebGLRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 glContexts = []; // this is where we store the webGL contexts for easy access.
 instances = [];
 
@@ -380,7 +382,7 @@
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST);
 
 
-    if (texture.mipmap && isPowerOfTwo(texture.width, texture.height)) {
+    if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST);
         gl.generateMipmap(gl.TEXTURE_2D);
     }
diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js
index c7c7772..8f333f2 100644
--- a/src/renderers/webgl/utils/WebGLGraphics.js
+++ b/src/renderers/webgl/utils/WebGLGraphics.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * A set of functions used by the webGL renderer to draw the primitive graphics data
  *
@@ -53,7 +55,7 @@
             gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
             gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-            gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+            gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
 
             gl.uniform1f(shader.alpha, graphics.worldAlpha);
 
@@ -224,7 +226,7 @@
     var height = rectData.height;
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -294,7 +296,7 @@
     recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x + radius, y, x, y, x, y + radius));
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -348,7 +350,7 @@
  * @param cpY {number} Control point y
  * @param toX {number} Destination point x
  * @param toY {number} Destination point y
- * @return {Array(Number)}
+ * @return {number[]}
  */
 WebGLGraphics.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) {
 
@@ -418,7 +420,7 @@
     var i = 0;
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -513,7 +515,7 @@
     var width = graphicsData.lineWidth / 2;
 
     // sort color
-    var color = hex2rgb(graphicsData.lineColor);
+    var color = utils.hex2rgb(graphicsData.lineColor);
     var alpha = graphicsData.lineAlpha;
     var r = color[0] * alpha;
     var g = color[1] * alpha;
@@ -681,7 +683,7 @@
     var indices = webGLData.indices;
     webGLData.points = points;
     webGLData.alpha = graphicsData.fillAlpha;
-    webGLData.color = hex2rgb(graphicsData.fillColor);
+    webGLData.color = utils.hex2rgb(graphicsData.fillColor);
 
     /*
         calclate the bounds..
@@ -741,7 +743,7 @@
     var length = points.length / 2;
 
     // sort color
-    var color = hex2rgb(graphicsData.fillColor);
+    var color = utils.hex2rgb(graphicsData.fillColor);
     var alpha = graphicsData.fillAlpha;
     var r = color[0] * alpha;
     var g = color[1] * alpha;
diff --git a/src/renderers/webgl/utils/WebGLStencilManager.js b/src/renderers/webgl/utils/WebGLStencilManager.js
index bf7dd73..40c2acc 100644
--- a/src/renderers/webgl/utils/WebGLStencilManager.js
+++ b/src/renderers/webgl/utils/WebGLStencilManager.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * @class
  * @namespace PIXI
@@ -130,7 +132,7 @@
         gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
         gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-        gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+        gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
         gl.uniform3fv(shader.color, webGLData.color);
 
         gl.uniform1f(shader.alpha, graphics.worldAlpha * webGLData.alpha);
@@ -155,7 +157,7 @@
         gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
         gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-        gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+        gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
 
         gl.uniform1f(shader.alpha, graphics.worldAlpha);
 

diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }
diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js
index 07cf0d1..80b5ec6 100644
--- a/gulp/tasks/jshint.js
+++ b/gulp/tasks/jshint.js
@@ -3,8 +3,9 @@
     handleErrors = require('../util/handleErrors');
 
 gulp.task('jshint', function () {
+    console.log(paths.scripts, process.cwd());
     return gulp.src(paths.scripts)
         .pipe(handleErrors())
-        .pipe(jshint('../.jshintrc'))
+        .pipe(jshint())
         .pipe(jshint.reporter('jshint-summary'));
 });
diff --git a/gulpfile.js b/gulpfile.js
index 84e7a00..fe1a054 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,8 +21,8 @@
     src: './src',
     out: './dist',
 
-    get scripts() { return this.source + '/js/**/*.js'; },
-    get jsEntry() { return this.source + '/js/index'; }
+    get scripts() { return this.src + '/**/*.js'; },
+    get jsEntry() { return this.src + '/index'; }
 };
 
 // Require all tasks in gulp/tasks, including subfolders
diff --git a/package.json b/package.json
index 82bebce..5132759 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "docs": "./node_modules/.bin/jsdoc -c ./gulp/util/jsdoc.conf.json"
   },
   "devDependencies": {
+    "browserify": "^8.0.2",
     "chai": "^1.10.0",
     "del": "^1.1.0",
     "gulp": "^3.8.10",
@@ -28,11 +29,20 @@
     "gulp-util": "^3.0.1",
     "ink-docstrap": "^0.4.12",
     "jsdoc": "^3.3.0-alpha13",
+    "jshint-summary": "^0.4.0",
     "karma": "^0.12.28",
     "karma-firefox-launcher": "^0.1.0",
     "karma-mocha": "^0.1.10",
     "karma-spec-reporter": "^0.0.16",
     "mocha": "^2.1.0",
-    "run-sequence": "^1.0.2"
+    "require-dir": "^0.1.0",
+    "run-sequence": "^1.0.2",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "dependencies": {
+    "raf": "^2.0.4",
+    "superagent": "^0.21.0",
+    "webgl-enabled": "^1.0.2"
   }
 }
diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js
index bed6259..d8fba7c 100644
--- a/src/extras/TilingSprite.js
+++ b/src/extras/TilingSprite.js
@@ -1,3 +1,6 @@
+var Sprite = require('../display/Sprite'),
+    utils = require('../utils');
+
 /**
  * A tiling sprite is a fast way of rendering a tiling image
  *
@@ -366,8 +369,8 @@
         }
     }
     else {
-        targetWidth = getNextPowerOfTwo(frame.width);
-        targetHeight = getNextPowerOfTwo(frame.height);
+        targetWidth = utils.getNextPowerOfTwo(frame.width);
+        targetHeight = utils.getNextPowerOfTwo(frame.height);
 
         //  If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas
         if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true;
diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js
index e792a92..9da29ef 100644
--- a/src/extras/spine/PIXISpine.js
+++ b/src/extras/spine/PIXISpine.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /* Esoteric Software SPINE wrapper for pixi.js */
 
 spine.Bone.yDown = true;
@@ -137,7 +139,7 @@
 
             slotContainer.rotation = -(slot.bone.worldRotation * spine.degRad);
 
-            slot.currentSprite.tint = rgb2hex([slot.r,slot.g,slot.b]);
+            slot.currentSprite.tint = utils.rgb2hex([slot.r,slot.g,slot.b]);
         }
         else if (type === spine.AttachmentType.skinnedmesh) {
             if (!slot.currentMeshName || slot.currentMeshName !== attachment.name) {
diff --git a/src/index.js b/src/index.js
index 1fdd6bd..2238a0e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,3 @@
-/* global PIXI:true */
 /**
  * @file        Main export of the PIXI library
  * @namespace   PIXI
diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js
index ab2cd17..4402e77 100644
--- a/src/renderers/canvas/CanvasRenderer.js
+++ b/src/renderers/canvas/CanvasRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /**
  * 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.
  * Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :)
@@ -268,7 +270,7 @@
     if (!blendModesCanvas) {
         blendModesCanvas = [];
 
-        if (canUseNewCanvasBlendModes()) {
+        if (utils.canUseNewCanvasBlendModes()) {
             blendModesCanvas[blendModes.NORMAL]   = "source-over";
             blendModesCanvas[blendModes.ADD]      = "lighter"; //IS THIS OK???
             blendModesCanvas[blendModes.MULTIPLY] = "multiply";
diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js
index ba70d9a..3d8e32f 100644
--- a/src/renderers/canvas/utils/CanvasMaskManager.js
+++ b/src/renderers/canvas/utils/CanvasMaskManager.js
@@ -1,3 +1,5 @@
+var CanvasGraphics = require('../CanvasGraphics');
+
 /**
  * A set of functions used to handle masking.
  *
diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js
index acd4441..d14f59c 100644
--- a/src/renderers/canvas/utils/CanvasTinter.js
+++ b/src/renderers/canvas/utils/CanvasTinter.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * Utility methods for Sprite/Texture tinting.
  *
@@ -21,7 +23,9 @@
 
     texture.tintCache = texture.tintCache || {};
 
-    if (texture.tintCache[stringColor]) return texture.tintCache[stringColor];
+    if (texture.tintCache[stringColor]) {
+        return texture.tintCache[stringColor];
+    }
 
      // clone texture..
     var canvas = CanvasTinter.canvas || document.createElement("canvas");
@@ -156,7 +160,7 @@
         crop.height
     );
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
     var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2];
 
     var pixelData = context.getImageData(0, 0, crop.width, crop.height);
@@ -180,13 +184,13 @@
 CanvasTinter.roundColor = function (color) {
     var step = CanvasTinter.cacheStepsPerColorChannel;
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
 
     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 rgb2hex(rgbValues);
+    return utils.rgb2hex(rgbValues);
 };
 
 /**
@@ -208,7 +212,7 @@
  *
  * @member
  */
-CanvasTinter.canUseMultiply = canUseNewCanvasBlendModes();
+CanvasTinter.canUseMultiply = utils.canUseNewCanvasBlendModes();
 
 /**
  * The tinting method that will be used.
diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js
index d43e680..7eb67ef 100644
--- a/src/renderers/webgl/WebGLRenderer.js
+++ b/src/renderers/webgl/WebGLRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 glContexts = []; // this is where we store the webGL contexts for easy access.
 instances = [];
 
@@ -380,7 +382,7 @@
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST);
 
 
-    if (texture.mipmap && isPowerOfTwo(texture.width, texture.height)) {
+    if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST);
         gl.generateMipmap(gl.TEXTURE_2D);
     }
diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js
index c7c7772..8f333f2 100644
--- a/src/renderers/webgl/utils/WebGLGraphics.js
+++ b/src/renderers/webgl/utils/WebGLGraphics.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * A set of functions used by the webGL renderer to draw the primitive graphics data
  *
@@ -53,7 +55,7 @@
             gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
             gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-            gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+            gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
 
             gl.uniform1f(shader.alpha, graphics.worldAlpha);
 
@@ -224,7 +226,7 @@
     var height = rectData.height;
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -294,7 +296,7 @@
     recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x + radius, y, x, y, x, y + radius));
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -348,7 +350,7 @@
  * @param cpY {number} Control point y
  * @param toX {number} Destination point x
  * @param toY {number} Destination point y
- * @return {Array(Number)}
+ * @return {number[]}
  */
 WebGLGraphics.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) {
 
@@ -418,7 +420,7 @@
     var i = 0;
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -513,7 +515,7 @@
     var width = graphicsData.lineWidth / 2;
 
     // sort color
-    var color = hex2rgb(graphicsData.lineColor);
+    var color = utils.hex2rgb(graphicsData.lineColor);
     var alpha = graphicsData.lineAlpha;
     var r = color[0] * alpha;
     var g = color[1] * alpha;
@@ -681,7 +683,7 @@
     var indices = webGLData.indices;
     webGLData.points = points;
     webGLData.alpha = graphicsData.fillAlpha;
-    webGLData.color = hex2rgb(graphicsData.fillColor);
+    webGLData.color = utils.hex2rgb(graphicsData.fillColor);
 
     /*
         calclate the bounds..
@@ -741,7 +743,7 @@
     var length = points.length / 2;
 
     // sort color
-    var color = hex2rgb(graphicsData.fillColor);
+    var color = utils.hex2rgb(graphicsData.fillColor);
     var alpha = graphicsData.fillAlpha;
     var r = color[0] * alpha;
     var g = color[1] * alpha;
diff --git a/src/renderers/webgl/utils/WebGLStencilManager.js b/src/renderers/webgl/utils/WebGLStencilManager.js
index bf7dd73..40c2acc 100644
--- a/src/renderers/webgl/utils/WebGLStencilManager.js
+++ b/src/renderers/webgl/utils/WebGLStencilManager.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * @class
  * @namespace PIXI
@@ -130,7 +132,7 @@
         gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
         gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-        gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+        gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
         gl.uniform3fv(shader.color, webGLData.color);
 
         gl.uniform1f(shader.alpha, graphics.worldAlpha * webGLData.alpha);
@@ -155,7 +157,7 @@
         gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
         gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-        gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+        gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
 
         gl.uniform1f(shader.alpha, graphics.worldAlpha);
 
diff --git a/src/utils/Detector.js b/src/utils/Detector.js
deleted file mode 100644
index 99f4e39..0000000
--- a/src/utils/Detector.js
+++ /dev/null
@@ -1,78 +0,0 @@
-//TODO: Replace this code with external modules!
-
-/**
- * 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
- *
- * @static
- * @namespace 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
- *
- */
-function autoDetectRenderer(width, height, options) {
-    width = width || 800;
-    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 WebGLRenderer(width, height, options);
-    }
-
-    return new CanvasRenderer(width, height, options);
-}
-
-/**
- * This helper function will automatically detect which renderer you should be using.
- * This function is very similar to the autoDetectRenderer function except that is will return a canvas renderer for android.
- * Even thought both android chrome supports webGL the canvas implementation perform better at the time of writing.
- * This function will likely change and update as webGL performance improves on these devices.
- *
- * @static
- * @namespace 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
- *
- */
-function autoDetectRecommendedRenderer(width, height, options) {
-    width = width || 800;
-    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;
-                                }
-                            } )();
-
-    var isAndroid = /Android/i.test(navigator.userAgent);
-
-    if (webgl && !isAndroid) {
-        return new WebGLRenderer(width, height, options);
-    }
-
-    return new CanvasRenderer(width, height, options);
-}

diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }
diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js
index 07cf0d1..80b5ec6 100644
--- a/gulp/tasks/jshint.js
+++ b/gulp/tasks/jshint.js
@@ -3,8 +3,9 @@
     handleErrors = require('../util/handleErrors');
 
 gulp.task('jshint', function () {
+    console.log(paths.scripts, process.cwd());
     return gulp.src(paths.scripts)
         .pipe(handleErrors())
-        .pipe(jshint('../.jshintrc'))
+        .pipe(jshint())
         .pipe(jshint.reporter('jshint-summary'));
 });
diff --git a/gulpfile.js b/gulpfile.js
index 84e7a00..fe1a054 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,8 +21,8 @@
     src: './src',
     out: './dist',
 
-    get scripts() { return this.source + '/js/**/*.js'; },
-    get jsEntry() { return this.source + '/js/index'; }
+    get scripts() { return this.src + '/**/*.js'; },
+    get jsEntry() { return this.src + '/index'; }
 };
 
 // Require all tasks in gulp/tasks, including subfolders
diff --git a/package.json b/package.json
index 82bebce..5132759 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "docs": "./node_modules/.bin/jsdoc -c ./gulp/util/jsdoc.conf.json"
   },
   "devDependencies": {
+    "browserify": "^8.0.2",
     "chai": "^1.10.0",
     "del": "^1.1.0",
     "gulp": "^3.8.10",
@@ -28,11 +29,20 @@
     "gulp-util": "^3.0.1",
     "ink-docstrap": "^0.4.12",
     "jsdoc": "^3.3.0-alpha13",
+    "jshint-summary": "^0.4.0",
     "karma": "^0.12.28",
     "karma-firefox-launcher": "^0.1.0",
     "karma-mocha": "^0.1.10",
     "karma-spec-reporter": "^0.0.16",
     "mocha": "^2.1.0",
-    "run-sequence": "^1.0.2"
+    "require-dir": "^0.1.0",
+    "run-sequence": "^1.0.2",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "dependencies": {
+    "raf": "^2.0.4",
+    "superagent": "^0.21.0",
+    "webgl-enabled": "^1.0.2"
   }
 }
diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js
index bed6259..d8fba7c 100644
--- a/src/extras/TilingSprite.js
+++ b/src/extras/TilingSprite.js
@@ -1,3 +1,6 @@
+var Sprite = require('../display/Sprite'),
+    utils = require('../utils');
+
 /**
  * A tiling sprite is a fast way of rendering a tiling image
  *
@@ -366,8 +369,8 @@
         }
     }
     else {
-        targetWidth = getNextPowerOfTwo(frame.width);
-        targetHeight = getNextPowerOfTwo(frame.height);
+        targetWidth = utils.getNextPowerOfTwo(frame.width);
+        targetHeight = utils.getNextPowerOfTwo(frame.height);
 
         //  If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas
         if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true;
diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js
index e792a92..9da29ef 100644
--- a/src/extras/spine/PIXISpine.js
+++ b/src/extras/spine/PIXISpine.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /* Esoteric Software SPINE wrapper for pixi.js */
 
 spine.Bone.yDown = true;
@@ -137,7 +139,7 @@
 
             slotContainer.rotation = -(slot.bone.worldRotation * spine.degRad);
 
-            slot.currentSprite.tint = rgb2hex([slot.r,slot.g,slot.b]);
+            slot.currentSprite.tint = utils.rgb2hex([slot.r,slot.g,slot.b]);
         }
         else if (type === spine.AttachmentType.skinnedmesh) {
             if (!slot.currentMeshName || slot.currentMeshName !== attachment.name) {
diff --git a/src/index.js b/src/index.js
index 1fdd6bd..2238a0e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,3 @@
-/* global PIXI:true */
 /**
  * @file        Main export of the PIXI library
  * @namespace   PIXI
diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js
index ab2cd17..4402e77 100644
--- a/src/renderers/canvas/CanvasRenderer.js
+++ b/src/renderers/canvas/CanvasRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /**
  * 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.
  * Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :)
@@ -268,7 +270,7 @@
     if (!blendModesCanvas) {
         blendModesCanvas = [];
 
-        if (canUseNewCanvasBlendModes()) {
+        if (utils.canUseNewCanvasBlendModes()) {
             blendModesCanvas[blendModes.NORMAL]   = "source-over";
             blendModesCanvas[blendModes.ADD]      = "lighter"; //IS THIS OK???
             blendModesCanvas[blendModes.MULTIPLY] = "multiply";
diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js
index ba70d9a..3d8e32f 100644
--- a/src/renderers/canvas/utils/CanvasMaskManager.js
+++ b/src/renderers/canvas/utils/CanvasMaskManager.js
@@ -1,3 +1,5 @@
+var CanvasGraphics = require('../CanvasGraphics');
+
 /**
  * A set of functions used to handle masking.
  *
diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js
index acd4441..d14f59c 100644
--- a/src/renderers/canvas/utils/CanvasTinter.js
+++ b/src/renderers/canvas/utils/CanvasTinter.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * Utility methods for Sprite/Texture tinting.
  *
@@ -21,7 +23,9 @@
 
     texture.tintCache = texture.tintCache || {};
 
-    if (texture.tintCache[stringColor]) return texture.tintCache[stringColor];
+    if (texture.tintCache[stringColor]) {
+        return texture.tintCache[stringColor];
+    }
 
      // clone texture..
     var canvas = CanvasTinter.canvas || document.createElement("canvas");
@@ -156,7 +160,7 @@
         crop.height
     );
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
     var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2];
 
     var pixelData = context.getImageData(0, 0, crop.width, crop.height);
@@ -180,13 +184,13 @@
 CanvasTinter.roundColor = function (color) {
     var step = CanvasTinter.cacheStepsPerColorChannel;
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
 
     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 rgb2hex(rgbValues);
+    return utils.rgb2hex(rgbValues);
 };
 
 /**
@@ -208,7 +212,7 @@
  *
  * @member
  */
-CanvasTinter.canUseMultiply = canUseNewCanvasBlendModes();
+CanvasTinter.canUseMultiply = utils.canUseNewCanvasBlendModes();
 
 /**
  * The tinting method that will be used.
diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js
index d43e680..7eb67ef 100644
--- a/src/renderers/webgl/WebGLRenderer.js
+++ b/src/renderers/webgl/WebGLRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 glContexts = []; // this is where we store the webGL contexts for easy access.
 instances = [];
 
@@ -380,7 +382,7 @@
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST);
 
 
-    if (texture.mipmap && isPowerOfTwo(texture.width, texture.height)) {
+    if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST);
         gl.generateMipmap(gl.TEXTURE_2D);
     }
diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js
index c7c7772..8f333f2 100644
--- a/src/renderers/webgl/utils/WebGLGraphics.js
+++ b/src/renderers/webgl/utils/WebGLGraphics.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * A set of functions used by the webGL renderer to draw the primitive graphics data
  *
@@ -53,7 +55,7 @@
             gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
             gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-            gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+            gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
 
             gl.uniform1f(shader.alpha, graphics.worldAlpha);
 
@@ -224,7 +226,7 @@
     var height = rectData.height;
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -294,7 +296,7 @@
     recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x + radius, y, x, y, x, y + radius));
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -348,7 +350,7 @@
  * @param cpY {number} Control point y
  * @param toX {number} Destination point x
  * @param toY {number} Destination point y
- * @return {Array(Number)}
+ * @return {number[]}
  */
 WebGLGraphics.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) {
 
@@ -418,7 +420,7 @@
     var i = 0;
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -513,7 +515,7 @@
     var width = graphicsData.lineWidth / 2;
 
     // sort color
-    var color = hex2rgb(graphicsData.lineColor);
+    var color = utils.hex2rgb(graphicsData.lineColor);
     var alpha = graphicsData.lineAlpha;
     var r = color[0] * alpha;
     var g = color[1] * alpha;
@@ -681,7 +683,7 @@
     var indices = webGLData.indices;
     webGLData.points = points;
     webGLData.alpha = graphicsData.fillAlpha;
-    webGLData.color = hex2rgb(graphicsData.fillColor);
+    webGLData.color = utils.hex2rgb(graphicsData.fillColor);
 
     /*
         calclate the bounds..
@@ -741,7 +743,7 @@
     var length = points.length / 2;
 
     // sort color
-    var color = hex2rgb(graphicsData.fillColor);
+    var color = utils.hex2rgb(graphicsData.fillColor);
     var alpha = graphicsData.fillAlpha;
     var r = color[0] * alpha;
     var g = color[1] * alpha;
diff --git a/src/renderers/webgl/utils/WebGLStencilManager.js b/src/renderers/webgl/utils/WebGLStencilManager.js
index bf7dd73..40c2acc 100644
--- a/src/renderers/webgl/utils/WebGLStencilManager.js
+++ b/src/renderers/webgl/utils/WebGLStencilManager.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * @class
  * @namespace PIXI
@@ -130,7 +132,7 @@
         gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
         gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-        gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+        gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
         gl.uniform3fv(shader.color, webGLData.color);
 
         gl.uniform1f(shader.alpha, graphics.worldAlpha * webGLData.alpha);
@@ -155,7 +157,7 @@
         gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
         gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-        gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+        gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
 
         gl.uniform1f(shader.alpha, graphics.worldAlpha);
 
diff --git a/src/utils/Detector.js b/src/utils/Detector.js
deleted file mode 100644
index 99f4e39..0000000
--- a/src/utils/Detector.js
+++ /dev/null
@@ -1,78 +0,0 @@
-//TODO: Replace this code with external modules!
-
-/**
- * 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
- *
- * @static
- * @namespace 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
- *
- */
-function autoDetectRenderer(width, height, options) {
-    width = width || 800;
-    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 WebGLRenderer(width, height, options);
-    }
-
-    return new CanvasRenderer(width, height, options);
-}
-
-/**
- * This helper function will automatically detect which renderer you should be using.
- * This function is very similar to the autoDetectRenderer function except that is will return a canvas renderer for android.
- * Even thought both android chrome supports webGL the canvas implementation perform better at the time of writing.
- * This function will likely change and update as webGL performance improves on these devices.
- *
- * @static
- * @namespace 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
- *
- */
-function autoDetectRecommendedRenderer(width, height, options) {
-    width = width || 800;
-    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;
-                                }
-                            } )();
-
-    var isAndroid = /Android/i.test(navigator.userAgent);
-
-    if (webgl && !isAndroid) {
-        return new WebGLRenderer(width, height, options);
-    }
-
-    return new CanvasRenderer(width, height, options);
-}
diff --git a/src/utils/Event.js b/src/utils/Event.js
new file mode 100644
index 0000000..0c187ee
--- /dev/null
+++ b/src/utils/Event.js
@@ -0,0 +1,81 @@
+/**
+ * Creates an homogenous object for tracking events so users can know what to expect.
+ *
+ * @class
+ * @namespace PIXI
+ * @param target {object} The target object that the event is called on
+ * @param name {string} The string name of the event that was triggered
+ * @param data {object} Arbitrary event data to pass along
+ */
+function Event(target, name, data) {
+    // for duck typing in the ".on()" function
+    this.__isEventObject = true;
+
+    /**
+     * Tracks the state of bubbling propagation. Do not
+     * set this directly, instead use `event.stopPropagation()`
+     *
+     * @member {boolean}
+     * @private
+     * @readonly
+     */
+    this.stopped = false;
+
+    /**
+     * Tracks the state of sibling listener propagation. Do not
+     * set this directly, instead use `event.stopImmediatePropagation()`
+     *
+     * @member {boolean}
+     * @private
+     * @readonly
+     */
+    this.stoppedImmediate = false;
+
+    /**
+     * The original target the event triggered on.
+     *
+     * @member {object}
+     * @readonly
+     */
+    this.target = target;
+
+    /**
+     * The string name of the event that this represents.
+     *
+     * @member {string}
+     * @readonly
+     */
+    this.type = name;
+
+    /**
+     * The data that was passed in with this event.
+     *
+     * @member {object}
+     * @readonly
+     */
+    this.data = data;
+
+    /**
+     * The timestamp when the event occurred.
+     *
+     * @member {number}
+     * @readonly
+     */
+    this.timeStamp = Date.now();
+};
+
+/**
+ * Stops the propagation of events up the scene graph (prevents bubbling).
+ *
+ */
+Event.prototype.stopPropagation = function stopPropagation() {
+    this.stopped = true;
+};
+
+/**
+ * Stops the propagation of events to sibling listeners (no longer calls any listeners).
+ *
+ */
+Event.prototype.stopImmediatePropagation = function stopImmediatePropagation() {
+    this.stoppedImmediate = true;
+};

diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }
diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js
index 07cf0d1..80b5ec6 100644
--- a/gulp/tasks/jshint.js
+++ b/gulp/tasks/jshint.js
@@ -3,8 +3,9 @@
     handleErrors = require('../util/handleErrors');
 
 gulp.task('jshint', function () {
+    console.log(paths.scripts, process.cwd());
     return gulp.src(paths.scripts)
         .pipe(handleErrors())
-        .pipe(jshint('../.jshintrc'))
+        .pipe(jshint())
         .pipe(jshint.reporter('jshint-summary'));
 });
diff --git a/gulpfile.js b/gulpfile.js
index 84e7a00..fe1a054 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,8 +21,8 @@
     src: './src',
     out: './dist',
 
-    get scripts() { return this.source + '/js/**/*.js'; },
-    get jsEntry() { return this.source + '/js/index'; }
+    get scripts() { return this.src + '/**/*.js'; },
+    get jsEntry() { return this.src + '/index'; }
 };
 
 // Require all tasks in gulp/tasks, including subfolders
diff --git a/package.json b/package.json
index 82bebce..5132759 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "docs": "./node_modules/.bin/jsdoc -c ./gulp/util/jsdoc.conf.json"
   },
   "devDependencies": {
+    "browserify": "^8.0.2",
     "chai": "^1.10.0",
     "del": "^1.1.0",
     "gulp": "^3.8.10",
@@ -28,11 +29,20 @@
     "gulp-util": "^3.0.1",
     "ink-docstrap": "^0.4.12",
     "jsdoc": "^3.3.0-alpha13",
+    "jshint-summary": "^0.4.0",
     "karma": "^0.12.28",
     "karma-firefox-launcher": "^0.1.0",
     "karma-mocha": "^0.1.10",
     "karma-spec-reporter": "^0.0.16",
     "mocha": "^2.1.0",
-    "run-sequence": "^1.0.2"
+    "require-dir": "^0.1.0",
+    "run-sequence": "^1.0.2",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "dependencies": {
+    "raf": "^2.0.4",
+    "superagent": "^0.21.0",
+    "webgl-enabled": "^1.0.2"
   }
 }
diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js
index bed6259..d8fba7c 100644
--- a/src/extras/TilingSprite.js
+++ b/src/extras/TilingSprite.js
@@ -1,3 +1,6 @@
+var Sprite = require('../display/Sprite'),
+    utils = require('../utils');
+
 /**
  * A tiling sprite is a fast way of rendering a tiling image
  *
@@ -366,8 +369,8 @@
         }
     }
     else {
-        targetWidth = getNextPowerOfTwo(frame.width);
-        targetHeight = getNextPowerOfTwo(frame.height);
+        targetWidth = utils.getNextPowerOfTwo(frame.width);
+        targetHeight = utils.getNextPowerOfTwo(frame.height);
 
         //  If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas
         if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true;
diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js
index e792a92..9da29ef 100644
--- a/src/extras/spine/PIXISpine.js
+++ b/src/extras/spine/PIXISpine.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /* Esoteric Software SPINE wrapper for pixi.js */
 
 spine.Bone.yDown = true;
@@ -137,7 +139,7 @@
 
             slotContainer.rotation = -(slot.bone.worldRotation * spine.degRad);
 
-            slot.currentSprite.tint = rgb2hex([slot.r,slot.g,slot.b]);
+            slot.currentSprite.tint = utils.rgb2hex([slot.r,slot.g,slot.b]);
         }
         else if (type === spine.AttachmentType.skinnedmesh) {
             if (!slot.currentMeshName || slot.currentMeshName !== attachment.name) {
diff --git a/src/index.js b/src/index.js
index 1fdd6bd..2238a0e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,3 @@
-/* global PIXI:true */
 /**
  * @file        Main export of the PIXI library
  * @namespace   PIXI
diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js
index ab2cd17..4402e77 100644
--- a/src/renderers/canvas/CanvasRenderer.js
+++ b/src/renderers/canvas/CanvasRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /**
  * 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.
  * Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :)
@@ -268,7 +270,7 @@
     if (!blendModesCanvas) {
         blendModesCanvas = [];
 
-        if (canUseNewCanvasBlendModes()) {
+        if (utils.canUseNewCanvasBlendModes()) {
             blendModesCanvas[blendModes.NORMAL]   = "source-over";
             blendModesCanvas[blendModes.ADD]      = "lighter"; //IS THIS OK???
             blendModesCanvas[blendModes.MULTIPLY] = "multiply";
diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js
index ba70d9a..3d8e32f 100644
--- a/src/renderers/canvas/utils/CanvasMaskManager.js
+++ b/src/renderers/canvas/utils/CanvasMaskManager.js
@@ -1,3 +1,5 @@
+var CanvasGraphics = require('../CanvasGraphics');
+
 /**
  * A set of functions used to handle masking.
  *
diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js
index acd4441..d14f59c 100644
--- a/src/renderers/canvas/utils/CanvasTinter.js
+++ b/src/renderers/canvas/utils/CanvasTinter.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * Utility methods for Sprite/Texture tinting.
  *
@@ -21,7 +23,9 @@
 
     texture.tintCache = texture.tintCache || {};
 
-    if (texture.tintCache[stringColor]) return texture.tintCache[stringColor];
+    if (texture.tintCache[stringColor]) {
+        return texture.tintCache[stringColor];
+    }
 
      // clone texture..
     var canvas = CanvasTinter.canvas || document.createElement("canvas");
@@ -156,7 +160,7 @@
         crop.height
     );
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
     var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2];
 
     var pixelData = context.getImageData(0, 0, crop.width, crop.height);
@@ -180,13 +184,13 @@
 CanvasTinter.roundColor = function (color) {
     var step = CanvasTinter.cacheStepsPerColorChannel;
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
 
     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 rgb2hex(rgbValues);
+    return utils.rgb2hex(rgbValues);
 };
 
 /**
@@ -208,7 +212,7 @@
  *
  * @member
  */
-CanvasTinter.canUseMultiply = canUseNewCanvasBlendModes();
+CanvasTinter.canUseMultiply = utils.canUseNewCanvasBlendModes();
 
 /**
  * The tinting method that will be used.
diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js
index d43e680..7eb67ef 100644
--- a/src/renderers/webgl/WebGLRenderer.js
+++ b/src/renderers/webgl/WebGLRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 glContexts = []; // this is where we store the webGL contexts for easy access.
 instances = [];
 
@@ -380,7 +382,7 @@
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST);
 
 
-    if (texture.mipmap && isPowerOfTwo(texture.width, texture.height)) {
+    if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST);
         gl.generateMipmap(gl.TEXTURE_2D);
     }
diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js
index c7c7772..8f333f2 100644
--- a/src/renderers/webgl/utils/WebGLGraphics.js
+++ b/src/renderers/webgl/utils/WebGLGraphics.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * A set of functions used by the webGL renderer to draw the primitive graphics data
  *
@@ -53,7 +55,7 @@
             gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
             gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-            gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+            gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
 
             gl.uniform1f(shader.alpha, graphics.worldAlpha);
 
@@ -224,7 +226,7 @@
     var height = rectData.height;
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -294,7 +296,7 @@
     recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x + radius, y, x, y, x, y + radius));
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -348,7 +350,7 @@
  * @param cpY {number} Control point y
  * @param toX {number} Destination point x
  * @param toY {number} Destination point y
- * @return {Array(Number)}
+ * @return {number[]}
  */
 WebGLGraphics.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) {
 
@@ -418,7 +420,7 @@
     var i = 0;
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -513,7 +515,7 @@
     var width = graphicsData.lineWidth / 2;
 
     // sort color
-    var color = hex2rgb(graphicsData.lineColor);
+    var color = utils.hex2rgb(graphicsData.lineColor);
     var alpha = graphicsData.lineAlpha;
     var r = color[0] * alpha;
     var g = color[1] * alpha;
@@ -681,7 +683,7 @@
     var indices = webGLData.indices;
     webGLData.points = points;
     webGLData.alpha = graphicsData.fillAlpha;
-    webGLData.color = hex2rgb(graphicsData.fillColor);
+    webGLData.color = utils.hex2rgb(graphicsData.fillColor);
 
     /*
         calclate the bounds..
@@ -741,7 +743,7 @@
     var length = points.length / 2;
 
     // sort color
-    var color = hex2rgb(graphicsData.fillColor);
+    var color = utils.hex2rgb(graphicsData.fillColor);
     var alpha = graphicsData.fillAlpha;
     var r = color[0] * alpha;
     var g = color[1] * alpha;
diff --git a/src/renderers/webgl/utils/WebGLStencilManager.js b/src/renderers/webgl/utils/WebGLStencilManager.js
index bf7dd73..40c2acc 100644
--- a/src/renderers/webgl/utils/WebGLStencilManager.js
+++ b/src/renderers/webgl/utils/WebGLStencilManager.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * @class
  * @namespace PIXI
@@ -130,7 +132,7 @@
         gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
         gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-        gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+        gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
         gl.uniform3fv(shader.color, webGLData.color);
 
         gl.uniform1f(shader.alpha, graphics.worldAlpha * webGLData.alpha);
@@ -155,7 +157,7 @@
         gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
         gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-        gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+        gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
 
         gl.uniform1f(shader.alpha, graphics.worldAlpha);
 
diff --git a/src/utils/Detector.js b/src/utils/Detector.js
deleted file mode 100644
index 99f4e39..0000000
--- a/src/utils/Detector.js
+++ /dev/null
@@ -1,78 +0,0 @@
-//TODO: Replace this code with external modules!
-
-/**
- * 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
- *
- * @static
- * @namespace 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
- *
- */
-function autoDetectRenderer(width, height, options) {
-    width = width || 800;
-    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 WebGLRenderer(width, height, options);
-    }
-
-    return new CanvasRenderer(width, height, options);
-}
-
-/**
- * This helper function will automatically detect which renderer you should be using.
- * This function is very similar to the autoDetectRenderer function except that is will return a canvas renderer for android.
- * Even thought both android chrome supports webGL the canvas implementation perform better at the time of writing.
- * This function will likely change and update as webGL performance improves on these devices.
- *
- * @static
- * @namespace 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
- *
- */
-function autoDetectRecommendedRenderer(width, height, options) {
-    width = width || 800;
-    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;
-                                }
-                            } )();
-
-    var isAndroid = /Android/i.test(navigator.userAgent);
-
-    if (webgl && !isAndroid) {
-        return new WebGLRenderer(width, height, options);
-    }
-
-    return new CanvasRenderer(width, height, options);
-}
diff --git a/src/utils/Event.js b/src/utils/Event.js
new file mode 100644
index 0000000..0c187ee
--- /dev/null
+++ b/src/utils/Event.js
@@ -0,0 +1,81 @@
+/**
+ * Creates an homogenous object for tracking events so users can know what to expect.
+ *
+ * @class
+ * @namespace PIXI
+ * @param target {object} The target object that the event is called on
+ * @param name {string} The string name of the event that was triggered
+ * @param data {object} Arbitrary event data to pass along
+ */
+function Event(target, name, data) {
+    // for duck typing in the ".on()" function
+    this.__isEventObject = true;
+
+    /**
+     * Tracks the state of bubbling propagation. Do not
+     * set this directly, instead use `event.stopPropagation()`
+     *
+     * @member {boolean}
+     * @private
+     * @readonly
+     */
+    this.stopped = false;
+
+    /**
+     * Tracks the state of sibling listener propagation. Do not
+     * set this directly, instead use `event.stopImmediatePropagation()`
+     *
+     * @member {boolean}
+     * @private
+     * @readonly
+     */
+    this.stoppedImmediate = false;
+
+    /**
+     * The original target the event triggered on.
+     *
+     * @member {object}
+     * @readonly
+     */
+    this.target = target;
+
+    /**
+     * The string name of the event that this represents.
+     *
+     * @member {string}
+     * @readonly
+     */
+    this.type = name;
+
+    /**
+     * The data that was passed in with this event.
+     *
+     * @member {object}
+     * @readonly
+     */
+    this.data = data;
+
+    /**
+     * The timestamp when the event occurred.
+     *
+     * @member {number}
+     * @readonly
+     */
+    this.timeStamp = Date.now();
+};
+
+/**
+ * Stops the propagation of events up the scene graph (prevents bubbling).
+ *
+ */
+Event.prototype.stopPropagation = function stopPropagation() {
+    this.stopped = true;
+};
+
+/**
+ * Stops the propagation of events to sibling listeners (no longer calls any listeners).
+ *
+ */
+Event.prototype.stopImmediatePropagation = function stopImmediatePropagation() {
+    this.stoppedImmediate = true;
+};
diff --git a/src/utils/EventTarget.js b/src/utils/EventTarget.js
index e01b7d6..92a5908 100644
--- a/src/utils/EventTarget.js
+++ b/src/utils/EventTarget.js
@@ -1,10 +1,7 @@
-/**
- * Originally based on https://github.com/mrdoob/eventtarget.js/ from mr Doob.
- * Currently takes inspiration from the nodejs EventEmitter, EventEmitter3, and smokesignals
- */
+var Event = require('./Event');
 
 /**
- * Mixins event emitter functionality to a class
+ * Mixins event emitter functionality to an object.
  *
  * @mixin
  * @namespace PIXI
@@ -163,16 +160,6 @@
 
 module.exports = {
     /**
-     * Backward compat from when this used to be a function
-     */
-    call: function callCompat(obj) {
-        if (obj) {
-            obj = obj.prototype || obj;
-            EventTarget(obj);
-        }
-    },
-
-    /**
      * Mixes in the properties of the EventTarget prototype onto another object
      *
      * @param object {object} The obj to mix into
@@ -181,88 +168,3 @@
         EventTarget(obj);
     }
 }
-
-/**
- * Creates an homogenous object for tracking events so users can know what to expect.
- *
- * @class
- * @namespace PIXI
- * @param target {object} The target object that the event is called on
- * @param name {string} The string name of the event that was triggered
- * @param data {object} Arbitrary event data to pass along
- */
-function Event(target, name, data) {
-    // for duck typing in the ".on()" function
-    this.__isEventObject = true;
-
-    /**
-     * Tracks the state of bubbling propagation. Do not
-     * set this directly, instead use `event.stopPropagation()`
-     *
-     * @member {boolean}
-     * @private
-     * @readonly
-     */
-    this.stopped = false;
-
-    /**
-     * Tracks the state of sibling listener propagation. Do not
-     * set this directly, instead use `event.stopImmediatePropagation()`
-     *
-     * @member {boolean}
-     * @private
-     * @readonly
-     */
-    this.stoppedImmediate = false;
-
-    /**
-     * The original target the event triggered on.
-     *
-     * @member {object}
-     * @readonly
-     */
-    this.target = target;
-
-    /**
-     * The string name of the event that this represents.
-     *
-     * @member {string}
-     * @readonly
-     */
-    this.type = name;
-
-    /**
-     * The data that was passed in with this event.
-     *
-     * @member {object}
-     * @readonly
-     */
-    this.data = data;
-
-    //backwards compat with older version of events
-    this.content = data;
-
-    /**
-     * The timestamp when the event occurred.
-     *
-     * @member {number}
-     * @readonly
-     */
-    this.timeStamp = Date.now();
-};
-
-/**
- * Stops the propagation of events up the scene graph (prevents bubbling).
- *
- */
-Event.prototype.stopPropagation = function stopPropagation() {
-    this.stopped = true;
-};
-
-/**
- * Stops the propagation of events to sibling listeners (no longer calls any listeners).
- *
- */
-Event.prototype.stopImmediatePropagation = function stopImmediatePropagation() {
-    this.stoppedImmediate = true;
-};

diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }
diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js
index 07cf0d1..80b5ec6 100644
--- a/gulp/tasks/jshint.js
+++ b/gulp/tasks/jshint.js
@@ -3,8 +3,9 @@
     handleErrors = require('../util/handleErrors');
 
 gulp.task('jshint', function () {
+    console.log(paths.scripts, process.cwd());
     return gulp.src(paths.scripts)
         .pipe(handleErrors())
-        .pipe(jshint('../.jshintrc'))
+        .pipe(jshint())
         .pipe(jshint.reporter('jshint-summary'));
 });
diff --git a/gulpfile.js b/gulpfile.js
index 84e7a00..fe1a054 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,8 +21,8 @@
     src: './src',
     out: './dist',
 
-    get scripts() { return this.source + '/js/**/*.js'; },
-    get jsEntry() { return this.source + '/js/index'; }
+    get scripts() { return this.src + '/**/*.js'; },
+    get jsEntry() { return this.src + '/index'; }
 };
 
 // Require all tasks in gulp/tasks, including subfolders
diff --git a/package.json b/package.json
index 82bebce..5132759 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "docs": "./node_modules/.bin/jsdoc -c ./gulp/util/jsdoc.conf.json"
   },
   "devDependencies": {
+    "browserify": "^8.0.2",
     "chai": "^1.10.0",
     "del": "^1.1.0",
     "gulp": "^3.8.10",
@@ -28,11 +29,20 @@
     "gulp-util": "^3.0.1",
     "ink-docstrap": "^0.4.12",
     "jsdoc": "^3.3.0-alpha13",
+    "jshint-summary": "^0.4.0",
     "karma": "^0.12.28",
     "karma-firefox-launcher": "^0.1.0",
     "karma-mocha": "^0.1.10",
     "karma-spec-reporter": "^0.0.16",
     "mocha": "^2.1.0",
-    "run-sequence": "^1.0.2"
+    "require-dir": "^0.1.0",
+    "run-sequence": "^1.0.2",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "dependencies": {
+    "raf": "^2.0.4",
+    "superagent": "^0.21.0",
+    "webgl-enabled": "^1.0.2"
   }
 }
diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js
index bed6259..d8fba7c 100644
--- a/src/extras/TilingSprite.js
+++ b/src/extras/TilingSprite.js
@@ -1,3 +1,6 @@
+var Sprite = require('../display/Sprite'),
+    utils = require('../utils');
+
 /**
  * A tiling sprite is a fast way of rendering a tiling image
  *
@@ -366,8 +369,8 @@
         }
     }
     else {
-        targetWidth = getNextPowerOfTwo(frame.width);
-        targetHeight = getNextPowerOfTwo(frame.height);
+        targetWidth = utils.getNextPowerOfTwo(frame.width);
+        targetHeight = utils.getNextPowerOfTwo(frame.height);
 
         //  If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas
         if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true;
diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js
index e792a92..9da29ef 100644
--- a/src/extras/spine/PIXISpine.js
+++ b/src/extras/spine/PIXISpine.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /* Esoteric Software SPINE wrapper for pixi.js */
 
 spine.Bone.yDown = true;
@@ -137,7 +139,7 @@
 
             slotContainer.rotation = -(slot.bone.worldRotation * spine.degRad);
 
-            slot.currentSprite.tint = rgb2hex([slot.r,slot.g,slot.b]);
+            slot.currentSprite.tint = utils.rgb2hex([slot.r,slot.g,slot.b]);
         }
         else if (type === spine.AttachmentType.skinnedmesh) {
             if (!slot.currentMeshName || slot.currentMeshName !== attachment.name) {
diff --git a/src/index.js b/src/index.js
index 1fdd6bd..2238a0e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,3 @@
-/* global PIXI:true */
 /**
  * @file        Main export of the PIXI library
  * @namespace   PIXI
diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js
index ab2cd17..4402e77 100644
--- a/src/renderers/canvas/CanvasRenderer.js
+++ b/src/renderers/canvas/CanvasRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /**
  * 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.
  * Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :)
@@ -268,7 +270,7 @@
     if (!blendModesCanvas) {
         blendModesCanvas = [];
 
-        if (canUseNewCanvasBlendModes()) {
+        if (utils.canUseNewCanvasBlendModes()) {
             blendModesCanvas[blendModes.NORMAL]   = "source-over";
             blendModesCanvas[blendModes.ADD]      = "lighter"; //IS THIS OK???
             blendModesCanvas[blendModes.MULTIPLY] = "multiply";
diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js
index ba70d9a..3d8e32f 100644
--- a/src/renderers/canvas/utils/CanvasMaskManager.js
+++ b/src/renderers/canvas/utils/CanvasMaskManager.js
@@ -1,3 +1,5 @@
+var CanvasGraphics = require('../CanvasGraphics');
+
 /**
  * A set of functions used to handle masking.
  *
diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js
index acd4441..d14f59c 100644
--- a/src/renderers/canvas/utils/CanvasTinter.js
+++ b/src/renderers/canvas/utils/CanvasTinter.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * Utility methods for Sprite/Texture tinting.
  *
@@ -21,7 +23,9 @@
 
     texture.tintCache = texture.tintCache || {};
 
-    if (texture.tintCache[stringColor]) return texture.tintCache[stringColor];
+    if (texture.tintCache[stringColor]) {
+        return texture.tintCache[stringColor];
+    }
 
      // clone texture..
     var canvas = CanvasTinter.canvas || document.createElement("canvas");
@@ -156,7 +160,7 @@
         crop.height
     );
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
     var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2];
 
     var pixelData = context.getImageData(0, 0, crop.width, crop.height);
@@ -180,13 +184,13 @@
 CanvasTinter.roundColor = function (color) {
     var step = CanvasTinter.cacheStepsPerColorChannel;
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
 
     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 rgb2hex(rgbValues);
+    return utils.rgb2hex(rgbValues);
 };
 
 /**
@@ -208,7 +212,7 @@
  *
  * @member
  */
-CanvasTinter.canUseMultiply = canUseNewCanvasBlendModes();
+CanvasTinter.canUseMultiply = utils.canUseNewCanvasBlendModes();
 
 /**
  * The tinting method that will be used.
diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js
index d43e680..7eb67ef 100644
--- a/src/renderers/webgl/WebGLRenderer.js
+++ b/src/renderers/webgl/WebGLRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 glContexts = []; // this is where we store the webGL contexts for easy access.
 instances = [];
 
@@ -380,7 +382,7 @@
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST);
 
 
-    if (texture.mipmap && isPowerOfTwo(texture.width, texture.height)) {
+    if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST);
         gl.generateMipmap(gl.TEXTURE_2D);
     }
diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js
index c7c7772..8f333f2 100644
--- a/src/renderers/webgl/utils/WebGLGraphics.js
+++ b/src/renderers/webgl/utils/WebGLGraphics.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * A set of functions used by the webGL renderer to draw the primitive graphics data
  *
@@ -53,7 +55,7 @@
             gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
             gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-            gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+            gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
 
             gl.uniform1f(shader.alpha, graphics.worldAlpha);
 
@@ -224,7 +226,7 @@
     var height = rectData.height;
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -294,7 +296,7 @@
     recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x + radius, y, x, y, x, y + radius));
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -348,7 +350,7 @@
  * @param cpY {number} Control point y
  * @param toX {number} Destination point x
  * @param toY {number} Destination point y
- * @return {Array(Number)}
+ * @return {number[]}
  */
 WebGLGraphics.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) {
 
@@ -418,7 +420,7 @@
     var i = 0;
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -513,7 +515,7 @@
     var width = graphicsData.lineWidth / 2;
 
     // sort color
-    var color = hex2rgb(graphicsData.lineColor);
+    var color = utils.hex2rgb(graphicsData.lineColor);
     var alpha = graphicsData.lineAlpha;
     var r = color[0] * alpha;
     var g = color[1] * alpha;
@@ -681,7 +683,7 @@
     var indices = webGLData.indices;
     webGLData.points = points;
     webGLData.alpha = graphicsData.fillAlpha;
-    webGLData.color = hex2rgb(graphicsData.fillColor);
+    webGLData.color = utils.hex2rgb(graphicsData.fillColor);
 
     /*
         calclate the bounds..
@@ -741,7 +743,7 @@
     var length = points.length / 2;
 
     // sort color
-    var color = hex2rgb(graphicsData.fillColor);
+    var color = utils.hex2rgb(graphicsData.fillColor);
     var alpha = graphicsData.fillAlpha;
     var r = color[0] * alpha;
     var g = color[1] * alpha;
diff --git a/src/renderers/webgl/utils/WebGLStencilManager.js b/src/renderers/webgl/utils/WebGLStencilManager.js
index bf7dd73..40c2acc 100644
--- a/src/renderers/webgl/utils/WebGLStencilManager.js
+++ b/src/renderers/webgl/utils/WebGLStencilManager.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * @class
  * @namespace PIXI
@@ -130,7 +132,7 @@
         gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
         gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-        gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+        gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
         gl.uniform3fv(shader.color, webGLData.color);
 
         gl.uniform1f(shader.alpha, graphics.worldAlpha * webGLData.alpha);
@@ -155,7 +157,7 @@
         gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
         gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-        gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+        gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
 
         gl.uniform1f(shader.alpha, graphics.worldAlpha);
 
diff --git a/src/utils/Detector.js b/src/utils/Detector.js
deleted file mode 100644
index 99f4e39..0000000
--- a/src/utils/Detector.js
+++ /dev/null
@@ -1,78 +0,0 @@
-//TODO: Replace this code with external modules!
-
-/**
- * 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
- *
- * @static
- * @namespace 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
- *
- */
-function autoDetectRenderer(width, height, options) {
-    width = width || 800;
-    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 WebGLRenderer(width, height, options);
-    }
-
-    return new CanvasRenderer(width, height, options);
-}
-
-/**
- * This helper function will automatically detect which renderer you should be using.
- * This function is very similar to the autoDetectRenderer function except that is will return a canvas renderer for android.
- * Even thought both android chrome supports webGL the canvas implementation perform better at the time of writing.
- * This function will likely change and update as webGL performance improves on these devices.
- *
- * @static
- * @namespace 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
- *
- */
-function autoDetectRecommendedRenderer(width, height, options) {
-    width = width || 800;
-    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;
-                                }
-                            } )();
-
-    var isAndroid = /Android/i.test(navigator.userAgent);
-
-    if (webgl && !isAndroid) {
-        return new WebGLRenderer(width, height, options);
-    }
-
-    return new CanvasRenderer(width, height, options);
-}
diff --git a/src/utils/Event.js b/src/utils/Event.js
new file mode 100644
index 0000000..0c187ee
--- /dev/null
+++ b/src/utils/Event.js
@@ -0,0 +1,81 @@
+/**
+ * Creates an homogenous object for tracking events so users can know what to expect.
+ *
+ * @class
+ * @namespace PIXI
+ * @param target {object} The target object that the event is called on
+ * @param name {string} The string name of the event that was triggered
+ * @param data {object} Arbitrary event data to pass along
+ */
+function Event(target, name, data) {
+    // for duck typing in the ".on()" function
+    this.__isEventObject = true;
+
+    /**
+     * Tracks the state of bubbling propagation. Do not
+     * set this directly, instead use `event.stopPropagation()`
+     *
+     * @member {boolean}
+     * @private
+     * @readonly
+     */
+    this.stopped = false;
+
+    /**
+     * Tracks the state of sibling listener propagation. Do not
+     * set this directly, instead use `event.stopImmediatePropagation()`
+     *
+     * @member {boolean}
+     * @private
+     * @readonly
+     */
+    this.stoppedImmediate = false;
+
+    /**
+     * The original target the event triggered on.
+     *
+     * @member {object}
+     * @readonly
+     */
+    this.target = target;
+
+    /**
+     * The string name of the event that this represents.
+     *
+     * @member {string}
+     * @readonly
+     */
+    this.type = name;
+
+    /**
+     * The data that was passed in with this event.
+     *
+     * @member {object}
+     * @readonly
+     */
+    this.data = data;
+
+    /**
+     * The timestamp when the event occurred.
+     *
+     * @member {number}
+     * @readonly
+     */
+    this.timeStamp = Date.now();
+};
+
+/**
+ * Stops the propagation of events up the scene graph (prevents bubbling).
+ *
+ */
+Event.prototype.stopPropagation = function stopPropagation() {
+    this.stopped = true;
+};
+
+/**
+ * Stops the propagation of events to sibling listeners (no longer calls any listeners).
+ *
+ */
+Event.prototype.stopImmediatePropagation = function stopImmediatePropagation() {
+    this.stoppedImmediate = true;
+};
diff --git a/src/utils/EventTarget.js b/src/utils/EventTarget.js
index e01b7d6..92a5908 100644
--- a/src/utils/EventTarget.js
+++ b/src/utils/EventTarget.js
@@ -1,10 +1,7 @@
-/**
- * Originally based on https://github.com/mrdoob/eventtarget.js/ from mr Doob.
- * Currently takes inspiration from the nodejs EventEmitter, EventEmitter3, and smokesignals
- */
+var Event = require('./Event');
 
 /**
- * Mixins event emitter functionality to a class
+ * Mixins event emitter functionality to an object.
  *
  * @mixin
  * @namespace PIXI
@@ -163,16 +160,6 @@
 
 module.exports = {
     /**
-     * Backward compat from when this used to be a function
-     */
-    call: function callCompat(obj) {
-        if (obj) {
-            obj = obj.prototype || obj;
-            EventTarget(obj);
-        }
-    },
-
-    /**
      * Mixes in the properties of the EventTarget prototype onto another object
      *
      * @param object {object} The obj to mix into
@@ -181,88 +168,3 @@
         EventTarget(obj);
     }
 }
-
-/**
- * Creates an homogenous object for tracking events so users can know what to expect.
- *
- * @class
- * @namespace PIXI
- * @param target {object} The target object that the event is called on
- * @param name {string} The string name of the event that was triggered
- * @param data {object} Arbitrary event data to pass along
- */
-function Event(target, name, data) {
-    // for duck typing in the ".on()" function
-    this.__isEventObject = true;
-
-    /**
-     * Tracks the state of bubbling propagation. Do not
-     * set this directly, instead use `event.stopPropagation()`
-     *
-     * @member {boolean}
-     * @private
-     * @readonly
-     */
-    this.stopped = false;
-
-    /**
-     * Tracks the state of sibling listener propagation. Do not
-     * set this directly, instead use `event.stopImmediatePropagation()`
-     *
-     * @member {boolean}
-     * @private
-     * @readonly
-     */
-    this.stoppedImmediate = false;
-
-    /**
-     * The original target the event triggered on.
-     *
-     * @member {object}
-     * @readonly
-     */
-    this.target = target;
-
-    /**
-     * The string name of the event that this represents.
-     *
-     * @member {string}
-     * @readonly
-     */
-    this.type = name;
-
-    /**
-     * The data that was passed in with this event.
-     *
-     * @member {object}
-     * @readonly
-     */
-    this.data = data;
-
-    //backwards compat with older version of events
-    this.content = data;
-
-    /**
-     * The timestamp when the event occurred.
-     *
-     * @member {number}
-     * @readonly
-     */
-    this.timeStamp = Date.now();
-};
-
-/**
- * Stops the propagation of events up the scene graph (prevents bubbling).
- *
- */
-Event.prototype.stopPropagation = function stopPropagation() {
-    this.stopped = true;
-};
-
-/**
- * Stops the propagation of events to sibling listeners (no longer calls any listeners).
- *
- */
-Event.prototype.stopImmediatePropagation = function stopImmediatePropagation() {
-    this.stoppedImmediate = true;
-};
diff --git a/src/utils/Polyk.js b/src/utils/Polyk.js
index c53c473..7325141 100644
--- a/src/utils/Polyk.js
+++ b/src/utils/Polyk.js
@@ -1,3 +1,6 @@
+//TODO: Have Graphics use https://github.com/mattdesl/shape2d
+// and https://github.com/mattdesl/shape2d-triangulate instead of custom code.
+
 /*
     PolyK library
     url: http://polyk.ivank.net

diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }
diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js
index 07cf0d1..80b5ec6 100644
--- a/gulp/tasks/jshint.js
+++ b/gulp/tasks/jshint.js
@@ -3,8 +3,9 @@
     handleErrors = require('../util/handleErrors');
 
 gulp.task('jshint', function () {
+    console.log(paths.scripts, process.cwd());
     return gulp.src(paths.scripts)
         .pipe(handleErrors())
-        .pipe(jshint('../.jshintrc'))
+        .pipe(jshint())
         .pipe(jshint.reporter('jshint-summary'));
 });
diff --git a/gulpfile.js b/gulpfile.js
index 84e7a00..fe1a054 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,8 +21,8 @@
     src: './src',
     out: './dist',
 
-    get scripts() { return this.source + '/js/**/*.js'; },
-    get jsEntry() { return this.source + '/js/index'; }
+    get scripts() { return this.src + '/**/*.js'; },
+    get jsEntry() { return this.src + '/index'; }
 };
 
 // Require all tasks in gulp/tasks, including subfolders
diff --git a/package.json b/package.json
index 82bebce..5132759 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "docs": "./node_modules/.bin/jsdoc -c ./gulp/util/jsdoc.conf.json"
   },
   "devDependencies": {
+    "browserify": "^8.0.2",
     "chai": "^1.10.0",
     "del": "^1.1.0",
     "gulp": "^3.8.10",
@@ -28,11 +29,20 @@
     "gulp-util": "^3.0.1",
     "ink-docstrap": "^0.4.12",
     "jsdoc": "^3.3.0-alpha13",
+    "jshint-summary": "^0.4.0",
     "karma": "^0.12.28",
     "karma-firefox-launcher": "^0.1.0",
     "karma-mocha": "^0.1.10",
     "karma-spec-reporter": "^0.0.16",
     "mocha": "^2.1.0",
-    "run-sequence": "^1.0.2"
+    "require-dir": "^0.1.0",
+    "run-sequence": "^1.0.2",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "dependencies": {
+    "raf": "^2.0.4",
+    "superagent": "^0.21.0",
+    "webgl-enabled": "^1.0.2"
   }
 }
diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js
index bed6259..d8fba7c 100644
--- a/src/extras/TilingSprite.js
+++ b/src/extras/TilingSprite.js
@@ -1,3 +1,6 @@
+var Sprite = require('../display/Sprite'),
+    utils = require('../utils');
+
 /**
  * A tiling sprite is a fast way of rendering a tiling image
  *
@@ -366,8 +369,8 @@
         }
     }
     else {
-        targetWidth = getNextPowerOfTwo(frame.width);
-        targetHeight = getNextPowerOfTwo(frame.height);
+        targetWidth = utils.getNextPowerOfTwo(frame.width);
+        targetHeight = utils.getNextPowerOfTwo(frame.height);
 
         //  If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas
         if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true;
diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js
index e792a92..9da29ef 100644
--- a/src/extras/spine/PIXISpine.js
+++ b/src/extras/spine/PIXISpine.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /* Esoteric Software SPINE wrapper for pixi.js */
 
 spine.Bone.yDown = true;
@@ -137,7 +139,7 @@
 
             slotContainer.rotation = -(slot.bone.worldRotation * spine.degRad);
 
-            slot.currentSprite.tint = rgb2hex([slot.r,slot.g,slot.b]);
+            slot.currentSprite.tint = utils.rgb2hex([slot.r,slot.g,slot.b]);
         }
         else if (type === spine.AttachmentType.skinnedmesh) {
             if (!slot.currentMeshName || slot.currentMeshName !== attachment.name) {
diff --git a/src/index.js b/src/index.js
index 1fdd6bd..2238a0e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,3 @@
-/* global PIXI:true */
 /**
  * @file        Main export of the PIXI library
  * @namespace   PIXI
diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js
index ab2cd17..4402e77 100644
--- a/src/renderers/canvas/CanvasRenderer.js
+++ b/src/renderers/canvas/CanvasRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /**
  * 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.
  * Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :)
@@ -268,7 +270,7 @@
     if (!blendModesCanvas) {
         blendModesCanvas = [];
 
-        if (canUseNewCanvasBlendModes()) {
+        if (utils.canUseNewCanvasBlendModes()) {
             blendModesCanvas[blendModes.NORMAL]   = "source-over";
             blendModesCanvas[blendModes.ADD]      = "lighter"; //IS THIS OK???
             blendModesCanvas[blendModes.MULTIPLY] = "multiply";
diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js
index ba70d9a..3d8e32f 100644
--- a/src/renderers/canvas/utils/CanvasMaskManager.js
+++ b/src/renderers/canvas/utils/CanvasMaskManager.js
@@ -1,3 +1,5 @@
+var CanvasGraphics = require('../CanvasGraphics');
+
 /**
  * A set of functions used to handle masking.
  *
diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js
index acd4441..d14f59c 100644
--- a/src/renderers/canvas/utils/CanvasTinter.js
+++ b/src/renderers/canvas/utils/CanvasTinter.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * Utility methods for Sprite/Texture tinting.
  *
@@ -21,7 +23,9 @@
 
     texture.tintCache = texture.tintCache || {};
 
-    if (texture.tintCache[stringColor]) return texture.tintCache[stringColor];
+    if (texture.tintCache[stringColor]) {
+        return texture.tintCache[stringColor];
+    }
 
      // clone texture..
     var canvas = CanvasTinter.canvas || document.createElement("canvas");
@@ -156,7 +160,7 @@
         crop.height
     );
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
     var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2];
 
     var pixelData = context.getImageData(0, 0, crop.width, crop.height);
@@ -180,13 +184,13 @@
 CanvasTinter.roundColor = function (color) {
     var step = CanvasTinter.cacheStepsPerColorChannel;
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
 
     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 rgb2hex(rgbValues);
+    return utils.rgb2hex(rgbValues);
 };
 
 /**
@@ -208,7 +212,7 @@
  *
  * @member
  */
-CanvasTinter.canUseMultiply = canUseNewCanvasBlendModes();
+CanvasTinter.canUseMultiply = utils.canUseNewCanvasBlendModes();
 
 /**
  * The tinting method that will be used.
diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js
index d43e680..7eb67ef 100644
--- a/src/renderers/webgl/WebGLRenderer.js
+++ b/src/renderers/webgl/WebGLRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 glContexts = []; // this is where we store the webGL contexts for easy access.
 instances = [];
 
@@ -380,7 +382,7 @@
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST);
 
 
-    if (texture.mipmap && isPowerOfTwo(texture.width, texture.height)) {
+    if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST);
         gl.generateMipmap(gl.TEXTURE_2D);
     }
diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js
index c7c7772..8f333f2 100644
--- a/src/renderers/webgl/utils/WebGLGraphics.js
+++ b/src/renderers/webgl/utils/WebGLGraphics.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * A set of functions used by the webGL renderer to draw the primitive graphics data
  *
@@ -53,7 +55,7 @@
             gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
             gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-            gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+            gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
 
             gl.uniform1f(shader.alpha, graphics.worldAlpha);
 
@@ -224,7 +226,7 @@
     var height = rectData.height;
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -294,7 +296,7 @@
     recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x + radius, y, x, y, x, y + radius));
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -348,7 +350,7 @@
  * @param cpY {number} Control point y
  * @param toX {number} Destination point x
  * @param toY {number} Destination point y
- * @return {Array(Number)}
+ * @return {number[]}
  */
 WebGLGraphics.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) {
 
@@ -418,7 +420,7 @@
     var i = 0;
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -513,7 +515,7 @@
     var width = graphicsData.lineWidth / 2;
 
     // sort color
-    var color = hex2rgb(graphicsData.lineColor);
+    var color = utils.hex2rgb(graphicsData.lineColor);
     var alpha = graphicsData.lineAlpha;
     var r = color[0] * alpha;
     var g = color[1] * alpha;
@@ -681,7 +683,7 @@
     var indices = webGLData.indices;
     webGLData.points = points;
     webGLData.alpha = graphicsData.fillAlpha;
-    webGLData.color = hex2rgb(graphicsData.fillColor);
+    webGLData.color = utils.hex2rgb(graphicsData.fillColor);
 
     /*
         calclate the bounds..
@@ -741,7 +743,7 @@
     var length = points.length / 2;
 
     // sort color
-    var color = hex2rgb(graphicsData.fillColor);
+    var color = utils.hex2rgb(graphicsData.fillColor);
     var alpha = graphicsData.fillAlpha;
     var r = color[0] * alpha;
     var g = color[1] * alpha;
diff --git a/src/renderers/webgl/utils/WebGLStencilManager.js b/src/renderers/webgl/utils/WebGLStencilManager.js
index bf7dd73..40c2acc 100644
--- a/src/renderers/webgl/utils/WebGLStencilManager.js
+++ b/src/renderers/webgl/utils/WebGLStencilManager.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * @class
  * @namespace PIXI
@@ -130,7 +132,7 @@
         gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
         gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-        gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+        gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
         gl.uniform3fv(shader.color, webGLData.color);
 
         gl.uniform1f(shader.alpha, graphics.worldAlpha * webGLData.alpha);
@@ -155,7 +157,7 @@
         gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
         gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-        gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+        gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
 
         gl.uniform1f(shader.alpha, graphics.worldAlpha);
 
diff --git a/src/utils/Detector.js b/src/utils/Detector.js
deleted file mode 100644
index 99f4e39..0000000
--- a/src/utils/Detector.js
+++ /dev/null
@@ -1,78 +0,0 @@
-//TODO: Replace this code with external modules!
-
-/**
- * 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
- *
- * @static
- * @namespace 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
- *
- */
-function autoDetectRenderer(width, height, options) {
-    width = width || 800;
-    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 WebGLRenderer(width, height, options);
-    }
-
-    return new CanvasRenderer(width, height, options);
-}
-
-/**
- * This helper function will automatically detect which renderer you should be using.
- * This function is very similar to the autoDetectRenderer function except that is will return a canvas renderer for android.
- * Even thought both android chrome supports webGL the canvas implementation perform better at the time of writing.
- * This function will likely change and update as webGL performance improves on these devices.
- *
- * @static
- * @namespace 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
- *
- */
-function autoDetectRecommendedRenderer(width, height, options) {
-    width = width || 800;
-    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;
-                                }
-                            } )();
-
-    var isAndroid = /Android/i.test(navigator.userAgent);
-
-    if (webgl && !isAndroid) {
-        return new WebGLRenderer(width, height, options);
-    }
-
-    return new CanvasRenderer(width, height, options);
-}
diff --git a/src/utils/Event.js b/src/utils/Event.js
new file mode 100644
index 0000000..0c187ee
--- /dev/null
+++ b/src/utils/Event.js
@@ -0,0 +1,81 @@
+/**
+ * Creates an homogenous object for tracking events so users can know what to expect.
+ *
+ * @class
+ * @namespace PIXI
+ * @param target {object} The target object that the event is called on
+ * @param name {string} The string name of the event that was triggered
+ * @param data {object} Arbitrary event data to pass along
+ */
+function Event(target, name, data) {
+    // for duck typing in the ".on()" function
+    this.__isEventObject = true;
+
+    /**
+     * Tracks the state of bubbling propagation. Do not
+     * set this directly, instead use `event.stopPropagation()`
+     *
+     * @member {boolean}
+     * @private
+     * @readonly
+     */
+    this.stopped = false;
+
+    /**
+     * Tracks the state of sibling listener propagation. Do not
+     * set this directly, instead use `event.stopImmediatePropagation()`
+     *
+     * @member {boolean}
+     * @private
+     * @readonly
+     */
+    this.stoppedImmediate = false;
+
+    /**
+     * The original target the event triggered on.
+     *
+     * @member {object}
+     * @readonly
+     */
+    this.target = target;
+
+    /**
+     * The string name of the event that this represents.
+     *
+     * @member {string}
+     * @readonly
+     */
+    this.type = name;
+
+    /**
+     * The data that was passed in with this event.
+     *
+     * @member {object}
+     * @readonly
+     */
+    this.data = data;
+
+    /**
+     * The timestamp when the event occurred.
+     *
+     * @member {number}
+     * @readonly
+     */
+    this.timeStamp = Date.now();
+};
+
+/**
+ * Stops the propagation of events up the scene graph (prevents bubbling).
+ *
+ */
+Event.prototype.stopPropagation = function stopPropagation() {
+    this.stopped = true;
+};
+
+/**
+ * Stops the propagation of events to sibling listeners (no longer calls any listeners).
+ *
+ */
+Event.prototype.stopImmediatePropagation = function stopImmediatePropagation() {
+    this.stoppedImmediate = true;
+};
diff --git a/src/utils/EventTarget.js b/src/utils/EventTarget.js
index e01b7d6..92a5908 100644
--- a/src/utils/EventTarget.js
+++ b/src/utils/EventTarget.js
@@ -1,10 +1,7 @@
-/**
- * Originally based on https://github.com/mrdoob/eventtarget.js/ from mr Doob.
- * Currently takes inspiration from the nodejs EventEmitter, EventEmitter3, and smokesignals
- */
+var Event = require('./Event');
 
 /**
- * Mixins event emitter functionality to a class
+ * Mixins event emitter functionality to an object.
  *
  * @mixin
  * @namespace PIXI
@@ -163,16 +160,6 @@
 
 module.exports = {
     /**
-     * Backward compat from when this used to be a function
-     */
-    call: function callCompat(obj) {
-        if (obj) {
-            obj = obj.prototype || obj;
-            EventTarget(obj);
-        }
-    },
-
-    /**
      * Mixes in the properties of the EventTarget prototype onto another object
      *
      * @param object {object} The obj to mix into
@@ -181,88 +168,3 @@
         EventTarget(obj);
     }
 }
-
-/**
- * Creates an homogenous object for tracking events so users can know what to expect.
- *
- * @class
- * @namespace PIXI
- * @param target {object} The target object that the event is called on
- * @param name {string} The string name of the event that was triggered
- * @param data {object} Arbitrary event data to pass along
- */
-function Event(target, name, data) {
-    // for duck typing in the ".on()" function
-    this.__isEventObject = true;
-
-    /**
-     * Tracks the state of bubbling propagation. Do not
-     * set this directly, instead use `event.stopPropagation()`
-     *
-     * @member {boolean}
-     * @private
-     * @readonly
-     */
-    this.stopped = false;
-
-    /**
-     * Tracks the state of sibling listener propagation. Do not
-     * set this directly, instead use `event.stopImmediatePropagation()`
-     *
-     * @member {boolean}
-     * @private
-     * @readonly
-     */
-    this.stoppedImmediate = false;
-
-    /**
-     * The original target the event triggered on.
-     *
-     * @member {object}
-     * @readonly
-     */
-    this.target = target;
-
-    /**
-     * The string name of the event that this represents.
-     *
-     * @member {string}
-     * @readonly
-     */
-    this.type = name;
-
-    /**
-     * The data that was passed in with this event.
-     *
-     * @member {object}
-     * @readonly
-     */
-    this.data = data;
-
-    //backwards compat with older version of events
-    this.content = data;
-
-    /**
-     * The timestamp when the event occurred.
-     *
-     * @member {number}
-     * @readonly
-     */
-    this.timeStamp = Date.now();
-};
-
-/**
- * Stops the propagation of events up the scene graph (prevents bubbling).
- *
- */
-Event.prototype.stopPropagation = function stopPropagation() {
-    this.stopped = true;
-};
-
-/**
- * Stops the propagation of events to sibling listeners (no longer calls any listeners).
- *
- */
-Event.prototype.stopImmediatePropagation = function stopImmediatePropagation() {
-    this.stoppedImmediate = true;
-};
diff --git a/src/utils/Polyk.js b/src/utils/Polyk.js
index c53c473..7325141 100644
--- a/src/utils/Polyk.js
+++ b/src/utils/Polyk.js
@@ -1,3 +1,6 @@
+//TODO: Have Graphics use https://github.com/mattdesl/shape2d
+// and https://github.com/mattdesl/shape2d-triangulate instead of custom code.
+
 /*
     PolyK library
     url: http://polyk.ivank.net
diff --git a/src/utils/Utils.js b/src/utils/Utils.js
deleted file mode 100644
index 5c94d92..0000000
--- a/src/utils/Utils.js
+++ /dev/null
@@ -1,197 +0,0 @@
-// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
-// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
-
-// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
-
-// MIT license
-
-/**
- * A polyfill for requestAnimationFrame
- * You can actually use both requestAnimationFrame and requestAnimFrame,
- * you will still benefit from the polyfill
- *
- */
-
-/**
- * A polyfill for cancelAnimationFrame
- *
- */
-(function (window) {
-    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;
-        };
-    }
-
-    if (!window.cancelAnimationFrame) {
-        window.cancelAnimationFrame = function (id) {
-            clearTimeout(id);
-        };
-    }
-
-    window.requestAnimFrame = window.requestAnimationFrame;
-})(this);
-
-/**
- * Converts a hex color number to an [R, G, B] array
- *
- * @param hex {number}
- */
-function hex2rgb(hex) {
-    return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255];
-};
-
-/**
- * Converts a color as an [R, G, B] array to a hex number
- *
- * @param rgb {Array}
- */
-function rgb2hex(rgb) {
-    return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255);
-};
-
-/**
- * A polyfill for Function.prototype.bind
- *
- */
-if (typeof Function.prototype.bind !== 'function') {
-    Function.prototype.bind = (function () {
-        return function (thisArg) {
-            var target = this, i = arguments.length - 1, boundArgs = [];
-            if (i > 0) {
-                boundArgs.length = i;
-                while (i--) boundArgs[i] = arguments[i + 1];
-            }
-
-            if (typeof target !== 'function') throw new TypeError();
-
-            function bound() {
-                var i = arguments.length, args = new Array(i);
-                while (i--) args[i] = arguments[i];
-                args = boundArgs.concat(args);
-                return target.apply(this instanceof bound ? this : thisArg, args);
-            }
-
-            bound.prototype = (function F(proto) {
-                if (proto) F.prototype = proto;
-                if (!(this instanceof F)) return new F();
-            })(target.prototype);
-
-            return bound;
-        };
-    })();
-}
-
-/**
- * A wrapper for ajax requests to be handled cross browser
- *
- * @class
- * @namespace PIXI
- */
-function AjaxRequest() {
-    var activexmodes = ['Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.3.0', 'Microsoft.XMLHTTP']; //activeX versions to check for in IE
-
-    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++) {
-            try{
-                return new window.ActiveXObject(activexmodes[i]);
-            }
-            catch(e) {
-                //suppress error
-            }
-        }
-    }
-    else if (window.XMLHttpRequest) // if Mozilla, Safari etc
-    {
-        return new window.XMLHttpRequest();
-    }
-    else {
-        return false;
-    }
-};
-/*
-function packColorRGBA(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;
-
-};
- */
-/*
-function packColorRGB(r, g, b)//r, g, b, a) {
-    return (Math.floor((r)*255) << 16) | (Math.floor((g)*255) << 8) | (Math.floor((b)*255));
-};
-
-function unpackColorRGB(r, g, b)//r, g, b, a) {
-    return (Math.floor((r)*255) << 16) | (Math.floor((g)*255) << 8) | (Math.floor((b)*255));
-};
- */
-
-/**
- * Checks whether the Canvas BlendModes are supported by the current browser
- *
- * @return {boolean} whether they are supported
- */
-function canUseNewCanvasBlendModes() {
-    if (typeof document === 'undefined') return false;
-    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;
-};
-
-/**
- * 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
- */
-function getNextPowerOfTwo(number) {
-    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;
-    }
-};
-
-/**
- * checks if the given width and height make a power of two texture
- * @param width {number}
- * @param height {number}
- * @return {boolean}
- */
-function isPowerOfTwo(width, height) {
-    return (width > 0 && (width & (width - 1)) === 0 && height > 0 && (height & (height - 1)) === 0);
-
-};

diff --git a/.jshintrc b/.jshintrc
index 4579043..a29dc86 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -103,5 +103,5 @@
     "nomen"         : false,    // Prohibit use of initial or trailing underbars in names.
     "onevar"        : false,    // Allow only one `var` statement per function.
     "passfail"      : false,    // Stop on first error.
-    "white"         : false,    // Check against strict whitespace and indentation rules.
+    "white"         : false     // Check against strict whitespace and indentation rules.
 }
diff --git a/gulp/tasks/jshint.js b/gulp/tasks/jshint.js
index 07cf0d1..80b5ec6 100644
--- a/gulp/tasks/jshint.js
+++ b/gulp/tasks/jshint.js
@@ -3,8 +3,9 @@
     handleErrors = require('../util/handleErrors');
 
 gulp.task('jshint', function () {
+    console.log(paths.scripts, process.cwd());
     return gulp.src(paths.scripts)
         .pipe(handleErrors())
-        .pipe(jshint('../.jshintrc'))
+        .pipe(jshint())
         .pipe(jshint.reporter('jshint-summary'));
 });
diff --git a/gulpfile.js b/gulpfile.js
index 84e7a00..fe1a054 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -21,8 +21,8 @@
     src: './src',
     out: './dist',
 
-    get scripts() { return this.source + '/js/**/*.js'; },
-    get jsEntry() { return this.source + '/js/index'; }
+    get scripts() { return this.src + '/**/*.js'; },
+    get jsEntry() { return this.src + '/index'; }
 };
 
 // Require all tasks in gulp/tasks, including subfolders
diff --git a/package.json b/package.json
index 82bebce..5132759 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "docs": "./node_modules/.bin/jsdoc -c ./gulp/util/jsdoc.conf.json"
   },
   "devDependencies": {
+    "browserify": "^8.0.2",
     "chai": "^1.10.0",
     "del": "^1.1.0",
     "gulp": "^3.8.10",
@@ -28,11 +29,20 @@
     "gulp-util": "^3.0.1",
     "ink-docstrap": "^0.4.12",
     "jsdoc": "^3.3.0-alpha13",
+    "jshint-summary": "^0.4.0",
     "karma": "^0.12.28",
     "karma-firefox-launcher": "^0.1.0",
     "karma-mocha": "^0.1.10",
     "karma-spec-reporter": "^0.0.16",
     "mocha": "^2.1.0",
-    "run-sequence": "^1.0.2"
+    "require-dir": "^0.1.0",
+    "run-sequence": "^1.0.2",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.2.1"
+  },
+  "dependencies": {
+    "raf": "^2.0.4",
+    "superagent": "^0.21.0",
+    "webgl-enabled": "^1.0.2"
   }
 }
diff --git a/src/extras/TilingSprite.js b/src/extras/TilingSprite.js
index bed6259..d8fba7c 100644
--- a/src/extras/TilingSprite.js
+++ b/src/extras/TilingSprite.js
@@ -1,3 +1,6 @@
+var Sprite = require('../display/Sprite'),
+    utils = require('../utils');
+
 /**
  * A tiling sprite is a fast way of rendering a tiling image
  *
@@ -366,8 +369,8 @@
         }
     }
     else {
-        targetWidth = getNextPowerOfTwo(frame.width);
-        targetHeight = getNextPowerOfTwo(frame.height);
+        targetWidth = utils.getNextPowerOfTwo(frame.width);
+        targetHeight = utils.getNextPowerOfTwo(frame.height);
 
         //  If the BaseTexture dimensions don't match the texture frame then we need a new texture anyway because it's part of a texture atlas
         if (frame.width !== targetWidth || frame.height !== targetHeight || texture.baseTexture.width !== targetWidth || texture.baseTexture.height || targetHeight) newTextureRequired = true;
diff --git a/src/extras/spine/PIXISpine.js b/src/extras/spine/PIXISpine.js
index e792a92..9da29ef 100644
--- a/src/extras/spine/PIXISpine.js
+++ b/src/extras/spine/PIXISpine.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /* Esoteric Software SPINE wrapper for pixi.js */
 
 spine.Bone.yDown = true;
@@ -137,7 +139,7 @@
 
             slotContainer.rotation = -(slot.bone.worldRotation * spine.degRad);
 
-            slot.currentSprite.tint = rgb2hex([slot.r,slot.g,slot.b]);
+            slot.currentSprite.tint = utils.rgb2hex([slot.r,slot.g,slot.b]);
         }
         else if (type === spine.AttachmentType.skinnedmesh) {
             if (!slot.currentMeshName || slot.currentMeshName !== attachment.name) {
diff --git a/src/index.js b/src/index.js
index 1fdd6bd..2238a0e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,3 @@
-/* global PIXI:true */
 /**
  * @file        Main export of the PIXI library
  * @namespace   PIXI
diff --git a/src/renderers/canvas/CanvasRenderer.js b/src/renderers/canvas/CanvasRenderer.js
index ab2cd17..4402e77 100644
--- a/src/renderers/canvas/CanvasRenderer.js
+++ b/src/renderers/canvas/CanvasRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 /**
  * 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.
  * Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :)
@@ -268,7 +270,7 @@
     if (!blendModesCanvas) {
         blendModesCanvas = [];
 
-        if (canUseNewCanvasBlendModes()) {
+        if (utils.canUseNewCanvasBlendModes()) {
             blendModesCanvas[blendModes.NORMAL]   = "source-over";
             blendModesCanvas[blendModes.ADD]      = "lighter"; //IS THIS OK???
             blendModesCanvas[blendModes.MULTIPLY] = "multiply";
diff --git a/src/renderers/canvas/utils/CanvasMaskManager.js b/src/renderers/canvas/utils/CanvasMaskManager.js
index ba70d9a..3d8e32f 100644
--- a/src/renderers/canvas/utils/CanvasMaskManager.js
+++ b/src/renderers/canvas/utils/CanvasMaskManager.js
@@ -1,3 +1,5 @@
+var CanvasGraphics = require('../CanvasGraphics');
+
 /**
  * A set of functions used to handle masking.
  *
diff --git a/src/renderers/canvas/utils/CanvasTinter.js b/src/renderers/canvas/utils/CanvasTinter.js
index acd4441..d14f59c 100644
--- a/src/renderers/canvas/utils/CanvasTinter.js
+++ b/src/renderers/canvas/utils/CanvasTinter.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * Utility methods for Sprite/Texture tinting.
  *
@@ -21,7 +23,9 @@
 
     texture.tintCache = texture.tintCache || {};
 
-    if (texture.tintCache[stringColor]) return texture.tintCache[stringColor];
+    if (texture.tintCache[stringColor]) {
+        return texture.tintCache[stringColor];
+    }
 
      // clone texture..
     var canvas = CanvasTinter.canvas || document.createElement("canvas");
@@ -156,7 +160,7 @@
         crop.height
     );
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
     var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2];
 
     var pixelData = context.getImageData(0, 0, crop.width, crop.height);
@@ -180,13 +184,13 @@
 CanvasTinter.roundColor = function (color) {
     var step = CanvasTinter.cacheStepsPerColorChannel;
 
-    var rgbValues = hex2rgb(color);
+    var rgbValues = utils.hex2rgb(color);
 
     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 rgb2hex(rgbValues);
+    return utils.rgb2hex(rgbValues);
 };
 
 /**
@@ -208,7 +212,7 @@
  *
  * @member
  */
-CanvasTinter.canUseMultiply = canUseNewCanvasBlendModes();
+CanvasTinter.canUseMultiply = utils.canUseNewCanvasBlendModes();
 
 /**
  * The tinting method that will be used.
diff --git a/src/renderers/webgl/WebGLRenderer.js b/src/renderers/webgl/WebGLRenderer.js
index d43e680..7eb67ef 100644
--- a/src/renderers/webgl/WebGLRenderer.js
+++ b/src/renderers/webgl/WebGLRenderer.js
@@ -1,3 +1,5 @@
+var utils = require('../../utils');
+
 glContexts = []; // this is where we store the webGL contexts for easy access.
 instances = [];
 
@@ -380,7 +382,7 @@
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST);
 
 
-    if (texture.mipmap && isPowerOfTwo(texture.width, texture.height)) {
+    if (texture.mipmap && utils.isPowerOfTwo(texture.width, texture.height)) {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === scaleModes.LINEAR ? gl.LINEAR_MIPMAP_LINEAR : gl.NEAREST_MIPMAP_NEAREST);
         gl.generateMipmap(gl.TEXTURE_2D);
     }
diff --git a/src/renderers/webgl/utils/WebGLGraphics.js b/src/renderers/webgl/utils/WebGLGraphics.js
index c7c7772..8f333f2 100644
--- a/src/renderers/webgl/utils/WebGLGraphics.js
+++ b/src/renderers/webgl/utils/WebGLGraphics.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * A set of functions used by the webGL renderer to draw the primitive graphics data
  *
@@ -53,7 +55,7 @@
             gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
             gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-            gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+            gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
 
             gl.uniform1f(shader.alpha, graphics.worldAlpha);
 
@@ -224,7 +226,7 @@
     var height = rectData.height;
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -294,7 +296,7 @@
     recPoints = recPoints.concat(WebGLGraphics.quadraticBezierCurve(x + radius, y, x, y, x, y + radius));
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -348,7 +350,7 @@
  * @param cpY {number} Control point y
  * @param toX {number} Destination point x
  * @param toY {number} Destination point y
- * @return {Array(Number)}
+ * @return {number[]}
  */
 WebGLGraphics.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY) {
 
@@ -418,7 +420,7 @@
     var i = 0;
 
     if (graphicsData.fill) {
-        var color = hex2rgb(graphicsData.fillColor);
+        var color = utils.hex2rgb(graphicsData.fillColor);
         var alpha = graphicsData.fillAlpha;
 
         var r = color[0] * alpha;
@@ -513,7 +515,7 @@
     var width = graphicsData.lineWidth / 2;
 
     // sort color
-    var color = hex2rgb(graphicsData.lineColor);
+    var color = utils.hex2rgb(graphicsData.lineColor);
     var alpha = graphicsData.lineAlpha;
     var r = color[0] * alpha;
     var g = color[1] * alpha;
@@ -681,7 +683,7 @@
     var indices = webGLData.indices;
     webGLData.points = points;
     webGLData.alpha = graphicsData.fillAlpha;
-    webGLData.color = hex2rgb(graphicsData.fillColor);
+    webGLData.color = utils.hex2rgb(graphicsData.fillColor);
 
     /*
         calclate the bounds..
@@ -741,7 +743,7 @@
     var length = points.length / 2;
 
     // sort color
-    var color = hex2rgb(graphicsData.fillColor);
+    var color = utils.hex2rgb(graphicsData.fillColor);
     var alpha = graphicsData.fillAlpha;
     var r = color[0] * alpha;
     var g = color[1] * alpha;
diff --git a/src/renderers/webgl/utils/WebGLStencilManager.js b/src/renderers/webgl/utils/WebGLStencilManager.js
index bf7dd73..40c2acc 100644
--- a/src/renderers/webgl/utils/WebGLStencilManager.js
+++ b/src/renderers/webgl/utils/WebGLStencilManager.js
@@ -1,3 +1,5 @@
+var utils = require('../../../utils');
+
 /**
  * @class
  * @namespace PIXI
@@ -130,7 +132,7 @@
         gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
         gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-        gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+        gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
         gl.uniform3fv(shader.color, webGLData.color);
 
         gl.uniform1f(shader.alpha, graphics.worldAlpha * webGLData.alpha);
@@ -155,7 +157,7 @@
         gl.uniform2f(shader.projectionVector, projection.x, -projection.y);
         gl.uniform2f(shader.offsetVector, -offset.x, -offset.y);
 
-        gl.uniform3fv(shader.tintColor, hex2rgb(graphics.tint));
+        gl.uniform3fv(shader.tintColor, utils.hex2rgb(graphics.tint));
 
         gl.uniform1f(shader.alpha, graphics.worldAlpha);
 
diff --git a/src/utils/Detector.js b/src/utils/Detector.js
deleted file mode 100644
index 99f4e39..0000000
--- a/src/utils/Detector.js
+++ /dev/null
@@ -1,78 +0,0 @@
-//TODO: Replace this code with external modules!
-
-/**
- * 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
- *
- * @static
- * @namespace 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
- *
- */
-function autoDetectRenderer(width, height, options) {
-    width = width || 800;
-    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 WebGLRenderer(width, height, options);
-    }
-
-    return new CanvasRenderer(width, height, options);
-}
-
-/**
- * This helper function will automatically detect which renderer you should be using.
- * This function is very similar to the autoDetectRenderer function except that is will return a canvas renderer for android.
- * Even thought both android chrome supports webGL the canvas implementation perform better at the time of writing.
- * This function will likely change and update as webGL performance improves on these devices.
- *
- * @static
- * @namespace 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
- *
- */
-function autoDetectRecommendedRenderer(width, height, options) {
-    width = width || 800;
-    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;
-                                }
-                            } )();
-
-    var isAndroid = /Android/i.test(navigator.userAgent);
-
-    if (webgl && !isAndroid) {
-        return new WebGLRenderer(width, height, options);
-    }
-
-    return new CanvasRenderer(width, height, options);
-}
diff --git a/src/utils/Event.js b/src/utils/Event.js
new file mode 100644
index 0000000..0c187ee
--- /dev/null
+++ b/src/utils/Event.js
@@ -0,0 +1,81 @@
+/**
+ * Creates an homogenous object for tracking events so users can know what to expect.
+ *
+ * @class
+ * @namespace PIXI
+ * @param target {object} The target object that the event is called on
+ * @param name {string} The string name of the event that was triggered
+ * @param data {object} Arbitrary event data to pass along
+ */
+function Event(target, name, data) {
+    // for duck typing in the ".on()" function
+    this.__isEventObject = true;
+
+    /**
+     * Tracks the state of bubbling propagation. Do not
+     * set this directly, instead use `event.stopPropagation()`
+     *
+     * @member {boolean}
+     * @private
+     * @readonly
+     */
+    this.stopped = false;
+
+    /**
+     * Tracks the state of sibling listener propagation. Do not
+     * set this directly, instead use `event.stopImmediatePropagation()`
+     *
+     * @member {boolean}
+     * @private
+     * @readonly
+     */
+    this.stoppedImmediate = false;
+
+    /**
+     * The original target the event triggered on.
+     *
+     * @member {object}
+     * @readonly
+     */
+    this.target = target;
+
+    /**
+     * The string name of the event that this represents.
+     *
+     * @member {string}
+     * @readonly
+     */
+    this.type = name;
+
+    /**
+     * The data that was passed in with this event.
+     *
+     * @member {object}
+     * @readonly
+     */
+    this.data = data;
+
+    /**
+     * The timestamp when the event occurred.
+     *
+     * @member {number}
+     * @readonly
+     */
+    this.timeStamp = Date.now();
+};
+
+/**
+ * Stops the propagation of events up the scene graph (prevents bubbling).
+ *
+ */
+Event.prototype.stopPropagation = function stopPropagation() {
+    this.stopped = true;
+};
+
+/**
+ * Stops the propagation of events to sibling listeners (no longer calls any listeners).
+ *
+ */
+Event.prototype.stopImmediatePropagation = function stopImmediatePropagation() {
+    this.stoppedImmediate = true;
+};
diff --git a/src/utils/EventTarget.js b/src/utils/EventTarget.js
index e01b7d6..92a5908 100644
--- a/src/utils/EventTarget.js
+++ b/src/utils/EventTarget.js
@@ -1,10 +1,7 @@
-/**
- * Originally based on https://github.com/mrdoob/eventtarget.js/ from mr Doob.
- * Currently takes inspiration from the nodejs EventEmitter, EventEmitter3, and smokesignals
- */
+var Event = require('./Event');
 
 /**
- * Mixins event emitter functionality to a class
+ * Mixins event emitter functionality to an object.
  *
  * @mixin
  * @namespace PIXI
@@ -163,16 +160,6 @@
 
 module.exports = {
     /**
-     * Backward compat from when this used to be a function
-     */
-    call: function callCompat(obj) {
-        if (obj) {
-            obj = obj.prototype || obj;
-            EventTarget(obj);
-        }
-    },
-
-    /**
      * Mixes in the properties of the EventTarget prototype onto another object
      *
      * @param object {object} The obj to mix into
@@ -181,88 +168,3 @@
         EventTarget(obj);
     }
 }
-
-/**
- * Creates an homogenous object for tracking events so users can know what to expect.
- *
- * @class
- * @namespace PIXI
- * @param target {object} The target object that the event is called on
- * @param name {string} The string name of the event that was triggered
- * @param data {object} Arbitrary event data to pass along
- */
-function Event(target, name, data) {
-    // for duck typing in the ".on()" function
-    this.__isEventObject = true;
-
-    /**
-     * Tracks the state of bubbling propagation. Do not
-     * set this directly, instead use `event.stopPropagation()`
-     *
-     * @member {boolean}
-     * @private
-     * @readonly
-     */
-    this.stopped = false;
-
-    /**
-     * Tracks the state of sibling listener propagation. Do not
-     * set this directly, instead use `event.stopImmediatePropagation()`
-     *
-     * @member {boolean}
-     * @private
-     * @readonly
-     */
-    this.stoppedImmediate = false;
-
-    /**
-     * The original target the event triggered on.
-     *
-     * @member {object}
-     * @readonly
-     */
-    this.target = target;
-
-    /**
-     * The string name of the event that this represents.
-     *
-     * @member {string}
-     * @readonly
-     */
-    this.type = name;
-
-    /**
-     * The data that was passed in with this event.
-     *
-     * @member {object}
-     * @readonly
-     */
-    this.data = data;
-
-    //backwards compat with older version of events
-    this.content = data;
-
-    /**
-     * The timestamp when the event occurred.
-     *
-     * @member {number}
-     * @readonly
-     */
-    this.timeStamp = Date.now();
-};
-
-/**
- * Stops the propagation of events up the scene graph (prevents bubbling).
- *
- */
-Event.prototype.stopPropagation = function stopPropagation() {
-    this.stopped = true;
-};
-
-/**
- * Stops the propagation of events to sibling listeners (no longer calls any listeners).
- *
- */
-Event.prototype.stopImmediatePropagation = function stopImmediatePropagation() {
-    this.stoppedImmediate = true;
-};
diff --git a/src/utils/Polyk.js b/src/utils/Polyk.js
index c53c473..7325141 100644
--- a/src/utils/Polyk.js
+++ b/src/utils/Polyk.js
@@ -1,3 +1,6 @@
+//TODO: Have Graphics use https://github.com/mattdesl/shape2d
+// and https://github.com/mattdesl/shape2d-triangulate instead of custom code.
+
 /*
     PolyK library
     url: http://polyk.ivank.net
diff --git a/src/utils/Utils.js b/src/utils/Utils.js
deleted file mode 100644
index 5c94d92..0000000
--- a/src/utils/Utils.js
+++ /dev/null
@@ -1,197 +0,0 @@
-// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
-// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
-
-// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
-
-// MIT license
-
-/**
- * A polyfill for requestAnimationFrame
- * You can actually use both requestAnimationFrame and requestAnimFrame,
- * you will still benefit from the polyfill
- *
- */
-
-/**
- * A polyfill for cancelAnimationFrame
- *
- */
-(function (window) {
-    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;
-        };
-    }
-
-    if (!window.cancelAnimationFrame) {
-        window.cancelAnimationFrame = function (id) {
-            clearTimeout(id);
-        };
-    }
-
-    window.requestAnimFrame = window.requestAnimationFrame;
-})(this);
-
-/**
- * Converts a hex color number to an [R, G, B] array
- *
- * @param hex {number}
- */
-function hex2rgb(hex) {
-    return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255];
-};
-
-/**
- * Converts a color as an [R, G, B] array to a hex number
- *
- * @param rgb {Array}
- */
-function rgb2hex(rgb) {
-    return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255);
-};
-
-/**
- * A polyfill for Function.prototype.bind
- *
- */
-if (typeof Function.prototype.bind !== 'function') {
-    Function.prototype.bind = (function () {
-        return function (thisArg) {
-            var target = this, i = arguments.length - 1, boundArgs = [];
-            if (i > 0) {
-                boundArgs.length = i;
-                while (i--) boundArgs[i] = arguments[i + 1];
-            }
-
-            if (typeof target !== 'function') throw new TypeError();
-
-            function bound() {
-                var i = arguments.length, args = new Array(i);
-                while (i--) args[i] = arguments[i];
-                args = boundArgs.concat(args);
-                return target.apply(this instanceof bound ? this : thisArg, args);
-            }
-
-            bound.prototype = (function F(proto) {
-                if (proto) F.prototype = proto;
-                if (!(this instanceof F)) return new F();
-            })(target.prototype);
-
-            return bound;
-        };
-    })();
-}
-
-/**
- * A wrapper for ajax requests to be handled cross browser
- *
- * @class
- * @namespace PIXI
- */
-function AjaxRequest() {
-    var activexmodes = ['Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.3.0', 'Microsoft.XMLHTTP']; //activeX versions to check for in IE
-
-    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++) {
-            try{
-                return new window.ActiveXObject(activexmodes[i]);
-            }
-            catch(e) {
-                //suppress error
-            }
-        }
-    }
-    else if (window.XMLHttpRequest) // if Mozilla, Safari etc
-    {
-        return new window.XMLHttpRequest();
-    }
-    else {
-        return false;
-    }
-};
-/*
-function packColorRGBA(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;
-
-};
- */
-/*
-function packColorRGB(r, g, b)//r, g, b, a) {
-    return (Math.floor((r)*255) << 16) | (Math.floor((g)*255) << 8) | (Math.floor((b)*255));
-};
-
-function unpackColorRGB(r, g, b)//r, g, b, a) {
-    return (Math.floor((r)*255) << 16) | (Math.floor((g)*255) << 8) | (Math.floor((b)*255));
-};
- */
-
-/**
- * Checks whether the Canvas BlendModes are supported by the current browser
- *
- * @return {boolean} whether they are supported
- */
-function canUseNewCanvasBlendModes() {
-    if (typeof document === 'undefined') return false;
-    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;
-};
-
-/**
- * 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
- */
-function getNextPowerOfTwo(number) {
-    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;
-    }
-};
-
-/**
- * checks if the given width and height make a power of two texture
- * @param width {number}
- * @param height {number}
- * @return {boolean}
- */
-function isPowerOfTwo(width, height) {
-    return (width > 0 && (width & (width - 1)) === 0 && height > 0 && (height & (height - 1)) === 0);
-
-};
diff --git a/src/utils/index.js b/src/utils/index.js
new file mode 100644
index 0000000..156bd39
--- /dev/null
+++ b/src/utils/index.js
@@ -0,0 +1,118 @@
+var webglEnabled = requrire('webgl-enabled')();
+
+/**
+ * @namespace PIXI
+ */
+var utils = module.exports = {
+    /**
+     * 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) {
+        return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255];
+    },
+
+    /**
+     * 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);
+    },
+
+    /**
+     * 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;
+        }
+
+        var canvas = document.createElement('canvas'),
+            context = canvas.getContext('2d');
+
+        canvas.width = 1;
+        canvas.height = 1;
+
+        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;
+    },
+
+    /**
+     * 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;
+
+            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);
+    },
+
+    /**
+     * 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
+     *
+     * @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
+     * @return {WebGLRenderer|CanvasRenderer} Returns WebGL renderer if available, otherwise CanvasRenderer
+     */
+    autoDetectRenderer: function (width, height, options) {
+        width = width || 800;
+        height = height || 600;
+
+        if (webglEnabled) {
+            return new WebGLRenderer(width, height, options);
+        }
+
+        return new CanvasRenderer(width, height, options);
+    },
+
+    PolyK:      require('./PolyK'),
+    Event:      require('./Event'),
+    EventTarget: require('./EventTarget')
+};