diff --git a/.gitignore b/.gitignore index 28d80ebe..454774c9 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,5 @@ build/api/* .*.sw? .DS_store .project -.idea \ No newline at end of file +.idea +node_modules/ diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 00000000..6ef04eb8 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,5 @@ +language: node_js +node_js: + - "0.10" +before_script: + - npm install -g grunt-cli diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 00000000..d60cb2fb --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,143 @@ +require("coffee-script"); +var fs = require('fs'); + +module.exports = function (grunt) { + var pkg = grunt.file.readJSON('package.json'); + var fileList = pkg.files, version = pkg.version; + var banner = '/**\n' + + ' * <%= pkg.name %> <%= pkg.version %>\n' + + ' * <%= pkg.author.url %>\n *\n' + + ' * Copyright <%= grunt.template.today("yyyy") %>, <%= pkg.author.name %>\n' + + ' * Dual licensed under the MIT or GPL licenses.\n' + + ' */\n\n'; + + var getFiles = function (){ + return fileList; + }; + + var docGen = function(){ + done = this.async(); + buildDir = "build/api/"; + grunt.file.mkdir(buildDir); + var callback = function(){ + console.log("Documentation created in " + buildDir); + done(); + }; + var md = require("./build/api-gen"); + md.document(getFiles(), buildDir, "build/template.html", version, callback); + }; + + // Project configuration. + grunt.initConfig({ + + pkg: grunt.file.readJSON('package.json'), + + usebanner: { + dist: { + options: { + position: 'top', + banner: banner + }, + files: { + src: ['crafty.js'] + } + } + }, + + browserify: { + dist: { + files: { + 'crafty.js': ['src/*.js'] + } + }, + debug: { + files: { + 'crafty.js': ['src/*.js'] + }, + options: { + debug: true + } + } + }, + + watch: { + files: ['src/*.js'], + tasks: ['build:dev'] + }, + + uglify: { + options: { + banner: banner + }, + build: { + src: 'crafty.js', + dest: 'crafty-min.js' + } + }, + + jshint: { + files: ['Gruntfile.js', 'src/**/*.js'], + options: { + globals: { + } + } + }, + + qunit: { + all: [ + 'tests/core.html', + 'tests/animation/animation.html', + 'tests/stage.html', + 'tests/events.html', + 'tests/math.html', + 'tests/isometric.html', + 'tests/loader.html', + 'tests/text.html', + 'tests/dom.html', + 'tests/tween.html', + 'tests/sound.html' + ] + }, + + jsvalidate: { + files: "crafty.js" + }, + + }); + + // Load the plugin that provides the "uglify" task. + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-jshint'); + grunt.loadNpmTasks('grunt-contrib-qunit'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-jsvalidate'); + grunt.loadNpmTasks('grunt-browserify'); + grunt.loadNpmTasks('grunt-banner'); + + grunt.registerTask('version', 'Takes the version into src/version.js', function() { + fs.writeFileSync('src/version.js', 'module.exports = "' + version + '";'); + }); + + // Build development + grunt.registerTask('build:dev', ['browserify:debug', 'usebanner']); + + // Build release + grunt.registerTask('build:release', ['browserify:dist', 'usebanner']); + + // Building the documentation + grunt.registerTask('api', "Generate api documentation", docGen); + + // Default task. + grunt.registerTask('default', ['build:dev', 'jsvalidate']); + + // Run the test suite + grunt.registerTask('check', ['build:dev', 'jsvalidate', 'qunit', 'jshint']); + + // Make crafty.js ready for release - minified version + grunt.registerTask('release', ['version', 'build:release', 'uglify', 'api']); + + // Run only tests + grunt.registerTask('validate', ['qunit']); + + +}; diff --git a/README.md b/README.md index b7752da9..b4e1d6ae 100644 --- a/README.md +++ b/README.md @@ -17,64 +17,67 @@ Other Goodies: ##Using Crafty -Follow this short tutorial to get started http://craftyengine.com/tutorial/bananabomber/create-a-game - A simple game of pong: +```javascript +Crafty.init(600, 300); +Crafty.background('rgb(127,127,127)'); +//Paddles +Crafty.e("Paddle, 2D, DOM, Color, Multiway") + .color('rgb(255,0,0)') + .attr({ x: 20, y: 100, w: 10, h: 100 }) + .multiway(4, { W: -90, S: 90 }); +Crafty.e("Paddle, 2D, DOM, Color, Multiway") + .color('rgb(0,255,0)') + .attr({ x: 580, y: 100, w: 10, h: 100 }) + .multiway(4, { UP_ARROW: -90, DOWN_ARROW: 90 }); +//Ball +Crafty.e("2D, DOM, Color, Collision") + .color('rgb(0,0,255)') + .attr({ x: 300, y: 150, w: 10, h: 10, + dX: Crafty.math.randomInt(2, 5), + dY: Crafty.math.randomInt(2, 5) }) + .bind('EnterFrame', function () { + //hit floor or roof + if (this.y <= 0 || this.y >= 290) + this.dY *= -1; - Crafty.init(600, 300); - Crafty.background('rgb(127,127,127)'); - - //Paddles - Crafty.e("Paddle, 2D, DOM, Color, Multiway") - .color('rgb(255,0,0)') - .attr({ x: 20, y: 100, w: 10, h: 100 }) - .multiway(4, { W: -90, S: 90 }); - Crafty.e("Paddle, 2D, DOM, Color, Multiway") - .color('rgb(0,255,0)') - .attr({ x: 580, y: 100, w: 10, h: 100 }) - .multiway(4, { UP_ARROW: -90, DOWN_ARROW: 90 }); - - //Ball - Crafty.e("2D, DOM, Color, Collision") - .color('rgb(0,0,255)') - .attr({ x: 300, y: 150, w: 10, h: 10, - dX: Crafty.math.randomInt(2, 5), - dY: Crafty.math.randomInt(2, 5) }) - .bind('EnterFrame', function () { - //hit floor or roof - if (this.y <= 0 || this.y >= 290) - this.dY *= -1; - - if (this.x > 600) { - this.x = 300; - Crafty("LeftPoints").each(function () { - this.text(++this.points + " Points") }); - } - if (this.x < 10) { - this.x = 300; - Crafty("RightPoints").each(function () { - this.text(++this.points + " Points") }); - } - - this.x += this.dX; - this.y += this.dY; - }) - .onHit('Paddle', function () { - this.dX *= -1; - }) - - //Score boards - Crafty.e("LeftPoints, DOM, 2D, Text") - .attr({ x: 20, y: 20, w: 100, h: 20, points: 0 }) - .text("0 Points"); - Crafty.e("RightPoints, DOM, 2D, Text") - .attr({ x: 515, y: 20, w: 100, h: 20, points: 0 }) - .text("0 Points"); + if (this.x > 600) { + this.x = 300; + Crafty("LeftPoints").each(function () { + this.text(++this.points + " Points") }); + } + if (this.x < 10) { + this.x = 300; + Crafty("RightPoints").each(function () { + this.text(++this.points + " Points") }); + } + + this.x += this.dX; + this.y += this.dY; + }) + .onHit('Paddle', function () { + this.dX *= -1; +}) + +//Score boards +Crafty.e("LeftPoints, DOM, 2D, Text") + .attr({ x: 20, y: 20, w: 100, h: 20, points: 0 }) + .text("0 Points"); +Crafty.e("RightPoints, DOM, 2D, Text") + .attr({ x: 515, y: 20, w: 100, h: 20, points: 0 }) + .text("0 Points"); +``` -See the game running at http://craftyengine.com/tutorial/getting-started/how-crafty-works ##Developing -If you want to fix a bug, please submit a pull request against the development branch. +If you want to fix a bug, please submit a pull request against the development branch. Some guides to help you can be found [on the wiki](https://github.com/craftyjs/Crafty/wiki) + +If you would like to make larger contributions please catch us in the [forum](https://groups.google.com/forum/?fromgroups#!forum/craftyjs) and we will help you get started. Much appreciated :-) + + +### Quick build instructions + +The easiest way to build crafty uses [gruntjs](http://gruntjs.com/), which requires [node](nodejs.org/) and [npm](https://npmjs.org/). If you have grunt, node, and npm already installed, then run `npm install` from Crafty's root directory. (This will pull down about 30MB of node packages.) From then on, just run `grunt` to build. -If you would like to make larger contributions please catch us in the forum and we will help you get started. Much appreciated :-) \ No newline at end of file +([Full instructions here](https://github.com/craftyjs/Crafty/wiki/Building).) diff --git a/bower.json b/bower.json new file mode 100644 index 00000000..a714aed5 --- /dev/null +++ b/bower.json @@ -0,0 +1,9 @@ +{ + "name": "crafty", + "main": "crafty.js", + "version": "0.6", + "repository": { + "type": "git", + "url": "git://github.com/craftyjs/Crafty.git" + } +} diff --git a/build/api-gen.coffee b/build/api-gen.coffee new file mode 100644 index 00000000..566a2a39 --- /dev/null +++ b/build/api-gen.coffee @@ -0,0 +1,275 @@ +# Import markdown parser +marked = require("marked"); +marked.setOptions({breaks:false, sanitize:false}) +#Import file system +fs = require 'fs' + + +docCallback = null +pendingOperations = 0 +dirOut = 'markdown/' +templateName = "doc_template.html" +data = [] +versionString = "0.0.X" + +writeOut = (name, html)-> + fs.writeFile(dirOut + cleanName(name) + '.html', html, (err) -> + console.error err if err + tracker(); + ) + +# Data structure that holds a ToC like structure +Table = { + cats: [], + comps: [], + blocks: [], +} + + +# Adds a block to the index +processBlock = (block)-> + Table.blocks[block.name] = block; + # Having a category tag means it's a component + if block.categories.length>0 + for c in block.categories + if not Table.cats[c]? + Table.cats[c] = []; + Table.cats[c].push( block ) + if not Table.comps[block.comp] + Table.comps[block.name] = {name:block.name, parts:[]} + Table.comps[block.name].block = block + + # Having a component tag means it's part of a component page + if block.comp + if not Table.comps[block.comp] + Table.comps[block.comp] = {name:block.comp, parts:[]} + Table.comps[block.comp].parts.push(block) + +class DocBlock + constructor: () -> + @content = [] + @categories = [] + @comp = null + @see = [] + @triggers = [] + @name = "" + @code = [] + @prevTag = null + + processLine: (line) => + clean = line.trim().replace(/\/\*\*\@|\*\/|\*/, '') + clean = clean.substr(1) if clean[0] is ' ' + tagged = clean.match(/\@([^\s]*)\s?(.*)/) + + if tagged? + tag = tagged[1] + value = tagged[2]?.trim() + @processTag(tag, value) + else if /^\s*\#[^\#]/.test(clean) + @name = clean[clean.indexOf('#')+1..].trim() + else + if @isFunctionTag(@prevTag) + @code.push("") + @prevTag = null + @code.push(clean) + + processTag: (tag, value) => + if @isFunctionTag(@prevTag) and not @isFunctionTag(tag) + @code.push("") + switch tag + when "category" + cats = value.split(/\s*,\s*/) + for c in cats + @categories.push(c) + when "comp" + @comp = value; + when "see" + xrefs = value.split(/\s*,\s*/) + for see in xrefs + @see.push({ + name: see + link: if see.charAt(0) is "." then "##{cleanName(see)}" else "#{cleanName(see)}.html" + }) + when "trigger" + @event = value + split = value.split(/\s+-\s+/) + @triggers.push({ + event: split[0] + description: split[1] + objName: split[3] or "Data" + objProp: split[2] or null + }) + when "sign" + @code.push("`#{value}` \n") + when "param" + if not @isFunctionTag(@prevTag) + @code.push("
") + split = value.match(/(.+)\s+-\s+(.+)/) + if split? + @code.push("
#{split[1]}
#{split[2]}
") + when "return", "returns" + if not @isFunctionTag(@prevTag) + @code.push("
") + @code.push("
[returns]
#{value}
") + when "example" + @code.push("

Example

\n") + else + @code.push(value) + @prevTag = tag + + isFunctionTag: (tagname)-> + if tagname is "return" or tagname is "returns" or tagname is "param" + return true + else + return false + + # Method for returning the documentation for this block + getContent: ()-> + if @isFunctionTag(@prevTag) then @code.push("
") + return @code.join("\n") + triggerBlock(@triggers) + seeBlock(@see) + +# parse js file +parseJS = (path) -> + lines = fs.readFileSync(path).toString().split("\n") + open = false + + # parse file by line + for line, ln in lines + # open + if line.indexOf('/**@') != -1 && not open + block = new DocBlock() + block.file = path + block.line = ln + open = true + # process + if open + block.processLine(line) + # close + if line.indexOf('*/') != -1 && open + open = false + processBlock(block) + if block.name.length is 0 + console.log("No name for block at #{block.file}:#{block.line+1}") + if block.categories.length is 0 and block.comp is null + console.log("No component or category for block at #{block.file}:#{block.line+1} (#{block.name})") + data.push block + + +cleanName = (name) -> name.replace(".", "-") + +triggerBlock = (triggers, noheader)-> + return '' if triggers?.length is 0 + if noheader then block = "
" else block = "\n

Events

\n
" + for t in triggers + if t.objProp? + block+= "
#{t.event} [#{t.objName}: #{t.objProp}]
#{t.description}
\n" + else + block+= "
#{t.event}
#{t.description}
\n" + block+="
" + return block + +# Passed an *array* of cleaned up objects +seeBlock = (refs)-> + return '' if refs?.length is 0 + block = "\n

See Also

\n" + return block + +createPage = (page)-> + description = "##{page.name}\n" + description += "\n" + page.block?.getContent() + + if page.block.triggers?.length>0 + eventContent = "##{page.name}\n" + triggerBlock(page.block.triggers, true) + + partContent = "" + if page.parts.length + partList = "

Properties and Methods

    " + for part in page.parts + clName = cleanName(part.name) + partList += """
  • #{part.name}
    • """ + partContent += "\n\n
    \n\nBack to top

    #{part.name}

    \n" + marked(part.getContent()) + "\n\n
    \n\n" + if part.triggers.length > 0 + eventContent = "\n

    #{page.name}

    \n
    \n" if not eventContent + eventContent += "\n

    #{part.name}

    \n" + triggerBlock(part.triggers, true) + partList += "
" + else + partList = "" + pageContent = description + partList + partContent + #if page.name is "2D" + # console.log(pageContent) + return [pageContent, eventContent] + +# Save markdown file +saveMd = (data) -> + template = fs.readFileSync(templateName).toString().replace("VERSION_STRING", versionString) + #console.log(template) + nav_html = "" + + # We need to keep track of how many pending operations there are + pendingOperations = pages.length + 2 + + # Write out events and index file + html = template.replace("CONTENT_DIV", events_html).replace("NAV_DIV", nav_html) + writeOut("events", html) + #console.log(html) + html = template.replace("CONTENT_DIV", "").replace("NAV_DIV", nav_html) + writeOut("index", html) + + # Go through and actually generate and write the html pages + for page in pages + html = template.replace("CONTENT_DIV", page.content_html).replace("NAV_DIV", nav_html) + writeOut(page.name, html) + + return + + + +tracker = ()-> + pendingOperations-- + if pendingOperations<=0 + docCallback() + + + +# Iterates through `files`, creating documentation in the `output` directory. +document = (files, output, template, version, callback)-> + docCallback = callback + console.log("Parsing source files") + # The main loop through the files + templateName = template + dirOut = output + versionString = version + for file in files + parseJS file + + # Save the data to files + saveMd data + +exports.document = document diff --git a/build/build-api.php b/build/build-api.php deleted file mode 100644 index 3c930d4d..00000000 --- a/build/build-api.php +++ /dev/null @@ -1,277 +0,0 @@ -".$value."\n\n"; - break; - case SEE: - $split = preg_split("/\s*,\s*/", $value); - $block .= "###See Also\n"; - foreach($split as $see) { - if(substr($see, 0, 1) === '.') { - $link = "#".cleanFile($see); - } else if(strstr($see, '#') != false) { - $parts = explode('#', $see); - $link = cleanFile($parts[0]).".html#".cleanFile($parts[1]); - } else { - $link = cleanFile($see).".html"; - } - $block .= "- [".$see."](".$link.")\n"; - } - break; - case CATEGORY: - $split = preg_split("/\s*,\s*/", $value); - foreach($split as $v) { - $v = trim($v); - if(!isset($category[$v])) $category[$v] = array(); - $category[$v][] = $name; - $eventCategory = $name; - } - break; - case COMP: - $split = preg_split("/\s*,\s*/", $value); - foreach($split as $v) { - $v = trim($v); - if(!isset($comps[$v])) $comps[$v] = array(); - $comps[$v][] = $name; - } - break; - case TRIGGER: - if($lastTag != TRIGGER) { - $block .= "###Events\n"; - if ($eventCategory != $name) $event .= "### ".$name."\n"; - } - $split = preg_split("/\s+-\s+/", $value); - $block .= "{$split[0]}"; - $event .= "{$split[0]}"; - if(count($split) >= 3) { - $split[2] = trim($split[2]); - if(count($split) >= 4) { - $split[3] = trim($split[3]); - $block .= " [{$split[3]}: {$split[2]}]"; - $event .= " [{$split[3]}: {$split[2]}]"; - }else{ - $block .= " [Data: {$split[2]}]"; - $event .= " [Data: {$split[2]}]"; - } - } - $block .= "\n:\t{$split[1]}\n\n"; - $event .= "\n:\t{$split[1]}\n\n"; - break; - } - $lastTag = $tag; - - } else if(trim($cleanline) == "") { - $block .= "\n"; - } else { - $block .= $cleanline; - } - } - - if(strstr($line, "*/") !== false && $open) { - $open = false; - - $names[$name] = $block; - if ($event) { - if (!isset($events[$eventCategory])) { - $events[$eventCategory] = "# ".$eventCategory."\n".$event; - } - else - { - $events[$eventCategory] .= $event; - } - } - } - } - - fclose($fh); - } - $head = stripslashes(file_get_contents("header.php")); - $foot = stripslashes(file_get_contents("footer.php")); - - //generate the index - $index = "
    "; - $index .= "
  • List of Events
    • "; - $found = array(); - foreach($category as $cat=>$subs) { - $index .= "
  • ".$cat."
      "; - foreach($subs as $sub) { - $link = cleanFile($sub).".html"; - $index .= "
    • ".$sub."
      • "; - - $found[$sub] = $link; - } - $index .= "
    • "; - } - $index .= "
"; - file_put_contents($save."index.html", $head.$index.$foot); - - //generate each individual page - foreach($found as $sub=>$link) { - $content = $index."
"; - - if(isset($comps[$sub])) { - $content .= Markdown($names[$sub]); - - //loop over each part of the component - $parts = $comps[$sub]; - - //add the contents - $content .= "
    "; - foreach($parts as $part) { - $content .= "
  • {$part}
    • "; - } - $content .= "
"; - - //add the content - foreach($parts as $part) { - $content .= "
Back to top"; - $html = Markdown($names[$part]); - $html = preg_replace("!<(/)?h2>!","<$1h3>", $html); - $html = preg_replace("!<(/)?h1>!","<$1h2>", $html); - - $content .= $html; - $content .= "
"; - } - } else { - $content .= Markdown($names[$sub]); - } - $content .= "
"; - - - file_put_contents($save.$link, $head.$content.$foot); - } - - $eventsHtml = ""; - foreach($events as $part) { - if($part){ - $html = Markdown($part); - - $html = preg_replace("!<(/)?h2>!","<$1h3>", $html); - $html = preg_replace("!<(/)?h1>!","<$1h2>", $html); - - $eventsHtml .= $html; - } - } - - $content = $index."
"; - $content .= $eventsHtml; - file_put_contents($save."events.html", $head.$content.$foot); - -} - -function cleanFile($file) { - $res = preg_replace("/[\.\(\)\s]/","-",$file); - if($res[strlen($res)-1] == "-") { - $res = substr($res,0,-1); - } - return $res; -} - -function merge($files, $path = "", $save) { - $src = ""; - - foreach($files as $file) { - $src .= file_get_contents($path.$file); - $src .= "\n\r\n\r"; - } - - file_put_contents($save."crafty.js", $src); -} - - -$files = array("license.txt", - "core.js", - "intro.js", - "HashMap.js", - "2D.js", - "collision.js", - "hitbox.js", - "DOM.js", - "fps.js", - "html.js", - "storage.js", - "extensions.js", - "device.js", - "sprite.js", - "canvas.js", - "controls.js", - "animate.js", - "animation.js", - "drawing.js", - "isometric.js", - "particles.js", - "sound.js", - "text.js", - "loader.js", - "math.js", - "time.js", - "outro.js"); - -if(!is_dir('api/')) { - mkdir('api'); -} - -docs($files, "../src/", "api/"); -//merge($files, "../src/", "../"); -?> -

Merged and Built Successfully

diff --git a/build/build-api.sh b/build/build-api.sh deleted file mode 100644 index 704bd3e4..00000000 --- a/build/build-api.sh +++ /dev/null @@ -1,3 +0,0 @@ -#!/usr/bin/env bash - -php build-api.php diff --git a/build/build-crafty.php b/build/build-crafty.php deleted file mode 100644 index 0ca47052..00000000 --- a/build/build-crafty.php +++ /dev/null @@ -1,41 +0,0 @@ - -

Done: Please YUI Compress!

diff --git a/build/build-crafty.sh b/build/build-crafty.sh deleted file mode 100755 index 452f93ec..00000000 --- a/build/build-crafty.sh +++ /dev/null @@ -1,3 +0,0 @@ -#!/usr/bin/env bash - -php build-crafty.php diff --git a/build/footer.php b/build/footer.php deleted file mode 100644 index e4541a78..00000000 --- a/build/footer.php +++ /dev/null @@ -1,53 +0,0 @@ -
- - -
- - - \ No newline at end of file diff --git a/build/global.css b/build/global.css deleted file mode 100644 index 07f7d871..00000000 --- a/build/global.css +++ /dev/null @@ -1,99 +0,0 @@ -body, html { padding:0; margin:0; font-family:Helvetica, Arial } -#header { background:url('images/header-bg.png') repeat-x; border-bottom:1px solid #ccc; height:165px; text-align:center } -#header ul { padding:0; margin:10px auto 0 auto; list-style:none; text-align:center } -#header li { display:inline } -#header li a { padding:5px 10px; margin:0 9px; color:#666; text-decoration:none; text-shadow:1px 1px 1px #fff } -#header li a:hover { color:#111 } -#header li a sup { font-size:10px; margin-left:3px; padding:1px 3px; color:#c9330a; } -#header li.emph a { color:#c9330a; font-weight:bold } -#logo { margin:10px 0 } -#inner { width:820px; margin:auto } - -#main { width:820px; background:#fff url('images/inner-top.png') repeat-x top; margin:-19px auto 0 auto; min-height:300px; } -#main-left { float:left; width:9px; height:206px; background:url('images/inner-left.png') no-repeat; } -#main-right { float:right; width:9px; height:206px; background:url('images/inner-right.png') no-repeat; } -#content { padding:10px 20px } - -#contact { - font-family:Verdana; - font-size:10px; - margin:0 auto 10px auto; - text-align:center; - padding:3px 0 -} -#contact a { margin:0 10px; text-decoration:none; color:#c37b25 } -#contact img { border:0; vertical-align:text-top; margin-top:-1px } - -h2 { font-family:'Arvo', arial, serif; border-bottom:2px solid #ccc } -a { color:#0084ea; } -a:visited { color:#0084ea; } -a img { border:0 } -var { font-family:Georgia; font-style:normal; margin:5px } - -button { - border:1px solid #bac9d4; - background:#d0e8f9 url('images/button.png') repeat-x; - padding:5px 10px; - color:#373f45; - font-size:16px; - border-radius:4px; -} -button:hover { - border:1px solid #373f45; -} -button:active { - top:51px; - right:-1px -} - -#footer { - background:#707070 url('images/footer.png') repeat-x; - text-align:center; - padding:10px; - font-size:12px; - color:#ccc; - border-top:1px dotted #111; - margin-top:10px -} -#footer ul { padding:0; margin:0 auto; list-style:none } -#footer li { display:inline } -#footer a { color:#ccc; } -#footer li a { margin:0 10px } - -#grid { margin:10px -10px 0 0 } -.box { border:1px solid #ccc; float:left; width:240px; height:150px; margin:-1px 0 0 -1px; padding:10px; text-shadow:1px 1px 1px #fff } -.box h2 { padding:0; margin:0; border:0; font-size:20px; font-family:'Arvo', arial, serif; font-weight:normal } - -.browser { background:url('images/grid/browser.png') no-repeat bottom right } -.canvas { background:url('images/grid/canvas.png') no-repeat bottom center } -.sprite { background:url('images/grid/sprites.png') no-repeat bottom right } -.collide { background:url('images/grid/collide.png') no-repeat bottom left } - -.clearer { clear:both } - -.gridlist { padding:0; margin:0; list-style:none } -.gridlist li { float:left; width:90px;height: 110px; text-align:center } -.gridlist li a span { display:block; font-size:12px } -.gridlist li a img { border:1px solid #ccc } -.gridlist li a:hover img { border:1px solid #9f5600 } - -.demo { margin-bottom:30px } -.demo img { float:left; border:1px solid #aaa; margin-right:5px } -.demo p { margin-top:-5px } - -#doc-nav { float:left; margin:25px 20px 0 0; width:160px; } -#doc-level-one { margin:0; padding:0; list-style:none; font-size:12px } -#doc-level-one li { font-weight:bold; padding:2px 0 } -#doc-level-one li ul { padding-left:20px } -#doc-level-one li ul li { font-weight:normal } -#doc-content { float:left; width:600px } - -.doc-top { float:right; font-size:12px; margin-top:10px } -#doc-content dl { background:#eee; padding:5px; font-size:14px } -#doc-content dt { font-weight:bold; font-family:'Courier New', monospace } -#doc-content dd { margin:0 0 5px 25px } -.doc-block { margin-top:50px } - -div.doc-contents ul li {display: inline-block; margin: 0px 15px; min-width: 220px;} -pre code {background-color: whiteSmoke; display: block; padding: 8.5px; margin: -10px 0 18px; line-height: 18px; font-size: 12px; border: 1px solid #CCC; border: 1px solid rgba(0, 0, 0, 0.15); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; white-space: pre; white-space: pre-wrap; word-wrap: break-word;} - diff --git a/build/header.php b/build/header.php deleted file mode 100644 index 61d95c89..00000000 --- a/build/header.php +++ /dev/null @@ -1,25 +0,0 @@ - - - -Crafty - JavaScript Game Engine - - - - - - -
-
-
-
\ No newline at end of file diff --git a/build/images/api/boxmodel.png b/build/images/api/boxmodel.png deleted file mode 100755 index 2e5483de..00000000 Binary files a/build/images/api/boxmodel.png and /dev/null differ diff --git a/build/images/api/collision.png b/build/images/api/collision.png deleted file mode 100755 index b74db951..00000000 Binary files a/build/images/api/collision.png and /dev/null differ diff --git a/build/images/api/convex.png b/build/images/api/convex.png deleted file mode 100755 index 67a54d40..00000000 Binary files a/build/images/api/convex.png and /dev/null differ diff --git a/build/images/api/intersect.png b/build/images/api/intersect.png deleted file mode 100755 index a520bd60..00000000 Binary files a/build/images/api/intersect.png and /dev/null differ diff --git a/build/images/api/move.png b/build/images/api/move.png deleted file mode 100755 index 452fa4a5..00000000 Binary files a/build/images/api/move.png and /dev/null differ diff --git a/build/images/api/position.png b/build/images/api/position.png deleted file mode 100755 index 926f9ab8..00000000 Binary files a/build/images/api/position.png and /dev/null differ diff --git a/build/images/api/sprite.png b/build/images/api/sprite.png deleted file mode 100755 index da163267..00000000 Binary files a/build/images/api/sprite.png and /dev/null differ diff --git a/build/images/api/spritemap.png b/build/images/api/spritemap.png deleted file mode 100755 index ba0d93f5..00000000 Binary files a/build/images/api/spritemap.png and /dev/null differ diff --git a/build/images/api/viewport.png b/build/images/api/viewport.png deleted file mode 100755 index b3639067..00000000 Binary files a/build/images/api/viewport.png and /dev/null differ diff --git a/build/images/api/within.png b/build/images/api/within.png deleted file mode 100755 index a1fbdd59..00000000 Binary files a/build/images/api/within.png and /dev/null differ diff --git a/build/images/api/zindex.png b/build/images/api/zindex.png deleted file mode 100755 index e0d8c562..00000000 Binary files a/build/images/api/zindex.png and /dev/null differ diff --git a/build/images/button.png b/build/images/button.png deleted file mode 100755 index 10995a16..00000000 Binary files a/build/images/button.png and /dev/null differ diff --git a/build/images/comment.png b/build/images/comment.png deleted file mode 100755 index 133fbc57..00000000 Binary files a/build/images/comment.png and /dev/null differ diff --git a/build/images/email.png b/build/images/email.png deleted file mode 100755 index 7348aed7..00000000 Binary files a/build/images/email.png and /dev/null differ diff --git a/build/images/footer.png b/build/images/footer.png deleted file mode 100755 index a07425dd..00000000 Binary files a/build/images/footer.png and /dev/null differ diff --git a/build/images/github.png b/build/images/github.png deleted file mode 100755 index c3647f98..00000000 Binary files a/build/images/github.png and /dev/null differ diff --git a/build/images/google.png b/build/images/google.png deleted file mode 100755 index 86960f13..00000000 Binary files a/build/images/google.png and /dev/null differ diff --git a/build/images/grid/browser.png b/build/images/grid/browser.png deleted file mode 100755 index 7c6e460d..00000000 Binary files a/build/images/grid/browser.png and /dev/null differ diff --git a/build/images/grid/canvas.png b/build/images/grid/canvas.png deleted file mode 100755 index 7c80d171..00000000 Binary files a/build/images/grid/canvas.png and /dev/null differ diff --git a/build/images/grid/collide.png b/build/images/grid/collide.png deleted file mode 100755 index 42380973..00000000 Binary files a/build/images/grid/collide.png and /dev/null differ diff --git a/build/images/grid/sprites.png b/build/images/grid/sprites.png deleted file mode 100755 index 44bec8af..00000000 Binary files a/build/images/grid/sprites.png and /dev/null differ diff --git a/build/images/header-bg.png b/build/images/header-bg.png deleted file mode 100755 index 8a0fb748..00000000 Binary files a/build/images/header-bg.png and /dev/null differ diff --git a/build/images/hr.png b/build/images/hr.png deleted file mode 100755 index ad6807fe..00000000 Binary files a/build/images/hr.png and /dev/null differ diff --git a/build/images/inner-left.png b/build/images/inner-left.png deleted file mode 100755 index c8028f1f..00000000 Binary files a/build/images/inner-left.png and /dev/null differ diff --git a/build/images/inner-right.png b/build/images/inner-right.png deleted file mode 100755 index daaf7bc6..00000000 Binary files a/build/images/inner-right.png and /dev/null differ diff --git a/build/images/inner-top.png b/build/images/inner-top.png deleted file mode 100755 index b87b8bea..00000000 Binary files a/build/images/inner-top.png and /dev/null differ diff --git a/build/images/inner.png b/build/images/inner.png deleted file mode 100755 index 8c27d3ff..00000000 Binary files a/build/images/inner.png and /dev/null differ diff --git a/build/images/logo.png b/build/images/logo.png deleted file mode 100755 index 5aed54ee..00000000 Binary files a/build/images/logo.png and /dev/null differ diff --git a/build/images/orange-gradient.png b/build/images/orange-gradient.png deleted file mode 100755 index 3bbdb18b..00000000 Binary files a/build/images/orange-gradient.png and /dev/null differ diff --git a/build/images/tail.png b/build/images/tail.png deleted file mode 100755 index 2b1affab..00000000 Binary files a/build/images/tail.png and /dev/null differ diff --git a/build/images/tumblr.png b/build/images/tumblr.png deleted file mode 100755 index 26eeaeba..00000000 Binary files a/build/images/tumblr.png and /dev/null differ diff --git a/build/images/twitter.png b/build/images/twitter.png deleted file mode 100755 index dc551ed4..00000000 Binary files a/build/images/twitter.png and /dev/null differ diff --git a/build/markdown.php b/build/markdown.php deleted file mode 100644 index ee3dddbf..00000000 --- a/build/markdown.php +++ /dev/null @@ -1,2932 +0,0 @@ - -# -# Original Markdown -# Copyright (c) 2004-2006 John Gruber -# -# - - -define( 'MARKDOWN_VERSION', "1.0.1n" ); # Sat 10 Oct 2009 -define( 'MARKDOWNEXTRA_VERSION', "1.2.4" ); # Sat 10 Oct 2009 - - -# -# Global default settings: -# - -# Change to ">" for HTML output -@define( 'MARKDOWN_EMPTY_ELEMENT_SUFFIX', " />"); - -# Define the width of a tab for code blocks. -@define( 'MARKDOWN_TAB_WIDTH', 4 ); - -# Optional title attribute for footnote links and backlinks. -@define( 'MARKDOWN_FN_LINK_TITLE', "" ); -@define( 'MARKDOWN_FN_BACKLINK_TITLE', "" ); - -# Optional class attribute for footnote links and backlinks. -@define( 'MARKDOWN_FN_LINK_CLASS', "" ); -@define( 'MARKDOWN_FN_BACKLINK_CLASS', "" ); - - -# -# WordPress settings: -# - -# Change to false to remove Markdown from posts and/or comments. -@define( 'MARKDOWN_WP_POSTS', true ); -@define( 'MARKDOWN_WP_COMMENTS', true ); - - - -### Standard Function Interface ### - -@define( 'MARKDOWN_PARSER_CLASS', 'MarkdownExtra_Parser' ); - -function Markdown($text) { -# -# Initialize the parser and return the result of its transform method. -# - # Setup static parser variable. - static $parser; - if (!isset($parser)) { - $parser_class = MARKDOWN_PARSER_CLASS; - $parser = new $parser_class; - } - - # Transform text using parser. - return $parser->transform($text); -} - - -### WordPress Plugin Interface ### - -/* -Plugin Name: Markdown Extra -Plugin URI: http://michelf.com/projects/php-markdown/ -Description: Markdown syntax allows you to write using an easy-to-read, easy-to-write plain text format. Based on the original Perl version by John Gruber. More... -Version: 1.2.4 -Author: Michel Fortin -Author URI: http://michelf.com/ -*/ - -if (isset($wp_version)) { - # More details about how it works here: - # - - # Post content and excerpts - # - Remove WordPress paragraph generator. - # - Run Markdown on excerpt, then remove all tags. - # - Add paragraph tag around the excerpt, but remove it for the excerpt rss. - if (MARKDOWN_WP_POSTS) { - remove_filter('the_content', 'wpautop'); - remove_filter('the_content_rss', 'wpautop'); - remove_filter('the_excerpt', 'wpautop'); - add_filter('the_content', 'mdwp_MarkdownPost', 6); - add_filter('the_content_rss', 'mdwp_MarkdownPost', 6); - add_filter('get_the_excerpt', 'mdwp_MarkdownPost', 6); - add_filter('get_the_excerpt', 'trim', 7); - add_filter('the_excerpt', 'mdwp_add_p'); - add_filter('the_excerpt_rss', 'mdwp_strip_p'); - - remove_filter('content_save_pre', 'balanceTags', 50); - remove_filter('excerpt_save_pre', 'balanceTags', 50); - add_filter('the_content', 'balanceTags', 50); - add_filter('get_the_excerpt', 'balanceTags', 9); - } - - # Add a footnote id prefix to posts when inside a loop. - function mdwp_MarkdownPost($text) { - static $parser; - if (!$parser) { - $parser_class = MARKDOWN_PARSER_CLASS; - $parser = new $parser_class; - } - if (is_single() || is_page() || is_feed()) { - $parser->fn_id_prefix = ""; - } else { - $parser->fn_id_prefix = get_the_ID() . "."; - } - return $parser->transform($text); - } - - # Comments - # - Remove WordPress paragraph generator. - # - Remove WordPress auto-link generator. - # - Scramble important tags before passing them to the kses filter. - # - Run Markdown on excerpt then remove paragraph tags. - if (MARKDOWN_WP_COMMENTS) { - remove_filter('comment_text', 'wpautop', 30); - remove_filter('comment_text', 'make_clickable'); - add_filter('pre_comment_content', 'Markdown', 6); - add_filter('pre_comment_content', 'mdwp_hide_tags', 8); - add_filter('pre_comment_content', 'mdwp_show_tags', 12); - add_filter('get_comment_text', 'Markdown', 6); - add_filter('get_comment_excerpt', 'Markdown', 6); - add_filter('get_comment_excerpt', 'mdwp_strip_p', 7); - - global $mdwp_hidden_tags, $mdwp_placeholders; - $mdwp_hidden_tags = explode(' ', - '
    • '); - $mdwp_placeholders = explode(' ', str_rot13( - 'pEj07ZbbBZ U1kqgh4w4p pre2zmeN6K QTi31t9pre ol0MP1jzJR '. - 'ML5IjmbRol ulANi1NsGY J7zRLJqPul liA8ctl16T K9nhooUHli')); - } - - function mdwp_add_p($text) { - if (!preg_match('{^$|^<(p|ul|ol|dl|pre|blockquote)>}i', $text)) { - $text = '

    '.$text.'

    '; - $text = preg_replace('{\n{2,}}', "

    \n\n

    ", $text); - } - return $text; - } - - function mdwp_strip_p($t) { return preg_replace('{}i', '', $t); } - - function mdwp_hide_tags($text) { - global $mdwp_hidden_tags, $mdwp_placeholders; - return str_replace($mdwp_hidden_tags, $mdwp_placeholders, $text); - } - function mdwp_show_tags($text) { - global $mdwp_hidden_tags, $mdwp_placeholders; - return str_replace($mdwp_placeholders, $mdwp_hidden_tags, $text); - } -} - - -### bBlog Plugin Info ### - -function identify_modifier_markdown() { - return array( - 'name' => 'markdown', - 'type' => 'modifier', - 'nicename' => 'PHP Markdown Extra', - 'description' => 'A text-to-HTML conversion tool for web writers', - 'authors' => 'Michel Fortin and John Gruber', - 'licence' => 'GPL', - 'version' => MARKDOWNEXTRA_VERSION, - 'help' => 'Markdown syntax allows you to write using an easy-to-read, easy-to-write plain text format. Based on the original Perl version by John Gruber. More...', - ); -} - - -### Smarty Modifier Interface ### - -function smarty_modifier_markdown($text) { - return Markdown($text); -} - - -### Textile Compatibility Mode ### - -# Rename this file to "classTextile.php" and it can replace Textile everywhere. - -if (strcasecmp(substr(__FILE__, -16), "classTextile.php") == 0) { - # Try to include PHP SmartyPants. Should be in the same directory. - @include_once 'smartypants.php'; - # Fake Textile class. It calls Markdown instead. - class Textile { - function TextileThis($text, $lite='', $encode='') { - if ($lite == '' && $encode == '') $text = Markdown($text); - if (function_exists('SmartyPants')) $text = SmartyPants($text); - return $text; - } - # Fake restricted version: restrictions are not supported for now. - function TextileRestricted($text, $lite='', $noimage='') { - return $this->TextileThis($text, $lite); - } - # Workaround to ensure compatibility with TextPattern 4.0.3. - function blockLite($text) { return $text; } - } -} - - - -# -# Markdown Parser Class -# - -class Markdown_Parser { - - # Regex to match balanced [brackets]. - # Needed to insert a maximum bracked depth while converting to PHP. - var $nested_brackets_depth = 6; - var $nested_brackets_re; - - var $nested_url_parenthesis_depth = 4; - var $nested_url_parenthesis_re; - - # Table of hash values for escaped characters: - var $escape_chars = '\`*_{}[]()>#+-.!'; - var $escape_chars_re; - - # Change to ">" for HTML output. - var $empty_element_suffix = MARKDOWN_EMPTY_ELEMENT_SUFFIX; - var $tab_width = MARKDOWN_TAB_WIDTH; - - # Change to `true` to disallow markup or entities. - var $no_markup = false; - var $no_entities = false; - - # Predefined urls and titles for reference links and images. - var $predef_urls = array(); - var $predef_titles = array(); - - - function Markdown_Parser() { - # - # Constructor function. Initialize appropriate member variables. - # - $this->_initDetab(); - $this->prepareItalicsAndBold(); - - $this->nested_brackets_re = - str_repeat('(?>[^\[\]]+|\[', $this->nested_brackets_depth). - str_repeat('\])*', $this->nested_brackets_depth); - - $this->nested_url_parenthesis_re = - str_repeat('(?>[^()\s]+|\(', $this->nested_url_parenthesis_depth). - str_repeat('(?>\)))*', $this->nested_url_parenthesis_depth); - - $this->escape_chars_re = '['.preg_quote($this->escape_chars).']'; - - # Sort document, block, and span gamut in ascendent priority order. - asort($this->document_gamut); - asort($this->block_gamut); - asort($this->span_gamut); - } - - - # Internal hashes used during transformation. - var $urls = array(); - var $titles = array(); - var $html_hashes = array(); - - # Status flag to avoid invalid nesting. - var $in_anchor = false; - - - function setup() { - # - # Called before the transformation process starts to setup parser - # states. - # - # Clear global hashes. - $this->urls = $this->predef_urls; - $this->titles = $this->predef_titles; - $this->html_hashes = array(); - - $in_anchor = false; - } - - function teardown() { - # - # Called after the transformation process to clear any variable - # which may be taking up memory unnecessarly. - # - $this->urls = array(); - $this->titles = array(); - $this->html_hashes = array(); - } - - - function transform($text) { - # - # Main function. Performs some preprocessing on the input text - # and pass it through the document gamut. - # - $this->setup(); - - # Remove UTF-8 BOM and marker character in input, if present. - $text = preg_replace('{^\xEF\xBB\xBF|\x1A}', '', $text); - - # Standardize line endings: - # DOS to Unix and Mac to Unix - $text = preg_replace('{\r\n?}', "\n", $text); - - # Make sure $text ends with a couple of newlines: - $text .= "\n\n"; - - # Convert all tabs to spaces. - $text = $this->detab($text); - - # Turn block-level HTML blocks into hash entries - $text = $this->hashHTMLBlocks($text); - - # Strip any lines consisting only of spaces and tabs. - # This makes subsequent regexen easier to write, because we can - # match consecutive blank lines with /\n+/ instead of something - # contorted like /[ ]*\n+/ . - $text = preg_replace('/^[ ]+$/m', '', $text); - - # Run document gamut methods. - foreach ($this->document_gamut as $method => $priority) { - $text = $this->$method($text); - } - - $this->teardown(); - - return $text . "\n"; - } - - var $document_gamut = array( - # Strip link definitions, store in hashes. - "stripLinkDefinitions" => 20, - - "runBasicBlockGamut" => 30, - ); - - - function stripLinkDefinitions($text) { - # - # Strips link definitions from text, stores the URLs and titles in - # hash references. - # - $less_than_tab = $this->tab_width - 1; - - # Link defs are in the form: ^[id]: url "optional title" - $text = preg_replace_callback('{ - ^[ ]{0,'.$less_than_tab.'}\[(.+)\][ ]?: # id = $1 - [ ]* - \n? # maybe *one* newline - [ ]* - (?: - <(.+?)> # url = $2 - | - (\S+?) # url = $3 - ) - [ ]* - \n? # maybe one newline - [ ]* - (?: - (?<=\s) # lookbehind for whitespace - ["(] - (.*?) # title = $4 - [")] - [ ]* - )? # title is optional - (?:\n+|\Z) - }xm', - array(&$this, '_stripLinkDefinitions_callback'), - $text); - return $text; - } - function _stripLinkDefinitions_callback($matches) { - $link_id = strtolower($matches[1]); - $url = $matches[2] == '' ? $matches[3] : $matches[2]; - $this->urls[$link_id] = $url; - $this->titles[$link_id] =& $matches[4]; - return ''; # String that will replace the block - } - - - function hashHTMLBlocks($text) { - if ($this->no_markup) return $text; - - $less_than_tab = $this->tab_width - 1; - - # Hashify HTML blocks: - # We only want to do this for block-level HTML tags, such as headers, - # lists, and tables. That's because we still want to wrap

    s around - # "paragraphs" that are wrapped in non-block-level tags, such as anchors, - # phrase emphasis, and spans. The list of tags we're looking for is - # hard-coded: - # - # * List "a" is made of tags which can be both inline or block-level. - # These will be treated block-level when the start tag is alone on - # its line, otherwise they're not matched here and will be taken as - # inline later. - # * List "b" is made of tags which are always block-level; - # - $block_tags_a_re = 'ins|del'; - $block_tags_b_re = 'p|div|h[1-6]|blockquote|pre|table|dl|ol|ul|address|'. - 'script|noscript|form|fieldset|iframe|math'; - - # Regular expression for the content of a block tag. - $nested_tags_level = 4; - $attr = ' - (?> # optional tag attributes - \s # starts with whitespace - (?> - [^>"/]+ # text outside quotes - | - /+(?!>) # slash not followed by ">" - | - "[^"]*" # text inside double quotes (tolerate ">") - | - \'[^\']*\' # text inside single quotes (tolerate ">") - )* - )? - '; - $content = - str_repeat(' - (?> - [^<]+ # content without tag - | - <\2 # nested opening tag - '.$attr.' # attributes - (?> - /> - | - >', $nested_tags_level). # end of opening tag - '.*?'. # last level nested tag content - str_repeat(' - # closing nested tag - ) - | - <(?!/\2\s*> # other tags with a different name - ) - )*', - $nested_tags_level); - $content2 = str_replace('\2', '\3', $content); - - # First, look for nested blocks, e.g.: - #

    - #
    - # tags for inner block must be indented. - #
    - #
    - # - # The outermost tags must start at the left margin for this to match, and - # the inner nested divs must be indented. - # We need to do this before the next, more liberal match, because the next - # match will start at the first `
    ` and stop at the first `
    `. - $text = preg_replace_callback('{(?> - (?> - (?<=\n\n) # Starting after a blank line - | # or - \A\n? # the beginning of the doc - ) - ( # save in $1 - - # Match from `\n` to `\n`, handling nested tags - # in between. - - [ ]{0,'.$less_than_tab.'} - <('.$block_tags_b_re.')# start tag = $2 - '.$attr.'> # attributes followed by > and \n - '.$content.' # content, support nesting - # the matching end tag - [ ]* # trailing spaces/tabs - (?=\n+|\Z) # followed by a newline or end of document - - | # Special version for tags of group a. - - [ ]{0,'.$less_than_tab.'} - <('.$block_tags_a_re.')# start tag = $3 - '.$attr.'>[ ]*\n # attributes followed by > - '.$content2.' # content, support nesting - # the matching end tag - [ ]* # trailing spaces/tabs - (?=\n+|\Z) # followed by a newline or end of document - - | # Special case just for
    . It was easier to make a special - # case than to make the other regex more complicated. - - [ ]{0,'.$less_than_tab.'} - <(hr) # start tag = $2 - '.$attr.' # attributes - /?> # the matching end tag - [ ]* - (?=\n{2,}|\Z) # followed by a blank line or end of document - - | # Special case for standalone HTML comments: - - [ ]{0,'.$less_than_tab.'} - (?s: - - ) - [ ]* - (?=\n{2,}|\Z) # followed by a blank line or end of document - - | # PHP and ASP-style processor instructions ( - ) - [ ]* - (?=\n{2,}|\Z) # followed by a blank line or end of document - - ) - )}Sxmi', - array(&$this, '_hashHTMLBlocks_callback'), - $text); - - return $text; - } - function _hashHTMLBlocks_callback($matches) { - $text = $matches[1]; - $key = $this->hashBlock($text); - return "\n\n$key\n\n"; - } - - - function hashPart($text, $boundary = 'X') { - # - # Called whenever a tag must be hashed when a function insert an atomic - # element in the text stream. Passing $text to through this function gives - # a unique text-token which will be reverted back when calling unhash. - # - # The $boundary argument specify what character should be used to surround - # the token. By convension, "B" is used for block elements that needs not - # to be wrapped into paragraph tags at the end, ":" is used for elements - # that are word separators and "X" is used in the general case. - # - # Swap back any tag hash found in $text so we do not have to `unhash` - # multiple times at the end. - $text = $this->unhash($text); - - # Then hash the block. - static $i = 0; - $key = "$boundary\x1A" . ++$i . $boundary; - $this->html_hashes[$key] = $text; - return $key; # String that will replace the tag. - } - - - function hashBlock($text) { - # - # Shortcut function for hashPart with block-level boundaries. - # - return $this->hashPart($text, 'B'); - } - - - var $block_gamut = array( - # - # These are all the transformations that form block-level - # tags like paragraphs, headers, and list items. - # - "doHeaders" => 10, - "doHorizontalRules" => 20, - - "doLists" => 40, - "doCodeBlocks" => 50, - "doBlockQuotes" => 60, - ); - - function runBlockGamut($text) { - # - # Run block gamut tranformations. - # - # We need to escape raw HTML in Markdown source before doing anything - # else. This need to be done for each block, and not only at the - # begining in the Markdown function since hashed blocks can be part of - # list items and could have been indented. Indented blocks would have - # been seen as a code block in a previous pass of hashHTMLBlocks. - $text = $this->hashHTMLBlocks($text); - - return $this->runBasicBlockGamut($text); - } - - function runBasicBlockGamut($text) { - # - # Run block gamut tranformations, without hashing HTML blocks. This is - # useful when HTML blocks are known to be already hashed, like in the first - # whole-document pass. - # - foreach ($this->block_gamut as $method => $priority) { - $text = $this->$method($text); - } - - # Finally form paragraph and restore hashed blocks. - $text = $this->formParagraphs($text); - - return $text; - } - - - function doHorizontalRules($text) { - # Do Horizontal Rules: - return preg_replace( - '{ - ^[ ]{0,3} # Leading space - ([-*_]) # $1: First marker - (?> # Repeated marker group - [ ]{0,2} # Zero, one, or two spaces. - \1 # Marker character - ){2,} # Group repeated at least twice - [ ]* # Tailing spaces - $ # End of line. - }mx', - "\n".$this->hashBlock("empty_element_suffix")."\n", - $text); - } - - - var $span_gamut = array( - # - # These are all the transformations that occur *within* block-level - # tags like paragraphs, headers, and list items. - # - # Process character escapes, code spans, and inline HTML - # in one shot. - "parseSpan" => -30, - - # Process anchor and image tags. Images must come first, - # because ![foo][f] looks like an anchor. - "doImages" => 10, - "doAnchors" => 20, - - # Make links out of things like `` - # Must come after doAnchors, because you can use < and > - # delimiters in inline links like [this](). - "doAutoLinks" => 30, - "encodeAmpsAndAngles" => 40, - - "doItalicsAndBold" => 50, - "doHardBreaks" => 60, - ); - - function runSpanGamut($text) { - # - # Run span gamut tranformations. - # - foreach ($this->span_gamut as $method => $priority) { - $text = $this->$method($text); - } - - return $text; - } - - - function doHardBreaks($text) { - # Do hard breaks: - return preg_replace_callback('/ {2,}\n/', - array(&$this, '_doHardBreaks_callback'), $text); - } - function _doHardBreaks_callback($matches) { - return $this->hashPart("empty_element_suffix\n"); - } - - - function doAnchors($text) { - # - # Turn Markdown link shortcuts into XHTML tags. - # - if ($this->in_anchor) return $text; - $this->in_anchor = true; - - # - # First, handle reference-style links: [link text] [id] - # - $text = preg_replace_callback('{ - ( # wrap whole match in $1 - \[ - ('.$this->nested_brackets_re.') # link text = $2 - \] - - [ ]? # one optional space - (?:\n[ ]*)? # one optional newline followed by spaces - - \[ - (.*?) # id = $3 - \] - ) - }xs', - array(&$this, '_doAnchors_reference_callback'), $text); - - # - # Next, inline-style links: [link text](url "optional title") - # - $text = preg_replace_callback('{ - ( # wrap whole match in $1 - \[ - ('.$this->nested_brackets_re.') # link text = $2 - \] - \( # literal paren - [ \n]* - (?: - <(.+?)> # href = $3 - | - ('.$this->nested_url_parenthesis_re.') # href = $4 - ) - [ \n]* - ( # $5 - ([\'"]) # quote char = $6 - (.*?) # Title = $7 - \6 # matching quote - [ \n]* # ignore any spaces/tabs between closing quote and ) - )? # title is optional - \) - ) - }xs', - array(&$this, '_doAnchors_inline_callback'), $text); - - # - # Last, handle reference-style shortcuts: [link text] - # These must come last in case you've also got [link text][1] - # or [link text](/foo) - # - $text = preg_replace_callback('{ - ( # wrap whole match in $1 - \[ - ([^\[\]]+) # link text = $2; can\'t contain [ or ] - \] - ) - }xs', - array(&$this, '_doAnchors_reference_callback'), $text); - - $this->in_anchor = false; - return $text; - } - function _doAnchors_reference_callback($matches) { - $whole_match = $matches[1]; - $link_text = $matches[2]; - $link_id =& $matches[3]; - - if ($link_id == "") { - # for shortcut links like [this][] or [this]. - $link_id = $link_text; - } - - # lower-case and turn embedded newlines into spaces - $link_id = strtolower($link_id); - $link_id = preg_replace('{[ ]?\n}', ' ', $link_id); - - if (isset($this->urls[$link_id])) { - $url = $this->urls[$link_id]; - $url = $this->encodeAttribute($url); - - $result = "titles[$link_id] ) ) { - $title = $this->titles[$link_id]; - $title = $this->encodeAttribute($title); - $result .= " title=\"$title\""; - } - - $link_text = $this->runSpanGamut($link_text); - $result .= ">$link_text"; - $result = $this->hashPart($result); - } - else { - $result = $whole_match; - } - return $result; - } - function _doAnchors_inline_callback($matches) { - $whole_match = $matches[1]; - $link_text = $this->runSpanGamut($matches[2]); - $url = $matches[3] == '' ? $matches[4] : $matches[3]; - $title =& $matches[7]; - - $url = $this->encodeAttribute($url); - - $result = "encodeAttribute($title); - $result .= " title=\"$title\""; - } - - $link_text = $this->runSpanGamut($link_text); - $result .= ">$link_text"; - - return $this->hashPart($result); - } - - - function doImages($text) { - # - # Turn Markdown image shortcuts into tags. - # - # - # First, handle reference-style labeled images: ![alt text][id] - # - $text = preg_replace_callback('{ - ( # wrap whole match in $1 - !\[ - ('.$this->nested_brackets_re.') # alt text = $2 - \] - - [ ]? # one optional space - (?:\n[ ]*)? # one optional newline followed by spaces - - \[ - (.*?) # id = $3 - \] - - ) - }xs', - array(&$this, '_doImages_reference_callback'), $text); - - # - # Next, handle inline images: ![alt text](url "optional title") - # Don't forget: encode * and _ - # - $text = preg_replace_callback('{ - ( # wrap whole match in $1 - !\[ - ('.$this->nested_brackets_re.') # alt text = $2 - \] - \s? # One optional whitespace character - \( # literal paren - [ \n]* - (?: - <(\S*)> # src url = $3 - | - ('.$this->nested_url_parenthesis_re.') # src url = $4 - ) - [ \n]* - ( # $5 - ([\'"]) # quote char = $6 - (.*?) # title = $7 - \6 # matching quote - [ \n]* - )? # title is optional - \) - ) - }xs', - array(&$this, '_doImages_inline_callback'), $text); - - return $text; - } - function _doImages_reference_callback($matches) { - $whole_match = $matches[1]; - $alt_text = $matches[2]; - $link_id = strtolower($matches[3]); - - if ($link_id == "") { - $link_id = strtolower($alt_text); # for shortcut links like ![this][]. - } - - $alt_text = $this->encodeAttribute($alt_text); - if (isset($this->urls[$link_id])) { - $url = $this->encodeAttribute($this->urls[$link_id]); - $result = "\"$alt_text\"";titles[$link_id])) { - $title = $this->titles[$link_id]; - $title = $this->encodeAttribute($title); - $result .= " title=\"$title\""; - } - $result .= $this->empty_element_suffix; - $result = $this->hashPart($result); - } - else { - # If there's no such link ID, leave intact: - $result = $whole_match; - } - - return $result; - } - function _doImages_inline_callback($matches) { - $whole_match = $matches[1]; - $alt_text = $matches[2]; - $url = $matches[3] == '' ? $matches[4] : $matches[3]; - $title =& $matches[7]; - - $alt_text = $this->encodeAttribute($alt_text); - $url = $this->encodeAttribute($url); - $result = "\"$alt_text\"";encodeAttribute($title); - $result .= " title=\"$title\""; # $title already quoted - } - $result .= $this->empty_element_suffix; - - return $this->hashPart($result); - } - - - function doHeaders($text) { - # Setext-style headers: - # Header 1 - # ======== - # - # Header 2 - # -------- - # - $text = preg_replace_callback('{ ^(.+?)[ ]*\n(=+|-+)[ ]*\n+ }mx', - array(&$this, '_doHeaders_callback_setext'), $text); - - # atx-style headers: - # # Header 1 - # ## Header 2 - # ## Header 2 with closing hashes ## - # ... - # ###### Header 6 - # - $text = preg_replace_callback('{ - ^(\#{1,6}) # $1 = string of #\'s - [ ]* - (.+?) # $2 = Header text - [ ]* - \#* # optional closing #\'s (not counted) - \n+ - }xm', - array(&$this, '_doHeaders_callback_atx'), $text); - - return $text; - } - function _doHeaders_callback_setext($matches) { - # Terrible hack to check we haven't found an empty list item. - if ($matches[2] == '-' && preg_match('{^-(?: |$)}', $matches[1])) - return $matches[0]; - - $level = $matches[2]{0} == '=' ? 1 : 2; - $block = "".$this->runSpanGamut($matches[1]).""; - return "\n" . $this->hashBlock($block) . "\n\n"; - } - function _doHeaders_callback_atx($matches) { - $level = strlen($matches[1]); - $block = "".$this->runSpanGamut($matches[2]).""; - return "\n" . $this->hashBlock($block) . "\n\n"; - } - - - function doLists($text) { - # - # Form HTML ordered (numbered) and unordered (bulleted) lists. - # - $less_than_tab = $this->tab_width - 1; - - # Re-usable patterns to match list item bullets and number markers: - $marker_ul_re = '[*+-]'; - $marker_ol_re = '\d+[.]'; - $marker_any_re = "(?:$marker_ul_re|$marker_ol_re)"; - - $markers_relist = array( - $marker_ul_re => $marker_ol_re, - $marker_ol_re => $marker_ul_re, - ); - - foreach ($markers_relist as $marker_re => $other_marker_re) { - # Re-usable pattern to match any entirel ul or ol list: - $whole_list_re = ' - ( # $1 = whole list - ( # $2 - ([ ]{0,'.$less_than_tab.'}) # $3 = number of spaces - ('.$marker_re.') # $4 = first list item marker - [ ]+ - ) - (?s:.+?) - ( # $5 - \z - | - \n{2,} - (?=\S) - (?! # Negative lookahead for another list item marker - [ ]* - '.$marker_re.'[ ]+ - ) - | - (?= # Lookahead for another kind of list - \n - \3 # Must have the same indentation - '.$other_marker_re.'[ ]+ - ) - ) - ) - '; // mx - - # We use a different prefix before nested lists than top-level lists. - # See extended comment in _ProcessListItems(). - - if ($this->list_level) { - $text = preg_replace_callback('{ - ^ - '.$whole_list_re.' - }mx', - array(&$this, '_doLists_callback'), $text); - } - else { - $text = preg_replace_callback('{ - (?:(?<=\n)\n|\A\n?) # Must eat the newline - '.$whole_list_re.' - }mx', - array(&$this, '_doLists_callback'), $text); - } - } - - return $text; - } - function _doLists_callback($matches) { - # Re-usable patterns to match list item bullets and number markers: - $marker_ul_re = '[*+-]'; - $marker_ol_re = '\d+[.]'; - $marker_any_re = "(?:$marker_ul_re|$marker_ol_re)"; - - $list = $matches[1]; - $list_type = preg_match("/$marker_ul_re/", $matches[4]) ? "ul" : "ol"; - - $marker_any_re = ( $list_type == "ul" ? $marker_ul_re : $marker_ol_re ); - - $list .= "\n"; - $result = $this->processListItems($list, $marker_any_re); - - $result = $this->hashBlock("<$list_type>\n" . $result . ""); - return "\n". $result ."\n\n"; - } - - var $list_level = 0; - - function processListItems($list_str, $marker_any_re) { - # - # Process the contents of a single ordered or unordered list, splitting it - # into individual list items. - # - # The $this->list_level global keeps track of when we're inside a list. - # Each time we enter a list, we increment it; when we leave a list, - # we decrement. If it's zero, we're not in a list anymore. - # - # We do this because when we're not inside a list, we want to treat - # something like this: - # - # I recommend upgrading to version - # 8. Oops, now this line is treated - # as a sub-list. - # - # As a single paragraph, despite the fact that the second line starts - # with a digit-period-space sequence. - # - # Whereas when we're inside a list (or sub-list), that line will be - # treated as the start of a sub-list. What a kludge, huh? This is - # an aspect of Markdown's syntax that's hard to parse perfectly - # without resorting to mind-reading. Perhaps the solution is to - # change the syntax rules such that sub-lists must start with a - # starting cardinal number; e.g. "1." or "a.". - - $this->list_level++; - - # trim trailing blank lines: - $list_str = preg_replace("/\n{2,}\\z/", "\n", $list_str); - - $list_str = preg_replace_callback('{ - (\n)? # leading line = $1 - (^[ ]*) # leading whitespace = $2 - ('.$marker_any_re.' # list marker and space = $3 - (?:[ ]+|(?=\n)) # space only required if item is not empty - ) - ((?s:.*?)) # list item text = $4 - (?:(\n+(?=\n))|\n) # tailing blank line = $5 - (?= \n* (\z | \2 ('.$marker_any_re.') (?:[ ]+|(?=\n)))) - }xm', - array(&$this, '_processListItems_callback'), $list_str); - - $this->list_level--; - return $list_str; - } - function _processListItems_callback($matches) { - $item = $matches[4]; - $leading_line =& $matches[1]; - $leading_space =& $matches[2]; - $marker_space = $matches[3]; - $tailing_blank_line =& $matches[5]; - - if ($leading_line || $tailing_blank_line || - preg_match('/\n{2,}/', $item)) - { - # Replace marker with the appropriate whitespace indentation - $item = $leading_space . str_repeat(' ', strlen($marker_space)) . $item; - $item = $this->runBlockGamut($this->outdent($item)."\n"); - } - else { - # Recursion for sub-lists: - $item = $this->doLists($this->outdent($item)); - $item = preg_replace('/\n+$/', '', $item); - $item = $this->runSpanGamut($item); - } - - return "
  • " . $item . "
    • \n"; - } - - - function doCodeBlocks($text) { - # - # Process Markdown `
    ` blocks.
-	#
-		$text = preg_replace_callback('{
-				(?:\n\n|\A\n?)
-				(	            # $1 = the code block -- one or more lines, starting with a space/tab
-				  (?>
-					[ ]{'.$this->tab_width.'}  # Lines must start with a tab or a tab-width of spaces
-					.*\n+
-				  )+
-				)
-				((?=^[ ]{0,'.$this->tab_width.'}\S)|\Z)	# Lookahead for non-space at line-start, or end of doc
-			}xm',
-			array(&$this, '_doCodeBlocks_callback'), $text);
-
-		return $text;
-	}
-	function _doCodeBlocks_callback($matches) {
-		$codeblock = $matches[1];
-
-		$codeblock = $this->outdent($codeblock);
-		$codeblock = htmlspecialchars($codeblock, ENT_NOQUOTES);
-
-		# trim leading newlines and trailing newlines
-		$codeblock = preg_replace('/\A\n+|\n+\z/', '', $codeblock);
-
-		$codeblock = "
    $codeblock\n
    ";
-		return "\n\n".$this->hashBlock($codeblock)."\n\n";
-	}
-
-
-	function makeCodeSpan($code) {
-	#
-	# Create a code span markup for $code. Called from handleSpanToken.
-	#
-		$code = htmlspecialchars(trim($code), ENT_NOQUOTES);
-		return $this->hashPart("$code");
-	}
-
-
-	var $em_relist = array(
-		''  => '(?:(? '(?<=\S|^)(? '(?<=\S|^)(? '(?:(? '(?<=\S|^)(? '(?<=\S|^)(? '(?:(? '(?<=\S|^)(? '(?<=\S|^)(?em_relist as $em => $em_re) {
-			foreach ($this->strong_relist as $strong => $strong_re) {
-				# Construct list of allowed token expressions.
-				$token_relist = array();
-				if (isset($this->em_strong_relist["$em$strong"])) {
-					$token_relist[] = $this->em_strong_relist["$em$strong"];
-				}
-				$token_relist[] = $em_re;
-				$token_relist[] = $strong_re;
-				
-				# Construct master expression from list.
-				$token_re = '{('. implode('|', $token_relist) .')}';
-				$this->em_strong_prepared_relist["$em$strong"] = $token_re;
-			}
-		}
-	}
-	
-	function doItalicsAndBold($text) {
-		$token_stack = array('');
-		$text_stack = array('');
-		$em = '';
-		$strong = '';
-		$tree_char_em = false;
-		
-		while (1) {
-			#
-			# Get prepared regular expression for seraching emphasis tokens
-			# in current context.
-			#
-			$token_re = $this->em_strong_prepared_relist["$em$strong"];
-			
-			#
-			# Each loop iteration search for the next emphasis token. 
-			# Each token is then passed to handleSpanToken.
-			#
-			$parts = preg_split($token_re, $text, 2, PREG_SPLIT_DELIM_CAPTURE);
-			$text_stack[0] .= $parts[0];
-			$token =& $parts[1];
-			$text =& $parts[2];
-			
-			if (empty($token)) {
-				# Reached end of text span: empty stack without emitting.
-				# any more emphasis.
-				while ($token_stack[0]) {
-					$text_stack[1] .= array_shift($token_stack);
-					$text_stack[0] .= array_shift($text_stack);
-				}
-				break;
-			}
-			
-			$token_len = strlen($token);
-			if ($tree_char_em) {
-				# Reached closing marker while inside a three-char emphasis.
-				if ($token_len == 3) {
-					# Three-char closing marker, close em and strong.
-					array_shift($token_stack);
-					$span = array_shift($text_stack);
-					$span = $this->runSpanGamut($span);
-					$span = "$span";
-					$text_stack[0] .= $this->hashPart($span);
-					$em = '';
-					$strong = '';
-				} else {
-					# Other closing marker: close one em or strong and
-					# change current token state to match the other
-					$token_stack[0] = str_repeat($token{0}, 3-$token_len);
-					$tag = $token_len == 2 ? "strong" : "em";
-					$span = $text_stack[0];
-					$span = $this->runSpanGamut($span);
-					$span = "<$tag>$span";
-					$text_stack[0] = $this->hashPart($span);
-					$$tag = ''; # $$tag stands for $em or $strong
-				}
-				$tree_char_em = false;
-			} else if ($token_len == 3) {
-				if ($em) {
-					# Reached closing marker for both em and strong.
-					# Closing strong marker:
-					for ($i = 0; $i < 2; ++$i) {
-						$shifted_token = array_shift($token_stack);
-						$tag = strlen($shifted_token) == 2 ? "strong" : "em";
-						$span = array_shift($text_stack);
-						$span = $this->runSpanGamut($span);
-						$span = "<$tag>$span";
-						$text_stack[0] .= $this->hashPart($span);
-						$$tag = ''; # $$tag stands for $em or $strong
-					}
-				} else {
-					# Reached opening three-char emphasis marker. Push on token 
-					# stack; will be handled by the special condition above.
-					$em = $token{0};
-					$strong = "$em$em";
-					array_unshift($token_stack, $token);
-					array_unshift($text_stack, '');
-					$tree_char_em = true;
-				}
-			} else if ($token_len == 2) {
-				if ($strong) {
-					# Unwind any dangling emphasis marker:
-					if (strlen($token_stack[0]) == 1) {
-						$text_stack[1] .= array_shift($token_stack);
-						$text_stack[0] .= array_shift($text_stack);
-					}
-					# Closing strong marker:
-					array_shift($token_stack);
-					$span = array_shift($text_stack);
-					$span = $this->runSpanGamut($span);
-					$span = "$span";
-					$text_stack[0] .= $this->hashPart($span);
-					$strong = '';
-				} else {
-					array_unshift($token_stack, $token);
-					array_unshift($text_stack, '');
-					$strong = $token;
-				}
-			} else {
-				# Here $token_len == 1
-				if ($em) {
-					if (strlen($token_stack[0]) == 1) {
-						# Closing emphasis marker:
-						array_shift($token_stack);
-						$span = array_shift($text_stack);
-						$span = $this->runSpanGamut($span);
-						$span = "$span";
-						$text_stack[0] .= $this->hashPart($span);
-						$em = '';
-					} else {
-						$text_stack[0] .= $token;
-					}
-				} else {
-					array_unshift($token_stack, $token);
-					array_unshift($text_stack, '');
-					$em = $token;
-				}
-			}
-		}
-		return $text_stack[0];
-	}
-
-
-	function doBlockQuotes($text) {
-		$text = preg_replace_callback('/
-			  (								# Wrap whole match in $1
-				(?>
-				  ^[ ]*>[ ]?			# ">" at the start of a line
-					.+\n					# rest of the first line
-				  (.+\n)*					# subsequent consecutive lines
-				  \n*						# blanks
-				)+
-			  )
-			/xm',
-			array(&$this, '_doBlockQuotes_callback'), $text);
-
-		return $text;
-	}
-	function _doBlockQuotes_callback($matches) {
-		$bq = $matches[1];
-		# trim one level of quoting - trim whitespace-only lines
-		$bq = preg_replace('/^[ ]*>[ ]?|^[ ]+$/m', '', $bq);
-		$bq = $this->runBlockGamut($bq);		# recurse
-
-		$bq = preg_replace('/^/m', "  ", $bq);
-		# These leading spaces cause problem with 
     content, 
-		# so we need to fix that:
-		$bq = preg_replace_callback('{(\s*
    .+?
    )}sx', 
-			array(&$this, '_doBlockQuotes_callback2'), $bq);
-
-		return "\n". $this->hashBlock("
    \n$bq\n
    ")."\n\n";
-	}
-	function _doBlockQuotes_callback2($matches) {
-		$pre = $matches[1];
-		$pre = preg_replace('/^  /m', '', $pre);
-		return $pre;
-	}
-
-
-	function formParagraphs($text) {
-	#
-	#	Params:
-	#		$text - string to process with html 
     tags
-	#
-		# Strip leading and trailing lines:
-		$text = preg_replace('/\A\n+|\n+\z/', '', $text);
-
-		$grafs = preg_split('/\n{2,}/', $text, -1, PREG_SPLIT_NO_EMPTY);
-
-		#
-		# Wrap 
     tags and unhashify HTML blocks
-		#
-		foreach ($grafs as $key => $value) {
-			if (!preg_match('/^B\x1A[0-9]+B$/', $value)) {
-				# Is a paragraph.
-				$value = $this->runSpanGamut($value);
-				$value = preg_replace('/^([ ]*)/', "
    ", $value);
-				$value .= "
    ";
-				$grafs[$key] = $this->unhash($value);
-			}
-			else {
-				# Is a block.
-				# Modify elements of @grafs in-place...
-				$graf = $value;
-				$block = $this->html_hashes[$graf];
-				$graf = $block;
-//				if (preg_match('{
-//					\A
-//					(							# $1 = 
     tag
-//					  
    ]*
-//					  \b
-//					  markdown\s*=\s*  ([\'"])	#	$2 = attr quote char
-//					  1
-//					  \2
-//					  [^>]*
-//					  >
-//					)
-//					(							# $3 = contents
-//					.*
-//					)
-//					(
    )					# $4 = closing tag
-//					\z
-//					}xs', $block, $matches))
-//				{
-//					list(, $div_open, , $div_content, $div_close) = $matches;
-//
-//					# We can't call Markdown(), because that resets the hash;
-//					# that initialization code should be pulled into its own sub, though.
-//					$div_content = $this->hashHTMLBlocks($div_content);
-//					
-//					# Run document gamut methods on the content.
-//					foreach ($this->document_gamut as $method => $priority) {
-//						$div_content = $this->$method($div_content);
-//					}
-//
-//					$div_open = preg_replace(
-//						'{\smarkdown\s*=\s*([\'"]).+?\1}', '', $div_open);
-//
-//					$graf = $div_open . "\n" . $div_content . "\n" . $div_close;
-//				}
-				$grafs[$key] = $graf;
-			}
-		}
-
-		return implode("\n\n", $grafs);
-	}
-
-
-	function encodeAttribute($text) {
-	#
-	# Encode text for a double-quoted HTML attribute. This function
-	# is *not* suitable for attributes enclosed in single quotes.
-	#
-		$text = $this->encodeAmpsAndAngles($text);
-		$text = str_replace('"', '"', $text);
-		return $text;
-	}
-	
-	
-	function encodeAmpsAndAngles($text) {
-	#
-	# Smart processing for ampersands and angle brackets that need to 
-	# be encoded. Valid character entities are left alone unless the
-	# no-entities mode is set.
-	#
-		if ($this->no_entities) {
-			$text = str_replace('&', '&', $text);
-		} else {
-			# Ampersand-encoding based entirely on Nat Irons's Amputator
-			# MT plugin: 
-			$text = preg_replace('/&(?!#?[xX]?(?:[0-9a-fA-F]+|\w+);)/', 
-								'&', $text);;
-		}
-		# Encode remaining <'s
-		$text = str_replace('<', '<', $text);
-
-		return $text;
-	}
-
-
-	function doAutoLinks($text) {
-		$text = preg_replace_callback('{<((https?|ftp|dict):[^\'">\s]+)>}i', 
-			array(&$this, '_doAutoLinks_url_callback'), $text);
-
-		# Email addresses: 
-		$text = preg_replace_callback('{
-			<
-			(?:mailto:)?
-			(
-				(?:
-					[-!#$%&\'*+/=?^_`.{|}~\w\x80-\xFF]+
-				|
-					".*?"
-				)
-				\@
-				(?:
-					[-a-z0-9\x80-\xFF]+(\.[-a-z0-9\x80-\xFF]+)*\.[a-z]+
-				|
-					\[[\d.a-fA-F:]+\]	# IPv4 & IPv6
-				)
-			)
-			>
-			}xi',
-			array(&$this, '_doAutoLinks_email_callback'), $text);
-
-		return $text;
-	}
-	function _doAutoLinks_url_callback($matches) {
-		$url = $this->encodeAttribute($matches[1]);
-		$link = "$url";
-		return $this->hashPart($link);
-	}
-	function _doAutoLinks_email_callback($matches) {
-		$address = $matches[1];
-		$link = $this->encodeEmailAddress($address);
-		return $this->hashPart($link);
-	}
-
-
-	function encodeEmailAddress($addr) {
-	#
-	#	Input: an email address, e.g. "foo@example.com"
-	#
-	#	Output: the email address as a mailto link, with each character
-	#		of the address encoded as either a decimal or hex entity, in
-	#		the hopes of foiling most address harvesting spam bots. E.g.:
-	#
-	#	  
    foo@exampl
-	#        e.com
    
-	#
-	#	Based by a filter by Matthew Wickline, posted to BBEdit-Talk.
-	#   With some optimizations by Milian Wolff.
-	#
-		$addr = "mailto:" . $addr;
-		$chars = preg_split('/(? $char) {
-			$ord = ord($char);
-			# Ignore non-ascii chars.
-			if ($ord < 128) {
-				$r = ($seed * (1 + $key)) % 100; # Pseudo-random function.
-				# roughly 10% raw, 45% hex, 45% dec
-				# '@' *must* be encoded. I insist.
-				if ($r > 90 && $char != '@') /* do nothing */;
-				else if ($r < 45) $chars[$key] = '&#x'.dechex($ord).';';
-				else              $chars[$key] = '&#'.$ord.';';
-			}
-		}
-		
-		$addr = implode('', $chars);
-		$text = implode('', array_slice($chars, 7)); # text without `mailto:`
-		$addr = "$text";
-
-		return $addr;
-	}
-
-
-	function parseSpan($str) {
-	#
-	# Take the string $str and parse it into tokens, hashing embeded HTML,
-	# escaped characters and handling code spans.
-	#
-		$output = '';
-		
-		$span_re = '{
-				(
-					\\\\'.$this->escape_chars_re.'
-				|
-					(?no_markup ? '' : '
-				|
-							# comment
-				|
-					<\?.*?\?> | <%.*?%>		# processing instruction
-				|
-					<[/!$]?[-a-zA-Z0-9:_]+	# regular tags
-					(?>
-						\s
-						(?>[^"\'>]+|"[^"]*"|\'[^\']*\')*
-					)?
-					>
-			').'
-				)
-				}xs';
-
-		while (1) {
-			#
-			# Each loop iteration seach for either the next tag, the next 
-			# openning code span marker, or the next escaped character. 
-			# Each token is then passed to handleSpanToken.
-			#
-			$parts = preg_split($span_re, $str, 2, PREG_SPLIT_DELIM_CAPTURE);
-			
-			# Create token from text preceding tag.
-			if ($parts[0] != "") {
-				$output .= $parts[0];
-			}
-			
-			# Check if we reach the end.
-			if (isset($parts[1])) {
-				$output .= $this->handleSpanToken($parts[1], $parts[2]);
-				$str = $parts[2];
-			}
-			else {
-				break;
-			}
-		}
-		
-		return $output;
-	}
-	
-	
-	function handleSpanToken($token, &$str) {
-	#
-	# Handle $token provided by parseSpan by determining its nature and 
-	# returning the corresponding value that should replace it.
-	#
-		switch ($token{0}) {
-			case "\\":
-				return $this->hashPart("&#". ord($token{1}). ";");
-			case "`":
-				# Search for end marker in remaining text.
-				if (preg_match('/^(.*?[^`])'.preg_quote($token).'(?!`)(.*)$/sm', 
-					$str, $matches))
-				{
-					$str = $matches[2];
-					$codespan = $this->makeCodeSpan($matches[1]);
-					return $this->hashPart($codespan);
-				}
-				return $token; // return as text since no ending marker found.
-			default:
-				return $this->hashPart($token);
-		}
-	}
-
-
-	function outdent($text) {
-	#
-	# Remove one level of line-leading tabs or spaces
-	#
-		return preg_replace('/^(\t|[ ]{1,'.$this->tab_width.'})/m', '', $text);
-	}
-
-
-	# String length function for detab. `_initDetab` will create a function to 
-	# hanlde UTF-8 if the default function does not exist.
-	var $utf8_strlen = 'mb_strlen';
-	
-	function detab($text) {
-	#
-	# Replace tabs with the appropriate amount of space.
-	#
-		# For each line we separate the line in blocks delemited by
-		# tab characters. Then we reconstruct every line by adding the 
-		# appropriate number of space between each blocks.
-		
-		$text = preg_replace_callback('/^.*\t.*$/m',
-			array(&$this, '_detab_callback'), $text);
-
-		return $text;
-	}
-	function _detab_callback($matches) {
-		$line = $matches[0];
-		$strlen = $this->utf8_strlen; # strlen function for UTF-8.
-		
-		# Split in blocks.
-		$blocks = explode("\t", $line);
-		# Add each blocks to the line.
-		$line = $blocks[0];
-		unset($blocks[0]); # Do not add first block twice.
-		foreach ($blocks as $block) {
-			# Calculate amount of space, insert spaces, insert block.
-			$amount = $this->tab_width - 
-				$strlen($line, 'UTF-8') % $this->tab_width;
-			$line .= str_repeat(" ", $amount) . $block;
-		}
-		return $line;
-	}
-	function _initDetab() {
-	#
-	# Check for the availability of the function in the `utf8_strlen` property
-	# (initially `mb_strlen`). If the function is not available, create a 
-	# function that will loosely count the number of UTF-8 characters with a
-	# regular expression.
-	#
-		if (function_exists($this->utf8_strlen)) return;
-		$this->utf8_strlen = create_function('$text', 'return preg_match_all(
-			"/[\\\\x00-\\\\xBF]|[\\\\xC0-\\\\xFF][\\\\x80-\\\\xBF]*/", 
-			$text, $m);');
-	}
-
-
-	function unhash($text) {
-	#
-	# Swap back in all the tags hashed by _HashHTMLBlocks.
-	#
-		return preg_replace_callback('/(.)\x1A[0-9]+\1/', 
-			array(&$this, '_unhash_callback'), $text);
-	}
-	function _unhash_callback($matches) {
-		return $this->html_hashes[$matches[0]];
-	}
-
-}
-
-
-#
-# Markdown Extra Parser Class
-#
-
-class MarkdownExtra_Parser extends Markdown_Parser {
-
-	# Prefix for footnote ids.
-	var $fn_id_prefix = "";
-	
-	# Optional title attribute for footnote links and backlinks.
-	var $fn_link_title = MARKDOWN_FN_LINK_TITLE;
-	var $fn_backlink_title = MARKDOWN_FN_BACKLINK_TITLE;
-	
-	# Optional class attribute for footnote links and backlinks.
-	var $fn_link_class = MARKDOWN_FN_LINK_CLASS;
-	var $fn_backlink_class = MARKDOWN_FN_BACKLINK_CLASS;
-	
-	# Predefined abbreviations.
-	var $predef_abbr = array();
-
-
-	function MarkdownExtra_Parser() {
-	#
-	# Constructor function. Initialize the parser object.
-	#
-		# Add extra escapable characters before parent constructor 
-		# initialize the table.
-		$this->escape_chars .= ':|';
-		
-		# Insert extra document, block, and span transformations. 
-		# Parent constructor will do the sorting.
-		$this->document_gamut += array(
-			"doFencedCodeBlocks" => 5,
-			"stripFootnotes"     => 15,
-			"stripAbbreviations" => 25,
-			"appendFootnotes"    => 50,
-			);
-		$this->block_gamut += array(
-			"doFencedCodeBlocks" => 5,
-			"doTables"           => 15,
-			"doDefLists"         => 45,
-			);
-		$this->span_gamut += array(
-			"doFootnotes"        => 5,
-			"doAbbreviations"    => 70,
-			);
-		
-		parent::Markdown_Parser();
-	}
-	
-	
-	# Extra variables used during extra transformations.
-	var $footnotes = array();
-	var $footnotes_ordered = array();
-	var $abbr_desciptions = array();
-	var $abbr_word_re = '';
-	
-	# Give the current footnote number.
-	var $footnote_counter = 1;
-	
-	
-	function setup() {
-	#
-	# Setting up Extra-specific variables.
-	#
-		parent::setup();
-		
-		$this->footnotes = array();
-		$this->footnotes_ordered = array();
-		$this->abbr_desciptions = array();
-		$this->abbr_word_re = '';
-		$this->footnote_counter = 1;
-		
-		foreach ($this->predef_abbr as $abbr_word => $abbr_desc) {
-			if ($this->abbr_word_re)
-				$this->abbr_word_re .= '|';
-			$this->abbr_word_re .= preg_quote($abbr_word);
-			$this->abbr_desciptions[$abbr_word] = trim($abbr_desc);
-		}
-	}
-	
-	function teardown() {
-	#
-	# Clearing Extra-specific variables.
-	#
-		$this->footnotes = array();
-		$this->footnotes_ordered = array();
-		$this->abbr_desciptions = array();
-		$this->abbr_word_re = '';
-		
-		parent::teardown();
-	}
-	
-	
-	### HTML Block Parser ###
-	
-	# Tags that are always treated as block tags:
-	var $block_tags_re = 'p|div|h[1-6]|blockquote|pre|table|dl|ol|ul|address|form|fieldset|iframe|hr|legend';
-	
-	# Tags treated as block tags only if the opening tag is alone on it's line:
-	var $context_block_tags_re = 'script|noscript|math|ins|del';
-	
-	# Tags where markdown="1" default to span mode:
-	var $contain_span_tags_re = 'p|h[1-6]|li|dd|dt|td|th|legend|address';
-	
-	# Tags which must not have their contents modified, no matter where 
-	# they appear:
-	var $clean_tags_re = 'script|math';
-	
-	# Tags that do not need to be closed.
-	var $auto_close_tags_re = 'hr|img';
-	
-
-	function hashHTMLBlocks($text) {
-	#
-	# Hashify HTML Blocks and "clean tags".
-	#
-	# We only want to do this for block-level HTML tags, such as headers,
-	# lists, and tables. That's because we still want to wrap 
    s around
-	# "paragraphs" that are wrapped in non-block-level tags, such as anchors,
-	# phrase emphasis, and spans. The list of tags we're looking for is
-	# hard-coded.
-	#
-	# This works by calling _HashHTMLBlocks_InMarkdown, which then calls
-	# _HashHTMLBlocks_InHTML when it encounter block tags. When the markdown="1" 
-	# attribute is found whitin a tag, _HashHTMLBlocks_InHTML calls back
-	#  _HashHTMLBlocks_InMarkdown to handle the Markdown syntax within the tag.
-	# These two functions are calling each other. It's recursive!
-	#
-		#
-		# Call the HTML-in-Markdown hasher.
-		#
-		list($text, ) = $this->_hashHTMLBlocks_inMarkdown($text);
-		
-		return $text;
-	}
-	function _hashHTMLBlocks_inMarkdown($text, $indent = 0, 
-										$enclosing_tag_re = '', $span = false)
-	{
-	#
-	# Parse markdown text, calling _HashHTMLBlocks_InHTML for block tags.
-	#
-	# *   $indent is the number of space to be ignored when checking for code 
-	#     blocks. This is important because if we don't take the indent into 
-	#     account, something like this (which looks right) won't work as expected:
-	#
-	#     
    
-	#         
    
-	#         Hello World.  <-- Is this a Markdown code block or text?
-	#         
      <-- Is this a Markdown code block or a real tag?
-	#     
    
-	#
-	#     If you don't like this, just don't indent the tag on which
-	#     you apply the markdown="1" attribute.
-	#
-	# *   If $enclosing_tag_re is not empty, stops at the first unmatched closing 
-	#     tag with that name. Nested tags supported.
-	#
-	# *   If $span is true, text inside must treated as span. So any double 
-	#     newline will be replaced by a single newline so that it does not create 
-	#     paragraphs.
-	#
-	# Returns an array of that form: ( processed text , remaining text )
-	#
-		if ($text === '') return array('', '');
-
-		# Regex to check for the presense of newlines around a block tag.
-		$newline_before_re = '/(?:^\n?|\n\n)*$/';
-		$newline_after_re = 
-			'{
-				^						# Start of text following the tag.
-				(?>[ ]*)?		# Optional comment.
-				[ ]*\n					# Must be followed by newline.
-			}xs';
-		
-		# Regex to match any tag.
-		$block_tag_re =
-			'{
-				(					# $2: Capture hole tag.
-									# Tag name.
-							'.$this->block_tags_re.'			|
-							'.$this->context_block_tags_re.'	|
-							'.$this->clean_tags_re.'        	|
-							(?!\s)'.$enclosing_tag_re.'
-						)
-						(?:
-							(?=[\s"\'/a-zA-Z0-9])	# Allowed characters after tag name.
-							(?>
-								".*?"		|	# Double quotes (can contain `>`)
-								\'.*?\'   	|	# Single quotes (can contain `>`)
-								.+?				# Anything but quotes and `>`.
-							)*?
-						)?
-					>					# End of tag.
-				|
-						# HTML Comment
-				|
-					<\?.*?\?> | <%.*?%>	# Processing instruction
-				|
-						# CData Block
-				|
-					# Code span marker
-					`+
-				'. ( !$span ? ' # If not in span.
-				|
-					# Indented code block
-					(?: ^[ ]*\n | ^ | \n[ ]*\n )
-					[ ]{'.($indent+4).'}[^\n]* \n
-					(?>
-						(?: [ ]{'.($indent+4).'}[^\n]* | [ ]* ) \n
-					)*
-				|
-					# Fenced code block marker
-					(?> ^ | \n )
-					[ ]{'.($indent).'}~~~+[ ]*\n
-				' : '' ). ' # End (if not is span).
-				)
-			}xs';
-
-		
-		$depth = 0;		# Current depth inside the tag tree.
-		$parsed = "";	# Parsed text that will be returned.
-
-		#
-		# Loop through every tag until we find the closing tag of the parent
-		# or loop until reaching the end of text if no parent tag specified.
-		#
-		do {
-			#
-			# Split the text using the first $tag_match pattern found.
-			# Text before  pattern will be first in the array, text after
-			# pattern will be at the end, and between will be any catches made 
-			# by the pattern.
-			#
-			$parts = preg_split($block_tag_re, $text, 2, 
-								PREG_SPLIT_DELIM_CAPTURE);
-			
-			# If in Markdown span mode, add a empty-string span-level hash 
-			# after each newline to prevent triggering any block element.
-			if ($span) {
-				$void = $this->hashPart("", ':');
-				$newline = "$void\n";
-				$parts[0] = $void . str_replace("\n", $newline, $parts[0]) . $void;
-			}
-			
-			$parsed .= $parts[0]; # Text before current tag.
-			
-			# If end of $text has been reached. Stop loop.
-			if (count($parts) < 3) {
-				$text = "";
-				break;
-			}
-			
-			$tag  = $parts[1]; # Tag to handle.
-			$text = $parts[2]; # Remaining text after current tag.
-			$tag_re = preg_quote($tag); # For use in a regular expression.
-			
-			#
-			# Check for: Code span marker
-			#
-			if ($tag{0} == "`") {
-				# Find corresponding end marker.
-				$tag_re = preg_quote($tag);
-				if (preg_match('{^(?>.+?|\n(?!\n))*?(?.*\n)+?'.$tag_re.' *\n}', $text, 
-					$matches)) 
-				{
-					# End marker found: pass text unchanged until marker.
-					$parsed .= $tag . $matches[0];
-					$text = substr($text, strlen($matches[0]));
-				}
-				else {
-					# No end marker: just skip it.
-					$parsed .= $tag;
-				}
-			}
-			#
-			# Check for: Opening Block level tag or
-			#            Opening Context Block tag (like ins and del) 
-			#               used as a block tag (tag is alone on it's line).
-			#
-			else if (preg_match('{^<(?:'.$this->block_tags_re.')\b}', $tag) ||
-				(	preg_match('{^<(?:'.$this->context_block_tags_re.')\b}', $tag) &&
-					preg_match($newline_before_re, $parsed) &&
-					preg_match($newline_after_re, $text)	)
-				)
-			{
-				# Need to parse tag and following text using the HTML parser.
-				list($block_text, $text) = 
-					$this->_hashHTMLBlocks_inHTML($tag . $text, "hashBlock", true);
-				
-				# Make sure it stays outside of any paragraph by adding newlines.
-				$parsed .= "\n\n$block_text\n\n";
-			}
-			#
-			# Check for: Clean tag (like script, math)
-			#            HTML Comments, processing instructions.
-			#
-			else if (preg_match('{^<(?:'.$this->clean_tags_re.')\b}', $tag) ||
-				$tag{1} == '!' || $tag{1} == '?')
-			{
-				# Need to parse tag and following text using the HTML parser.
-				# (don't check for markdown attribute)
-				list($block_text, $text) = 
-					$this->_hashHTMLBlocks_inHTML($tag . $text, "hashClean", false);
-				
-				$parsed .= $block_text;
-			}
-			#
-			# Check for: Tag with same name as enclosing tag.
-			#
-			else if ($enclosing_tag_re !== '' &&
-				# Same name as enclosing tag.
-				preg_match('{^= 0);
-		
-		return array($parsed, $text);
-	}
-	function _hashHTMLBlocks_inHTML($text, $hash_method, $md_attr) {
-	#
-	# Parse HTML, calling _HashHTMLBlocks_InMarkdown for block tags.
-	#
-	# *   Calls $hash_method to convert any blocks.
-	# *   Stops when the first opening tag closes.
-	# *   $md_attr indicate if the use of the `markdown="1"` attribute is allowed.
-	#     (it is not inside clean tags)
-	#
-	# Returns an array of that form: ( processed text , remaining text )
-	#
-		if ($text === '') return array('', '');
-		
-		# Regex to match `markdown` attribute inside of a tag.
-		$markdown_attr_re = '
-			{
-				\s*			# Eat whitespace before the `markdown` attribute
-				markdown
-				\s*=\s*
-				(?>
-					(["\'])		# $1: quote delimiter		
-					(.*?)		# $2: attribute value
-					\1			# matching delimiter	
-				|
-					([^\s>]*)	# $3: unquoted attribute value
-				)
-				()				# $4: make $3 always defined (avoid warnings)
-			}xs';
-		
-		# Regex to match any tag.
-		$tag_re = '{
-				(					# $2: Capture hole tag.
-					
-								".*?"		|	# Double quotes (can contain `>`)
-								\'.*?\'   	|	# Single quotes (can contain `>`)
-								.+?				# Anything but quotes and `>`.
-							)*?
-						)?
-					>					# End of tag.
-				|
-						# HTML Comment
-				|
-					<\?.*?\?> | <%.*?%>	# Processing instruction
-				|
-						# CData Block
-				)
-			}xs';
-		
-		$original_text = $text;		# Save original text in case of faliure.
-		
-		$depth		= 0;	# Current depth inside the tag tree.
-		$block_text	= "";	# Temporary text holder for current text.
-		$parsed		= "";	# Parsed text that will be returned.
-
-		#
-		# Get the name of the starting tag.
-		# (This pattern makes $base_tag_name_re safe without quoting.)
-		#
-		if (preg_match('/^<([\w:$]*)\b/', $text, $matches))
-			$base_tag_name_re = $matches[1];
-
-		#
-		# Loop through every tag until we find the corresponding closing tag.
-		#
-		do {
-			#
-			# Split the text using the first $tag_match pattern found.
-			# Text before  pattern will be first in the array, text after
-			# pattern will be at the end, and between will be any catches made 
-			# by the pattern.
-			#
-			$parts = preg_split($tag_re, $text, 2, PREG_SPLIT_DELIM_CAPTURE);
-			
-			if (count($parts) < 3) {
-				#
-				# End of $text reached with unbalenced tag(s).
-				# In that case, we return original text unchanged and pass the
-				# first character as filtered to prevent an infinite loop in the 
-				# parent function.
-				#
-				return array($original_text{0}, substr($original_text, 1));
-			}
-			
-			$block_text .= $parts[0]; # Text before current tag.
-			$tag         = $parts[1]; # Tag to handle.
-			$text        = $parts[2]; # Remaining text after current tag.
-			
-			#
-			# Check for: Auto-close tag (like 
    )
-			#			 Comments and Processing Instructions.
-			#
-			if (preg_match('{^auto_close_tags_re.')\b}', $tag) ||
-				$tag{1} == '!' || $tag{1} == '?')
-			{
-				# Just add the tag to the block as if it was text.
-				$block_text .= $tag;
-			}
-			else {
-				#
-				# Increase/decrease nested tag count. Only do so if
-				# the tag's name match base tag's.
-				#
-				if (preg_match('{^mode = $attr_m[2] . $attr_m[3];
-					$span_mode = $this->mode == 'span' || $this->mode != 'block' &&
-						preg_match('{^<(?:'.$this->contain_span_tags_re.')\b}', $tag);
-					
-					# Calculate indent before tag.
-					if (preg_match('/(?:^|\n)( *?)(?! ).*?$/', $block_text, $matches)) {
-						$strlen = $this->utf8_strlen;
-						$indent = $strlen($matches[1], 'UTF-8');
-					} else {
-						$indent = 0;
-					}
-					
-					# End preceding block with this tag.
-					$block_text .= $tag;
-					$parsed .= $this->$hash_method($block_text);
-					
-					# Get enclosing tag name for the ParseMarkdown function.
-					# (This pattern makes $tag_name_re safe without quoting.)
-					preg_match('/^<([\w:$]*)\b/', $tag, $matches);
-					$tag_name_re = $matches[1];
-					
-					# Parse the content using the HTML-in-Markdown parser.
-					list ($block_text, $text)
-						= $this->_hashHTMLBlocks_inMarkdown($text, $indent, 
-							$tag_name_re, $span_mode);
-					
-					# Outdent markdown text.
-					if ($indent > 0) {
-						$block_text = preg_replace("/^[ ]{1,$indent}/m", "", 
-													$block_text);
-					}
-					
-					# Append tag content to parsed text.
-					if (!$span_mode)	$parsed .= "\n\n$block_text\n\n";
-					else				$parsed .= "$block_text";
-					
-					# Start over a new block.
-					$block_text = "";
-				}
-				else $block_text .= $tag;
-			}
-			
-		} while ($depth > 0);
-		
-		#
-		# Hash last block text that wasn't processed inside the loop.
-		#
-		$parsed .= $this->$hash_method($block_text);
-		
-		return array($parsed, $text);
-	}
-
-
-	function hashClean($text) {
-	#
-	# Called whenever a tag must be hashed when a function insert a "clean" tag
-	# in $text, it pass through this function and is automaticaly escaped, 
-	# blocking invalid nested overlap.
-	#
-		return $this->hashPart($text, 'C');
-	}
-
-
-	function doHeaders($text) {
-	#
-	# Redefined to add id attribute support.
-	#
-		# Setext-style headers:
-		#	  Header 1  {#header1}
-		#	  ========
-		#  
-		#	  Header 2  {#header2}
-		#	  --------
-		#
-		$text = preg_replace_callback(
-			'{
-				(^.+?)								# $1: Header text
-				(?:[ ]+\{\#([-_:a-zA-Z0-9]+)\})?	# $2: Id attribute
-				[ ]*\n(=+|-+)[ ]*\n+				# $3: Header footer
-			}mx',
-			array(&$this, '_doHeaders_callback_setext'), $text);
-
-		# atx-style headers:
-		#	# Header 1        {#header1}
-		#	## Header 2       {#header2}
-		#	## Header 2 with closing hashes ##  {#header3}
-		#	...
-		#	###### Header 6   {#header2}
-		#
-		$text = preg_replace_callback('{
-				^(\#{1,6})	# $1 = string of #\'s
-				[ ]*
-				(.+?)		# $2 = Header text
-				[ ]*
-				\#*			# optional closing #\'s (not counted)
-				(?:[ ]+\{\#([-_:a-zA-Z0-9]+)\})? # id attribute
-				[ ]*
-				\n+
-			}xm',
-			array(&$this, '_doHeaders_callback_atx'), $text);
-
-		return $text;
-	}
-	function _doHeaders_attr($attr) {
-		if (empty($attr))  return "";
-		return " id=\"$attr\"";
-	}
-	function _doHeaders_callback_setext($matches) {
-		if ($matches[3] == '-' && preg_match('{^- }', $matches[1]))
-			return $matches[0];
-		$level = $matches[3]{0} == '=' ? 1 : 2;
-		$attr  = $this->_doHeaders_attr($id =& $matches[2]);
-		$block = "".$this->runSpanGamut($matches[1])."";
-		return "\n" . $this->hashBlock($block) . "\n\n";
-	}
-	function _doHeaders_callback_atx($matches) {
-		$level = strlen($matches[1]);
-		$attr  = $this->_doHeaders_attr($id =& $matches[3]);
-		$block = "".$this->runSpanGamut($matches[2])."";
-		return "\n" . $this->hashBlock($block) . "\n\n";
-	}
-
-
-	function doTables($text) {
-	#
-	# Form HTML tables.
-	#
-		$less_than_tab = $this->tab_width - 1;
-		#
-		# Find tables with leading pipe.
-		#
-		#	| Header 1 | Header 2
-		#	| -------- | --------
-		#	| Cell 1   | Cell 2
-		#	| Cell 3   | Cell 4
-		#
-		$text = preg_replace_callback('
-			{
-				^							# Start of a line
-				[ ]{0,'.$less_than_tab.'}	# Allowed whitespace.
-				[|]							# Optional leading pipe (present)
-				(.+) \n						# $1: Header row (at least one pipe)
-				
-				[ ]{0,'.$less_than_tab.'}	# Allowed whitespace.
-				[|] ([ ]*[-:]+[-| :]*) \n	# $2: Header underline
-				
-				(							# $3: Cells
-					(?>
-						[ ]*				# Allowed whitespace.
-						[|] .* \n			# Row content.
-					)*
-				)
-				(?=\n|\Z)					# Stop at final double newline.
-			}xm',
-			array(&$this, '_doTable_leadingPipe_callback'), $text);
-		
-		#
-		# Find tables without leading pipe.
-		#
-		#	Header 1 | Header 2
-		#	-------- | --------
-		#	Cell 1   | Cell 2
-		#	Cell 3   | Cell 4
-		#
-		$text = preg_replace_callback('
-			{
-				^							# Start of a line
-				[ ]{0,'.$less_than_tab.'}	# Allowed whitespace.
-				(\S.*[|].*) \n				# $1: Header row (at least one pipe)
-				
-				[ ]{0,'.$less_than_tab.'}	# Allowed whitespace.
-				([-:]+[ ]*[|][-| :]*) \n	# $2: Header underline
-				
-				(							# $3: Cells
-					(?>
-						.* [|] .* \n		# Row content
-					)*
-				)
-				(?=\n|\Z)					# Stop at final double newline.
-			}xm',
-			array(&$this, '_DoTable_callback'), $text);
-
-		return $text;
-	}
-	function _doTable_leadingPipe_callback($matches) {
-		$head		= $matches[1];
-		$underline	= $matches[2];
-		$content	= $matches[3];
-		
-		# Remove leading pipe for each row.
-		$content	= preg_replace('/^ *[|]/m', '', $content);
-		
-		return $this->_doTable_callback(array($matches[0], $head, $underline, $content));
-	}
-	function _doTable_callback($matches) {
-		$head		= $matches[1];
-		$underline	= $matches[2];
-		$content	= $matches[3];
-
-		# Remove any tailing pipes for each line.
-		$head		= preg_replace('/[|] *$/m', '', $head);
-		$underline	= preg_replace('/[|] *$/m', '', $underline);
-		$content	= preg_replace('/[|] *$/m', '', $content);
-		
-		# Reading alignement from header underline.
-		$separators	= preg_split('/ *[|] */', $underline);
-		foreach ($separators as $n => $s) {
-			if (preg_match('/^ *-+: *$/', $s))		$attr[$n] = ' align="right"';
-			else if (preg_match('/^ *:-+: *$/', $s))$attr[$n] = ' align="center"';
-			else if (preg_match('/^ *:-+ *$/', $s))	$attr[$n] = ' align="left"';
-			else									$attr[$n] = '';
-		}
-		
-		# Parsing span elements, including code spans, character escapes, 
-		# and inline HTML tags, so that pipes inside those gets ignored.
-		$head		= $this->parseSpan($head);
-		$headers	= preg_split('/ *[|] */', $head);
-		$col_count	= count($headers);
-		
-		# Write column headers.
-		$text = "\n";
-		$text .= "\n";
-		$text .= "\n";
-		foreach ($headers as $n => $header)
-			$text .= "  ".$this->runSpanGamut(trim($header))."\n";
-		$text .= "\n";
-		$text .= "\n";
-		
-		# Split content by row.
-		$rows = explode("\n", trim($content, "\n"));
-		
-		$text .= "\n";
-		foreach ($rows as $row) {
-			# Parsing span elements, including code spans, character escapes, 
-			# and inline HTML tags, so that pipes inside those gets ignored.
-			$row = $this->parseSpan($row);
-			
-			# Split row by cell.
-			$row_cells = preg_split('/ *[|] */', $row, $col_count);
-			$row_cells = array_pad($row_cells, $col_count, '');
-			
-			$text .= "\n";
-			foreach ($row_cells as $n => $cell)
-				$text .= "  ".$this->runSpanGamut(trim($cell))."\n";
-			$text .= "\n";
-		}
-		$text .= "\n";
-		$text .= "
    ";
-		
-		return $this->hashBlock($text) . "\n";
-	}
-
-	
-	function doDefLists($text) {
-	#
-	# Form HTML definition lists.
-	#
-		$less_than_tab = $this->tab_width - 1;
-
-		# Re-usable pattern to match any entire dl list:
-		$whole_list_re = '(?>
-			(								# $1 = whole list
-			  (								# $2
-				[ ]{0,'.$less_than_tab.'}
-				((?>.*\S.*\n)+)				# $3 = defined term
-				\n?
-				[ ]{0,'.$less_than_tab.'}:[ ]+ # colon starting definition
-			  )
-			  (?s:.+?)
-			  (								# $4
-				  \z
-				|
-				  \n{2,}
-				  (?=\S)
-				  (?!						# Negative lookahead for another term
-					[ ]{0,'.$less_than_tab.'}
-					(?: \S.*\n )+?			# defined term
-					\n?
-					[ ]{0,'.$less_than_tab.'}:[ ]+ # colon starting definition
-				  )
-				  (?!						# Negative lookahead for another definition
-					[ ]{0,'.$less_than_tab.'}:[ ]+ # colon starting definition
-				  )
-			  )
-			)
-		)'; // mx
-
-		$text = preg_replace_callback('{
-				(?>\A\n?|(?<=\n\n))
-				'.$whole_list_re.'
-			}mx',
-			array(&$this, '_doDefLists_callback'), $text);
-
-		return $text;
-	}
-	function _doDefLists_callback($matches) {
-		# Re-usable patterns to match list item bullets and number markers:
-		$list = $matches[1];
-		
-		# Turn double returns into triple returns, so that we can make a
-		# paragraph for the last item in a list, if necessary:
-		$result = trim($this->processDefListItems($list));
-		$result = "
    \n" . $result . "\n
    ";
-		return $this->hashBlock($result) . "\n\n";
-	}
-
-
-	function processDefListItems($list_str) {
-	#
-	#	Process the contents of a single definition list, splitting it
-	#	into individual term and definition list items.
-	#
-		$less_than_tab = $this->tab_width - 1;
-		
-		# trim trailing blank lines:
-		$list_str = preg_replace("/\n{2,}\\z/", "\n", $list_str);
-
-		# Process definition terms.
-		$list_str = preg_replace_callback('{
-			(?>\A\n?|\n\n+)					# leading line
-			(								# definition terms = $1
-				[ ]{0,'.$less_than_tab.'}	# leading whitespace
-				(?![:][ ]|[ ])				# negative lookahead for a definition 
-											#   mark (colon) or more whitespace.
-				(?> \S.* \n)+?				# actual term (not whitespace).	
-			)			
-			(?=\n?[ ]{0,3}:[ ])				# lookahead for following line feed 
-											#   with a definition mark.
-			}xm',
-			array(&$this, '_processDefListItems_callback_dt'), $list_str);
-
-		# Process actual definitions.
-		$list_str = preg_replace_callback('{
-			\n(\n+)?						# leading line = $1
-			(								# marker space = $2
-				[ ]{0,'.$less_than_tab.'}	# whitespace before colon
-				[:][ ]+						# definition mark (colon)
-			)
-			((?s:.+?))						# definition text = $3
-			(?= \n+ 						# stop at next definition mark,
-				(?:							# next term or end of text
-					[ ]{0,'.$less_than_tab.'} [:][ ]	|
-					
     | \z
-				)						
-			)					
-			}xm',
-			array(&$this, '_processDefListItems_callback_dd'), $list_str);
-
-		return $list_str;
-	}
-	function _processDefListItems_callback_dt($matches) {
-		$terms = explode("\n", trim($matches[1]));
-		$text = '';
-		foreach ($terms as $term) {
-			$term = $this->runSpanGamut(trim($term));
-			$text .= "\n
    " . $term . "
    ";
-		}
-		return $text . "\n";
-	}
-	function _processDefListItems_callback_dd($matches) {
-		$leading_line	= $matches[1];
-		$marker_space	= $matches[2];
-		$def			= $matches[3];
-
-		if ($leading_line || preg_match('/\n{2,}/', $def)) {
-			# Replace marker with the appropriate whitespace indentation
-			$def = str_repeat(' ', strlen($marker_space)) . $def;
-			$def = $this->runBlockGamut($this->outdent($def . "\n\n"));
-			$def = "\n". $def ."\n";
-		}
-		else {
-			$def = rtrim($def);
-			$def = $this->runSpanGamut($this->outdent($def));
-		}
-
-		return "\n
    " . $def . "
    \n";
-	}
-
-
-	function doFencedCodeBlocks($text) {
-	#
-	# Adding the fenced code block syntax to regular Markdown:
-	#
-	# ~~~
-	# Code block
-	# ~~~
-	#
-		$less_than_tab = $this->tab_width;
-		
-		$text = preg_replace_callback('{
-				(?:\n|\A)
-				# 1: Opening marker
-				(
-					~{3,} # Marker: three tilde or more.
-				)
-				[ ]* \n # Whitespace and newline following marker.
-				
-				# 2: Content
-				(
-					(?>
-						(?!\1 [ ]* \n)	# Not a closing marker.
-						.*\n+
-					)+
-				)
-				
-				# Closing marker.
-				\1 [ ]* \n
-			}xm',
-			array(&$this, '_doFencedCodeBlocks_callback'), $text);
-
-		return $text;
-	}
-	function _doFencedCodeBlocks_callback($matches) {
-		$codeblock = $matches[2];
-		$codeblock = htmlspecialchars($codeblock, ENT_NOQUOTES);
-		$codeblock = preg_replace_callback('/^\n+/',
-			array(&$this, '_doFencedCodeBlocks_newlines'), $codeblock);
-		$codeblock = "
    $codeblock
    ";
-		return "\n\n".$this->hashBlock($codeblock)."\n\n";
-	}
-	function _doFencedCodeBlocks_newlines($matches) {
-		return str_repeat("empty_element_suffix", 
-			strlen($matches[0]));
-	}
-
-
-	#
-	# Redefining emphasis markers so that emphasis by underscore does not
-	# work in the middle of a word.
-	#
-	var $em_relist = array(
-		''  => '(?:(? '(?<=\S|^)(? '(?<=\S|^)(? '(?:(? '(?<=\S|^)(? '(?<=\S|^)(? '(?:(? '(?<=\S|^)(? '(?<=\S|^)(? tags
-	#
-		# Strip leading and trailing lines:
-		$text = preg_replace('/\A\n+|\n+\z/', '', $text);
-		
-		$grafs = preg_split('/\n{2,}/', $text, -1, PREG_SPLIT_NO_EMPTY);
-
-		#
-		# Wrap 
     tags and unhashify HTML blocks
-		#
-		foreach ($grafs as $key => $value) {
-			$value = trim($this->runSpanGamut($value));
-			
-			# Check if this should be enclosed in a paragraph.
-			# Clean tag hashes & block tag hashes are left alone.
-			$is_p = !preg_match('/^B\x1A[0-9]+B|^C\x1A[0-9]+C$/', $value);
-			
-			if ($is_p) {
-				$value = "
    $value
    ";
-			}
-			$grafs[$key] = $value;
-		}
-		
-		# Join grafs in one text, then unhash HTML tags. 
-		$text = implode("\n\n", $grafs);
-		
-		# Finish by removing any tag hashes still present in $text.
-		$text = $this->unhash($text);
-		
-		return $text;
-	}
-	
-	
-	### Footnotes
-	
-	function stripFootnotes($text) {
-	#
-	# Strips link definitions from text, stores the URLs and titles in
-	# hash references.
-	#
-		$less_than_tab = $this->tab_width - 1;
-
-		# Link defs are in the form: [^id]: url "optional title"
-		$text = preg_replace_callback('{
-			^[ ]{0,'.$less_than_tab.'}\[\^(.+?)\][ ]?:	# note_id = $1
-			  [ ]*
-			  \n?					# maybe *one* newline
-			(						# text = $2 (no blank lines allowed)
-				(?:					
-					.+				# actual text
-				|
-					\n				# newlines but 
-					(?!\[\^.+?\]:\s)# negative lookahead for footnote marker.
-					(?!\n+[ ]{0,3}\S)# ensure line is not blank and followed 
-									# by non-indented content
-				)*
-			)		
-			}xm',
-			array(&$this, '_stripFootnotes_callback'),
-			$text);
-		return $text;
-	}
-	function _stripFootnotes_callback($matches) {
-		$note_id = $this->fn_id_prefix . $matches[1];
-		$this->footnotes[$note_id] = $this->outdent($matches[2]);
-		return ''; # String that will replace the block
-	}
-
-
-	function doFootnotes($text) {
-	#
-	# Replace footnote references in $text [^id] with a special text-token 
-	# which will be replaced by the actual footnote marker in appendFootnotes.
-	#
-		if (!$this->in_anchor) {
-			$text = preg_replace('{\[\^(.+?)\]}', "F\x1Afn:\\1\x1A:", $text);
-		}
-		return $text;
-	}
-
-	
-	function appendFootnotes($text) {
-	#
-	# Append footnote list to text.
-	#
-		$text = preg_replace_callback('{F\x1Afn:(.*?)\x1A:}', 
-			array(&$this, '_appendFootnotes_callback'), $text);
-	
-		if (!empty($this->footnotes_ordered)) {
-			$text .= "\n\n";
-			$text .= "
    \n";
-			$text .= "empty_element_suffix ."\n";
-			$text .= "
      \n\n";
-			
-			$attr = " rev=\"footnote\"";
-			if ($this->fn_backlink_class != "") {
-				$class = $this->fn_backlink_class;
-				$class = $this->encodeAttribute($class);
-				$attr .= " class=\"$class\"";
-			}
-			if ($this->fn_backlink_title != "") {
-				$title = $this->fn_backlink_title;
-				$title = $this->encodeAttribute($title);
-				$attr .= " title=\"$title\"";
-			}
-			$num = 0;
-			
-			while (!empty($this->footnotes_ordered)) {
-				$footnote = reset($this->footnotes_ordered);
-				$note_id = key($this->footnotes_ordered);
-				unset($this->footnotes_ordered[$note_id]);
-				
-				$footnote .= "\n"; # Need to append newline before parsing.
-				$footnote = $this->runBlockGamut("$footnote\n");				
-				$footnote = preg_replace_callback('{F\x1Afn:(.*?)\x1A:}', 
-					array(&$this, '_appendFootnotes_callback'), $footnote);
-				
-				$attr = str_replace("%%", ++$num, $attr);
-				$note_id = $this->encodeAttribute($note_id);
-				
-				# Add backlink to last paragraph; create new paragraph if needed.
-				$backlink = "↩";
-				if (preg_match('{
      $}', $footnote)) {
-					$footnote = substr($footnote, 0, -4) . " $backlink
      ";
-				} else {
-					$footnote .= "\n\n
      $backlink
      ";
-				}
-				
-				$text .= "
    1. \n";
-				$text .= $footnote . "\n";
-				$text .= "
      2. \n\n";
-			}
-			
-			$text .= "
    \n";
-			$text .= "
    ";
-		}
-		return $text;
-	}
-	function _appendFootnotes_callback($matches) {
-		$node_id = $this->fn_id_prefix . $matches[1];
-		
-		# Create footnote marker only if it has a corresponding footnote *and*
-		# the footnote hasn't been used by another marker.
-		if (isset($this->footnotes[$node_id])) {
-			# Transfert footnote content to the ordered list.
-			$this->footnotes_ordered[$node_id] = $this->footnotes[$node_id];
-			unset($this->footnotes[$node_id]);
-			
-			$num = $this->footnote_counter++;
-			$attr = " rel=\"footnote\"";
-			if ($this->fn_link_class != "") {
-				$class = $this->fn_link_class;
-				$class = $this->encodeAttribute($class);
-				$attr .= " class=\"$class\"";
-			}
-			if ($this->fn_link_title != "") {
-				$title = $this->fn_link_title;
-				$title = $this->encodeAttribute($title);
-				$attr .= " title=\"$title\"";
-			}
-			
-			$attr = str_replace("%%", $num, $attr);
-			$node_id = $this->encodeAttribute($node_id);
-			
-			return
-				"".
-				"$num".
-				"";
-		}
-		
-		return "[^".$matches[1]."]";
-	}
-		
-	
-	### Abbreviations ###
-	
-	function stripAbbreviations($text) {
-	#
-	# Strips abbreviations from text, stores titles in hash references.
-	#
-		$less_than_tab = $this->tab_width - 1;
-
-		# Link defs are in the form: [id]*: url "optional title"
-		$text = preg_replace_callback('{
-			^[ ]{0,'.$less_than_tab.'}\*\[(.+?)\][ ]?:	# abbr_id = $1
-			(.*)					# text = $2 (no blank lines allowed)	
-			}xm',
-			array(&$this, '_stripAbbreviations_callback'),
-			$text);
-		return $text;
-	}
-	function _stripAbbreviations_callback($matches) {
-		$abbr_word = $matches[1];
-		$abbr_desc = $matches[2];
-		if ($this->abbr_word_re)
-			$this->abbr_word_re .= '|';
-		$this->abbr_word_re .= preg_quote($abbr_word);
-		$this->abbr_desciptions[$abbr_word] = trim($abbr_desc);
-		return ''; # String that will replace the block
-	}
-	
-	
-	function doAbbreviations($text) {
-	#
-	# Find defined abbreviations in text and wrap them in  elements.
-	#
-		if ($this->abbr_word_re) {
-			// cannot use the /x modifier because abbr_word_re may 
-			// contain significant spaces:
-			$text = preg_replace_callback('{'.
-				'(?abbr_word_re.')'.
-				'(?![\w\x1A])'.
-				'}', 
-				array(&$this, '_doAbbreviations_callback'), $text);
-		}
-		return $text;
-	}
-	function _doAbbreviations_callback($matches) {
-		$abbr = $matches[0];
-		if (isset($this->abbr_desciptions[$abbr])) {
-			$desc = $this->abbr_desciptions[$abbr];
-			if (empty($desc)) {
-				return $this->hashPart("$abbr");
-			} else {
-				$desc = $this->encodeAttribute($desc);
-				return $this->hashPart("$abbr");
-			}
-		} else {
-			return $matches[0];
-		}
-	}
-
-}
-
-
-/*
-
-PHP Markdown Extra
-==================
-
-Description
------------
-
-This is a PHP port of the original Markdown formatter written in Perl 
-by John Gruber. This special "Extra" version of PHP Markdown features 
-further enhancements to the syntax for making additional constructs 
-such as tables and definition list.
-
-Markdown is a text-to-HTML filter; it translates an easy-to-read /
-easy-to-write structured text format into HTML. Markdown's text format
-is most similar to that of plain text email, and supports features such
-as headers, *emphasis*, code blocks, blockquotes, and links.
-
-Markdown's syntax is designed not as a generic markup language, but
-specifically to serve as a front-end to (X)HTML. You can use span-level
-HTML tags anywhere in a Markdown document, and you can use block level
-HTML tags (like 
     and  as well).
-
-For more information about Markdown's syntax, see:
-
-
-
-
-Bugs
-----
-
-To file bug reports please send email to:
-
-
-
-Please include with your report: (1) the example input; (2) the output you
-expected; (3) the output Markdown actually produced.
-
-
-Version History
---------------- 
-
-See the readme file for detailed release notes for this version.
-
-
-Copyright and License
----------------------
-
-PHP Markdown & Extra  
-Copyright (c) 2004-2009 Michel Fortin  
-  
-All rights reserved.
-
-Based on Markdown  
-Copyright (c) 2003-2006 John Gruber   
-   
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are
-met:
-
-*	Redistributions of source code must retain the above copyright notice,
-	this list of conditions and the following disclaimer.
-
-*	Redistributions in binary form must reproduce the above copyright
-	notice, this list of conditions and the following disclaimer in the
-	documentation and/or other materials provided with the distribution.
-
-*	Neither the name "Markdown" nor the names of its contributors may
-	be used to endorse or promote products derived from this software
-	without specific prior written permission.
-
-This software is provided by the copyright holders and contributors "as
-is" and any express or implied warranties, including, but not limited
-to, the implied warranties of merchantability and fitness for a
-particular purpose are disclaimed. In no event shall the copyright owner
-or contributors be liable for any direct, indirect, incidental, special,
-exemplary, or consequential damages (including, but not limited to,
-procurement of substitute goods or services; loss of use, data, or
-profits; or business interruption) however caused and on any theory of
-liability, whether in contract, strict liability, or tort (including
-negligence or otherwise) arising in any way out of the use of this
-software, even if advised of the possibility of such damage.
-
-*/
-?>
\ No newline at end of file
diff --git a/build/template.html b/build/template.html
new file mode 100644
index 00000000..e86344c2
--- /dev/null
+++ b/build/template.html
@@ -0,0 +1,6 @@
+--- 
+layout: default
+---
+
+
    NAV_DIV
    
+
    CONTENT_DIV
    
\ No newline at end of file
diff --git a/builder/assets/buttons.js b/builder/assets/buttons.js
deleted file mode 100755
index d5b5d658..00000000
--- a/builder/assets/buttons.js
+++ /dev/null
@@ -1,213 +0,0 @@
-function initButtons() {
-
-//on running the game
-$b.run.click(function() {
-	$workbench.tabs('select', 2);
-	Editor.run();
-});
-
-//on clearing the console
-$b.clear.click(function() {
-	$consoletext.html("");
-});
-
-//on creating a new component
-$b.newent.click(function() {
-	var comp, html = "";
-	
-	for(comp in COMPS) {
-		html += "";
-	}
-	$necomps.html(html);
-	$nedialog.dialog({modal: true, buttons: {
-		Cancel: function() { $(this).dialog("close"); },
-		
-		Create: function() {
-			var inst = $instance.val().replace(/^[0-9]*/,"").replace(/[^A-Za-z0-9]/g, ""),
-				comps = $necomps.val() || "",
-				block;
-			
-			//name taken
-			if(ENTS[inst] || !inst.length) {
-				$instance.val("");
-			} else {
-				comps = typeof comps === "object" ? comps.join(", ") : "";
-				CENTS[inst] = Crafty.e("_GUI").comps(comps);
-				
-				//append the entity in the selected scene
-				ENTS[inst] = {comps: comps};
-				Editor.update();
-				
-				$instance.val("");
-				$(this).dialog("close");
-			}
-		}
-	}});
-});
-
-$b.newscene.click(function() {
-	$nsdialog.dialog({modal: true,
-		buttons: {
-			Cancel: function() { $(this).dialog("close"); },
-			Create: function() {
-				var name = $scname.val();
-				SCENES[name] = {};
-				Editor.update();
-				
-				$(this).dialog("close");
-			}
-		}
-	});
-});
-
-$b.addasset.click(function() {
-	$asdialog.dialog({modal: true,
-		buttons: {
-			Cancel: function() { $(this).dialog("close"); },
-			Add: function() {
-				var url = $asname.val();	
-				
-				ASSETS[url] = {
-					type: Editor.media(url)
-				};
-				
-				Editor.update();
-				$(this).dialog("close");
-			}
-		}
-	});
-});
-
-$b.load.click(function() {
-	//open the dialog
-	$loaddialog.dialog({modal: true,
-		buttons: {
-			'Cancel': function() { $(this).dialog("close"); },
-			'Load': function() {
-				var root = $groot.val(),
-					file = $sloc.val();
-					
-				BASE = root;	
-				iframe(file, root, function() {
-					this.Crafty.stop();
-					Editor.extract(this.Crafty);
-					Editor.update();
-				});
-				$(this).dialog("close");
-			}
-		}
-	});
-});
-
-function openScene(e) {
-	var href = $(this).attr("href");
-	href = href.substr(1); //grab the scene ID
-	
-	CURRENT_SCENE = href; //make it current
-	$("#scenes ul a").css("background", "transparent");
-	$(this).css("background", "#FFE4D9"); //change the selected color
-	$currentscene.text(CURRENT_SCENE);
-}
-
-//when clicking on a scene, select it
-$("#scenes ul a").live("dblclick", openScene).contextMenu("sceneMenu", {
-	open: openScene
-});
-
-function spritifyHandler() {
-	var href = $(this).attr("href");
-	href = href.substr(1); //grab the scene ID
-	console.log(href);
-	spritify(href);
-}
-
-$("#assets ul a.image").live("dblclick", spritifyHandler).contextMenu("imageMenu", {
-	spritify: spritifyHandler
-});
-
-function playHandler() {
-	var href = $(this).attr("href");
-	href = href.substr(1); //grab the scene ID
-	
-}
-
-$("#assets ul a.sound").live("dblclick", playHandler).contextMenu("soundMenu", {
-	play: playHandler
-});
-
-$("#entities ul a").live("dblclick", function() {
-	var href = $(this).attr("href");
-	href = href.substr(1);
-	
-	CURRENT_ENTITY = href;
-}).contextMenu("entsMenu", {
-	click: function() {
-		var href = $(this).attr("href"), selected = $workbench.tabs("option", "selected");
-		href = href.substr(1);
-				
-		CURRENT_ENTITY = href;
-		
-		$("#entities ul a").css("background", "transparent");
-		$(this).css("background", "#FFE4D9");
-	},
-	
-	properties: function() {
-		$prdialog.dialog({modal: true, maxHeight:600, width:400,
-			buttons: {
-				Done: function() {
-					$(this).dialog("close");
-				}
-			}
-		});
-		
-		var ent = CENTS[CURRENT_ENTITY], key, html = "";
-		for(key in ent) {
-			//no functions, private properties or properties starting with an int
-			if(typeof ent[key] === "function" || key === "length" || 
-			   key.charAt(0) === '_' || /^[0-9]+/.test(key)) continue;
-			
-			html += "    ";
-		}
-		//update the HTML
-		$prdialog.find("table").html(html);
-		
-		//set change events for all the inputs
-		$prdialog.find("input").change(function() {
-			var name = $(this).attr("name"),
-				val = $(this).val();
-				
-			ent[name] = guessType(val);
-		});
-	}
-});
-
-function cursor() {
-	$workarea.css("cursor", CURSOR);
-}
-
-$b.pointer.mousedown(function() {
-	CURSOR = "default";
-	cursor();
-});
-
-$b.text.mousedown(function() {
-	CURSOR = "text";
-	cursor();
-});
-
-$b.spritebrush.mousedown(function() {
-	CURSOR = "url('assets/images/paintbrush.png'), auto";
-	cursor();
-});
-
-$b.scroll.mousedown(function() {
-	CURSOR = "move";
-	cursor();
-});
-
-$b.polygon.mousedown(function() {
-	CURSOR = "crosshair";
-	cursor();
-});
-
-}
\ No newline at end of file
diff --git a/builder/assets/compiler.js b/builder/assets/compiler.js
deleted file mode 100755
index 34c6e8a7..00000000
--- a/builder/assets/compiler.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
-* TODO
-*
-* //wysiwyg
-* Add all entities on the stage as DOM elements
-* Drag and drop updates its props
-* Context menu to copy/cut/paste/delete and properties
-* Snap to grid
-* 
-* //Saving
-* Save all objects into JSON
-* Load all JSON into object
-*/
-
-Crafty.c("_GUI", {
-	_GUI: function() {
-		this.requires("DOM");
-		
-		var self = this;
-		function drag(e) {
-			self.x = (e.clientX - Crafty.stage.x) - self._startX;
-			self.y = (e.clientY - Crafty.stage.y) - self._startY;
-			self.draw();
-		}
-				
-		$(this._element).mousedown(function(e) {
-			self._startX = (e.clientX - Crafty.stage.x) - self._x;
-			self._startY = (e.clientY - Crafty.stage.y) - self._y;
-			$workarea.mousemove(drag);
-		});
-		
-		$workarea.mouseup(function() {
-			$workarea.unbind("mousemove", drag);
-		});
-	},
-	
-	_startX: 0,
-	_startY: 0,
-	
-	comps: function(complist) {
-		var comps = complist.split(/\s*,\s*/),
-			i = 0, l = comps.length;
-		
-		for(;i "+i+"";
-			}
-			$components.find("ul").html(html);
-			
-			//list entities
-			html = "";
-			for(i in ENTS) {
-				html += "
  •  "+i+" "+ENTS[i].comps+"
    • ";
-			}
-			$entities.find("ul").html(html);
-			
-			//list scenes
-			html = "";
-			for(i in SCENES) {
-				html += "
  •  "+i+"
    • ";
-			}
-			$scenes.find("ul").html(html);
-			
-			//list assets
-			html = "";
-			for(i in ASSETS) {
-				type = ASSETS[i].type;
-				html += "
  •  "+i+"
    • ";
-			}
-			$assets.find("ul").html(html);
-		},
-		
-		setCode: function() {
-			if(CURRENT_ENTITY) {
-				CM.setCode(CURRENT_ENTITY.actions);
-				$current.text(CURRENT_ENTITY.name);
-				$workbench.tabs("select", 1);
-			}
-		},
-		
-		run: function run() {
-			//if iframe exists, remove it and create a new one
-			if(frame) $stage[0].removeChild(frame);
-			frame = createHTMLElement("iframe");
-			frame.src = "javascript:;";
-			frame.frameBorder = 0;
-			frame.style.border = "0";
-			frame.style.width = '100%';
-			frame.style.height = '100%';
-			frame.style.display = "block";
-			
-			//add it to the stage div
-			$stage.append(frame);
-			$(frame).load(handler);
-			
-			//generate the HTML for the frame
-			var code = CM.getCode(),
-				html,
-				win = frame.contentWindow,
-				results = JSLINT(code, LINT_OPTIONS);
-			
-			//if found errors, log them
-			if(!results) {
-				var i = 0, errorz = JSLINT.errors, l = errorz.length, current;
-				for(;i"+current.line+" Char "+current.character+": "+current.evidence+" ... "+current.reason);
-				}
-				if(errorz[l-1] == null) {
-					$workbench.tabs('select', 0);
-					return;
-				}
-			}
-			
-			html = ["",
-					"",
-					""+code+"",
-					""];
-						
-			//add the HTML
-			win.document.open();
-			win.document.write(html.join(""));
-			win.document.close();
-			
-			//when loaded, grab the Crafty instance
-			function handler() {
-				craft = win.Crafty;
-			}
-		},
-		
-		extract: function(obj) {
-			var i, 
-				comps = obj.components(), 
-				ass = obj.assets,
-				ents = obj("*"),
-				scenes = obj._scenes;
-			
-			//extract components
-			for(i in comps) {
-				COMPS[i] = comps[i];
-			}
-			
-			//extract assets
-			for(i in ass) {
-				ASSETS[i] = {type: Editor.media(i), obj: ass[i]};
-			}
-			
-			//extract entities
-			for(i in ents) {
-				if(!ents.hasOwnProperty(i) || i === "length") continue;
-				ENTS[i] = ents[i];
-				var comp, str = [];
-				for(comp in ents[i].__c) str.push(comp);
-				ENTS[i].comps = str.join(", ");
-			}
-			
-			//extract scenes
-			for(i in scenes) {
-				SCENES[i] = scenes[i];
-			}
-		},
-		
-		alert: function dialog(title, msg, buttons) {
-			$alert.attr("title", title).dialog({draggable: false, resizable: false, modal: true, buttons: buttons});
-			$alerttext.text(msg);
-		},
-		
-		log: function(msg) {
-			$consoletext[0].innerHTML += ""+msg+"";
-		},
-		
-		media: function(url) {
-			var ext = url.substr(url.lastIndexOf('.')+1).toLowerCase();
-			
-			if(ext === 'wav' || ext === 'mp3' || ext === 'ogg' || ext === 'm4a') {
-				return "sound";
-			} else if(ext === 'png' || ext === 'jpg' || ext === 'jpeg' || ext === 'gif' || ext === 'bmp') {
-				return "image";
-			} else {
-				return;
-			}
-		}
-	};
-})();
-
-window.Builder = Editor;
-
-//})(Crafty, window, jQuery);
\ No newline at end of file
diff --git a/builder/assets/global.css b/builder/assets/global.css
deleted file mode 100755
index 221ad189..00000000
--- a/builder/assets/global.css
+++ /dev/null
@@ -1,104 +0,0 @@
-body, html { margin:0; padding:0; font-family:Verdana; font-size:12px; height:100%; text-shadow:-1px -1px 1px #eee; overflow:hidden }
-a img { border:0 }
-var { font-family:Georgia; font-style:normal }
-code { background:#FFF0DB; padding:2px 5px; font-size:14px; font-weight:bold }
-
-label input, label select { width:100%; float:left }
-.dialog table { width:100% }
-.dialog td input { width:100% }
-
-#layout { width:100%; height:100% }
-#layout td { height:100% }
-#layout-left { width:270px; padding-right:10px; overflow:auto  }
-#layout-kit { width:45px; padding-right:5px }
-
-.list { overflow:auto }
-#control { width:100%; height:100%; }
-#workbench { height:100%; }
-#control ul.tabs a { padding:6px; font-size:10px }
-
-#toolkit { border:1px solid #aaa; height:100%; width:100%; border-radius:2px }
-#toolkit ul { padding:0; margin:0 }
-#toolkit a { 
-	display:block; 
-	width:25px; 
-	height:25px; 
-	margin:5px auto; 
-	padding:5px; 
-	background:#eee; 
-	border:1px solid #bbb;
-	border-radius:2px;
-	text-align:center;
-}
-#toolkit a:hover { border-color:#888; }
-#toolkit a:active img { position:relative; top:1px; left:1px }
-#toolkit a img { margin-top:4px; }
-
-
-#header { height:50px; position:relative } 
-#header ul { list-style:none; margin:0; padding:0; position:absolute; top:15px; left:15px }
-#header li { display:inline }
-#header a { padding:5px 10px; color:#ff7200 }
-
-#editor-container { border:1px solid #aaa; margin:0 -20px -15px -20px; overflow:hidden }
-#stage, #workarea { border:1px solid #aaa; margin:-7px -15px -7px -15px; }
-
-#editor { width:100%; height:100%; font-family:'Courier New', monospace; color:#ddd; background:#222; border:0; font-size:12px; line-height:17px }
-.CodeMirror-line-numbers { font-family:'Courier New', monospace; font-size:12px; padding:0 10px; padding-top:4px; background:#444; color:#aaa;
-	border-right:1px solid #666;
-}
-.CodeMirror-line-numbers div { margin:1px 0 0 0; text-shadow:none }
-#code iframe { background:#222 }
-
-#stage { overflow:hidden }
-#workarea { background:#eee; overflow:auto;  }
-#area { border:1px solid #aaa; background:#fff; width:550px; height:440px; }
-#cr-stage { z-index:100; overflow:visible !important }
-
-.toolbar { background:#fff url('../assets/images/toolbar.png') repeat-x bottom; padding:5px; margin:-12px -20px 0 -20px; border-bottom:1px solid #ccc }
-.toolbar a { padding:5px 10px; text-decoration:none }
-.toolbar a:hover { background:#ddd }
-.menu { background:#fff url('../assets/images/toolbar.png') repeat-x bottom; border-bottom:1px solid #aaa }
-
-.dialog { display:none }
-#console { margin:0 -2px -3px -2px;  border-top:1px solid #aaa; height:150px; font-size:10px }
-#console-text { display:block; overflow:auto; height:130px }
-#console .menu { padding:3px }
-#console small { display:block; padding:5px; border-bottom:1px solid #aaa; font-size:12px }
-#console small:nth-child(odd) { background:#ddd }
-
-ul.list { list-style:none; padding:0; margin:0 -20px 0 -20px }
-ul.list a { padding:5px; display:block; text-decoration:none }
-ul.list img { vertical-align:bottom }
-ul.list li:nth-child(odd) { background:#eee }
-ul.list li a b { font-size:10px; color:#222; margin-left:15px }
-
-#frame { width:100%; height:100%; border:0; margin:0; padding:0 }
-
-#bread { display:none }
-#currentscene { position:absolute; right:20px; top:10px; background:url('../assets/images/world.png') no-repeat; padding-left:20px; cursor:default }
-
-.context-menu { display:none; position:absolute; width:100px; border:1px solid #aaa; background:#f5f5f5; cursor:default }
-.context-menu ul { list-style:none; padding:0; margin:0 }
-.context-menu li a { padding:5px; display:block; text-decoration:none; color:#111 }
-.context-menu li:hover { background:#FFE4D9 }
-.context-menu li.hr { border-bottom:1px solid #aaa; width:80%; margin:5px auto }
-.context-menu li.hr:hover { background:transparent }
-
-#pr-dialog { overflow:auto; max-height:600px; width:400px }
-
-#sprite { border:1px solid #aaa }
-#options { width:100px; float:right; font-size:10px; border-left:1px solid #ccc; position:relative; height:100% }
-#options label { display:block; margin-top:5px; float:left; position:relative; left:15px }
-#options input { width:25px; float:left }
-#sections { clear:both; margin-top:5px }
-
-#sections input { width:30% }
-#label { width:100% !important }
-
-#grid { position:absolute; overflow:hidden }
-#grid div { position:absolute; border:0 solid #ccc }
-#inner { position:absolute }
-#over { position:absolute; border:1px solid #ff6000; display:block; z-index:1000 }
-
-.errorz { background:#FFCCB3 !important }
\ No newline at end of file
diff --git a/builder/assets/iframe.js b/builder/assets/iframe.js
deleted file mode 100755
index 0a95074d..00000000
--- a/builder/assets/iframe.js
+++ /dev/null
@@ -1,29 +0,0 @@
-function iframe(src, base, onload) {
-	if(frame) document.body.removeChild(frame);
-	
-	frame = document.createElement("iframe");
-	frame.src = "javascript:;";
-	
-	//hide the frame
-	frame.style.position = "absolute";
-	frame.style.left = "-999px";
-	frame.style.display = "none";
-	
-	document.body.appendChild(frame);
-	
-	//generate the HTML for the frame
-	var html, win = frame.contentWindow;
-	
-	$(frame).load(function(e) { onload.call(win, e); });
-	
-	html = ["",
-			"",
-			"",
-			"",
-			""];
-				
-	//add the HTML
-	win.document.open();
-	win.document.write(html.join(""));
-	win.document.close();
-}
\ No newline at end of file
diff --git a/builder/assets/images/bullet.png b/builder/assets/images/bullet.png
deleted file mode 100755
index fa63024e..00000000
Binary files a/builder/assets/images/bullet.png and /dev/null differ
diff --git a/builder/assets/images/cursor.png b/builder/assets/images/cursor.png
deleted file mode 100755
index 532f532d..00000000
Binary files a/builder/assets/images/cursor.png and /dev/null differ
diff --git a/builder/assets/images/film.png b/builder/assets/images/film.png
deleted file mode 100755
index b0ce7bb1..00000000
Binary files a/builder/assets/images/film.png and /dev/null differ
diff --git a/builder/assets/images/image.png b/builder/assets/images/image.png
deleted file mode 100755
index fc3c393c..00000000
Binary files a/builder/assets/images/image.png and /dev/null differ
diff --git a/builder/assets/images/move.png b/builder/assets/images/move.png
deleted file mode 100755
index 2e9bc42b..00000000
Binary files a/builder/assets/images/move.png and /dev/null differ
diff --git a/builder/assets/images/paintbrush.gif b/builder/assets/images/paintbrush.gif
deleted file mode 100755
index 989b36d4..00000000
Binary files a/builder/assets/images/paintbrush.gif and /dev/null differ
diff --git a/builder/assets/images/paintbrush.png b/builder/assets/images/paintbrush.png
deleted file mode 100755
index a3ecf877..00000000
Binary files a/builder/assets/images/paintbrush.png and /dev/null differ
diff --git a/builder/assets/images/plugin.png b/builder/assets/images/plugin.png
deleted file mode 100755
index 6187b15a..00000000
Binary files a/builder/assets/images/plugin.png and /dev/null differ
diff --git a/builder/assets/images/sound.png b/builder/assets/images/sound.png
deleted file mode 100755
index 6056d234..00000000
Binary files a/builder/assets/images/sound.png and /dev/null differ
diff --git a/builder/assets/images/tag.png b/builder/assets/images/tag.png
deleted file mode 100755
index 454a59f3..00000000
Binary files a/builder/assets/images/tag.png and /dev/null differ
diff --git a/builder/assets/images/text.png b/builder/assets/images/text.png
deleted file mode 100755
index dd65786a..00000000
Binary files a/builder/assets/images/text.png and /dev/null differ
diff --git a/builder/assets/images/timeline.png b/builder/assets/images/timeline.png
deleted file mode 100755
index a3fbddf8..00000000
Binary files a/builder/assets/images/timeline.png and /dev/null differ
diff --git a/builder/assets/images/toolbar.png b/builder/assets/images/toolbar.png
deleted file mode 100755
index f07ec770..00000000
Binary files a/builder/assets/images/toolbar.png and /dev/null differ
diff --git a/builder/assets/images/ui-bg_diagonals-medium_65_ffffff_40x40.png b/builder/assets/images/ui-bg_diagonals-medium_65_ffffff_40x40.png
deleted file mode 100755
index 566b14f3..00000000
Binary files a/builder/assets/images/ui-bg_diagonals-medium_65_ffffff_40x40.png and /dev/null differ
diff --git a/builder/assets/images/ui-bg_flat_0_aaaaaa_40x100.png b/builder/assets/images/ui-bg_flat_0_aaaaaa_40x100.png
deleted file mode 100755
index 5b5dab2a..00000000
Binary files a/builder/assets/images/ui-bg_flat_0_aaaaaa_40x100.png and /dev/null differ
diff --git a/builder/assets/images/ui-bg_flat_75_ffffff_40x100.png b/builder/assets/images/ui-bg_flat_75_ffffff_40x100.png
deleted file mode 100755
index ac8b229a..00000000
Binary files a/builder/assets/images/ui-bg_flat_75_ffffff_40x100.png and /dev/null differ
diff --git a/builder/assets/images/ui-bg_glass_55_fbf9ee_1x400.png b/builder/assets/images/ui-bg_glass_55_fbf9ee_1x400.png
deleted file mode 100755
index ad3d6346..00000000
Binary files a/builder/assets/images/ui-bg_glass_55_fbf9ee_1x400.png and /dev/null differ
diff --git a/builder/assets/images/ui-bg_glass_95_fef1ec_1x400.png b/builder/assets/images/ui-bg_glass_95_fef1ec_1x400.png
deleted file mode 100755
index 4443fdc1..00000000
Binary files a/builder/assets/images/ui-bg_glass_95_fef1ec_1x400.png and /dev/null differ
diff --git a/builder/assets/images/ui-bg_highlight-hard_75_e6e6e6_1x100.png b/builder/assets/images/ui-bg_highlight-hard_75_e6e6e6_1x100.png
deleted file mode 100755
index 31503e62..00000000
Binary files a/builder/assets/images/ui-bg_highlight-hard_75_e6e6e6_1x100.png and /dev/null differ
diff --git a/builder/assets/images/ui-bg_highlight-soft_75_cccccc_1x100.png b/builder/assets/images/ui-bg_highlight-soft_75_cccccc_1x100.png
deleted file mode 100755
index 7c9fa6c6..00000000
Binary files a/builder/assets/images/ui-bg_highlight-soft_75_cccccc_1x100.png and /dev/null differ
diff --git a/builder/assets/images/ui-bg_inset-hard_75_dadada_1x100.png b/builder/assets/images/ui-bg_inset-hard_75_dadada_1x100.png
deleted file mode 100755
index 9716cb37..00000000
Binary files a/builder/assets/images/ui-bg_inset-hard_75_dadada_1x100.png and /dev/null differ
diff --git a/builder/assets/images/ui-icons_222222_256x240.png b/builder/assets/images/ui-icons_222222_256x240.png
deleted file mode 100755
index b273ff11..00000000
Binary files a/builder/assets/images/ui-icons_222222_256x240.png and /dev/null differ
diff --git a/builder/assets/images/ui-icons_2e83ff_256x240.png b/builder/assets/images/ui-icons_2e83ff_256x240.png
deleted file mode 100755
index 09d1cdc8..00000000
Binary files a/builder/assets/images/ui-icons_2e83ff_256x240.png and /dev/null differ
diff --git a/builder/assets/images/ui-icons_454545_256x240.png b/builder/assets/images/ui-icons_454545_256x240.png
deleted file mode 100755
index 59bd45b9..00000000
Binary files a/builder/assets/images/ui-icons_454545_256x240.png and /dev/null differ
diff --git a/builder/assets/images/ui-icons_888888_256x240.png b/builder/assets/images/ui-icons_888888_256x240.png
deleted file mode 100755
index 6d02426c..00000000
Binary files a/builder/assets/images/ui-icons_888888_256x240.png and /dev/null differ
diff --git a/builder/assets/images/ui-icons_cd0a0a_256x240.png b/builder/assets/images/ui-icons_cd0a0a_256x240.png
deleted file mode 100755
index 2ab019b7..00000000
Binary files a/builder/assets/images/ui-icons_cd0a0a_256x240.png and /dev/null differ
diff --git a/builder/assets/images/vector.png b/builder/assets/images/vector.png
deleted file mode 100755
index a1291c2d..00000000
Binary files a/builder/assets/images/vector.png and /dev/null differ
diff --git a/builder/assets/images/world.png b/builder/assets/images/world.png
deleted file mode 100755
index 68f21d30..00000000
Binary files a/builder/assets/images/world.png and /dev/null differ
diff --git a/builder/assets/jslint.js b/builder/assets/jslint.js
deleted file mode 100755
index 1457bbe7..00000000
--- a/builder/assets/jslint.js
+++ /dev/null
@@ -1,703 +0,0 @@
-// (C)2010 Douglas Crockford
-// www.JSLint.com
-
-if(!this.JSON){this.JSON={};}
-(function(){"use strict";function f(n){return n<10?'0'+n:n;}
-if(typeof Date.prototype.toJSON!=='function'){Date.prototype.toJSON=function(key){return isFinite(this.valueOf())?this.getUTCFullYear()+'-'+
-f(this.getUTCMonth()+1)+'-'+
-f(this.getUTCDate())+'T'+
-f(this.getUTCHours())+':'+
-f(this.getUTCMinutes())+':'+
-f(this.getUTCSeconds())+'Z':null;};String.prototype.toJSON=Number.prototype.toJSON=Boolean.prototype.toJSON=function(key){return this.valueOf();};}
-var cx=/[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,escapable=/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,gap,indent,meta={'\b':'\\b','\t':'\\t','\n':'\\n','\f':'\\f','\r':'\\r','"':'\\"','\\':'\\\\'},rep;function quote(string){escapable.lastIndex=0;return escapable.test(string)?'"'+string.replace(escapable,function(a){var c=meta[a];return typeof c==='string'?c:'\\u'+('0000'+a.charCodeAt(0).toString(16)).slice(-4);})+'"':'"'+string+'"';}
-function str(key,holder){var i,k,v,length,mind=gap,partial,value=holder[key];if(value&&typeof value==='object'&&typeof value.toJSON==='function'){value=value.toJSON(key);}
-if(typeof rep==='function'){value=rep.call(holder,key,value);}
-switch(typeof value){case'string':return quote(value);case'number':return isFinite(value)?String(value):'null';case'boolean':case'null':return String(value);case'object':if(!value){return'null';}
-gap+=indent;partial=[];if(Object.prototype.toString.apply(value)==='[object Array]'){length=value.length;for(i=0;i':true,'>=':true,'+':true,'-':true,'*':true,'/':true,'%':true},banned={'arguments':true,callee:true,caller:true,constructor:true,'eval':true,prototype:true,stack:true,unwatch:true,valueOf:true,watch:true},boolOptions={adsafe:true,bitwise:true,browser:true,cap:true,css:true,debug:true,devel:true,es5:true,evil:true,forin:true,fragment:true,newcap:true,nomen:true,on:true,onevar:true,passfail:true,plusplus:true,regexp:true,rhino:true,undef:true,safe:true,windows:true,strict:true,sub:true,white:true,widget:true},browser={addEventListener:false,blur:false,clearInterval:false,clearTimeout:false,close:false,closed:false,defaultStatus:false,document:false,event:false,focus:false,frames:false,getComputedStyle:false,history:false,Image:false,length:false,location:false,moveBy:false,moveTo:false,name:false,navigator:false,onbeforeunload:true,onblur:true,onerror:true,onfocus:true,onload:true,onresize:true,onunload:true,open:false,opener:false,Option:false,parent:false,print:false,removeEventListener:false,resizeBy:false,resizeTo:false,screen:false,scroll:false,scrollBy:false,scrollTo:false,setInterval:false,setTimeout:false,status:false,top:false,XMLHttpRequest:false},cssAttributeData,cssAny,cssColorData={"aliceblue":true,"antiquewhite":true,"aqua":true,"aquamarine":true,"azure":true,"beige":true,"bisque":true,"black":true,"blanchedalmond":true,"blue":true,"blueviolet":true,"brown":true,"burlywood":true,"cadetblue":true,"chartreuse":true,"chocolate":true,"coral":true,"cornflowerblue":true,"cornsilk":true,"crimson":true,"cyan":true,"darkblue":true,"darkcyan":true,"darkgoldenrod":true,"darkgray":true,"darkgreen":true,"darkkhaki":true,"darkmagenta":true,"darkolivegreen":true,"darkorange":true,"darkorchid":true,"darkred":true,"darksalmon":true,"darkseagreen":true,"darkslateblue":true,"darkslategray":true,"darkturquoise":true,"darkviolet":true,"deeppink":true,"deepskyblue":true,"dimgray":true,"dodgerblue":true,"firebrick":true,"floralwhite":true,"forestgreen":true,"fuchsia":true,"gainsboro":true,"ghostwhite":true,"gold":true,"goldenrod":true,"gray":true,"green":true,"greenyellow":true,"honeydew":true,"hotpink":true,"indianred":true,"indigo":true,"ivory":true,"khaki":true,"lavender":true,"lavenderblush":true,"lawngreen":true,"lemonchiffon":true,"lightblue":true,"lightcoral":true,"lightcyan":true,"lightgoldenrodyellow":true,"lightgreen":true,"lightpink":true,"lightsalmon":true,"lightseagreen":true,"lightskyblue":true,"lightslategray":true,"lightsteelblue":true,"lightyellow":true,"lime":true,"limegreen":true,"linen":true,"magenta":true,"maroon":true,"mediumaquamarine":true,"mediumblue":true,"mediumorchid":true,"mediumpurple":true,"mediumseagreen":true,"mediumslateblue":true,"mediumspringgreen":true,"mediumturquoise":true,"mediumvioletred":true,"midnightblue":true,"mintcream":true,"mistyrose":true,"moccasin":true,"navajowhite":true,"navy":true,"oldlace":true,"olive":true,"olivedrab":true,"orange":true,"orangered":true,"orchid":true,"palegoldenrod":true,"palegreen":true,"paleturquoise":true,"palevioletred":true,"papayawhip":true,"peachpuff":true,"peru":true,"pink":true,"plum":true,"powderblue":true,"purple":true,"red":true,"rosybrown":true,"royalblue":true,"saddlebrown":true,"salmon":true,"sandybrown":true,"seagreen":true,"seashell":true,"sienna":true,"silver":true,"skyblue":true,"slateblue":true,"slategray":true,"snow":true,"springgreen":true,"steelblue":true,"tan":true,"teal":true,"thistle":true,"tomato":true,"turquoise":true,"violet":true,"wheat":true,"white":true,"whitesmoke":true,"yellow":true,"yellowgreen":true,"activeborder":true,"activecaption":true,"appworkspace":true,"background":true,"buttonface":true,"buttonhighlight":true,"buttonshadow":true,"buttontext":true,"captiontext":true,"graytext":true,"highlight":true,"highlighttext":true,"inactiveborder":true,"inactivecaption":true,"inactivecaptiontext":true,"infobackground":true,"infotext":true,"menu":true,"menutext":true,"scrollbar":true,"threeddarkshadow":true,"threedface":true,"threedhighlight":true,"threedlightshadow":true,"threedshadow":true,"window":true,"windowframe":true,"windowtext":true},cssBorderStyle,cssBreak,cssLengthData={'%':true,'cm':true,'em':true,'ex':true,'in':true,'mm':true,'pc':true,'pt':true,'px':true},cssMedia,cssOverflow,devel={alert:false,confirm:false,console:false,Debug:false,opera:false,prompt:false},escapes={'\b':'\\b','\t':'\\t','\n':'\\n','\f':'\\f','\r':'\\r','"':'\\"','/':'\\/','\\':'\\\\'},funct,functionicity=['closure','exception','global','label','outer','unused','var'],functions,global,htmltag={a:{},abbr:{},acronym:{},address:{},applet:{},area:{empty:true,parent:' map '},article:{},aside:{},audio:{},b:{},base:{empty:true,parent:' head '},bdo:{},big:{},blockquote:{},body:{parent:' html noframes '},br:{empty:true},button:{},canvas:{parent:' body p div th td '},caption:{parent:' table '},center:{},cite:{},code:{},col:{empty:true,parent:' table colgroup '},colgroup:{parent:' table '},command:{parent:' menu '},datalist:{},dd:{parent:' dl '},del:{},details:{},dialog:{},dfn:{},dir:{},div:{},dl:{},dt:{parent:' dl '},em:{},embed:{},fieldset:{},figure:{},font:{},footer:{},form:{},frame:{empty:true,parent:' frameset '},frameset:{parent:' html frameset '},h1:{},h2:{},h3:{},h4:{},h5:{},h6:{},head:{parent:' html '},header:{},hgroup:{},hr:{empty:true},'hta:application':{empty:true,parent:' head '},html:{parent:'*'},i:{},iframe:{},img:{empty:true},input:{empty:true},ins:{},kbd:{},keygen:{},label:{},legend:{parent:' details fieldset figure '},li:{parent:' dir menu ol ul '},link:{empty:true,parent:' head '},map:{},mark:{},menu:{},meta:{empty:true,parent:' head noframes noscript '},meter:{},nav:{},noframes:{parent:' html body '},noscript:{parent:' body head noframes '},object:{},ol:{},optgroup:{parent:' select '},option:{parent:' optgroup select '},output:{},p:{},param:{empty:true,parent:' applet object '},pre:{},progress:{},q:{},rp:{},rt:{},ruby:{},samp:{},script:{empty:true,parent:' body div frame head iframe p pre span '},section:{},select:{},small:{},span:{},source:{},strong:{},style:{parent:' head ',empty:true},sub:{},sup:{},table:{},tbody:{parent:' table '},td:{parent:' tr '},textarea:{},tfoot:{parent:' table '},th:{parent:' tr '},thead:{parent:' table '},time:{},title:{parent:' head '},tr:{parent:' table tbody thead tfoot '},tt:{},u:{},ul:{},'var':{},video:{}},ids,implied,inblock,jsonmode,labelled={'do':true,'for':true,'switch':true,'while':true},lines,lookahead,member,membersOnly,nexttoken,option,postscript={'(end)':true,'(error)':true,'>?>?=?|<([\/=!]|\!(\[|--)?|<=?)?|\^=?|\!=?=?|[a-zA-Z_$][a-zA-Z0-9_$]*|[0-9]+([xX][0-9a-fA-F]+|\.[0-9]*)?([eE][+\-]?[0-9]+)?)/,hx=/^\s*(['"=>\/&#]|<(?:\/|\!(?:--)?)?|[a-zA-Z][a-zA-Z0-9_\-:]*|[0-9]+|--)/,nx=/[\u0000-\u001f&<"\/\\\u007f-\u009f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/,nxg=/[\u0000-\u001f&<"\/\\\u007f-\u009f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,ox=/[>&]|<[\/!]?|--/,lx=/\*\/|\/\*/,ix=/^([a-zA-Z_$][a-zA-Z0-9_$]*)$/,jx=/^(?:javascript|jscript|ecmascript|vbscript|mocha|livescript)\s*:/i,ux=/&|\+|\u00AD|\.\.|\/\*|%[^;]|base64|url|expression|data|mailto/i,sx=/^\s*([{:#%.=,>+\[\]@()"';]|\*=?|\$=|\|=|\^=|~=|[a-zA-Z_][a-zA-Z0-9_\-]*|[0-9]+|<\/|\/\*)/,ssx=/^\s*([@#!"'};:\-%.=,+\[\]()*_]|[a-zA-Z][a-zA-Z0-9._\-]*|\/\*?|\d+(?:\.\d+)?|<\/)/,qx=/[^a-zA-Z0-9+\-_\/ ]/,dx=/[\[\]\/\\"'*<>.&:(){}+=#]/,rx={outer:hx,html:hx,style:sx,styleproperty:ssx};function F(){}
-function is_own(object,name){return Object.prototype.hasOwnProperty.call(object,name);}
-if(typeof Array.isArray!=='function'){Array.isArray=function(o){return Object.prototype.toString.apply(o)==='[object Array]';};}
-if(typeof Object.create!=='function'){Object.create=function(o){F.prototype=o;return new F();};}
-if(typeof Object.keys!=='function'){Object.keys=function(o){var a=[],k;for(k in o){if(is_own(o,k)){a.push(k);}}
-return a;};}
-if(typeof String.prototype.entityify!=='function'){String.prototype.entityify=function(){return this.replace(/&/g,'&').replace(//g,'>');};}
-if(typeof String.prototype.isAlpha!=='function'){String.prototype.isAlpha=function(){return(this>='a'&&this<='z\uffff')||(this>='A'&&this<='Z\uffff');};}
-if(typeof String.prototype.isDigit!=='function'){String.prototype.isDigit=function(){return(this>='0'&&this<='9');};}
-if(typeof String.prototype.supplant!=='function'){String.prototype.supplant=function(o){return this.replace(/\{([^{}]*)\}/g,function(a,b){var r=o[b];return typeof r==='string'||typeof r==='number'?r:a;});};}
-if(typeof String.prototype.name!=='function'){String.prototype.name=function(){if(ix.test(this)){return this;}
-if(nx.test(this)){return'"'+this.replace(nxg,function(a){var c=escapes[a];if(c){return c;}
-return'\\u'+('0000'+a.charCodeAt().toString(16)).slice(-4);})+'"';}
-return'"'+this+'"';};}
-function combine(t,o){var n;for(n in o){if(is_own(o,n)){t[n]=o[n];}}}
-function assume(){if(!option.safe){if(option.rhino){combine(predefined,rhino);}
-if(option.devel){combine(predefined,devel);}
-if(option.browser){combine(predefined,browser);}
-if(option.windows){combine(predefined,windows);}
-if(option.widget){combine(predefined,widget);}}}
-function quit(m,l,ch){throw{name:'JSLintError',line:l,character:ch,message:m+" ("+Math.floor((l/lines.length)*100)+"% scanned)."};}
-function warning(m,t,a,b,c,d){var ch,l,w;t=t||nexttoken;if(t.id==='(end)'){t=token;}
-l=t.line||0;ch=t.from||0;w={id:'(error)',raw:m,evidence:lines[l-1]||'',line:l,character:ch,a:a,b:b,c:c,d:d};w.reason=m.supplant(w);JSLINT.errors.push(w);if(option.passfail){quit('Stopping. ',l,ch);}
-warnings+=1;if(warnings>=option.maxerr){quit("Too many errors.",l,ch);}
-return w;}
-function warningAt(m,l,ch,a,b,c,d){return warning(m,{line:l,from:ch},a,b,c,d);}
-function error(m,t,a,b,c,d){var w=warning(m,t,a,b,c,d);quit("Stopping, unable to continue.",w.line,w.character);}
-function errorAt(m,l,ch,a,b,c,d){return error(m,{line:l,from:ch},a,b,c,d);}
-var lex=(function lex(){var character,from,line,s;function nextLine(){var at;if(line>=lines.length){return false;}
-character=1;s=lines[line];line+=1;at=s.search(/ \t/);if(at>=0){warningAt("Mixed spaces and tabs.",line,at+1);}
-s=s.replace(/\t/g,tab);at=s.search(cx);if(at>=0){warningAt("Unsafe character.",line,at);}
-if(option.maxlen&&option.maxlen=0)||i==='return');return t;}
-return{init:function(source){if(typeof source==='string'){lines=source.replace(/\r\n/g,'\n').replace(/\r/g,'\n').split('\n');}else{lines=source;}
-line=0;nextLine();from=1;},range:function(begin,end){var c,value='';from=character;if(s.charAt(0)!==begin){errorAt("Expected '{a}' and instead saw '{b}'.",line,character,begin,s.charAt(0));}
-for(;;){s=s.slice(1);character+=1;c=s.charAt(0);switch(c){case'':errorAt("Missing '{a}'.",line,character,c);break;case end:s=s.slice(1);character+=1;return it('(range)',value);case xquote:case'\\':warningAt("Unexpected '{a}'.",line,character,c);break;}
-value+=c;}},token:function(){var b,c,captures,d,depth,high,i,l,low,q,t;function match(x){var r=x.exec(s),r1;if(r){l=r[0].length;r1=r[1];c=r1.charAt(0);s=s.substr(l);from=character+l-r1.length;character+=l;return r1;}}
-function string(x){var c,j,r='';if(jsonmode&&x!=='"'){warningAt("Strings must use doublequote.",line,character);}
-if(xquote===x||(xmode==='scriptstring'&&!xquote)){return it('(punctuator)',x);}
-function esc(n){var i=parseInt(s.substr(j+1,n),16);j+=n;if(i>=32&&i<=126&&i!==34&&i!==92&&i!==39){warningAt("Unnecessary escapement.",line,character);}
-character+=n;c=String.fromCharCode(i);}
-j=0;for(;;){while(j>=s.length){j=0;if(xmode!=='html'||!nextLine()){errorAt("Unclosed string.",line,from);}}
-c=s.charAt(j);if(c===x){character+=1;s=s.substr(j+1);return it('(string)',r,x);}
-if(c<' '){if(c==='\n'||c==='\r'){break;}
-warningAt("Control character in string: {a}.",line,character+j,s.slice(0,j));}else if(c===xquote){warningAt("Bad HTML string",line,character+j);}else if(c==='<'){if(option.safe&&xmode==='html'){warningAt("ADsafe string violation.",line,character+j);}else if(s.charAt(j+1)==='/'&&(xmode||option.safe)){warningAt("Expected '<\\/' and instead saw '0){character+=1;s=s.slice(i);break;}else{if(!nextLine()){return it('(end)','');}}}
-t=match(rx[xmode]||tx);if(!t){t='';c='';while(s&&s<'!'){s=s.substr(1);}
-if(s){if(xmode==='html'){return it('(error)',s.charAt(0));}else{errorAt("Unexpected '{a}'.",line,character,s.substr(0,1));}}}else{if(c.isAlpha()||c==='_'||c==='$'){return it('(identifier)',t);}
-if(c.isDigit()){if(xmode!=='style'&&!isFinite(Number(t))){warningAt("Bad number '{a}'.",line,character,t);}
-if(xmode!=='style'&&xmode!=='styleproperty'&&s.substr(0,1).isAlpha()){warningAt("Missing space after '{a}'.",line,character,t);}
-if(c==='0'){d=t.substr(1,1);if(d.isDigit()){if(token.id!=='.'&&xmode!=='styleproperty'){warningAt("Don't use extra leading zeros '{a}'.",line,character,t);}}else if(jsonmode&&(d==='x'||d==='X')){warningAt("Avoid 0x-. '{a}'.",line,character,t);}}
-if(t.substr(t.length-1)==='.'){warningAt("A trailing decimal point can be confused with a dot '{a}'.",line,character,t);}
-return it('(number)',t);}
-switch(t){case'"':case"'":return string(t);case'//':if(src||(xmode&&xmode!=='script')){warningAt("Unexpected comment.",line,character);}else if(xmode==='script'&&/<\s*\//i.test(s)){warningAt("Unexpected <\/ in comment.",line,character);}else if((option.safe||xmode==='script')&&ax.test(s)){warningAt("Dangerous comment.",line,character);}
-s='';token.comment=true;break;case'/*':if(src||(xmode&&xmode!=='script'&&xmode!=='style'&&xmode!=='styleproperty')){warningAt("Unexpected comment.",line,character);}
-if(option.safe&&ax.test(s)){warningAt("ADsafe comment violation.",line,character);}
-for(;;){i=s.search(lx);if(i>=0){break;}
-if(!nextLine()){errorAt("Unclosed comment.",line,character);}else{if(option.safe&&ax.test(s)){warningAt("ADsafe comment violation.",line,character);}}}
-character+=i+2;if(s.substr(i,1)==='/'){errorAt("Nested comment.",line,character);}
-s=s.substr(i+2);token.comment=true;break;case'/*members':case'/*member':case'/*jslint':case'/*global':case'*/':return{value:t,type:'special',line:line,thru:character,from:from};case'':break;case'/':if(token.id==='/='){errorAt("A regular expression literal can be confused with '/='.",line,from);}
-if(prereg){depth=0;captures=0;l=0;for(;;){b=true;c=s.charAt(l);l+=1;switch(c){case'':errorAt("Unclosed regular expression.",line,from);return;case'/':if(depth>0){warningAt("Unescaped '{a}'.",line,from+l,'/');}
-c=s.substr(0,l-1);q={g:true,i:true,m:true};while(q[s.charAt(l)]===true){q[s.charAt(l)]=false;l+=1;}
-character+=l;s=s.substr(l);q=s.charAt(0);if(q==='/'||q==='*'){errorAt("Confusing regular expression.",line,from);}
-return it('(regexp)',c);case'\\':c=s.charAt(l);if(c<' '){warningAt("Unexpected control character in regular expression.",line,from+l);}else if(c==='<'){warningAt("Unexpected escaped character '{a}' in regular expression.",line,from+l,c);}
-l+=1;break;case'(':depth+=1;b=false;if(s.charAt(l)==='?'){l+=1;switch(s.charAt(l)){case':':case'=':case'!':l+=1;break;default:warningAt("Expected '{a}' and instead saw '{b}'.",line,from+l,':',s.charAt(l));}}else{captures+=1;}
-break;case'|':b=false;break;case')':if(depth===0){warningAt("Unescaped '{a}'.",line,from+l,')');}else{depth-=1;}
-break;case' ':q=1;while(s.charAt(l)===' '){l+=1;q+=1;}
-if(q>1){warningAt("Spaces are hard to count. Use {{a}}.",line,from+l,q);}
-break;case'[':c=s.charAt(l);if(c==='^'){l+=1;if(option.regexp){warningAt("Insecure '{a}'.",line,from+l,c);}else if(s.charAt(l)===']'){errorAt("Unescaped '{a}'.",line,from+l,'^');}}
-q=false;if(c===']'){warningAt("Empty class.",line,from+l-1);q=true;}
-klass:do{c=s.charAt(l);l+=1;switch(c){case'[':case'^':warningAt("Unescaped '{a}'.",line,from+l,c);q=true;break;case'-':if(q){q=false;}else{warningAt("Unescaped '{a}'.",line,from+l,'-');q=true;}
-break;case']':if(!q){warningAt("Unescaped '{a}'.",line,from+l-1,'-');}
-break klass;case'\\':c=s.charAt(l);if(c<' '){warningAt("Unexpected control character in regular expression.",line,from+l);}else if(c==='<'){warningAt("Unexpected escaped character '{a}' in regular expression.",line,from+l,c);}
-l+=1;q=true;break;case'/':warningAt("Unescaped '{a}'.",line,from+l-1,'/');q=true;break;case'<':if(xmode==='script'){c=s.charAt(l);if(c==='!'||c==='/'){warningAt("HTML confusion in regular expression '<{a}'.",line,from+l,c);}}
-q=true;break;default:q=true;}}while(c);break;case'.':if(option.regexp){warningAt("Insecure '{a}'.",line,from+l,c);}
-break;case']':case'?':case'{':case'}':case'+':case'*':warningAt("Unescaped '{a}'.",line,from+l,c);break;case'<':if(xmode==='script'){c=s.charAt(l);if(c==='!'||c==='/'){warningAt("HTML confusion in regular expression '<{a}'.",line,from+l,c);}}
-break;}
-if(b){switch(s.charAt(l)){case'?':case'+':case'*':l+=1;if(s.charAt(l)==='?'){l+=1;}
-break;case'{':l+=1;c=s.charAt(l);if(c<'0'||c>'9'){warningAt("Expected a number and instead saw '{a}'.",line,from+l,c);}
-l+=1;low=+c;for(;;){c=s.charAt(l);if(c<'0'||c>'9'){break;}
-l+=1;low=+c+(low*10);}
-high=low;if(c===','){l+=1;high=Infinity;c=s.charAt(l);if(c>='0'&&c<='9'){l+=1;high=+c;for(;;){c=s.charAt(l);if(c<'0'||c>'9'){break;}
-l+=1;high=+c+(high*10);}}}
-if(s.charAt(l)!=='}'){warningAt("Expected '{a}' and instead saw '{b}'.",line,from+l,'}',c);}else{l+=1;}
-if(s.charAt(l)==='?'){l+=1;}
-if(low>high){warningAt("'{a}' should not be greater than '{b}'.",line,from+l,low,high);}
-break;}}}
-c=s.substr(0,l-1);character+=l;s=s.substr(l);return it('(regexp)',c);}
-return it('(punctuator)',t);case'.",line,character);}
-character+=3;s=s.slice(i+3);break;case'#':if(xmode==='html'||xmode==='styleproperty'){for(;;){c=s.charAt(0);if((c<'0'||c>'9')&&(c<'a'||c>'f')&&(c<'A'||c>'F')){break;}
-character+=1;s=s.substr(1);t+=c;}
-if(t.length!==4&&t.length!==7){warningAt("Bad hex color '{a}'.",line,from+l,t);}
-return it('(color)',t);}
-return it('(punctuator)',t);default:if(xmode==='outer'&&c==='&'){character+=1;s=s.substr(1);for(;;){c=s.charAt(0);character+=1;s=s.substr(1);if(c===';'){break;}
-if(!((c>='0'&&c<='9')||(c>='a'&&c<='z')||c==='#')){errorAt("Bad entity",line,from+l,character);}}
-break;}
-return it('(punctuator)',t);}}}}};}());function addlabel(t,type){if(option.safe&&funct['(global)']&&typeof predefined[t]!=='boolean'){warning('ADsafe global: '+t+'.',token);}else if(t==='hasOwnProperty'){warning("'hasOwnProperty' is a really bad name.");}
-if(is_own(funct,t)&&!funct['(global)']){warning(funct[t]===true?"'{a}' was used before it was defined.":"'{a}' is already defined.",nexttoken,t);}
-funct[t]=type;if(funct['(global)']){global[t]=funct;if(is_own(implied,t)){warning("'{a}' was used before it was defined.",nexttoken,t);delete implied[t];}}else{scope[t]=funct;}}
-function doOption(){var b,obj,filter,o=nexttoken.value,t,v;switch(o){case'*/':error("Unbegun comment.");break;case'/*members':case'/*member':o='/*members';if(!membersOnly){membersOnly={};}
-obj=membersOnly;break;case'/*jslint':if(option.safe){warning("ADsafe restriction.");}
-obj=option;filter=boolOptions;break;case'/*global':if(option.safe){warning("ADsafe restriction.");}
-obj=predefined;break;default:error("What?");}
-t=lex.token();loop:for(;;){for(;;){if(t.type==='special'&&t.value==='*/'){break loop;}
-if(t.id!==','){break;}
-t=lex.token();}
-if(t.type!=='(string)'&&t.type!=='(identifier)'&&o!=='/*members'){error("Bad option.",t);}
-v=lex.token();if(v.id===':'){v=lex.token();if(obj===membersOnly){error("Expected '{a}' and instead saw '{b}'.",t,'*/',':');}
-if(t.value==='indent'&&o==='/*jslint'){b=+v.value;if(typeof b!=='number'||!isFinite(b)||b<=0||Math.floor(b)!==b){error("Expected a small integer and instead saw '{a}'.",v,v.value);}
-obj.white=true;obj.indent=b;}else if(t.value==='maxerr'&&o==='/*jslint'){b=+v.value;if(typeof b!=='number'||!isFinite(b)||b<=0||Math.floor(b)!==b){error("Expected a small integer and instead saw '{a}'.",v,v.value);}
-obj.maxerr=b;}else if(t.value==='maxlen'&&o==='/*jslint'){b=+v.value;if(typeof b!=='number'||!isFinite(b)||b<=0||Math.floor(b)!==b){error("Expected a small integer and instead saw '{a}'.",v,v.value);}
-obj.maxlen=b;}else if(v.value==='true'){obj[t.value]=true;}else if(v.value==='false'){obj[t.value]=false;}else{error("Bad option value.",v);}
-t=lex.token();}else{if(o==='/*jslint'){error("Missing option value.",t);}
-obj[t.value]=false;t=v;}}
-if(filter){assume();}}
-function peek(p){var i=p||0,j=0,t;while(j<=i){t=lookahead[j];if(!t){t=lookahead[j]=lex.token();}
-j+=1;}
-return t;}
-function advance(id,t){switch(token.id){case'(number)':if(nexttoken.id==='.'){warning("A dot following a number can be confused with a decimal point.",token);}
-break;case'-':if(nexttoken.id==='-'||nexttoken.id==='--'){warning("Confusing minusses.");}
-break;case'+':if(nexttoken.id==='+'||nexttoken.id==='++'){warning("Confusing plusses.");}
-break;}
-if(token.type==='(string)'||token.identifier){anonname=token.value;}
-if(id&&nexttoken.id!==id){if(t){if(nexttoken.id==='(end)'){warning("Unmatched '{a}'.",t,t.id);}else{warning("Expected '{a}' to match '{b}' from line {c} and instead saw '{d}'.",nexttoken,id,t.id,t.line,nexttoken.value);}}else if(nexttoken.type!=='(identifier)'||nexttoken.value!==id){warning("Expected '{a}' and instead saw '{b}'.",nexttoken,id,nexttoken.value);}}
-prevtoken=token;token=nexttoken;for(;;){nexttoken=lookahead.shift()||lex.token();if(nexttoken.type!=='special'){break;}
-doOption();}}
-function one_space_only(left,right){left=left||token;right=right||nexttoken;if(right.id!=='(end)'&&(left.line!==right.line||(option.white&&left.thru+1!==right.from))){warning("Expected exactly one space between '{a}' and '{b}'.",right,left.value,right.value);}}
-function one_space(left,right){left=left||token;right=right||nexttoken;if(right.id!=='(end)'&&option.white&&(token.line!==right.line||token.thru+1!==right.from)){warning("Expected exactly one space between '{a}' and '{b}'.",right,token.value,right.value);}}
-function no_space(left,right){left=left||token;right=right||nexttoken;if((option.white||xmode==='styleproperty'||xmode==='style')&&left.thru!==right.from&&left.line===right.line){warning("Unexpected space between '{a}' and '{b}'.",right,left.value,right.value);}}
-function no_space_only(left,right){left=left||token;right=right||nexttoken;if(right.id!=='(end)'&&(left.line!==right.line||(option.white&&left.thru!==right.from))){warning("Unexpected space between '{a}' and '{b}'.",right,left.value,right.value);}}
-function spaces(left,right){if(option.white){left=left||token;right=right||nexttoken;if(left.thru===right.from&&left.line===right.line){warning("Missing space between '{a}' and '{b}'.",right,left.value,right.value);}}}
-function comma(){no_space_only();advance(',');spaces();}
-function semicolon(){no_space_only();advance(';');switch(nexttoken.id){case';':case'"':case'\'':case')':break;default:spaces();}}
-function use_strict(){if(nexttoken.value==='use strict'){if(strict_mode){warning("Unnecessary \"use strict\".");}
-advance();semicolon();strict_mode=true;option.newcap=true;option.undef=true;return true;}else{return false;}}
-function expression(rbp,initial){var left;if(nexttoken.id==='(end)'){error("Unexpected early end of program.",token);}
-advance();if(option.safe&&typeof predefined[token.value]==='boolean'&&(nexttoken.id!=='('&&nexttoken.id!=='.')){warning('ADsafe violation.',token);}
-if(initial){anonname='anonymous';funct['(verb)']=token.value;}
-if(initial===true&&token.fud){left=token.fud();}else{if(token.nud){left=token.nud();}else{if(nexttoken.type==='(number)'&&token.id==='.'){warning("A leading decimal point can be confused with a dot: '.{a}'.",token,nexttoken.value);advance();return token;}else{error("Expected an identifier and instead saw '{a}'.",token,token.id);}}
-while(rbp='a'&&c<='z')||(c>='A'&&c<='Z')){x.identifier=x.reserved=true;}
-return x;}
-function prefix(s,f){var x=symbol(s,150);reserveName(x);x.nud=(typeof f==='function')?f:function(){if(s==='typeof'){one_space();}else{no_space_only();}
-this.first=expression(150);this.arity='prefix';if(this.id==='++'||this.id==='--'){if(option.plusplus){warning("Unexpected use of '{a}'.",this,this.id);}else if((!this.first.identifier||this.first.reserved)&&this.first.id!=='.'&&this.first.id!=='['){warning("Bad operand.",this);}}
-return this;};return x;}
-function type(s,f){var x=delim(s);x.type=s;x.nud=f;return x;}
-function reserve(s,f){var x=type(s,f);x.identifier=x.reserved=true;return x;}
-function reservevar(s,v){return reserve(s,function(){if(typeof v==='function'){v(this);}
-return this;});}
-function infix(s,p,f,w){var x=symbol(s,p);reserveName(x);x.led=function(left){this.arity='infix';if(!w){spaces(prevtoken,token);spaces();}
-if(typeof f==='function'){return f(left,this);}else{this.first=left;this.second=expression(p);return this;}};return x;}
-function relation(s,eqeq){var x=infix(s,100,function(left,that){var right=expression(100);if(eqeq){warning("Expected '{a}' and instead saw '{b}'.",that,eqeq,that.id);}else if(left.id==='NaN'||right.id==='NaN'){warning("Use the isNaN function to compare with NaN.",that);}
-if(left.id==='!'){warning("Confusing use of '{a}'.",left,'!');}
-if(right.id==='!'){warning("Confusing use of '{a}'.",left,'!');}
-that.first=left;that.second=right;return that;});return x;}
-function assignop(s,bit){var x=infix(s,20,function(left,that){var l;if(option.bitwise&&bit){warning("Unexpected use of '{a}'.",that,that.id);}
-that.first=left;if(predefined[left.value]===false&&scope[left.value]['(global)']===true){warning("Read only.",left);}else if(left['function']){warning("'{a}' is a function.",left,left.value);}
-if(option.safe){l=left;do{if(typeof predefined[l.value]==='boolean'){warning('ADsafe violation.',l);}
-l=l.first;}while(l);}
-if(left){if(left.id==='.'||left.id==='['){if(!left.first||left.first.value==='arguments'){warning('Bad assignment.',that);}
-that.second=expression(19);return that;}else if(left.identifier&&!left.reserved){if(funct[left.value]==='exception'){warning("Do not assign to the exception parameter.",left);}
-that.second=expression(19);return that;}
-if(left===syntax['function']){warning("Expected an identifier in an assignment and instead saw a function invocation.",token);}}
-error("Bad assignment.",that);});x.assign=true;return x;}
-function bitwise(s,p){return infix(s,p,function(left,that){if(option.bitwise){warning("Unexpected use of '{a}'.",that,that.id);}
-that.first=left;that.second=expression(p);return that;});}
-function suffix(s,f){var x=symbol(s,150);x.led=function(left){no_space_only(prevtoken,token);if(option.plusplus){warning("Unexpected use of '{a}'.",this,this.id);}else if((!left.identifier||left.reserved)&&left.id!=='.'&&left.id!=='['){warning("Bad operand.",this);}
-this.first=left;this.arity='suffix';return this;};return x;}
-function optionalidentifier(){if(nexttoken.identifier){advance();if(option.safe&&banned[token.value]){warning("ADsafe violation: '{a}'.",token,token.value);}else if(token.reserved&&!option.es5){warning("Expected an identifier and instead saw '{a}' (a reserved word).",token,token.id);}
-return token.value;}}
-function identifier(){var i=optionalidentifier();if(i){return i;}
-if(token.id==='function'&&nexttoken.id==='('){warning("Missing name in function statement.");}else{error("Expected an identifier and instead saw '{a}'.",nexttoken,nexttoken.value);}}
-function statement(noindent){var r,s=scope,t=nexttoken;if(t.id===';'){warning("Unnecessary semicolon.",t);advance(';');return;}
-if(t.identifier&&!t.reserved&&peek().id===':'){advance();advance(':');scope=Object.create(s);addlabel(t.value,'label');if(labelled[nexttoken.id]!==true){warning("Label '{a}' on '{b}' statement.",nexttoken,t.value,nexttoken.value);}
-if(jx.test(t.value+':')){warning("Label '{a}' looks like a javascript url.",t,t.value);}
-nexttoken.label=t.value;t=nexttoken;}
-r=expression(0,true);if(r.arity==='statement'){if(r.id!=='switch'&&(!r.block||r.id==='do')){semicolon();}else{spaces();}}else{if(r.id==='('&&r.first.id==='new'){warning("Do not use 'new' for side effects.");}else if(!r.assign&&r.id!=='delete'&&r.id!=='++'&&r.id!=='--'&&r.id!=='('){warning("Expected an assignment or function call and instead saw an expression.",token);}
-if(nexttoken.id!==';'){warningAt("Missing semicolon.",token.line,token.from+token.value.length);}else{semicolon();}}
-scope=s;return r;}
-function statements(begin){var a=[],d,f,p,s;if(option.adsafe){switch(begin){case'script':if(!adsafe_may){if(nexttoken.value!=='ADSAFE'||peek(0).id!=='.'||(peek(1).value!=='id'&&peek(1).value!=='go')){error('ADsafe violation: Missing ADSAFE.id or ADSAFE.go.',nexttoken);}}
-if(nexttoken.value==='ADSAFE'&&peek(0).id==='.'&&peek(1).value==='id'){if(adsafe_may){error('ADsafe violation.',nexttoken);}
-advance('ADSAFE');advance('.');advance('id');advance('(');if(nexttoken.value!==adsafe_id){error('ADsafe violation: id does not match.',nexttoken);}
-advance('(string)');advance(')');semicolon();adsafe_may=true;}
-break;case'lib':if(nexttoken.value==='ADSAFE'){advance('ADSAFE');advance('.');advance('lib');advance('(');advance('(string)');comma();f=expression(0);if(f.id!=='function'){error('The second argument to lib must be a function.',f);}
-p=f.funct['(params)'];p=p&&p.join(', ');if(p&&p!=='lib'){error("Expected '{a}' and instead saw '{b}'.",f,'(lib)','('+p+')');}
-advance(')');semicolon();return a;}else{error("ADsafe lib violation.");}
-break;}}
-while(postscript[nexttoken.id]!==true){if(nexttoken.id===';'){warning("Unnecessary semicolon.");advance(';');}else{if(d){warning("Unreachable '{a}' after '{b}'.",nexttoken,nexttoken.value,d.value);d=null;}
-s=statement();a.push(s);if(s.disrupt){d=s;a.disrupt=true;}}}
-return a;}
-function block(ordinary){var a,b=inblock,m=strict_mode,s=scope,t;inblock=ordinary;scope=Object.create(scope);spaces();t=nexttoken;if(nexttoken.id==='{'){advance('{');if(!ordinary&&!use_strict()&&!m&&option.strict&&funct['(context)']['(global)']){warning("Missing \"use strict\" statement.");}
-a=statements();strict_mode=m;advance('}',t);}else if(!ordinary){error("Expected '{a}' and instead saw '{b}'.",nexttoken,'{',nexttoken.value);}else{warning("Expected '{a}' and instead saw '{b}'.",nexttoken,'{',nexttoken.value);a=[statement()];if(a[0].disrupt){a.disrupt=true;}}
-funct['(verb)']=null;scope=s;inblock=b;if(ordinary&&a.length===0){warning("Empty block.");}
-return a;}
-function countMember(m){if(membersOnly&&typeof membersOnly[m]!=='boolean'){warning("Unexpected /*member '{a}'.",token,m);}
-if(typeof member[m]==='number'){member[m]+=1;}else{member[m]=1;}}
-function note_implied(token){var name=token.value,line=token.line,a=implied[name];if(typeof a==='function'){a=false;}
-if(!a){a=[line];implied[name]=a;}else if(a[a.length-1]!==line){a.push(line);}}
-type('(number)',function(){this.arity='number';return this;});type('(string)',function(){this.arity='string';return this;});syntax['(identifier)']={type:'(identifier)',lbp:0,identifier:true,nud:function(){var v=this.value,s=scope[v],f;if(typeof s==='function'){s=undefined;}else if(typeof s==='boolean'){f=funct;funct=functions[0];addlabel(v,'var');s=funct;funct=f;}
-if(funct===s){switch(funct[v]){case'unused':funct[v]='var';break;case'unction':funct[v]='function';this['function']=true;break;case'function':this['function']=true;break;case'label':warning("'{a}' is a statement label.",token,v);break;}}else if(funct['(global)']){if(option.undef&&typeof predefined[v]!=='boolean'){warning("'{a}' is not defined.",token,v);}
-note_implied(token);}else{switch(funct[v]){case'closure':case'function':case'var':case'unused':warning("'{a}' used out of scope.",token,v);break;case'label':warning("'{a}' is a statement label.",token,v);break;case'outer':case'global':break;default:if(s===true){funct[v]=true;}else if(s===null){warning("'{a}' is not allowed.",token,v);note_implied(token);}else if(typeof s!=='object'){if(option.undef){warning("'{a}' is not defined.",token,v);}else{funct[v]=true;}
-note_implied(token);}else{switch(s[v]){case'function':case'unction':this['function']=true;s[v]='closure';funct[v]=s['(global)']?'global':'outer';break;case'var':case'unused':s[v]='closure';funct[v]=s['(global)']?'global':'outer';break;case'closure':case'parameter':funct[v]=s['(global)']?'global':'outer';break;case'label':warning("'{a}' is a statement label.",token,v);break;}}}}
-return this;},led:function(){error("Expected an operator and instead saw '{a}'.",nexttoken,nexttoken.value);}};type('(regexp)',function(){return this;});ultimate('(begin)');ultimate('(end)');ultimate('(error)');delim('');delim('}');delim(')');delim(']');delim('"');delim("'");delim(';');delim(':');delim(',');delim('#');delim('@');reserve('else');reserve('case');reserve('catch');reserve('default');reserve('finally');reservevar('arguments',function(x){if(strict_mode&&funct['(global)']){warning("Strict violation.",x);}else if(option.safe){warning("ADsafe violation.",x);}});reservevar('eval',function(x){if(option.safe){warning("ADsafe violation.",x);}});reservevar('false');reservevar('Infinity');reservevar('NaN');reservevar('null');reservevar('this',function(x){if(strict_mode&&((funct['(statement)']&&funct['(name)'].charAt(0)>'Z')||funct['(global)'])){warning("Strict violation.",x);}else if(option.safe){warning("ADsafe violation.",x);}});reservevar('true');reservevar('undefined');assignop('=');assignop('+=');assignop('-=');assignop('*=');assignop('/=').nud=function(){error("A regular expression literal can be confused with '/='.");};assignop('%=');assignop('&=',true);assignop('|=',true);assignop('^=',true);assignop('<<=',true);assignop('>>=',true);assignop('>>>=',true);infix('?',30,function(left,that){that.first=left;that.second=expression(10);spaces();advance(':');spaces();that.third=expression(10);return that;});infix('||',40);infix('&&',50);bitwise('|',70);bitwise('^',80);bitwise('&',90);relation('==','===');relation('===');relation('!=','!==');relation('!==');relation('<');relation('>');relation('<=');relation('>=');bitwise('<<',120);bitwise('>>',120);bitwise('>>>',120);infix('in',120);infix('instanceof',120);infix('+',130,function(left,that){var right=expression(130);if(left&&right&&left.id==='(string)'&&right.id==='(string)'){left.value+=right.value;left.thru=right.thru;if(jx.test(left.value)){warning("JavaScript URL.",left);}
-return left;}
-that.first=left;that.second=right;return that;});prefix('+','num');prefix('+++',function(){warning("Confusing pluses.");this.first=expression(150);this.arity='prefix';return this;});infix('+++',130,function(left){warning("Confusing pluses.");this.first=left;this.second=expression(130);return this;});infix('-',130);prefix('-');prefix('---',function(){warning("Confusing minuses.");this.first=expression(150);this.arity='prefix';return this;});infix('---',130,function(left){warning("Confusing minuses.");this.first=left;this.second=expression(130);return this;});infix('*',140);infix('/',140);infix('%',140);suffix('++');prefix('++');suffix('--');prefix('--');prefix('delete',function(){one_space();var p=expression(0);if(!p||(p.id!=='.'&&p.id!=='[')){warning("Only properties should be deleted.");}
-this.first=p;return this;});prefix('~',function(){no_space_only();if(option.bitwise){warning("Unexpected '{a}'.",this,'~');}
-expression(150);return this;});prefix('!',function(){no_space_only();this.first=expression(150);this.arity='prefix';if(bang[this.first.id]===true){warning("Confusing use of '{a}'.",this,'!');}
-return this;});prefix('typeof');prefix('new',function(){one_space();var c=expression(160),i;if(c.id!=='function'){if(c.identifier){switch(c.value){case'Object':warning("Use the object literal notation {}.",token);break;case'Array':if(nexttoken.id!=='('){warning("Use the array literal notation [].",token);}else{advance('(');if(nexttoken.id===')'){warning("Use the array literal notation [].",token);}
-advance(')');}
-this.first=c;return this;case'Number':case'String':case'Boolean':case'Math':case'JSON':warning("Do not use {a} as a constructor.",token,c.value);break;case'Function':if(!option.evil){warning("The Function constructor is eval.");}
-break;case'Date':case'RegExp':break;default:if(c.id!=='function'){i=c.value.substr(0,1);if(option.newcap&&(i<'A'||i>'Z')){warning("A constructor name should start with an uppercase letter.",token);}}}}else{if(c.id!=='.'&&c.id!=='['&&c.id!=='('){warning("Bad constructor.",token);}}}else{warning("Weird construction. Delete 'new'.",this);}
-if(nexttoken.id!=='('){warning("Missing '()' invoking a constructor.");}
-this.first=c;return this;});infix('(',160,function(left,that){no_space_only(prevtoken,token);if(!left.immed&&left.id==='function'){warning("Wrap an immediate function invocation in parentheses "+"to assist the reader in understanding that the expression "+"is the result of a function, and not the function itself.");}
-var p=[];if(left){if(left.type==='(identifier)'){if(left.value.match(/^[A-Z]([A-Z0-9_$]*[a-z][A-Za-z0-9_$]*)?$/)){if(left.value!=='Number'&&left.value!=='String'&&left.value!=='Boolean'&&left.value!=='Date'){if(left.value==='Math'){warning("Math is not a function.",left);}else if(option.newcap){warning("Missing 'new' prefix when invoking a constructor.",left);}}}}else if(left.id==='.'){if(option.safe&&left.first.value==='Math'&&left.second==='random'){warning("ADsafe violation.",left);}}}
-if(nexttoken.id!==')'){no_space();for(;;){p.push(expression(10));if(nexttoken.id!==','){break;}
-comma();}}
-no_space();advance(')');if(typeof left==='object'){if(left.value==='parseInt'&&p.length===1){warning("Missing radix parameter.",left);}
-if(!option.evil){if(left.value==='eval'||left.value==='Function'||left.value==='execScript'){warning("eval is evil.",left);}else if(p[0]&&p[0].id==='(string)'&&(left.value==='setTimeout'||left.value==='setInterval')){warning("Implied eval is evil. Pass a function instead of a string.",left);}}
-if(!left.identifier&&left.id!=='.'&&left.id!=='['&&left.id!=='('&&left.id!=='&&'&&left.id!=='||'&&left.id!=='?'){warning("Bad invocation.",left);}}
-that.first=left;that.second=p;return that;},true);prefix('(',function(){no_space();if(nexttoken.id==='function'){nexttoken.immed=true;}
-var v=expression(0);no_space();advance(')',this);if(v.id==='function'){if(nexttoken.id==='('){warning("Move the invocation into the parens that contain the function.",nexttoken);}else{warning("Do not wrap function literals in parens unless they are to be immediately invoked.",this);}}
-return v;});infix('.',170,function(left,that){no_space(prevtoken,token);no_space();var m=identifier();if(typeof m==='string'){countMember(m);}
-that.first=left;that.second=m;if(left&&left.value==='arguments'&&(m==='callee'||m==='caller')){warning("Avoid arguments.{a}.",left,m);}else if(!option.evil&&left&&left.value==='document'&&(m==='write'||m==='writeln')){warning("document.write can be a form of eval.",left);}else if(option.adsafe){if(left&&left.value==='ADSAFE'){if(m==='id'||m==='lib'){warning("ADsafe violation.",that);}else if(m==='go'){if(xmode!=='script'){warning("ADsafe violation.",that);}else if(adsafe_went||nexttoken.id!=='('||peek(0).id!=='(string)'||peek(0).value!==adsafe_id||peek(1).id!==','){error("ADsafe violation: go.",that);}
-adsafe_went=true;adsafe_may=false;}}}
-if(!option.evil&&(m==='eval'||m==='execScript')){warning('eval is evil.');}else if(option.safe){for(;;){if(banned[m]===true){warning("ADsafe restricted word '{a}'.",token,m);}
-if(typeof predefined[left.value]!=='boolean'||nexttoken.id==='('){break;}
-if(standard_member[m]===true){if(nexttoken.id==='.'){warning("ADsafe violation.",that);}
-break;}
-if(nexttoken.id!=='.'){warning("ADsafe violation.",that);break;}
-advance('.');token.first=that;token.second=m;that=token;m=identifier();if(typeof m==='string'){countMember(m);}}}
-return that;},true);infix('[',170,function(left,that){no_space_only(prevtoken,token);no_space();var e=expression(0),s;if(e&&e.type==='(string)'){if(option.safe&&banned[e.value]===true){warning("ADsafe restricted word '{a}'.",that,e.value);}else if(!option.evil&&(e.value==='eval'||e.value==='execScript')){warning("eval is evil.",that);}else if(option.safe&&(e.value.charAt(0)==='_'||e.value.charAt(0)==='-')){warning("ADsafe restricted subscript '{a}'.",that,e.value);}
-countMember(e.value);if(!option.sub&&ix.test(e.value)){s=syntax[e.value];if(!s||!s.reserved){warning("['{a}'] is better written in dot notation.",e,e.value);}}}else if(!e||e.type!=='(number)'||e.value<0){if(option.safe){warning('ADsafe subscripting.');}}
-advance(']',that);no_space(prevtoken,token);that.first=left;that.second=e;return that;},true);prefix('[',function(){this.first=[];while(nexttoken.id!=='(end)'){while(nexttoken.id===','){warning("Extra comma.");advance(',');}
-if(nexttoken.id===']'){break;}
-this.first.push(expression(10));if(nexttoken.id===','){comma();if(nexttoken.id===']'&&!option.es5){warning("Extra comma.",token);break;}}else{break;}}
-advance(']',this);return this;},170);function property_name(){var id=optionalidentifier(true);if(!id){if(nexttoken.id==='(string)'){id=nexttoken.value;if(option.adsafe&&(id.charAt(0)==='_'||id.charAt(id.length-1)==='_')){warning("Unexpected {a} in '{b}'.",token,"dangling '_'",id);}
-advance();}else if(nexttoken.id==='(number)'){id=nexttoken.value.toString();advance();}}
-return id;}
-function functionparams(){var i,t=nexttoken,p=[];advance('(');no_space();if(nexttoken.id===')'){no_space();advance(')');return;}
-for(;;){i=identifier();p.push(i);addlabel(i,'parameter');if(nexttoken.id===','){comma();}else{no_space();advance(')',t);return p;}}}
-function doFunction(func,name){var s=scope;scope=Object.create(s);funct={'(name)':name||'"'+anonname+'"','(line)':nexttoken.line,'(context)':funct,'(breakage)':0,'(loopage)':0,'(scope)':scope,'(token)':func};token.funct=funct;functions.push(funct);if(name){addlabel(name,'function');}
-func.name=name||'';func.first=funct['(params)']=functionparams();func.block=block(false);scope=s;funct['(last)']=token.line;funct=funct['(context)'];return func;}
-prefix('{',function(){var get,i,j,name,p,set,seen={},t;this.arity='prefix';this.first=[];while(nexttoken.id!=='}'){if(nexttoken.value==='get'&&peek().id!==':'){if(!option.es5){warning("get/set are ES5 features.");}
-get=nexttoken;one_space_only();advance('get');name=nexttoken;i=property_name();if(!i){error("Missing property name.");}
-doFunction(get,'');if(funct['(loopage)']){warning("Don't make functions within a loop.",t);}
-p=get.first;if(p){warning("Unexpected parameter '{a}' in get {b} function.",t,p[0],i);}
-comma();set=nexttoken;spaces();advance('set');one_space_only();j=property_name();if(i!==j){error("Expected '{a}' and instead saw '{b}'.",token,i,j);}
-doFunction(set,'');p=set.first;if(!p||p.length!==1||p[0]!=='value'){warning("Expected (value) in set {a} function.",t,i);}
-name.first=[get,set];}else{name=nexttoken;i=property_name();if(typeof i!=='string'){error("Missing property name.");}
-advance(':');spaces();name.first=expression(10);}
-this.first.push(name);if(seen[i]===true){warning("Duplicate member '{a}'.",nexttoken,i);}
-seen[i]=true;countMember(i);if(nexttoken.id!==','){break;}
-for(;;){comma();if(nexttoken.id!==','){break;}
-warning("Extra comma.");}
-if(nexttoken.id==='}'&&!option.es5){warning("Extra comma.",token);}}
-advance('}',this);return this;});stmt('{',function(){warning("Expected to see a statement and instead saw a block.");this.arity='statement';this.block=statements();this.disrupt=this.block.disrupt;advance('}');return this;});stmt('var',function(){var assign,id,name;if(funct['(onevar)']&&option.onevar){warning("Too many var statements.");}else if(!funct['(global)']){funct['(onevar)']=true;}
-this.arity='statement';this.first=[];for(;;){spaces();name=nexttoken;id=identifier();if(funct['(global)']&&predefined[id]===false){warning("Redefinition of '{a}'.",token,id);}
-addlabel(id,'unused');if(nexttoken.id==='='){assign=nexttoken;assign.first=name;spaces();advance('=');spaces();if(nexttoken.id==='undefined'){warning("It is not necessary to initialize '{a}' to 'undefined'.",token,id);}
-if(peek(0).id==='='&&nexttoken.identifier){error("Variable {a} was not declared correctly.",nexttoken,nexttoken.value);}
-assign.second=expression(0);assign.arity='infix';this.first.push(assign);}else{this.first.push(name);}
-if(nexttoken.id!==','){break;}
-comma();}
-return this;});stmt('function',function(){one_space();if(inblock){warning("Function statements should not be placed in blocks. Use a function expression or move the statement to the top of the outer function.",token);}
-var i=identifier();if(i){addlabel(i,'unction');no_space_only();}
-doFunction(this,i,true);if(nexttoken.id==='('&&nexttoken.line===token.line){error("Function statements are not invocable. Wrap the whole function invocation in parens.");}
-this.arity='statement';return this;});prefix('function',function(){one_space();var i=optionalidentifier();if(i){no_space_only();}
-doFunction(this,i);if(funct['(loopage)']){warning("Don't make functions within a loop.");}
-this.arity='function';return this;});stmt('if',function(){var t=nexttoken;one_space();advance('(');no_space();this.arity='statement';this.first=expression(20);if(nexttoken.id==='='){warning("Expected a conditional expression and instead saw an assignment.");advance('=');expression(20);}
-no_space();advance(')',t);one_space_only();this.block=block(true);if(nexttoken.id==='else'){one_space();advance('else');one_space_only();this['else']=nexttoken.id==='if'||nexttoken.id==='switch'?statement(true):block(true);if(this['else'].disrupt&&this.block.disrupt){this.disrupt=true;}}
-return this;});stmt('try',function(){var b,e,s,t;if(option.adsafe){warning("ADsafe try violation.",this);}
-one_space_only();this.arity='statement';this.block=block(false);if(nexttoken.id==='catch'){one_space();advance('catch');one_space();advance('(');no_space_only();s=scope;scope=Object.create(s);e=nexttoken.value;this.first=e;if(nexttoken.type!=='(identifier)'){warning("Expected an identifier and instead saw '{a}'.",nexttoken,e);}else{addlabel(e,'exception');}
-advance();no_space_only();advance(')');one_space();this.second=block(false);b=true;scope=s;}
-if(nexttoken.id==='finally'){one_space();t=nexttoken;advance('finally');one_space();this.third=block(false);}else if(!b){error("Expected '{a}' and instead saw '{b}'.",nexttoken,'catch',nexttoken.value);}
-return this;});stmt('while',function(){one_space();var t=nexttoken;funct['(breakage)']+=1;funct['(loopage)']+=1;advance('(');no_space();this.arity='statement';this.first=expression(20);if(nexttoken.id==='='){warning("Expected a conditional expression and instead saw an assignment.");advance('=');expression(20);}
-no_space();advance(')',t);one_space_only();this.block=block(true);if(this.block.disrupt){warning("Strange loop.",prevtoken);}
-funct['(breakage)']-=1;funct['(loopage)']-=1;return this;});reserve('with');stmt('switch',function(){var b=true,s,t=nexttoken;funct['(breakage)']+=1;one_space();advance('(');no_space();this.arity='statement';this.first=expression(20);no_space();advance(')',t);one_space_only();advance('{');this.second=[];while(nexttoken.id==='case'){t=nexttoken;t.first=[];do{spaces();advance('case');one_space();t.first.push(expression(0));no_space_only();advance(':');}while(nexttoken.id==='case');spaces();t.second=statements();if(t.second&&t.second.length>0){s=t.second[t.second.length-1];if(s.disrupt){if(s.id==='break'){b=false;}}else{warning("Missing break after case.");}}else{warning("Empty case");}
-this.second.push(t);}
-if(this.second.length===0){warning("switch without cases.");}
-if(nexttoken.id==='default'){spaces();t=nexttoken;advance('default');no_space_only();advance(':');spaces();t.second=statements();if(t.second&&t.second.length>0){s=t.second[t.second.length-1];if(b&&s.disrupt&&s.id!=='break'){this.disrupt=true;}}
-this.second.push(t);}
-funct['(breakage)']-=1;spaces();advance('}');return this;});stmt('debugger',function(){if(!option.debug){warning("All 'debugger' statements should be removed.");}
-this.arity='statement';return this;});stmt('do',function(){funct['(breakage)']+=1;funct['(loopage)']+=1;one_space_only();this.arity='statement';this.block=block(true);if(this.block.disrupt){warning("Strange loop.",prevtoken);}
-one_space();advance('while');var t=nexttoken;one_space_only();advance('(');no_space();this.first=expression(0);if(this.first.id==='='){warning("Expected a conditional expression and instead saw an assignment.");}
-no_space();advance(')',t);funct['(breakage)']-=1;funct['(loopage)']-=1;return this;});stmt('for',function(){var f=option.forin,i,s,t=nexttoken,v;this.arity='statement';funct['(breakage)']+=1;funct['(loopage)']+=1;advance('(');spaces(this,t);no_space();if(nexttoken.id==='var'){error("Move all 'var' declarations to the top of the function.");}
-if(peek(0).id==='in'){v=nexttoken;switch(funct[v.value]){case'unused':funct[v.value]='var';break;case'var':break;default:warning("Bad for in variable '{a}'.",v,v.value);}
-advance();i=nexttoken;advance('in');i.first=v;i.second=expression(20);advance(')',t);this.first=i;s=block(true);if(!f&&(s.length>1||typeof s[0]!=='object'||s[0].value!=='if')){warning("The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype.",this);}}else{if(nexttoken.id!==';'){this.first=[];for(;;){this.first.push(expression(0,'for'));if(nexttoken.id!==','){break;}
-comma();}}
-semicolon();if(nexttoken.id!==';'){this.second=expression(20);if(this.second.id==='='){warning("Expected a conditional expression and instead saw an assignment.");}}
-semicolon(token);if(nexttoken.id===';'){error("Expected '{a}' and instead saw '{b}'.",nexttoken,')',';');}
-if(nexttoken.id!==')'){this.third=[];for(;;){this.third.push(expression(0,'for'));if(nexttoken.id!==','){break;}
-comma();}}
-no_space();advance(')',t);one_space_only();s=block(true);}
-if(s.disrupt){warning("Strange loop.",prevtoken);}
-this.block=s;funct['(breakage)']-=1;funct['(loopage)']-=1;return this;});disruptstmt('break',function(){var v=nexttoken.value;this.arity='statement';if(funct['(breakage)']===0){warning("Unexpected '{a}'.",nexttoken,this.value);}
-if(nexttoken.identifier&&token.line===nexttoken.line){one_space_only();if(funct[v]!=='label'){warning("'{a}' is not a label.",nexttoken,v);}else if(scope[v]!==funct){warning("'{a}' is out of scope.",nexttoken,v);}
-this.first=nexttoken;advance();}
-return this;});disruptstmt('continue',function(){var v=nexttoken.value;this.arity='statement';if(funct['(breakage)']===0){warning("Unexpected '{a}'.",nexttoken,this.value);}
-if(nexttoken.identifier&&token.line===nexttoken.line){one_space_only();if(funct[v]!=='label'){warning("'{a}' is not a label.",nexttoken,v);}else if(scope[v]!==funct){warning("'{a}' is out of scope.",nexttoken,v);}
-this.first=nexttoken;advance();}
-return this;});disruptstmt('return',function(){this.arity='statement';if(nexttoken.id!==';'&&nexttoken.line===token.line){one_space_only();if(nexttoken.id==='/'||nexttoken.id==='(regexp)'){warning("Wrap the /regexp/ literal in parens to disambiguate the slash operator.");}
-this.first=expression(20);}
-return this;});disruptstmt('throw',function(){this.arity='statement';one_space_only();this.first=expression(20);return this;});reserve('void');reserve('class');reserve('const');reserve('enum');reserve('export');reserve('extends');reserve('import');reserve('super');reserve('let');reserve('yield');reserve('implements');reserve('interface');reserve('package');reserve('private');reserve('protected');reserve('public');reserve('static');function jsonValue(){function jsonObject(){var o={},t=nexttoken;advance('{');if(nexttoken.id!=='}'){for(;;){if(nexttoken.id==='(end)'){error("Missing '}' to match '{' from line {a}.",nexttoken,t.line);}else if(nexttoken.id==='}'){warning("Unexpected comma.",token);break;}else if(nexttoken.id===','){error("Unexpected comma.",nexttoken);}else if(nexttoken.id!=='(string)'){warning("Expected a string and instead saw {a}.",nexttoken,nexttoken.value);}
-if(o[nexttoken.value]===true){warning("Duplicate key '{a}'.",nexttoken,nexttoken.value);}else if(nexttoken.value==='__proto__'){warning("Stupid key '{a}'.",nexttoken,nexttoken.value);}else{o[nexttoken.value]=true;}
-advance();advance(':');jsonValue();if(nexttoken.id!==','){break;}
-advance(',');}}
-advance('}');}
-function jsonArray(){var t=nexttoken;advance('[');if(nexttoken.id!==']'){for(;;){if(nexttoken.id==='(end)'){error("Missing ']' to match '[' from line {a}.",nexttoken,t.line);}else if(nexttoken.id===']'){warning("Unexpected comma.",token);break;}else if(nexttoken.id===','){error("Unexpected comma.",nexttoken);}
-jsonValue();if(nexttoken.id!==','){break;}
-advance(',');}}
-advance(']');}
-switch(nexttoken.id){case'{':jsonObject();break;case'[':jsonArray();break;case'true':case'false':case'null':case'(number)':case'(string)':advance();break;case'-':advance('-');if(token.thru!==nexttoken.from){warning("Unexpected space after '-'.",token);}
-no_space_only();advance('(number)');break;default:error("Expected a JSON value.",nexttoken);}}
-function cssName(){if(nexttoken.identifier){advance();return true;}}
-function cssNumber(){if(nexttoken.id==='-'){advance('-');no_space_only();}
-if(nexttoken.type==='(number)'){advance('(number)');return true;}}
-function cssString(){if(nexttoken.type==='(string)'){advance();return true;}}
-function cssColor(){var i,number,value;if(nexttoken.identifier){value=nexttoken.value;if(value==='rgb'||value==='rgba'){advance();advance('(');for(i=0;i<3;i+=1){if(i){comma();}
-number=nexttoken.value;if(nexttoken.type!=='(number)'||number<0){warning("Expected a positive number and instead saw '{a}'",nexttoken,number);advance();}else{advance();if(nexttoken.id==='%'){advance('%');if(number>100){warning("Expected a percentage and instead saw '{a}'",token,number);}}else{if(number>255){warning("Expected a small number and instead saw '{a}'",token,number);}}}}
-if(value==='rgba'){comma();number=+nexttoken.value;if(nexttoken.type!=='(number)'||number<0||number>1){warning("Expected a number between 0 and 1 and instead saw '{a}'",nexttoken,number);}
-advance();if(nexttoken.id==='%'){warning("Unexpected '%'.");advance('%');}}
-advance(')');return true;}else if(cssColorData[nexttoken.value]===true){advance();return true;}}else if(nexttoken.type==='(color)'){advance();return true;}
-return false;}
-function cssLength(){if(nexttoken.id==='-'){advance('-');no_space_only();}
-if(nexttoken.type==='(number)'){advance();if(nexttoken.type!=='(string)'&&cssLengthData[nexttoken.value]===true){no_space_only();advance();}else if(+token.value!==0){warning("Expected a linear unit and instead saw '{a}'.",nexttoken,nexttoken.value);}
-return true;}
-return false;}
-function cssLineHeight(){if(nexttoken.id==='-'){advance('-');no_space_only();}
-if(nexttoken.type==='(number)'){advance();if(nexttoken.type!=='(string)'&&cssLengthData[nexttoken.value]===true){no_space_only();advance();}
-return true;}
-return false;}
-function cssWidth(){if(nexttoken.identifier){switch(nexttoken.value){case'thin':case'medium':case'thick':advance();return true;}}else{return cssLength();}}
-function cssMargin(){if(nexttoken.identifier){if(nexttoken.value==='auto'){advance();return true;}}else{return cssLength();}}
-function cssAttr(){if(nexttoken.identifier&&nexttoken.value==='attr'){advance();advance('(');if(!nexttoken.identifier){warning("Expected a name and instead saw '{a}'.",nexttoken,nexttoken.value);}
-advance();advance(')');return true;}
-return false;}
-function cssCommaList(){while(nexttoken.id!==';'){if(!cssName()&&!cssString()){warning("Expected a name and instead saw '{a}'.",nexttoken,nexttoken.value);}
-if(nexttoken.id!==','){return true;}
-comma();}}
-function cssCounter(){if(nexttoken.identifier&&nexttoken.value==='counter'){advance();advance('(');advance();if(nexttoken.id===','){comma();if(nexttoken.type!=='(string)'){warning("Expected a string and instead saw '{a}'.",nexttoken,nexttoken.value);}
-advance();}
-advance(')');return true;}
-if(nexttoken.identifier&&nexttoken.value==='counters'){advance();advance('(');if(!nexttoken.identifier){warning("Expected a name and instead saw '{a}'.",nexttoken,nexttoken.value);}
-advance();if(nexttoken.id===','){comma();if(nexttoken.type!=='(string)'){warning("Expected a string and instead saw '{a}'.",nexttoken,nexttoken.value);}
-advance();}
-if(nexttoken.id===','){comma();if(nexttoken.type!=='(string)'){warning("Expected a string and instead saw '{a}'.",nexttoken,nexttoken.value);}
-advance();}
-advance(')');return true;}
-return false;}
-function cssShape(){var i;if(nexttoken.identifier&&nexttoken.value==='rect'){advance();advance('(');for(i=0;i<4;i+=1){if(!cssLength()){warning("Expected a number and instead saw '{a}'.",nexttoken,nexttoken.value);break;}}
-advance(')');return true;}
-return false;}
-function cssUrl(){var c,url;if(nexttoken.identifier&&nexttoken.value==='url'){nexttoken=lex.range('(',')');url=nexttoken.value;c=url.charAt(0);if(c==='"'||c==='\''){if(url.slice(-1)!==c){warning("Bad url string.");}else{url=url.slice(1,-1);if(url.indexOf(c)>=0){warning("Bad url string.");}}}
-if(!url){warning("Missing url.");}
-advance();if(option.safe&&ux.test(url)){error("ADsafe URL violation.");}
-urls.push(url);return true;}
-return false;}
-cssAny=[cssUrl,function(){for(;;){if(nexttoken.identifier){switch(nexttoken.value.toLowerCase()){case'url':cssUrl();break;case'expression':warning("Unexpected expression '{a}'.",nexttoken,nexttoken.value);advance();break;default:advance();}}else{if(nexttoken.id===';'||nexttoken.id==='!'||nexttoken.id==='(end)'||nexttoken.id==='}'){return true;}
-advance();}}}];cssBorderStyle=['none','dashed','dotted','double','groove','hidden','inset','outset','ridge','solid'];cssBreak=['auto','always','avoid','left','right'];cssMedia={'all':true,'braille':true,'embossed':true,'handheld':true,'print':true,'projection':true,'screen':true,'speech':true,'tty':true,'tv':true};cssOverflow=['auto','hidden','scroll','visible'];cssAttributeData={background:[true,'background-attachment','background-color','background-image','background-position','background-repeat'],'background-attachment':['scroll','fixed'],'background-color':['transparent',cssColor],'background-image':['none',cssUrl],'background-position':[2,[cssLength,'top','bottom','left','right','center']],'background-repeat':['repeat','repeat-x','repeat-y','no-repeat'],'border':[true,'border-color','border-style','border-width'],'border-bottom':[true,'border-bottom-color','border-bottom-style','border-bottom-width'],'border-bottom-color':cssColor,'border-bottom-style':cssBorderStyle,'border-bottom-width':cssWidth,'border-collapse':['collapse','separate'],'border-color':['transparent',4,cssColor],'border-left':[true,'border-left-color','border-left-style','border-left-width'],'border-left-color':cssColor,'border-left-style':cssBorderStyle,'border-left-width':cssWidth,'border-right':[true,'border-right-color','border-right-style','border-right-width'],'border-right-color':cssColor,'border-right-style':cssBorderStyle,'border-right-width':cssWidth,'border-spacing':[2,cssLength],'border-style':[4,cssBorderStyle],'border-top':[true,'border-top-color','border-top-style','border-top-width'],'border-top-color':cssColor,'border-top-style':cssBorderStyle,'border-top-width':cssWidth,'border-width':[4,cssWidth],bottom:[cssLength,'auto'],'caption-side':['bottom','left','right','top'],clear:['both','left','none','right'],clip:[cssShape,'auto'],color:cssColor,content:['open-quote','close-quote','no-open-quote','no-close-quote',cssString,cssUrl,cssCounter,cssAttr],'counter-increment':[cssName,'none'],'counter-reset':[cssName,'none'],cursor:[cssUrl,'auto','crosshair','default','e-resize','help','move','n-resize','ne-resize','nw-resize','pointer','s-resize','se-resize','sw-resize','w-resize','text','wait'],direction:['ltr','rtl'],display:['block','compact','inline','inline-block','inline-table','list-item','marker','none','run-in','table','table-caption','table-cell','table-column','table-column-group','table-footer-group','table-header-group','table-row','table-row-group'],'empty-cells':['show','hide'],'float':['left','none','right'],font:['caption','icon','menu','message-box','small-caption','status-bar',true,'font-size','font-style','font-weight','font-family'],'font-family':cssCommaList,'font-size':['xx-small','x-small','small','medium','large','x-large','xx-large','larger','smaller',cssLength],'font-size-adjust':['none',cssNumber],'font-stretch':['normal','wider','narrower','ultra-condensed','extra-condensed','condensed','semi-condensed','semi-expanded','expanded','extra-expanded'],'font-style':['normal','italic','oblique'],'font-variant':['normal','small-caps'],'font-weight':['normal','bold','bolder','lighter',cssNumber],height:[cssLength,'auto'],left:[cssLength,'auto'],'letter-spacing':['normal',cssLength],'line-height':['normal',cssLineHeight],'list-style':[true,'list-style-image','list-style-position','list-style-type'],'list-style-image':['none',cssUrl],'list-style-position':['inside','outside'],'list-style-type':['circle','disc','square','decimal','decimal-leading-zero','lower-roman','upper-roman','lower-greek','lower-alpha','lower-latin','upper-alpha','upper-latin','hebrew','katakana','hiragana-iroha','katakana-oroha','none'],margin:[4,cssMargin],'margin-bottom':cssMargin,'margin-left':cssMargin,'margin-right':cssMargin,'margin-top':cssMargin,'marker-offset':[cssLength,'auto'],'max-height':[cssLength,'none'],'max-width':[cssLength,'none'],'min-height':cssLength,'min-width':cssLength,opacity:cssNumber,outline:[true,'outline-color','outline-style','outline-width'],'outline-color':['invert',cssColor],'outline-style':['dashed','dotted','double','groove','inset','none','outset','ridge','solid'],'outline-width':cssWidth,overflow:cssOverflow,'overflow-x':cssOverflow,'overflow-y':cssOverflow,padding:[4,cssLength],'padding-bottom':cssLength,'padding-left':cssLength,'padding-right':cssLength,'padding-top':cssLength,'page-break-after':cssBreak,'page-break-before':cssBreak,position:['absolute','fixed','relative','static'],quotes:[8,cssString],right:[cssLength,'auto'],'table-layout':['auto','fixed'],'text-align':['center','justify','left','right'],'text-decoration':['none','underline','overline','line-through','blink'],'text-indent':cssLength,'text-shadow':['none',4,[cssColor,cssLength]],'text-transform':['capitalize','uppercase','lowercase','none'],top:[cssLength,'auto'],'unicode-bidi':['normal','embed','bidi-override'],'vertical-align':['baseline','bottom','sub','super','top','text-top','middle','text-bottom',cssLength],visibility:['visible','hidden','collapse'],'white-space':['normal','nowrap','pre','pre-line','pre-wrap','inherit'],width:[cssLength,'auto'],'word-spacing':['normal',cssLength],'word-wrap':['break-word','normal'],'z-index':['auto',cssNumber]};function styleAttribute(){var v;while(nexttoken.id==='*'||nexttoken.id==='#'||nexttoken.value==='_'){if(!option.css){warning("Unexpected '{a}'.",nexttoken,nexttoken.value);}
-advance();}
-if(nexttoken.id==='-'){if(!option.css){warning("Unexpected '{a}'.",nexttoken,nexttoken.value);}
-advance('-');if(!nexttoken.identifier){warning("Expected a non-standard style attribute and instead saw '{a}'.",nexttoken,nexttoken.value);}
-advance();return cssAny;}else{if(!nexttoken.identifier){warning("Excepted a style attribute, and instead saw '{a}'.",nexttoken,nexttoken.value);}else{if(is_own(cssAttributeData,nexttoken.value)){v=cssAttributeData[nexttoken.value];}else{v=cssAny;if(!option.css){warning("Unrecognized style attribute '{a}'.",nexttoken,nexttoken.value);}}}
-advance();return v;}}
-function styleValue(v){var i=0,n,once,match,round,start=0,vi;switch(typeof v){case'function':return v();case'string':if(nexttoken.identifier&&nexttoken.value===v){advance();return true;}
-return false;}
-for(;;){if(i>=v.length){return false;}
-vi=v[i];i+=1;if(vi===true){break;}else if(typeof vi==='number'){n=vi;vi=v[i];i+=1;}else{n=1;}
-match=false;while(n>0){if(styleValue(vi)){match=true;n-=1;}else{break;}}
-if(match){return true;}}
-start=i;once=[];for(;;){round=false;for(i=start;i':case'+':advance();styleSelector();break;case':':advance(':');switch(nexttoken.value){case'active':case'after':case'before':case'checked':case'disabled':case'empty':case'enabled':case'first-child':case'first-letter':case'first-line':case'first-of-type':case'focus':case'hover':case'last-child':case'last-of-type':case'link':case'only-of-type':case'root':case'target':case'visited':advance();break;case'lang':advance();advance('(');if(!nexttoken.identifier){warning("Expected a lang code, and instead saw :{a}.",nexttoken,nexttoken.value);}
-advance(')');break;case'nth-child':case'nth-last-child':case'nth-last-of-type':case'nth-of-type':advance();advance('(');styleChild();advance(')');break;case'not':advance();advance('(');if(nexttoken.id===':'&&peek(0).value==='not'){warning("Nested not.");}
-styleSelector();advance(')');break;default:warning("Expected a pseudo, and instead saw :{a}.",nexttoken,nexttoken.value);}
-break;case'#':advance('#');if(!nexttoken.identifier){warning("Expected an id, and instead saw #{a}.",nexttoken,nexttoken.value);}
-advance();break;case'*':advance('*');break;case'.':advance('.');if(!nexttoken.identifier){warning("Expected a class, and instead saw #.{a}.",nexttoken,nexttoken.value);}
-advance();break;case'[':advance('[');if(!nexttoken.identifier){warning("Expected an attribute, and instead saw [{a}].",nexttoken,nexttoken.value);}
-advance();if(nexttoken.id==='='||nexttoken.value==='~='||nexttoken.value==='$='||nexttoken.value==='|='||nexttoken.id==='*='||nexttoken.id==='^='){advance();if(nexttoken.type!=='(string)'){warning("Expected a string, and instead saw {a}.",nexttoken,nexttoken.value);}
-advance();}
-advance(']');break;default:error("Expected a CSS selector, and instead saw {a}.",nexttoken,nexttoken.value);}}}
-function stylePattern(){if(nexttoken.id==='{'){warning("Expected a style pattern, and instead saw '{a}'.",nexttoken,nexttoken.id);}
-for(;;){styleSelector();if(nexttoken.id===' fragments and .js files.",token);}
-if(option.fragment){if(n!=='div'){error("ADsafe violation: Wrap the widget in a div.",token);}}else{error("Use the fragment option.",token);}}
-option.browser=true;assume();}
-function doAttribute(n,a,v){var u,x;if(a==='id'){u=typeof v==='string'?v.toUpperCase():'';if(ids[u]===true){warning("Duplicate id='{a}'.",nexttoken,v);}
-if(!/^[A-Za-z][A-Za-z0-9._:\-]*$/.test(v)){warning("Bad id: '{a}'.",nexttoken,v);}else if(option.adsafe){if(adsafe_id){if(v.slice(0,adsafe_id.length)!==adsafe_id){warning("ADsafe violation: An id must have a '{a}' prefix",nexttoken,adsafe_id);}else if(!/^[A-Z]+_[A-Z]+$/.test(v)){warning("ADSAFE violation: bad id.");}}else{adsafe_id=v;if(!/^[A-Z]+_$/.test(v)){warning("ADSAFE violation: bad id.");}}}
-x=v.search(dx);if(x>=0){warning("Unexpected character '{a}' in {b}.",token,v.charAt(x),a);}
-ids[u]=true;}else if(a==='class'||a==='type'||a==='name'){x=v.search(qx);if(x>=0){warning("Unexpected character '{a}' in {b}.",token,v.charAt(x),a);}
-ids[u]=true;}else if(a==='href'||a==='background'||a==='content'||a==='data'||a.indexOf('src')>=0||a.indexOf('url')>=0){if(option.safe&&ux.test(v)){error("ADsafe URL violation.");}
-urls.push(v);}else if(a==='for'){if(option.adsafe){if(adsafe_id){if(v.slice(0,adsafe_id.length)!==adsafe_id){warning("ADsafe violation: An id must have a '{a}' prefix",nexttoken,adsafe_id);}else if(!/^[A-Z]+_[A-Z]+$/.test(v)){warning("ADSAFE violation: bad id.");}}else{warning("ADSAFE violation: bad id.");}}}else if(a==='name'){if(option.adsafe&&v.indexOf('_')>=0){warning("ADsafe name violation.");}}}
-function doTag(n,a){var i,t=htmltag[n],x;src=false;if(!t){error("Unrecognized tag '<{a}>'.",nexttoken,n===n.toLowerCase()?n:n+' (capitalization error)');}
-if(stack.length>0){if(n==='html'){error("Too many  tags.",token);}
-x=t.parent;if(x){if(x.indexOf(' '+stack[stack.length-1].name+' ')<0){error("A '<{a}>' must be within '<{b}>'.",token,n,x);}}else if(!option.adsafe&&!option.fragment){i=stack.length;do{if(i<=0){error("A '<{a}>' must be within '<{b}>'.",token,n,'body');}
-i-=1;}while(stack[i].name!=='body');}}
-switch(n){case'div':if(option.adsafe&&stack.length===1&&!adsafe_id){warning("ADSAFE violation: missing ID_.");}
-break;case'script':xmode='script';advance('>');if(a.lang){warning("lang is deprecated.",token);}
-if(option.adsafe&&stack.length!==1){warning("ADsafe script placement violation.",token);}
-if(a.src){if(option.adsafe&&(!adsafe_may||!approved[a.src])){warning("ADsafe unapproved script source.",token);}
-if(a.type){warning("type is unnecessary.",token);}}else{if(adsafe_went){error("ADsafe script violation.",token);}
-use_strict();statements('script');}
-xmode='html';advance('');styles();xmode='html';advance('';}
-function html(){var a,attributes,e,n,q,t,v,w=option.white,wmode;xmode='html';xquote='';stack=null;for(;;){switch(nexttoken.value){case'<':xmode='html';advance('<');attributes={};t=nexttoken;if(!t.identifier){warning("Bad identifier {a}.",t,t.value);}
-n=t.value;if(option.cap){n=n.toLowerCase();}
-t.name=n;advance();if(!stack){stack=[];doBegin(n);}
-v=htmltag[n];if(typeof v!=='object'){error("Unrecognized tag '<{a}>'.",t,n);}
-e=v.empty;t.type=n;for(;;){if(nexttoken.id==='/'){advance('/');if(nexttoken.id!=='>'){warning("Expected '{a}' and instead saw '{b}'.",nexttoken,'>',nexttoken.value);}
-break;}
-if(nexttoken.id&&nexttoken.id.substr(0,1)==='>'){break;}
-if(!nexttoken.identifier){if(nexttoken.id==='(end)'||nexttoken.id==='(error)'){error("Missing '>'.",nexttoken);}
-warning("Bad identifier.");}
-option.white=true;spaces();a=nexttoken.value;option.white=w;advance();if(!option.cap&&a!==a.toLowerCase()){warning("Attribute '{a}' not all lower case.",nexttoken,a);}
-a=a.toLowerCase();xquote='';if(is_own(attributes,a)){warning("Attribute '{a}' repeated.",nexttoken,a);}
-if(a.slice(0,2)==='on'){if(!option.on){warning("Avoid HTML event handlers.");}
-xmode='scriptstring';advance('=');q=nexttoken.id;if(q!=='"'&&q!=="'"){error("Missing quote.");}
-xquote=q;wmode=option.white;option.white=false;advance(q);use_strict();statements('on');option.white=wmode;if(nexttoken.id!==q){error("Missing close quote on script attribute.");}
-xmode='html';xquote='';advance(q);v=false;}else if(a==='style'){xmode='scriptstring';advance('=');q=nexttoken.id;if(q!=='"'&&q!=="'"){error("Missing quote.");}
-xmode='styleproperty';xquote=q;advance(q);substyle();xmode='html';xquote='';advance(q);v=false;}else{if(nexttoken.id==='='){advance('=');v=nexttoken.value;if(!nexttoken.identifier&&nexttoken.id!=='"'&&nexttoken.id!=='\''&&nexttoken.type!=='(string)'&&nexttoken.type!=='(number)'&&nexttoken.type!=='(color)'){warning("Expected an attribute value and instead saw '{a}'.",token,a);}
-advance();}else{v=true;}}
-attributes[a]=v;doAttribute(n,a,v);}
-doTag(n,attributes);if(!e){stack.push(t);}
-xmode='outer';advance('>');break;case''){error("Missing '{a}'.",nexttoken,'>');}
-xmode='outer';advance('>');break;case''||nexttoken.id==='(end)'){break;}
-if(nexttoken.value.indexOf('--')>=0){error("Unexpected --.");}
-if(nexttoken.value.indexOf('<')>=0){error("Unexpected <.");}
-if(nexttoken.value.indexOf('>')>=0){error("Unexpected >.");}}
-xmode='outer';advance('>');break;case'(end)':return;default:if(nexttoken.id==='(end)'){error("Missing '{a}'.",nexttoken,'');}else{advance();}}
-if(stack&&stack.length===0&&(option.adsafe||!option.fragment||nexttoken.id==='(end)')){break;}}
-if(nexttoken.id!=='(end)'){error("Unexpected material after the end.");}}
-var itself=function(s,o){var a,i,k;JSLINT.errors=[];JSLINT.tree='';predefined=Object.create(standard);if(o){a=o.predef;if(a){if(Array.isArray(a)){for(i=0;i',nexttoken.value);}
-if(nexttoken.value==='use strict'){warning("Use the function form of \"use strict\".");use_strict();}
-JSLINT.tree=statements('lib');if(JSLINT.tree.disrupt){warning("Weird program.",prevtoken);}}}
-advance('(end)');}catch(e){if(e){JSLINT.errors.push({reason:e.message,line:e.line||nexttoken.line,character:e.character||nexttoken.from},null);}}
-return JSLINT.errors.length===0;};itself.data=function(){var data={functions:[]},fu,globals,implieds=[],f,i,j,members=[],n,unused=[],v;if(itself.errors.length){data.errors=itself.errors;}
-if(jsonmode){data.json=true;}
-for(n in implied){if(is_own(implied,n)){implieds.push({name:n,line:implied[n]});}}
-if(implieds.length>0){data.implieds=implieds;}
-if(urls.length>0){data.urls=urls;}
-globals=Object.keys(scope);if(globals.length>0){data.globals=globals;}
-for(i=1;i0){data.unused=unused;}
-members=[];for(n in member){if(typeof member[n]==='number'){data.member=member;break;}}
-return data;};itself.report=function(option){var data=itself.data();var a=[],c,e,err,f,i,k,l,m='',n,o=[],s;function detail(h,array){var b,i,singularity;if(array){o.push('
    '+h+' ');array=array.sort();for(i=0;i');}}
-if(data.errors||data.implieds||data.unused){err=true;o.push('
    Error:');if(data.errors){for(i=0;iProblem'+(isFinite(c.line)?' at line '+
-c.line+' character '+c.character:'')+': '+c.reason.entityify()+'
    '+
-(e&&(e.length>80?e.slice(0,77)+'...':e).entityify())+'
    ');}}}
-if(data.implieds){s=[];for(i=0;i'+data.implieds[i].name+' '+
-data.implieds[i].line+'';}
-o.push('
    Implied global: '+s.join(', ')+'
    ');}
-if(data.unused){s=[];for(i=0;i'+data.unused[i].name+' '+
-data.unused[i].line+'  '+
-data.unused[i]['function']+'';}
-o.push('
    Unused variable: '+s.join(', ')+'
    ');}
-if(data.json){o.push('
    JSON: bad.
    ');}
-o.push('
    ');}
-if(!option){o.push('
    ');if(data.urls){detail("URLs
    ",data.urls,'
    ');}
-if(xmode==='style'){o.push('
    CSS.
    ');}else if(data.json&&!err){o.push('
    JSON: good.
    ');}else if(data.globals){o.push('
    Global '+
-data.globals.sort().join(', ')+'
    ');}else{o.push('
    No new global variables introduced.
    ');}
-for(i=0;i
    '+f.line+'-'+
-f.last+' '+(f.name||'')+'('+
-(f.param?f.param.join(', '):'')+')
    ');detail('Unused',f.unused);detail('Closure',f.closure);detail('Variable',f['var']);detail('Exception',f.exception);detail('Outer',f.outer);detail('Global',f.global);detail('Label',f.label);}
-if(data.member){a=Object.keys(data.member);if(a.length){a=a.sort();m='
    /*members ';l=10;for(i=0;i72){o.push(m+'
    ');m='    ';l=1;}
-l+=n.length+2;if(data.member[k]===1){n=''+n+'';}
-if(i*/
    ');}
-o.push('
    ');}}
-return o.join('');};itself.jslint=itself;itself.edition='2011-01-09';return itself;}());var ADSAFE=(function(){"use strict";var adsafe_id,adsafe_lib,banned={'arguments':true,callee:true,caller:true,constructor:true,'eval':true,prototype:true,stack:true,unwatch:true,valueOf:true,watch:true},cache_style_object,cache_style_node,defaultView=document.defaultView,ephemeral,flipflop,has_focus,hunter,interceptors=[],makeableTagName={a:true,abbr:true,acronym:true,address:true,area:true,b:true,bdo:true,big:true,blockquote:true,br:true,button:true,canvas:true,caption:true,center:true,cite:true,code:true,col:true,colgroup:true,dd:true,del:true,dfn:true,dir:true,div:true,dl:true,dt:true,em:true,fieldset:true,font:true,form:true,h1:true,h2:true,h3:true,h4:true,h5:true,h6:true,hr:true,i:true,img:true,input:true,ins:true,kbd:true,label:true,legend:true,li:true,map:true,menu:true,object:true,ol:true,optgroup:true,option:true,p:true,pre:true,q:true,samp:true,select:true,small:true,span:true,strong:true,sub:true,sup:true,table:true,tbody:true,td:true,textarea:true,tfoot:true,th:true,thead:true,tr:true,tt:true,u:true,ul:true,'var':true},name,pecker,result,star,the_range,value;function error(message){ADSAFE.log("ADsafe error: "+(message||"ADsafe violation."));throw{name:"ADsafe",message:message||"ADsafe violation."};}
-function string_check(string){if(typeof string!=='string'){error("ADsafe string violation.");}
-return string;}
-function owns(object,string){return object&&typeof object==='object'&&Object.prototype.hasOwnProperty.call(object,string_check(string));}
-(function mozilla(name){var method=Array.prototype[name];Array.prototype[name]=function(){return!this||this.window?error():method.apply(this,arguments);};return mozilla;}('concat')('every')('filter')('forEach')('map')('reduce')('reduceRight')('reverse')('slice')('some')('sort'));function reject_name(name){return banned[name]||((typeof name!=='number'||name<0)&&(typeof name!=='string'||name.charAt(0)==='_'||name.slice(-1)==='_'||name.charAt(0)==='-'));}
-function reject_property(object,name){return typeof object!=='object'||reject_name(name);}
-function reject_global(that){if(that.window){error();}}
-function getStyleObject(node){if(node===cache_style_node){return cache_style_object;}
-cache_style_node=node;cache_style_object=node.currentStyle||defaultView.getComputedStyle(node,'');return cache_style_object;}
-function walkTheDOM(node,func,skip){if(!skip){func(node);}
-node=node.firstChild;while(node){walkTheDOM(node,func);node=node.nextSibling;}}
-function purge_event_handlers(node){walkTheDOM(node,function(node){if(node.tagName){node['___ on ___']=node.change=null;}});}
-function parse_query(text,id){var match,query=[],selector,qx=id?/^\s*(?:([\*\/])|\[\s*([a-z][0-9a-z_\-]*)\s*(?:([!*~|$\^]?\=)\s*([0-9A-Za-z_\-*%&;.\/:!]+)\s*)?\]|#\s*([A-Z]+_[A-Z0-9]+)|:\s*([a-z]+)|([.&_>\+]?)\s*([a-z][0-9a-z\-]*))\s*/:/^\s*(?:([\*\/])|\[\s*([a-z][0-9a-z_\-]*)\s*(?:([!*~|$\^]?\=)\s*([0-9A-Za-z_\-*%&;.\/:!]+)\s*)?\]|#\s*([\-A-Za-z0-9_]+)|:\s*([a-z]+)|([.&_>\+]?)\s*([a-z][0-9a-z\-]*))\s*/;do{match=qx.exec(string_check(text));if(!match){error("ADsafe: Bad query:"+text);}
-if(match[1]){selector={op:match[1]};}else if(match[2]){selector=match[3]?{op:'['+match[3],name:match[2],value:match[4]}:{op:'[',name:match[2]};}else if(match[5]){if(query.length>0||match[5].length<=id.length||match[5].slice(0,id.length)!==id){error("ADsafe: Bad query: "+text);}
-selector={op:'#',name:match[5]};}else if(match[6]){selector={op:':'+match[6]};}else{selector={op:match[7],name:match[8]};}
-query.push(selector);text=text.slice(match[0].length);}while(text);return query;}
-hunter={'':function(node){var e=node.getElementsByTagName(name),i;for(i=0;i<1000;i+=1){if(e[i]){result.push(e[i]);}else{break;}}},'+':function(node){node=node.nextSibling;name=name.toUpperCase();while(node&&!node.tagName){node=node.nextSibling;}
-if(node&&node.tagName===name){result.push(node);}},'>':function(node){node=node.firstChild;name=name.toUpperCase();while(node){if(node.tagName===name){result.push(node);}
-node=node.nextSibling;}},'#':function(node){var n=document.getElementById(name);if(n.tagName){result.push(n);}},'/':function(node){var e=node.childNodes,i;for(i=0;i=0;},'&':function(node){return node.name===name;},'_':function(node){return node.type===name;},'[':function(node){return typeof node[name]==='string';},'[=':function(node){var member=node[name];return typeof member==='string'&&member===value;},'[!=':function(node){var member=node[name];return typeof member==='string'&&member!==value;},'[^=':function(node){var member=node[name];return typeof member==='string'&&member.slice(0,member.length)===value;},'[$=':function(node){var member=node[name];return typeof member==='string'&&member.slice(-member.length)===value;},'[*=':function(node){var member=node[name];return typeof member==='string'&&member.slice.indexOf(value)>=0;},'[~=':function(node){var member=node[name];return typeof member==='string'&&(' '+member+' ').slice.indexOf(' '+value+' ')>=0;},'[|=':function(node){var member=node[name];return typeof member==='string'&&('-'+member+'-').slice.indexOf('-'+value+'-')>=0;},':blur':function(node){return node!==has_focus;},':checked':function(node){return node.checked;},':disabled':function(node){return node.tagName&&node.disabled;},':enabled':function(node){return node.tagName&&!node.disabled;},':even':function(node){var f;if(node.tagName){f=flipflop;flipflop=!flipflop;return f;}else{return false;}},':focus':function(node){return node===has_focus;},':hidden':function(node){return node.tagName&&getStyleObject(node).visibility!=='visible';},':odd':function(node){if(node.tagName){flipflop=!flipflop;return flipflop;}else{return false;}},':tag':function(node){return node.tagName;},':text':function(node){return node.nodeName==='#text';},':trim':function(node){return node.nodeName!=='#text'||/\W/.test(node.nodeValue);},':unchecked':function(node){return node.tagName&&!node.checked;},':visible':function(node){return node.tagName&&getStyleObject(node).visibility==='visible';}};function quest(query,nodes){var selector,func,i,j;for(i=0;i1;star=false;}
-var allow_focus=true,dom,dom_event=function(e){var key,target,that,the_event,the_target,the_actual_event=e||event,type=the_actual_event.type;the_target=the_actual_event.target||the_actual_event.srcElement;target=new Bunch([the_target]);that=target;switch(type){case'mousedown':allow_focus=true;if(document.selection){the_range=document.selection.createRange();}
-break;case'focus':case'focusin':allow_focus=true;has_focus=the_target;the_actual_event.cancelBubble=false;type='focus';break;case'blur':case'focusout':allow_focus=false;has_focus=null;type='blur';break;case'keypress':allow_focus=true;has_focus=the_target;key=String.fromCharCode(the_actual_event.charCode||the_actual_event.keyCode);switch(key){case'\u000d':case'\u000a':type='enterkey';break;case'\u001b':type='escapekey';break;}
-break;case'click':allow_focus=true;break;}
-if(the_actual_event.cancelBubble&&the_actual_event.stopPropagation){the_actual_event.stopPropagation();}
-the_event={altKey:the_actual_event.altKey,ctrlKey:the_actual_event.ctrlKey,bubble:function(){try{var parent=that.getParent(),b=parent.___nodes___[0];that=parent;the_event.that=that;if(b['___ on ___']&&b['___ on ___'][type]){that.fire(the_event);}else{the_event.bubble();}}catch(e){error(e);}},key:key,preventDefault:function(){if(the_actual_event.preventDefault){the_actual_event.preventDefault();}
-the_actual_event.returnValue=false;},shiftKey:the_actual_event.shiftKey,target:target,that:that,type:type,x:the_actual_event.clientX,y:the_actual_event.clientY};if(the_target['___ on ___']&&the_target['___ on ___'][the_event.type]){target.fire(the_event);}else{for(;;){the_target=the_target.parentNode;if(!the_target){break;}
-if(the_target['___ on ___']&&the_target['___ on ___'][the_event.type]){that=new Bunch([the_target]);the_event.that=that;that.fire(the_event);break;}
-if(the_target['___adsafe root___']){break;}}}
-if(the_event.type==='escapekey'){if(ephemeral){ephemeral.remove();}
-ephemeral=null;}
-that=the_target=the_event=the_actual_event=null;return;};root['___adsafe root___']='___adsafe root___';Bunch.prototype={append:function(appendage){reject_global(this);var b=this.___nodes___,flag=false,i,j,node,rep;if(b.length===0||!appendage){return this;}
-if(appendage instanceof Array){if(appendage.length!==b.length){error('ADsafe: Array length: '+
-b.length+'-'+value.length);}
-for(i=0;i0){newnode=rep[0];parent.replaceChild(newnode,node);for(j=1;j=0);root=make_root(root,id);dom=root[0];for(i=0;i 0) {
-						code += ","+$paddingx.val();
-					}
-					if(+$paddingy.val() > 0) {
-						code += ","+$paddingy.val();
-					}
-					code += ");";
-					
-					Crafty.sprite(+$tilesize.val(), f, map, +$paddingx.val(), +$paddingy.val());
-					
-					if(assets.block) {
-						block = assets.block;
-						block.open = code;
-					} else {
-						block = new Block(code);
-						CODE.append(block);
-					}
-					assets.spritify = {
-						labels: labels,
-						size: +$tilesize.val(),
-						paddingx: +$paddingx.val(),
-						paddingy: +$paddingy.val()
-					};
-					
-					Editor.update();
-					resetSprite();
-					$(this).dialog("close");
-				},
-				
-				'Cancel': function() {
-					resetSprite();
-					$(this).dialog("close");
-				}
-			},
-			dragStop: function() {
-				inneroffset = $grid.offset();
-			},
-			
-			beforeClose: function() { resetSprite(); }
-		});
-		
-		//init grid
-		$grid.css({width: $(this).width(), height: $(this).height() });
-		inneroffset = $grid.offset();
-	}).error(function() {
-		errorz("Image not found!", "We can't find the image "+file+"");
-	});
-	
-}
-
-function intOnly(e) {
-	return (e.keyCode >= 48 && e.keyCode <= 57) || e.keyCode == 8 || e.keyCode == 46;
-}
-
-function clickHandler(e) {
-	if(selected) {
-		selected = null;
-		$over.css("border-color", "red");
-		$grid.mousemove(overHandler);
-		$label.val("");
-		return;
-	}
-	
-	var tile = (+$tilesize.val()),
-		paddingx = (+$paddingx.val()),
-		paddingy = (+$paddingy.val()),
-		roundx = tile + paddingx,
-		roundy = tile + paddingy,
-		realx = e.clientX - inneroffset.left,
-		realy = e.clientY - inneroffset.top,
-		width = +$width.val(),
-		height = +$height.val(),
-		x = Math.floor(realx / roundx),
-		y = Math.floor(realy / roundy),
-		value = labels[x+"x"+y+"x"+width+"x"+height] || "";
-	
-	selected = [x, y, width, height];
-	$over.css("border-color", "green");
-	$(this).unbind("mousemove");
-	$label.focus().val(value);
-}
-
-function grid(size, paddingX, paddingY) {
-	if(size <= 1) return;
-	var width = $sprite.width(),
-		height = $sprite.height(),
-		i = 1, l = Math.ceil(width / (size + paddingX)),
-		j = 1, k = Math.ceil(height / (size + paddingY)),
-		html = "";
-	
-	//add x axis
-	for(;i<=l;i++) {
-		html += "
    ";
-	}
-	
-	//add y axis
-	for(;j<=k;j++) {
-		html += "
    ";
-	}
-	
-	$inner.html(html);
-}
-
-function gridHandler(e) {
-	grid(+$tilesize.val(), +$paddingx.val(), +$paddingy.val());
-}
-
-function overHandler(e) {
-	if(+$tilesize.val() <= 1) return;
-	
-	var tile = (+$tilesize.val()),
-		paddingx = (+$paddingx.val()),
-		paddingy = (+$paddingy.val()),
-		roundx = tile + paddingx,
-		roundy = tile + paddingy,
-		realx = e.clientX - inneroffset.left,
-		realy = e.clientY - inneroffset.top,
-		width = +$width.val(),
-		height = +$height.val(),
-		x = Math.floor(realx / roundx) * roundx,
-		y = Math.floor(realy / roundy) * roundy;
-		
-	$over.css({left: x, top: y, width: (width * (tile + paddingx) - paddingx-1), height: (height * (tile + paddingy) - paddingy-1)});
-}
-
-$(function() {
-	$grid.mousemove(overHandler).click(clickHandler);
-	
-	$tilesize.keydown(intOnly).keyup(gridHandler);
-	$paddingx.keydown(intOnly).keyup(gridHandler);
-	$paddingy.keydown(intOnly).keyup(gridHandler);
-	$width.keydown(intOnly).keyup(gridHandler);
-	$height.keydown(intOnly).keyup(gridHandler);
-	
-	$label.keypress(function() {
-		if(!selected) {
-			$(this).blur();
-			return false;
-		}
-	}).keyup(function() {
-		if(!selected) return false;
-		
-		labels[selected[0]+"x"+selected[1]+"x"+selected[2]+"x"+selected[3]] = $(this).val();
-	});
-});
\ No newline at end of file
diff --git a/builder/codemirror/css/font.js b/builder/codemirror/css/font.js
deleted file mode 100755
index 9e913b14..00000000
--- a/builder/codemirror/css/font.js
+++ /dev/null
@@ -1,15 +0,0 @@
-function waitForStyles() {
-  for (var i = 0; i < document.styleSheets.length; i++)
-    if (/googleapis/.test(document.styleSheets[i].href))
-      return document.body.className += " droid";
-  setTimeout(waitForStyles, 100);
-}
-setTimeout(function() {
-  if (/AppleWebKit/.test(navigator.userAgent) && /iP[oa]d|iPhone/.test(navigator.userAgent)) return;
-  var link = document.createElement("LINK");
-  link.type = "text/css";
-  link.rel = "stylesheet";
-  link.href = "http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans:bold";
-  document.documentElement.getElementsByTagName("HEAD")[0].appendChild(link);
-  waitForStyles();
-}, 20);
diff --git a/builder/codemirror/css/jscolors.css b/builder/codemirror/css/jscolors.css
deleted file mode 100755
index 3e1a05c0..00000000
--- a/builder/codemirror/css/jscolors.css
+++ /dev/null
@@ -1,59 +0,0 @@
-html {
-  cursor: text;
-}
-
-.editbox {
-  margin: .4em;
-  padding: 0;
-  font-family: monospace;
-  font-size: 10pt;
-  color: #ddd;
-}
-
-pre.code, .editbox {
-  color: #ddd;
-}
-
-.editbox p {
-  margin: 0;
-}
-
-span.js-punctuation {
-  color: #888;
-}
-
-span.js-operator {
-  color: #ddd;
-}
-
-span.js-keyword {
-  color: #69A7FF; font-weight:bold
-}
-
-span.js-atom {
-  color: #FF2424;
-}
-
-span.js-variable {
-  color: #ddd;
-}
-
-span.js-variabledef {
-  color: #ddd;
-}
-
-span.js-localvariable {
-  color: #ddd;
-}
-
-span.js-property {
-  color: #ddd;
-}
-
-span.js-comment {
-  color: #888;
-}
-
-span.js-string {
-  color: #C9FF82;
-}
diff --git a/builder/codemirror/js/codemirror.js b/builder/codemirror/js/codemirror.js
deleted file mode 100755
index 63751aed..00000000
--- a/builder/codemirror/js/codemirror.js
+++ /dev/null
@@ -1,582 +0,0 @@
-/* CodeMirror main module (http://codemirror.net/)
- *
- * Implements the CodeMirror constructor and prototype, which take care
- * of initializing the editor frame, and providing the outside interface.
- */
-
-// The CodeMirrorConfig object is used to specify a default
-// configuration. If you specify such an object before loading this
-// file, the values you put into it will override the defaults given
-// below. You can also assign to it after loading.
-var CodeMirrorConfig = window.CodeMirrorConfig || {};
-
-var CodeMirror = (function(){
-  function setDefaults(object, defaults) {
-    for (var option in defaults) {
-      if (!object.hasOwnProperty(option))
-        object[option] = defaults[option];
-    }
-  }
-  function forEach(array, action) {
-    for (var i = 0; i < array.length; i++)
-      action(array[i]);
-  }
-  function createHTMLElement(el) {
-    if (document.createElementNS && document.documentElement.namespaceURI !== null)
-      return document.createElementNS("http://www.w3.org/1999/xhtml", el)
-    else
-      return document.createElement(el)
-  }
-
-  // These default options can be overridden by passing a set of
-  // options to a specific CodeMirror constructor. See manual.html for
-  // their meaning.
-  setDefaults(CodeMirrorConfig, {
-    stylesheet: [],
-    path: "",
-    parserfile: [],
-    basefiles: ["util.js", "stringstream.js", "select.js", "undo.js", "editor.js", "tokenize.js"],
-    iframeClass: null,
-    passDelay: 200,
-    passTime: 50,
-    lineNumberDelay: 200,
-    lineNumberTime: 50,
-    continuousScanning: false,
-    saveFunction: null,
-    onLoad: null,
-    onChange: null,
-    undoDepth: 50,
-    undoDelay: 800,
-    disableSpellcheck: true,
-    textWrapping: true,
-    readOnly: false,
-    width: "",
-    height: "300px",
-    minHeight: 100,
-    autoMatchParens: false,
-    markParen: null,
-    unmarkParen: null,
-    parserConfig: null,
-    tabMode: "indent", // or "spaces", "default", "shift"
-    enterMode: "indent", // or "keep", "flat"
-    electricChars: true,
-    reindentOnLoad: false,
-    activeTokens: null,
-    onCursorActivity: null,
-    lineNumbers: false,
-    firstLineNumber: 1,
-    onLineNumberClick: null,
-    indentUnit: 2,
-    domain: null,
-    noScriptCaching: false,
-    incrementalLoading: false
-  });
-
-  function addLineNumberDiv(container, firstNum) {
-    var nums = createHTMLElement("div"),
-        scroller = createHTMLElement("div");
-    nums.style.position = "absolute";
-    nums.style.height = "100%";
-    if (nums.style.setExpression) {
-      try {nums.style.setExpression("height", "this.previousSibling.offsetHeight + 'px'");}
-      catch(e) {} // Seems to throw 'Not Implemented' on some IE8 versions
-    }
-    nums.style.top = "0px";
-    nums.style.left = "0px";
-    nums.style.overflow = "hidden";
-    container.appendChild(nums);
-    scroller.className = "CodeMirror-line-numbers";
-    nums.appendChild(scroller);
-    scroller.innerHTML = "
    " + firstNum + "
    ";
-    return nums;
-  }
-
-  function frameHTML(options) {
-    if (typeof options.parserfile == "string")
-      options.parserfile = [options.parserfile];
-    if (typeof options.basefiles == "string")
-      options.basefiles = [options.basefiles];
-    if (typeof options.stylesheet == "string")
-      options.stylesheet = [options.stylesheet];
-
-    var html = [""];
-    // Hack to work around a bunch of IE8-specific problems.
-    html.push("");
-    var queryStr = options.noScriptCaching ? "?nocache=" + new Date().getTime().toString(16) : "";
-    forEach(options.stylesheet, function(file) {
-      html.push("");
-    });
-    forEach(options.basefiles.concat(options.parserfile), function(file) {
-      if (!/^https?:/.test(file)) file = options.path + file;
-      html.push("
-
-
-
-
-
-
-
-
-
-
-
-
-
-
    "+key+":
    
-
-
-
-
    
-
    
-	
-	
-	
    
-		
    
-			New
-			Remove
-		
    
-		
      
-	
      
-	
-	
      
-		
      
-			New
-			Remove
-		
      
-		
        
-	
        
-	
-	
        
-		
        
-			Add
-			Remove
-		
        
-		
          
-	
          
-	
-	
          
-		
          
-			New
-			Remove
-		
          
-		
            
-	
            
-
            
-            		
-
            
-	
              
-		
            • Pointer
              • 
-		
            • Text
              • 
-		
            • Sprite Brush
              • 
-		
            • Scroll
              • 
-		
            • Polygon
              • 
-	
            
-
            
-            		
-
-
            
-	
            main
            
-	
-	
-	
            
-	
            
-		
-	
            
-
            
-
-
            
-	
            
-	
-	
            
-		
            
-			
-			
            
-		
            
-	
            
-	
-	
            
-		
            
-			
-		
            
-	
            
-	
-	
            
-	
            Clear
            
-	
-	
            
-
            
-
            
-
-
            
-	
            
-	
-	
            
-
            
-
-
            
-
            
-
-
            
-
            
-
-
            
-
-
-
            
-
            
-
-
            
-
            
-
            
-
-
            
-
            
-
            
-
-
            
-
            
-
            
-
-
            
-
            
-
            
-
            
-
-
            
-
-
            
-
-
            
-
-
            
-
-
            
-
-
            
-
-
            
-
-
            
-
-
            
-
-
            
-
            
-
            
-
-
-
            
-	
-	
-	
-	
-	
-
            
-
            
-
-
-
            
-
            
-
-
            
-	
            
-
            
-
-
\ No newline at end of file
diff --git a/crafty-local.js b/crafty-local.js
deleted file mode 100644
index c72505ee..00000000
--- a/crafty-local.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/* This file aggregates all the src/ files at runtime.
- * You just need to source this file, then any changes in src/ files will be automatically sourced.
- * Therefore, you do not need to regenerate crafty.js (by bulid.sh) anymore each time when you make changes in src/.
- */
-
-(function (window) {
-	var include = [
-		'core',
-		'intro',
-		'HashMap',
-		'2D',
-		'collision',
-		'hitbox',
-		'DOM',
-		'fps',
-		'html',
-		'storage',
-		'extensions',
-		'device',
-		'sprite',
-		'canvas',
-		'controls',
-		'animate',
-		'animation',
-		'drawing',
-		'isometric',
-		'particles',
-		'sound',
-		'text',
-		'loader',
-		'math',
-		'time',
-		'outro'
-	],
-	l = include.length, i, tr = new XMLHttpRequest(), output = '', url, base = '', scripts = document.getElementsByTagName('script');
-	for (i=0; i
-
-
-	
-	
-	
-	Asteroids
-	
-
-
-
-
\ No newline at end of file
diff --git a/demos/asteroids/game.js b/demos/asteroids/game.js
deleted file mode 100644
index e5e1cee0..00000000
--- a/demos/asteroids/game.js
+++ /dev/null
@@ -1,202 +0,0 @@
-$(document).ready(function() {
-	//init Crafty with FPS of 50 and create the canvas element
-	Crafty.init();
-	Crafty.canvas.init();
-	
-	//preload the needed assets
-	Crafty.load(["images/sprite.png", "images/bg.png"], function() {
-		//splice the spritemap
-		Crafty.sprite(64, "images/sprite.png", {
-			ship: [0,0],
-			big: [1,0],
-			medium: [2,0],
-			small: [3,0]
-		});
-
-		Crafty.audio.add("Blaster", ["space-blaster.wav", "space-blaster.mp3"])
-		
-		//start the main scene when loaded
-		Crafty.scene("main");
-	});
-	
-	Crafty.scene("main", function() {
-		Crafty.background("url('images/bg.png')");
-		
-		//score display
-		var score = Crafty.e("2D, DOM, Text")
-			.text("Score: 0")
-			.attr({x: Crafty.viewport.width - 300, y: Crafty.viewport.height - 50, w: 200, h:50})
-			.textColor("#FFFFFF");
-			
-		//player entity
-		var player = Crafty.e("2D, Canvas, ship, Controls, Collision")
-			.attr({move: {left: false, right: false, up: false, down: false}, xspeed: 0, yspeed: 0, decay: 0.9, 
-				x: Crafty.viewport.width / 2, y: Crafty.viewport.height / 2, score: 0})
-			.origin("center")
-			.bind("KeyDown", function(e) {
-				//on keydown, set the move booleans
-				if(e.keyCode === Crafty.keys.RIGHT_ARROW) {
-					this.move.right = true;
-				} else if(e.keyCode === Crafty.keys.LEFT_ARROW) {
-					this.move.left = true;
-				} else if(e.keyCode === Crafty.keys.UP_ARROW) {
-					this.move.up = true;
-				} else if (e.keyCode === Crafty.keys.SPACE) {
-					console.log("Blast");
-					Crafty.audio.play("Blaster");
-					//create a bullet entity
-					Crafty.e("2D, DOM, Color, bullet")
-						.attr({
-							x: this._x, 
-							y: this._y, 
-							w: 2, 
-							h: 5, 
-							rotation: this._rotation, 
-							xspeed: 20 * Math.sin(this._rotation / 57.3), 
-							yspeed: 20 * Math.cos(this._rotation / 57.3)
-						})
-						.color("rgb(255, 0, 0)")
-						.bind("EnterFrame", function() {
-							this.x += this.xspeed;
-							this.y -= this.yspeed;
-							
-							//destroy if it goes out of bounds
-							if(this._x > Crafty.viewport.width || this._x < 0 || this._y > Crafty.viewport.height || this._y < 0) {
-								this.destroy();
-							}
-						});
-				}
-			}).bind("KeyUp", function(e) {
-				//on key up, set the move booleans to false
-				if(e.keyCode === Crafty.keys.RIGHT_ARROW) {
-					this.move.right = false;
-				} else if(e.keyCode === Crafty.keys.LEFT_ARROW) {
-					this.move.left = false;
-				} else if(e.keyCode === Crafty.keys.UP_ARROW) {
-					this.move.up = false;
-				}
-			}).bind("EnterFrame", function() {
-				if(this.move.right) this.rotation += 5;
-				if(this.move.left) this.rotation -= 5;
-				
-				//acceleration and movement vector
-				var vx = Math.sin(this._rotation * Math.PI / 180) * 0.3,
-					vy = Math.cos(this._rotation * Math.PI / 180) * 0.3;
-				
-				//if the move up is true, increment the y/xspeeds
-				if(this.move.up) {
-					this.yspeed -= vy;
-					this.xspeed += vx;
-				} else {
-					//if released, slow down the ship
-					this.xspeed *= this.decay;
-					this.yspeed *= this.decay;
-				}
-				
-				//move the ship by the x and y speeds or movement vector
-				this.x += this.xspeed;
-				this.y += this.yspeed;
-				
-				//if ship goes out of bounds, put him back
-				if(this._x > Crafty.viewport.width) {
-					this.x = -64;
-				}
-				if(this._x < -64) {
-					this.x =  Crafty.viewport.width;
-				}
-				if(this._y > Crafty.viewport.height) {
-					this.y = -64;
-				}
-				if(this._y < -64) {
-					this.y = Crafty.viewport.height;
-				}
-				
-				//if all asteroids are gone, start again with more
-				if(asteroidCount <= 0) {
-					initRocks(lastCount, lastCount * 2);
-				}
-			}).collision()
-			.onHit("asteroid", function() {
-				//if player gets hit, restart the game
-				Crafty.scene("main");
-			});
-		
-		//keep a count of asteroids
-		var asteroidCount,
-			lastCount;
-		
-		//Asteroid component
-		Crafty.c("asteroid", {   
-			init: function() {
-				this.origin("center");
-				this.attr({
-					x: Crafty.math.randomInt(0, Crafty.viewport.width), //give it random positions, rotation and speed
-					y: Crafty.math.randomInt(0, Crafty.viewport.height),
-					xspeed: Crafty.math.randomInt(1, 5), 
-					yspeed: Crafty.math.randomInt(1, 5), 
-					rspeed: Crafty.math.randomInt(-5, 5)
-				}).bind("EnterFrame", function() {
-					this.x += this.xspeed;
-					this.y += this.yspeed;
-					this.rotation += this.rspeed;
-					
-					if(this._x > Crafty.viewport.width) {
-						this.x = -64;
-					}
-					if(this._x < -64) {
-						this.x =  Crafty.viewport.width;
-					}
-					if(this._y > Crafty.viewport.height) {
-						this.y = -64;
-					}
-					if(this._y < -64) {
-						this.y = Crafty.viewport.height;
-					}
-				}).collision()
-				.onHit("bullet", function(e) {
-					//if hit by a bullet increment the score
-					player.score += 5;
-					score.text("Score: "+player.score);
-					e[0].obj.destroy(); //destroy the bullet
-					
-					var size;
-					//decide what size to make the asteroid
-					if(this.has("big")) {
-						this.removeComponent("big").addComponent("medium");
-						size = "medium";
-					} else if(this.has("medium")) {
-						this.removeComponent("medium").addComponent("small");
-						size = "small";
-					} else if(this.has("small")) { //if the lowest size, delete self
-						asteroidCount--;
-						this.destroy();
-						return;
-					}
-					
-					var oldxspeed = this.xspeed;
-					this.xspeed = -this.yspeed;
-					this.yspeed = oldxspeed;
-					
-					asteroidCount++;
-					//split into two asteroids by creating another asteroid
-					Crafty.e("2D, DOM, "+size+", Collision, asteroid").attr({x: this._x, y: this._y});
-				});
-				
-			}
-		});
-		
-		//function to fill the screen with asteroids by a random amount
-		function initRocks(lower, upper) {
-			var rocks = Crafty.math.randomInt(lower, upper);
-			asteroidCount = rocks;
-			lastCount = rocks;
-			
-			for(var i = 0; i < rocks; i++) {
-				Crafty.e("2D, DOM, big, Collision, asteroid");
-			}
-		}
-		//first level has between 1 and 10 asteroids
-		initRocks(1, 10);
-	});
-	
-});
diff --git a/demos/asteroids/images/bg.png b/demos/asteroids/images/bg.png
deleted file mode 100644
index 85035170..00000000
Binary files a/demos/asteroids/images/bg.png and /dev/null differ
diff --git a/demos/asteroids/images/sprite.png b/demos/asteroids/images/sprite.png
deleted file mode 100644
index 63fbb65e..00000000
Binary files a/demos/asteroids/images/sprite.png and /dev/null differ
diff --git a/demos/asteroids/space-blaster.mp3 b/demos/asteroids/space-blaster.mp3
deleted file mode 100644
index 5333411c..00000000
Binary files a/demos/asteroids/space-blaster.mp3 and /dev/null differ
diff --git a/demos/asteroids/space-blaster.wav b/demos/asteroids/space-blaster.wav
deleted file mode 100644
index 665dd3d1..00000000
Binary files a/demos/asteroids/space-blaster.wav and /dev/null differ
diff --git a/demos/connect4/Connect4.htm b/demos/connect4/Connect4.htm
deleted file mode 100644
index 4c9fcc51..00000000
--- a/demos/connect4/Connect4.htm
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-	
-	
-	Connect 4
-	
-
-
-
-
diff --git a/demos/connect4/connect4.js b/demos/connect4/connect4.js
deleted file mode 100644
index 1dd39a6f..00000000
--- a/demos/connect4/connect4.js
+++ /dev/null
@@ -1,177 +0,0 @@
-window.onload = function () {
-	Crafty.init(600, 500);
-	Crafty.canvas.init();
-
-	Crafty.sprite(64, "images/sprite.png", {
-		red: [0, 0],
-		yellow: [1, 0],
-		empty: [2, 0]
-	});
-
-	var turn = 0, //turn based
-		board = [],
-		COLUMN_FULL = -2,
-		EMPTY = -1,
-		YELLOW = 0,
-		RED = 1;
-
-	Crafty.scene("game", function () {
-
-		//generate board
-		for (var i = 0; i < 7; i++) {
-			board[i] = []; //init board
-			for (var j = 0; j < 6; j++) {
-				Crafty.e("2D, Canvas, empty").attr({ x: i * 64, y: j * 64 + 100, z: 2 });
-				board[i][j] = EMPTY; //set it to empty
-			}
-		}
-
-		Crafty.c("piece", {
-			init: function () {
-				this.z = 3;
-				this.requires("Mouse, Gravity, Draggable, Tween");
-				this.bind("StopDrag", function() {
-					var column = Math.round(this._x / 64);
-					//this.x = column * 64;
-          this.tween({x:column * 64}, 20)
-					this.gravity("stopper");
-					this.unbind("MouseDown");
-
-					reset(column);
-				});
-			}
-		});
-
-		var current;
-		function reset(column) {
-			var row = findEmptyRow(column);
-			if(row !== COLUMN_FULL && column >= 0 && column < 7) {
-				board[column][row] = turn;
-
-				if(checkFour(column, row)) {
-					win(turn);
-					return;
-				}
-
-				turn ^= 1; //alternate turns
-				current = Crafty.e("2D, Canvas, piece, stopper," + (turn ? "red" : "yellow")).attr({ x: 495, y: 420 });
-			} else {
-				//dont' place
-        var x=current.x;
-        var y=current.y;
-				current.destroy();
-				current = Crafty.e("2D, Canvas, piece, stopper," + (turn ? "red" : "yellow"))
-        .attr({x: x, y: y})
-        .tween({x: 495, y: 420}, 20);
-			}
-		}
-		current = Crafty.e("2D, Canvas, piece, stopper, yellow").attr({ x: 495, y: 420 });
-
-		var ground = Crafty.e("2D, stopper").attr({ y: Crafty.viewport.height - 16, w: Crafty.viewport.width, h: 20 });
-		var bg = Crafty.e("2D, Canvas, Image").image("images/bg.png").attr({ z: -1 });
-	});
-	
-	Crafty.scene("win", function() {
-		var bg = Crafty.e("2D, DOM, Image").image("images/win.png", "no-repeat").attr({w: 600, h: 500, z: -1});
-		Crafty.e("2D, DOM, Text").attr({x: 220, y: 200}).text(turn ? "RED" : "YELLOW").textFont({
-        "family": "Arial"
-        , "size": "30pt"
-      });
-	});
-
-	function win(turn) {
-		Crafty.scene("win");
-	}
-
-	Crafty.scene("game");//start the game
-	function findEmptyRow(column) {
-		if(!board[column]) return;
-		for(var i = 0; i < board[column].length; i++) {
-			if(board[column][i] == EMPTY)
-				return i;
-		}
-		return COLUMN_FULL;
-	}
-
-	function checkFour(column, row) {
-		if(checkVertical(column, row)) return true;
-		if(checkHorizontal(column, row)) return true;
-		if(checkLeftDiagonal(column, row)) return true;
-		if(checkRightDiagonal(column, row)) return true;
-		return false;
-	}
-
-	function checkVertical(column, row) {
-		if(row < 3) return false;
-		for(var i = row; i > row - 4; i--) {
-			if(board[column][i] != turn) return false;
-		}
-		return true;
-	}
-
-	function checkHorizontal(column, row) {
-		var counter = 1;
-		for(var i = column - 1; i >= 0; i--) {
-			if(board[i][row] != turn) break;
-			counter++;
-		}
-
-		for(var j = column + 1; j < 7; j++) {
-			if(board[j][row] != turn) break;
-			counter++;
-		}
-		return counter >= 4;
-	}
-
-	function checkLeftDiagonal(column, row) {
-		var counter = 1;
-		var tmp_row = row - 1;
-		var tmp_column = column - 1;
-
-		while(tmp_row >= 0 && tmp_column >= 0) {
-			if(board[tmp_column][tmp_row] == turn) {
-				counter++;
-				tmp_row--;
-				tmp_column--;
-			} else break;
-		}
-
-		row += 1;
-		column += 1;
-
-		while(row < 6 && column < 7) {
-			if(board[column][row] == turn) {
-				counter++;
-				row++;
-				column++;
-			} else { break; }
-		}
-		return counter >= 4;
-	}
-
-	function checkRightDiagonal(column, row) {
-		var counter = 1;
-		var tmp_row = row + 1;
-		var tmp_column = column - 1;
-
-		while(tmp_row < 6 && tmp_column >= 0) {
-			if(board[tmp_column][tmp_row] == turn) {
-				counter++;
-				tmp_row++;
-				tmp_column--;
-			} else break;
-		}
-
-		row -= 1;
-		column += 1;
-
-		while(row >= 0 && column < 7) {
-			if(board[column][row] == turn) {
-				counter++;
-				row--;
-				column++;
-			} else break;
-		}
-		return counter >= 4;
-	}
-};
diff --git a/demos/connect4/images/bg.png b/demos/connect4/images/bg.png
deleted file mode 100644
index 17979663..00000000
Binary files a/demos/connect4/images/bg.png and /dev/null differ
diff --git a/demos/connect4/images/sprite.png b/demos/connect4/images/sprite.png
deleted file mode 100644
index 1e9f8ca7..00000000
Binary files a/demos/connect4/images/sprite.png and /dev/null differ
diff --git a/demos/connect4/images/win.png b/demos/connect4/images/win.png
deleted file mode 100644
index f020615c..00000000
Binary files a/demos/connect4/images/win.png and /dev/null differ
diff --git a/demos/fruitassassin/assassin.js b/demos/fruitassassin/assassin.js
deleted file mode 100644
index 0029218f..00000000
--- a/demos/fruitassassin/assassin.js
+++ /dev/null
@@ -1,76 +0,0 @@
-window.onload = function() {
-	Crafty.init(550, 440);
-	
-	Crafty.sprite(64, "images/fruit.png", {
-		banana: [0,0],
-		apple: [1,0],
-		watermelon: [2,0],
-		orange: [3,0],
-		coconut: [4,0],
-		lemon: [5,0]
-	});
-	
-	Crafty.background("url('images/bg.png') no-repeat");
-	
-	var scoreEnt = Crafty.e("2D, DOM, Text").attr({x: 5, y: 5, w: Crafty.viewport.width, h: 50}).text("Score: 0"),
-		score = 0;
-	
-	Crafty.c("Fruit", {
-		_choice: ["banana", "apple", "watermelon", "orange", "coconut", "lemon"],
-		_xspeed: 0,
-		_yspeed: 0,
-		
-		init: function() {
-			var index = Crafty.math.randomInt(0, 5),
-				fruit = this._choice[index],
-				rotation = Crafty.math.randomInt(8, 12),
-				direction = Crafty.math.randomInt(0, 1);
-				
-			this.addComponent(fruit).origin("center");
-			this.y = Crafty.viewport.height;
-			this._yspeed = Crafty.math.randomInt(8, 12);
-			this.z = 1;
-			
-			if(direction) {
-				this.x = 0;
-				this._xspeed = Crafty.math.randomInt(3, 5);
-			} else {
-				this.x = Crafty.viewport.width;
-				this._xspeed = -1 * Crafty.math.randomInt(3, 5);
-			}
-			
-			this.bind("EnterFrame", function() {
-				this.rotation += rotation;
-				this.y -= this._yspeed;
-				this.x += this._xspeed;
-				
-				if(this._y > Crafty.viewport.height) {
-					this.destroy();
-					if(!this.hit) {
-						score -= (index+1) * 10;
-						scoreEnt.text("Score: "+score);
-					}
-				}
-			});
-			
-			this.bind("MouseOver", function() {
-				this.sprite(index, 1);
-				this.hit = true;
-				score += (index+1) * 10;
-				scoreEnt.text("Score: "+score);
-				
-				Crafty.e("2D, DOM, "+fruit).attr({z:0, x: this._x, y: this._y, alpha: 0.2}).sprite(index, 2);
-				
-				this.unbind("MouseOver");
-			});
-		}
-	});
-	
-	Crafty.e().bind("EnterFrame", function(e) {
-		var sparsity = Crafty.math.randomInt(10, 50);
-		if(e.frame % sparsity == 0) {
-			Crafty.e("2D, DOM, Fruit, Gravity, Mouse").gravity();
-		}
-	});
-	
-};
diff --git a/demos/fruitassassin/fruitassassin.htm b/demos/fruitassassin/fruitassassin.htm
deleted file mode 100644
index 6d37b127..00000000
--- a/demos/fruitassassin/fruitassassin.htm
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-	
-	
-	
-
-
-
-
-
diff --git a/demos/fruitassassin/images/bg.png b/demos/fruitassassin/images/bg.png
deleted file mode 100644
index 073fd00a..00000000
Binary files a/demos/fruitassassin/images/bg.png and /dev/null differ
diff --git a/demos/fruitassassin/images/fruit.png b/demos/fruitassassin/images/fruit.png
deleted file mode 100644
index 90407f9e..00000000
Binary files a/demos/fruitassassin/images/fruit.png and /dev/null differ
diff --git a/demos/isometric/game.js b/demos/isometric/game.js
deleted file mode 100644
index 39b7be54..00000000
--- a/demos/isometric/game.js
+++ /dev/null
@@ -1,59 +0,0 @@
-//pro tip: see also this work in progress by Hex http://jsfiddle.net/hexaust/HV4TX/
-window.onload = function() {
-	Crafty.init();
-
-	Crafty.sprite(128, "images/sprite.png", {
-		grass: [0,0,1,1],
-		stone: [1,0,1,1]
-	});
-
-	iso = Crafty.isometric.size(128);
-	var z = 0;
-	for(var i = 20; i >= 0; i--) {
-		for(var y = 0; y < 20; y++) {
-			var which = Crafty.math.randomInt(0,1);
-			var tile = Crafty.e("2D, DOM, "+ (!which ? "grass" : "stone") +", Mouse")
-			.attr('z',i+1 * y+1)
-      .areaMap([64,0],[128,32],[128,96],[64,128],[0,96],[0,32])
-      .bind("Click", function(e) {
-				//destroy on right click
-        //right click seems not work in Mac OS
-        //delete it
-        console.log(e.button);
-				/*if(e.button === 2)*/ this.destroy();
-			}).bind("MouseOver", function() {
-				if(this.has("grass")) {
-					this.sprite(0,1,1,1);
-				} else {
-					this.sprite(1,1,1,1);
-				}
-			}).bind("MouseOut", function() {
-				if(this.has("grass")) {
-					this.sprite(0,0,1,1);
-				} else {
-					this.sprite(1,0,1,1);
-				}
-			});
-			
-			iso.place(i,y,0, tile);
-		}
-	}
-	
-	Crafty.addEvent(this, Crafty.stage.elem, "mousedown", function(e) {
-		if(e.button > 1) return;
-		var base = {x: e.clientX, y: e.clientY};
-
-		function scroll(e) {
-			var dx = base.x - e.clientX,
-				dy = base.y - e.clientY;
-				base = {x: e.clientX, y: e.clientY};
-			Crafty.viewport.x -= dx;
-			Crafty.viewport.y -= dy;
-		};
-
-		Crafty.addEvent(this, Crafty.stage.elem, "mousemove", scroll);
-		Crafty.addEvent(this, Crafty.stage.elem, "mouseup", function() {
-			Crafty.removeEvent(this, Crafty.stage.elem, "mousemove", scroll);
-		});
-	});
-};
diff --git a/demos/isometric/images/sprite.png b/demos/isometric/images/sprite.png
deleted file mode 100644
index 7210ff2a..00000000
Binary files a/demos/isometric/images/sprite.png and /dev/null differ
diff --git a/demos/isometric/isometric.htm b/demos/isometric/isometric.htm
deleted file mode 100644
index e08c82c9..00000000
--- a/demos/isometric/isometric.htm
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-	
-	
-	Iso
-	
-
-
-
-
diff --git a/demos/rpg/game.js b/demos/rpg/game.js
deleted file mode 100644
index cda53571..00000000
--- a/demos/rpg/game.js
+++ /dev/null
@@ -1,134 +0,0 @@
-window.onload = function() {
-	//start crafty
-	Crafty.init(400, 320);
-	Crafty.canvas.init();
-	
-	//turn the sprite map into usable components
-	Crafty.sprite(16, "images/sprite.png", {
-		grass1: [0,0],
-		grass2: [1,0],
-		grass3: [2,0],
-		grass4: [3,0],
-		flower: [0,1],
-		bush1: [0,2],
-		bush2: [1,2],
-		player: [0,3]
-	});
-	
-	//method to randomy generate the map
-	function generateWorld() {
-		//generate the grass along the x-axis
-		for(var i = 0; i < 25; i++) {
-			//generate the grass along the y-axis
-			for(var j = 0; j < 20; j++) {
-				grassType = Crafty.math.randomInt(1, 4);
-				Crafty.e("2D, Canvas, grass"+grassType)
-					.attr({x: i * 16, y: j * 16});
-				
-				//1/50 chance of drawing a flower and only within the bushes
-				if(i > 0 && i < 24 && j > 0 && j < 19 && Crafty.math.randomInt(0, 50) > 49) {
-					Crafty.e("2D, DOM, flower, solid, SpriteAnimation")
-						.attr({x: i * 16, y: j * 16})
-						.animate("wind", 0, 1, 3)
-						.animate("wind", 80, -1);
-				}
-			}
-		}
-		
-		//create the bushes along the x-axis which will form the boundaries
-		for(var i = 0; i < 25; i++) {
-			Crafty.e("2D, Canvas, wall_top, solid, bush"+Crafty.math.randomInt(1,2))
-				.attr({x: i * 16, y: 0, z: 2});
-			Crafty.e("2D, DOM, wall_bottom, solid, bush"+Crafty.math.randomInt(1,2))
-				.attr({x: i * 16, y: 304, z: 2});
-		}
-		
-		//create the bushes along the y-axis
-		//we need to start one more and one less to not overlap the previous bushes
-		for(var i = 1; i < 19; i++) {
-			Crafty.e("2D, DOM, wall_left, solid, bush"+Crafty.math.randomInt(1,2))
-				.attr({x: 0, y: i * 16, z: 2});
-			Crafty.e("2D, Canvas, wall_right, solid, bush"+Crafty.math.randomInt(1,2))
-				.attr({x: 384, y: i * 16, z: 2});
-		}
-	}
-	
-	//the loading screen that will display while our assets load
-	Crafty.scene("loading", function() {
-		//load takes an array of assets and a callback when complete
-		Crafty.load(["images/sprite.png"], function () {
-			Crafty.scene("main"); //when everything is loaded, run the main scene
-		});
-		
-		//black background with some loading text
-		Crafty.background("#000");
-		Crafty.e("2D, DOM, Text").attr({w: 100, h: 20, x: 150, y: 120})
-			.text("Loading")
-			.css({"text-align": "center"});
-	});
-	
-	//automatically play the loading scene
-	Crafty.scene("loading");
-	
-	Crafty.scene("main", function() {
-		generateWorld();
-		
-		Crafty.c('Hero', {
-			init: function() {
-					//setup animations
-					this.requires("SpriteAnimation, Collision")
-					.animate("walk_left", 6, 3, 8)
-					.animate("walk_right", 9, 3, 11)
-					.animate("walk_up", 3, 3, 5)
-					.animate("walk_down", 0, 3, 2)
-					//change direction when a direction change event is received
-					.bind("NewDirection",
-						function (direction) {
-							if (direction.x < 0) {
-								if (!this.isPlaying("walk_left"))
-									this.stop().animate("walk_left", 10, -1);
-							}
-							if (direction.x > 0) {
-								if (!this.isPlaying("walk_right"))
-									this.stop().animate("walk_right", 10, -1);
-							}
-							if (direction.y < 0) {
-								if (!this.isPlaying("walk_up"))
-									this.stop().animate("walk_up", 10, -1);
-							}
-							if (direction.y > 0) {
-								if (!this.isPlaying("walk_down"))
-									this.stop().animate("walk_down", 10, -1);
-							}
-							if(!direction.x && !direction.y) {
-								this.stop();
-							}
-					})
-					// A rudimentary way to prevent the user from passing solid areas
-					.bind('Moved', function(from) {
-						if(this.hit('solid')){
-							this.attr({x: from.x, y:from.y});
-						}
-					});
-				return this;
-			}
-		});
-
-		Crafty.c("RightControls", {
-			init: function() {
-				this.requires('Multiway');
-			},
-
-			rightControls: function(speed) {
-				this.multiway(speed, {UP_ARROW: -90, DOWN_ARROW: 90, RIGHT_ARROW: 0, LEFT_ARROW: 180})
-				return this;
-			}
-
-		});
-		
-		//create our player entity with some premade components
-		player = Crafty.e("2D, Canvas, player, RightControls, Hero, Animate, Collision")
-			.attr({x: 160, y: 144, z: 1})
-			.rightControls(1);
-	});
-};
\ No newline at end of file
diff --git a/demos/rpg/images/sprite.png b/demos/rpg/images/sprite.png
deleted file mode 100644
index 08aca23d..00000000
Binary files a/demos/rpg/images/sprite.png and /dev/null differ
diff --git a/demos/rpg/rpg.htm b/demos/rpg/rpg.htm
deleted file mode 100644
index 886fb539..00000000
--- a/demos/rpg/rpg.htm
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-	
-	
-	Tutorial
-	
-
-
-
-
\ No newline at end of file
diff --git a/package.json b/package.json
index 2b3982b7..b1fa5766 100644
--- a/package.json
+++ b/package.json
@@ -1,55 +1,75 @@
-{
-    "name": "crafty",
-    "version": "0.5.4",
-    "title": "Crafty game framework",
-    "author": {
-        "name": "Louis Stowasser",
-        "url": "http://craftyengine.com/"
+{
+  "name": "crafty",
+  "version": "0.6.0",
+  "title": "Crafty game framework",
+  "author": {
+    "name": "Louis Stowasser",
+    "url": "http://craftyjs.com/"
+  },
+  "branches": {
+    "develop": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/craftyjs/Crafty.git"
+  },
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "http://www.opensource.org/licenses/mit-license.php"
     },
-    "branches" : { "develop" : true },
-    "licenses": [
-        {
-            "type": "MIT",
-            "url": "http://www.opensource.org/licenses/mit-license.php"
-        },
-		{
-            "type": "GPL",
-            "url": "http://www.opensource.org/licenses/gpl-license.php"
-        }
-    ],
-    "description": "Crafty is a modern component and event based framework for javascript games that targets DOM and canvas. Check out the DEV version if you want to play with the latest and greatest.",
-    "keywords": [
-        "framework",
-        "javascript"
-    ],
-    "jsfiddle" : "disable",
-    "homepage": "https://github.com/craftyjs/Crafty",
-    "files": [
-        "src/license.txt",
-        "src/core.js",
-        "src/intro.js",
-        "src/HashMap.js",
-        "src/2D.js",
-        "src/collision.js",
-        "src/hitbox.js",
-        "src/DOM.js",
-        "src/html.js",
-        "src/storage.js",
-        "src/extensions.js",
-        "src/device.js",
-        "src/sprite.js",
-        "src/canvas.js",
-        "src/controls.js",
-        "src/animation.js",
-        "src/drawing.js",
-        "src/isometric.js",
-		"src/diamondiso.js",
-        "src/particles.js",
-        "src/sound.js",
-        "src/text.js",
-        "src/loader.js",
-        "src/math.js",
-        "src/time.js",
-        "src/outro.js"
-    ]
-}
\ No newline at end of file
+    {
+      "type": "GPL",
+      "url": "http://www.opensource.org/licenses/gpl-license.php"
+    }
+  ],
+  "description": "Crafty is a modern component and event based framework for javascript games that targets DOM and canvas. Check out the DEV version if you want to play with the latest and greatest.",
+  "keywords": [
+    "framework",
+    "javascript"
+  ],
+  "scripts": {
+    "test": "grunt check"
+  },
+  "jsfiddle": "disable",
+  "homepage": "https://github.com/craftyjs/Crafty",
+  "files": [
+    "src/core.js",
+    "src/HashMap.js",
+    "src/2D.js",
+    "src/collision.js",
+    "src/DOM.js",
+    "src/html.js",
+    "src/storage.js",
+    "src/extensions.js",
+    "src/viewport.js",
+    "src/device.js",
+    "src/sprite.js",
+    "src/canvas.js",
+    "src/controls.js",
+    "src/animation.js",
+    "src/drawing.js",
+    "src/isometric.js",
+    "src/diamondiso.js",
+    "src/particles.js",
+    "src/sound.js",
+    "src/text.js",
+    "src/loader.js",
+    "src/math.js",
+    "src/time.js",
+    "src/DebugLayer.js"
+  ],
+  "dependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-uglify": "0.2.0",
+    "grunt-contrib-concat": "0.3.0",
+    "grunt-contrib-jshint": "0.5.2",
+    "grunt-contrib-qunit": "0.2.1",
+    "grunt-jsvalidate": "0.2.1",
+    "marked": "0.2.9",
+    "coffee-script": "1.6.3",
+    "grunt-browserify": "~1.2.9",
+    "grunt-banner": "~0.2.0",
+    "grunt-contrib-watch": "~0.5.3"
+  }
+}
diff --git a/src/2D.js b/src/2D.js
index 4dfab973..a4c4bf0f 100644
--- a/src/2D.js
+++ b/src/2D.js
@@ -1,1035 +1,1262 @@
+var Crafty = require('./core.js'),
+    document = window.document,
+    HashMap = require('./HashMap.js');
+// Crafty._rectPool 
+//
+// This is a private object used internally by 2D methods
+// Cascade and _attr need to keep track of an entity's old position,
+// but we want to avoid creating temp objects every time an attribute is set.
+// The solution is to have a pool of objects that can be reused.
+//
+// The current implementation makes a BIG ASSUMPTION:  that if multiple rectangles are requested, 
+// the later one is recycled before any preceding ones.  This matches how they are used in the code.
+// Each rect is created by a triggered event, and will be recycled by the time the event is complete.
+Crafty._rectPool = (function () {
+    var pool = [],
+        pointer = 0;
+    return {
+        get: function (x, y, w, h) {
+            if (pool.length <= pointer)
+                pool.push({});
+            var r = pool[pointer++];
+            r._x = x;
+            r._y = y;
+            r._w = w;
+            r._h = h;
+            return r;
+        },
+
+        copy: function (o) {
+            if (pool.length <= pointer)
+                pool.push({});
+            var r = pool[pointer++];
+            r._x = o._x;
+            r._y = o._y;
+            r._w = o._w;
+            r._h = o._h;
+            return r;
+        },
+
+        recycle: function (o) {
+            pointer--;
+        }
+    };
+})();
+
+
 /**@
-* #Crafty.map
-* @category 2D
-* Functions related with querying entities.
-* @see Crafty.HashMap
-*/
-Crafty.map = new Crafty.HashMap();
+ * #Crafty.map
+ * @category 2D
+ * Functions related with querying entities.
+ * @see Crafty.HashMap
+ */
+Crafty.map = new HashMap();
 var M = Math,
-	Mc = M.cos,
-	Ms = M.sin,
-	PI = M.PI,
-	DEG_TO_RAD = PI / 180;
+    Mc = M.cos,
+    Ms = M.sin,
+    PI = M.PI,
+    DEG_TO_RAD = PI / 180;
 
 
 /**@
-* #2D
-* @category 2D
-* Component for any entity that has a position on the stage.
-* @trigger Move - when the entity has moved - { _x:Number, _y:Number, _w:Number, _h:Number } - Old position
-* @trigger Change - when the entity has moved - { _x:Number, _y:Number, _w:Number, _h:Number } - Old position
-* @trigger Rotate - when the entity is rotated - { cos:Number, sin:Number, deg:Number, rad:Number, o: {x:Number, y:Number}, matrix: {M11, M12, M21, M22} }
-*/
+ * #2D
+ * @category 2D
+ * Component for any entity that has a position on the stage.
+ * @trigger Move - when the entity has moved - { _x:Number, _y:Number, _w:Number, _h:Number } - Old position
+ * @trigger Change - when the entity has moved - { _x:Number, _y:Number, _w:Number, _h:Number } - Old position
+ * @trigger Rotate - when the entity is rotated - { cos:Number, sin:Number, deg:Number, rad:Number, o: {x:Number, y:Number}, matrix: {M11, M12, M21, M22} }
+ */
 Crafty.c("2D", {
-/**@
-	* #.x
-	* @comp 2D
-	* The `x` position on the stage. When modified, will automatically be redrawn.
-	* Is actually a getter/setter so when using this value for calculations and not modifying it,
-	* use the `._x` property.
-	* @see ._attr
-	*/
-	_x: 0,
-	/**@
-	* #.y
-	* @comp 2D
-	* The `y` position on the stage. When modified, will automatically be redrawn.
-	* Is actually a getter/setter so when using this value for calculations and not modifying it,
-	* use the `._y` property.
-	* @see ._attr
-	*/
-	_y: 0,
-	/**@
-	* #.w
-	* @comp 2D
-	* The width of the entity. When modified, will automatically be redrawn.
-	* Is actually a getter/setter so when using this value for calculations and not modifying it,
-	* use the `._w` property.
-	*
-	* Changing this value is not recommended as canvas has terrible resize quality and DOM will just clip the image.
-	* @see ._attr
-	*/
-	_w: 0,
-	/**@
-	* #.h
-	* @comp 2D
-	* The height of the entity. When modified, will automatically be redrawn.
-	* Is actually a getter/setter so when using this value for calculations and not modifying it,
-	* use the `._h` property.
-	*
-	* Changing this value is not recommended as canvas has terrible resize quality and DOM will just clip the image.
-	* @see ._attr
-	*/
-	_h: 0,
-	/**@
-	* #.z
-	* @comp 2D
-	* The `z` index on the stage. When modified, will automatically be redrawn.
-	* Is actually a getter/setter so when using this value for calculations and not modifying it,
-	* use the `._z` property.
-	*
-	* A higher `z` value will be closer to the front of the stage. A smaller `z` value will be closer to the back.
-	* A global Z index is produced based on its `z` value as well as the GID (which entity was created first).
-	* Therefore entities will naturally maintain order depending on when it was created if same z value.
-	*
-	* `z` is required to be an integer, e.g. `z=11.2` is not allowed.
-	* @see ._attr
-	*/
-	_z: 0,
-	/**@
-	* #.rotation
-	* @comp 2D
-	* The rotation state of the entity, in clockwise degrees.
-	* `this.rotation = 0` sets it to its original orientation; `this.rotation = 10`
-	* sets it to 10 degrees clockwise from its original orientation;
-	* `this.rotation = -10` sets it to 10 degrees counterclockwise from its
-	* original orientation, etc.
-	* 
-	* When modified, will automatically be redrawn. Is actually a getter/setter
-	* so when using this value for calculations and not modifying it,
-	* use the `._rotation` property.
-	*
-	* `this.rotation = 0` does the same thing as `this.rotation = 360` or `720` or
-	* `-360` or `36000` etc. So you can keep increasing or decreasing the angle for continuous
-	* rotation. (Numerical errors do not occur until you get to millions of degrees.)
-	*
-	* The default is to rotate the entity around its (initial) top-left corner; use
-	* `.origin()` to change that.
-	*
-	* @see ._attr, .origin
-	*/
-	_rotation: 0,
-	/**@
-	* #.alpha
-	* @comp 2D
-	* Transparency of an entity. Must be a decimal value between 0.0 being fully transparent to 1.0 being fully opaque.
-	*/
-	_alpha: 1.0,
-	/**@
-	* #.visible
-	* @comp 2D
-	* If the entity is visible or not. Accepts a true or false value.
-	* Can be used for optimization by setting an entities visibility to false when not needed to be drawn.
-	*
-	* The entity will still exist and can be collided with but just won't be drawn.
-  * @see Crafty.DrawManager.draw, Crafty.DrawManager.drawAll
-	*/
-	_visible: true,
-
-	/**@
-	* #._globalZ
-	* @comp 2D
-	* When two entities overlap, the one with the larger `_globalZ` will be on top of the other.
-	* @see Crafty.DrawManager.draw, Crafty.DrawManager.drawAll
-	*/
-	_globalZ: null,
-
-	_origin: null,
-	_mbr: null,
-	_entry: null,
-	_children: null,
-	_parent: null,
-	_changed: false,
-
-	_defineGetterSetter_setter: function() {
-		//create getters and setters using __defineSetter__ and __defineGetter__
-		this.__defineSetter__('x', function (v) { this._attr('_x', v); });
-		this.__defineSetter__('y', function (v) { this._attr('_y', v); });
-		this.__defineSetter__('w', function (v) { this._attr('_w', v); });
-		this.__defineSetter__('h', function (v) { this._attr('_h', v); });
-		this.__defineSetter__('z', function (v) { this._attr('_z', v); });
-		this.__defineSetter__('rotation', function (v) { this._attr('_rotation', v); });
-		this.__defineSetter__('alpha', function (v) { this._attr('_alpha', v); });
-		this.__defineSetter__('visible', function (v) { this._attr('_visible', v); });
-
-		this.__defineGetter__('x', function () { return this._x; });
-		this.__defineGetter__('y', function () { return this._y; });
-		this.__defineGetter__('w', function () { return this._w; });
-		this.__defineGetter__('h', function () { return this._h; });
-		this.__defineGetter__('z', function () { return this._z; });
-		this.__defineGetter__('rotation', function () { return this._rotation; });
-		this.__defineGetter__('alpha', function () { return this._alpha; });
-		this.__defineGetter__('visible', function () { return this._visible; });
-		this.__defineGetter__('parent', function () { return this._parent; });
-		this.__defineGetter__('numChildren', function () { return this._children.length; });
-	},
-
-	_defineGetterSetter_defineProperty: function() {
-		Object.defineProperty(this, 'x', {
-				set: function (v) { this._attr('_x', v); }
-				, get: function () { return this._x; }
-				, configurable: true
-			});
-
-		Object.defineProperty(this, 'y', {
-				set: function (v) { this._attr('_y', v); }
-				, get: function () { return this._y; }
-				, configurable: true
-			});
-
-		Object.defineProperty(this, 'w', {
-				set: function (v) { this._attr('_w', v); }
-				, get: function () { return this._w; }
-				, configurable: true
-			});
-
-		Object.defineProperty(this, 'h', {
-				set: function (v) { this._attr('_h', v); }
-				, get: function () { return this._h; }
-				, configurable: true
-			});
-
-		Object.defineProperty(this, 'z', {
-				set: function (v) { this._attr('_z', v); }
-				, get: function () { return this._z; }
-				, configurable: true
-			});
-
-		Object.defineProperty(this, 'rotation', {
-			set: function (v) { this._attr('_rotation', v); }
-			, get: function () { return this._rotation; }
-			, configurable: true
-		});
-
-		Object.defineProperty(this, 'alpha', {
-			set: function (v) { this._attr('_alpha', v); }
-			, get: function () { return this._alpha; }
-			, configurable: true
-		});
-
-		Object.defineProperty(this, 'visible', {
-			set: function (v) { this._attr('_visible', v); }
-			, get: function () { return this._visible; }
-			, configurable: true
-		});
-	},
-
-	_defineGetterSetter_fallback: function() {
-		//set the public properties to the current private properties
-		this.x = this._x;
-		this.y = this._y;
-		this.w = this._w;
-		this.h = this._h;
-		this.z = this._z;
-		this.rotation = this._rotation;
-		this.alpha = this._alpha;
-		this.visible = this._visible;
-
-		//on every frame check for a difference in any property
-		this.bind("EnterFrame", function () {
-			//if there are differences between the public and private properties
-			if (this.x !== this._x || this.y !== this._y ||
-				this.w !== this._w || this.h !== this._h ||
-				this.z !== this._z || this.rotation !== this._rotation ||
-				this.alpha !== this._alpha || this.visible !== this._visible) {
-
-				//save the old positions
-				var old = this.mbr() || this.pos();
-
-				//if rotation has changed, use the private rotate method
-				if (this.rotation !== this._rotation) {
-					this._rotate(this.rotation);
-				} else {
-					//update the MBR
-					var mbr = this._mbr, moved = false;
-					// If the browser doesn't have getters or setters,
-					// {x, y, w, h, z} and {_x, _y, _w, _h, _z} may be out of sync,
-					// in which case t checks if they are different on tick and executes the Change event.
-					if (mbr) { //check each value to see which has changed
-						if (this.x !== this._x) { mbr._x -= this.x - this._x; moved = true; }
-						else if (this.y !== this._y) { mbr._y -= this.y - this._y; moved = true; }
-						else if (this.w !== this._w) { mbr._w -= this.w - this._w; moved = true; }
-						else if (this.h !== this._h) { mbr._h -= this.h - this._h; moved = true; }
-						else if (this.z !== this._z) { mbr._z -= this.z - this._z; moved = true; }
-					}
-
-					//if the moved flag is true, trigger a move
-					if (moved) this.trigger("Move", old);
-				}
-
-				//set the public properties to the private properties
-				this._x = this.x;
-				this._y = this.y;
-				this._w = this.w;
-				this._h = this.h;
-				this._z = this.z;
-				this._rotation = this.rotation;
-				this._alpha = this.alpha;
-				this._visible = this.visible;
-
-				//trigger the changes
-				this.trigger("Change", old);
-				//without this entities weren't added correctly to Crafty.map.map in IE8.
-				//not entirely sure this is the best way to fix it though
-				this.trigger("Move", old);
-			}
-		});
-  },
-
-	init: function() {
-		this._globalZ = this[0];
-		this._origin = { x: 0, y: 0 };
-		this._children = [];
-
-		if(Crafty.support.setter) {
-      this._defineGetterSetter_setter();
-		} else if (Crafty.support.defineProperty) {
-			//IE9 supports Object.defineProperty
-      this._defineGetterSetter_defineProperty();
-		} else {
-			/*
+    /**@
+     * #.x
+     * @comp 2D
+     * The `x` position on the stage. When modified, will automatically be redrawn.
+     * Is actually a getter/setter so when using this value for calculations and not modifying it,
+     * use the `._x` property.
+     * @see ._attr
+     */
+    _x: 0,
+    /**@
+     * #.y
+     * @comp 2D
+     * The `y` position on the stage. When modified, will automatically be redrawn.
+     * Is actually a getter/setter so when using this value for calculations and not modifying it,
+     * use the `._y` property.
+     * @see ._attr
+     */
+    _y: 0,
+    /**@
+     * #.w
+     * @comp 2D
+     * The width of the entity. When modified, will automatically be redrawn.
+     * Is actually a getter/setter so when using this value for calculations and not modifying it,
+     * use the `._w` property.
+     *
+     * Changing this value is not recommended as canvas has terrible resize quality and DOM will just clip the image.
+     * @see ._attr
+     */
+    _w: 0,
+    /**@
+     * #.h
+     * @comp 2D
+     * The height of the entity. When modified, will automatically be redrawn.
+     * Is actually a getter/setter so when using this value for calculations and not modifying it,
+     * use the `._h` property.
+     *
+     * Changing this value is not recommended as canvas has terrible resize quality and DOM will just clip the image.
+     * @see ._attr
+     */
+    _h: 0,
+    /**@
+     * #.z
+     * @comp 2D
+     * The `z` index on the stage. When modified, will automatically be redrawn.
+     * Is actually a getter/setter so when using this value for calculations and not modifying it,
+     * use the `._z` property.
+     *
+     * A higher `z` value will be closer to the front of the stage. A smaller `z` value will be closer to the back.
+     * A global Z index is produced based on its `z` value as well as the GID (which entity was created first).
+     * Therefore entities will naturally maintain order depending on when it was created if same z value.
+     *
+     * `z` is required to be an integer, e.g. `z=11.2` is not allowed.
+     * @see ._attr
+     */
+    _z: 0,
+    /**@
+     * #.rotation
+     * @comp 2D
+     * The rotation state of the entity, in clockwise degrees.
+     * `this.rotation = 0` sets it to its original orientation; `this.rotation = 10`
+     * sets it to 10 degrees clockwise from its original orientation;
+     * `this.rotation = -10` sets it to 10 degrees counterclockwise from its
+     * original orientation, etc.
+     *
+     * When modified, will automatically be redrawn. Is actually a getter/setter
+     * so when using this value for calculations and not modifying it,
+     * use the `._rotation` property.
+     *
+     * `this.rotation = 0` does the same thing as `this.rotation = 360` or `720` or
+     * `-360` or `36000` etc. So you can keep increasing or decreasing the angle for continuous
+     * rotation. (Numerical errors do not occur until you get to millions of degrees.)
+     *
+     * The default is to rotate the entity around its (initial) top-left corner; use
+     * `.origin()` to change that.
+     *
+     * @see ._attr, .origin
+     */
+    _rotation: 0,
+    /**@
+     * #.alpha
+     * @comp 2D
+     * Transparency of an entity. Must be a decimal value between 0.0 being fully transparent to 1.0 being fully opaque.
+     */
+    _alpha: 1.0,
+    /**@
+     * #.visible
+     * @comp 2D
+     * If the entity is visible or not. Accepts a true or false value.
+     * Can be used for optimization by setting an entities visibility to false when not needed to be drawn.
+     *
+     * The entity will still exist and can be collided with but just won't be drawn.
+     * @see Crafty.DrawManager.draw, Crafty.DrawManager.drawAll
+     */
+    _visible: true,
+
+    /**@
+     * #._globalZ
+     * @comp 2D
+     * When two entities overlap, the one with the larger `_globalZ` will be on top of the other.
+     * @see Crafty.DrawManager.draw, Crafty.DrawManager.drawAll
+     */
+    _globalZ: null,
+
+    _origin: null,
+    _mbr: null,
+    _entry: null,
+    _children: null,
+    _parent: null,
+    _changed: false,
+
+    _defineGetterSetter_setter: function () {
+        //create getters and setters using __defineSetter__ and __defineGetter__
+        this.__defineSetter__('x', function (v) {
+            this._attr('_x', v);
+        });
+        this.__defineSetter__('y', function (v) {
+            this._attr('_y', v);
+        });
+        this.__defineSetter__('w', function (v) {
+            this._attr('_w', v);
+        });
+        this.__defineSetter__('h', function (v) {
+            this._attr('_h', v);
+        });
+        this.__defineSetter__('z', function (v) {
+            this._attr('_z', v);
+        });
+        this.__defineSetter__('rotation', function (v) {
+            this._attr('_rotation', v);
+        });
+        this.__defineSetter__('alpha', function (v) {
+            this._attr('_alpha', v);
+        });
+        this.__defineSetter__('visible', function (v) {
+            this._attr('_visible', v);
+        });
+
+        this.__defineGetter__('x', function () {
+            return this._x;
+        });
+        this.__defineGetter__('y', function () {
+            return this._y;
+        });
+        this.__defineGetter__('w', function () {
+            return this._w;
+        });
+        this.__defineGetter__('h', function () {
+            return this._h;
+        });
+        this.__defineGetter__('z', function () {
+            return this._z;
+        });
+        this.__defineGetter__('rotation', function () {
+            return this._rotation;
+        });
+        this.__defineGetter__('alpha', function () {
+            return this._alpha;
+        });
+        this.__defineGetter__('visible', function () {
+            return this._visible;
+        });
+        this.__defineGetter__('parent', function () {
+            return this._parent;
+        });
+        this.__defineGetter__('numChildren', function () {
+            return this._children.length;
+        });
+    },
+
+    _defineGetterSetter_defineProperty: function () {
+        Object.defineProperty(this, 'x', {
+            set: function (v) {
+                this._attr('_x', v);
+            },
+            get: function () {
+                return this._x;
+            },
+            configurable: true
+        });
+
+        Object.defineProperty(this, 'y', {
+            set: function (v) {
+                this._attr('_y', v);
+            },
+            get: function () {
+                return this._y;
+            },
+            configurable: true
+        });
+
+        Object.defineProperty(this, 'w', {
+            set: function (v) {
+                this._attr('_w', v);
+            },
+            get: function () {
+                return this._w;
+            },
+            configurable: true
+        });
+
+        Object.defineProperty(this, 'h', {
+            set: function (v) {
+                this._attr('_h', v);
+            },
+            get: function () {
+                return this._h;
+            },
+            configurable: true
+        });
+
+        Object.defineProperty(this, 'z', {
+            set: function (v) {
+                this._attr('_z', v);
+            },
+            get: function () {
+                return this._z;
+            },
+            configurable: true
+        });
+
+        Object.defineProperty(this, 'rotation', {
+            set: function (v) {
+                this._attr('_rotation', v);
+            },
+            get: function () {
+                return this._rotation;
+            },
+            configurable: true
+        });
+
+        Object.defineProperty(this, 'alpha', {
+            set: function (v) {
+                this._attr('_alpha', v);
+            },
+            get: function () {
+                return this._alpha;
+            },
+            configurable: true
+        });
+
+        Object.defineProperty(this, 'visible', {
+            set: function (v) {
+                this._attr('_visible', v);
+            },
+            get: function () {
+                return this._visible;
+            },
+            configurable: true
+        });
+    },
+
+    _defineGetterSetter_fallback: function () {
+        //set the public properties to the current private properties
+        this.x = this._x;
+        this.y = this._y;
+        this.w = this._w;
+        this.h = this._h;
+        this.z = this._z;
+        this.rotation = this._rotation;
+        this.alpha = this._alpha;
+        this.visible = this._visible;
+
+        //on every frame check for a difference in any property
+        this.bind("EnterFrame", function () {
+            //if there are differences between the public and private properties
+            if (this.x !== this._x || this.y !== this._y ||
+                this.w !== this._w || this.h !== this._h ||
+                this.z !== this._z || this.rotation !== this._rotation ||
+                this.alpha !== this._alpha || this.visible !== this._visible) {
+
+                //save the old positions
+                var old = Crafty._rectPool.copy(this);
+
+                //if rotation has changed, use the private rotate method
+                if (this.rotation !== this._rotation) {
+                    this._rotate(this.rotation);
+                } else {
+                    //update the MBR
+                    var mbr = this._mbr,
+                        moved = false;
+                    // If the browser doesn't have getters or setters,
+                    // {x, y, w, h, z} and {_x, _y, _w, _h, _z} may be out of sync,
+                    // in which case t checks if they are different on tick and executes the Change event.
+                    if (mbr) { //check each value to see which has changed
+                        if (this.x !== this._x) {
+                            mbr._x -= this.x - this._x;
+                            moved = true;
+                        } else if (this.y !== this._y) {
+                            mbr._y -= this.y - this._y;
+                            moved = true;
+                        } else if (this.w !== this._w) {
+                            mbr._w -= this.w - this._w;
+                            moved = true;
+                        } else if (this.h !== this._h) {
+                            mbr._h -= this.h - this._h;
+                            moved = true;
+                        } else if (this.z !== this._z) {
+                            mbr._z -= this.z - this._z;
+                            moved = true;
+                        }
+                    }
+
+                    //if the moved flag is true, trigger a move
+                    if (moved) this.trigger("Move", old);
+                }
+
+                //set the public properties to the private properties
+                this._x = this.x;
+                this._y = this.y;
+                this._w = this.w;
+                this._h = this.h;
+                this._z = this.z;
+                this._rotation = this.rotation;
+                this._alpha = this.alpha;
+                this._visible = this.visible;
+
+                //trigger the changes
+                this.trigger("Change", old);
+                //without this entities weren't added correctly to Crafty.map.map in IE8.
+                //not entirely sure this is the best way to fix it though
+                this.trigger("Move", old);
+                Crafty._rectPool.recycle(old);
+            }
+        });
+    },
+
+    init: function () {
+        this._globalZ = this[0];
+        this._origin = {
+            x: 0,
+            y: 0
+        };
+        this._children = [];
+
+        if (Crafty.support.setter) {
+            this._defineGetterSetter_setter();
+        } else if (Crafty.support.defineProperty) {
+            //IE9 supports Object.defineProperty
+            this._defineGetterSetter_defineProperty();
+        } else {
+            /*
 			If no setters and getters are supported (e.g. IE8) supports,
 			check on every frame for a difference between this._(x|y|w|h|z...)
 			and this.(x|y|w|h|z) and update accordingly.
 			*/
-      this._defineGetterSetter_fallback();
-		}
-
-		//insert self into the HashMap
-		this._entry = Crafty.map.insert(this);
-
-		//when object changes, update HashMap
-		this.bind("Move", function (e) {
-			var area = this._mbr || this;
-			this._entry.update(area);
-			this._cascade(e);
-		});
-
-		this.bind("Rotate", function (e) {
-			var old = this._mbr || this;
-			this._entry.update(old);
-			this._cascade(e);
-		});
-
-		//when object is removed, remove from HashMap and destroy attached children
-		this.bind("Remove", function () {
-			if (this._children) {
-				for (var i = 0; i < this._children.length; i++) {
-					// delete the child's _parent link, or else the child will splice itself out of
-					// this._children while destroying itself (which messes up this for-loop iteration).
-					delete this._children[i]._parent;
-					
-					// Destroy child if possible (It's not always possible, e.g. the polygon attached
-					// by areaMap has no .destroy(), it will just get garbage-collected.)
-					if (this._children[i].destroy) {
-						this._children[i].destroy();
-					}
-				}
-				this._children = [];
-			}
-			
-			if (this._parent) {
-				this._parent.detach(this);
-			}
-
-			Crafty.map.remove(this);
-
-			this.detach();
-		});
-	},
-
-	/**
-	* Calculates the MBR when rotated with an origin point
-	*/
-	_rotate: function (v) {
-		var theta = -1 * (v % 360), //angle always between 0 and 359
-			rad = theta * DEG_TO_RAD,
-			ct = Math.cos(rad), //cache the sin and cosine of theta
-			st = Math.sin(rad),
-			o = {
-			x: this._origin.x + this._x,
-			y: this._origin.y + this._y
-		};
-
-		//if the angle is 0 and is currently 0, skip
-		if (!theta) {
-			this._mbr = null;
-			if (!this._rotation % 360) return;
-		}
-
-		var x0 = o.x + (this._x - o.x) * ct + (this._y - o.y) * st,
-			y0 = o.y - (this._x - o.x) * st + (this._y - o.y) * ct,
-			x1 = o.x + (this._x + this._w - o.x) * ct + (this._y - o.y) * st,
-			y1 = o.y - (this._x + this._w - o.x) * st + (this._y - o.y) * ct,
-			x2 = o.x + (this._x + this._w - o.x) * ct + (this._y + this._h - o.y) * st,
-			y2 = o.y - (this._x + this._w - o.x) * st + (this._y + this._h - o.y) * ct,
-			x3 = o.x + (this._x - o.x) * ct + (this._y + this._h - o.y) * st,
-			y3 = o.y - (this._x - o.x) * st + (this._y + this._h - o.y) * ct,
-			minx = Math.floor(Math.min(x0, x1, x2, x3)),
-			miny = Math.floor(Math.min(y0, y1, y2, y3)),
-			maxx = Math.ceil(Math.max(x0, x1, x2, x3)),
-			maxy = Math.ceil(Math.max(y0, y1, y2, y3));
-
-		this._mbr = { _x: minx, _y: miny, _w: maxx - minx, _h: maxy - miny };
-
-		//trigger rotation event
-		var difference = this._rotation - v,
-			drad = difference * DEG_TO_RAD;
-
-		this.trigger("Rotate", {
-			cos: Math.cos(drad),
-			sin: Math.sin(drad),
-			deg: difference,
-			rad: drad,
-			o: { x: o.x, y: o.y },
-			matrix: { M11: ct, M12: st, M21: -st, M22: ct }
-		});
-	},
-
-	/**@
-	* #.area
-	* @comp 2D
-	* @sign public Number .area(void)
-	* Calculates the area of the entity
-	*/
-	area: function () {
-		return this._w * this._h;
-	},
-
-	/**@
-	* #.intersect
-	* @comp 2D
-	* @sign public Boolean .intersect(Number x, Number y, Number w, Number h)
-	* @param x - X position of the rect
-	* @param y - Y position of the rect
-	* @param w - Width of the rect
-	* @param h - Height of the rect
-	* @sign public Boolean .intersect(Object rect)
-	* @param rect - An object that must have the `x, y, w, h` values as properties
-	* Determines if this entity intersects a rectangle.
-	*/
-	intersect: function (x, y, w, h) {
-		var rect, obj = this._mbr || this;
-		if (typeof x === "object") {
-			rect = x;
-		} else {
-			rect = { x: x, y: y, w: w, h: h };
-		}
-
-		return obj._x < rect.x + rect.w && obj._x + obj._w > rect.x &&
-			   obj._y < rect.y + rect.h && obj._h + obj._y > rect.y;
-	},
-
-	/**@
-	* #.within
-	* @comp 2D
-	* @sign public Boolean .within(Number x, Number y, Number w, Number h)
-	* @param x - X position of the rect
-	* @param y - Y position of the rect
-	* @param w - Width of the rect
-	* @param h - Height of the rect
-	* @sign public Boolean .within(Object rect)
-	* @param rect - An object that must have the `x, y, w, h` values as properties
-	* Determines if this current entity is within another rectangle.
-	*/
-	within: function (x, y, w, h) {
-		var rect;
-		if (typeof x === "object") {
-			rect = x;
-		} else {
-			rect = { x: x, y: y, w: w, h: h };
-		}
-
-		return rect.x <= this.x && rect.x + rect.w >= this.x + this.w &&
-				rect.y <= this.y && rect.y + rect.h >= this.y + this.h;
-	},
-
-	/**@
-	* #.contains
-	* @comp 2D
-	* @sign public Boolean .contains(Number x, Number y, Number w, Number h)
-	* @param x - X position of the rect
-	* @param y - Y position of the rect
-	* @param w - Width of the rect
-	* @param h - Height of the rect
-	* @sign public Boolean .contains(Object rect)
-	* @param rect - An object that must have the `x, y, w, h` values as properties
-	* Determines if the rectangle is within the current entity.
-	*/
-	contains: function (x, y, w, h) {
-		var rect;
-		if (typeof x === "object") {
-			rect = x;
-		} else {
-			rect = { x: x, y: y, w: w, h: h };
-		}
-
-		return rect.x >= this.x && rect.x + rect.w <= this.x + this.w &&
-				rect.y >= this.y && rect.y + rect.h <= this.y + this.h;
-	},
-
-	/**@
-	* #.pos
-	* @comp 2D
-	* @sign public Object .pos(void)
-	* Returns the x, y, w, h properties as a rect object
-	* (a rect object is just an object with the keys _x, _y, _w, _h).
-	*
-	* The keys have an underscore prefix. This is due to the x, y, w, h
-	* properties being merely setters and getters that wrap the properties with an underscore (_x, _y, _w, _h).
-	*/
-	pos: function () {
-		return {
-			_x: (this._x),
-			_y: (this._y),
-			_w: (this._w),
-			_h: (this._h)
-		};
-	},
-
-	/**@
-	* #.mbr
-	* @comp 2D
-	* @sign public Object .mbr()
-	* Returns the minimum bounding rectangle. If there is no rotation
-	* on the entity it will return the rect.
-	*/
-	mbr: function () {
-		if (!this._mbr) return this.pos();
-		return {
-			_x: (this._mbr._x),
-			_y: (this._mbr._y),
-			_w: (this._mbr._w),
-			_h: (this._mbr._h)
-		};
-	},
-
-	/**@
-	* #.isAt
-	* @comp 2D
-	* @sign public Boolean .isAt(Number x, Number y)
-	* @param x - X position of the point
-	* @param y - Y position of the point
-	* Determines whether a point is contained by the entity. Unlike other methods,
-	* an object can't be passed. The arguments require the x and y value
-	*/
-	isAt: function (x, y) {
-		if (this.mapArea) {
-      		return this.mapArea.containsPoint(x, y);
-		} else if (this.map) {
-			return this.map.containsPoint(x, y);
-		}
-		return this.x <= x && this.x + this.w >= x &&
-			   this.y <= y && this.y + this.h >= y;
-	},
-
-	/**@
-	* #.move
-	* @comp 2D
-	* @sign public this .move(String dir, Number by)
-	* @param dir - Direction to move (n,s,e,w,ne,nw,se,sw)
-	* @param by - Amount to move in the specified direction
-	* Quick method to move the entity in a direction (n, s, e, w, ne, nw, se, sw) by an amount of pixels.
-	*/
-	move: function (dir, by) {
-		if (dir.charAt(0) === 'n') this.y -= by;
-		if (dir.charAt(0) === 's') this.y += by;
-		if (dir === 'e' || dir.charAt(1) === 'e') this.x += by;
-		if (dir === 'w' || dir.charAt(1) === 'w') this.x -= by;
-
-		return this;
-	},
-
-	/**@
-	* #.shift
-	* @comp 2D
-	* @sign public this .shift(Number x, Number y, Number w, Number h)
-	* @param x - Amount to move X
-	* @param y - Amount to move Y
-	* @param w - Amount to widen
-	* @param h - Amount to increase height
-	* Shift or move the entity by an amount. Use negative values
-	* for an opposite direction.
-	*/
-	shift: function (x, y, w, h) {
-		if (x) this.x += x;
-		if (y) this.y += y;
-		if (w) this.w += w;
-		if (h) this.h += h;
-
-		return this;
-	},
-
-	/**@
-	* #._cascade
-	* @comp 2D
-    * @sign public void ._cascade(e)
-	* @param e - Amount to move X
-	* Shift move or rotate the entity by an amount. Use negative values
-	* for an opposite direction.
-	*/
-	_cascade: function (e) {
-		if (!e) return; //no change in position
-		var i = 0, children = this._children, l = children.length, obj;
-		//rotation
-		if (e.cos) {
-			for (; i < l; ++i) {
-				obj = children[i];
-				if ('rotate' in obj) obj.rotate(e);
-			}
-		} else {
-			//use MBR or current
-			var rect = this._mbr || this,
-				dx = rect._x - e._x,
-				dy = rect._y - e._y,
-				dw = rect._w - e._w,
-				dh = rect._h - e._h;
-
-			for (; i < l; ++i) {
-				obj = children[i];
-				obj.shift(dx, dy, dw, dh);
-			}
-		}
-	},
-
-	/**@
-	* #.attach
-	* @comp 2D
-	* @sign public this .attach(Entity obj[, .., Entity objN])
-	* @param obj - Child entity(s) to attach
-	* Sets one or more entities to be children, with the current entity (`this`)
-	* as the parent. When the parent moves or rotates, its children move or
-	* rotate by the same amount. (But not vice-versa: If you move a child, it
-	* will not move the parent.) When the parent is destroyed, its children are
-	* destroyed.
-	* 
-	* For any entity, `this._children` is the array of its children entity
-	* objects (if any), and `this._parent` is its parent entity object (if any).
-	*
-	* As many objects as wanted can be attached, and a hierarchy of objects is
-	* possible by attaching.
-	*/
-	attach: function () {
-		var i = 0, arg = arguments, l = arguments.length, obj;
-		for (; i < l; ++i) {
-			obj = arg[i];
-			if (obj._parent) { obj._parent.detach(obj); }
-			obj._parent = this;
-			this._children.push(obj);
-		}
-
-		return this;
-	},
-
-	/**@
-	* #.detach
-	* @comp 2D
-	* @sign public this .detach([Entity obj])
-	* @param obj - The entity to detach. Left blank will remove all attached entities
-	* Stop an entity from following the current entity. Passing no arguments will stop
-	* every entity attached.
-	*/
-	detach: function (obj) {
-		//if nothing passed, remove all attached objects
-		if (!obj) {
-			for (var i = 0; i < this._children.length; i++) {
-				this._children[i]._parent = null;
-			}
-			this._children = [];
-			return this;
-		}
-
-		//if obj passed, find the handler and unbind
-		for (var i = 0; i < this._children.length; i++) {
-			if (this._children[i] == obj) {
-				this._children.splice(i, 1);
-			}
-		}
-		obj._parent = null;
-
-		return this;
-	},
-
-	/**@
-	* #.origin
-	* @comp 2D
-	* @sign public this .origin(Number x, Number y)
-	* @param x - Pixel value of origin offset on the X axis
-	* @param y - Pixel value of origin offset on the Y axis
-	* @sign public this .origin(String offset)
-	* @param offset - Combination of center, top, bottom, middle, left and right
-	* Set the origin point of an entity for it to rotate around.
-	*
-	* @example
-	* ~~~
-	* this.origin("top left")
-	* this.origin("center")
-	* this.origin("bottom right")
-	* this.origin("middle right")
-	* ~~~
-	*
-	* @see .rotation
-	*/
-	origin: function (x, y) {
-		//text based origin
-		if (typeof x === "string") {
-			if (x === "centre" || x === "center" || x.indexOf(' ') === -1) {
-				x = this._w / 2;
-				y = this._h / 2;
-			} else {
-				var cmd = x.split(' ');
-				if (cmd[0] === "top") y = 0;
-				else if (cmd[0] === "bottom") y = this._h;
-				else if (cmd[0] === "middle" || cmd[1] === "center" || cmd[1] === "centre") y = this._h / 2;
-
-				if (cmd[1] === "center" || cmd[1] === "centre" || cmd[1] === "middle") x = this._w / 2;
-				else if (cmd[1] === "left") x = 0;
-				else if (cmd[1] === "right") x = this._w;
-			}
-		}
-
-		this._origin.x = x;
-		this._origin.y = y;
-
-		return this;
-	},
-
-	/**@
-	* #.flip
-	* @comp 2D
-	* @trigger Change - when the entity has flipped
-	* @sign public this .flip(String dir)
-	* @param dir - Flip direction
-	*
-	* Flip entity on passed direction
-	*
-	* @example
-	* ~~~
-	* this.flip("X")
-	* ~~~
-	*/
-	flip: function (dir) {
-		dir = dir || "X";
-                if(!this["_flip" + dir]) {
-                    this["_flip" + dir] = true;
-                    this.trigger("Change");
-                }
-	},
-
-        /**@
-	* #.unflip
-	* @comp 2D
-	* @trigger Change - when the entity has unflipped
-	* @sign public this .unflip(String dir)
-	* @param dir - Unflip direction
-	*
-	* Unflip entity on passed direction (if it's flipped)
-	*
-	* @example
-	* ~~~
-	* this.unflip("X")
-	* ~~~
-	*/
-	unflip: function (dir) {
-		dir = dir || "X";
-                if(this["_flip" + dir]) {
-                    this["_flip" + dir] = false;
-                    this.trigger("Change");
+            this._defineGetterSetter_fallback();
+        }
+
+        //insert self into the HashMap
+        this._entry = Crafty.map.insert(this);
+
+        //when object changes, update HashMap
+        this.bind("Move", function (e) {
+            var area = this._mbr || this;
+            this._entry.update(area);
+            // Move children (if any) by the same amount
+            if (this._children.length > 0) {
+                this._cascade(e);
+            }
+        });
+
+        this.bind("Rotate", function (e) {
+            var old = this._mbr || this;
+            this._entry.update(old);
+            // Rotate children (if any) by the same amount
+            if (this._children.length > 0) {
+                this._cascade(e);
+            }
+        });
+
+        //when object is removed, remove from HashMap and destroy attached children
+        this.bind("Remove", function () {
+            if (this._children) {
+                for (var i = 0; i < this._children.length; i++) {
+                    // delete the child's _parent link, or else the child will splice itself out of
+                    // this._children while destroying itself (which messes up this for-loop iteration).
+                    delete this._children[i]._parent;
+
+                    // Destroy child if possible (It's not always possible, e.g. the polygon attached
+                    // by areaMap has no .destroy(), it will just get garbage-collected.)
+                    if (this._children[i].destroy) {
+                        this._children[i].destroy();
+                    }
                 }
-	},
-
-	/**
-	* Method for rotation rather than through a setter
-	*/
-	rotate: function (e) {
-		//assume event data origin
-		this._origin.x = e.o.x - this._x;
-		this._origin.y = e.o.y - this._y;
-
-		//modify through the setter method
-		this._attr('_rotation', this._rotation - e.deg);
-	},
-
-	/**@
-	* #._attr
-	* @comp 2D
-	* Setter method for all 2D properties including
-	* x, y, w, h, alpha, rotation and visible.
-	*/
-	_attr: function (name, value) {
-		// Return if there is no change
-		if (this[name] === value){
-			return
-		}
-		//keep a reference of the old positions
-		var pos = this.pos(),
-			old = this.mbr() || pos;
-
-		//if rotation, use the rotate method
-		if (name === '_rotation') {
-			this._rotate(value);
-			this.trigger("Rotate");
-			//set the global Z and trigger reorder just in case
-		} else if (name === '_z') {
-			this._globalZ = parseInt(value + Crafty.zeroFill(this[0], 5), 10); //magic number 10e5 is the max num of entities
-			this.trigger("reorder");
-			//if the rect bounds change, update the MBR and trigger move
-		} else if (name == '_x' || name === '_y' || name === '_w' || name === '_h') {
-			var mbr = this._mbr;
-			if (mbr) {
-				mbr[name] -= this[name] - value;
-			}
-			this[name] = value;
-			this.trigger("Move", old);
-		}
-
-		//everything will assume the value
-		this[name] = value;
-
-		//trigger a change
-		this.trigger("Change", old);
-	}
-});
+                this._children = [];
+            }
+
+            if (this._parent) {
+                this._parent.detach(this);
+            }
+
+            Crafty.map.remove(this);
+
+            this.detach();
+        });
+    },
+
+
+    /**
+     * Calculates the MBR when rotated some number of radians about an origin point o.
+     * Necessary on a rotation, or a resize (when already rotated)
+     */
+
+    _calculateMBR: function (ox, oy, rad) {
+        if (rad === 0) {
+            this._mbr = null;
+            return;
+        }
+
+        var ct = Math.cos(rad),
+            st = Math.sin(rad);
+        // Special case 90 degree rotations to prevent rounding problems
+        ct = (ct < 1e-10 && ct > -1e-10) ? 0 : ct;
+        st = (st < 1e-10 && st > -1e-10) ? 0 : st;
+        var x0 = ox + (this._x - ox) * ct + (this._y - oy) * st,
+            y0 = oy - (this._x - ox) * st + (this._y - oy) * ct,
+            x1 = ox + (this._x + this._w - ox) * ct + (this._y - oy) * st,
+            y1 = oy - (this._x + this._w - ox) * st + (this._y - oy) * ct,
+            x2 = ox + (this._x + this._w - ox) * ct + (this._y + this._h - oy) * st,
+            y2 = oy - (this._x + this._w - ox) * st + (this._y + this._h - oy) * ct,
+            x3 = ox + (this._x - ox) * ct + (this._y + this._h - oy) * st,
+            y3 = oy - (this._x - ox) * st + (this._y + this._h - oy) * ct,
+            minx = Math.floor(Math.min(x0, x1, x2, x3)),
+            miny = Math.floor(Math.min(y0, y1, y2, y3)),
+            maxx = Math.ceil(Math.max(x0, x1, x2, x3)),
+            maxy = Math.ceil(Math.max(y0, y1, y2, y3));
+        if (!this._mbr) {
+            this._mbr = {
+                _x: minx,
+                _y: miny,
+                _w: maxx - minx,
+                _h: maxy - miny
+            };
+        } else {
+            this._mbr._x = minx;
+            this._mbr._y = miny;
+            this._mbr._w = maxx - minx;
+            this._mbr._h = maxy - miny;
+        }
+
+    },
+
+    /**
+     * Handle changes that need to happen on a rotation
+     */
+    _rotate: function (v) {
+        var theta = -1 * (v % 360); //angle always between 0 and 359
+        var difference = this._rotation - v;
+        // skip if there's no rotation!
+        if (difference === 0)
+            return;
+
+        //Calculate the new MBR
+        var rad = theta * DEG_TO_RAD,
+            o = {
+                x: this._origin.x + this._x,
+                y: this._origin.y + this._y
+            };
+
+        this._calculateMBR(o.x, o.y, rad);
+
+
+        //trigger "Rotate" event
+        var drad = difference * DEG_TO_RAD,
+            ct = Math.cos(rad),
+            st = Math.sin(rad);
+
+        this.trigger("Rotate", {
+            cos: Math.cos(drad),
+            sin: Math.sin(drad),
+            deg: difference,
+            rad: drad,
+            o: o,
+            matrix: {
+                M11: ct,
+                M12: st,
+                M21: -st,
+                M22: ct
+            }
+        });
+    },
 
-Crafty.c("Physics", {
-	_gravity: 0.4,
-	_friction: 0.2,
-	_bounce: 0.5,
+    /**@
+     * #.area
+     * @comp 2D
+     * @sign public Number .area(void)
+     * Calculates the area of the entity
+     */
+    area: function () {
+        return this._w * this._h;
+    },
 
-	gravity: function (gravity) {
-		this._gravity = gravity;
-	}
+    /**@
+     * #.intersect
+     * @comp 2D
+     * @sign public Boolean .intersect(Number x, Number y, Number w, Number h)
+     * @param x - X position of the rect
+     * @param y - Y position of the rect
+     * @param w - Width of the rect
+     * @param h - Height of the rect
+     * @sign public Boolean .intersect(Object rect)
+     * @param rect - An object that must have the `x, y, w, h` values as properties
+     * Determines if this entity intersects a rectangle.  If the entity is rotated, its MBR is used for the test.
+     */
+    intersect: function (x, y, w, h) {
+        var rect, mbr = this._mbr || this;
+        if (typeof x === "object") {
+            rect = x;
+        } else {
+            rect = {
+                x: x,
+                y: y,
+                w: w,
+                h: h
+            };
+        }
+
+        return mbr._x < rect.x + rect.w && mbr._x + mbr._w > rect.x &&
+            mbr._y < rect.y + rect.h && mbr._h + mbr._y > rect.y;
+    },
+
+    /**@
+     * #.within
+     * @comp 2D
+     * @sign public Boolean .within(Number x, Number y, Number w, Number h)
+     * @param x - X position of the rect
+     * @param y - Y position of the rect
+     * @param w - Width of the rect
+     * @param h - Height of the rect
+     * @sign public Boolean .within(Object rect)
+     * @param rect - An object that must have the `_x, _y, _w, _h` values as properties
+     * Determines if this current entity is within another rectangle.
+     */
+    within: function (x, y, w, h) {
+        var rect, mbr = this._mbr || this;
+        if (typeof x === "object") {
+            rect = x;
+        } else {
+            rect = {
+                _x: x,
+                _y: y,
+                _w: w,
+                _h: h
+            };
+        }
+
+        return rect._x <= mbr._x && rect._x + rect._w >= mbr._x + mbr._w &&
+            rect._y <= mbr._y && rect._y + rect._h >= mbr._y + mbr._h;
+    },
+
+    /**@
+     * #.contains
+     * @comp 2D
+     * @sign public Boolean .contains(Number x, Number y, Number w, Number h)
+     * @param x - X position of the rect
+     * @param y - Y position of the rect
+     * @param w - Width of the rect
+     * @param h - Height of the rect
+     * @sign public Boolean .contains(Object rect)
+     * @param rect - An object that must have the `_x, _y, _w, _h` values as properties.
+     * Determines if the rectangle is within the current entity.  If the entity is rotated, its MBR is used for the test.
+     */
+    contains: function (x, y, w, h) {
+        var rect, mbr = this._mbr || this;
+        if (typeof x === "object") {
+            rect = x;
+        } else {
+            rect = {
+                _x: x,
+                _y: y,
+                _w: w,
+                _h: h
+            };
+        }
+
+        return rect._x >= mbr._x && rect._x + rect._w <= mbr._x + mbr._w &&
+            rect._y >= mbr._y && rect._y + rect._h <= mbr._y + mbr._h;
+    },
+
+    /**@
+     * #.pos
+     * @comp 2D
+     * @sign public Object .pos(void)
+     * Returns the x, y, w, h properties as a rect object
+     * (a rect object is just an object with the keys _x, _y, _w, _h).
+     *
+     * The keys have an underscore prefix. This is due to the x, y, w, h
+     * properties being merely setters and getters that wrap the properties with an underscore (_x, _y, _w, _h).
+     */
+    pos: function () {
+        return {
+            _x: (this._x),
+            _y: (this._y),
+            _w: (this._w),
+            _h: (this._h)
+        };
+    },
+
+    /**@
+     * #.mbr
+     * @comp 2D
+     * @sign public Object .mbr()
+     * Returns the minimum bounding rectangle. If there is no rotation
+     * on the entity it will return the rect.
+     */
+    mbr: function () {
+        if (!this._mbr) return this.pos();
+        return {
+            _x: (this._mbr._x),
+            _y: (this._mbr._y),
+            _w: (this._mbr._w),
+            _h: (this._mbr._h)
+        };
+    },
+
+    /**@
+     * #.isAt
+     * @comp 2D
+     * @sign public Boolean .isAt(Number x, Number y)
+     * @param x - X position of the point
+     * @param y - Y position of the point
+     * Determines whether a point is contained by the entity. Unlike other methods,
+     * an object can't be passed. The arguments require the x and y value.
+     *
+     * The given point is tested against the first of the following that exists: a mapArea associated with "Mouse", the hitarea associated with "Collision", or the object's MBR.
+     */
+    isAt: function (x, y) {
+        if (this.mapArea) {
+            return this.mapArea.containsPoint(x, y);
+        } else if (this.map) {
+            return this.map.containsPoint(x, y);
+        }
+        var mbr = this._mbr || this;
+        return mbr._x <= x && mbr._x + mbr._w >= x &&
+            mbr._y <= y && mbr._y + mbr._h >= y;
+    },
+
+    /**@
+     * #.move
+     * @comp 2D
+     * @sign public this .move(String dir, Number by)
+     * @param dir - Direction to move (n,s,e,w,ne,nw,se,sw)
+     * @param by - Amount to move in the specified direction
+     * Quick method to move the entity in a direction (n, s, e, w, ne, nw, se, sw) by an amount of pixels.
+     */
+    move: function (dir, by) {
+        if (dir.charAt(0) === 'n') this.y -= by;
+        if (dir.charAt(0) === 's') this.y += by;
+        if (dir === 'e' || dir.charAt(1) === 'e') this.x += by;
+        if (dir === 'w' || dir.charAt(1) === 'w') this.x -= by;
+
+        return this;
+    },
+
+    /**@
+     * #.shift
+     * @comp 2D
+     * @sign public this .shift(Number x, Number y, Number w, Number h)
+     * @param x - Amount to move X
+     * @param y - Amount to move Y
+     * @param w - Amount to widen
+     * @param h - Amount to increase height
+     * Shift or move the entity by an amount. Use negative values
+     * for an opposite direction.
+     */
+    shift: function (x, y, w, h) {
+        if (x) this.x += x;
+        if (y) this.y += y;
+        if (w) this.w += w;
+        if (h) this.h += h;
+
+        return this;
+    },
+
+    /**@
+     * #._cascade
+     * @comp 2D
+     * @sign public void ._cascade(e)
+     * @param e - An object describing the motion
+     * Move or rotate the entity's children according to a certain motion.
+     * This method is part of a function bound to "Move": It is used
+     * internally for ensuring that when a parent moves, the child also
+     * moves in the same way.
+     */
+    _cascade: function (e) {
+        if (!e) return; //no change in position
+        var i = 0,
+            children = this._children,
+            l = children.length,
+            obj;
+        //rotation
+        if (e.cos) {
+            for (; i < l; ++i) {
+                obj = children[i];
+                if ('rotate' in obj) obj.rotate(e);
+            }
+        } else {
+            //use current position
+            var dx = this._x - e._x,
+                dy = this._y - e._y,
+                dw = this._w - e._w,
+                dh = this._h - e._h;
+
+            for (; i < l; ++i) {
+                obj = children[i];
+                obj.shift(dx, dy, dw, dh);
+            }
+        }
+    },
+
+    /**@
+     * #.attach
+     * @comp 2D
+     * @sign public this .attach(Entity obj[, .., Entity objN])
+     * @param obj - Child entity(s) to attach
+     * Sets one or more entities to be children, with the current entity (`this`)
+     * as the parent. When the parent moves or rotates, its children move or
+     * rotate by the same amount. (But not vice-versa: If you move a child, it
+     * will not move the parent.) When the parent is destroyed, its children are
+     * destroyed.
+     *
+     * For any entity, `this._children` is the array of its children entity
+     * objects (if any), and `this._parent` is its parent entity object (if any).
+     *
+     * As many objects as wanted can be attached, and a hierarchy of objects is
+     * possible by attaching.
+     */
+    attach: function () {
+        var i = 0,
+            arg = arguments,
+            l = arguments.length,
+            obj;
+        for (; i < l; ++i) {
+            obj = arg[i];
+            if (obj._parent) {
+                obj._parent.detach(obj);
+            }
+            obj._parent = this;
+            this._children.push(obj);
+        }
+
+        return this;
+    },
+
+    /**@
+     * #.detach
+     * @comp 2D
+     * @sign public this .detach([Entity obj])
+     * @param obj - The entity to detach. Left blank will remove all attached entities
+     * Stop an entity from following the current entity. Passing no arguments will stop
+     * every entity attached.
+     */
+    detach: function (obj) {
+        var i;
+        //if nothing passed, remove all attached objects
+        if (!obj) {
+            for (i = 0; i < this._children.length; i++) {
+                this._children[i]._parent = null;
+            }
+            this._children = [];
+            return this;
+        }
+
+        //if obj passed, find the handler and unbind
+        for (i = 0; i < this._children.length; i++) {
+            if (this._children[i] == obj) {
+                this._children.splice(i, 1);
+            }
+        }
+        obj._parent = null;
+
+        return this;
+    },
+
+    /**@
+     * #.origin
+     * @comp 2D
+     * @sign public this .origin(Number x, Number y)
+     * @param x - Pixel value of origin offset on the X axis
+     * @param y - Pixel value of origin offset on the Y axis
+     * @sign public this .origin(String offset)
+     * @param offset - Combination of center, top, bottom, middle, left and right
+     * Set the origin point of an entity for it to rotate around.
+     *
+     * @example
+     * ~~~
+     * this.origin("top left")
+     * this.origin("center")
+     * this.origin("bottom right")
+     * this.origin("middle right")
+     * ~~~
+     *
+     * @see .rotation
+     */
+    origin: function (x, y) {
+        //text based origin
+        if (typeof x === "string") {
+            if (x === "centre" || x === "center" || x.indexOf(' ') === -1) {
+                x = this._w / 2;
+                y = this._h / 2;
+            } else {
+                var cmd = x.split(' ');
+                if (cmd[0] === "top") y = 0;
+                else if (cmd[0] === "bottom") y = this._h;
+                else if (cmd[0] === "middle" || cmd[1] === "center" || cmd[1] === "centre") y = this._h / 2;
+
+                if (cmd[1] === "center" || cmd[1] === "centre" || cmd[1] === "middle") x = this._w / 2;
+                else if (cmd[1] === "left") x = 0;
+                else if (cmd[1] === "right") x = this._w;
+            }
+        }
+
+        this._origin.x = x;
+        this._origin.y = y;
+
+        return this;
+    },
+
+    /**@
+     * #.flip
+     * @comp 2D
+     * @trigger Change - when the entity has flipped
+     * @sign public this .flip(String dir)
+     * @param dir - Flip direction
+     *
+     * Flip entity on passed direction
+     *
+     * @example
+     * ~~~
+     * this.flip("X")
+     * ~~~
+     */
+    flip: function (dir) {
+        dir = dir || "X";
+        if (!this["_flip" + dir]) {
+            this["_flip" + dir] = true;
+            this.trigger("Change");
+        }
+        return this;
+    },
+
+    /**@
+     * #.unflip
+     * @comp 2D
+     * @trigger Change - when the entity has unflipped
+     * @sign public this .unflip(String dir)
+     * @param dir - Unflip direction
+     *
+     * Unflip entity on passed direction (if it's flipped)
+     *
+     * @example
+     * ~~~
+     * this.unflip("X")
+     * ~~~
+     */
+    unflip: function (dir) {
+        dir = dir || "X";
+        if (this["_flip" + dir]) {
+            this["_flip" + dir] = false;
+            this.trigger("Change");
+        }
+        return this;
+    },
+
+    /**
+     * Method for rotation rather than through a setter
+     */
+    rotate: function (e) {
+        var x2, y2;
+        x2 =  (this._x + this._origin.x - e.o.x) * e.cos + (this._y + this._origin.y - e.o.y) * e.sin + (e.o.x - this._origin.x);
+        y2 =  (this._y + this._origin.y - e.o.y) * e.cos - (this._x + this._origin.x - e.o.x) * e.sin + (e.o.y - this._origin.y);
+        this._attr('_rotation', this._rotation - e.deg);
+        this._attr('_x', x2 );
+        this._attr('_y', y2 );        
+    },
+
+    /**@
+     * #._attr
+     * @comp 2D
+     * Setter method for all 2D properties including
+     * x, y, w, h, alpha, rotation and visible.
+     */
+    _attr: function (name, value) {
+        // Return if there is no change
+        if (this[name] === value) {
+            return;
+        }
+        //keep a reference of the old positions
+        var old = Crafty._rectPool.copy(this);
+
+        var mbr;
+        //if rotation, use the rotate method
+        if (name === '_rotation') {
+            this._rotate(value); // _rotate triggers "Rotate"
+            //set the global Z and trigger reorder just in case
+        } else if (name === '_z') {
+            this._globalZ = parseInt(value + Crafty.zeroFill(this[0], 5), 10); //magic number 10^5 is the max num of entities
+            this.trigger("reorder");
+            //if the rect bounds change, update the MBR and trigger move
+        } else if (name === '_x' || name === '_y') {
+            mbr = this._mbr;
+
+            if (mbr) {
+                mbr[name] -= this[name] - value;
+            }
+            this[name] = value;
+
+            this.trigger("Move", old);
+
+        } else if (name === '_h' || name === '_w') {
+            mbr = this._mbr;
+
+            var oldValue = this[name];
+            this[name] = value;
+            if (mbr) {
+                this._calculateMBR(this._origin.x + this._x, this._origin.y + this._y, -this._rotation * DEG_TO_RAD);
+            }
+            if (name === '_w') {
+                this.trigger("Resize", {
+                    axis: 'w',
+                    amount: value - oldValue
+                });
+            } else if (name === '_h') {
+                this.trigger("Resize", {
+                    axis: 'h',
+                    amount: value - oldValue
+                });
+            }
+            this.trigger("Move", old);
+
+        }
+
+        //everything will assume the value
+        this[name] = value;
+
+        //trigger a change
+        this.trigger("Change", old);
+
+        Crafty._rectPool.recycle(old);
+    }
 });
 
 /**@
-* #Gravity
-* @category 2D
-* Adds gravitational pull to the entity.
-*/
+ * #Gravity
+ * @category 2D
+ * Adds gravitational pull to the entity.
+ */
 Crafty.c("Gravity", {
-	_gravityConst: 0.2,
-	_gy: 0,
-	_falling: true,
-	_anti: null,
-
-	init: function () {
-		this.requires("2D");
-	},
-
-	/**@
-	* #.gravity
-	* @comp Gravity
-	* @sign public this .gravity([comp])
-	* @param comp - The name of a component that will stop this entity from falling
-	*
-	* Enable gravity for this entity no matter whether comp parameter is not specified,
-	* If comp parameter is specified all entities with that component will stop this entity from falling.
-	* For a player entity in a platform game this would be a component that is added to all entities
-	* that the player should be able to walk on.
-	*
-	* @example
-	* ~~~
-	* Crafty.e("2D, DOM, Color, Gravity")
-	*	 .color("red")
-	*	 .attr({ w: 100, h: 100 })
-	*	 .gravity("platform")
-	* ~~~
-	*/
-	gravity: function (comp) {
-		if (comp) this._anti = comp;
-
-		this.bind("EnterFrame", this._enterFrame);
-
-		return this;
-	},
-
-	/**@
-	* #.gravityConst
-	* @comp Gravity
-	* @sign public this .gravityConst(g)
-	* @param g - gravitational constant
-	*
-	* Set the gravitational constant to g. The default is .2. The greater g, the faster the object falls.
-	*
-	* @example
-	* ~~~
-	* Crafty.e("2D, DOM, Color, Gravity")
-	*   .color("red")
-	*   .attr({ w: 100, h: 100 })
-	*   .gravity("platform")
-	*   .gravityConst(2)
-	* ~~~
-	*/
-	gravityConst: function(g) {
-		this._gravityConst=g;
-		return this;
-	},
-
-	_enterFrame: function () {
-		if (this._falling) {
-			//if falling, move the players Y
-			this._gy += this._gravityConst;
-			this.y += this._gy;
-		} else {
-			this._gy = 0; //reset change in y
-		}
-
-		var obj, hit = false, pos = this.pos(),
-			q, i = 0, l;
-
-		//Increase by 1 to make sure map.search() finds the floor
-		pos._y++;
-
-		//map.search wants _x and intersect wants x...
-		pos.x = pos._x;
-		pos.y = pos._y;
-		pos.w = pos._w;
-		pos.h = pos._h;
-
-		q = Crafty.map.search(pos);
-		l = q.length;
-
-		for (; i < l; ++i) {
-			obj = q[i];
-			//check for an intersection directly below the player
-			if (obj !== this && obj.has(this._anti) && obj.intersect(pos)) {
-				hit = obj;
-				break;
-			}
-		}
-
-		if (hit) { //stop falling if found
-			if (this._falling) this.stopFalling(hit);
-		} else {
-			this._falling = true; //keep falling otherwise
-		}
-	},
-
-	stopFalling: function (e) {
-		if (e) this.y = e._y - this._h; //move object
-
-		//this._gy = -1 * this._bounce;
-		this._falling = false;
-		if (this._up) this._up = false;
-		this.trigger("hit");
-	},
-
-	/**@
-	* #.antigravity
-	* @comp Gravity
-	* @sign public this .antigravity()
-	* Disable gravity for this component. It can be reenabled by calling .gravity()
-	*/
-	antigravity: function () {
-		this.unbind("EnterFrame", this._enterFrame);
-	}
+    _gravityConst: 0.2,
+    _gy: 0,
+    _falling: true,
+    _anti: null,
+
+    init: function () {
+        this.requires("2D");
+    },
+
+    /**@
+     * #.gravity
+     * @comp Gravity
+     * @sign public this .gravity([comp])
+     * @param comp - The name of a component that will stop this entity from falling
+     *
+     * Enable gravity for this entity no matter whether comp parameter is not specified,
+     * If comp parameter is specified all entities with that component will stop this entity from falling.
+     * For a player entity in a platform game this would be a component that is added to all entities
+     * that the player should be able to walk on.
+     *
+     * @example
+     * ~~~
+     * Crafty.e("2D, DOM, Color, Gravity")
+     *   .color("red")
+     *   .attr({ w: 100, h: 100 })
+     *   .gravity("platform");
+     * ~~~
+     */
+    gravity: function (comp) {
+        if (comp) this._anti = comp;
+        if(isNaN(this._jumpSpeed)) this._jumpSpeed = 0; //set to 0 if Twoway component is not present
+
+        this.bind("EnterFrame", this._enterFrame);
+
+        return this;
+    },
+
+    /**@
+     * #.gravityConst
+     * @comp Gravity
+     * @sign public this .gravityConst(g)
+     * @param g - gravitational constant
+     *
+     * Set the gravitational constant to g. The default is .2. The greater g, the faster the object falls.
+     *
+     * @example
+     * ~~~
+     * Crafty.e("2D, DOM, Color, Gravity")
+     *   .color("red")
+     *   .attr({ w: 100, h: 100 })
+     *   .gravity("platform")
+     *   .gravityConst(2)
+     * ~~~
+     */
+    gravityConst: function (g) {
+        this._gravityConst = g;
+        return this;
+    },
+
+    _enterFrame: function () {
+        if (this._falling) {
+            //if falling, move the players Y
+            this._gy += this._gravityConst;
+            this.y += this._gy;
+        } else {
+            this._gy = 0; //reset change in y
+        }
+
+        var obj, hit = false,
+            pos = this.pos(),
+            q, i = 0,
+            l;
+
+        //Increase by 1 to make sure map.search() finds the floor
+        pos._y++;
+
+        //map.search wants _x and intersect wants x...
+        pos.x = pos._x;
+        pos.y = pos._y;
+        pos.w = pos._w;
+        pos.h = pos._h;
+
+        q = Crafty.map.search(pos);
+        l = q.length;
+
+        for (; i < l; ++i) {
+            obj = q[i];
+            //check for an intersection directly below the player
+            if (obj !== this && obj.has(this._anti) && obj.intersect(pos)) {
+                hit = obj;
+                break;
+            }
+        }
+
+        if (hit) { //stop falling if found and player is moving down
+            if (this._falling && ((this._gy > this._jumpSpeed) || !this._up)){
+              this.stopFalling(hit);
+            } 
+        } else {
+            this._falling = true; //keep falling otherwise
+        }
+    },
+
+    stopFalling: function (e) {
+        if (e) this.y = e._y - this._h; //move object
+
+        //this._gy = -1 * this._bounce;
+        this._falling = false;
+        if (this._up) this._up = false;
+        this.trigger("hit");
+    },
+
+    /**@
+     * #.antigravity
+     * @comp Gravity
+     * @sign public this .antigravity()
+     * Disable gravity for this component. It can be reenabled by calling .gravity()
+     */
+    antigravity: function () {
+        this.unbind("EnterFrame", this._enterFrame);
+    }
 });
 
 /**@
-* #Crafty.polygon
-* @category 2D
-*
-* Polygon object used for hitboxes and click maps. Must pass an Array for each point as an
-* argument where index 0 is the x position and index 1 is the y position.
-*
-* For example one point of a polygon will look like this: `[0,5]` where the `x` is `0` and the `y` is `5`.
-*
-* Can pass an array of the points or simply put each point as an argument.
-*
-* When creating a polygon for an entity, each point should be offset or relative from the entities `x` and `y`
-* (don't include the absolute values as it will automatically calculate this).
-*
-*
-* @example
-* ~~~
-* new Crafty.polygon([50,0],[100,100],[0,100]);
-* new Crafty.polygon([[50,0],[100,100],[0,100]]);
-* ~~~
-*/
+ * #Crafty.polygon
+ * @category 2D
+ *
+ * Polygon object used for hitboxes and click maps. Must pass an Array for each point as an
+ * argument where index 0 is the x position and index 1 is the y position.
+ *
+ * For example one point of a polygon will look like this: `[0,5]` where the `x` is `0` and the `y` is `5`.
+ *
+ * Can pass an array of the points or simply put each point as an argument.
+ *
+ * When creating a polygon for an entity, each point should be offset or relative from the entities `x` and `y`
+ * (don't include the absolute values as it will automatically calculate this).
+ *
+ *
+ * @example
+ * ~~~
+ * new Crafty.polygon([50,0],[100,100],[0,100]);
+ * new Crafty.polygon([[50,0],[100,100],[0,100]]);
+ * ~~~
+ */
 Crafty.polygon = function (poly) {
-	if (arguments.length > 1) {
-		poly = Array.prototype.slice.call(arguments, 0);
-	}
-	this.points = poly;
+    if (arguments.length > 1) {
+        poly = Array.prototype.slice.call(arguments, 0);
+    }
+    this.points = poly;
 };
 
 Crafty.polygon.prototype = {
-	/**@
-	* #.containsPoint
-	* @comp Crafty.polygon
-	* @sign public Boolean .containsPoint(Number x, Number y)
-	* @param x - X position of the point
-	* @param y - Y position of the point
-	*
-	* Method is used to determine if a given point is contained by the polygon.
-	*
-	* @example
-	* ~~~
-	* var poly = new Crafty.polygon([50,0],[100,100],[0,100]);
-	* poly.containsPoint(50, 50); //TRUE
-	* poly.containsPoint(0, 0); //FALSE
-	* ~~~
-	*/
-	containsPoint: function (x, y) {
-		var p = this.points, i, j, c = false;
-
-		for (i = 0, j = p.length - 1; i < p.length; j = i++) {
-			if (((p[i][1] > y) != (p[j][1] > y)) && (x < (p[j][0] - p[i][0]) * (y - p[i][1]) / (p[j][1] - p[i][1]) + p[i][0])) {
-				c = !c;
-			}
-		}
-
-		return c;
-	},
-
-	/**@
-	* #.shift
-	* @comp Crafty.polygon
-	* @sign public void .shift(Number x, Number y)
-	* @param x - Amount to shift the `x` axis
-	* @param y - Amount to shift the `y` axis
-	*
-	* Shifts every single point in the polygon by the specified amount.
-	*
-	* @example
-	* ~~~
-	* var poly = new Crafty.polygon([50,0],[100,100],[0,100]);
-	* poly.shift(5,5);
-	* //[[55,5], [105,5], [5,105]];
-	* ~~~
-	*/
-	shift: function (x, y) {
-		var i = 0, l = this.points.length, current;
-		for (; i < l; i++) {
-			current = this.points[i];
-			current[0] += x;
-			current[1] += y;
-		}
-	},
-
-	rotate: function (e) {
-		var i = 0, l = this.points.length,
-			current, x, y;
-
-		for (; i < l; i++) {
-			current = this.points[i];
-
-			x = e.o.x + (current[0] - e.o.x) * e.cos + (current[1] - e.o.y) * e.sin;
-			y = e.o.y - (current[0] - e.o.x) * e.sin + (current[1] - e.o.y) * e.cos;
-
-			current[0] = x;
-			current[1] = y;
-		}
-	}
+    /**@
+     * #.containsPoint
+     * @comp Crafty.polygon
+     * @sign public Boolean .containsPoint(Number x, Number y)
+     * @param x - X position of the point
+     * @param y - Y position of the point
+     *
+     * Method is used to determine if a given point is contained by the polygon.
+     *
+     * @example
+     * ~~~
+     * var poly = new Crafty.polygon([50,0],[100,100],[0,100]);
+     * poly.containsPoint(50, 50); //TRUE
+     * poly.containsPoint(0, 0); //FALSE
+     * ~~~
+     */
+    containsPoint: function (x, y) {
+        var p = this.points,
+            i, j, c = false;
+
+        for (i = 0, j = p.length - 1; i < p.length; j = i++) {
+            if (((p[i][1] > y) != (p[j][1] > y)) && (x < (p[j][0] - p[i][0]) * (y - p[i][1]) / (p[j][1] - p[i][1]) + p[i][0])) {
+                c = !c;
+            }
+        }
+
+        return c;
+    },
+
+    /**@
+     * #.shift
+     * @comp Crafty.polygon
+     * @sign public void .shift(Number x, Number y)
+     * @param x - Amount to shift the `x` axis
+     * @param y - Amount to shift the `y` axis
+     *
+     * Shifts every single point in the polygon by the specified amount.
+     *
+     * @example
+     * ~~~
+     * var poly = new Crafty.polygon([50,0],[100,100],[0,100]);
+     * poly.shift(5,5);
+     * //[[55,5], [105,5], [5,105]];
+     * ~~~
+     */
+    shift: function (x, y) {
+        var i = 0,
+            l = this.points.length,
+            current;
+        for (; i < l; i++) {
+            current = this.points[i];
+            current[0] += x;
+            current[1] += y;
+        }
+    },
+
+    rotate: function (e) {
+        var i = 0,
+            l = this.points.length,
+            current, x, y;
+
+        for (; i < l; i++) {
+            current = this.points[i];
+
+            x = e.o.x + (current[0] - e.o.x) * e.cos + (current[1] - e.o.y) * e.sin;
+            y = e.o.y - (current[0] - e.o.x) * e.sin + (current[1] - e.o.y) * e.cos;
+
+            current[0] = x;
+            current[1] = y;
+        }
+    }
 };
 
 /**@
-* #Crafty.circle
-* @category 2D
-* Circle object used for hitboxes and click maps. Must pass a `x`, a `y` and a `radius` value.
-*
-*@example
-* ~~~
-* var centerX = 5,
-*     centerY = 10,
-*     radius = 25;
-*
-* new Crafty.circle(centerX, centerY, radius);
-* ~~~
-*
-* When creating a circle for an entity, each point should be offset or relative from the entities `x` and `y`
-* (don't include the absolute values as it will automatically calculate this).
-*/
+ * #Crafty.circle
+ * @category 2D
+ * Circle object used for hitboxes and click maps. Must pass a `x`, a `y` and a `radius` value.
+ *
+ *@example
+ * ~~~
+ * var centerX = 5,
+ *     centerY = 10,
+ *     radius = 25;
+ *
+ * new Crafty.circle(centerX, centerY, radius);
+ * ~~~
+ *
+ * When creating a circle for an entity, each point should be offset or relative from the entities `x` and `y`
+ * (don't include the absolute values as it will automatically calculate this).
+ */
 Crafty.circle = function (x, y, radius) {
     this.x = x;
     this.y = y;
@@ -1047,94 +1274,96 @@ Crafty.circle = function (x, y, radius) {
 
 Crafty.circle.prototype = {
     /**@
-	* #.containsPoint
-	* @comp Crafty.circle
-	* @sign public Boolean .containsPoint(Number x, Number y)
-	* @param x - X position of the point
-	* @param y - Y position of the point
-	*
-	* Method is used to determine if a given point is contained by the circle.
-	*
-	* @example
-	* ~~~
-	* var circle = new Crafty.circle(0, 0, 10);
-	* circle.containsPoint(0, 0); //TRUE
-	* circle.containsPoint(50, 50); //FALSE
-	* ~~~
-	*/
-	containsPoint: function (x, y) {
-		var radius = this.radius,
-		    sqrt = Math.sqrt,
-		    deltaX = this.x - x,
-		    deltaY = this.y - y;
-
-		return (deltaX * deltaX + deltaY * deltaY) < (radius * radius);
-	},
-
-	/**@
-	* #.shift
-	* @comp Crafty.circle
-	* @sign public void .shift(Number x, Number y)
-	* @param x - Amount to shift the `x` axis
-	* @param y - Amount to shift the `y` axis
-	*
-	* Shifts the circle by the specified amount.
-	*
-	* @example
-	* ~~~
-	* var poly = new Crafty.circle(0, 0, 10);
-	* circle.shift(5,5);
-	* //{x: 5, y: 5, radius: 10};
-	* ~~~
-	*/
-	shift: function (x, y) {
-		this.x += x;
-		this.y += y;
-
-		var i = 0, l = this.points.length, current;
-		for (; i < l; i++) {
-			current = this.points[i];
-			current[0] += x;
-			current[1] += y;
-		}
-	},
-
-	rotate: function () {
-		// We are a circle, we don't have to rotate :)
-	}
+     * #.containsPoint
+     * @comp Crafty.circle
+     * @sign public Boolean .containsPoint(Number x, Number y)
+     * @param x - X position of the point
+     * @param y - Y position of the point
+     *
+     * Method is used to determine if a given point is contained by the circle.
+     *
+     * @example
+     * ~~~
+     * var circle = new Crafty.circle(0, 0, 10);
+     * circle.containsPoint(0, 0); //TRUE
+     * circle.containsPoint(50, 50); //FALSE
+     * ~~~
+     */
+    containsPoint: function (x, y) {
+        var radius = this.radius,
+            sqrt = Math.sqrt,
+            deltaX = this.x - x,
+            deltaY = this.y - y;
+
+        return (deltaX * deltaX + deltaY * deltaY) < (radius * radius);
+    },
+
+    /**@
+     * #.shift
+     * @comp Crafty.circle
+     * @sign public void .shift(Number x, Number y)
+     * @param x - Amount to shift the `x` axis
+     * @param y - Amount to shift the `y` axis
+     *
+     * Shifts the circle by the specified amount.
+     *
+     * @example
+     * ~~~
+     * var circle = new Crafty.circle(0, 0, 10);
+     * circle.shift(5,5);
+     * //{x: 5, y: 5, radius: 10};
+     * ~~~
+     */
+    shift: function (x, y) {
+        this.x += x;
+        this.y += y;
+
+        var i = 0,
+            l = this.points.length,
+            current;
+        for (; i < l; i++) {
+            current = this.points[i];
+            current[0] += x;
+            current[1] += y;
+        }
+    },
+
+    rotate: function () {
+        // We are a circle, we don't have to rotate :)
+    }
 };
 
 
 Crafty.matrix = function (m) {
-	this.mtx = m;
-	this.width = m[0].length;
-	this.height = m.length;
+    this.mtx = m;
+    this.width = m[0].length;
+    this.height = m.length;
 };
 
 Crafty.matrix.prototype = {
-	x: function (other) {
-		if (this.width != other.height) {
-			return;
-		}
-
-		var result = [];
-		for (var i = 0; i < this.height; i++) {
-			result[i] = [];
-			for (var j = 0; j < other.width; j++) {
-				var sum = 0;
-				for (var k = 0; k < this.width; k++) {
-					sum += this.mtx[i][k] * other.mtx[k][j];
-				}
-				result[i][j] = sum;
-			}
-		}
-		return new Crafty.matrix(result);
-	},
-
-
-	e: function (row, col) {
-		//test if out of bounds
-		if (row < 1 || row > this.mtx.length || col < 1 || col > this.mtx[0].length) return null;
-		return this.mtx[row - 1][col - 1];
-	}
-}
+    x: function (other) {
+        if (this.width != other.height) {
+            return;
+        }
+
+        var result = [];
+        for (var i = 0; i < this.height; i++) {
+            result[i] = [];
+            for (var j = 0; j < other.width; j++) {
+                var sum = 0;
+                for (var k = 0; k < this.width; k++) {
+                    sum += this.mtx[i][k] * other.mtx[k][j];
+                }
+                result[i][j] = sum;
+            }
+        }
+        return new Crafty.matrix(result);
+    },
+
+
+    e: function (row, col) {
+        //test if out of bounds
+        if (row < 1 || row > this.mtx.length || col < 1 || col > this.mtx[0].length) return null;
+        return this.mtx[row - 1][col - 1];
+    }
+};
diff --git a/src/DOM.js b/src/DOM.js
index 74edd877..c1a7fd05 100644
--- a/src/DOM.js
+++ b/src/DOM.js
@@ -1,393 +1,435 @@
+var Crafty = require('./core.js'),
+    document = window.document;
+
 /**@
-* #DOM
-* @category Graphics
-* Draws entities as DOM nodes, specifically `
            `s.
-*/
+ * #DOM
+ * @category Graphics
+ * Draws entities as DOM nodes, specifically `
            `s.
+ */
 Crafty.c("DOM", {
     /**@
-	* #._element
-	* @comp DOM
-	* The DOM element used to represent the entity.
-	*/
-	_element: null,
-	//holds current styles, so we can check if there are changes to be written to the DOM
-	_cssStyles: null,
-
-	init: function () {
-		this._cssStyles = { visibility: '', left: '', top: '', width: '', height: '', zIndex: '', opacity: '', transformOrigin: '', transform: '' };
-		this._element = document.createElement("div");
-		Crafty.stage.inner.appendChild(this._element);
-		this._element.style.position = "absolute";
-		this._element.id = "ent" + this[0];
-
-		this.bind("Change", function () {
-			if (!this._changed) {
-				this._changed = true;
-				Crafty.DrawManager.addDom(this);
-			}
-		});
-
-		function updateClass() {
-			var i = 0, c = this.__c, str = "";
-			for (i in c) {
-				str += ' ' + i;
-			}
-			str = str.substr(1);
-			this._element.className = str;
-		}
-
-		this.bind("NewComponent", updateClass).bind("RemoveComponent", updateClass);
-
-		if (Crafty.support.prefix === "ms" && Crafty.support.version < 9) {
-			this._filters = {};
-
-			this.bind("Rotate", function (e) {
-				var m = e.matrix,
-					elem = this._element.style,
-					M11 = m.M11.toFixed(8),
-					M12 = m.M12.toFixed(8),
-					M21 = m.M21.toFixed(8),
-					M22 = m.M22.toFixed(8);
-
-				this._filters.rotation = "progid:DXImageTransform.Microsoft.Matrix(M11=" + M11 + ", M12=" + M12 + ", M21=" + M21 + ", M22=" + M22 + ",sizingMethod='auto expand')";
-			});
-		}
-
-		this.bind("Remove", this.undraw);
-		this.bind("RemoveComponent", function (compName) {
-			if (compName === "DOM")
-				this.undraw();
-		});
-	},
-
-	/**@
-	* #.getDomId
-	* @comp DOM
-	* @sign public this .getId()
-	* 
-	* Get the Id of the DOM element used to represent the entity.
-	*/
-	getDomId: function() {
-		return this._element.id;
-	},
-
-	/**@
-	* #.DOM
-	* @comp DOM
-	* @trigger Draw - when the entity is ready to be drawn to the stage - { style:String, type:"DOM", co}
-	* @sign public this .DOM(HTMLElement elem)
-	* @param elem - HTML element that will replace the dynamically created one
-	* 
-	* Pass a DOM element to use rather than one created. Will set `._element` to this value. Removes the old element.
-	*/
-	DOM: function (elem) {
-		if (elem && elem.nodeType) {
-			this.undraw();
-			this._element = elem;
-			this._element.style.position = 'absolute';
-		}
-		return this;
-	},
-
-	/**@
-	* #.draw
-	* @comp DOM
-	* @sign public this .draw(void)
-	* 
-	* Updates the CSS properties of the node to draw on the stage.
-	*/
-	draw: function () {
-		var style = this._element.style,
-			coord = this.__coord || [0, 0, 0, 0],
-			co = { x: coord[0], y: coord[1] },
-			prefix = Crafty.support.prefix,
-			trans = [];
-
-		if (this._cssStyles.visibility !== this._visible) {
-			this._cssStyles.visibility = this._visible;
-			if (!this._visible) {
-				style.visibility = "hidden";
-			} else {
-				style.visibility = "visible";
-			}
-		}
-
-		//utilize CSS3 if supported
-		if (Crafty.support.css3dtransform) {
-			trans.push("translate3d(" + (~~this._x) + "px," + (~~this._y) + "px,0)");
-		} else {
-			if (this._cssStyles.left !== this._x) {
-				this._cssStyles.left = this._x;
-				style.left = ~~(this._x) + "px";
-			}
-			if (this._cssStyles.top !== this._y) {
-				this._cssStyles.top = this._y;
-				style.top = ~~(this._y) + "px";
-			}
-		}
-
-		if (this._cssStyles.width !== this._w) {
-			this._cssStyles.width = this._w;
-			style.width = ~~(this._w) + "px";
-		}
-		if (this._cssStyles.height !== this._h) {
-			this._cssStyles.height = this._h;
-			style.height = ~~(this._h) + "px";
-		}
-		if (this._cssStyles.zIndex !== this._z) {
-			this._cssStyles.zIndex = this._z;
-			style.zIndex = this._z;
-		}
-
-		if (this._cssStyles.opacity !== this._alpha) {
-			this._cssStyles.opacity = this._alpha;
-			style.opacity = this._alpha;
-			style[prefix + "Opacity"] = this._alpha;
-		}
-
-		//if not version 9 of IE
-		if (prefix === "ms" && Crafty.support.version < 9) {
-			//for IE version 8, use ImageTransform filter
-			if (Crafty.support.version === 8) {
-				this._filters.alpha = "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + (this._alpha * 100) + ")"; // first!
-				//all other versions use filter
-			} else {
-				this._filters.alpha = "alpha(opacity=" + (this._alpha * 100) + ")";
-			}
-		}
-
-		if (this._mbr) {
-			var origin = this._origin.x + "px " + this._origin.y + "px";
-			style.transformOrigin = origin;
-			style[prefix + "TransformOrigin"] = origin;
-			if (Crafty.support.css3dtransform) trans.push("rotateZ(" + this._rotation + "deg)");
-			else trans.push("rotate(" + this._rotation + "deg)");
-		}
-
-		if (this._flipX) {
-			trans.push("scaleX(-1)");
-			if (prefix === "ms" && Crafty.support.version < 9) {
-				this._filters.flipX = "fliph";
-			}
-		}
-
-		if (this._flipY) {
-			trans.push("scaleY(-1)");
-			if (prefix === "ms" && Crafty.support.version < 9) {
-				this._filters.flipY = "flipv";
-			}
-		}
-
-		//apply the filters if IE
-		if (prefix === "ms" && Crafty.support.version < 9) {
-			this.applyFilters();
-		}
-
-		if (this._cssStyles.transform != trans.join(" ")) {
-			this._cssStyles.transform = trans.join(" ");
-			style.transform = this._cssStyles.transform;
-			style[prefix + "Transform"] = this._cssStyles.transform;
-		}
-
-		this.trigger("Draw", { style: style, type: "DOM", co: co });
-
-		return this;
-	},
-
-	applyFilters: function () {
-		this._element.style.filter = "";
-		var str = "";
-
-		for (var filter in this._filters) {
-			if (!this._filters.hasOwnProperty(filter)) continue;
-			str += this._filters[filter] + " ";
-		}
-
-		this._element.style.filter = str;
-	},
-
-	/**@
-	* #.undraw
-	* @comp DOM
-	* @sign public this .undraw(void)
-	* 
-	* Removes the element from the stage.
-	*/
-	undraw: function () {
-		if (this._element) {
-			Crafty.stage.inner.removeChild(this._element);
-		}
-		return this;
-	},
-
-	/**@
-	* #.css
-	* @comp DOM
-	* @sign public * css(String property, String value)
-	* @param property - CSS property to modify
-	* @param value - Value to give the CSS property
-	* @sign public * css(Object map)
-	* @param map - Object where the key is the CSS property and the value is CSS value
-	* 
-	* Apply CSS styles to the element.
-	*
-	* Can pass an object where the key is the style property and the value is style value.
-	*
-	* For setting one style, simply pass the style as the first argument and the value as the second.
-	*
-	* The notation can be CSS or JS (e.g. `text-align` or `textAlign`).
-	*
-	* To return a value, pass the property.
-	* 
-	* Note: For entities with "Text" component, some css properties are controlled by separate functions
-	* `.textFont()` and `.textColor()`, and ignore `.css()` settings. See Text component for details.
-	* 
-	* @example
-	* ~~~
-	* this.css({'text-align', 'center', 'text-decoration': 'line-through'});
-	* this.css("textAlign", "center");
-	* this.css("text-align"); //returns center
-	* ~~~
-	*/
-	css: function (obj, value) {
-		var key,
-			elem = this._element,
-			val,
-			style = elem.style;
-
-		//if an object passed
-		if (typeof obj === "object") {
-			for (key in obj) {
-				if (!obj.hasOwnProperty(key)) continue;
-				val = obj[key];
-				if (typeof val === "number") val += 'px';
-
-				style[Crafty.DOM.camelize(key)] = val;
-			}
-		} else {
-			//if a value is passed, set the property
-			if (value) {
-				if (typeof value === "number") value += 'px';
-				style[Crafty.DOM.camelize(obj)] = value;
-			} else { //otherwise return the computed property
-				return Crafty.DOM.getStyle(elem, obj);
-			}
-		}
-
-		this.trigger("Change");
-
-		return this;
-	}
+     * #._element
+     * @comp DOM
+     * The DOM element used to represent the entity.
+     */
+    _element: null,
+    //holds current styles, so we can check if there are changes to be written to the DOM
+    _cssStyles: null,
+
+    /**@
+     * #.avoidCss3dTransforms
+     * @comp DOM
+     * Avoids using of CSS 3D Transform for positioning when true. Default value is false.
+     */
+    avoidCss3dTransforms: false,
+
+    init: function () {
+        this._cssStyles = {
+            visibility: '',
+            left: '',
+            top: '',
+            width: '',
+            height: '',
+            zIndex: '',
+            opacity: '',
+            transformOrigin: '',
+            transform: ''
+        };
+        this._element = document.createElement("div");
+        Crafty.stage.inner.appendChild(this._element);
+        this._element.style.position = "absolute";
+        this._element.id = "ent" + this[0];
+
+        this.bind("Change", function () {
+            if (!this._changed) {
+                this._changed = true;
+                Crafty.DrawManager.addDom(this);
+            }
+        });
+
+        function updateClass() {
+            var i = 0,
+                c = this.__c,
+                str = "";
+            for (i in c) {
+                str += ' ' + i;
+            }
+            str = str.substr(1);
+            this._element.className = str;
+        }
+
+        this.bind("NewComponent", updateClass).bind("RemoveComponent", updateClass);
+
+        if (Crafty.support.prefix === "ms" && Crafty.support.version < 9) {
+            this._filters = {};
+
+            this.bind("Rotate", function (e) {
+                var m = e.matrix,
+                    elem = this._element.style,
+                    M11 = m.M11.toFixed(8),
+                    M12 = m.M12.toFixed(8),
+                    M21 = m.M21.toFixed(8),
+                    M22 = m.M22.toFixed(8);
+
+                this._filters.rotation = "progid:DXImageTransform.Microsoft.Matrix(M11=" + M11 + ", M12=" + M12 + ", M21=" + M21 + ", M22=" + M22 + ",sizingMethod='auto expand')";
+            });
+        }
+
+        this.bind("Remove", this.undraw);
+        this.bind("RemoveComponent", function (compName) {
+            if (compName === "DOM")
+                this.undraw();
+        });
+    },
+
+    /**@
+     * #.getDomId
+     * @comp DOM
+     * @sign public this .getId()
+     *
+     * Get the Id of the DOM element used to represent the entity.
+     */
+    getDomId: function () {
+        return this._element.id;
+    },
+
+    /**@
+     * #.DOM
+     * @comp DOM
+     * @trigger Draw - when the entity is ready to be drawn to the stage - { style:String, type:"DOM", co}
+     * @sign public this .DOM(HTMLElement elem)
+     * @param elem - HTML element that will replace the dynamically created one
+     *
+     * Pass a DOM element to use rather than one created. Will set `._element` to this value. Removes the old element.
+     */
+    DOM: function (elem) {
+        if (elem && elem.nodeType) {
+            this.undraw();
+            this._element = elem;
+            this._element.style.position = 'absolute';
+        }
+        return this;
+    },
+
+    /**@
+     * #.draw
+     * @comp DOM
+     * @sign public this .draw(void)
+     *
+     * Updates the CSS properties of the node to draw on the stage.
+     */
+    draw: function () {
+        var style = this._element.style,
+            coord = this.__coord || [0, 0, 0, 0],
+            co = {
+                x: coord[0],
+                y: coord[1],
+                w: coord[2],
+                h: coord[3]
+            },
+            prefix = Crafty.support.prefix,
+            trans = [];
+
+        if (this._cssStyles.visibility !== this._visible) {
+            this._cssStyles.visibility = this._visible;
+            if (!this._visible) {
+                style.visibility = "hidden";
+            } else {
+                style.visibility = "visible";
+            }
+        }
+
+        //utilize CSS3 if supported
+        if (Crafty.support.css3dtransform && !this.avoidCss3dTransforms) {
+            trans.push("translate3d(" + (~~this._x) + "px," + (~~this._y) + "px,0)");
+        } else {
+            if (this._cssStyles.left !== this._x) {
+                this._cssStyles.left = this._x;
+                style.left = ~~ (this._x) + "px";
+            }
+            if (this._cssStyles.top !== this._y) {
+                this._cssStyles.top = this._y;
+                style.top = ~~ (this._y) + "px";
+            }
+        }
+
+        if (this._cssStyles.width !== this._w) {
+            this._cssStyles.width = this._w;
+            style.width = ~~ (this._w) + "px";
+        }
+        if (this._cssStyles.height !== this._h) {
+            this._cssStyles.height = this._h;
+            style.height = ~~ (this._h) + "px";
+        }
+        if (this._cssStyles.zIndex !== this._z) {
+            this._cssStyles.zIndex = this._z;
+            style.zIndex = this._z;
+        }
+
+        if (this._cssStyles.opacity !== this._alpha) {
+            this._cssStyles.opacity = this._alpha;
+            style.opacity = this._alpha;
+            style[prefix + "Opacity"] = this._alpha;
+        }
+
+        //if not version 9 of IE
+        if (prefix === "ms" && Crafty.support.version < 9) {
+            //for IE version 8, use ImageTransform filter
+            if (Crafty.support.version === 8) {
+                this._filters.alpha = "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + (this._alpha * 100) + ")"; // first!
+                //all other versions use filter
+            } else {
+                this._filters.alpha = "alpha(opacity=" + (this._alpha * 100) + ")";
+            }
+        }
+
+        if (this._mbr) {
+            var origin = this._origin.x + "px " + this._origin.y + "px";
+            style.transformOrigin = origin;
+            style[prefix + "TransformOrigin"] = origin;
+            if (Crafty.support.css3dtransform) trans.push("rotateZ(" + this._rotation + "deg)");
+            else trans.push("rotate(" + this._rotation + "deg)");
+        }
+
+        if (this._flipX) {
+            trans.push("scaleX(-1)");
+            if (prefix === "ms" && Crafty.support.version < 9) {
+                this._filters.flipX = "fliph";
+            }
+        }
+
+        if (this._flipY) {
+            trans.push("scaleY(-1)");
+            if (prefix === "ms" && Crafty.support.version < 9) {
+                this._filters.flipY = "flipv";
+            }
+        }
+
+        //apply the filters if IE
+        if (prefix === "ms" && Crafty.support.version < 9) {
+            this.applyFilters();
+        }
+
+        if (this._cssStyles.transform != trans.join(" ")) {
+            this._cssStyles.transform = trans.join(" ");
+            style.transform = this._cssStyles.transform;
+            style[prefix + "Transform"] = this._cssStyles.transform;
+        }
+
+        this.trigger("Draw", {
+            style: style,
+            type: "DOM",
+            co: co
+        });
+
+        return this;
+    },
+
+    applyFilters: function () {
+        this._element.style.filter = "";
+        var str = "";
+
+        for (var filter in this._filters) {
+            if (!this._filters.hasOwnProperty(filter)) continue;
+            str += this._filters[filter] + " ";
+        }
+
+        this._element.style.filter = str;
+    },
+
+    /**@
+     * #.undraw
+     * @comp DOM
+     * @sign public this .undraw(void)
+     *
+     * Removes the element from the stage.
+     */
+    undraw: function () {
+        if (this._element) {
+            Crafty.stage.inner.removeChild(this._element);
+        }
+        return this;
+    },
+
+    /**@
+     * #.css
+     * @comp DOM
+     * @sign public * css(String property, String value)
+     * @param property - CSS property to modify
+     * @param value - Value to give the CSS property
+     * @sign public * css(Object map)
+     * @param map - Object where the key is the CSS property and the value is CSS value
+     *
+     * Apply CSS styles to the element.
+     *
+     * Can pass an object where the key is the style property and the value is style value.
+     *
+     * For setting one style, simply pass the style as the first argument and the value as the second.
+     *
+     * The notation can be CSS or JS (e.g. `text-align` or `textAlign`).
+     *
+     * To return a value, pass the property.
+     *
+     * Note: For entities with "Text" component, some css properties are controlled by separate functions
+     * `.textFont()` and `.textColor()`, and ignore `.css()` settings. See Text component for details.
+     *
+     * @example
+     * ~~~
+     * this.css({'text-align', 'center', 'text-decoration': 'line-through'});
+     * this.css("textAlign", "center");
+     * this.css("text-align"); //returns center
+     * ~~~
+     */
+    css: function (obj, value) {
+        var key,
+            elem = this._element,
+            val,
+            style = elem.style;
+
+        //if an object passed
+        if (typeof obj === "object") {
+            for (key in obj) {
+                if (!obj.hasOwnProperty(key)) continue;
+                val = obj[key];
+                if (typeof val === "number") val += 'px';
+
+                style[Crafty.DOM.camelize(key)] = val;
+            }
+        } else {
+            //if a value is passed, set the property
+            if (value) {
+                if (typeof value === "number") value += 'px';
+                style[Crafty.DOM.camelize(obj)] = value;
+            } else { //otherwise return the computed property
+                return Crafty.DOM.getStyle(elem, obj);
+            }
+        }
+
+        this.trigger("Change");
+
+        return this;
+    }
 });
 
 /**
-* Fix IE6 background flickering
-*/
+ * Fix IE6 background flickering
+ */
 try {
-	document.execCommand("BackgroundImageCache", false, true);
-} catch (e) { }
+    document.execCommand("BackgroundImageCache", false, true);
+} catch (e) {}
 
 Crafty.extend({
     /**@
-	* #Crafty.DOM
-	* @category Graphics
-	* 
-	* Collection of utilities for using the DOM.
-	*/
-	DOM: {
-	/**@
-		* #Crafty.DOM.window
-		* @comp Crafty.DOM
-		* 
-		* Object with `width` and `height` values representing the width
-		* and height of the `window`.
-		*/
-		window: {
-			init: function () {
-				this.width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
-				this.height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
-			},
-
-			width: 0,
-			height: 0
-		},
-
-		/**@
-		* #Crafty.DOM.inner
-		* @comp Crafty.DOM
-		* @sign public Object Crafty.DOM.inner(HTMLElement obj)
-		* @param obj - HTML element to calculate the position
-		* @returns Object with `x` key being the `x` position, `y` being the `y` position
-		* 
-		* Find a DOM elements position including
-		* padding and border.
-		*/
-		inner: function (obj) {
-			var rect = obj.getBoundingClientRect(),
-				x = rect.left + (window.pageXOffset ? window.pageXOffset : document.body.scrollLeft),
-				y = rect.top + (window.pageYOffset ? window.pageYOffset : document.body.scrollTop),
-
-			//border left
-				borderX = parseInt(this.getStyle(obj, 'border-left-width') || 0, 10) || parseInt(this.getStyle(obj, 'borderLeftWidth') || 0, 10) || 0,
-				borderY = parseInt(this.getStyle(obj, 'border-top-width') || 0, 10) || parseInt(this.getStyle(obj, 'borderTopWidth') || 0, 10) || 0;
-
-			x += borderX;
-			y += borderY;
-
-			return { x: x, y: y };
-		},
-
-		/**@
-		* #Crafty.DOM.getStyle
-		* @comp Crafty.DOM
-		* @sign public Object Crafty.DOM.getStyle(HTMLElement obj, String property)
-		* @param obj - HTML element to find the style
-		* @param property - Style to return
-		* 
-		* Determine the value of a style on an HTML element. Notation can be
-		* in either CSS or JS.
-		*/
-		getStyle: function (obj, prop) {
-			var result;
-			if (obj.currentStyle)
-				result = obj.currentStyle[this.camelize(prop)];
-			else if (window.getComputedStyle)
-				result = document.defaultView.getComputedStyle(obj, null).getPropertyValue(this.csselize(prop));
-			return result;
-		},
-
-		/**
-		* Used in the Zepto framework
-		*
-		* Converts CSS notation to JS notation
-		*/
-		camelize: function (str) {
-			return str.replace(/-+(.)?/g, function (match, chr){ return chr ? chr.toUpperCase() : '' });
-		},
-
-		/**
-		* Converts JS notation to CSS notation
-		*/
-		csselize: function (str) {
-			return str.replace(/[A-Z]/g, function (chr){ return chr ? '-' + chr.toLowerCase() : '' });
-		},
-
-		/**@
-		* #Crafty.DOM.translate
-		* @comp Crafty.DOM
-		* @sign public Object Crafty.DOM.translate(Number x, Number y)
-		* @param x - x position to translate
-		* @param y - y position to translate
-		* @return Object with x and y as keys and translated values
-		*
-		* Method will translate x and y positions to positions on the
-		* stage. Useful for mouse events with `e.clientX` and `e.clientY`.
-		*/
-		translate: function (x, y) {
-			return {
-				x: (x - Crafty.stage.x + document.body.scrollLeft + document.documentElement.scrollLeft - Crafty.viewport._x)/Crafty.viewport._zoom,
-				y: (y - Crafty.stage.y + document.body.scrollTop + document.documentElement.scrollTop - Crafty.viewport._y)/Crafty.viewport._zoom
-			}
-		}
-	}
+     * #Crafty.DOM
+     * @category Graphics
+     *
+     * Collection of utilities for using the DOM.
+     */
+    DOM: {
+        /**@
+         * #Crafty.DOM.window
+         * @comp Crafty.DOM
+         *
+         * Object with `width` and `height` values representing the width
+         * and height of the `window`.
+         */
+        window: {
+            init: function () {
+                this.width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
+                this.height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
+
+                // Bind scene rendering (see drawing.js)
+                Crafty.unbind("RenderScene", Crafty.DrawManager.renderDOM);
+                Crafty.bind("RenderScene", Crafty.DrawManager.renderDOM);
+            },
+
+            width: 0,
+            height: 0
+        },
+
+        /**@
+         * #Crafty.DOM.inner
+         * @comp Crafty.DOM
+         * @sign public Object Crafty.DOM.inner(HTMLElement obj)
+         * @param obj - HTML element to calculate the position
+         * @returns Object with `x` key being the `x` position, `y` being the `y` position
+         *
+         * Find a DOM elements position including
+         * padding and border.
+         */
+        inner: function (obj) {
+            var rect = obj.getBoundingClientRect(),
+                x = rect.left + (window.pageXOffset ? window.pageXOffset : document.body.scrollLeft),
+                y = rect.top + (window.pageYOffset ? window.pageYOffset : document.body.scrollTop),
+
+                //border left
+                borderX = parseInt(this.getStyle(obj, 'border-left-width') || 0, 10) || parseInt(this.getStyle(obj, 'borderLeftWidth') || 0, 10) || 0,
+                borderY = parseInt(this.getStyle(obj, 'border-top-width') || 0, 10) || parseInt(this.getStyle(obj, 'borderTopWidth') || 0, 10) || 0;
+
+            x += borderX;
+            y += borderY;
+
+            return {
+                x: x,
+                y: y
+            };
+        },
+
+        /**@
+         * #Crafty.DOM.getStyle
+         * @comp Crafty.DOM
+         * @sign public Object Crafty.DOM.getStyle(HTMLElement obj, String property)
+         * @param obj - HTML element to find the style
+         * @param property - Style to return
+         *
+         * Determine the value of a style on an HTML element. Notation can be
+         * in either CSS or JS.
+         */
+        getStyle: function (obj, prop) {
+            var result;
+            if (obj.currentStyle)
+                result = obj.currentStyle[this.camelize(prop)];
+            else if (window.getComputedStyle)
+                result = document.defaultView.getComputedStyle(obj, null).getPropertyValue(this.csselize(prop));
+            return result;
+        },
+
+        /**
+         * Used in the Zepto framework
+         *
+         * Converts CSS notation to JS notation
+         */
+        camelize: function (str) {
+            return str.replace(/-+(.)?/g, function (match, chr) {
+                return chr ? chr.toUpperCase() : '';
+            });
+        },
+
+        /**
+         * Converts JS notation to CSS notation
+         */
+        csselize: function (str) {
+            return str.replace(/[A-Z]/g, function (chr) {
+                return chr ? '-' + chr.toLowerCase() : '';
+            });
+        },
+
+        /**@
+         * #Crafty.DOM.translate
+         * @comp Crafty.DOM
+         * @sign public Object Crafty.DOM.translate(Number x, Number y)
+         * @param x - x position to translate
+         * @param y - y position to translate
+         * @return Object with x and y as keys and translated values
+         *
+         * Method will translate x and y positions to positions on the
+         * stage. Useful for mouse events with `e.clientX` and `e.clientY`.
+         */
+        translate: function (x, y) {
+            return {
+                x: (x - Crafty.stage.x + document.body.scrollLeft + document.documentElement.scrollLeft - Crafty.viewport._x) / Crafty.viewport._scale,
+                y: (y - Crafty.stage.y + document.body.scrollTop + document.documentElement.scrollTop - Crafty.viewport._y) / Crafty.viewport._scale
+            };
+        }
+    }
 });
diff --git a/src/DebugLayer.js b/src/DebugLayer.js
new file mode 100644
index 00000000..228ac18c
--- /dev/null
+++ b/src/DebugLayer.js
@@ -0,0 +1,371 @@
+var Crafty = require('./core.js'),
+    document = window.document;
+
+/**@
+ * #DebugCanvas
+ * @category Debug
+ * @trigger Draw - when the entity is ready to be drawn to the stage
+ * @trigger NoCanvas - if the browser does not support canvas
+ *
+ * When this component is added to an entity it will be drawn by the DebugCanvas layer.
+ *
+ * Crafty.debugCanvas.init() will be automatically called if it is not called already to initialize the canvas element.
+ *
+ * To visualise an object's MBR, use "VisibleMBR".  To visualise a "Collision" object's hitbox, use "WiredHitBox" or "SolidHitBox".
+ * @see DebugPolygon,  DebugRectangle
+ */
+Crafty.c("DebugCanvas", {
+    init: function () {
+        this.requires("2D");
+        if (!Crafty.DebugCanvas.context)
+            Crafty.DebugCanvas.init();
+        Crafty.DebugCanvas.add(this);
+        this._debug = {
+            alpha: 1.0,
+            lineWidth: 1
+        };
+        this.bind("RemoveComponent", this.onDebugRemove);
+        this.bind("Remove", this.onDebugDestroy);
+    },
+
+    // When component is removed
+    onDebugRemove: function (id) {
+        if (id === "DebugCanvas") {
+            Crafty.DebugCanvas.remove(this);
+        }
+    },
+
+    //When entity is destroyed
+    onDebugDestroy: function (id) {
+        Crafty.DebugCanvas.remove(this);
+    },
+
+    /**@
+     * #.debugAlpha
+     * @comp DebugCanvas
+     * @sign public  .debugAlpha(Number alpha)
+     * @param alpha - The alpha level the component will be drawn with
+     */
+    debugAlpha: function (alpha) {
+        this._debug.alpha = alpha;
+        return this;
+    },
+
+    /**@
+     * #.debugFill
+     * @comp DebugCanvas
+     * @sign public  .debugFill([String fillStyle])
+     * @param fillStyle - The color the component will be filled with.  Defaults to "red". Pass the boolean false to turn off filling.
+     * ~~~
+     * var myEntity = Crafty.e("2D, Collision, SolidHitBox ").debugFill("purple")
+     *~~~
+     */
+    debugFill: function (fillStyle) {
+        if (typeof fillStyle === 'undefined')
+            fillStyle = "red";
+        this._debug.fillStyle = fillStyle;
+        return this;
+    },
+
+    /**@
+     * #.debugStroke
+     * @comp DebugCanvas
+     * @sign public  .debugStroke([String strokeStyle])
+     * @param strokeStyle - The color the component will be outlined with.  Defaults to "red".  Pass the boolean false to turn this off.
+     * ~~~
+     * var myEntity = Crafty.e("2D, Collision, WiredHitBox ").debugStroke("white")
+     *~~~
+     */
+    debugStroke: function (strokeStyle) {
+        if (typeof strokeStyle === 'undefined')
+            strokeStyle = "red";
+        this._debug.strokeStyle = strokeStyle;
+        return this;
+    },
+
+    debugDraw: function (ctx) {
+        var ga = ctx.globalAlpha;
+        var props = this._debug;
+
+        if (props.alpha)
+            ctx.globalAlpha = this._debug.alpha;
+
+        if (props.strokeStyle)
+            ctx.strokeStyle = props.strokeStyle;
+
+        if (props.lineWidth)
+            ctx.lineWidth = props.lineWidth;
+
+        if (props.fillStyle)
+            ctx.fillStyle = props.fillStyle;
+
+        this.trigger("DebugDraw");
+
+        ctx.globalAlpha = ga;
+
+    }
+
+
+});
+
+
+
+/**@
+ * #DebugRectangle
+ * @category Debug
+ *
+ * A component for rendering an object with a position and dimensions to the debug canvas.
+ *
+ *
+ * ~~~
+ * var myEntity = Crafty.e("2D, DebugRectangle")
+ *                      .attr({x: 13, y: 37, w: 42, h: 42})
+ *                      .debugStroke("green");
+ * myEntity.debugRectangle(myEntity)
+ *~~~
+ * @see DebugCanvas
+ */
+Crafty.c("DebugRectangle", {
+    init: function () {
+        this.requires("2D, DebugCanvas");
+    },
+
+    /**@
+     * #.debugRectangle
+     * @comp DebugRectangle
+     * @sign public  .debugRectangle(Object rect)
+     * @param rect - an object with _x, _y, _w, and _h to draw
+     * Sets the rectangle that this component draws to the debug canvas.
+     *
+     */
+    debugRectangle: function (rect) {
+        this.debugRect = rect;
+        this.unbind("DebugDraw", this.drawDebugRect);
+        this.bind("DebugDraw", this.drawDebugRect);
+        return this;
+
+    },
+
+    drawDebugRect: function () {
+
+        ctx = Crafty.DebugCanvas.context;
+        var rect = this.debugRect;
+        if (rect === null || rect === undefined)
+            return;
+        if (rect._h && rect._w) {
+            if (this._debug.fillStyle)
+                ctx.fillRect(rect._x, rect._y, rect._w, rect._h);
+            if (this._debug.strokeStyle)
+                ctx.strokeRect(rect._x, rect._y, rect._w, rect._h);
+        }
+
+    }
+
+
+
+});
+
+
+
+/**@
+ * #VisibleMBR
+ * @category Debug
+ *
+ * Adding this component to an entity will cause it's MBR to be drawn to the debug canvas.
+ *
+ * The methods of DebugCanvas can be used to control this component's appearance.
+ * @see 2D, DebugRectangle, DebugCanvas
+ */
+Crafty.c("VisibleMBR", {
+    init: function () {
+        this.requires("DebugRectangle")
+            .debugFill("purple")
+            .bind("EnterFrame", this._assignRect);
+    },
+
+    // Internal method for updating the MBR drawn.
+    _assignRect: function () {
+        if (this._mbr)
+            this.debugRectangle(this._mbr);
+        else
+            this.debugRectangle(this);
+
+    }
+
+
+});
+
+
+/**@
+ * #DebugPolygon
+ * @category Debug
+ *
+ * For drawing a polygon to the debug canvas
+ *
+ * The methods of DebugCanvas can be used to control this component's appearance -- by default it is neither filled nor outlined
+ *
+ * For debugging hitboxes, use WiredHitBox or SolidHitBox.  For debugging MBR, use VisibleMBR
+ *
+ * @see DebugCanvas
+ */
+Crafty.c("DebugPolygon", {
+    init: function () {
+        this.requires("2D, DebugCanvas");
+    },
+
+
+    /**@
+     * #.debugPolygon
+     * @comp DebugPolygon
+     * @sign public  .debugPolygon(Polygon poly)
+     * @param poly - a polygon to render
+     * Sets the polygon that this component renders to the debug canvas.
+     *
+     */
+    debugPolygon: function (poly) {
+        this.polygon = poly;
+        this.unbind("DebugDraw", this.drawDebugPolygon);
+        this.bind("DebugDraw", this.drawDebugPolygon);
+        return this;
+    },
+
+    drawDebugPolygon: function () {
+        if (typeof this.polygon === "undefined")
+            return;
+
+        ctx = Crafty.DebugCanvas.context;
+        ctx.beginPath();
+        for (var p in this.polygon.points) {
+            ctx.lineTo(this.polygon.points[p][0], this.polygon.points[p][1]);
+        }
+        ctx.closePath();
+
+        if (this._debug.fillStyle)
+            ctx.fill();
+        if (this._debug.strokeStyle)
+            ctx.stroke();
+    }
+});
+
+
+/**@
+ * #WiredHitBox
+ * @category Debug
+ *
+ * Adding this component to an entity with a Collision component will cause its collision polygon to be drawn to the debug canvas as an outline
+ *
+ * The methods of DebugCanvas can be used to control this component's appearance.
+ * @see DebugPolygon, DebugCanvas
+ */
+Crafty.c("WiredHitBox", {
+    init: function () {
+        this.requires("DebugPolygon")
+            .debugStroke("red")
+            .matchHitBox();
+        this.bind("NewHitbox", this.matchHitBox);
+    },
+    matchHitBox: function () {
+        this.debugPolygon(this.map);
+    }
+});
+
+/**@
+ * #SolidHitBox
+ * @category Debug
+ *
+ * Adding this component to an entity with a Collision component will cause its collision polygon to be drawn to the debug canvas, with a default alpha level of 0.7.
+ *
+ * The methods of DebugCanvas can be used to control this component's appearance.
+ * @see DebugPolygon, DebugCanvas
+ */
+Crafty.c("SolidHitBox", {
+    init: function () {
+        this.requires("Collision, DebugPolygon")
+            .debugFill("orange").debugAlpha(0.7)
+            .matchHitBox();
+        this.bind("NewHitbox", this.matchHitBox);
+    },
+    matchHitBox: function () {
+        this.debugPolygon(this.map);
+    }
+});
+
+Crafty.DebugCanvas = {
+    context: null,
+    entities: [],
+    onetimeEntities: [],
+    add: function (ent) {
+        this.entities.push(ent);
+    },
+
+    remove: function (ent) {
+        var list = this.entities;
+        for (var i = list.length - 1; i >= 0; i--)
+            if (list[i] == ent)
+                list.splice(i, 1);
+
+    },
+
+    // Mostly copied from canvas.init()
+    // Called the first time a "DebugCanvas" component is added to an entity
+    // We should consider how to abstract the idea of multiple canvases
+    init: function () {
+        if (!Crafty.DebugCanvas.context) {
+            //check if canvas is supported
+            if (!Crafty.support.canvas) {
+                Crafty.trigger("NoCanvas");
+                Crafty.stop();
+                return;
+            }
+
+            //create an empty canvas element
+            var c;
+            c = document.createElement("canvas");
+            c.width = Crafty.viewport.width;
+            c.height = Crafty.viewport.height;
+            c.style.position = 'absolute';
+            c.style.left = "0px";
+            c.style.top = "0px";
+            c.id = "debug-canvas";
+            // The debug canvas should be on the very top; the highest a regular zindex can get is ~10000
+            c.style.zIndex = 100000;
+
+            Crafty.stage.elem.appendChild(c);
+            Crafty.DebugCanvas.context = c.getContext('2d');
+            Crafty.DebugCanvas._canvas = c;
+
+
+
+        }
+        //Bind rendering of canvas context (see drawing.js)
+        Crafty.unbind("RenderScene", Crafty.DebugCanvas.renderScene);
+        Crafty.bind("RenderScene", Crafty.DebugCanvas.renderScene);
+
+    },
+
+
+    // copied from drawAll()
+    renderScene: function (rect) {
+        rect = rect || Crafty.viewport.rect();
+        var q = Crafty.DebugCanvas.entities,
+            i = 0,
+            l = q.length,
+            ctx = Crafty.DebugCanvas.context,
+            current;
+
+        var view = Crafty.viewport;
+        ctx.setTransform(view._scale, 0, 0, view._scale, view._x, view._y);
+
+        ctx.clearRect(rect._x, rect._y, rect._w, rect._h);
+
+
+        //sort the objects by the global Z
+        //q.sort(zsort);
+        for (; i < l; i++) {
+            current = q[i];
+            current.debugDraw(ctx);
+        }
+
+    }
+
+};
diff --git a/src/HashMap.js b/src/HashMap.js
index 51a3bf78..223933cd 100644
--- a/src/HashMap.js
+++ b/src/HashMap.js
@@ -1,347 +1,361 @@
+var Crafty = require('./core.js'),
+    document = window.document;
+
 /**
-* Spatial HashMap for broad phase collision
-*
-* @author Louis Stowasser
-*/
-(function (parent) {
-
-
-	/**@
-	* #Crafty.HashMap.constructor
-	* @comp Crafty.HashMap
-	* @sign public void Crafty.HashMap([cellsize])
-	* @param cellsize - the cell size. If omitted, `cellsize` is 64.
-	* 
-    * Set `cellsize`.
-    * And create `this.map`.
-	*/
-	var cellsize,
-
-	HashMap = function (cell) {
-		cellsize = cell || 64;
-		this.map = {};
-	},
-
-	SPACE = " ",
-	keyHolder ={};
-
-	HashMap.prototype = {
-	/**@
-	* #Crafty.map.insert
-	* @comp Crafty.map
-    * @sign public Object Crafty.map.insert(Object obj)
-	* @param obj - An entity to be inserted.
-	* 
-    * `obj` is inserted in '.map' of the corresponding broad phase cells. An object of the following fields is returned.
-    * ~~~
-    * - the object that keep track of cells (keys)
-    * - `obj`
-    * - the HashMap object
-    * ~~~
-	*/
-		insert: function (obj) {
-			var keys = HashMap.key(obj),
-			entry = new Entry(keys, obj, this),
-			i = 0,
-			j,
-			hash;
-
-			//insert into all x buckets
-			for (i = keys.x1; i <= keys.x2; i++) {
-				//insert into all y buckets
-				for (j = keys.y1; j <= keys.y2; j++) {
-					hash = (i << 16)^j;
-					if (!this.map[hash]) this.map[hash] = [];
-					this.map[hash].push(obj);
-				}
-			}
-
-			return entry;
-		},
-
-	/**@
-	* #Crafty.map.search
-	* @comp Crafty.map
-    * @sign public Object Crafty.map.search(Object rect[, Boolean filter])
-	* @param rect - the rectangular region to search for entities.
-	* @param filter - Default value is true. Otherwise, must be false.
-	* 
-    * - If `filter` is `false`, just search for all the entries in the give `rect` region by broad phase collision. Entity may be returned duplicated.
-    * - If `filter` is `true`, filter the above results by checking that they actually overlap `rect`.
-    * The easier usage is with `filter`=`true`. For performance reason, you may use `filter`=`false`, and filter the result yourself. See examples in drawing.js and collision.js
-	*/
-
-		search: function (rect, filter) {
-			var keys = HashMap.key(rect, keyHolder ),
-			i, j,k,
-			results = [];
-
-			if (filter === undefined) filter = true; //default filter to true
-
-			//search in all x buckets
-			for (i = keys.x1; i <= keys.x2; i++) {
-				//insert into all y buckets
-				for (j = keys.y1; j <= keys.y2; j++) {
-					cell = this.map[(i << 16)^j];
-					if (cell) {
-                        for (k = 0; k rect._x &&
-								 obj.y < rect._y + rect._h && obj._h + obj._y > rect._y)
-						found[id] = results[i];
-				}
-
-				//loop over lookup table and copy to final array
-				for (obj in found) finalresult.push(found[obj]);
-
-				return finalresult;
-			} else {
-				return results;
-			}
-		},
-
-	/**@
-	* #Crafty.map.remove
-	* @comp Crafty.map
-	* @sign public void Crafty.map.remove([Object keys, ]Object obj)
-	* @param keys - key region. If omitted, it will be derived from obj by `Crafty.HashMap.key`.
-	* @param obj - need more document.
-	* 
-	* Remove an entity in a broad phase map.
-	* - The second form is only used in Crafty.HashMap to save time for computing keys again, where keys were computed previously from obj. End users should not call this form directly.
-	*
-	* @example 
-	* ~~~
-	* Crafty.map.remove(e);
-	* ~~~
-	*/
-		remove: function (keys, obj) {
-			var i = 0, j, hash;
-
-			if (arguments.length == 1) {
-				obj = keys;
-				keys = HashMap.key(obj, keyHolder);
-			}
-
-			//search in all x buckets
-			for (i = keys.x1; i <= keys.x2; i++) {
-				//insert into all y buckets
-				for (j = keys.y1; j <= keys.y2; j++) {
-					hash = (i << 16)^j;
-
-					if (this.map[hash]) {
-						var cell = this.map[hash],
-						 m, n = cell.length;
-						//loop over objs in cell and delete
-						for (m = 0; m < n; m++)
-							if (cell[m] && cell[m][0] === obj[0])
-								cell.splice(m, 1);
-					}
-				}
-			}
-		},
-
-	/**@
-	* #Crafty.map.refresh
-	* @comp Crafty.map
-	* @sign public void Crafty.map.remove(Entry entry)
-	* @param entry - An entry to update
-	* 
-	* Refresh an entry's keys, and its position in the broad phrase map.
-	*
-	* @example 
-	* ~~~
-	* Crafty.map.refresh(e);
-	* ~~~
-	*/
-		refresh: function(entry) {
-				var keys = entry.keys;
-				var obj = entry.obj;
-				var cell, i, j, m, n;
-
-				//First delete current object from appropriate cells
-				for (i = keys.x1; i <= keys.x2; i++) {
-					for (j = keys.y1; j <= keys.y2; j++) {
-						cell = this.map[(i << 16)^j];
-						if (cell) {
-							n = cell.length;
-							//loop over objs in cell and delete
-							for (m = 0; m < n; m++)
-								if (cell[m] && cell[m][0] === obj[0])
-									cell.splice(m, 1);
-						}
-					}
-				}
-
-				//update keys
-				HashMap.key(obj, keys);
-
-				//insert into all rows and columns
-				for (i = keys.x1; i <= keys.x2; i++) {
-					for (j = keys.y1; j <= keys.y2; j++) {
-						cell = this.map[(i << 16)^j];
-						if (!cell) cell=this.map[(i << 16)^j] = [];
-						cell.push(obj);
-					}
-				}
-
-			return entry;
-		},
-
-
-
-
-		
-
-	/**@
-	* #Crafty.map.boundaries
-	* @comp Crafty.map
-	* @sign public Object Crafty.map.boundaries()
-	* 
-    * The return `Object` is of the following format.
-    * ~~~
-	* {
-    *   min: {
-    *     x: val_x,
-    *     y: val_y
-    *   },
-    *   max: {
-    *     x: val_x,
-    *     y: val_y
-    *   }
-    * }
-    * ~~~
-	*/
-		boundaries: function () {
-			var k, ent,
-			hash = {
-				max: { x: -Infinity, y: -Infinity },
-				min: { x: Infinity, y: Infinity }
-			},
-			coords = {
-				max: { x: -Infinity, y: -Infinity },
-				min: { x: Infinity, y: Infinity }
-			};
-
-      //Using broad phase hash to speed up the computation of boundaries.
-			for (var h in this.map) {
-				if (!this.map[h].length) continue;
-
-        //broad phase coordinate
-				var i= h>>16,
-					j=(h<<16)>>16;
-				if (j<0) { i = i^-1 }
-				if (i >= hash.max.x) {
-					hash.max.x = i;
-					for (k in this.map[h]) {
-						ent = this.map[h][k];
-						//make sure that this is a Crafty entity
-						if (typeof ent == 'object' && 'requires' in ent) {
-							coords.max.x = Math.max(coords.max.x, ent.x + ent.w);
-						}
-					}
-				}
-				if (i <= hash.min.x) {
-					hash.min.x = i;
-					for (k in this.map[h]) {
-						ent = this.map[h][k];
-						if (typeof ent == 'object' && 'requires' in ent) {
-							coords.min.x = Math.min(coords.min.x, ent.x);
-						}
-					}
-				}
-				if (j >= hash.max.y) {
-					hash.max.y = j;
-					for (k in this.map[h]) {
-						ent = this.map[h][k];
-						if (typeof ent == 'object' && 'requires' in ent) {
-							coords.max.y = Math.max(coords.max.y, ent.y + ent.h);
-						}
-					}
-				}
-				if (j <= hash.min.y) {
-					hash.min.y = j;
-					for (k in this.map[h]) {
-						ent = this.map[h][k];
-						if (typeof ent == 'object' && 'requires' in ent) {
-							coords.min.y = Math.min(coords.min.y, ent.y);
-						}
-					}
-				}
-			}
-
-			return coords;
-		}
-	};
-
-/**@
-* #Crafty.HashMap
-* @category 2D
-* Broad-phase collision detection engine. See background information at 
-*
-* ~~~
-* - [N Tutorial B - Broad-Phase Collision](http://www.metanetsoftware.com/technique/tutorialB.html)
-* - [Broad-Phase Collision Detection with CUDA](http.developer.nvidia.com/GPUGems3/gpugems3_ch32.html)
-* ~~~
-* @see Crafty.map
-*/
-
-	/**@
-	* #Crafty.HashMap.key
-	* @comp Crafty.HashMap
-	* @sign public Object Crafty.HashMap.key(Object obj)
-	* @param obj - an Object that has .mbr() or _x, _y, _w and _h.
-    * Get the rectangular region (in terms of the grid, with grid size `cellsize`), where the object may fall in. This region is determined by the object's bounding box.
-    * The `cellsize` is 64 by default.
-    * 
-    * @see Crafty.HashMap.constructor
-	*/
-	HashMap.key = function (obj, keys) {
-		if (obj._mbr) {
-			obj = obj._mbr
-		}
-		if (!keys){
-			keys = {}
-		}
-
-		keys.x1 = Math.floor(obj._x / cellsize);
-		keys.y1 = Math.floor(obj._y / cellsize);
-		keys.x2 = Math.floor((obj._w + obj._x) / cellsize);
-		keys.y2 = Math.floor((obj._h + obj._y) / cellsize);
-		return keys;
-	};
-
-	HashMap.hash = function (keys) {
-		return keys.x1 + SPACE + keys.y1 + SPACE + keys.x2 + SPACE + keys.y2;
-	};
-
-	function Entry(keys, obj, map) {
-		this.keys = keys;
-		this.map = map;
-		this.obj = obj;
-	};
-
-	Entry.prototype = {
-		update: function (rect) {
-			//check if buckets change
-			if (HashMap.hash(HashMap.key(rect, keyHolder)) != HashMap.hash(this.keys)) {
-					this.map.refresh(this)
-			}
-		}
-	};
-
-	parent.HashMap = HashMap;
-})(Crafty);
+ * Spatial HashMap for broad phase collision
+ *
+ * @author Louis Stowasser
+ */
+
+    /**@
+     * #Crafty.HashMap.constructor
+     * @comp Crafty.HashMap
+     * @sign public void Crafty.HashMap([cellsize])
+     * @param cellsize - the cell size. If omitted, `cellsize` is 64.
+     *
+     * Set `cellsize`.
+     * And create `this.map`.
+     */
+    var cellsize,
+
+        HashMap = function (cell) {
+            cellsize = cell || 64;
+            this.map = {};
+        },
+
+        SPACE = " ",
+        keyHolder = {};
+
+    HashMap.prototype = {
+        /**@
+         * #Crafty.map.insert
+         * @comp Crafty.map
+         * @sign public Object Crafty.map.insert(Object obj)
+         * @param obj - An entity to be inserted.
+         *
+         * `obj` is inserted in '.map' of the corresponding broad phase cells. An object of the following fields is returned.
+         * ~~~
+         * - the object that keep track of cells (keys)
+         * - `obj`
+         * - the HashMap object
+         * ~~~
+         */
+        insert: function (obj) {
+            var keys = HashMap.key(obj),
+                entry = new Entry(keys, obj, this),
+                i = 0,
+                j,
+                hash;
+
+            //insert into all x buckets
+            for (i = keys.x1; i <= keys.x2; i++) {
+                //insert into all y buckets
+                for (j = keys.y1; j <= keys.y2; j++) {
+                    hash = (i << 16) ^ j;
+                    if (!this.map[hash]) this.map[hash] = [];
+                    this.map[hash].push(obj);
+                }
+            }
+
+            return entry;
+        },
+
+        /**@
+         * #Crafty.map.search
+         * @comp Crafty.map
+         * @sign public Object Crafty.map.search(Object rect[, Boolean filter])
+         * @param rect - the rectangular region to search for entities.
+         * @param filter - Default value is true. Otherwise, must be false.
+         *
+         * - If `filter` is `false`, just search for all the entries in the give `rect` region by broad phase collision. Entity may be returned duplicated.
+         * - If `filter` is `true`, filter the above results by checking that they actually overlap `rect`.
+         * The easier usage is with `filter`=`true`. For performance reason, you may use `filter`=`false`, and filter the result yourself. See examples in drawing.js and collision.js
+         */
+
+        search: function (rect, filter) {
+            var keys = HashMap.key(rect, keyHolder),
+                i, j, k,
+                results = [];
+
+            if (filter === undefined) filter = true; //default filter to true
+
+            //search in all x buckets
+            for (i = keys.x1; i <= keys.x2; i++) {
+                //insert into all y buckets
+                for (j = keys.y1; j <= keys.y2; j++) {
+                    cell = this.map[(i << 16) ^ j];
+                    if (cell) {
+                        for (k = 0; k < cell.length; k++)
+                            results.push(cell[k]);
+                    }
+                }
+            }
+
+            if (filter) {
+                var obj, id, finalresult = [],
+                    found = {};
+                //add unique elements to lookup table with the entity ID as unique key
+                for (i = 0, l = results.length; i < l; i++) {
+                    obj = results[i];
+                    if (!obj) continue; //skip if deleted
+                    id = obj[0]; //unique ID
+                    obj = obj._mbr || obj;
+                    //check if not added to hash and that actually intersects
+                    if (!found[id] && obj._x < rect._x + rect._w && obj._x + obj._w > rect._x &&
+                        obj._y < rect._y + rect._h && obj._h + obj._y > rect._y)
+                        found[id] = results[i];
+                }
+
+                //loop over lookup table and copy to final array
+                for (obj in found) finalresult.push(found[obj]);
+
+                return finalresult;
+            } else {
+                return results;
+            }
+        },
+
+        /**@
+         * #Crafty.map.remove
+         * @comp Crafty.map
+         * @sign public void Crafty.map.remove([Object keys, ]Object obj)
+         * @param keys - key region. If omitted, it will be derived from obj by `Crafty.HashMap.key`.
+         * @param obj - need more document.
+         *
+         * Remove an entity in a broad phase map.
+         * - The second form is only used in Crafty.HashMap to save time for computing keys again, where keys were computed previously from obj. End users should not call this form directly.
+         *
+         * @example
+         * ~~~
+         * Crafty.map.remove(e);
+         * ~~~
+         */
+        remove: function (keys, obj) {
+            var i = 0,
+                j, hash;
+
+            if (arguments.length == 1) {
+                obj = keys;
+                keys = HashMap.key(obj, keyHolder);
+            }
+
+            //search in all x buckets
+            for (i = keys.x1; i <= keys.x2; i++) {
+                //insert into all y buckets
+                for (j = keys.y1; j <= keys.y2; j++) {
+                    hash = (i << 16) ^ j;
+
+                    if (this.map[hash]) {
+                        var cell = this.map[hash],
+                            m, n = cell.length;
+                        //loop over objs in cell and delete
+                        for (m = 0; m < n; m++)
+                            if (cell[m] && cell[m][0] === obj[0])
+                                cell.splice(m, 1);
+                    }
+                }
+            }
+        },
+
+        /**@
+         * #Crafty.map.refresh
+         * @comp Crafty.map
+         * @sign public void Crafty.map.remove(Entry entry)
+         * @param entry - An entry to update
+         *
+         * Refresh an entry's keys, and its position in the broad phrase map.
+         *
+         * @example
+         * ~~~
+         * Crafty.map.refresh(e);
+         * ~~~
+         */
+        refresh: function (entry) {
+            var keys = entry.keys;
+            var obj = entry.obj;
+            var cell, i, j, m, n;
+
+            //First delete current object from appropriate cells
+            for (i = keys.x1; i <= keys.x2; i++) {
+                for (j = keys.y1; j <= keys.y2; j++) {
+                    cell = this.map[(i << 16) ^ j];
+                    if (cell) {
+                        n = cell.length;
+                        //loop over objs in cell and delete
+                        for (m = 0; m < n; m++)
+                            if (cell[m] && cell[m][0] === obj[0])
+                                cell.splice(m, 1);
+                    }
+                }
+            }
+
+            //update keys
+            HashMap.key(obj, keys);
+
+            //insert into all rows and columns
+            for (i = keys.x1; i <= keys.x2; i++) {
+                for (j = keys.y1; j <= keys.y2; j++) {
+                    cell = this.map[(i << 16) ^ j];
+                    if (!cell) cell = this.map[(i << 16) ^ j] = [];
+                    cell.push(obj);
+                }
+            }
+
+            return entry;
+        },
+
+
+
+
+        /**@
+         * #Crafty.map.boundaries
+         * @comp Crafty.map
+         * @sign public Object Crafty.map.boundaries()
+         *
+         * The return `Object` is of the following format.
+         * ~~~
+         * {
+         *   min: {
+         *     x: val_x,
+         *     y: val_y
+         *   },
+         *   max: {
+         *     x: val_x,
+         *     y: val_y
+         *   }
+         * }
+         * ~~~
+         */
+        boundaries: function () {
+            var k, ent,
+                hash = {
+                    max: {
+                        x: -Infinity,
+                        y: -Infinity
+                    },
+                    min: {
+                        x: Infinity,
+                        y: Infinity
+                    }
+                },
+                coords = {
+                    max: {
+                        x: -Infinity,
+                        y: -Infinity
+                    },
+                    min: {
+                        x: Infinity,
+                        y: Infinity
+                    }
+                };
+
+            //Using broad phase hash to speed up the computation of boundaries.
+            for (var h in this.map) {
+                if (!this.map[h].length) continue;
+
+                //broad phase coordinate
+                var i = h >> 16,
+                    j = (h << 16) >> 16;
+                if (j < 0) {
+                    i = i ^ -1;
+                }
+                if (i >= hash.max.x) {
+                    hash.max.x = i;
+                    for (k in this.map[h]) {
+                        ent = this.map[h][k];
+                        //make sure that this is a Crafty entity
+                        if (typeof ent == 'object' && 'requires' in ent) {
+                            coords.max.x = Math.max(coords.max.x, ent.x + ent.w);
+                        }
+                    }
+                }
+                if (i <= hash.min.x) {
+                    hash.min.x = i;
+                    for (k in this.map[h]) {
+                        ent = this.map[h][k];
+                        if (typeof ent == 'object' && 'requires' in ent) {
+                            coords.min.x = Math.min(coords.min.x, ent.x);
+                        }
+                    }
+                }
+                if (j >= hash.max.y) {
+                    hash.max.y = j;
+                    for (k in this.map[h]) {
+                        ent = this.map[h][k];
+                        if (typeof ent == 'object' && 'requires' in ent) {
+                            coords.max.y = Math.max(coords.max.y, ent.y + ent.h);
+                        }
+                    }
+                }
+                if (j <= hash.min.y) {
+                    hash.min.y = j;
+                    for (k in this.map[h]) {
+                        ent = this.map[h][k];
+                        if (typeof ent == 'object' && 'requires' in ent) {
+                            coords.min.y = Math.min(coords.min.y, ent.y);
+                        }
+                    }
+                }
+            }
+
+            return coords;
+        }
+    };
+
+    /**@
+     * #Crafty.HashMap
+     * @category 2D
+     * Broad-phase collision detection engine. See background information at
+     *
+     * ~~~
+     * - [N Tutorial B - Broad-Phase Collision](http://www.metanetsoftware.com/technique/tutorialB.html)
+     * - [Broad-Phase Collision Detection with CUDA](http.developer.nvidia.com/GPUGems3/gpugems3_ch32.html)
+     * ~~~
+     * @see Crafty.map
+     */
+
+    /**@
+     * #Crafty.HashMap.key
+     * @comp Crafty.HashMap
+     * @sign public Object Crafty.HashMap.key(Object obj)
+     * @param obj - an Object that has .mbr() or _x, _y, _w and _h.
+     * Get the rectangular region (in terms of the grid, with grid size `cellsize`), where the object may fall in. This region is determined by the object's bounding box.
+     * The `cellsize` is 64 by default.
+     *
+     * @see Crafty.HashMap.constructor
+     */
+    HashMap.key = function (obj, keys) {
+        if (obj._mbr) {
+            obj = obj._mbr;
+        }
+        if (!keys) {
+            keys = {};
+        }
+
+        keys.x1 = Math.floor(obj._x / cellsize);
+        keys.y1 = Math.floor(obj._y / cellsize);
+        keys.x2 = Math.floor((obj._w + obj._x) / cellsize);
+        keys.y2 = Math.floor((obj._h + obj._y) / cellsize);
+        return keys;
+    };
+
+    HashMap.hash = function (keys) {
+        return keys.x1 + SPACE + keys.y1 + SPACE + keys.x2 + SPACE + keys.y2;
+    };
+
+    function Entry(keys, obj, map) {
+        this.keys = keys;
+        this.map = map;
+        this.obj = obj;
+    }
+
+    Entry.prototype = {
+        update: function (rect) {
+            //check if buckets change
+            if (HashMap.hash(HashMap.key(rect, keyHolder)) != HashMap.hash(this.keys)) {
+                this.map.refresh(this);
+            }
+        }
+    };
+
+    module.exports = HashMap;
diff --git a/src/JavaScript.js b/src/JavaScript.js
deleted file mode 100644
index 5f282702..00000000
--- a/src/JavaScript.js
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/animate.js b/src/animate.js
deleted file mode 100644
index e4cfd52d..00000000
--- a/src/animate.js
+++ /dev/null
@@ -1,75 +0,0 @@
-Crafty.c("Animation", {
-	_reel: null,
-
-	init: function () {
-		this._reel = {};
-	},
-
-	addAnimation: function (label, skeleton) {
-		var key,
-			lastKey = 0,
-			i = 0, j,
-			frame,
-			prev,
-			prop,
-			diff = {},
-			p,
-			temp,
-			frames = [];
-
-		//loop over every frame
-		for (key in skeleton) {
-
-			frame = skeleton[key];
-			prev = skeleton[lastKey] || this;
-			diff = {};
-
-			//find the difference
-			for (prop in frame) {
-				if (typeof frame[prop] !== "number") {
-					diff[prop] = frame[prop];
-					continue;
-				}
-
-				diff[prop] = (frame[prop] - prev[prop]) / (key - lastKey);
-			}
-
-			for (i = +lastKey + 1, j = 1; i <= +key; ++i, ++j) {
-				temp = {};
-				for (p in diff) {
-					if (typeof diff[p] === "number") {
-						temp[p] = prev[p] + diff[p] * j;
-					} else {
-						temp[p] = diff[p];
-					}
-				}
-
-				frames[i] = temp;
-			}
-			lastKey = key;
-		}
-
-		this._reel[label] = frames;
-
-		return this;
-	},
-
-	playAnimation: function (label) {
-		var reel = this._reel[label],
-			i = 0,
-			l = reel.length,
-			prop;
-
-		this.bind("EnterFrame", function e() {
-			for (prop in reel[i]) {
-				this[prop] = reel[i][prop];
-			}
-			i++;
-
-			if (i > l) {
-				this.trigger("AnimationEnd");
-				this.unbind("EnterFrame", e);
-			}
-		});
-	}
-});
\ No newline at end of file
diff --git a/src/animation.js b/src/animation.js
index 99b32adf..96a19a59 100644
--- a/src/animation.js
+++ b/src/animation.js
@@ -1,335 +1,683 @@
+var Crafty = require('./core.js'),
+	document = window.document;
+
+Crafty.easing = function(duration) {
+	this.timePerFrame = 1000 / Crafty.timer.FPS();
+	this.duration = duration;   //default duration given in ms
+	this.reset();
+};
+
+
+Crafty.easing.prototype = {
+	duration: 0,
+	clock:0,
+	steps: null,
+	complete: false,
+	paused: false,
+	
+	// init values 
+	reset: function(){		
+		this.loops = 1;
+		this.clock = 0;
+		this.complete = false;
+		this.paused = false;  
+	},
+
+	repeat: function(loopCount){
+		this.loops = loopCount;
+	},
+
+	setProgress: function(progress, loopCount){
+		this.clock = this.duration * progress;
+		if (typeof loopCount !== "undefined")
+			this.loops = loopCount;
+		
+	},
+
+	pause: function(){
+		this.paused = true;
+	},
+
+	resume: function(){
+		this.paused = false;
+		this.complete = false;
+	},
+
+	// Increment the clock by some amount dt
+	// Handles looping and sets a flag on completion
+	tick: function(dt){
+		if (this.paused || this.complete) return;
+		this.clock += dt;
+		this.frames = Math.floor(this.clock/this.timePerFrame);
+		while (this.clock >= this.duration && this.complete === false){
+			this.loops--;
+			if (this.loops > 0)
+				this.clock -= this.duration;
+			else
+				this.complete = true;
+		}
+	},
+
+	// same as value for now; with other time value functions would be more useful
+	time: function(){
+		return ( Math.min(this.clock/this.duration, 1) );
+		
+	},
+
+	// Value is where along the tweening curve we are
+	// For now it's simply linear; but we can easily add new types
+	value: function(){
+		return this.time();
+	}
+
+};
+
+
+
+
+
+
 /**@
 * #SpriteAnimation
 * @category Animation
-* @trigger AnimationEnd - When the animation finishes - { reel }
-* @trigger Change - On each frame
+* @trigger StartAnimation - When an animation starts playing, or is resumed from the paused state - {Reel}
+* @trigger AnimationEnd - When the animation finishes - { Reel }
+* @trigger FrameChange - Each time the frame of the current reel changes - { Reel }
+* @trigger ReelChange - When the reel changes - { Reel }
+*
+* Used to animate sprites by treating a sprite map as a set of animation frames.
+* Must be applied to an entity that has a sprite-map component.
 *
-* Used to animate sprites by changing the sprites in the sprite map.
+* To define an animation, see the `reel` method.  To play an animation, see the `animate` method.
+*   
+* A reel is an object that contains the animation frames and current state for an animation.  The reel object has the following properties:
+* @param id: (String) - the name of the reel
+* @param frames: (Array) - A list of frames in the format [xpos, ypos]
+* @param currentFrame: (Number) - The index of the current frame
+* @param easing: (Crafty.easing object) - The object that handles the internal progress of the animation.  
+* @param duration: (Number) - The duration in milliseconds.
+* 
+* Many animation related events pass a reel object as data.  As typical with events, this should be treated as read only data that might be later altered by the entity.  If you wish to preserve the data, make a copy of it.
 *
+* @see crafty.sprite
 */
 Crafty.c("SpriteAnimation", {
-/**@
-	* #._reels
-	* @comp SpriteAnimation
+	/*
 	*
-	* A map consists of arrays that contains the coordinates of each frame within the sprite, e.g.,
-    * `{"walk_left":[[96,48],[112,48],[128,48]]}`
+	* A map in which the keys are the names assigned to animations defined using
+	* the component (also known as reelIDs), and the values are objects describing
+	* the animation and its state.
 	*/
 	_reels: null,
-	_frame: null,
 
-	/**@
-	* #._currentReelId
-	* @comp SpriteAnimation
-	*
-	* The current playing reel (one element of `this._reels`). It is `null` if no reel is playing.
+	/*
+	* The reelID of the currently active reel (which is one of the elements in `this._reels`).
+	* This value is `null` if no reel is active. Some of the component's actions can be invoked
+	* without specifying a reel, in which case they will work on the active reel.
 	*/
 	_currentReelId: null,
 
+	/*
+	* The currently active reel.
+	* This value is `null` if no reel is active. 
+	*/
+	_currentReel: null,
+
+	/*
+	* Whether or not an animation is currently playing.
+	*/
+	_isPlaying: false,
+
+
 	init: function () {
 		this._reels = {};
 	},
 
 	/**@
-	* #.animate
+	* #.reel
 	* @comp SpriteAnimation
-	* @sign public this .animate(String reelId, Number fromX, Number y, Number toX)
+	* Used to define reels, to change the active reel, and to fetch the id of the active reel.
+	*
+	* @sign public this .reel(String reelId, Duration duration, Number fromX, Number fromY, Number frameCount)
+	* Defines a reel by starting and ending position on the sprite sheet.
 	* @param reelId - ID of the animation reel being created
-	* @param fromX - Starting `x` position (in the unit of sprite horizontal size) on the sprite map
-	* @param y - `y` position on the sprite map (in the unit of sprite vertical size). Remains constant through the animation.
-	* @param toX - End `x` position on the sprite map (in the unit of sprite horizontal size)
-	* @sign public this .animate(String reelId, Array frames)
+	* @param duration - The length of the animation in milliseconds.
+	* @param fromX - Starting `x` position on the sprite map (x's unit is the horizontal size of the sprite in the sprite map).
+	* @param fromY - `y` position on the sprite map (y's unit is the horizontal size of the sprite in the sprite map). Remains constant through the animation.
+	* @param frameCount - The number of sequential frames in the animation.  If negative, the animation will play backwards.
+	*
+	* @sign public this .reel(String reelId, Duration duration, Array frames)
+	* Defines a reel by an explicit list of frames
 	* @param reelId - ID of the animation reel being created
-	* @param frames - Array of arrays containing the `x` and `y` values: [[x1,y1],[x2,y2],...]
-	* @sign public this .animate(String reelId, Number duration[, Number repeatCount])
-	* @param reelId - ID of the animation reel to play
-	* @param duration - Play the animation within a duration (in frames)
-	* @param repeatCount - number of times to repeat the animation. Use -1 for infinitely
+	* @param duration - The length of the animation in milliseconds.
+	* @param frames - An array of arrays containing the `x` and `y` values of successive frames: [[x1,y1],[x2,y2],...] (the values are in the unit of the sprite map's width/height respectively).
+	*
+	* @sign public this .reel(String reelId)
+	* Switches to the specified reel.  The sprite will be updated to that reel's current frame
+	* @param reelID - the ID to switch to
+	*
+	* @sign public Reel .reel()
+	* @return The id of the current reel
 	*
-	* Method to setup animation reels or play pre-made reels. Animation works by changing the sprites over
-	* a duration. Only works for sprites built with the Crafty.sprite methods. See the Tween component for animation of 2D properties.
 	*
-	* To setup an animation reel, pass the name of the reel (used to identify the reel and play it later), and either an
+	* A method to handle animation reels.  Only works for sprites built with the Crafty.sprite methods.
+	* See the Tween component for animation of 2D properties.
+	*
+	* To setup an animation reel, pass the name of the reel (used to identify the reel later), and either an
 	* array of absolute sprite positions or the start x on the sprite map, the y on the sprite map and then the end x on the sprite map.
 	*
-	* To play a reel, pass the name of the reel and the duration it should play for (in frames). If you need
-	* to repeat the animation, simply pass in the amount of times the animation should repeat. To repeat
-	* forever, pass in `-1`.
 	*
 	* @example
 	* ~~~
+	* // Define a sprite-map component
 	* Crafty.sprite(16, "images/sprite.png", {
 	*     PlayerSprite: [0,0]
 	* });
 	*
-	* Crafty.e("2D, DOM, SpriteAnimation, PlayerSprite")
-	*     .animate('PlayerRunning', 0, 0, 3) //setup animation
-	*     .animate('PlayerRunning', 15, -1) // start animation
+	* // Define an animation on the second row of the sprite map (y = 1)
+	* // from the left most sprite (fromX = 0) to the fourth sprite
+	* // on that row (toX = 3), with a duration of 1 second
+	* Crafty.e("2D, DOM, SpriteAnimation, PlayerSprite").reel('PlayerRunning', 1000, 0, 1, 3);
 	*
-	* Crafty.e("2D, DOM, SpriteAnimation, PlayerSprite")
-	*     .animate('PlayerRunning', 0, 3, 0) //setup animation
-	*     .animate('PlayerRunning', 15, -1) // start animation
+	* // This is the same animation definition, but using the alternative method
+	* Crafty.e("2D, DOM, SpriteAnimation, PlayerSprite").reel('PlayerRunning', 1000, [[0, 1], [1, 1], [2, 1], [3, 1]]);
 	* ~~~
-	*
-	* @see crafty.sprite
 	*/
-	animate: function (reelId, fromx, y, tox) {
-		var reel, i, tile, tileh, duration, pos;
-
-		//play a reel
-		//.animate('PlayerRunning', 15, -1) // start animation
-		if (arguments.length < 4 && typeof fromx === "number") {
-			duration = fromx;
-
-			//make sure not currently animating
-			this._currentReelId = reelId;
-
-			currentReel = this._reels[reelId];
-
-			this._frame = {
-				currentReel: currentReel,
-				numberOfFramesBetweenSlides: Math.ceil(duration / currentReel.length),
-				currentSlideNumber: 0,
-				frameNumberBetweenSlides: 0,
-				repeat: 0
-			};
-			if (arguments.length === 3 && typeof y === "number") {
-				//User provided repetition count
-				if (y === -1) this._frame.repeatInfinitly = true;
-				else this._frame.repeat = y;
+	reel: function (reelId, duration, fromX, fromY, frameCount) {
+		// @sign public this .reel()
+		if (arguments.length === 0)
+			return this._currentReelId;
+
+		// @sign public this .reel(String reelID)
+		if (arguments.length === 1 && typeof reelId === "string"){
+			if (typeof this._reels[reelId] === "undefined")
+				throw("The specified reel " + reelId + " is undefined.");
+			this.pauseAnimation();
+			if (this._currentReelId !== reelId) {
+				this._currentReelId = reelId;
+				this._currentReel = this._reels[reelId];
+				// Change the visible sprite
+				this._updateSprite();
+				// Trigger event
+				this.trigger("ReelChange", this._currentReel);
 			}
-
-			pos = this._frame.currentReel[0];
-			this.__coord[0] = pos[0];
-			this.__coord[1] = pos[1];
-
-			this.bind("EnterFrame", this.updateSprite);
 			return this;
 		}
-		// .animate('PlayerRunning', 0, 0, 3) //setup animation
-		if (typeof fromx === "number") {
-			// Defind in Sprite component.
-			tile = this.__tile + parseInt(this.__padding[0] || 0, 10);
-			tileh = this.__tileh + parseInt(this.__padding[1] || 0, 10);
-
-			reel = [];
-			i = fromx;
-			if (tox > fromx) {
-				for (; i <= tox; i++) {
-					reel.push([i * tile, y * tileh]);
+
+
+		var reel, i, tile, tileh, pos;
+
+		// Get the dimensions of a single frame, as defind in Sprite component.
+		tile = this.__tile + parseInt(this.__padding[0] || 0, 10);
+		tileh = this.__tileh + parseInt(this.__padding[1] || 0, 10);
+
+		reel = {
+			id: reelId,
+			frames: [],
+			currentFrame: 0,
+			easing: new Crafty.easing(duration), 
+			defaultLoops: 1
+		};
+
+		reel.duration = reel.easing.duration;
+
+		// @sign public this .reel(String reelId, Number duration, Number fromX, Number y, Number toX)
+		if (typeof fromX === "number") {
+			i = fromX;
+			y = fromY;
+			if (frameCount >= 0) {
+				for (; i < fromX + frameCount ; i++) {
+					reel.frames.push([i * tile, y * tileh]);
 				}
-			} else {
-				for (; i >= tox; i--) {
-					reel.push([i * tile, y * tileh]);
+			}
+			else {
+				for (; i > fromX + frameCount; i--) {
+					reel.frames.push([i * tile, y * tileh]);
 				}
 			}
+		}
+		// @sign public this .reel(String reelId, Number duration, Array frames)
+		else if (arguments.length === 3 && typeof fromX === "object") {
 
-			this._reels[reelId] = reel;
-		} else if (typeof fromx === "object") {
-			// @sign public this .animate(reelId, [[x1,y1],[x2,y2],...])
 			i = 0;
-			reel = [];
-			tox = fromx.length - 1;
-			tile = this.__tile + parseInt(this.__padding[0] || 0, 10);
-			tileh = this.__tileh + parseInt(this.__padding[1] || 0, 10);
-
-			for (; i <= tox; i++) {
-				pos = fromx[i];
-				reel.push([pos[0] * tile, pos[1] * tileh]);
-			}
+			toX = fromX.length - 1;
 
-			this._reels[reelId] = reel;
+			for (; i <= toX; i++) {
+				pos = fromX[i];
+				reel.frames.push([pos[0] * tile, pos[1] * tileh]);
+			}
 		}
+		else {
+			throw "Urecognized arguments. Please see the documentation for 'reel(...)'.";
+		}
+
+		this._reels[reelId] = reel;
 
 		return this;
 	},
 
 	/**@
-	* #.updateSprite
+	* #.animate
 	* @comp SpriteAnimation
-	* @sign private void .updateSprite()
+	* @sign public this .animate([String reelId] [, Number loopCount])
+	* @param reelId - ID of the animation reel to play.  Defaults to the current reel if none is specified.
+	* @param loopCount - Number of times to repeat the animation. Use -1 to repeat indefinitely.  Defaults to 1.
+	*
+	* Play one of the reels previously defined through `.reel(...)`. Simply pass the name of the reel. If you wish the
+	* animation to play multiple times in succession, pass in the amount of times as an additional parameter.
+	* To have the animation repeat indefinitely, pass in `-1`. 
+	*
+	* If another animation is currently playing, it will be paused.
+	*
+	* This will always play an animation from the beginning.  If you wish to resume from the current state of a reel, use `resumeAnimation()`.
+	*
+	* Once an animation ends, it will remain at its last frame.
 	*
-	* This is called at every `EnterFrame` event when `.animate()` enables animation. It update the SpriteAnimation component when the slide in the sprite should be updated.
 	*
 	* @example
 	* ~~~
-	* this.bind("EnterFrame", this.updateSprite);
-	* ~~~
+	* // Define a sprite-map component
+	* Crafty.sprite(16, "images/sprite.png", {
+	*     PlayerSprite: [0,0]
+	* });
 	*
-	* @see crafty.sprite
+	* // Play the animation across 20 frames (so each sprite in the 4 sprite animation should be seen for 5 frames) and repeat indefinitely
+	* Crafty.e("2D, DOM, SpriteAnimation, PlayerSprite")
+	*     .reel('PlayerRunning', 20, 0, 0, 3) // setup animation
+	*     .animate('PlayerRunning', -1); // start animation
+	* ~~~
 	*/
-	updateSprite: function () {
-		var data = this._frame;
-		if (!data) {
-			return;
-		}
+	animate: function(reelId, loopCount) {
 
-		if (this._frame.frameNumberBetweenSlides++ === data.numberOfFramesBetweenSlides) {
-			var pos = data.currentReel[data.currentSlideNumber++];
+		var pos;
 
-			this.__coord[0] = pos[0];
-			this.__coord[1] = pos[1];
-			this._frame.frameNumberBetweenSlides = 0;
-		}
 
+		// switch to the specified reel if necessary
+		if (typeof reelId === "string")
+			this.reel(reelId);
 
-		if (data.currentSlideNumber === data.currentReel.length) {
-			
-			if (this._frame.repeatInfinitly === true || this._frame.repeat > 0) {
-				if (this._frame.repeat) this._frame.repeat--;
-				this._frame.frameNumberBetweenSlides = 0;
-				this._frame.currentSlideNumber = 0;
-			} else {
-				if (this._frame.frameNumberBetweenSlides === data.numberOfFramesBetweenSlides) {
-				    this.trigger("AnimationEnd", { reel: data.currentReel });
-				    this.stop();
-				    return;
-                }
-			}
+		var currentReel = this._currentReel;
 
-		}
+		if (typeof currentReel === "undefined" || currentReel === null)
+			throw("No reel is specified, and there is no currently active reel.");
+
+		this.pauseAnimation(); // This will pause the current animation, if one is playing
+
+		// Handle repeats; if loopCount is undefined and reelID is a number, calling with that signature
+		if (typeof loopCount === "undefined") 
+			if (typeof reelId === "number")
+				loopCount = reelId;
+			else
+				loopCount = 1;
+
+		// set the animation to the beginning
+		currentReel.easing.reset();
+		
+
+		// user provided loop count. 
+		this.loops(loopCount);
 
-		this.trigger("Change");
+		// trigger the necessary events and switch to the first frame
+		this._setFrame(0);
+
+		// Start the anim
+		this.bind("EnterFrame", this._animationTick);
+		this._isPlaying = true;
+
+		this.trigger("StartAnimation", currentReel);
+		return this;
 	},
 
 	/**@
-	* #.stop
+	* #.resumeAnimation
 	* @comp SpriteAnimation
-	* @sign public this .stop(void)
+	* @sign public this .resumeAnimation()
 	*
-	* Stop any animation currently playing.
+	* This will resume animation of the current reel from its current state.  
+	* If a reel is already playing, or there is no current reel, there will be no effect.
 	*/
-	stop: function () {
-		this.unbind("EnterFrame", this.updateSprite);
-		this.unbind("AnimationEnd");
-		this._currentReelId = null;
-		this._frame = null;
+	resumeAnimation: function() {
+		if (this._isPlaying === false &&  this._currentReel !== null) {
+			this.bind("EnterFrame", this._animationTick);
+			this._isPlaying = true;
+			this._currentReel.easing.resume();
+			this.trigger("StartAnimation", this._currentReel);
+		}	
+		return this;	
+	},
 
+	/**@
+	* #.pauseAnimation
+	* @comp SpriteAnimation
+	* @sign public this .pauseAnimation(void)
+	*
+	* Pauses the currently playing animation, or does nothing if no animation is playing.
+	*/
+	pauseAnimation: function () {
+		if (this._isPlaying === true) {
+			this.unbind("EnterFrame", this._animationTick);
+			this._isPlaying = false;
+			this._reels[this._currentReelId].easing.pause();
+		}
 		return this;
 	},
 
 	/**@
-	* #.reset
+	* #.resetAnimation
+	* @comp SpriteAnimation
+	* @sign public this .resetAnimation()
+	*
+	* Resets the current animation to its initial state.  Resets the number of loops to the last specified value, which defaults to 1.
+	*   
+	* Neither pauses nor resumes the current animation.
+	*/
+	resetAnimation: function(){
+		var currentReel = this._currentReel;
+		if  (currentReel === null)
+			throw("No active reel to reset.");
+		this.reelPosition(0);
+		currentReel.easing.repeat(currentReel.defaultLoops);
+		return this;
+   },
+
+
+	/**@
+	* #.loops
 	* @comp SpriteAnimation
-	* @sign public this .reset(void)
+	* @sign public this .loops(Number loopCount)
+	* @param loopCount - The number of times to play the animation
+	*
+	* Sets the number of times the animation will loop for.  
+	* If called while an animation is in progress, the current state will be considered the first loop.
 	*
-	* Method will reset the entities sprite to its original.
+	* @sign public Number .loops()
+	* @returns The number of loops left.  Returns 0 if no reel is active.
 	*/
-	reset: function () {
-		if (!this._frame) return this;
+	loops: function(loopCount) {
+		if (arguments.length === 0){
+			if (this._currentReel !== null)
+				return this._currentReel.easing.loops;
+			else
+				return 0;
+		}
+
+		if (this._currentReel !== null){
+			if (loopCount < 0)
+				loopCount = Infinity;
+			this._currentReel.easing.repeat(loopCount);
+			this._currentReel.defaultLoops = loopCount;
+		}
+		return this;
+
+	},
 
-		var co = this._frame.currentReel[0];
-		this.__coord[0] = co[0];
-		this.__coord[1] = co[1];
-		this.stop();
+	/**@
+	* #.reelPosition
+	* @comp SpriteAnimation
+	*
+	* @sign public this .reelPosition(Integer position)
+	* Sets the position of the current reel by frame number.
+	* @param position - the frame to jump to.  This is zero-indexed.  A negative values counts back from the last frame.
+	*
+	* @sign public this .reelPosition(Number position)
+	* Sets the position of the current reel by percent progress.
+	* @param position - a non-integer number between 0 and 1
+	*
+	* @sign public this .reelPosition(String position)
+	* Jumps to the specified position.  The only currently accepted value is "end", which will jump to the end of the reel.
+	* 
+	* @sign public Number .reelPosition()
+	* @returns The current frame number
+	* 
+	*/
+	reelPosition: function(position) {
+		if (this._currentReel === null)
+			throw("No active reel.");
+
+		if (arguments.length === 0)
+			return this._currentReel.currentFrame;
+
+		var progress,
+			l = this._currentReel.frames.length;
+		if (position === "end")
+			position = l - 1;
+
+		if (position < 1 && position > 0) {
+			progress = position;
+			position = Math.floor(l * progress);
+		} else {
+			if (position !== Math.floor(position))
+				throw("Position " + position + " is invalid."); 
+			if (position < 0)
+				position = l - 1 + position;
+			progress = position / l;
+		}
+		// cap to last frame
+		position = Math.min(position, l-1);
+		position = Math.max(position, 0);
+		this._setProgress(progress);
+		this._setFrame(position);
 
 		return this;
+		
+	},
+
+	
+	// Bound to "EnterFrame".  Progresses the animation by dt, changing the frame if necessary.
+	_animationTick: function(frameData) {
+		var currentReel = this._reels[this._currentReelId];
+		currentReel.easing.tick(frameData.dt);
+		var progress = currentReel.easing.value();
+		var frameNumber = Math.min( Math.floor(currentReel.frames.length * progress), currentReel.frames.length - 1);
+
+		this._setFrame(frameNumber);
+
+		if(currentReel.easing.complete === true){
+			this.trigger("AnimationEnd", this._currentReel);
+			this.pauseAnimation();
+		}
+	},
+
+
+
+	
+
+	// Set the current frame and update the displayed sprite
+	// The actual progress for the animation must be set seperately.
+	_setFrame: function(frameNumber) {
+		var currentReel = this._currentReel;
+		if (frameNumber === currentReel.currentFrame)
+			return;
+		currentReel.currentFrame = frameNumber;
+		this._updateSprite();
+		this.trigger("FrameChange", currentReel); 
+	},
+
+	// Update the displayed sprite.
+	_updateSprite: function() {
+		var currentReel = this._currentReel;
+		var pos = currentReel.frames[currentReel.currentFrame];
+		this.__coord[0] = pos[0];
+		this.__coord[1] = pos[1];
+		this.trigger("Change"); // needed to trigger a redraw
+
 	},
 
+
+	// Sets the internal state of the current reel's easing object
+	_setProgress: function(progress, repeats) {
+		this._currentReel.easing.setProgress(progress, repeats);
+
+	},
+
+
 	/**@
 	* #.isPlaying
 	* @comp SpriteAnimation
 	* @sign public Boolean .isPlaying([String reelId])
-	* @param reelId - Determine if the animation reel with this reelId is playing.
+	* @param reelId - The reelId of the reel we wish to examine
+	* @returns The current animation state
 	*
-	* Determines if an animation is currently playing. If a reel is passed, it will determine
-	* if the passed reel is playing.
+	* Determines if the specified animation is currently playing. If no reelId is specified,
+	* checks if any animation is playing.
 	*
 	* @example
 	* ~~~
-	* myEntity.isPlaying() //is any animation playing
-	* myEntity.isPlaying('PlayerRunning') //is the PlayerRunning animation playing
+	* myEntity.isPlaying() // is any animation playing
+	* myEntity.isPlaying('PlayerRunning') // is the PlayerRunning animation playing
 	* ~~~
 	*/
 	isPlaying: function (reelId) {
+		if (!this._isPlaying) return false;
+
 		if (!reelId) return !!this._currentReelId;
 		return this._currentReelId === reelId;
+	},
+
+	/**@
+	* #.getReel
+	* @comp SpriteAnimation
+	* @sign public Reel .getReel()
+	* @returns The current reel, or null if there is no active reel
+	* 
+	* @sign public Reel .getReel(reelId)
+	* @param reelId - The id of the reel to fetch.  
+	* @returns The specified reel, or `undefined` if no such reel exists.
+	*
+	*/
+	getReel: function (reelId) {
+		if (arguments.length === 0){
+			if (!this._currentReelId) return null;
+			reelId = this._currentReelId;
+		}
+
+		return this._reels[reelId];
 	}
 });
 
 /**@
-* #Tween
-* @category Animation
-* @trigger TweenEnd - when a tween finishes - String - property
-*
-* Component to animate the change in 2D properties over time.
-*/
+ * #Tween
+ * @category Animation
+ * @trigger TweenEnd - when a tween finishes - String - property
+ *
+ * Component to animate the change in 2D properties over time.
+ */
 Crafty.c("Tween", {
-	_step: null,
-	_numProps: 0,
+
+	init: function(){
+		this.tweenGroup = {};
+		this.tweenStart = {};
+		this.tweens = [];
+		this.bind("EnterFrame", this._tweenTick);
+
+	},
+
+	_tweenTick: function(frameData){
+		var tween, v, i;
+		for ( i = this.tweens.length-1; i>=0; i--){
+			tween = this.tweens[i];
+			tween.easing.tick(frameData.dt);
+			v  = tween.easing.value();
+			this._doTween(tween.props, v);
+			if (tween.easing.complete) {
+				this.tweens.splice(i, 1);
+				this._endTween(tween.props);
+			}
+		}
+	},
+
+	_doTween: function(props, v){
+		for (var name in props)
+			this[name] = (1-v) * this.tweenStart[name] + v * props[name];
+
+	},
+
+
 
 	/**@
 	* #.tween
 	* @comp Tween
-	* @sign public this .tween(Object properties, Number duration)
-	* @param properties - Object of 2D properties and what they should animate to
-	* @param duration - Duration to animate the properties over (in frames)
+	* @sign public this .tween(Object properties, Number|String duration)
+	* @param properties - Object of numeric properties and what they should animate to
+	* @param duration - Duration to animate the properties over, in milliseconds.
 	*
-	* This method will animate a 2D entities properties over the specified duration.
+	* This method will animate numeric properties over the specified duration.
 	* These include `x`, `y`, `w`, `h`, `alpha` and `rotation`.
 	*
 	* The object passed should have the properties as keys and the value should be the resulting
-	* values of the properties.
+	* values of the properties.  The passed object might be modified if later calls to tween animate the same properties.
 	*
 	* @example
-	* Move an object to 100,100 and fade out in 200 frames.
+	* Move an object to 100,100 and fade out over 200 ms.
 	* ~~~
 	* Crafty.e("2D, Tween")
 	*    .attr({alpha: 1.0, x: 0, y: 0})
 	*    .tween({alpha: 0.0, x: 100, y: 100}, 200)
 	* ~~~
+	* @example
+	* Rotate an object over 2 seconds
+	* ~~~
+	* Crafty.e("2D, Tween")
+	*    .attr({rotate:0})
+	*    .tween({rotate:180}, 2000)
+	* ~~~
+	*
 	*/
 	tween: function (props, duration) {
-		this.each(function () {
-			if (this._step == null) {
-				this._step = {};
-				this.bind('EnterFrame', tweenEnterFrame);
-				this.bind('RemoveComponent', function (c) {
-					if (c == 'Tween') {
-						this.unbind('EnterFrame', tweenEnterFrame);
-					}
-				});
-			}
-
-			for (var prop in props) {
-				this._step[prop] = { prop: props[prop], val: (props[prop] - this[prop]) / duration, rem: duration };
-				this._numProps++;
-			}
-		});
+		
+		var tween = {
+			props: props,
+			easing: new Crafty.easing(duration)
+		};
+
+		// Tweens are grouped together by the original function call.
+		// Individual properties must belong to only a single group
+		// When a new tween starts, if it already belongs to a group, move it to the new one
+		// Record the group it currently belongs to, as well as its starting coordinate.
+		for (var propname in props){
+			if (typeof this.tweenGroup[propname] !== "undefined")
+				this.cancelTween(propname);
+			this.tweenStart[propname] = this[propname];
+			this.tweenGroup[propname] = props;
+		}
+		this.tweens.push(tween);
+		
 		return this;
-	}
-});
 
-function tweenEnterFrame(e) {
-	if (this._numProps <= 0) return;
-
-	var prop, k;
-	for (k in this._step) {
-		prop = this._step[k];
-		this[k] += prop.val;
-		if (--prop.rem == 0) {
-			// decimal numbers rounding fix
-			this[k] = prop.prop;
-			this.trigger("TweenEnd", k);
-			// make sure the duration wasn't changed in TweenEnd
-			if (this._step[k].rem <= 0) {
-				delete this._step[k];
-			}
-			this._numProps--;
-		}
-	}
+	},
 
-	if (this.has('Mouse')) {
-		var over = Crafty.over,
-			mouse = Crafty.mousePos;
-		if (over && over[0] == this[0] && !this.isAt(mouse.x, mouse.y)) {
-			this.trigger('MouseOut', Crafty.lastEvent);
-			Crafty.over = null;
+	/**@
+	* #.cancelTween
+	* @comp Tween
+	* @sign public this .cancelTween(String target)
+	* @param target - The property to cancel
+	* 
+	* @sign public this .cancelTween(Object target)
+	* @param target - An object containing the properties to cancel.
+	*
+	* Stops tweening the specified property or properties.  
+	* Passing the object used to start the tween might be a typical use of the second signature.
+	*/
+	cancelTween: function(target){
+		if (typeof target === "string"){
+			if (typeof this.tweenGroup[target] == "object" )
+				delete this.tweenGroup[target][target];
+		} else if (typeof target === "object") {
+			for (var propname in target)
+				this.cancelTween(propname);
 		}
-		else if ((!over || over[0] != this[0]) && this.isAt(mouse.x, mouse.y)) {
-			Crafty.over = this;
-			this.trigger('MouseOver', Crafty.lastEvent);
+
+		return this;
+		
+	},
+
+	/*
+	* Stops tweening the specified group of properties, and fires the "TweenEnd" event.
+	*/
+	_endTween: function(properties){
+		for (var propname in properties){
+			delete this.tweenGroup[propname];
 		}
+		this.trigger("TweenEnd", properties);
 	}
-}
-
+});
diff --git a/src/canvas.js b/src/canvas.js
index b1c6586e..1fabe253 100644
--- a/src/canvas.js
+++ b/src/canvas.js
@@ -1,199 +1,214 @@
+var Crafty = require('./core.js'),
+    document = window.document;
+
 /**@
-* #Canvas
-* @category Graphics
-* @trigger Draw - when the entity is ready to be drawn to the stage - {type: "canvas", pos, co, ctx}
-* @trigger NoCanvas - if the browser does not support canvas
-* 
-* When this component is added to an entity it will be drawn to the global canvas element. The canvas element (and hence all Canvas entities) is always rendered below any DOM entities. 
-* 
-* Crafty.canvas.init() will be automatically called if it is not called already to initialize the canvas element.
-*
-* Create a canvas entity like this
-* ~~~
-* var myEntity = Crafty.e("2D, Canvas, Color").color("green")
-*                                             .attr({x: 13, y: 37, w: 42, h: 42});
-*~~~
-*/
+ * #Canvas
+ * @category Graphics
+ * @trigger Draw - when the entity is ready to be drawn to the stage - {type: "canvas", pos, co, ctx}
+ * @trigger NoCanvas - if the browser does not support canvas
+ *
+ * When this component is added to an entity it will be drawn to the global canvas element. The canvas element (and hence all Canvas entities) is always rendered below any DOM entities.
+ *
+ * Crafty.canvas.init() will be automatically called if it is not called already to initialize the canvas element.
+ *
+ * Create a canvas entity like this
+ * ~~~
+ * var myEntity = Crafty.e("2D, Canvas, Color").color("green")
+ *                                             .attr({x: 13, y: 37, w: 42, h: 42});
+ *~~~
+ */
 Crafty.c("Canvas", {
 
-	init: function () {
-		if (!Crafty.canvas.context) {
-			Crafty.canvas.init();
-		}
-
-		//increment the amount of canvas objs
-		Crafty.DrawManager.total2D++;
-		//Allocate an object to hold this components current region
-		this.currentRect = {};
-		this._changed = true;
-		Crafty.DrawManager.addCanvas(this);
-
-		this.bind("Change", function (e) {
-			//flag if changed
-			if (this._changed === false){
-				this._changed = true;
-				Crafty.DrawManager.addCanvas(this);
-			}
-			
-		});
-
-
-		this.bind("Remove", function () {
-			Crafty.DrawManager.total2D--;
-			this._changed = true;
-			Crafty.DrawManager.addCanvas(this);
-		});
-	},
-
-	/**@
-	* #.draw
-	* @comp Canvas
-	* @sign public this .draw([[Context ctx, ]Number x, Number y, Number w, Number h])
-	* @param ctx - Canvas 2D context if drawing on another canvas is required
-	* @param x - X offset for drawing a segment
-	* @param y - Y offset for drawing a segment
-	* @param w - Width of the segment to draw
-	* @param h - Height of the segment to draw
-	* 
-	* Method to draw the entity on the canvas element. Can pass rect values for redrawing a segment of the entity.
-	*/
-
-	// Cache the various objects and arrays used in draw:
-	drawVars:{
-		type: "canvas",
-		pos: {},
-		ctx: null,
-		coord: [0, 0, 0, 0],
-		co: {x:0, y:0, w:0, h:0}
-
-
-	},
-
-	draw: function (ctx, x, y, w, h) {
-		if (!this.ready) return;
-		if (arguments.length === 4) {
-			h = w;
-			w = y;
-			y = x;
-			x = ctx;
-			ctx = Crafty.canvas.context;
-		}
-
-		var pos = this.drawVars.pos;
-		pos._x = (this._x + (x || 0))
-		pos._y = (this._y + (y || 0))
-		pos._w = (w || this._w)
-		pos._h =(h || this._h)
-
-
-		context = ctx || Crafty.canvas.context;
-		coord =  this.__coord || [0, 0, 0, 0];
-		var co = this.drawVars.co;
-		co.x = coord[0] + (x || 0);
-		co.y = coord[1] + (y || 0)
-		co.w = w || coord[2]
-		co.h = h || coord[3]
-
-		if (this._mbr) {
-			context.save();
-
-			context.translate(this._origin.x + this._x, this._origin.y + this._y);
-			pos._x = -this._origin.x;
-			pos._y = -this._origin.y;
-
-			context.rotate((this._rotation % 360) * (Math.PI / 180));
-		}
-		
-		if(this._flipX || this._flipY) {
-			context.save();
-			context.scale((this._flipX ? -1 : 1), (this._flipY ? -1 : 1));
-			if(this._flipX) {
-				pos._x = -(pos._x + pos._w)
-			}
-			if(this._flipY) {
-				pos._y = -(pos._y + pos._h)
-			}
-		}
-		
-		//draw with alpha
-		if (this._alpha < 1.0) {
-			var globalpha = context.globalAlpha;
-			context.globalAlpha = this._alpha;
-		}
-
-		this.drawVars.ctx = context;
-		this.trigger("Draw", this.drawVars);
-
-		if (this._mbr || (this._flipX || this._flipY)) {
-			context.restore();
-		}
-		if (globalpha) {
-			context.globalAlpha = globalpha;
-		}
-		return this;
-	}
+    init: function () {
+        if (!Crafty.canvas.context) {
+            Crafty.canvas.init();
+        }
+
+        //increment the amount of canvas objs
+        Crafty.DrawManager.total2D++;
+        //Allocate an object to hold this components current region
+        this.currentRect = {};
+        this._changed = true;
+        Crafty.DrawManager.addCanvas(this);
+
+        this.bind("Change", function (e) {
+            //flag if changed
+            if (this._changed === false) {
+                this._changed = true;
+                Crafty.DrawManager.addCanvas(this);
+            }
+
+        });
+
+
+        this.bind("Remove", function () {
+            Crafty.DrawManager.total2D--;
+            this._changed = true;
+            Crafty.DrawManager.addCanvas(this);
+        });
+    },
+
+    /**@
+     * #.draw
+     * @comp Canvas
+     * @sign public this .draw([[Context ctx, ]Number x, Number y, Number w, Number h])
+     * @param ctx - Canvas 2D context if drawing on another canvas is required
+     * @param x - X offset for drawing a segment
+     * @param y - Y offset for drawing a segment
+     * @param w - Width of the segment to draw
+     * @param h - Height of the segment to draw
+     *
+     * Method to draw the entity on the canvas element. Can pass rect values for redrawing a segment of the entity.
+     */
+
+    // Cache the various objects and arrays used in draw:
+    drawVars: {
+        type: "canvas",
+        pos: {},
+        ctx: null,
+        coord: [0, 0, 0, 0],
+        co: {
+            x: 0,
+            y: 0,
+            w: 0,
+            h: 0
+        }
+
+
+    },
+
+    draw: function (ctx, x, y, w, h) {
+        if (!this.ready) return;
+        if (arguments.length === 4) {
+            h = w;
+            w = y;
+            y = x;
+            x = ctx;
+            ctx = Crafty.canvas.context;
+        }
+
+        var pos = this.drawVars.pos;
+        pos._x = (this._x + (x || 0));
+        pos._y = (this._y + (y || 0));
+        pos._w = (w || this._w);
+        pos._h = (h || this._h);
+
+
+        context = ctx || Crafty.canvas.context;
+        coord = this.__coord || [0, 0, 0, 0];
+        var co = this.drawVars.co;
+        co.x = coord[0] + (x || 0);
+        co.y = coord[1] + (y || 0);
+        co.w = w || coord[2];
+        co.h = h || coord[3];
+
+        if (this._mbr) {
+            context.save();
+
+            context.translate(this._origin.x + this._x, this._origin.y + this._y);
+            pos._x = -this._origin.x;
+            pos._y = -this._origin.y;
+
+            context.rotate((this._rotation % 360) * (Math.PI / 180));
+        }
+
+        if (this._flipX || this._flipY) {
+            context.save();
+            context.scale((this._flipX ? -1 : 1), (this._flipY ? -1 : 1));
+            if (this._flipX) {
+                pos._x = -(pos._x + pos._w);
+            }
+            if (this._flipY) {
+                pos._y = -(pos._y + pos._h);
+            }
+        }
+
+        var globalpha;
+
+        //draw with alpha
+        if (this._alpha < 1.0) {
+            globalpha = context.globalAlpha;
+            context.globalAlpha = this._alpha;
+        }
+
+        this.drawVars.ctx = context;
+        this.trigger("Draw", this.drawVars);
+
+        if (this._mbr || (this._flipX || this._flipY)) {
+            context.restore();
+        }
+        if (globalpha) {
+            context.globalAlpha = globalpha;
+        }
+        return this;
+    }
 });
 
 /**@
-* #Crafty.canvas
-* @category Graphics
-* 
-* Collection of methods to draw on canvas.
-*/
+ * #Crafty.canvas
+ * @category Graphics
+ *
+ * Collection of methods to draw on canvas.
+ */
 Crafty.extend({
-	canvas: {
-	/**@
-		* #Crafty.canvas.context
-		* @comp Crafty.canvas
-		* 
-		* This will return the 2D context of the main canvas element.
-		* The value returned from `Crafty.canvas._canvas.getContext('2d')`.
-		*/
-		context: null,
-		/**@
-		* #Crafty.canvas._canvas
-		* @comp Crafty.canvas
-		* 
-		* Main Canvas element
-		*/
-
-		/**@
-		* #Crafty.canvas.init
-		* @comp Crafty.canvas
-		* @sign public void Crafty.canvas.init(void)
-        * @trigger NoCanvas - triggered if `Crafty.support.canvas` is false
-        * 
-		* Creates a `canvas` element inside `Crafty.stage.elem`. Must be called
-		* before any entities with the Canvas component can be drawn.
-		*
-		* This method will automatically be called if no `Crafty.canvas.context` is
-		* found.
-		*/
-		init: function () {
-			//check if canvas is supported
-			if (!Crafty.support.canvas) {
-				Crafty.trigger("NoCanvas");
-				Crafty.stop();
-				return;
-			}
-
-			//create an empty canvas element
-			var c;
-			c = document.createElement("canvas");
-			c.width = Crafty.viewport.width;
-			c.height = Crafty.viewport.height;
-			c.style.position = 'absolute';
-			c.style.left = "0px";
-			c.style.top = "0px";
-
-			Crafty.stage.elem.appendChild(c);
-			Crafty.canvas.context = c.getContext('2d');
-			Crafty.canvas._canvas = c;
-
-			//Set any existing transformations
-			var zoom = Crafty.viewport._zoom
-			if (zoom != 1)
-				Crafty.canvas.context.scale(zoom, zoom);
-		}
-	}
+    canvas: {
+        /**@
+         * #Crafty.canvas.context
+         * @comp Crafty.canvas
+         *
+         * This will return the 2D context of the main canvas element.
+         * The value returned from `Crafty.canvas._canvas.getContext('2d')`.
+         */
+        context: null,
+        /**@
+         * #Crafty.canvas._canvas
+         * @comp Crafty.canvas
+         *
+         * Main Canvas element
+         */
+
+        /**@
+         * #Crafty.canvas.init
+         * @comp Crafty.canvas
+         * @sign public void Crafty.canvas.init(void)
+         * @trigger NoCanvas - triggered if `Crafty.support.canvas` is false
+         *
+         * Creates a `canvas` element inside `Crafty.stage.elem`. Must be called
+         * before any entities with the Canvas component can be drawn.
+         *
+         * This method will automatically be called if no `Crafty.canvas.context` is
+         * found.
+         */
+        init: function () {
+            //check if canvas is supported
+            if (!Crafty.support.canvas) {
+                Crafty.trigger("NoCanvas");
+                Crafty.stop();
+                return;
+            }
+
+            //create an empty canvas element
+            var c;
+            c = document.createElement("canvas");
+            c.width = Crafty.viewport.width;
+            c.height = Crafty.viewport.height;
+            c.style.position = 'absolute';
+            c.style.left = "0px";
+            c.style.top = "0px";
+
+            Crafty.stage.elem.appendChild(c);
+            Crafty.canvas.context = c.getContext('2d');
+            Crafty.canvas._canvas = c;
+
+            //Set any existing transformations
+            var zoom = Crafty.viewport._scale;
+            if (zoom != 1)
+                Crafty.canvas.context.scale(zoom, zoom);
+
+            //Bind rendering of canvas context (see drawing.js)
+            Crafty.unbind("RenderScene", Crafty.DrawManager.renderCanvas);
+            Crafty.bind("RenderScene", Crafty.DrawManager.renderCanvas);
+        }
+
+    }
 });
diff --git a/src/collision.js b/src/collision.js
index baf92913..bf5aeb17 100644
--- a/src/collision.js
+++ b/src/collision.js
@@ -1,66 +1,64 @@
+var Crafty = require('./core.js'),
+    document = window.document,
+    DEG_TO_RAD = Math.PI / 180;
+
 /**@
-* #Collision
-* @category 2D
-* Component to detect collision between any two convex polygons.
-*/
+ * #Collision
+ * @category 2D
+ * Component to detect collision between any two convex polygons.
+ */
 Crafty.c("Collision", {
     /**@
      * #.init
      * @comp Collision
      * Create a rectangle polygon based on the x, y, w, h dimensions.
      *
-     * You must ensure that the x, y, w, h properties are set before the init function is called. If you have a Car component that sets these properties you should create your entity like this
-     * ~~~
-     * Crafty.e('2D, DOM, Car, Collision');
-     * ~~~
-     * And not like
-     * ~~~
-     * Crafty.e('2D, DOM, Collision, Car');
-     * ~~~
+     * By default, the collision hitbox will match the dimensions (x, y, w, h) and rotation of the object.
      */
     init: function () {
         this.requires("2D");
         var area = this._mbr || this;
 
-        var poly = new Crafty.polygon([0, 0], [area._w, 0], [area._w, area._h], [0, area._h]);
-        this.map = poly;
-        this.attach(this.map);
-        this.map.shift(area._x, area._y);
+        this.collision();
     },
 
     /**@
-	* #.collision
-	* @comp Collision
-	* 
-	* @sign public this .collision([Crafty.polygon polygon])
-	* @param polygon - Crafty.polygon object that will act as the hit area
-	* 
-	* @sign public this .collision(Array point1, .., Array pointN)
-	* @param point# - Array with an `x` and `y` position to generate a polygon
-	* 
-	* Constructor takes a polygon or array of points to use as the hit area.
-	*
-	* The hit area (polygon) must be a convex shape and not concave
-	* for the collision detection to work.
-    *
-    * If no hit area is specified x, y, w, h properties of the entity will be used.
-	* 
-	* @example
-	* ~~~
-	* Crafty.e("2D, Collision").collision(
-	*     new Crafty.polygon([50,0], [100,100], [0,100])
-	* );
-    * 
-    * Crafty.e("2D, Collision").collision([50,0], [100,100], [0,100]);
-	* ~~~
-	* 
-	* @see Crafty.polygon
-	*/
+     * #.collision
+     * @comp Collision
+     *
+     * @trigger NewHitbox - when a new hitbox is assigned - Crafty.polygon
+     *
+     * @sign public this .collision([Crafty.polygon polygon])
+     * @param polygon - Crafty.polygon object that will act as the hit area
+     *
+     * @sign public this .collision(Array point1, .., Array pointN)
+     * @param point# - Array with an `x` and `y` position to generate a polygon
+     *
+     * Constructor takes a polygon or array of points to use as the hit area.
+     *
+     * The hit area (polygon) must be a convex shape and not concave
+     * for the collision detection to work.
+     *
+     * Points are relative to the object's position and its unrotated state.
+     *
+     * If no parameter is passed, the x, y, w, h properties of the entity will be used, and the hitbox will be resized when the entity is.
+     *
+     * @example
+     * ~~~
+     * Crafty.e("2D, Collision").collision(
+     *     new Crafty.polygon([50,0], [100,100], [0,100])
+     * );
+     *
+     * Crafty.e("2D, Collision").collision([50,0], [100,100], [0,100]);
+     * ~~~
+     *
+     * @see Crafty.polygon
+     */
     collision: function (poly) {
-        var area = this._mbr || this;
-
+        this.unbind("Resize", this._resizeMap);
         if (!poly) {
-            poly = new Crafty.polygon([0, 0], [area._w, 0], [area._w, area._h], [0, area._h]);
+            poly = new Crafty.polygon([0, 0], [this._w, 0], [this._w, this._h], [0, this._h]);
+            this.bind("Resize", this._resizeMap);
         }
 
         if (arguments.length > 1) {
@@ -69,239 +67,309 @@ Crafty.c("Collision", {
             poly = new Crafty.polygon(args);
         }
 
+        if (this.rotation) {
+            poly.rotate({
+                cos: Math.cos(-this.rotation * DEG_TO_RAD),
+                sin: Math.sin(-this.rotation * DEG_TO_RAD),
+                o: {
+                    x: this._origin.x,
+                    y: this._origin.y
+                }
+            });
+        }
+
         this.map = poly;
         this.attach(this.map);
-        this.map.shift(area._x, area._y);
+        this.map.shift(this._x, this._y);
+        this.trigger("NewHitbox", poly);
+        return this;
+    },
+
+
+    // Change the hitbox when a "Resize" event triggers. 
+    _resizeMap: function (e) {
+
+        var dx, dy, rot = this.rotation * DEG_TO_RAD,
+            points = this.map.points;
+
+        // Depending on the change of axis, move the corners of the rectangle appropriately
+        if (e.axis === 'w') {
+
+            if (rot) {
+                dx = e.amount * Math.cos(rot);
+                dy = e.amount * Math.sin(rot);
+            } else {
+                dx = e.amount;
+                dy = 0;
+            }
+
+            // "top right" point shifts on change of w
+            points[1][0] += dx;
+            points[1][1] += dy;
+        } else {
+
+            if (rot) {
+                dy = e.amount * Math.cos(rot);
+                dx = -e.amount * Math.sin(rot);
+            } else {
+                dx = 0;
+                dy = e.amount;
+            }
 
+            // "bottom left" point shifts on change of h
+            points[3][0] += dx;
+            points[3][1] += dy;
+        }
+
+        // "bottom right" point shifts on either change
+        points[2][0] += dx;
+        points[2][1] += dy;
+
+    },
+
+    /**@
+     * #.hit
+     * @comp Collision
+     * @sign public Boolean/Array hit(String component)
+     * @param component - Check collision with entities that has this component
+     * @return `false` if no collision. If a collision is detected, returns an Array of objects that are colliding.
+     *
+     * Takes an argument for a component to test collision for. If a collision is found, an array of
+     * every object in collision along with the amount of overlap is passed.
+     *
+     * If no collision, will return false. The return collision data will be an Array of Objects with the
+     * type of collision used, the object collided and if the type used was SAT (a polygon was used as the hitbox) then an amount of overlap.\
+     * ~~~
+     * [{
+     *    obj: [entity],
+     *    type "MBR" or "SAT",
+     *    overlap: [number]
+     * }]
+     * ~~~
+     * `MBR` is your standard axis aligned rectangle intersection (`.intersect` in the 2D component).
+     * `SAT` is collision between any convex polygon.
+     *
+     * @see .onHit, 2D
+     */
+    hit: function (comp) {
+        var area = this._mbr || this,
+            results = Crafty.map.search(area, false),
+            i = 0,
+            l = results.length,
+            dupes = {},
+            id, obj, oarea, key,
+            hasMap = ('map' in this && 'containsPoint' in this.map),
+            finalresult = [];
+
+        if (!l) {
+            return false;
+        }
+
+        for (; i < l; ++i) {
+            obj = results[i];
+            oarea = obj._mbr || obj; //use the mbr
+
+            if (!obj) continue;
+            id = obj[0];
+
+            //check if not added to hash and that actually intersects
+            if (!dupes[id] && this[0] !== id && obj.__c[comp] &&
+                oarea._x < area._x + area._w && oarea._x + oarea._w > area._x &&
+                oarea._y < area._y + area._h && oarea._h + oarea._y > area._y)
+                dupes[id] = obj;
+        }
+
+        for (key in dupes) {
+            obj = dupes[key];
+
+            if (hasMap && 'map' in obj) {
+                var SAT = this._SAT(this.map, obj.map);
+                SAT.obj = obj;
+                SAT.type = "SAT";
+                if (SAT) finalresult.push(SAT);
+            } else {
+                finalresult.push({
+                    obj: obj,
+                    type: "MBR"
+                });
+            }
+        }
+
+        if (!finalresult.length) {
+            return false;
+        }
+
+        return finalresult;
+    },
+
+    /**@
+     * #.onHit
+     * @comp Collision
+     * @sign public this .onHit(String component, Function hit[, Function noHit])
+     * @param component - Component to check collisions for
+     * @param hit - Callback method to execute upon collision with component.  Will be passed the results of the collision check in the same format documented for hit().
+     * @param noHit - Callback method executed once as soon as collision stops
+     *
+     * Creates an EnterFrame event calling .hit() each frame.  When a collision is detected the callback will be invoked.
+     *
+     * @see .hit
+     */
+    onHit: function (comp, callback, callbackOff) {
+        var justHit = false;
+        this.bind("EnterFrame", function () {
+            var hitdata = this.hit(comp);
+            if (hitdata) {
+                justHit = true;
+                callback.call(this, hitdata);
+            } else if (justHit) {
+                if (typeof callbackOff == 'function') {
+                    callbackOff.call(this);
+                }
+                justHit = false;
+            }
+        });
         return this;
     },
 
-	/**@
-	* #.hit
-	* @comp Collision
-	* @sign public Boolean/Array hit(String component)
-	* @param component - Check collision with entities that has this component
-	* @return `false` if no collision. If a collision is detected, returns an Array of objects that are colliding.
-	* 
-	* Takes an argument for a component to test collision for. If a collision is found, an array of
-	* every object in collision along with the amount of overlap is passed.
-	*
-	* If no collision, will return false. The return collision data will be an Array of Objects with the
-	* type of collision used, the object collided and if the type used was SAT (a polygon was used as the hitbox) then an amount of overlap.\
-	* ~~~
-	* [{
-	*    obj: [entity],
-	*    type "MBR" or "SAT",
-	*    overlap: [number]
-	* }]
-	* ~~~
-	* `MBR` is your standard axis aligned rectangle intersection (`.intersect` in the 2D component).
-	* `SAT` is collision between any convex polygon.
-	* 
-	* @see .onHit, 2D
-	*/
-	hit: function (comp) {
-		var area = this._mbr || this,
-			results = Crafty.map.search(area, false),
-			i = 0, l = results.length,
-			dupes = {},
-			id, obj, oarea, key,
-			hasMap = ('map' in this && 'containsPoint' in this.map),
-			finalresult = [];
-
-		if (!l) {
-			return false;
-		}
-
-		for (; i < l; ++i) {
-			obj = results[i];
-			oarea = obj._mbr || obj; //use the mbr
-
-			if (!obj) continue;
-			id = obj[0];
-
-			//check if not added to hash and that actually intersects
-			if (!dupes[id] && this[0] !== id && obj.__c[comp] &&
-							 oarea._x < area._x + area._w && oarea._x + oarea._w > area._x &&
-							 oarea._y < area._y + area._h && oarea._h + oarea._y > area._y)
-				dupes[id] = obj;
-		}
-
-		for (key in dupes) {
-			obj = dupes[key];
-
-			if (hasMap && 'map' in obj) {
-				var SAT = this._SAT(this.map, obj.map);
-				SAT.obj = obj;
-				SAT.type = "SAT";
-				if (SAT) finalresult.push(SAT);
-			} else {
-				finalresult.push({ obj: obj, type: "MBR" });
-			}
-		}
-
-		if (!finalresult.length) {
-			return false;
-		}
-
-		return finalresult;
-	},
-
-	/**@
-	* #.onHit
-	* @comp Collision
-	* @sign public this .onHit(String component, Function hit[, Function noHit])
-	* @param component - Component to check collisions for
-	* @param hit - Callback method to execute upon collision with component.  Will be passed the results of the collision check in the same format documented for hit().
-	* @param noHit - Callback method executed once as soon as collision stops
-	* 
-	* Creates an EnterFrame event calling .hit() each frame.  When a collision is detected the callback will be invoked.  
-	* 
-	* @see .hit
-	*/
-	onHit: function (comp, callback, callbackOff) {
-		var justHit = false;
-		this.bind("EnterFrame", function () {
-			var hitdata = this.hit(comp);
-			if (hitdata) {
-				justHit = true;
-				callback.call(this, hitdata);
-			} else if (justHit) {
-				if (typeof callbackOff == 'function') {
-					callbackOff.call(this);
-				}
-				justHit = false;
-			}
-		});
-		return this;
-	},
-
-	_SAT: function (poly1, poly2) {
-		var points1 = poly1.points,
-			points2 = poly2.points,
-			i = 0, l = points1.length,
-			j, k = points2.length,
-			normal = { x: 0, y: 0 },
-			length,
-			min1, min2,
-			max1, max2,
-			interval,
-			MTV = null,
-			MTV2 = null,
-			MN = null,
-			dot,
-			nextPoint,
-			currentPoint;
-
-		//loop through the edges of Polygon 1
-		for (; i < l; i++) {
-			nextPoint = points1[(i == l - 1 ? 0 : i + 1)];
-			currentPoint = points1[i];
-
-			//generate the normal for the current edge
-			normal.x = -(nextPoint[1] - currentPoint[1]);
-			normal.y = (nextPoint[0] - currentPoint[0]);
-
-			//normalize the vector
-			length = Math.sqrt(normal.x * normal.x + normal.y * normal.y);
-			normal.x /= length;
-			normal.y /= length;
-
-			//default min max
-			min1 = min2 = -1;
-			max1 = max2 = -1;
-
-			//project all vertices from poly1 onto axis
-			for (j = 0; j < l; ++j) {
-				dot = points1[j][0] * normal.x + points1[j][1] * normal.y;
-				if (dot > max1 || max1 === -1) max1 = dot;
-				if (dot < min1 || min1 === -1) min1 = dot;
-			}
-
-			//project all vertices from poly2 onto axis
-			for (j = 0; j < k; ++j) {
-				dot = points2[j][0] * normal.x + points2[j][1] * normal.y;
-				if (dot > max2 || max2 === -1) max2 = dot;
-				if (dot < min2 || min2 === -1) min2 = dot;
-			}
-
-			//calculate the minimum translation vector should be negative
-			if (min1 < min2) {
-				interval = min2 - max1;
-
-				normal.x = -normal.x;
-				normal.y = -normal.y;
-			} else {
-				interval = min1 - max2;
-			}
-
-			//exit early if positive
-			if (interval >= 0) {
-				return false;
-			}
-
-			if (MTV === null || interval > MTV) {
-				MTV = interval;
-				MN = { x: normal.x, y: normal.y };
-			}
-		}
-
-		//loop through the edges of Polygon 2
-		for (i = 0; i < k; i++) {
-			nextPoint = points2[(i == k - 1 ? 0 : i + 1)];
-			currentPoint = points2[i];
-
-			//generate the normal for the current edge
-			normal.x = -(nextPoint[1] - currentPoint[1]);
-			normal.y = (nextPoint[0] - currentPoint[0]);
-
-			//normalize the vector
-			length = Math.sqrt(normal.x * normal.x + normal.y * normal.y);
-			normal.x /= length;
-			normal.y /= length;
-
-			//default min max
-			min1 = min2 = -1;
-			max1 = max2 = -1;
-
-			//project all vertices from poly1 onto axis
-			for (j = 0; j < l; ++j) {
-				dot = points1[j][0] * normal.x + points1[j][1] * normal.y;
-				if (dot > max1 || max1 === -1) max1 = dot;
-				if (dot < min1 || min1 === -1) min1 = dot;
-			}
-
-			//project all vertices from poly2 onto axis
-			for (j = 0; j < k; ++j) {
-				dot = points2[j][0] * normal.x + points2[j][1] * normal.y;
-				if (dot > max2 || max2 === -1) max2 = dot;
-				if (dot < min2 || min2 === -1) min2 = dot;
-			}
-
-			//calculate the minimum translation vector should be negative
-			if (min1 < min2) {
-				interval = min2 - max1;
-
-				normal.x = -normal.x;
-				normal.y = -normal.y;
-			} else {
-				interval = min1 - max2;
-
-
-			}
-
-			//exit early if positive
-			if (interval >= 0) {
-				return false;
-			}
-
-			if (MTV === null || interval > MTV) MTV = interval;
-			if (interval > MTV2 || MTV2 === null) {
-				MTV2 = interval;
-				MN = { x: normal.x, y: normal.y };
-			}
-		}
-
-		return { overlap: MTV2, normal: MN };
-	}
+    _SAT: function (poly1, poly2) {
+        var points1 = poly1.points,
+            points2 = poly2.points,
+            i = 0,
+            l = points1.length,
+            j, k = points2.length,
+            normal = {
+                x: 0,
+                y: 0
+            },
+            length,
+            min1, min2,
+            max1, max2,
+            interval,
+            MTV = null,
+            MTV2 = null,
+            MN = null,
+            dot,
+            nextPoint,
+            currentPoint;
+
+        //loop through the edges of Polygon 1
+        for (; i < l; i++) {
+            nextPoint = points1[(i == l - 1 ? 0 : i + 1)];
+            currentPoint = points1[i];
+
+            //generate the normal for the current edge
+            normal.x = -(nextPoint[1] - currentPoint[1]);
+            normal.y = (nextPoint[0] - currentPoint[0]);
+
+            //normalize the vector
+            length = Math.sqrt(normal.x * normal.x + normal.y * normal.y);
+            normal.x /= length;
+            normal.y /= length;
+
+            //default min max
+            min1 = min2 = -1;
+            max1 = max2 = -1;
+
+            //project all vertices from poly1 onto axis
+            for (j = 0; j < l; ++j) {
+                dot = points1[j][0] * normal.x + points1[j][1] * normal.y;
+                if (dot > max1 || max1 === -1) max1 = dot;
+                if (dot < min1 || min1 === -1) min1 = dot;
+            }
+
+            //project all vertices from poly2 onto axis
+            for (j = 0; j < k; ++j) {
+                dot = points2[j][0] * normal.x + points2[j][1] * normal.y;
+                if (dot > max2 || max2 === -1) max2 = dot;
+                if (dot < min2 || min2 === -1) min2 = dot;
+            }
+
+            //calculate the minimum translation vector should be negative
+            if (min1 < min2) {
+                interval = min2 - max1;
+
+                normal.x = -normal.x;
+                normal.y = -normal.y;
+            } else {
+                interval = min1 - max2;
+            }
+
+            //exit early if positive
+            if (interval >= 0) {
+                return false;
+            }
+
+            if (MTV === null || interval > MTV) {
+                MTV = interval;
+                MN = {
+                    x: normal.x,
+                    y: normal.y
+                };
+            }
+        }
+
+        //loop through the edges of Polygon 2
+        for (i = 0; i < k; i++) {
+            nextPoint = points2[(i == k - 1 ? 0 : i + 1)];
+            currentPoint = points2[i];
+
+            //generate the normal for the current edge
+            normal.x = -(nextPoint[1] - currentPoint[1]);
+            normal.y = (nextPoint[0] - currentPoint[0]);
+
+            //normalize the vector
+            length = Math.sqrt(normal.x * normal.x + normal.y * normal.y);
+            normal.x /= length;
+            normal.y /= length;
+
+            //default min max
+            min1 = min2 = -1;
+            max1 = max2 = -1;
+
+            //project all vertices from poly1 onto axis
+            for (j = 0; j < l; ++j) {
+                dot = points1[j][0] * normal.x + points1[j][1] * normal.y;
+                if (dot > max1 || max1 === -1) max1 = dot;
+                if (dot < min1 || min1 === -1) min1 = dot;
+            }
+
+            //project all vertices from poly2 onto axis
+            for (j = 0; j < k; ++j) {
+                dot = points2[j][0] * normal.x + points2[j][1] * normal.y;
+                if (dot > max2 || max2 === -1) max2 = dot;
+                if (dot < min2 || min2 === -1) min2 = dot;
+            }
+
+            //calculate the minimum translation vector should be negative
+            if (min1 < min2) {
+                interval = min2 - max1;
+
+                normal.x = -normal.x;
+                normal.y = -normal.y;
+            } else {
+                interval = min1 - max2;
+
+
+            }
+
+            //exit early if positive
+            if (interval >= 0) {
+                return false;
+            }
+
+            if (MTV === null || interval > MTV) MTV = interval;
+            if (interval > MTV2 || MTV2 === null) {
+                MTV2 = interval;
+                MN = {
+                    x: normal.x,
+                    y: normal.y
+                };
+            }
+        }
+
+        return {
+            overlap: MTV2,
+            normal: MN
+        };
+    }
 });
diff --git a/src/controls.js b/src/controls.js
index 43eb97f1..4a76de01 100644
--- a/src/controls.js
+++ b/src/controls.js
@@ -1,185 +1,192 @@
+var Crafty = require('./core.js'),
+    document = window.document;
+
 Crafty.extend({
-	over: null, //object mouseover, waiting for out
-	mouseObjs: 0,
-	mousePos: {},
-	lastEvent: null,
-	keydown: {},
-	selected: false,
-
-	/**@
-	* #Crafty.keydown
-	* @category Input
-	* Remembering what keys (referred by Unicode) are down.
-	* 
-	* @example
-	* ~~~
-	* Crafty.c("Keyboard", {
-	*   isDown: function (key) {
-	*     if (typeof key === "string") {
-	*       key = Crafty.keys[key];
-	*     }
-	*     return !!Crafty.keydown[key];
-	*   }
-	* });
-	* ~~~
-	* @see Keyboard, Crafty.keys
-	*/
-
-	detectBlur: function (e) {
-		var selected = ((e.clientX > Crafty.stage.x && e.clientX < Crafty.stage.x + Crafty.viewport.width) &&
-                    (e.clientY > Crafty.stage.y && e.clientY < Crafty.stage.y + Crafty.viewport.height));
-
-		if (!Crafty.selected && selected)
-			Crafty.trigger("CraftyFocus");
-		if (Crafty.selected && !selected)
-			Crafty.trigger("CraftyBlur");
-
-		Crafty.selected = selected;
-	},
-	/**@
-	* #Crafty.mouseDispatch
-	* @category Input
-	*
-	* Internal method which dispatches mouse events received by Crafty (crafty.stage.elem).
-	* The mouse events get dispatched to the closest entity to the source of the event (if available).
-	* 
-	* This method also sets a global property Crafty.lastEvent, which holds the most recent event that 
-	* occured (useful for determining mouse position in every frame).
-	* ~~~
-	* var newestX = Crafty.lastEvent.realX,
-	* 	  newestY = Crafty.lastEvent.realY;
-	* ~~~
-	*
-	* Notable properties of a MouseEvent e:
-	* ~~~
-	* e.clientX, e.clientY	//(x,y) coordinates of mouse event in web browser screen space
-	* e.realX, e.realY		//(x,y) coordinates of mouse event in world/viewport space
-	* e.mouseButton			// Normalized mouse button according to Crafty.mouseButtons
-	* ~~~
-	* @see Crafty.touchDispatch
-	*/
-	mouseDispatch: function (e) {
-		
-		if (!Crafty.mouseObjs) return;
-		Crafty.lastEvent = e;
-
-		var maxz = -1,
-			closest,
-			q,
-			i = 0, l,
-			pos = Crafty.DOM.translate(e.clientX, e.clientY),
-			x, y,
-			dupes = {},
-			tar = e.target ? e.target : e.srcElement,
-			type = e.type;
-
-		//Normalize button according to http://unixpapa.com/js/mouse.html
-		if (e.which == null) {
-			e.mouseButton = (e.button < 2) ? Crafty.mouseButtons.LEFT : ((e.button == 4) ? Crafty.mouseButtons.MIDDLE : Crafty.mouseButtons.RIGHT);
-		} else {
-			e.mouseButton = (e.which < 2) ? Crafty.mouseButtons.LEFT : ((e.which == 2) ? Crafty.mouseButtons.MIDDLE : Crafty.mouseButtons.RIGHT);
-		}
-
-		e.realX = x = Crafty.mousePos.x = pos.x;
-		e.realY = y = Crafty.mousePos.y = pos.y;
-
-		//if it's a DOM element with Mouse component we are done
-		if (tar.nodeName != "CANVAS") {
-			while (typeof (tar.id) != 'string' && tar.id.indexOf('ent') == -1) {
-				tar = tar.parentNode;
-			}
-			ent = Crafty(parseInt(tar.id.replace('ent', '')))
-			if (ent.has('Mouse') && ent.isAt(x, y))
-				closest = ent;
-		}
-		//else we search for an entity with Mouse component
-		if (!closest) {
-			q = Crafty.map.search({ _x: x, _y: y, _w: 1, _h: 1 }, false);
-
-			for (l = q.length; i < l; ++i) {
-				if (!q[i].__c.Mouse || !q[i]._visible) continue;
-
-				var current = q[i],
-					flag = false;
-
-				//weed out duplicates
-				if (dupes[current[0]]) continue;
-				else dupes[current[0]] = true;
-
-				if (current.mapArea) {
-					if (current.mapArea.containsPoint(x, y)) {
-						flag = true;
-					}
-				} else if (current.isAt(x, y)) flag = true;
-
-				if (flag && (current._z >= maxz || maxz === -1)) {
-					//if the Z is the same, select the closest GUID
-					if (current._z === maxz && current[0] < closest[0]) {
-						continue;
-					}
-					maxz = current._z;
-					closest = current;
-				}
-			}
-		}
-
-		//found closest object to mouse
-		if (closest) {
-			//click must mousedown and out on tile
-			if (type === "mousedown") {
-				closest.trigger("MouseDown", e);
+    over: null, //object mouseover, waiting for out
+    mouseObjs: 0,
+    mousePos: {},
+    lastEvent: null,
+    keydown: {},
+    selected: false,
+
+    /**@
+     * #Crafty.keydown
+     * @category Input
+     * Remembering what keys (referred by Unicode) are down.
+     *
+     * @example
+     * ~~~
+     * Crafty.c("Keyboard", {
+     *   isDown: function (key) {
+     *     if (typeof key === "string") {
+     *       key = Crafty.keys[key];
+     *     }
+     *     return !!Crafty.keydown[key];
+     *   }
+     * });
+     * ~~~
+     * @see Keyboard, Crafty.keys
+     */
+
+    detectBlur: function (e) {
+        var selected = ((e.clientX > Crafty.stage.x && e.clientX < Crafty.stage.x + Crafty.viewport.width) &&
+            (e.clientY > Crafty.stage.y && e.clientY < Crafty.stage.y + Crafty.viewport.height));
+
+        if (!Crafty.selected && selected)
+            Crafty.trigger("CraftyFocus");
+        if (Crafty.selected && !selected)
+            Crafty.trigger("CraftyBlur");
+
+        Crafty.selected = selected;
+    },
+    /**@
+     * #Crafty.mouseDispatch
+     * @category Input
+     *
+     * Internal method which dispatches mouse events received by Crafty (crafty.stage.elem).
+     * The mouse events get dispatched to the closest entity to the source of the event (if available).
+     *
+     * This method also sets a global property Crafty.lastEvent, which holds the most recent event that
+     * occured (useful for determining mouse position in every frame).
+     * ~~~
+     * var newestX = Crafty.lastEvent.realX,
+     *     newestY = Crafty.lastEvent.realY;
+     * ~~~
+     *
+     * Notable properties of a MouseEvent e:
+     * ~~~
+     * e.clientX, e.clientY	//(x,y) coordinates of mouse event in web browser screen space
+     * e.realX, e.realY		//(x,y) coordinates of mouse event in world/viewport space
+     * e.mouseButton			// Normalized mouse button according to Crafty.mouseButtons
+     * ~~~
+     * @see Crafty.touchDispatch
+     */
+    mouseDispatch: function (e) {
+
+        if (!Crafty.mouseObjs) return;
+        Crafty.lastEvent = e;
+
+        var maxz = -1,
+            closest,
+            q,
+            i = 0,
+            l,
+            pos = Crafty.DOM.translate(e.clientX, e.clientY),
+            x, y,
+            dupes = {},
+            tar = e.target ? e.target : e.srcElement,
+            type = e.type;
+
+        //Normalize button according to http://unixpapa.com/js/mouse.html
+        if (typeof e.which === 'undefined') {
+            e.mouseButton = (e.button < 2) ? Crafty.mouseButtons.LEFT : ((e.button == 4) ? Crafty.mouseButtons.MIDDLE : Crafty.mouseButtons.RIGHT);
+        } else {
+            e.mouseButton = (e.which < 2) ? Crafty.mouseButtons.LEFT : ((e.which == 2) ? Crafty.mouseButtons.MIDDLE : Crafty.mouseButtons.RIGHT);
+        }
+
+        e.realX = x = Crafty.mousePos.x = pos.x;
+        e.realY = y = Crafty.mousePos.y = pos.y;
+
+        //if it's a DOM element with Mouse component we are done
+        if (tar.nodeName != "CANVAS") {
+            while (typeof (tar.id) != 'string' && tar.id.indexOf('ent') == -1) {
+                tar = tar.parentNode;
+            }
+            ent = Crafty(parseInt(tar.id.replace('ent', ''), 10));
+            if (ent.has('Mouse') && ent.isAt(x, y))
+                closest = ent;
+        }
+        //else we search for an entity with Mouse component
+        if (!closest) {
+            q = Crafty.map.search({
+                _x: x,
+                _y: y,
+                _w: 1,
+                _h: 1
+            }, false);
+
+            for (l = q.length; i < l; ++i) {
+                if (!q[i].__c.Mouse || !q[i]._visible) continue;
+
+                var current = q[i],
+                    flag = false;
+
+                //weed out duplicates
+                if (dupes[current[0]]) continue;
+                else dupes[current[0]] = true;
+
+                if (current.mapArea) {
+                    if (current.mapArea.containsPoint(x, y)) {
+                        flag = true;
+                    }
+                } else if (current.isAt(x, y)) flag = true;
+
+                if (flag && (current._z >= maxz || maxz === -1)) {
+                    //if the Z is the same, select the closest GUID
+                    if (current._z === maxz && current[0] < closest[0]) {
+                        continue;
+                    }
+                    maxz = current._z;
+                    closest = current;
+                }
+            }
+        }
+
+        //found closest object to mouse
+        if (closest) {
+            //click must mousedown and out on tile
+            if (type === "mousedown") {
+                closest.trigger("MouseDown", e);
             } else if (type === "mouseup") {
-				closest.trigger("MouseUp", e);
-			} else if (type == "dblclick") {
-				closest.trigger("DoubleClick", e);
-			} else if (type == "click") {
-				closest.trigger("Click", e);
-			}else if (type === "mousemove") {
-				closest.trigger("MouseMove", e);
-				if (this.over !== closest) { //if new mousemove, it is over
-					if (this.over) {
-						this.over.trigger("MouseOut", e); //if over wasn't null, send mouseout
-						this.over = null;
-					}
-					this.over = closest;
-					closest.trigger("MouseOver", e);
-				}
-			} else closest.trigger(type, e); //trigger whatever it is
-		} else {
-			if (type === "mousemove" && this.over) {
-				this.over.trigger("MouseOut", e);
-				this.over = null;
-			}
-			if (type === "mousedown") {
-				Crafty.viewport.mouselook('start', e);
-			}
-			else if (type === "mousemove") {
-				Crafty.viewport.mouselook('drag', e);
-			}
-			else if (type == "mouseup") {
-				Crafty.viewport.mouselook('stop');
-			}
-		}
-
-		if (type === "mousemove") {
-			this.lastEvent = e;
-		}
-
-	},
+                closest.trigger("MouseUp", e);
+            } else if (type == "dblclick") {
+                closest.trigger("DoubleClick", e);
+            } else if (type == "click") {
+                closest.trigger("Click", e);
+            } else if (type === "mousemove") {
+                closest.trigger("MouseMove", e);
+                if (this.over !== closest) { //if new mousemove, it is over
+                    if (this.over) {
+                        this.over.trigger("MouseOut", e); //if over wasn't null, send mouseout
+                        this.over = null;
+                    }
+                    this.over = closest;
+                    closest.trigger("MouseOver", e);
+                }
+            } else closest.trigger(type, e); //trigger whatever it is
+        } else {
+            if (type === "mousemove" && this.over) {
+                this.over.trigger("MouseOut", e);
+                this.over = null;
+            }
+            if (type === "mousedown") {
+                Crafty.viewport.mouselook('start', e);
+            } else if (type === "mousemove") {
+                Crafty.viewport.mouselook('drag', e);
+            } else if (type == "mouseup") {
+                Crafty.viewport.mouselook('stop');
+            }
+        }
+
+        if (type === "mousemove") {
+            this.lastEvent = e;
+        }
+
+    },
 
 
     /**@
-    * #Crafty.touchDispatch
-    * @category Input
-    * 
-    * TouchEvents have a different structure then MouseEvents.
-    * The relevant data lives in e.changedTouches[0].
-    * To normalize TouchEvents we catch em and dispatch a mock MouseEvent instead.
-    * 
-    * @see Crafty.mouseDispatch
-    */
-
-    touchDispatch: function(e) {
+     * #Crafty.touchDispatch
+     * @category Input
+     *
+     * TouchEvents have a different structure then MouseEvents.
+     * The relevant data lives in e.changedTouches[0].
+     * To normalize TouchEvents we catch em and dispatch a mock MouseEvent instead.
+     *
+     * @see Crafty.mouseDispatch
+     */
+
+    touchDispatch: function (e) {
         var type,
             lastEvent = Crafty.lastEvent;
 
@@ -188,716 +195,736 @@ Crafty.extend({
         else if (e.type === "touchend") type = "mouseup";
         else if (e.type === "touchcancel") type = "mouseup";
         else if (e.type === "touchleave") type = "mouseup";
-        
-        if(e.touches && e.touches.length) {
+
+        if (e.touches && e.touches.length) {
             first = e.touches[0];
-        } else if(e.changedTouches && e.changedTouches.length) {
+        } else if (e.changedTouches && e.changedTouches.length) {
             first = e.changedTouches[0];
         }
 
         var simulatedEvent = document.createEvent("MouseEvent");
         simulatedEvent.initMouseEvent(type, true, true, window, 1,
-            first.screenX, 
+            first.screenX,
             first.screenY,
-            first.clientX, 
-            first.clientY, 
+            first.clientX,
+            first.clientY,
             false, false, false, false, 0, e.relatedTarget
         );
 
         first.target.dispatchEvent(simulatedEvent);
 
         // trigger click when it should be triggered
-        if (lastEvent != null && lastEvent.type == 'mousedown' && type == 'mouseup') {
+        if (lastEvent !== null && lastEvent.type == 'mousedown' && type == 'mouseup') {
             type = 'click';
 
-            var simulatedEvent = document.createEvent("MouseEvent");
+            simulatedEvent = document.createEvent("MouseEvent");
             simulatedEvent.initMouseEvent(type, true, true, window, 1,
-                first.screenX, 
+                first.screenX,
                 first.screenY,
-                first.clientX, 
-                first.clientY, 
+                first.clientX,
+                first.clientY,
                 false, false, false, false, 0, e.relatedTarget
             );
             first.target.dispatchEvent(simulatedEvent);
         }
 
-        if(e.preventDefault) e.preventDefault();
+        if (e.preventDefault) e.preventDefault();
         else e.returnValue = false;
     },
 
 
-	/**@
-	* #KeyboardEvent
-	* @category Input
-    * Keyboard Event triggered by Crafty Core
-	* @trigger KeyDown - is triggered for each entity when the DOM 'keydown' event is triggered.
-	* @trigger KeyUp - is triggered for each entity when the DOM 'keyup' event is triggered.
-	* 
-	* @example
-	* ~~~
-    * Crafty.e("2D, DOM, Color")
-    *   .attr({x: 100, y: 100, w: 50, h: 50})
-    *   .color("red")
-    *   .bind('KeyDown', function(e) {
-    *     if(e.key == Crafty.keys['LEFT_ARROW']) {
-    *       this.x=this.x-1;
-    *     } else if (e.key == Crafty.keys['RIGHT_ARROW']) {
-    *     this.x=this.x+1;
-    *     } else if (e.key == Crafty.keys['UP_ARROW']) {
-    *     this.y=this.y-1;
-    *     } else if (e.key == Crafty.keys['DOWN_ARROW']) {
-    *     this.y=this.y+1;
-    *     }
-    *   });
-	* ~~~
-	* 
-	* @see Crafty.keys
-	*/
-
-	/**@
-	* #Crafty.eventObject
-	* @category Input
-	* 
-	* Event Object used in Crafty for cross browser compatibility
-	*/
-
-	/**@
-	* #.key
-	* @comp Crafty.eventObject
-	* 
-	* Unicode of the key pressed
-	*/
-	keyboardDispatch: function (e) {
-		// Use a Crafty-standard event object to avoid cross-browser issues
-		var original = e,
-			evnt = {},
-			props = "char charCode keyCode type shiftKey ctrlKey metaKey timestamp".split(" ");
-		for (var i = props.length; i;) {
-			var prop = props[--i];
-			evnt[prop] = original[prop];
-		}
-		evnt.which = original.charCode != null ? original.charCode : original.keyCode;
-		evnt.key = original.keyCode || original.which;
-		evnt.originalEvent = original;
-		e = evnt;
-
-		if (e.type === "keydown") {
-			if (Crafty.keydown[e.key] !== true) {
-				Crafty.keydown[e.key] = true;
-				Crafty.trigger("KeyDown", e);
-			}
-		} else if (e.type === "keyup") {
-			delete Crafty.keydown[e.key];
-			Crafty.trigger("KeyUp", e);
-		}
-
-		//prevent default actions for all keys except backspace and F1-F12 and except actions in INPUT and TEXTAREA.
-		//prevent bubbling up for all keys except backspace and F1-F12.
-		//Among others this prevent the arrow keys from scrolling the parent page
-		//of an iframe hosting the game
-		if(Crafty.selected && !(e.key == 8 || e.key >= 112 && e.key <= 135)) {
-			if(e.stopPropagation) e.stopPropagation();
+    /**@
+     * #KeyboardEvent
+     * @category Input
+     * Keyboard Event triggered by Crafty Core
+     * @trigger KeyDown - is triggered for each entity when the DOM 'keydown' event is triggered.
+     * @trigger KeyUp - is triggered for each entity when the DOM 'keyup' event is triggered.
+     *
+     * @example
+     * ~~~
+     * Crafty.e("2D, DOM, Color")
+     *   .attr({x: 100, y: 100, w: 50, h: 50})
+     *   .color("red")
+     *   .bind('KeyDown', function(e) {
+     *     if(e.key == Crafty.keys['LEFT_ARROW']) {
+     *       this.x=this.x-1;
+     *     } else if (e.key == Crafty.keys['RIGHT_ARROW']) {
+     *     this.x=this.x+1;
+     *     } else if (e.key == Crafty.keys['UP_ARROW']) {
+     *     this.y=this.y-1;
+     *     } else if (e.key == Crafty.keys['DOWN_ARROW']) {
+     *     this.y=this.y+1;
+     *     }
+     *   });
+     * ~~~
+     *
+     * @see Crafty.keys
+     */
+
+    /**@
+     * #Crafty.eventObject
+     * @category Input
+     *
+     * Event Object used in Crafty for cross browser compatibility
+     */
+
+    /**@
+     * #.key
+     * @comp Crafty.eventObject
+     *
+     * Unicode of the key pressed
+     */
+    keyboardDispatch: function (e) {
+        // Use a Crafty-standard event object to avoid cross-browser issues
+        var original = e,
+            evnt = {},
+            props = "char charCode keyCode type shiftKey ctrlKey metaKey timestamp".split(" ");
+        for (var i = props.length; i;) {
+            var prop = props[--i];
+            evnt[prop] = original[prop];
+        }
+        evnt.which = original.charCode !== null ? original.charCode : original.keyCode;
+        evnt.key = original.keyCode || original.which;
+        evnt.originalEvent = original;
+        e = evnt;
+
+        if (e.type === "keydown") {
+            if (Crafty.keydown[e.key] !== true) {
+                Crafty.keydown[e.key] = true;
+                Crafty.trigger("KeyDown", e);
+            }
+        } else if (e.type === "keyup") {
+            delete Crafty.keydown[e.key];
+            Crafty.trigger("KeyUp", e);
+        }
+
+        //prevent default actions for all keys except backspace and F1-F12 and except actions in INPUT and TEXTAREA.
+        //prevent bubbling up for all keys except backspace and F1-F12.
+        //Among others this prevent the arrow keys from scrolling the parent page
+        //of an iframe hosting the game
+        if (Crafty.selected && !(e.key == 8 || e.key >= 112 && e.key <= 135)) {
+            if (e.stopPropagation) e.stopPropagation();
             else e.cancelBubble = true;
 
-			//Don't prevent default actions if target node is input or textarea.
-			if(e.target && e.target.nodeName !== 'INPUT' && e.target.nodeName !== 'TEXTAREA'){
-				if(e.preventDefault){
-					e.preventDefault();
-				} else {
-					e.returnValue = false;
-				}
-			}
-			return false;
-		}
-	}
+            //Don't prevent default actions if target node is input or textarea.
+            if (e.target && e.target.nodeName !== 'INPUT' && e.target.nodeName !== 'TEXTAREA') {
+                if (e.preventDefault) {
+                    e.preventDefault();
+                } else {
+                    e.returnValue = false;
+                }
+            }
+            return false;
+        }
+    }
 });
 
 //initialize the input events onload
 Crafty.bind("Load", function () {
-	Crafty.addEvent(this, "keydown", Crafty.keyboardDispatch);
-	Crafty.addEvent(this, "keyup", Crafty.keyboardDispatch);
-
-	Crafty.addEvent(this, Crafty.stage.elem, "mousedown", Crafty.mouseDispatch);
-	Crafty.addEvent(this, Crafty.stage.elem, "mouseup", Crafty.mouseDispatch);
-	Crafty.addEvent(this, document.body, "mouseup", Crafty.detectBlur);
-	Crafty.addEvent(this, Crafty.stage.elem, "mousemove", Crafty.mouseDispatch);
-	Crafty.addEvent(this, Crafty.stage.elem, "click", Crafty.mouseDispatch);
-	Crafty.addEvent(this, Crafty.stage.elem, "dblclick", Crafty.mouseDispatch);
-
-	Crafty.addEvent(this, Crafty.stage.elem, "touchstart", Crafty.touchDispatch);
-	Crafty.addEvent(this, Crafty.stage.elem, "touchmove", Crafty.touchDispatch);
-	Crafty.addEvent(this, Crafty.stage.elem, "touchend", Crafty.touchDispatch);
+    Crafty.addEvent(this, "keydown", Crafty.keyboardDispatch);
+    Crafty.addEvent(this, "keyup", Crafty.keyboardDispatch);
+
+    Crafty.addEvent(this, Crafty.stage.elem, "mousedown", Crafty.mouseDispatch);
+    Crafty.addEvent(this, Crafty.stage.elem, "mouseup", Crafty.mouseDispatch);
+    Crafty.addEvent(this, document.body, "mouseup", Crafty.detectBlur);
+    Crafty.addEvent(this, Crafty.stage.elem, "mousemove", Crafty.mouseDispatch);
+    Crafty.addEvent(this, Crafty.stage.elem, "click", Crafty.mouseDispatch);
+    Crafty.addEvent(this, Crafty.stage.elem, "dblclick", Crafty.mouseDispatch);
+
+    Crafty.addEvent(this, Crafty.stage.elem, "touchstart", Crafty.touchDispatch);
+    Crafty.addEvent(this, Crafty.stage.elem, "touchmove", Crafty.touchDispatch);
+    Crafty.addEvent(this, Crafty.stage.elem, "touchend", Crafty.touchDispatch);
     Crafty.addEvent(this, Crafty.stage.elem, "touchcancel", Crafty.touchDispatch);
     Crafty.addEvent(this, Crafty.stage.elem, "touchleave", Crafty.touchDispatch);
-   });
+});
 
 Crafty.bind("CraftyStop", function () {
-	Crafty.removeEvent(this, "keydown", Crafty.keyboardDispatch);
-	Crafty.removeEvent(this, "keyup", Crafty.keyboardDispatch);
-
-	if (Crafty.stage) {
-		Crafty.removeEvent(this, Crafty.stage.elem, "mousedown", Crafty.mouseDispatch);
-		Crafty.removeEvent(this, Crafty.stage.elem, "mouseup", Crafty.mouseDispatch);
-		Crafty.removeEvent(this, Crafty.stage.elem, "mousemove", Crafty.mouseDispatch);
-		Crafty.removeEvent(this, Crafty.stage.elem, "click", Crafty.mouseDispatch);
-		Crafty.removeEvent(this, Crafty.stage.elem, "dblclick", Crafty.mouseDispatch);
-
-		Crafty.removeEvent(this, Crafty.stage.elem, "touchstart", Crafty.touchDispatch);
-		Crafty.removeEvent(this, Crafty.stage.elem, "touchmove", Crafty.touchDispatch);
-		Crafty.removeEvent(this, Crafty.stage.elem, "touchend", Crafty.touchDispatch);
-		Crafty.removeEvent(this, Crafty.stage.elem, "touchcancel", Crafty.touchDispatch);
-		Crafty.removeEvent(this, Crafty.stage.elem, "touchleave", Crafty.touchDispatch);
-	}
-
-	Crafty.removeEvent(this, document.body, "mouseup", Crafty.detectBlur);
+    Crafty.removeEvent(this, "keydown", Crafty.keyboardDispatch);
+    Crafty.removeEvent(this, "keyup", Crafty.keyboardDispatch);
+
+    if (Crafty.stage) {
+        Crafty.removeEvent(this, Crafty.stage.elem, "mousedown", Crafty.mouseDispatch);
+        Crafty.removeEvent(this, Crafty.stage.elem, "mouseup", Crafty.mouseDispatch);
+        Crafty.removeEvent(this, Crafty.stage.elem, "mousemove", Crafty.mouseDispatch);
+        Crafty.removeEvent(this, Crafty.stage.elem, "click", Crafty.mouseDispatch);
+        Crafty.removeEvent(this, Crafty.stage.elem, "dblclick", Crafty.mouseDispatch);
+
+        Crafty.removeEvent(this, Crafty.stage.elem, "touchstart", Crafty.touchDispatch);
+        Crafty.removeEvent(this, Crafty.stage.elem, "touchmove", Crafty.touchDispatch);
+        Crafty.removeEvent(this, Crafty.stage.elem, "touchend", Crafty.touchDispatch);
+        Crafty.removeEvent(this, Crafty.stage.elem, "touchcancel", Crafty.touchDispatch);
+        Crafty.removeEvent(this, Crafty.stage.elem, "touchleave", Crafty.touchDispatch);
+    }
+
+    Crafty.removeEvent(this, document.body, "mouseup", Crafty.detectBlur);
 });
 
 /**@
-* #Mouse
-* @category Input
-* Provides the entity with mouse related events
-* @trigger MouseOver - when the mouse enters the entity - MouseEvent
-* @trigger MouseOut - when the mouse leaves the entity - MouseEvent
-* @trigger MouseDown - when the mouse button is pressed on the entity - MouseEvent
-* @trigger MouseUp - when the mouse button is released on the entity - MouseEvent
-* @trigger Click - when the user clicks the entity. [See documentation](http://www.quirksmode.org/dom/events/click.html) - MouseEvent
-* @trigger DoubleClick - when the user double clicks the entity - MouseEvent
-* @trigger MouseMove - when the mouse is over the entity and moves - MouseEvent
-* Crafty adds the mouseButton property to MouseEvents that match one of
-*
-* ~~~
-* - Crafty.mouseButtons.LEFT
-* - Crafty.mouseButtons.RIGHT
-* - Crafty.mouseButtons.MIDDLE
-* ~~~
-* 
-* @example
-* ~~~
-* myEntity.bind('Click', function() {
-*      console.log("Clicked!!");
-* })
-*
-* myEntity.bind('MouseUp', function(e) {
-*    if( e.mouseButton == Crafty.mouseButtons.RIGHT )
-*        console.log("Clicked right button");
-* })
-* ~~~
-* @see Crafty.mouseDispatch
-*/
+ * #Mouse
+ * @category Input
+ * Provides the entity with mouse related events
+ * @trigger MouseOver - when the mouse enters the entity - MouseEvent
+ * @trigger MouseOut - when the mouse leaves the entity - MouseEvent
+ * @trigger MouseDown - when the mouse button is pressed on the entity - MouseEvent
+ * @trigger MouseUp - when the mouse button is released on the entity - MouseEvent
+ * @trigger Click - when the user clicks the entity. [See documentation](http://www.quirksmode.org/dom/events/click.html) - MouseEvent
+ * @trigger DoubleClick - when the user double clicks the entity - MouseEvent
+ * @trigger MouseMove - when the mouse is over the entity and moves - MouseEvent
+ * Crafty adds the mouseButton property to MouseEvents that match one of
+ *
+ * ~~~
+ * - Crafty.mouseButtons.LEFT
+ * - Crafty.mouseButtons.RIGHT
+ * - Crafty.mouseButtons.MIDDLE
+ * ~~~
+ *
+ * @example
+ * ~~~
+ * myEntity.bind('Click', function() {
+ *      console.log("Clicked!!");
+ * })
+ *
+ * myEntity.bind('MouseUp', function(e) {
+ *    if( e.mouseButton == Crafty.mouseButtons.RIGHT )
+ *        console.log("Clicked right button");
+ * })
+ * ~~~
+ * @see Crafty.mouseDispatch
+ */
 Crafty.c("Mouse", {
-	init: function () {
-		Crafty.mouseObjs++;
-		this.bind("Remove", function () {
-			Crafty.mouseObjs--;
-		});
-	},
-
-	/**@
-	* #.areaMap
-	* @comp Mouse
-	* @sign public this .areaMap(Crafty.polygon polygon)
-	* @param polygon - Instance of Crafty.polygon used to check if the mouse coordinates are inside this region
-	* @sign public this .areaMap(Array point1, .., Array pointN)
-	* @param point# - Array with an `x` and `y` position to generate a polygon
-	* 
-	* Assign a polygon to the entity so that mouse events will only be triggered if
-	* the coordinates are inside the given polygon.
-	* 
-	* @example
-	* ~~~
-	* Crafty.e("2D, DOM, Color, Mouse")
-	*     .color("red")
-	*     .attr({ w: 100, h: 100 })
-	*     .bind('MouseOver', function() {console.log("over")})
-	*     .areaMap([0,0], [50,0], [50,50], [0,50])
-	* ~~~
-	* 
-	* @see Crafty.polygon
-	*/
-	areaMap: function (poly) {
-		//create polygon
-		if (arguments.length > 1) {
-			//convert args to array to create polygon
-			var args = Array.prototype.slice.call(arguments, 0);
-			poly = new Crafty.polygon(args);
-		}
-
-		poly.shift(this._x, this._y);
-		//this.map = poly;
-		this.mapArea = poly;
-
-		this.attach(this.mapArea);
-		return this;
-	}
+    init: function () {
+        Crafty.mouseObjs++;
+        this.bind("Remove", function () {
+            Crafty.mouseObjs--;
+        });
+    },
+
+    /**@
+     * #.areaMap
+     * @comp Mouse
+     * @sign public this .areaMap(Crafty.polygon polygon)
+     * @param polygon - Instance of Crafty.polygon used to check if the mouse coordinates are inside this region
+     * @sign public this .areaMap(Array point1, .., Array pointN)
+     * @param point# - Array with an `x` and `y` position to generate a polygon
+     *
+     * Assign a polygon to the entity so that mouse events will only be triggered if
+     * the coordinates are inside the given polygon.
+     *
+     * @example
+     * ~~~
+     * Crafty.e("2D, DOM, Color, Mouse")
+     *     .color("red")
+     *     .attr({ w: 100, h: 100 })
+     *     .bind('MouseOver', function() {console.log("over")})
+     *     .areaMap([0,0], [50,0], [50,50], [0,50])
+     * ~~~
+     *
+     * @see Crafty.polygon
+     */
+    areaMap: function (poly) {
+        //create polygon
+        if (arguments.length > 1) {
+            //convert args to array to create polygon
+            var args = Array.prototype.slice.call(arguments, 0);
+            poly = new Crafty.polygon(args);
+        }
+
+        poly.shift(this._x, this._y);
+        //this.map = poly;
+        this.mapArea = poly;
+
+        this.attach(this.mapArea);
+        return this;
+    }
 });
 
 /**@
-* #Draggable
-* @category Input
-* Enable drag and drop of the entity.
-* @trigger Dragging - is triggered each frame the entity is being dragged - MouseEvent
-* @trigger StartDrag - is triggered when dragging begins - MouseEvent
-* @trigger StopDrag - is triggered when dragging ends - MouseEvent
-*/
+ * #Draggable
+ * @category Input
+ * Enable drag and drop of the entity.
+ * @trigger Dragging - is triggered each frame the entity is being dragged - MouseEvent
+ * @trigger StartDrag - is triggered when dragging begins - MouseEvent
+ * @trigger StopDrag - is triggered when dragging ends - MouseEvent
+ */
 Crafty.c("Draggable", {
-  _origMouseDOMPos: null,
-	_oldX: null,
-	_oldY: null,
-	_dragging: false,
-	_dir:null,
-
-	_ondrag: null,
-	_ondown: null,
-	_onup: null,
-
-	//Note: the code is note tested with zoom, etc., that may distort the direction between the viewport and the coordinate on the canvas.
-	init: function () {
-		this.requires("Mouse");
-		
-		this._ondrag = function (e) {
-			var pos = Crafty.DOM.translate(e.clientX, e.clientY);
-
-			// ignore invalid 0 0 position - strange problem on ipad
-			if (pos.x == 0 || pos.y == 0) {
-			    return false;
-			}
-	    
-			if(this._dir) {
-			    var len = (pos.x - this._origMouseDOMPos.x) * this._dir.x + (pos.y - this._origMouseDOMPos.y) * this._dir.y;
-			    this.x = this._oldX + len * this._dir.x;
-			    this.y = this._oldY + len * this._dir.y;
-			} else {
-			    this.x = this._oldX + (pos.x - this._origMouseDOMPos.x);
-			    this.y = this._oldY + (pos.y - this._origMouseDOMPos.y);
-			}
-	    
-			this.trigger("Dragging", e);
-		};
-
-		this._ondown = function (e) {
-			if (e.mouseButton !== Crafty.mouseButtons.LEFT) return;
-			this._startDrag(e);
-		};
-
-		this._onup = function upper(e) {
-			if (this._dragging == true) {
-			    Crafty.removeEvent(this, Crafty.stage.elem, "mousemove", this._ondrag);
-			    Crafty.removeEvent(this, Crafty.stage.elem, "mouseup", this._onup);
-			    this._dragging = false;
-			    this.trigger("StopDrag", e);
-			}
-		};
-
-		this.enableDrag();
-	},
-
-	/**@
-	* #.dragDirection
-	* @comp Draggable
-	* @sign public this .dragDirection()
-    * Remove any previously specified direction.
-    *
-	* @sign public this .dragDirection(vector)
-    * @param vector - Of the form of {x: valx, y: valy}, the vector (valx, valy) denotes the move direction.
-    * 
-	* @sign public this .dragDirection(degree)
-    * @param degree - A number, the degree (clockwise) of the move direction with respect to the x axis. 
-	* Specify the dragging direction.
-	* 
-	* @example
-	* ~~~
-	* this.dragDirection()
-	* this.dragDirection({x:1, y:0}) //Horizontal
-	* this.dragDirection({x:0, y:1}) //Vertical
-    * // Note: because of the orientation of x and y axis,
-    * // this is 45 degree clockwise with respect to the x axis.
-	* this.dragDirection({x:1, y:1}) //45 degree.
-	* this.dragDirection(60) //60 degree.
-	* ~~~
-	*/
-	dragDirection: function(dir) {
-		if (typeof dir === 'undefined') {
-			this._dir=null;
-		} else if (("" + parseInt(dir)) == dir) { //dir is a number
-      this._dir={
-        x: Math.cos(dir/180*Math.PI)
-        , y: Math.sin(dir/180*Math.PI)
-      };
+    _origMouseDOMPos: null,
+    _oldX: null,
+    _oldY: null,
+    _dragging: false,
+    _dir: null,
+
+    //Note: the code is not tested with zoom, etc., that may distort the direction between the viewport and the coordinate on the canvas.
+    init: function () {
+        this.requires("Mouse");
+        this.enableDrag();
+    },
+
+    _ondrag: function (e) {
+        // While a drag is occurring, this method is bound to the mousemove DOM event
+        var pos = Crafty.DOM.translate(e.clientX, e.clientY);
+
+        // ignore invalid 0 0 position - strange problem on ipad
+        if (pos.x === 0 || pos.y === 0) {
+            return false;
+        }
+
+        if (this._dir) {
+            var len = (pos.x - this._origMouseDOMPos.x) * this._dir.x + (pos.y - this._origMouseDOMPos.y) * this._dir.y;
+            this.x = this._oldX + len * this._dir.x;
+            this.y = this._oldY + len * this._dir.y;
+        } else {
+            this.x = this._oldX + (pos.x - this._origMouseDOMPos.x);
+            this.y = this._oldY + (pos.y - this._origMouseDOMPos.y);
+        }
+
+        this.trigger("Dragging", e);
+    },
+
+    _ondown: function (e) {
+        // When dragging is enabled, this method is bound to the MouseDown crafty event
+        if (e.mouseButton !== Crafty.mouseButtons.LEFT) return;
+        this._startDrag(e);
+    },
+
+    _onup: function (e) {
+        // While a drag is occurring, this method is bound to mouseup DOM event
+        if (this._dragging === true) {
+            Crafty.removeEvent(this, Crafty.stage.elem, "mousemove", this._ondrag);
+            Crafty.removeEvent(this, Crafty.stage.elem, "mouseup", this._onup);
+            this._dragging = false;
+            this.trigger("StopDrag", e);
+        }
+    },
+
+    /**@
+     * #.dragDirection
+     * @comp Draggable
+     * @sign public this .dragDirection()
+     * Remove any previously specified direction.
+     *
+     * @sign public this .dragDirection(vector)
+     * @param vector - Of the form of {x: valx, y: valy}, the vector (valx, valy) denotes the move direction.
+     *
+     * @sign public this .dragDirection(degree)
+     * @param degree - A number, the degree (clockwise) of the move direction with respect to the x axis.
+     * Specify the dragging direction.
+     *
+     * @example
+     * ~~~
+     * this.dragDirection()
+     * this.dragDirection({x:1, y:0}) //Horizontal
+     * this.dragDirection({x:0, y:1}) //Vertical
+     * // Note: because of the orientation of x and y axis,
+     * // this is 45 degree clockwise with respect to the x axis.
+     * this.dragDirection({x:1, y:1}) //45 degree.
+     * this.dragDirection(60) //60 degree.
+     * ~~~
+     */
+    dragDirection: function (dir) {
+        if (typeof dir === 'undefined') {
+            this._dir = null;
+        } else if (("" + parseInt(dir, 10)) == dir) { //dir is a number
+            this._dir = {
+                x: Math.cos(dir / 180 * Math.PI),
+                y: Math.sin(dir / 180 * Math.PI)
+            };
+        } else {
+            var r = Math.sqrt(dir.x * dir.x + dir.y * dir.y);
+            this._dir = {
+                x: dir.x / r,
+                y: dir.y / r
+            };
+        }
+    },
+
+
+    /**@
+     * #._startDrag
+     * @comp Draggable
+     * Internal method for starting a drag of an entity either programatically or via Mouse click
+     *
+     * @param e - a mouse event
+     */
+    _startDrag: function (e) {
+        this._origMouseDOMPos = Crafty.DOM.translate(e.clientX, e.clientY);
+        this._oldX = this._x;
+        this._oldY = this._y;
+        this._dragging = true;
+
+        Crafty.addEvent(this, Crafty.stage.elem, "mousemove", this._ondrag);
+        Crafty.addEvent(this, Crafty.stage.elem, "mouseup", this._onup);
+        this.trigger("StartDrag", e);
+    },
+
+    /**@
+     * #.stopDrag
+     * @comp Draggable
+     * @sign public this .stopDrag(void)
+     * @trigger StopDrag - Called right after the mouse listeners are removed
+     *
+     * Stop the entity from dragging. Essentially reproducing the drop.
+     *
+     * @see .startDrag
+     */
+    stopDrag: function () {
+        Crafty.removeEvent(this, Crafty.stage.elem, "mousemove", this._ondrag);
+        Crafty.removeEvent(this, Crafty.stage.elem, "mouseup", this._onup);
+
+        this._dragging = false;
+        this.trigger("StopDrag");
+        return this;
+    },
+
+    /**@
+     * #.startDrag
+     * @comp Draggable
+     * @sign public this .startDrag(void)
+     *
+     * Make the entity follow the mouse positions.
+     *
+     * @see .stopDrag
+     */
+    startDrag: function () {
+        if (!this._dragging) {
+            //Use the last known position of the mouse
+            this._startDrag(Crafty.lastEvent);
+        }
+        return this;
+    },
+
+    /**@
+     * #.enableDrag
+     * @comp Draggable
+     * @sign public this .enableDrag(void)
+     *
+     * Rebind the mouse events. Use if `.disableDrag` has been called.
+     *
+     * @see .disableDrag
+     */
+    enableDrag: function () {
+        this.bind("MouseDown", this._ondown);
+
+        Crafty.addEvent(this, Crafty.stage.elem, "mouseup", this._onup);
+        return this;
+    },
+
+    /**@
+     * #.disableDrag
+     * @comp Draggable
+     * @sign public this .disableDrag(void)
+     *
+     * Stops entity from being draggable. Reenable with `.enableDrag()`.
+     *
+     * @see .enableDrag
+     */
+    disableDrag: function () {
+        this.unbind("MouseDown", this._ondown);
+        if (this._dragging) {
+            this.stopDrag();
+        }
+        return this;
     }
-    else {
-      var r=Math.sqrt(dir.x * dir.x + dir.y * dir.y)
-			this._dir={
-        x: dir.x/r
-        , y: dir.y/r
-      };
-		}
-	},
-	
-	
-	/**@
-	* #._startDrag
-	* @comp Draggable
-	* Internal method for starting a drag of an entity either programatically or via Mouse click
-	*
-	* @param e - a mouse event
-	*/
-	_startDrag: function(e){
-		this._origMouseDOMPos = Crafty.DOM.translate(e.clientX, e.clientY);
-		this._oldX = this._x;
-		this._oldY = this._y;
-		this._dragging = true;
-
-		Crafty.addEvent(this, Crafty.stage.elem, "mousemove", this._ondrag);
-		Crafty.addEvent(this, Crafty.stage.elem, "mouseup", this._onup);
-		this.trigger("StartDrag", e);
-	},
-	
-	/**@
-	* #.stopDrag
-	* @comp Draggable
-	* @sign public this .stopDrag(void)
-	* @trigger StopDrag - Called right after the mouse listeners are removed
-	* 
-	* Stop the entity from dragging. Essentially reproducing the drop.
-	* 
-	* @see .startDrag
-	*/
-	stopDrag: function () {
-		Crafty.removeEvent(this, Crafty.stage.elem, "mousemove", this._ondrag);
-		Crafty.removeEvent(this, Crafty.stage.elem, "mouseup", this._onup);
-
-		this._dragging = false;
-		this.trigger("StopDrag");
-		return this;
-	},
-
-	/**@
-	* #.startDrag
-	* @comp Draggable
-	* @sign public this .startDrag(void)
-	* 
-	* Make the entity follow the mouse positions.
-	* 
-	* @see .stopDrag
-	*/
-	startDrag: function () {
-		if (!this._dragging) {
-			//Use the last known position of the mouse
-			this._startDrag(Crafty.lastEvent);
-		}
-		return this;
-	},
-
-	/**@
-	* #.enableDrag
-	* @comp Draggable
-	* @sign public this .enableDrag(void)
-	* 
-	* Rebind the mouse events. Use if `.disableDrag` has been called.
-	* 
-	* @see .disableDrag
-	*/
-	enableDrag: function () {
-		this.bind("MouseDown", this._ondown);
-
-		Crafty.addEvent(this, Crafty.stage.elem, "mouseup", this._onup);
-		return this;
-	},
-
-	/**@
-	* #.disableDrag
-	* @comp Draggable
-	* @sign public this .disableDrag(void)
-	* 
-	* Stops entity from being draggable. Reenable with `.enableDrag()`.
-	* 
-	* @see .enableDrag
-	*/
-	disableDrag: function () {
-		this.unbind("MouseDown", this._ondown);
-		if (this._dragging) {
-			this.stopDrag();
-		}
-		return this;
-	}
 });
 
 /**@
-* #Keyboard
-* @category Input
-* Give entities keyboard events (`keydown` and `keyup`).
-*/
+ * #Keyboard
+ * @category Input
+ * Give entities keyboard events (`keydown` and `keyup`).
+ */
 Crafty.c("Keyboard", {
-/**@
-	* #.isDown
-	* @comp Keyboard
-	* @sign public Boolean isDown(String keyName)
-	* @param keyName - Name of the key to check. See `Crafty.keys`.
-	* @sign public Boolean isDown(Number keyCode)
-	* @param keyCode - Key code in `Crafty.keys`.
-	* 
-	* Determine if a certain key is currently down.
-	* 
-	* @example
-	* ~~~
-	* entity.requires('Keyboard').bind('KeyDown', function () { if (this.isDown('SPACE')) jump(); });
-	* ~~~
-	* 
-	* @see Crafty.keys
-	*/
-	isDown: function (key) {
-		if (typeof key === "string") {
-			key = Crafty.keys[key];
-		}
-		return !!Crafty.keydown[key];
-	}
+    /**@
+     * #.isDown
+     * @comp Keyboard
+     * @sign public Boolean isDown(String keyName)
+     * @param keyName - Name of the key to check. See `Crafty.keys`.
+     * @sign public Boolean isDown(Number keyCode)
+     * @param keyCode - Key code in `Crafty.keys`.
+     *
+     * Determine if a certain key is currently down.
+     *
+     * @example
+     * ~~~
+     * entity.requires('Keyboard').bind('KeyDown', function () { if (this.isDown('SPACE')) jump(); });
+     * ~~~
+     *
+     * @see Crafty.keys
+     */
+    isDown: function (key) {
+        if (typeof key === "string") {
+            key = Crafty.keys[key];
+        }
+        return !!Crafty.keydown[key];
+    }
 });
 
 /**@
-* #Multiway
-* @category Input
-* Used to bind keys to directions and have the entity move accordingly
-* @trigger NewDirection - triggered when direction changes - { x:Number, y:Number } - New direction
-* @trigger Moved - triggered on movement on either x or y axis. If the entity has moved on both axes for diagonal movement the event is triggered twice - { x:Number, y:Number } - Old position
-*/
+ * #Multiway
+ * @category Input
+ * Used to bind keys to directions and have the entity move accordingly
+ * @trigger NewDirection - triggered when direction changes - { x:Number, y:Number } - New direction
+ * @trigger Moved - triggered on movement on either x or y axis. If the entity has moved on both axes for diagonal movement the event is triggered twice - { x:Number, y:Number } - Old position
+ */
 Crafty.c("Multiway", {
-	_speed: 3,
-
-  _keydown: function (e) {
-		if (this._keys[e.key]) {
-			this._movement.x = Math.round((this._movement.x + this._keys[e.key].x) * 1000) / 1000;
-			this._movement.y = Math.round((this._movement.y + this._keys[e.key].y) * 1000) / 1000;
-			this.trigger('NewDirection', this._movement);
-		}
-	},
-
-  _keyup: function (e) {
-		if (this._keys[e.key]) {
-			this._movement.x = Math.round((this._movement.x - this._keys[e.key].x) * 1000) / 1000;
-			this._movement.y = Math.round((this._movement.y - this._keys[e.key].y) * 1000) / 1000;
-			this.trigger('NewDirection', this._movement);
-		}
-	},
-
-  _enterframe: function () {
-		if (this.disableControls) return;
-
-		if (this._movement.x !== 0) {
-			this.x += this._movement.x;
-			this.trigger('Moved', { x: this.x - this._movement.x, y: this.y });
-		}
-		if (this._movement.y !== 0) {
-			this.y += this._movement.y;
-			this.trigger('Moved', { x: this.x, y: this.y - this._movement.y });
-		}
-	},
-
-	/**@
-	* #.multiway
-	* @comp Multiway
-	* @sign public this .multiway([Number speed,] Object keyBindings )
-	* @param speed - Amount of pixels to move the entity whilst a key is down
-	* @param keyBindings - What keys should make the entity go in which direction. Direction is specified in degrees
-	* Constructor to initialize the speed and keyBindings. Component will listen to key events and move the entity appropriately.
-	*
-	* When direction changes a NewDirection event is triggered with an object detailing the new direction: {x: x_movement, y: y_movement}
-	* When entity has moved on either x- or y-axis a Moved event is triggered with an object specifying the old position {x: old_x, y: old_y}
-	* 
-	* @example
-	* ~~~
-	* this.multiway(3, {UP_ARROW: -90, DOWN_ARROW: 90, RIGHT_ARROW: 0, LEFT_ARROW: 180});
-	* this.multiway({x:3,y:1.5}, {UP_ARROW: -90, DOWN_ARROW: 90, RIGHT_ARROW: 0, LEFT_ARROW: 180});
-	* this.multiway({W: -90, S: 90, D: 0, A: 180});
-	* ~~~
-	*/
-	multiway: function (speed, keys) {
-		this._keyDirection = {};
-		this._keys = {};
-		this._movement = { x: 0, y: 0 };
-		this._speed = { x: 3, y: 3 };
-
-		if (keys) {
-			if (speed.x && speed.y) {
-				this._speed.x = speed.x;
-				this._speed.y = speed.y;
-			} else {
-				this._speed.x = speed;
-				this._speed.y = speed;
-			}
-		} else {
-			keys = speed;
-		}
-
-		this._keyDirection = keys;
-		this.speed(this._speed);
-
-		this.disableControl();
-		this.enableControl();
-
-		//Apply movement if key is down when created
-		for (var k in keys) {
-			if (Crafty.keydown[Crafty.keys[k]]) {
-				this.trigger("KeyDown", { key: Crafty.keys[k] });
-			}
-		}
-
-		return this;
-	},
-
-	/**@
-	* #.enableControl
-	* @comp Multiway
-	* @sign public this .enableControl()
-	* 
-	* Enable the component to listen to key events.
-	*
-	* @example
-	* ~~~
-    * this.enableControl();
-	* ~~~
-	*/
-  enableControl: function() {
-		this.bind("KeyDown", this._keydown)
-		.bind("KeyUp", this._keyup)
-		.bind("EnterFrame", this._enterframe);
-		return this;
-  },
-
-	/**@
-	* #.disableControl
-	* @comp Multiway
-	* @sign public this .disableControl()
-	* 
-	* Disable the component to listen to key events.
-	*
-	* @example
-	* ~~~
-    * this.disableControl();
-	* ~~~
-	*/
-
-  disableControl: function() {
-		this.unbind("KeyDown", this._keydown)
-		.unbind("KeyUp", this._keyup)
-		.unbind("EnterFrame", this._enterframe);
-		return this;
-  },
-
-	speed: function (speed) {
-		for (var k in this._keyDirection) {
-			var keyCode = Crafty.keys[k] || k;
-			this._keys[keyCode] = {
-				x: Math.round(Math.cos(this._keyDirection[k] * (Math.PI / 180)) * 1000 * speed.x) / 1000,
-				y: Math.round(Math.sin(this._keyDirection[k] * (Math.PI / 180)) * 1000 * speed.y) / 1000
-			};
-		}
-		return this;
-	}
+    _speed: 3,
+
+    _keydown: function (e) {
+        if (this._keys[e.key]) {
+            this._movement.x = Math.round((this._movement.x + this._keys[e.key].x) * 1000) / 1000;
+            this._movement.y = Math.round((this._movement.y + this._keys[e.key].y) * 1000) / 1000;
+            this.trigger('NewDirection', this._movement);
+        }
+    },
+
+    _keyup: function (e) {
+        if (this._keys[e.key]) {
+            this._movement.x = Math.round((this._movement.x - this._keys[e.key].x) * 1000) / 1000;
+            this._movement.y = Math.round((this._movement.y - this._keys[e.key].y) * 1000) / 1000;
+            this.trigger('NewDirection', this._movement);
+        }
+    },
+
+    _enterframe: function () {
+        if (this.disableControls) return;
+
+        if (this._movement.x !== 0) {
+            this.x += this._movement.x;
+            this.trigger('Moved', {
+                x: this.x - this._movement.x,
+                y: this.y
+            });
+        }
+        if (this._movement.y !== 0) {
+            this.y += this._movement.y;
+            this.trigger('Moved', {
+                x: this.x,
+                y: this.y - this._movement.y
+            });
+        }
+    },
+
+    _initializeControl: function () {
+        return this.unbind("KeyDown", this._keydown)
+            .unbind("KeyUp", this._keyup)
+            .unbind("EnterFrame", this._enterframe)
+            .bind("KeyDown", this._keydown)
+            .bind("KeyUp", this._keyup)
+            .bind("EnterFrame", this._enterframe);
+    },
+
+    /**@
+     * #.multiway
+     * @comp Multiway
+     * @sign public this .multiway([Number speed,] Object keyBindings )
+     * @param speed - Amount of pixels to move the entity whilst a key is down
+     * @param keyBindings - What keys should make the entity go in which direction. Direction is specified in degrees
+     * Constructor to initialize the speed and keyBindings. Component will listen to key events and move the entity appropriately.
+     *
+     * When direction changes a NewDirection event is triggered with an object detailing the new direction: {x: x_movement, y: y_movement}
+     * When entity has moved on either x- or y-axis a Moved event is triggered with an object specifying the old position {x: old_x, y: old_y}
+     *
+     * @example
+     * ~~~
+     * this.multiway(3, {UP_ARROW: -90, DOWN_ARROW: 90, RIGHT_ARROW: 0, LEFT_ARROW: 180});
+     * this.multiway({x:3,y:1.5}, {UP_ARROW: -90, DOWN_ARROW: 90, RIGHT_ARROW: 0, LEFT_ARROW: 180});
+     * this.multiway({W: -90, S: 90, D: 0, A: 180});
+     * ~~~
+     */
+    multiway: function (speed, keys) {
+        this._keyDirection = {};
+        this._keys = {};
+        this._movement = {
+            x: 0,
+            y: 0
+        };
+        this._speed = {
+            x: 3,
+            y: 3
+        };
+
+        if (keys) {
+            if (speed.x !== undefined && speed.y !== undefined) {
+                this._speed.x = speed.x;
+                this._speed.y = speed.y;
+            } else {
+                this._speed.x = speed;
+                this._speed.y = speed;
+            }
+        } else {
+            keys = speed;
+        }
+
+        this._keyDirection = keys;
+        this.speed(this._speed);
+
+        this._initializeControl();
+
+        //Apply movement if key is down when created
+        for (var k in keys) {
+            if (Crafty.keydown[Crafty.keys[k]]) {
+                this.trigger("KeyDown", {
+                    key: Crafty.keys[k]
+                });
+            }
+        }
+
+        return this;
+    },
+
+    /**@
+     * #.enableControl
+     * @comp Multiway
+     * @sign public this .enableControl()
+     *
+     * Enable the component to listen to key events.
+     *
+     * @example
+     * ~~~
+     * this.enableControl();
+     * ~~~
+     */
+    enableControl: function () {
+        this.disableControls = false;
+        return this;
+    },
+
+    /**@
+     * #.disableControl
+     * @comp Multiway
+     * @sign public this .disableControl()
+     *
+     * Disable the component to listen to key events.
+     *
+     * @example
+     * ~~~
+     * this.disableControl();
+     * ~~~
+     */
+
+    disableControl: function () {
+        this.disableControls = true;
+        return this;
+    },
+
+    speed: function (speed) {
+        for (var k in this._keyDirection) {
+            var keyCode = Crafty.keys[k] || k;
+            this._keys[keyCode] = {
+                x: Math.round(Math.cos(this._keyDirection[k] * (Math.PI / 180)) * 1000 * speed.x) / 1000,
+                y: Math.round(Math.sin(this._keyDirection[k] * (Math.PI / 180)) * 1000 * speed.y) / 1000
+            };
+        }
+        return this;
+    }
 });
 
 /**@
-* #Fourway
-* @category Input
-* Move an entity in four directions by using the
-* arrow keys or `W`, `A`, `S`, `D`.
-*/
+ * #Fourway
+ * @category Input
+ * Move an entity in four directions by using the
+ * arrow keys or `W`, `A`, `S`, `D`.
+ */
 Crafty.c("Fourway", {
 
-	init: function () {
-		this.requires("Multiway");
-	},
-
-	/**@
-	* #.fourway
-	* @comp Fourway
-	* @sign public this .fourway(Number speed)
-	* @param speed - Amount of pixels to move the entity whilst a key is down
-	* Constructor to initialize the speed. Component will listen for key events and move the entity appropriately.
-	* This includes `Up Arrow`, `Right Arrow`, `Down Arrow`, `Left Arrow` as well as `W`, `A`, `S`, `D`.
-	*
-	* When direction changes a NewDirection event is triggered with an object detailing the new direction: {x: x_movement, y: y_movement}
-	* When entity has moved on either x- or y-axis a Moved event is triggered with an object specifying the old position {x: old_x, y: old_y}
-	*
-	* The key presses will move the entity in that direction by the speed passed in the argument.
-	* 
-	* @see Multiway
-	*/
-	fourway: function (speed) {
-		this.multiway(speed, {
-			UP_ARROW: -90,
-			DOWN_ARROW: 90,
-			RIGHT_ARROW: 0,
-			LEFT_ARROW: 180,
-			W: -90,
-			S: 90,
-			D: 0,
-			A: 180,
-			Z: -90,
-			Q: 180
-		});
-
-		return this;
-	}
+    init: function () {
+        this.requires("Multiway");
+    },
+
+    /**@
+     * #.fourway
+     * @comp Fourway
+     * @sign public this .fourway(Number speed)
+     * @param speed - Amount of pixels to move the entity whilst a key is down
+     * Constructor to initialize the speed. Component will listen for key events and move the entity appropriately.
+     * This includes `Up Arrow`, `Right Arrow`, `Down Arrow`, `Left Arrow` as well as `W`, `A`, `S`, `D`.
+     *
+     * When direction changes a NewDirection event is triggered with an object detailing the new direction: {x: x_movement, y: y_movement}
+     * When entity has moved on either x- or y-axis a Moved event is triggered with an object specifying the old position {x: old_x, y: old_y}
+     *
+     * The key presses will move the entity in that direction by the speed passed in the argument.
+     *
+     * @see Multiway
+     */
+    fourway: function (speed) {
+        this.multiway(speed, {
+            UP_ARROW: -90,
+            DOWN_ARROW: 90,
+            RIGHT_ARROW: 0,
+            LEFT_ARROW: 180,
+            W: -90,
+            S: 90,
+            D: 0,
+            A: 180,
+            Z: -90,
+            Q: 180
+        });
+
+        return this;
+    }
 });
 
 /**@
-* #Twoway
-* @category Input
-* Move an entity left or right using the arrow keys or `D` and `A` and jump using up arrow or `W`.
-*
-* When direction changes a NewDirection event is triggered with an object detailing the new direction: {x: x_movement, y: y_movement}. This is consistent with Fourway and Multiway components.
-* When entity has moved on x-axis a Moved event is triggered with an object specifying the old position {x: old_x, y: old_y}
-*/
+ * #Twoway
+ * @category Input
+ * Move an entity left or right using the arrow keys or `D` and `A` and jump using up arrow or `W`.
+ *
+ * When direction changes a NewDirection event is triggered with an object detailing the new direction: {x: x_movement, y: y_movement}. This is consistent with Fourway and Multiway components.
+ * When entity has moved on x-axis a Moved event is triggered with an object specifying the old position {x: old_x, y: old_y}
+ */
 Crafty.c("Twoway", {
-	_speed: 3,
-	_up: false,
-
-	init: function () {
-		this.requires("Fourway, Keyboard");
-	},
-
-	/**@
-	* #.twoway
-	* @comp Twoway
-	* @sign public this .twoway(Number speed[, Number jump])
-	* @param speed - Amount of pixels to move left or right
-	* @param jump - Vertical jump speed
-	* 
-	* Constructor to initialize the speed and power of jump. Component will
-	* listen for key events and move the entity appropriately. This includes
-	* ~~~
-	* `Up Arrow`, `Right Arrow`, `Left Arrow` as well as W, A, D. Used with the
-	* `gravity` component to simulate jumping.
-	* ~~~
-	* 
-	* The key presses will move the entity in that direction by the speed passed in
-	* the argument. Pressing the `Up Arrow` or `W` will cause the entity to jump.
-	* 
-	* @see Gravity, Fourway
-	*/
-	twoway: function (speed, jump) {
-
-		this.multiway(speed, {
-			RIGHT_ARROW: 0,
-			LEFT_ARROW: 180,
-			D: 0,
-			A: 180,
-			Q: 180
-		});
-
-		if (speed) this._speed = speed;
-		if (arguments.length<2) jump = this._speed * 2;	
-
-		this.bind("EnterFrame", function () {
-			if (this.disableControls) return;
-			if (this._up) {
-				this.y -= jump;
-				this._falling = true;
-			}
-		}).bind("KeyDown", function () {
-			if (this.isDown("UP_ARROW") || this.isDown("W") || this.isDown("Z")) this._up = true;
-		});
-
-		return this;
-	}
+    _speed: 3,
+    _up: false,
+
+    init: function () {
+        this.requires("Fourway, Keyboard");
+    },
+
+    /**@
+     * #.twoway
+     * @comp Twoway
+     * @sign public this .twoway(Number speed[, Number jump])
+     * @param speed - Amount of pixels to move left or right
+     * @param jump - Vertical jump speed
+     *
+     * Constructor to initialize the speed and power of jump. Component will
+     * listen for key events and move the entity appropriately. This includes
+     * ~~~
+     * `Up Arrow`, `Right Arrow`, `Left Arrow` as well as W, A, D. Used with the
+     * `gravity` component to simulate jumping.
+     * ~~~
+     *
+     * The key presses will move the entity in that direction by the speed passed in
+     * the argument. Pressing the `Up Arrow` or `W` will cause the entity to jump.
+     *
+     * @see Gravity, Fourway
+     */
+    twoway: function (speed, jump) {
+
+        this.multiway(speed, {
+            RIGHT_ARROW: 0,
+            LEFT_ARROW: 180,
+            D: 0,
+            A: 180,
+            Q: 180
+        });
+
+        if (speed) this._speed = speed;
+        if (arguments.length < 2){
+          this._jumpSpeed = this._speed * 2;
+        } else{
+          this._jumpSpeed = jump;
+        }
+
+        this.bind("EnterFrame", function () {
+            if (this.disableControls) return;
+            if (this._up) {
+                this.y -= this._jumpSpeed;
+                this._falling = true;
+            }
+        }).bind("KeyDown", function (e) {
+            if (e.key === Crafty.keys.UP_ARROW || e.key === Crafty.keys.W || e.key === Crafty.keys.Z)
+                this._up = true;
+        });
+
+        return this;
+    }
 });
diff --git a/src/core.js b/src/core.js
index 7602fdc8..f89b358c 100644
--- a/src/core.js
+++ b/src/core.js
@@ -1,92 +1,73 @@
-(function (window, initComponents, undefined) {
-    /**@
-    * #Crafty
-    * @category Core
-    * Select a set of or single entities by components or an entity's ID.
-    *
-    * Crafty uses syntax similar to jQuery by having a selector engine to select entities by their components.
-    *
-    * If there is more than one match, the return value is an Array-like object listing the ID numbers of each matching entity. If there is exactly one match, the entity itself is returned. If you're not sure how many matches to expect, check the number of matches via Crafty(...).length. Alternatively, use Crafty(...).each(...), which works in all cases.
-    *
-    * @example
-    * ~~~
-    *    Crafty("MyComponent")
-    *    Crafty("Hello 2D Component")
-    *    Crafty("Hello, 2D, Component")
-    * ~~~
-    * 
-    * The first selector will return all entities that have the component `MyComponent`. The second will return all entities that have `Hello` and `2D` and `Component` whereas the last will return all entities that have at least one of those components (or).
-    *
-    * ~~~
-    *   Crafty("*")
-    * ~~~
-    * Passing `*` will select all entities.
-    *
-    * ~~~
-    *   Crafty(1)
-    * ~~~
-    * Passing an integer will select the entity with that `ID`.
-    *
-    * Finding out the `ID` of an entity can be done by returning the property `0`.
-    * ~~~
-    *    var ent = Crafty.e("2D");
-    *    ent[0]; //ID
-    * ~~~
-    */
-    var Crafty = function (selector) {
-        return new Crafty.fn.init(selector);
-    },
-
-    GUID, FPS, frame, components, entities, handlers, onloads, tick, requestID,
-	noSetter, loops, milliSecPerFrame, nextGameTick, slice, rlist, rspace,
-
-	initState = function () {
-    	GUID = 1; //GUID for entity IDs
-    	FPS = 50;
-    	frame = 1;
-
-    	components = {}; //map of components and their functions
-    	entities = {}; //map of entities and their data
-    	handlers = {}; //global event handlers
-    	onloads = []; //temporary storage of onload handlers
-    	tick;
-
-    	/*
-		* `window.requestAnimationFrame` or its variants is called for animation.
-		* `.requestID` keeps a record of the return value previous `window.requestAnimationFrame` call.
-		* This is an internal variable. Used to stop frame.
-		*/
-    	requestID;
-
-    	noSetter;
-
-    	loops = 0;
-    	milliSecPerFrame = 1000 / FPS;
-    	nextGameTick = (new Date).getTime();
-
-    	slice = Array.prototype.slice;
-    	rlist = /\s*,\s*/;
-    	rspace = /\s+/;
+var version = require('./version');
+
+/**@
+ * #Crafty
+ * @category Core
+ * Select a set of or single entities by components or an entity's ID.
+ *
+ * Crafty uses syntax similar to jQuery by having a selector engine to select entities by their components.
+ *
+ * If there is more than one match, the return value is an Array-like object listing the ID numbers of each matching entity. If there is exactly one match, the entity itself is returned. If you're not sure how many matches to expect, check the number of matches via Crafty(...).length. Alternatively, use Crafty(...).each(...), which works in all cases.
+ *
+ * @example
+ * ~~~
+ *    Crafty("MyComponent")
+ *    Crafty("Hello 2D Component")
+ *    Crafty("Hello, 2D, Component")
+ * ~~~
+ *
+ * The first selector will return all entities that have the component `MyComponent`. The second will return all entities that have `Hello` and `2D` and `Component` whereas the last will return all entities that have at least one of those components (or).
+ *
+ * ~~~
+ *   Crafty("*")
+ * ~~~
+ * Passing `*` will select all entities.
+ *
+ * ~~~
+ *   Crafty(1)
+ * ~~~
+ * Passing an integer will select the entity with that `ID`.
+ */
+ 
+var Crafty = function (selector) {
+    return new Crafty.fn.init(selector);
+},
+    // Internal variables
+    GUID, frame, components, entities, handlers, onloads,
+    noSetter, slice, rlist, rspace, milliSecPerFrame;
+
+
+    initState = function () {
+        GUID = 1; //GUID for entity IDs
+
+        components = {}; //map of components and their functions
+        entities = {}; //map of entities and their data
+        handlers = {}; //global event handlers
+        onloads = []; //temporary storage of onload handlers
+
+        slice = Array.prototype.slice;
+        rlist = /\s*,\s*/;
+        rspace = /\s+/;
     };
 
-    initState();
-
-    /**@
-    * #Crafty Core
-    * @category Core
-    * @trigger NewEntityName - After setting new name for entity - String - entity name
-    * @trigger NewComponent - when a new component is added to the entity - String - Component
-    * @trigger RemoveComponent - when a component is removed from the entity - String - Component
-    * @trigger Remove - when the entity is removed by calling .destroy()
-    * 
-    * Set of methods added to every single entity.
-    */
-    Crafty.fn = Crafty.prototype = {
-
-        init: function (selector) {
-            //select entities by component
-            if (typeof selector === "string") {
-                var elem = 0, //index elements
+initState();
+
+/**@
+ * #Crafty Core
+ * @category Core
+ * @trigger NewEntityName - After setting new name for entity - String - entity name
+ * @trigger NewComponent - when a new component is added to the entity - String - Component
+ * @trigger RemoveComponent - when a component is removed from the entity - String - Component
+ * @trigger Remove - when the entity is removed by calling .destroy()
+ *
+ * Set of methods added to every single entity.
+ */
+Crafty.fn = Crafty.prototype = {
+
+    init: function (selector) {
+        //select entities by component
+        if (typeof selector === "string") {
+            var elem = 0, //index elements
                 e, //entity forEach
                 current,
                 and = false, //flags for multiple
@@ -96,800 +77,916 @@
                 score,
                 i, l;
 
-                if (selector === '*') {
-                    i = 0;
-                    for (e in entities) {
-                        // entities is something like {2:entity2, 3:entity3, 11:entity11, ...}
-                        // The for...in loop sets e to "2", "3", "11", ... i.e. all
-                        // the entity ID numbers. e is a string, so +e converts to number type.
-                        this[i] = +e;
-                        i++;
-                    }
-                    this.length = i;
-                    // if there's only one entity, return the actual entity
-                    if (i === 1) {
-                        return entities[this[0]];
-                    }
-                    return this;
+            if (selector === '*') {
+                i = 0;
+                for (e in entities) {
+                    // entities is something like {2:entity2, 3:entity3, 11:entity11, ...}
+                    // The for...in loop sets e to "2", "3", "11", ... i.e. all
+                    // the entity ID numbers. e is a string, so +e converts to number type.
+                    this[i] = +e;
+                    i++;
                 }
-
-                //multiple components OR
-                if (selector.indexOf(',') !== -1) {
-                    or = true;
-                    del = rlist;
-                    //deal with multiple components AND
-                } else if (selector.indexOf(' ') !== -1) {
-                    and = true;
-                    del = rspace;
+                this.length = i;
+                // if there's only one entity, return the actual entity
+                if (i === 1) {
+                    return entities[this[0]];
                 }
+                return this;
+            }
 
-                //loop over entities
-                for (e in entities) {
-                    if (!entities.hasOwnProperty(e)) continue; //skip
-                    current = entities[e];
+            //multiple components OR
+            if (selector.indexOf(',') !== -1) {
+                or = true;
+                del = rlist;
+                //deal with multiple components AND
+            } else if (selector.indexOf(' ') !== -1) {
+                and = true;
+                del = rspace;
+            }
 
-                    if (and || or) { //multiple components
-                        comps = selector.split(del);
-                        i = 0;
-                        l = comps.length;
-                        score = 0;
+            //loop over entities
+            for (e in entities) {
+                if (!entities.hasOwnProperty(e)) continue; //skip
+                current = entities[e];
 
-                        for (; i < l; i++) //loop over components
-                            if (current.__c[comps[i]]) score++; //if component exists add to score
+                if (and || or) { //multiple components
+                    comps = selector.split(del);
+                    i = 0;
+                    l = comps.length;
+                    score = 0;
+
+                    for (; i < l; i++) //loop over components
+                        if (current.__c[comps[i]]) score++; //if component exists add to score
 
                         //if anded comps and has all OR ored comps and at least 1
-                        if (and && score === l || or && score > 0) this[elem++] = +e;
+                    if (and && score === l || or && score > 0) this[elem++] = +e;
 
-                    } else if (current.__c[selector]) this[elem++] = +e; //convert to int
-                }
+                } else if (current.__c[selector]) this[elem++] = +e; //convert to int
+            }
+
+            //extend all common components
+            if (elem > 0 && !and && !or) this.extend(components[selector]);
+            if (comps && and)
+                for (i = 0; i < l; i++) this.extend(components[comps[i]]);
 
-                //extend all common components
-                if (elem > 0 && !and && !or) this.extend(components[selector]);
-                if (comps && and) for (i = 0; i < l; i++) this.extend(components[comps[i]]);
+            this.length = elem; //length is the last index (already incremented)
 
-                this.length = elem; //length is the last index (already incremented)
-				
-				// if there's only one entity, return the actual entity
-				if (elem === 1) {
-					return entities[this[elem-1]];
-				}
+            // if there's only one entity, return the actual entity
+            if (elem === 1) {
+                return entities[this[elem - 1]];
+            }
 
-            } else { //Select a specific entity
+        } else { //Select a specific entity
 
-                if (!selector) { //nothin passed creates God entity
-                    selector = 0;
-                    if (!(selector in entities)) entities[selector] = this;
-                }
+            if (!selector) { //nothin passed creates God entity
+                selector = 0;
+                if (!(selector in entities)) entities[selector] = this;
+            }
 
-                //if not exists, return undefined
-                if (!(selector in entities)) {
-                    this.length = 0;
-                    return this;
-                }
+            //if not exists, return undefined
+            if (!(selector in entities)) {
+                this.length = 0;
+                return this;
+            }
 
-                this[0] = selector;
-                this.length = 1;
+            this[0] = selector;
+            this.length = 1;
 
-                //update from the cache
-                if (!this.__c) this.__c = {};
+            //update from the cache
+            if (!this.__c) this.__c = {};
 
-                //update to the cache if NULL
-                if (!entities[selector]) entities[selector] = this;
-                return entities[selector]; //return the cached selector
-            }
+            //update to the cache if NULL
+            if (!entities[selector]) entities[selector] = this;
+            return entities[selector]; //return the cached selector
+        }
 
-            return this;
-        },
-
-        /**@
-        * #.setName
-        * @comp Crafty Core
-        * @sign public this .setName(String name)
-        * @param name - A human readable name for debugging purposes.
-        *
-        * @example
-        * ~~~
-        * this.setName("Player");
-        * ~~~
-        */
-        setName: function (name) {
-            var entityName = String(name);
-
-            this._entityName = entityName;
-
-            this.trigger("NewEntityName", entityName);
-            return this;
-        },
-
-        /**@
-        * #.addComponent
-        * @comp Crafty Core
-        * @sign public this .addComponent(String componentList)
-        * @param componentList - A string of components to add separated by a comma `,`
-        * @sign public this .addComponent(String Component1[, .., String ComponentN])
-        * @param Component# - Component ID to add.
-        * Adds a component to the selected entities or entity.
-        *
-        * Components are used to extend the functionality of entities.
-        * This means it will copy properties and assign methods to
-        * augment the functionality of the entity.
-        *
-        * There are multiple methods of adding components. Passing a
-        * string with a list of component names or passing multiple
-        * arguments with the component names.
-        *
-        * If the component has a function named `init` it will be called.
-        *
-        * @example
-        * ~~~
-        * this.addComponent("2D, Canvas");
-        * this.addComponent("2D", "Canvas");
-        * ~~~
-        */
-        addComponent: function (id) {
-            var uninit = [], c = 0, ul, //array of components to init
-            i = 0, l, comps, comp;
-
-            //add multiple arguments
-            if (arguments.length > 1) {
-                l = arguments.length;
-                for (; i < l; i++) {
-                    uninit.push(arguments[i]);
-                }
-                //split components if contains comma
-            } else if (id.indexOf(',') !== -1) {
-                comps = id.split(rlist);
-                l = comps.length;
-                for (; i < l; i++) {
-                    uninit.push(comps[i]);
-                }
-                //single component passed
-            } else {
-                uninit.push(id);
+        return this;
+    },
+
+    /**@
+     * #.setName
+     * @comp Crafty Core
+     * @sign public this .setName(String name)
+     * @param name - A human readable name for debugging purposes.
+     *
+     * @example
+     * ~~~
+     * this.setName("Player");
+     * ~~~
+     */
+    setName: function (name) {
+        var entityName = String(name);
+
+        this._entityName = entityName;
+
+        this.trigger("NewEntityName", entityName);
+        return this;
+    },
+
+    /**@
+     * #.addComponent
+     * @comp Crafty Core
+     * @sign public this .addComponent(String componentList)
+     * @param componentList - A string of components to add separated by a comma `,`
+     * @sign public this .addComponent(String Component1[, .., String ComponentN])
+     * @param Component# - Component ID to add.
+     * Adds a component to the selected entities or entity.
+     *
+     * Components are used to extend the functionality of entities.
+     * This means it will copy properties and assign methods to
+     * augment the functionality of the entity.
+     *
+     * For adding multiple components, you can either pass a string with
+     * all the component names (separated by commas), or pass each component name as
+     * an argument.
+     *
+     * If the component has a function named `init` it will be called.
+     *
+     * If the entity already has the component, the component is skipped (nothing happens).
+     *
+     * @example
+     * ~~~
+     * this.addComponent("2D, Canvas");
+     * this.addComponent("2D", "Canvas");
+     * ~~~
+     */
+    addComponent: function (id) {
+        var uninit = [],
+            c = 0,
+            ul, //array of components to init
+            i = 0,
+            l, comps, comp;
+
+        //add multiple arguments
+        if (arguments.length > 1) {
+            l = arguments.length;
+            for (; i < l; i++) {
+                uninit.push(arguments[i]);
             }
+            //split components if contains comma
+        } else if (id.indexOf(',') !== -1) {
+            comps = id.split(rlist);
+            l = comps.length;
+            for (; i < l; i++) {
+                uninit.push(comps[i]);
+            }
+            //single component passed
+        } else {
+            uninit.push(id);
+        }
 
-            //extend the components
-            ul = uninit.length;
-            for (; c < ul; c++) {
-                if (this.__c[uninit[c]] == true)
-                    continue
-                this.__c[uninit[c]] = true
-                comp = components[uninit[c]];
-                this.extend(comp);
-                //if constructor, call it
-                if (comp && "init" in comp) {
-                    comp.init.call(this);
-                }
+        //extend the components
+        ul = uninit.length;
+        for (; c < ul; c++) {
+            if (this.__c[uninit[c]] === true)
+                continue;
+            this.__c[uninit[c]] = true;
+            comp = components[uninit[c]];
+            this.extend(comp);
+            //if constructor, call it
+            if (comp && "init" in comp) {
+                comp.init.call(this);
             }
+        }
 
-            this.trigger("NewComponent", uninit);
-            return this;
-        },
-
-        /**@
-        * #.toggleComponent
-        * @comp Crafty Core
-        * @sign public this .toggleComponent(String ComponentList)
-        * @param ComponentList - A string of components to add or remove separated by a comma `,`
-        * @sign public this .toggleComponent(String Component1[, .., String componentN])
-        * @param Component# - Component ID to add or remove.
-        * Add or Remove Components from an entity.
-        * 
-        * @example
-        * ~~~
-        * var e = Crafty.e("2D,DOM,Test");
-        * e.toggleComponent("Test,Test2"); //Remove Test, add Test2
-        * e.toggleComponent("Test,Test2"); //Add Test, remove Test2
-        * ~~~
-        *
-        * ~~~
-        * var e = Crafty.e("2D,DOM,Test");
-        * e.toggleComponent("Test","Test2"); //Remove Test, add Test2
-        * e.toggleComponent("Test","Test2"); //Add Test, remove Test2
-        * e.toggleComponent("Test");         //Remove Test
-        * ~~~
-        */
-       toggleComponent:function(toggle){
-            var i = 0, l, comps;
-            if (arguments.length > 1) {
-                l = arguments.length;
-                        
-                for (; i < l; i++) {
-                    if(this.has(arguments[i])){ 
-                        this.removeComponent(arguments[i]);
-                    }else{
-                        this.addComponent(arguments[i]);
-                    }
+        this.trigger("NewComponent", uninit);
+        return this;
+    },
+
+    /**@
+     * #.toggleComponent
+     * @comp Crafty Core
+     * @sign public this .toggleComponent(String ComponentList)
+     * @param ComponentList - A string of components to add or remove separated by a comma `,`
+     * @sign public this .toggleComponent(String Component1[, .., String componentN])
+     * @param Component# - Component ID to add or remove.
+     * Add or Remove Components from an entity.
+     *
+     * @example
+     * ~~~
+     * var e = Crafty.e("2D,DOM,Test");
+     * e.toggleComponent("Test,Test2"); //Remove Test, add Test2
+     * e.toggleComponent("Test,Test2"); //Add Test, remove Test2
+     * ~~~
+     *
+     * ~~~
+     * var e = Crafty.e("2D,DOM,Test");
+     * e.toggleComponent("Test","Test2"); //Remove Test, add Test2
+     * e.toggleComponent("Test","Test2"); //Add Test, remove Test2
+     * e.toggleComponent("Test");         //Remove Test
+     * ~~~
+     */
+    toggleComponent: function (toggle) {
+        var i = 0,
+            l, comps;
+        if (arguments.length > 1) {
+            l = arguments.length;
+
+            for (; i < l; i++) {
+                if (this.has(arguments[i])) {
+                    this.removeComponent(arguments[i]);
+                } else {
+                    this.addComponent(arguments[i]);
                 }
+            }
             //split components if contains comma
-            } else if (toggle.indexOf(',') !== -1) {
-                comps = toggle.split(rlist);
-                l = comps.length;
-                for (; i < l; i++) {
-                    if(this.has(comps[i])){ 
-                        this.removeComponent(comps[i]);
-                    }else{
-                        this.addComponent(comps[i]);
-                    }
+        } else if (toggle.indexOf(',') !== -1) {
+            comps = toggle.split(rlist);
+            l = comps.length;
+            for (; i < l; i++) {
+                if (this.has(comps[i])) {
+                    this.removeComponent(comps[i]);
+                } else {
+                    this.addComponent(comps[i]);
                 }
-                
+            }
+
             //single component passed
+        } else {
+            if (this.has(toggle)) {
+                this.removeComponent(toggle);
             } else {
-                if(this.has(toggle)){ 
-                    this.removeComponent(toggle);
-                }else{
-                    this.addComponent(toggle);
-                }
+                this.addComponent(toggle);
             }
+        }
 
-            return this;
-        },
-
-        /**@
-        * #.requires
-        * @comp Crafty Core
-        * @sign public this .requires(String componentList)
-        * @param componentList - List of components that must be added
-        * 
-        * Makes sure the entity has the components listed. If the entity does not
-        * have the component, it will add it.
-        * 
-        * @see .addComponent
-        */
-        requires: function (list) {
-            var comps = list.split(rlist),
-            i = 0, l = comps.length,
-            comp;
-
-            //loop over the list of components and add if needed
-            for (; i < l; ++i) {
-                comp = comps[i];
-                if (!this.has(comp)) this.addComponent(comp);
-            }
+        return this;
+    },
 
-            return this;
-        },
-
-        /**@
-        * #.removeComponent
-        * @comp Crafty Core
-        * @sign public this .removeComponent(String Component[, soft])
-        * @param component - Component to remove
-        * @param soft - Whether to soft remove it (defaults to `true`)
-        *
-        * Removes a component from an entity. A soft remove (the default) will only
-        * refrain `.has()` from returning true. Hard will remove all
-        * associated properties and methods.
-        *
-        * @example
-        * ~~~
-        * var e = Crafty.e("2D,DOM,Test");
-        * e.removeComponent("Test");        //Soft remove Test component
-        * e.removeComponent("Test", false); //Hard remove Test component
-        * ~~~
-        */
-        removeComponent: function (id, soft) {
-            if (soft === false) {
-                var props = components[id], prop;
-                for (prop in props) {
-                    delete this[prop];
-                }
+    /**@
+     * #.requires
+     * @comp Crafty Core
+     * @sign public this .requires(String componentList)
+     * @param componentList - List of components that must be added
+     *
+     * Makes sure the entity has the components listed. If the entity does not
+     * have the component, it will add it.
+     *
+     * (In the current version of Crafty, this function behaves exactly the same
+     * as `addComponent`. By convention, developers have used `requires` for
+     * component dependencies -- i.e. to indicate specifically that one component
+     * will only work properly if another component is present -- and used
+     * `addComponent` in all other situations.)
+     *
+     * @see .addComponent
+     */
+    requires: function (list) {
+        return this.addComponent(list);
+    },
+
+    /**@
+     * #.removeComponent
+     * @comp Crafty Core
+     * @sign public this .removeComponent(String Component[, soft])
+     * @param component - Component to remove
+     * @param soft - Whether to soft remove it (defaults to `true`)
+     *
+     * Removes a component from an entity. A soft remove (the default) will only
+     * refrain `.has()` from returning true. Hard will remove all
+     * associated properties and methods.
+     *
+     * @example
+     * ~~~
+     * var e = Crafty.e("2D,DOM,Test");
+     * e.removeComponent("Test");        //Soft remove Test component
+     * e.removeComponent("Test", false); //Hard remove Test component
+     * ~~~
+     */
+    removeComponent: function (id, soft) {
+        var comp = components[id];
+        this.trigger("RemoveComponent", id);
+        if (comp && "remove" in comp) {
+            comp.remove.call(this, false);
+        }
+        if (soft === false && comp) {
+            for (var prop in comp) {
+                delete this[prop];
             }
-            delete this.__c[id];
+        }
+        delete this.__c[id];
 
-            this.trigger("RemoveComponent", id);
-            return this;
-        },
-
-        /**@
-        * #.has
-        * @comp Crafty Core
-        * @sign public Boolean .has(String component)
-        * Returns `true` or `false` depending on if the
-        * entity has the given component.
-        *
-        * For better performance, simply use the `.__c` object
-        * which will be `true` if the entity has the component or
-        * will not exist (or be `false`).
-        */
-        has: function (id) {
-            return !!this.__c[id];
-        },
-
-        /**@
-        * #.attr
-        * @comp Crafty Core
-        * @sign public this .attr(String property, * value)
-        * @param property - Property of the entity to modify
-        * @param value - Value to set the property to
-        * @sign public this .attr(Object map)
-        * @param map - Object where the key is the property to modify and the value as the property value
-        * @trigger Change - when properties change - {key: value}
-        * 
-        * Use this method to set any property of the entity.
-        * 
-        * @example
-        * ~~~
-        * this.attr({key: "value", prop: 5});
-        * this.key; //value
-        * this.prop; //5
-        *
-        * this.attr("key", "newvalue");
-        * this.key; //newvalue
-        * ~~~
-        */
-        attr: function (key, value) {
-            if (arguments.length === 1) {
-                //if just the key, return the value
-                if (typeof key === "string") {
-                    return this[key];
-                }
 
-                //extend if object
-                this.extend(key);
-                this.trigger("Change", key); //trigger change event
-                return this;
+        return this;
+    },
+
+    /**@
+     * #.getId
+     * @comp Crafty Core
+     * @sign public Number .getId(void)
+     * Returns the ID of this entity.
+     *
+     * For better performance, simply use the this[0] property.
+     *
+     * @example
+     * Finding out the `ID` of an entity can be done by returning the property `0`.
+     * ~~~
+     *    var ent = Crafty.e("2D");
+     *    ent[0]; //ID
+     *    ent.getId(); //also ID
+     * ~~~
+     */
+    getId: function () {
+        return this[0];
+    },
+
+    /**@
+     * #.has
+     * @comp Crafty Core
+     * @sign public Boolean .has(String component)
+     * Returns `true` or `false` depending on if the
+     * entity has the given component.
+     *
+     * For better performance, simply use the `.__c` object
+     * which will be `true` if the entity has the component or
+     * will not exist (or be `false`).
+     */
+    has: function (id) {
+        return !!this.__c[id];
+    },
+
+    /**@
+     * #.attr
+     * @comp Crafty Core
+     * @sign public this .attr(String property, * value)
+     * @param property - Property of the entity to modify
+     * @param value - Value to set the property to
+     * @sign public this .attr(Object map)
+     * @param map - Object where the key is the property to modify and the value as the property value
+     * @trigger Change - when properties change - {key: value}
+     *
+     * Use this method to set any property of the entity.
+     *
+     * @example
+     * ~~~
+     * this.attr({key: "value", prop: 5});
+     * this.key; //value
+     * this.prop; //5
+     *
+     * this.attr("key", "newvalue");
+     * this.key; //newvalue
+     * ~~~
+     */
+    attr: function (key, value) {
+        if (arguments.length === 1) {
+            //if just the key, return the value
+            if (typeof key === "string") {
+                return this[key];
             }
-            //if key value pair
-            this[key] = value;
 
-            var change = {};
-            change[key] = value;
-            this.trigger("Change", change); //trigger change event
+            //extend if object
+            this.extend(key);
+            this.trigger("Change", key); //trigger change event
             return this;
-        },
-
-        /**@
-        * #.toArray
-        * @comp Crafty Core
-        * @sign public this .toArray(void)
-        * 
-        * This method will simply return the found entities as an array.
-        */
-        toArray: function () {
-            return slice.call(this, 0);
-        },
-
-        /**@
-        * #.timeout
-        * @comp Crafty Core
-        * @sign public this .timeout(Function callback, Number delay)
-        * @param callback - Method to execute after given amount of milliseconds
-        * @param delay - Amount of milliseconds to execute the method
-        * 
-        * The delay method will execute a function after a given amount of time in milliseconds.
-        *
-        * Essentially a wrapper for `setTimeout`.
-        *
-        * @example
-        * Destroy itself after 100 milliseconds
-        * ~~~
-        * this.timeout(function() {
-             this.destroy();
-        * }, 100);
-        * ~~~
-        */
-        timeout: function (callback, duration) {
-            this.each(function () {
-                var self = this;
-                setTimeout(function () {
-                    callback.call(self);
-                }, duration);
-            });
+        }
+        //if key value pair
+        this[key] = value;
+
+        var change = {};
+        change[key] = value;
+        this.trigger("Change", change); //trigger change event
+        return this;
+    },
+
+    /**@
+     * #.toArray
+     * @comp Crafty Core
+     * @sign public this .toArray(void)
+     *
+     * This method will simply return the found entities as an array.
+     */
+    toArray: function () {
+        return slice.call(this, 0);
+    },
+
+    /**@
+    * #.timeout
+    * @comp Crafty Core
+    * @sign public this .timeout(Function callback, Number delay)
+    * @param callback - Method to execute after given amount of milliseconds
+    * @param delay - Amount of milliseconds to execute the method
+    * 
+    * The delay method will execute a function after a given amount of time in milliseconds.
+    *
+    * Essentially a wrapper for `setTimeout`.
+    *
+    * @example
+    * Destroy itself after 100 milliseconds
+    * ~~~
+    * this.timeout(function() {
+         this.destroy();
+    * }, 100);
+    * ~~~
+    */
+    timeout: function (callback, duration) {
+        this.each(function () {
+            var self = this;
+            setTimeout(function () {
+                callback.call(self);
+            }, duration);
+        });
+        return this;
+    },
+
+    /**@
+     * #.bind
+     * @comp Crafty Core
+     * @sign public this .bind(String eventName, Function callback)
+     * @param eventName - Name of the event to bind to
+     * @param callback - Method to execute when the event is triggered
+     * Attach the current entity (or entities) to listen for an event.
+     *
+     * Callback will be invoked when an event with the event name passed
+     * is triggered. Depending on the event, some data may be passed
+     * via an argument to the callback function.
+     *
+     * The first argument is the event name (can be anything) whilst the
+     * second argument is the callback. If the event has data, the
+     * callback should have an argument.
+     *
+     * Events are arbitrary and provide communication between components.
+     * You can trigger or bind an event even if it doesn't exist yet.
+     *
+     * Unlike DOM events, Crafty events are exectued synchronously.
+     *
+     * @example
+     * ~~~
+     * this.attr("triggers", 0); //set a trigger count
+     * this.bind("myevent", function() {
+     *     this.triggers++; //whenever myevent is triggered, increment
+     * });
+     * this.bind("EnterFrame", function() {
+     *     this.trigger("myevent"); //trigger myevent on every frame
+     * });
+     * ~~~
+     *
+     * @see .trigger, .unbind
+     */
+    bind: function (event, callback) {
+
+        // (To learn how the handlers object works, see inline comment at Crafty.bind)
+
+        //optimization for 1 entity
+        if (this.length === 1) {
+            if (!handlers[event]) handlers[event] = {};
+            var h = handlers[event];
+
+            if (!h[this[0]]) h[this[0]] = []; //init handler array for entity
+            h[this[0]].push(callback); //add current callback
             return this;
-        },
-
-        /**@
-        * #.bind
-        * @comp Crafty Core
-        * @sign public this .bind(String eventName, Function callback)
-        * @param eventName - Name of the event to bind to
-        * @param callback - Method to execute when the event is triggered
-        * Attach the current entity (or entities) to listen for an event.
-        *
-        * Callback will be invoked when an event with the event name passed
-        * is triggered. Depending on the event, some data may be passed
-        * via an argument to the callback function.
-        *
-        * The first argument is the event name (can be anything) whilst the
-        * second argument is the callback. If the event has data, the
-        * callback should have an argument.
-        *
-        * Events are arbitrary and provide communication between components.
-        * You can trigger or bind an event even if it doesn't exist yet.
-        *
-        * Unlike DOM events, Crafty events are exectued synchronously.
-        * 
-        * @example
-        * ~~~
-        * this.attr("triggers", 0); //set a trigger count
-        * this.bind("myevent", function() {
-        *     this.triggers++; //whenever myevent is triggered, increment
-        * });
-        * this.bind("EnterFrame", function() {
-        *     this.trigger("myevent"); //trigger myevent on every frame
-        * });
-        * ~~~
-        * 
-        * @see .trigger, .unbind
-        */
-        bind: function (event, callback) {
-        
-            // (To learn how the handlers object works, see inline comment at Crafty.bind)
-
-            //optimization for 1 entity
-            if (this.length === 1) {
-                if (!handlers[event]) handlers[event] = {};
-                var h = handlers[event];
-
-                if (!h[this[0]]) h[this[0]] = []; //init handler array for entity
-                h[this[0]].push(callback); //add current callback
+        }
+
+        this.each(function () {
+            //init event collection
+            if (!handlers[event]) handlers[event] = {};
+            var h = handlers[event];
+
+            if (!h[this[0]]) h[this[0]] = []; //init handler array for entity
+            h[this[0]].push(callback); //add current callback
+        });
+        return this;
+    },
+
+    /**@
+     * #.uniqueBind
+     * @comp Crafty Core
+     * @sign public Number .uniqueBind(String eventName, Function callback)
+     * @param eventName - Name of the event to bind to
+     * @param callback - Method to execute upon event triggered
+     * @returns ID of the current callback used to unbind
+     *
+     * Works like Crafty.bind, but prevents a callback from being bound multiple times.
+     *
+     * @see .bind
+     */
+    uniqueBind: function (event, callback) {
+        this.unbind(event, callback);
+        this.bind(event, callback);
+
+    },
+
+    /**@
+     * #.one
+     * @comp Crafty Core
+     * @sign public Number one(String eventName, Function callback)
+     * @param eventName - Name of the event to bind to
+     * @param callback - Method to execute upon event triggered
+     * @returns ID of the current callback used to unbind
+     *
+     * Works like Crafty.bind, but will be unbound once the event triggers.
+     *
+     * @see .bind
+     */
+    one: function (event, callback) {
+        var self = this;
+        var oneHandler = function (data) {
+            callback.call(self, data);
+            self.unbind(event, oneHandler);
+        };
+        return self.bind(event, oneHandler);
+
+    },
+
+    /**@
+     * #.unbind
+     * @comp Crafty Core
+     * @sign public this .unbind(String eventName[, Function callback])
+     * @param eventName - Name of the event to unbind
+     * @param callback - Function to unbind
+     * Removes binding with an event from current entity.
+     *
+     * Passing an event name will remove all events bound to
+     * that event. Passing a reference to the callback will
+     * unbind only that callback.
+     * @see .bind, .trigger
+     */
+    unbind: function (event, callback) {
+        // (To learn how the handlers object works, see inline comment at Crafty.bind)
+        this.each(function () {
+            var hdl = handlers[event],
+                i = 0,
+                l, current;
+            //if no events, cancel
+            if (hdl && hdl[this[0]]) l = hdl[this[0]].length;
+            else return this;
+
+            //if no function, delete all
+            if (!callback) {
+                delete hdl[this[0]];
                 return this;
             }
+            //look for a match if the function is passed
+            for (; i < l; i++) {
+                current = hdl[this[0]];
+                if (current[i] == callback) {
+                    delete current[i];
+                }
+            }
+        });
 
-            this.each(function () {
-                //init event collection
-                if (!handlers[event]) handlers[event] = {};
-                var h = handlers[event];
+        return this;
+    },
 
-                if (!h[this[0]]) h[this[0]] = []; //init handler array for entity
-                h[this[0]].push(callback); //add current callback
-            });
-            return this;
-        },
-
-        /**@
-        * #.unbind
-        * @comp Crafty Core
-        * @sign public this .unbind(String eventName[, Function callback])
-        * @param eventName - Name of the event to unbind
-        * @param callback - Function to unbind
-        * Removes binding with an event from current entity.
-        *
-        * Passing an event name will remove all events bound to
-        * that event. Passing a reference to the callback will
-        * unbind only that callback.
-        * @see .bind, .trigger
-        */
-        unbind: function (event, callback) {
-            // (To learn how the handlers object works, see inline comment at Crafty.bind)
-            this.each(function () {
-                var hdl = handlers[event], i = 0, l, current;
-                //if no events, cancel
-                if (hdl && hdl[this[0]]) l = hdl[this[0]].length;
-                else return this;
-
-                //if no function, delete all
-                if (!callback) {
-                    delete hdl[this[0]];
-                    return this;
-                }
-                //look for a match if the function is passed
-                for (; i < l; i++) {
-                    current = hdl[this[0]];
-                    if (current[i] == callback) {
-                        current.splice(i, 1);
+    /**@
+     * #.trigger
+     * @comp Crafty Core
+     * @sign public this .trigger(String eventName[, Object data])
+     * @param eventName - Event to trigger
+     * @param data - Arbitrary data that will be passed into every callback as an argument
+     * Trigger an event with arbitrary data. Will invoke all callbacks with
+     * the context (value of `this`) of the current entity object.
+     *
+     * *Note: This will only execute callbacks within the current entity, no other entity.*
+     *
+     * The first argument is the event name to trigger and the optional
+     * second argument is the arbitrary event data. This can be absolutely anything.
+     *
+     * Unlike DOM events, Crafty events are exectued synchronously.
+     */
+    trigger: function (event, data) {
+        // (To learn how the handlers object works, see inline comment at Crafty.bind)
+        if (this.length === 1) {
+            //find the handlers assigned to the event and entity
+            if (handlers[event] && handlers[event][this[0]]) {
+                var callbacks = handlers[event][this[0]],
+                    i;
+                for (i = 0; i < callbacks.length; i++) {
+                    if (typeof callbacks[i] === "undefined") {
+                        callbacks.splice(i, 1);
                         i--;
-                    }
-                }
-            });
-
-            return this;
-        },
-
-        /**@
-        * #.trigger
-        * @comp Crafty Core
-        * @sign public this .trigger(String eventName[, Object data])
-        * @param eventName - Event to trigger
-        * @param data - Arbitrary data that will be passed into every callback as an argument
-        * Trigger an event with arbitrary data. Will invoke all callbacks with
-        * the context (value of `this`) of the current entity object.
-        *
-        * *Note: This will only execute callbacks within the current entity, no other entity.*
-        *
-        * The first argument is the event name to trigger and the optional
-        * second argument is the arbitrary event data. This can be absolutely anything.
-        *
-        * Unlike DOM events, Crafty events are exectued synchronously.
-        */
-        trigger: function (event, data) {
-            // (To learn how the handlers object works, see inline comment at Crafty.bind)
-            if (this.length === 1) {
-                //find the handlers assigned to the event and entity
-                if (handlers[event] && handlers[event][this[0]]) {
-                    var callbacks = handlers[event][this[0]], i = 0, l = callbacks.length;
-                    for (; i < l; i++) {
+                    } else {
                         callbacks[i].call(this, data);
                     }
                 }
-                return this;
             }
+            return this;
+        }
 
-            this.each(function () {
-                //find the handlers assigned to the event and entity
-                if (handlers[event] && handlers[event][this[0]]) {
-                    var callbacks = handlers[event][this[0]], i = 0, l = callbacks.length;
-                    for (; i < l; i++) {
+        this.each(function () {
+            //find the handlers assigned to the event and entity
+            if (handlers[event] && handlers[event][this[0]]) {
+                var callbacks = handlers[event][this[0]],
+                    i;
+                for (i = 0; i < callbacks.length; i++) {
+                    if (typeof callbacks[i] === "undefined") {
+                        callbacks.splice(i, 1);
+                        i--;
+                    } else {
                         callbacks[i].call(this, data);
                     }
                 }
-            });
-            return this;
-        },
-
-        /**@
-        * #.each
-        * @comp Crafty Core
-        * @sign public this .each(Function method)
-        * @param method - Method to call on each iteration
-        * Iterates over found entities, calling a function for every entity.
-        *
-        * The function will be called for every entity and will pass the index
-        * in the iteration as an argument. The context (value of `this`) of the
-        * function will be the current entity in the iteration.
-        * 
-        * @example
-        * Destroy every second 2D entity
-        * ~~~
-        * Crafty("2D").each(function(i) {
-        *     if(i % 2 === 0) {
-        *         this.destroy();
-        *     }
-        * });
-        * ~~~
-        */
-        each: function (func) {
-            var i = 0, l = this.length;
-            for (; i < l; i++) {
-                //skip if not exists
-                if (!entities[this[i]]) continue;
-                func.call(entities[this[i]], i);
             }
-            return this;
-        },
-
-        /**@
-        * #.clone
-        * @comp Crafty Core
-        * @sign public Entity .clone(void)
-        * @returns Cloned entity of the current entity
-        * 
-        * Method will create another entity with the exact same
-        * properties, components and methods as the current entity.
-        */
-        clone: function () {
-            var comps = this.__c,
+        });
+        return this;
+    },
+
+    /**@
+     * #.each
+     * @comp Crafty Core
+     * @sign public this .each(Function method)
+     * @param method - Method to call on each iteration
+     * Iterates over found entities, calling a function for every entity.
+     *
+     * The function will be called for every entity and will pass the index
+     * in the iteration as an argument. The context (value of `this`) of the
+     * function will be the current entity in the iteration.
+     *
+     * @example
+     * Destroy every second 2D entity
+     * ~~~
+     * Crafty("2D").each(function(i) {
+     *     if(i % 2 === 0) {
+     *         this.destroy();
+     *     }
+     * });
+     * ~~~
+     */
+    each: function (func) {
+        var i = 0,
+            l = this.length;
+        for (; i < l; i++) {
+            //skip if not exists
+            if (!entities[this[i]]) continue;
+            func.call(entities[this[i]], i);
+        }
+        return this;
+    },
+
+    /**@
+     * #.clone
+     * @comp Crafty Core
+     * @sign public Entity .clone(void)
+     * @returns Cloned entity of the current entity
+     *
+     * Method will create another entity with the exact same
+     * properties, components and methods as the current entity.
+     */
+    clone: function () {
+        var comps = this.__c,
             comp,
             prop,
             clone = Crafty.e();
 
-            for (comp in comps) {
-                clone.addComponent(comp);
-            }
-            for (prop in this) {
-                if (prop != "0" && prop != "_global" && prop != "_changed" && typeof this[prop] != "function" && typeof this[prop] != "object") {
-                    clone[prop] = this[prop];
-                }
+        for (comp in comps) {
+            clone.addComponent(comp);
+        }
+        for (prop in this) {
+            if (prop != "0" && prop != "_global" && prop != "_changed" && typeof this[prop] != "function" && typeof this[prop] != "object") {
+                clone[prop] = this[prop];
             }
+        }
 
-            return clone;
-        },
-
-        /**@
-        * #.setter
-        * @comp Crafty Core
-        * @sign public this .setter(String property, Function callback)
-        * @param property - Property to watch for modification
-        * @param callback - Method to execute if the property is modified
-        * Will watch a property waiting for modification and will then invoke the
-        * given callback when attempting to modify.
-        *
-        * *Note: Support in IE<9 is slightly different. The method will be executed
-        * after the property has been set*
-        */
-        setter: function (prop, callback) {
-            if (Crafty.support.setter) {
-                this.__defineSetter__(prop, callback);
-            } else if (Crafty.support.defineProperty) {
-                Object.defineProperty(this, prop, {
-                    set: callback,
-                    configurable: true
-                });
-            } else {
-                noSetter.push({
-                    prop: prop,
-                    obj: this,
-                    fn: callback
-                });
-            }
-            return this;
-        },
-
-        /**@
-        * #.destroy
-        * @comp Crafty Core
-        * @sign public this .destroy(void)
-        * Will remove all event listeners and delete all properties as well as removing from the stage
-        */
-        destroy: function () {
-            //remove all event handlers, delete from entities
-            this.each(function () {
-                this.trigger("Remove");
-                for (var e in handlers) {
-                    this.unbind(e);
-                }
-                delete entities[this[0]];
+        return clone;
+    },
+
+    /**@
+     * #.setter
+     * @comp Crafty Core
+     * @sign public this .setter(String property, Function callback)
+     * @param property - Property to watch for modification
+     * @param callback - Method to execute if the property is modified
+     * Will watch a property waiting for modification and will then invoke the
+     * given callback when attempting to modify.
+     *
+     * *Note: Support in IE<9 is slightly different. The method will be executed
+     * after the property has been set*
+     */
+    setter: function (prop, callback) {
+        if (Crafty.support.setter) {
+            this.__defineSetter__(prop, callback);
+        } else if (Crafty.support.defineProperty) {
+            Object.defineProperty(this, prop, {
+                set: callback,
+                configurable: true
+            });
+        } else {
+            noSetter.push({
+                prop: prop,
+                obj: this,
+                fn: callback
             });
         }
-    };
+        return this;
+    },
 
-    //give the init instances the Crafty prototype
-    Crafty.fn.init.prototype = Crafty.fn;
+    /**@
+     * #.destroy
+     * @comp Crafty Core
+     * @sign public this .destroy(void)
+     * Will remove all event listeners and delete all properties as well as removing from the stage
+     */
+    destroy: function () {
+        //remove all event handlers, delete from entities
+        this.each(function () {
+            var comp;
+            this.trigger("Remove");
+            for (var compName in this.__c) {
+                comp = components[compName];
+                if (comp && "remove" in comp)
+                    comp.remove.call(this, true);
+            }
+            for (var e in handlers) {
+                this.unbind(e);
+            }
+            delete entities[this[0]];
+        });
+    }
+};
 
-    /**
-    * Extension method to extend the namespace and
-    * selector instances
-    */
-    Crafty.extend = Crafty.fn.extend = function (obj) {
-        var target = this, key;
+//give the init instances the Crafty prototype
+Crafty.fn.init.prototype = Crafty.fn;
 
-        //don't bother with nulls
-        if (!obj) return target;
+/**
+ * Extension method to extend the namespace and
+ * selector instances
+ */
+Crafty.extend = Crafty.fn.extend = function (obj) {
+    var target = this,
+        key;
 
-        for (key in obj) {
-            if (target === obj[key]) continue; //handle circular reference
-            target[key] = obj[key];
-        }
+    //don't bother with nulls
+    if (!obj) return target;
 
-        return target;
-    };
+    for (key in obj) {
+        if (target === obj[key]) continue; //handle circular reference
+        target[key] = obj[key];
+    }
 
+    return target;
+};
+
+/**@
+ * #Crafty.extend
+ * @category Core
+ * Used to extend the Crafty namespace.
+ */
+Crafty.extend({
     /**@
-    * #Crafty.extend
-    * @category Core
-    * Used to extend the Crafty namespace.
-    */
-    Crafty.extend({
-        /**@
-        * #Crafty.init
-        * @category Core
-        * @trigger EnterFrame - on each frame - { frame: Number }
-        * @trigger Load - Just after the viewport is initialised. Before the EnterFrame loops is started
-        * @sign public this Crafty.init([Number width, Number height, String stage_elem])
-        * @sign public this Crafty.init([Number width, Number height, HTMLElement stage_elem])
-        * @param Number width - Width of the stage
-        * @param Number height - Height of the stage
-        * @param String or HTMLElement stage_elem - the element to use for the stage    
-        *
-        * Sets the element to use as the stage, creating it if necessary.  By default a div with id 'cr-stage' is used, but if the 'stage_elem' argument is provided that will be used instead.  (see `Crafty.viewport.init`)     
-        *
-        * Starts the `EnterFrame` interval. This will call the `EnterFrame` event for every frame.
-        *
-        * Can pass width and height values for the stage otherwise will default to window size (see `Crafty.DOM.window`).
-        *
-        * All `Load` events will be executed.
-        *
-        * Uses `requestAnimationFrame` to sync the drawing with the browser but will default to `setInterval` if the browser does not support it.
-        * @see Crafty.stop,  Crafty.viewport
-        */
-        init: function (w, h, stage_elem) {
-            Crafty.viewport.init(w, h, stage_elem);
-
-            //call all arbitrary functions attached to onload
-            this.trigger("Load");
-            this.timer.init();
+     * #Crafty.init
+     * @category Core
+     * @trigger Load - Just after the viewport is initialised. Before the EnterFrame loops is started
+     * @sign public this Crafty.init([Number width, Number height, String stage_elem])
+     * @sign public this Crafty.init([Number width, Number height, HTMLElement stage_elem])
+     * @param Number width - Width of the stage
+     * @param Number height - Height of the stage
+     * @param String or HTMLElement stage_elem - the element to use for the stage
+     *
+     * Sets the element to use as the stage, creating it if necessary.  By default a div with id 'cr-stage' is used, but if the 'stage_elem' argument is provided that will be used instead.  (see `Crafty.viewport.init`)
+     *
+     * Starts the `EnterFrame` interval. This will call the `EnterFrame` event for every frame.
+     *
+     * Can pass width and height values for the stage otherwise will default to window size (see `Crafty.DOM.window`).
+     *
+     * All `Load` events will be executed.
+     *
+     * Uses `requestAnimationFrame` to sync the drawing with the browser but will default to `setInterval` if the browser does not support it.
+     * @see Crafty.stop,  Crafty.viewport
+     */
+    init: function (w, h, stage_elem) {
+        Crafty.viewport.init(w, h, stage_elem);
+
+        //call all arbitrary functions attached to onload
+        this.trigger("Load");
+        this.timer.init();
+
+        return this;
+    },
 
-            return this;
-        },
-
-        /**@
-        * #.getVersion
-        * @comp Crafty Core
-        * @sign public this .getVersion()
-        * @returns Actually crafty version
-        *
-        * @example
-        * ~~~
-        * Crafty.getVersion(); //'0.5.4'
-        * ~~~
-        */
-        getVersion: function () {
-            return '0.5.4';
-        },
-
-        /**@
-        * #Crafty.stop
-        * @category Core
-        * @trigger CraftyStop - when the game is stopped
-        * @sign public this Crafty.stop([bool clearState])
-		* @param clearState - if true the stage and all game state is cleared.
-        *
-        * Stops the EnterFrame interval and removes the stage element.
-        *
-        * To restart, use `Crafty.init()`.
-        * @see Crafty.init
-        */
-        stop: function (clearState) {
-        	this.timer.stop();
-        	if (clearState) {
-        	    Crafty.audio.remove();
-        		if (Crafty.stage && Crafty.stage.elem.parentNode) {
-        			var newCrStage = document.createElement('div');
-        			newCrStage.id = Crafty.stage.elem.id;
-        			Crafty.stage.elem.parentNode.replaceChild(newCrStage, Crafty.stage.elem);
-        		}
-        		initState();
-        		initComponents(Crafty, window, window.document);
-        	}
-
-            Crafty.trigger("CraftyStop");
-
-        	return this;
-        },
-
-        /**@
-        * #Crafty.pause
-        * @category Core
-        * @trigger Pause - when the game is paused
-        * @trigger Unpause - when the game is unpaused
-        * @sign public this Crafty.pause(void)
-        * 
-        * Pauses the game by stopping the EnterFrame event from firing. If the game is already paused it is unpaused.
-        * You can pass a boolean parameter if you want to pause or unpause mo matter what the current state is.
-        * Modern browsers pauses the game when the page is not visible to the user. If you want the Pause event
-        * to be triggered when that happens you can enable autoPause in `Crafty.settings`.
-        * 
-        * @example
-        * Have an entity pause the game when it is clicked.
-        * ~~~
-        * button.bind("click", function() {
-        *     Crafty.pause();
-        * });
-        * ~~~
-        */
-        pause: function (toggle) {
-            if (arguments.length == 1 ? toggle : !this._paused) {
-                this.trigger('Pause');
-                this._paused = true;
-                setTimeout(function(){ Crafty.timer.stop(); }, 0);
-                Crafty.keydown = {};
-            } else {
-                this.trigger('Unpause');
-                this._paused = false;
-                setTimeout(function(){ Crafty.timer.init(); }, 0);
+    /**@
+     * #Crafty.getVersion
+     * @category Core
+     * @sign public String Crafty.getVersion()
+     * @returns Current version of Crafty as a string
+     *
+     * Return current version of crafty
+     *
+     * @example
+     * ~~~
+     * Crafty.getVersion(); //'0.5.2'
+     * ~~~
+     */
+    getVersion: function () {
+        return version;
+    },
+
+    /**@
+     * #Crafty.stop
+     * @category Core
+     * @trigger CraftyStop - when the game is stopped
+     * @sign public this Crafty.stop([bool clearState])
+     * @param clearState - if true the stage and all game state is cleared.
+     *
+     * Stops the EnterFrame interval and removes the stage element.
+     *
+     * To restart, use `Crafty.init()`.
+     * @see Crafty.init
+     */
+    stop: function (clearState) {
+        this.timer.stop();
+        if (clearState) {
+            Crafty.audio.remove();
+            if (Crafty.stage && Crafty.stage.elem.parentNode) {
+                var newCrStage = document.createElement('div');
+                newCrStage.id = Crafty.stage.elem.id;
+                Crafty.stage.elem.parentNode.replaceChild(newCrStage, Crafty.stage.elem);
             }
-            return this;
-        },
-
-        /**@
-         * #Crafty.isPaused
-         * @category Core
-         * @sign public this Crafty.isPaused()
-         * 
-         * Check whether the game is already paused or not.
-         * 
-         * @example
-         * ~~~
-         * Crafty.isPaused();
-         * ~~~
+            initState();
+        }
+
+        Crafty.trigger("CraftyStop");
+
+        return this;
+    },
+
+    /**@
+     * #Crafty.pause
+     * @category Core
+     * @trigger Pause - when the game is paused
+     * @trigger Unpause - when the game is unpaused
+     * @sign public this Crafty.pause(void)
+     *
+     * Pauses the game by stopping the EnterFrame event from firing. If the game is already paused it is unpaused.
+     * You can pass a boolean parameter if you want to pause or unpause mo matter what the current state is.
+     * Modern browsers pauses the game when the page is not visible to the user. If you want the Pause event
+     * to be triggered when that happens you can enable autoPause in `Crafty.settings`.
+     *
+     * @example
+     * Have an entity pause the game when it is clicked.
+     * ~~~
+     * button.bind("click", function() {
+     *     Crafty.pause();
+     * });
+     * ~~~
+     */
+    pause: function (toggle) {
+        if (arguments.length === 1 ? toggle : !this._paused) {
+            this.trigger('Pause');
+            this._paused = true;
+            setTimeout(function () {
+                Crafty.timer.stop();
+            }, 0);
+            Crafty.keydown = {};
+        } else {
+            this.trigger('Unpause');
+            this._paused = false;
+            setTimeout(function () {
+                Crafty.timer.init();
+            }, 0);
+        }
+        return this;
+    },
+
+    /**@
+     * #Crafty.isPaused
+     * @category Core
+     * @sign public this Crafty.isPaused()
+     *
+     * Check whether the game is already paused or not.
+     *
+     * @example
+     * ~~~
+     * Crafty.isPaused();
+     * ~~~
+     */
+    isPaused: function () {
+        return this._paused;
+    },
+
+    /**@
+     * #Crafty.timer
+     * @category Game Loop
+     * Handles game ticks
+     */
+    timer: (function () {
+        /*
+         * `window.requestAnimationFrame` or its variants is called for animation.
+         * `.requestID` keeps a record of the return value previous `window.requestAnimationFrame` call.
+         * This is an internal variable. Used to stop frame.
          */
-        isPaused: function () {
-            return this._paused;
-        },
-
-        /**@
-        * #Crafty.timer
-        * @category Internal
-        * Handles game ticks
-        */
-        timer: {
-            prev: (+new Date),
-            current: (+new Date),
-            currentTime: +new Date(),
-            frames:0,
-            frameTime:0,
+        var tick, requestID;
+
+        // Internal variables used to control the game loop.  Use Crafty.timer.steptype() to set these.
+        var mode = "fixed",
+            maxFramesPerStep = 5,
+            maxTimestep = 40;
+
+        // variables used by the game loop to track state
+        var endTime = 0,
+            timeSlip = 0,
+            gameTime,
+            frame = 0;
+
+        // Controls the target rate of fixed mode loop.  Set these with the Crafty.timer.FPS function
+        var FPS = 50,
+            milliSecPerFrame = 1000 / FPS;
+
+
+
+
+        return {
             init: function () {
+                // When first called, set the  gametime one frame before now!
+                if (typeof gameTime === "undefined")
+                    gameTime = (new Date().getTime()) - milliSecPerFrame;
                 var onFrame = window.requestAnimationFrame ||
                     window.webkitRequestAnimationFrame ||
                     window.mozRequestAnimationFrame ||
@@ -902,11 +999,13 @@
                         Crafty.timer.step();
                         requestID = onFrame(tick);
                         //console.log(requestID + ', ' + frame)
-                    }
+                    };
 
                     tick();
                 } else {
-                    tick = setInterval(function () { Crafty.timer.step(); }, 1000 / FPS);
+                    tick = setInterval(function () {
+                        Crafty.timer.step();
+                    }, 1000 / FPS);
                 }
             },
 
@@ -926,418 +1025,580 @@
                 tick = null;
             },
 
+
+            /**@
+             * #Crafty.timer.steptype
+             * @comp Crafty.timer
+             * Can be called to set the type of timestep the game loop uses
+             * @sign public void Crafty.timer.steptype(mode [, maxTimeStep])
+             * @param mode - the type of time loop.  Allowed values are "fixed", "semifixed", and "variable".  Crafty defaults to "fixed".
+             * @param mode - For "fixed", sets the max number of frames per step.   For "variable" and "semifixed", sets the maximum time step allowed.
+             *
+             * * In "fixed" mode, each frame is sent the same value of `dt`, and to achieve the target game speed, mulitiple frame events are triggered before each render.
+             * * In "variable" mode, there is only one frame triggered per render.  This recieves a value of `dt` equal to the actual elapsed time since the last frame.
+             * * In "semifixed" mode, multiple frames per render are processed, and the total time since the last frame is divided evenly between them.
+             *
+             */
+
+            steptype: function (newmode, option) {
+                if (newmode === "variable" || newmode === "semifixed") {
+                    mode = newmode;
+                    if (option)
+                        maxTimestep = option;
+
+                } else if (newmode === "fixed") {
+                    mode = "fixed";
+                    if (option)
+                        maxFramesPerStep = option;
+                } else {
+                    throw "Invalid step type specified";
+                }
+
+
+            },
+
             /**@
-            * #Crafty.timer.step
-            * @comp Crafty.timer
-            * @sign public void Crafty.timer.step()
-            * Advances the game by triggering `EnterFrame` and calls `Crafty.DrawManager.draw` to update the stage.
-            */
+             * #Crafty.timer.step
+             * @comp Crafty.timer
+             * @sign public void Crafty.timer.step()
+             * @trigger EnterFrame - Triggered on each frame.  Passes the frame number, and the amount of time since the last frame.  If the time is greater than maxTimestep, that will be used instead.  (The default value of maxTimestep is 50 ms.) - { frame: Number, dt:Number }
+             * @trigger RenderScene - Triggered every time a scene should be rendered
+             * @trigger MeasureWaitTime - Triggered at the beginning of each step after the first.  Passes the time the game loop waited between steps. - Number
+             * @trigger MeasureFrameTime - Triggered after each step.  Passes the time it took to advance one frame. - Number
+             * @trigger MeasureRenderTime - Triggered after each render. Passes the time it took to render the scene - Number
+             * Advances the game by triggering `EnterFrame` and `RenderScene`
+             */
             step: function () {
-                loops = 0;
-                this.currentTime = +new Date();
-                if (this.currentTime - nextGameTick > 60 * milliSecPerFrame) {
-                    nextGameTick = this.currentTime - milliSecPerFrame;
+                var drawTimeStart, dt, lastFrameTime, loops = 0;
+
+                currentTime = new Date().getTime();
+                if (endTime > 0)
+                    Crafty.trigger("MeasureWaitTime", currentTime - endTime);
+
+                // If we're currently ahead of the current time, we need to wait until we're not!
+                if (gameTime + timeSlip >= currentTime) {
+                    endTime = currentTime;
+                    return;
                 }
-                while (this.currentTime > nextGameTick) {
-                    Crafty.trigger("EnterFrame", { frame: frame++ });
-                    nextGameTick += milliSecPerFrame;
-                    loops++;
+
+                var netTimeStep = currentTime - (gameTime + timeSlip);
+                // We try to keep up with the target FPS by processing multiple frames per render
+                // If we're hopelessly behind, stop trying to catch up.
+                if (netTimeStep > milliSecPerFrame * 20) {
+                    //gameTime = currentTime - milliSecPerFrame;
+                    timeSlip += netTimeStep - milliSecPerFrame;
+                    netTimeStep = milliSecPerFrame;
                 }
-                if (loops) {
-                    Crafty.DrawManager.draw();
+
+                // Set up how time is incremented
+                if (mode === "fixed") {
+                    loops = Math.ceil(netTimeStep / milliSecPerFrame);
+                    // maxFramesPerStep adjusts how willing we are to delay drawing in order to keep at the target FPS
+                    loops = Math.min(loops, maxFramesPerStep);
+                    dt = milliSecPerFrame;
+                } else if (mode === "variable") {
+                    loops = 1;
+                    dt = netTimeStep;
+                    // maxTimestep is the maximum time to be processed in a frame.  (Large dt => unstable physics)
+                    dt = Math.min(dt, maxTimestep);
+                } else if (mode === "semifixed") {
+                    loops = Math.ceil(netTimeStep / maxTimestep);
+                    dt = netTimeStep / loops;
                 }
-               if(this.currentTime > this.frameTime){
-                    Crafty.trigger("MessureFPS",{value:this.frame});
-                    this.frame = 0;
-                    this.frameTime = this.currentTime + 1000;
-                }else{
-                    this.frame++;
+
+                // Process frames, incrementing the game clock with each frame.
+                // dt is determined by the mode
+                for (var i = 0; i < loops; i++) {
+                    lastFrameTime = currentTime;
+                    // Everything that changes over time hooks into this event
+                    Crafty.trigger("EnterFrame", {
+                        frame: frame++,
+                        dt: dt,
+                        gameTime: gameTime
+                    });
+                    gameTime += dt;
+                    currentTime = new Date().getTime();
+                    Crafty.trigger("MeasureFrameTime", currentTime - lastFrameTime);
+                }
+
+                //If any frames were processed, render the results
+                if (loops > 0) {
+                    drawTimeStart = currentTime;
+                    Crafty.trigger("RenderScene");
+                    // Post-render cleanup opportunity
+                    Crafty.trigger("PostRender");
+                    currentTime = new Date().getTime();
+                    Crafty.trigger("MeasureRenderTime", currentTime - drawTimeStart);
                 }
-            
+
+                endTime = currentTime;
             },
             /**@
-            * #Crafty.timer.getFPS
-            * @comp Crafty.timer
-            * @sign public void Crafty.timer.getFPS()
-            * Returns the target frames per second. This is not an actual frame rate.
-            */
-            getFPS: function () {
-                return FPS;
+             * #Crafty.timer.FPS
+             * @comp Crafty.timer
+             * @sign public void Crafty.timer.FPS()
+             * Returns the target frames per second. This is not an actual frame rate.
+             * @sign public void Crafty.timer.FPS(Number value)
+             * @param value - the target rate
+             * Sets the target frames per second. This is not an actual frame rate.
+             * The default rate is 50.
+             */
+            FPS: function (value) {
+                if (typeof value == "undefined")
+                    return FPS;
+                else {
+                    FPS = value;
+                    milliSecPerFrame = 1000 / FPS;
+                }
             },
 
             /**@
-            * #Crafty.timer.simulateFrames
-            * @comp Crafty.timer
-            * Advances the game state by a number of frames and draws the resulting stage at the end. Useful for tests and debugging.
-            * @sign public this Crafty.timer.simulateFrames(Number frames)
-            * @param frames - number of frames to simulate
-            */
-            simulateFrames: function (frames) {
+             * #Crafty.timer.simulateFrames
+             * @comp Crafty.timer
+             * Advances the game state by a number of frames and draws the resulting stage at the end. Useful for tests and debugging.
+             * @sign public this Crafty.timer.simulateFrames(Number frames[, Number timestep])
+             * @param frames - number of frames to simulate
+             * @param timestep - the duration to pass each frame.  Defaults to milliSecPerFrame (20 ms) if not specified.
+             */
+            simulateFrames: function (frames, timestep) {
+                if (typeof timestep === "undefined")
+                    timestep = milliSecPerFrame;
                 while (frames-- > 0) {
-                    Crafty.trigger("EnterFrame", { frame: frame++ });
+                    Crafty.trigger("EnterFrame", {
+                        frame: frame++,
+                        dt: timestep
+                    });
                 }
-                Crafty.DrawManager.draw();
+                Crafty.trigger("RenderScene");
             }
+        };
+    })(),
 
-        },
-
-        /**@
-        * #Crafty.e
-        * @category Core
-        * @trigger NewEntity - When the entity is created and all components are added - { id:Number }
-        * @sign public Entity Crafty.e(String componentList)
-        * @param componentList - List of components to assign to new entity
-        * @sign public Entity Crafty.e(String component1[, .., String componentN])
-        * @param component# - Component to add
-        * 
-        * Creates an entity. Any arguments will be applied in the same
-        * way `.addComponent()` is applied as a quick way to add components.
-        *
-        * Any component added will augment the functionality of
-        * the created entity by assigning the properties and methods from the component to the entity.
-        * 
-        * @example
-        * ~~~
-        * var myEntity = Crafty.e("2D, DOM, Color");
-        * ~~~
-        * 
-        * @see Crafty.c
-        */
-        e: function () {
-            var id = UID(), craft;
-
-            entities[id] = null; //register the space
-            entities[id] = craft = Crafty(id);
-
-            if (arguments.length > 0) {
-                craft.addComponent.apply(craft, arguments);
-            }
-            craft.setName('Entity #'+id); //set default entity human readable name
-            craft.addComponent("obj"); //every entity automatically assumes obj
-
-            Crafty.trigger("NewEntity", { id: id });
-
-            return craft;
-        },
-
-        /**@
-        * #Crafty.c
-        * @category Core
-        * @sign public void Crafty.c(String name, Object component)
-        * @param name - Name of the component
-        * @param component - Object with the components properties and methods
-        * Creates a component where the first argument is the ID and the second
-        * is the object that will be inherited by entities.
-        *
-        * There is a convention for writing components. 
-        *
-        * - Properties or methods that start with an underscore are considered private.
-        * - A method called `init` will automatically be called as soon as the
-        * component is added to an entity.
-        * - A method with the same name as the component is considered to be a constructor
-        * and is generally used when you need to pass configuration data to the component on a per entity basis.
-        *
-        * @example
-        * ~~~
-        * Crafty.c("Annoying", {
-        *     _message: "HiHi",
-        *     init: function() {
-        *         this.bind("EnterFrame", function() { alert(this.message); });
-        *     },
-        *     annoying: function(message) { this.message = message; }
-        * });
-        *
-        * Crafty.e("Annoying").annoying("I'm an orange...");
-        * ~~~
-        *
-        * 
-        * WARNING: 
-        *
-        * in the example above the field _message is local to the entity. That is, if you create many entities with the Annoying component they can all have different values for _message. That is because it is a simple value, and simple values are copied by value. If however the field had been an object or array, the value would have been shared by all entities with the component because complex types are copied by reference in javascript. This is probably not what you want and the following example demonstrates how to work around it:
-        *
-        * ~~~
-        * Crafty.c("MyComponent", {
-        *     _iAmShared: { a: 3, b: 4 },
-        *     init: function() {
-        *         this._iAmNotShared = { a: 3, b: 4 };
-        *     },
-        * });
-        * ~~~
-        *
-        * @see Crafty.e
-        */
-        c: function (compName, component) {
-            components[compName] = component;
-        },
-
-        /**@
-        * #Crafty.trigger
-        * @category Core, Events
-        * @sign public void Crafty.trigger(String eventName, * data)
-        * @param eventName - Name of the event to trigger
-        * @param data - Arbitrary data to pass into the callback as an argument
-        * 
-        * This method will trigger every single callback attached to the event name. This means
-        * every global event and every entity that has a callback.
-        * 
-        * @see Crafty.bind
-        */
-        trigger: function (event, data) {
-            // (To learn how the handlers object works, see inline comment at Crafty.bind)
-            var hdl = handlers[event], h, i, l;
-            //loop over every object bound
-            for (h in hdl) {
-                if (!hdl.hasOwnProperty(h)) continue;
-
-                //loop over every handler within object
-                for (i = 0, l = hdl[h].length; i < l; i++) {
-                    if (hdl[h] && hdl[h][i]) {
-                        //if an entity, call with that context
-                        if (entities[h]) {
-                            hdl[h][i].call(Crafty(+h), data);
-                        } else { //else call with Crafty context
-                            hdl[h][i].call(Crafty, data);
-                        }
-                    }
-                }
-            }
-        },
-
-        /**@
-        * #Crafty.bind
-        * @category Core, Events
-        * @sign public Number bind(String eventName, Function callback)
-        * @param eventName - Name of the event to bind to
-        * @param callback - Method to execute upon event triggered
-        * @returns ID of the current callback used to unbind
-        * 
-        * Binds to a global event. Method will be executed when `Crafty.trigger` is used
-        * with the event name.
-        * 
-        * @see Crafty.trigger, Crafty.unbind
-        */
-        bind: function (event, callback) {
-            
-            // Background: The structure of the global object "handlers"
-            // ---------------------------------------------------------
-            // Here is an example of what "handlers" can look like:
-            // handlers ===
-            //    { Move:  {5:[fnA], 6:[fnB, fnC], global:[fnD]},
-            //     Change: {6:[fnE]}
-            //    }
-            // In this example, when the 'Move' event is triggered on entity #6 (e.g.
-            // entity6.trigger('Move')), it causes the execution of fnB() and fnC(). When
-            // the Move event is triggered globally (i.e. Crafty.trigger('Move')), it
-            // will execute fnA, fnB, fnC, fnD.
-            // 
-            // In this example, "this" is bound to entity #6 whenever fnB() is executed, and
-            // "this" is bound to Crafty whenever fnD() is executed.
-            //
-            // In other words, the structure of "handlers" is:
-            //
-            // handlers[event][entityID or 'global'] === (Array of callback functions)
 
-            if (!handlers[event]) handlers[event] = {};
-            var hdl = handlers[event];
-
-            if (!hdl.global) hdl.global = [];
-            return hdl.global.push(callback) - 1;
-        },
-
-        /**@
-        * #Crafty.unbind
-        * @category Core, Events
-        * @sign public Boolean Crafty.unbind(String eventName, Function callback)
-        * @param eventName - Name of the event to unbind
-        * @param callback - Function to unbind
-        * @sign public Boolean Crafty.unbind(String eventName, Number callbackID)
-        * @param callbackID - ID of the callback
-        * @returns True or false depending on if a callback was unbound
-        * Unbind any event from any entity or global event.
-        * @example
-        * ~~~
-        *    var play_gameover_sound = function () {...};
-        *    Crafty.bind('GameOver', play_gameover_sound);
-        *    ...
-        *    Crafty.unbind('GameOver', play_gameover_sound);
-        * ~~~
-        * 
-        * The first line defines a callback function. The second line binds that
-        * function so that `Crafty.trigger('GameOver')` causes that function to
-        * run. The third line unbinds that function.
-        *  
-        * ~~~
-        *    Crafty.unbind('GameOver');
-        * ~~~
-        * 
-        * This unbinds ALL global callbacks for the event 'GameOver'. That
-        * includes all callbacks attached by `Crafty.bind('GameOver', ...)`, but
-        * none of the callbacks attached by `some_entity.bind('GameOver', ...)`.
-        */
-        unbind: function (event, callback) {
-            // (To learn how the handlers object works, see inline comment at Crafty.bind)
-            var hdl = handlers[event], i, l, global_callbacks, found_match;
-
-            if (hdl === undefined || hdl['global'] === undefined
-                                           || hdl['global'].length === 0) {
-                return false;
-            }
+    /**@
+     * #Crafty.e
+     * @category Core
+     * @trigger NewEntity - When the entity is created and all components are added - { id:Number }
+     * @sign public Entity Crafty.e(String componentList)
+     * @param componentList - List of components to assign to new entity
+     * @sign public Entity Crafty.e(String component1[, .., String componentN])
+     * @param component# - Component to add
+     *
+     * Creates an entity. Any arguments will be applied in the same
+     * way `.addComponent()` is applied as a quick way to add components.
+     *
+     * Any component added will augment the functionality of
+     * the created entity by assigning the properties and methods from the component to the entity.
+     *
+     * @example
+     * ~~~
+     * var myEntity = Crafty.e("2D, DOM, Color");
+     * ~~~
+     *
+     * @see Crafty.c
+     */
+    e: function () {
+        var id = UID(),
+            craft;
+
+        entities[id] = null; //register the space
+        entities[id] = craft = Crafty(id);
+
+        if (arguments.length > 0) {
+            craft.addComponent.apply(craft, arguments);
+        }
+        craft.setName('Entity #' + id); //set default entity human readable name
+        craft.addComponent("obj"); //every entity automatically assumes obj
 
-            // If no callback was supplied, delete everything
-            if (arguments.length === 1) {
-                delete hdl['global'];
-                return true;
-            }
+        Crafty.trigger("NewEntity", {
+            id: id
+        });
+
+        return craft;
+    },
+
+    /**@
+     * #Crafty.c
+     * @category Core
+     * @sign public void Crafty.c(String name, Object component)
+     * @param name - Name of the component
+     * @param component - Object with the components properties and methods
+     * Creates a component where the first argument is the ID and the second
+     * is the object that will be inherited by entities.
+     *
+     * A couple of methods are treated specially. They are invoked in partiular contexts, and (in those contexts) cannot be overridden by other components.
+     *
+     * - `init` will be called when the component is added to an entity
+     * - `remove` will be called just before a component is removed, or before an entity is destroyed. It is passed a single boolean parameter that is `true` if the entity is being destroyed.
+     *
+     * In addition to these hardcoded special methods, there are some conventions for writing components.
+     *
+     * - Properties or methods that start with an underscore are considered private.
+     * - A method with the same name as the component is considered to be a constructor
+     * and is generally used when you need to pass configuration data to the component on a per entity basis.
+     *
+     * @example
+     * ~~~
+     * Crafty.c("Annoying", {
+     *     _message: "HiHi",
+     *     init: function() {
+     *         this.bind("EnterFrame", function() { alert(this.message); });
+     *     },
+     *     annoying: function(message) { this.message = message; }
+     * });
+     *
+     * Crafty.e("Annoying").annoying("I'm an orange...");
+     * ~~~
+     *
+     *
+     * WARNING:
+     *
+     * in the example above the field _message is local to the entity. That is, if you create many entities with the Annoying component they can all have different values for _message. That is because it is a simple value, and simple values are copied by value. If however the field had been an object or array, the value would have been shared by all entities with the component because complex types are copied by reference in javascript. This is probably not what you want and the following example demonstrates how to work around it:
+     *
+     * ~~~
+     * Crafty.c("MyComponent", {
+     *     _iAmShared: { a: 3, b: 4 },
+     *     init: function() {
+     *         this._iAmNotShared = { a: 3, b: 4 };
+     *     },
+     * });
+     * ~~~
+     *
+     * @see Crafty.e
+     */
+    c: function (compName, component) {
+        components[compName] = component;
+    },
 
-            // loop over the globally-attached events
-            global_callbacks = hdl['global'];
-            found_match = false;
-            for (i=0, l=global_callbacks.length; i < l; i++) {
-                if (global_callbacks[i] === callback) {
-                    found_match = true;
-                    global_callbacks.splice(i, 1);
+    /**@
+     * #Crafty.trigger
+     * @category Core, Events
+     * @sign public void Crafty.trigger(String eventName, * data)
+     * @param eventName - Name of the event to trigger
+     * @param data - Arbitrary data to pass into the callback as an argument
+     *
+     * This method will trigger every single callback attached to the event name. This means
+     * every global event and every entity that has a callback.
+     *
+     * @see Crafty.bind
+     */
+    trigger: function (event, data) {
+
+        // (To learn how the handlers object works, see inline comment at Crafty.bind)
+        var hdl = handlers[event],
+            h, i, l, callbacks, context;
+        //loop over every object bound
+        for (h in hdl) {
+
+            // Check whether h needs to be processed
+            if (!hdl.hasOwnProperty(h)) continue;
+            callbacks = hdl[h];
+            if (!callbacks || callbacks.length === 0) continue;
+
+            //if an entity, call with that context; else the global context
+            if (entities[h])
+                context = Crafty(+h);
+            else
+                context = Crafty;
+
+            //loop over every handler within object
+            for (i = 0; i < callbacks.length; i++) {
+                // Remove a callback if it has been deleted
+                if (typeof callbacks[i] === "undefined") {
+                    callbacks.splice(i, 1);
                     i--;
-                }
+                } else
+                    callbacks[i].call(context, data);
             }
-            return found_match;
-        },
-
-        /**@
-        * #Crafty.frame
-        * @category Core
-        * @sign public Number Crafty.frame(void)
-        * Returns the current frame number
-        */
-        frame: function () {
-            return frame;
-        },
-
-        components: function () {
-            return components;
-        },
-
-        isComp: function (comp) {
-            return comp in components;
-        },
-
-        debug: function () {
-            return entities;
-        },
-
-        /**@
-        * #Crafty.settings
-        * @category Core
-        * Modify the inner workings of Crafty through the settings.
-        */
-        settings: (function () {
-            var states = {},
-            callbacks = {};
+        }
+    },
 
-            return {
-            /**@
-            * #Crafty.settings.register
-            * @comp Crafty.settings
-            * @sign public void Crafty.settings.register(String settingName, Function callback)
-            * @param settingName - Name of the setting
-            * @param callback - Function to execute when use modifies setting
-            * 
-            * Use this to register custom settings. Callback will be executed when `Crafty.settings.modify` is used.
-            * 
-            * @see Crafty.settings.modify
-            */
-                register: function (setting, callback) {
-                    callbacks[setting] = callback;
-                },
+    /**@
+     * #Crafty.bind
+     * @category Core, Events
+     * @sign public Number bind(String eventName, Function callback)
+     * @param eventName - Name of the event to bind to
+     * @param callback - Method to execute upon event triggered
+     * @returns ID of the current callback used to unbind
+     *
+     * Binds to a global event. Method will be executed when `Crafty.trigger` is used
+     * with the event name.
+     *
+     * @see Crafty.trigger, Crafty.unbind
+     */
+    bind: function (event, callback) {
+
+        // Background: The structure of the global object "handlers"
+        // ---------------------------------------------------------
+        // Here is an example of what "handlers" can look like:
+        // handlers ===
+        //    { Move:  {5:[fnA], 6:[fnB, fnC], global:[fnD]},
+        //     Change: {6:[fnE]}
+        //    }
+        // In this example, when the 'Move' event is triggered on entity #6 (e.g.
+        // entity6.trigger('Move')), it causes the execution of fnB() and fnC(). When
+        // the Move event is triggered globally (i.e. Crafty.trigger('Move')), it
+        // will execute fnA, fnB, fnC, fnD.
+        // 
+        // In this example, "this" is bound to entity #6 whenever fnB() is executed, and
+        // "this" is bound to Crafty whenever fnD() is executed.
+        //
+        // In other words, the structure of "handlers" is:
+        //
+        // handlers[event][entityID or 'global'] === (Array of callback functions)
+
+        if (!handlers[event]) handlers[event] = {};
+        var hdl = handlers[event];
+
+        if (!hdl.global) hdl.global = [];
+        return hdl.global.push(callback) - 1;
+    },
 
-            /**@
-            * #Crafty.settings.modify
-            * @comp Crafty.settings
-            * @sign public void Crafty.settings.modify(String settingName, * value)
-            * @param settingName - Name of the setting
-            * @param value - Value to set the setting to
-            * 
-            * Modify settings through this method.
-            * 
-            * @see Crafty.settings.register, Crafty.settings.get
-            */
-                modify: function (setting, value) {
-                    if (!callbacks[setting]) return;
-                    callbacks[setting].call(states[setting], value);
-                    states[setting] = value;
-                },
 
-            /**@
-            * #Crafty.settings.get
-            * @comp Crafty.settings
-            * @sign public * Crafty.settings.get(String settingName)
-            * @param settingName - Name of the setting
-            * @returns Current value of the setting
-            * 
-            * Returns the current value of the setting.
-            * 
-            * @see Crafty.settings.register, Crafty.settings.get
-            */
-                get: function (setting) {
-                    return states[setting];
-                }
-            };
-        })(),
+    /**@
+     * #Crafty.uniqueBind
+     * @category Core, Events
+     * @sign public Number uniqueBind(String eventName, Function callback)
+     * @param eventName - Name of the event to bind to
+     * @param callback - Method to execute upon event triggered
+     * @returns ID of the current callback used to unbind
+     *
+     * Works like Crafty.bind, but prevents a callback from being bound multiple times.
+     *
+     * @see Crafty.bind
+     */
+    uniqueBind: function (event, callback) {
+        this.unbind(event, callback);
+        this.bind(event, callback);
 
-        clone: clone
-    });
+    },
 
-    /**
-    * Return a unique ID
-    */
-    function UID() {
-        var id = GUID++;
-        //if GUID is not unique
-        if (id in entities) {
-            return UID(); //recurse until it is unique
+    /**@
+     * #Crafty.one
+     * @category Core, Events
+     * @sign public Number one(String eventName, Function callback)
+     * @param eventName - Name of the event to bind to
+     * @param callback - Method to execute upon event triggered
+     * @returns ID of the current callback used to unbind
+     *
+     * Works like Crafty.bind, but will be unbound once the event triggers.
+     *
+     * @see Crafty.bind
+     */
+    one: function (event, callback) {
+        var self = this;
+        var oneHandler = function (data) {
+            callback.call(self, data);
+            self.unbind(event, oneHandler);
+        };
+        return self.bind(event, oneHandler);
+
+    },
+
+    /**@
+     * #Crafty.unbind
+     * @category Core, Events
+     * @sign public Boolean Crafty.unbind(String eventName, Function callback)
+     * @param eventName - Name of the event to unbind
+     * @param callback - Function to unbind
+     * @sign public Boolean Crafty.unbind(String eventName, Number callbackID)
+     * @param callbackID - ID of the callback
+     * @returns True or false depending on if a callback was unbound
+     * Unbind any event from any entity or global event.
+     * @example
+     * ~~~
+     *    var play_gameover_sound = function () {...};
+     *    Crafty.bind('GameOver', play_gameover_sound);
+     *    ...
+     *    Crafty.unbind('GameOver', play_gameover_sound);
+     * ~~~
+     *
+     * The first line defines a callback function. The second line binds that
+     * function so that `Crafty.trigger('GameOver')` causes that function to
+     * run. The third line unbinds that function.
+     *
+     * ~~~
+     *    Crafty.unbind('GameOver');
+     * ~~~
+     *
+     * This unbinds ALL global callbacks for the event 'GameOver'. That
+     * includes all callbacks attached by `Crafty.bind('GameOver', ...)`, but
+     * none of the callbacks attached by `some_entity.bind('GameOver', ...)`.
+     */
+    unbind: function (event, callback) {
+        // (To learn how the handlers object works, see inline comment at Crafty.bind)
+        var hdl = handlers[event],
+            i, l, global_callbacks, found_match;
+
+        if (hdl === undefined || hdl.global === undefined || hdl.global.length === 0) {
+            return false;
         }
-        return id;
-    }
+
+        // If no callback was supplied, delete everything
+        if (arguments.length === 1) {
+            delete hdl.global;
+            return true;
+        }
+
+        // loop over the globally-attached events
+        global_callbacks = hdl.global;
+        found_match = false;
+        for (i = 0, l = global_callbacks.length; i < l; i++) {
+            if (global_callbacks[i] === callback) {
+                found_match = true;
+                delete global_callbacks[i];
+            }
+        }
+        return found_match;
+    },
 
     /**@
-    * #Crafty.clone
-    * @category Core
-    * @sign public Object .clone(Object obj)
-    * @param obj - an object
-    * 
-    * Deep copy (a.k.a clone) of an object.
-    */
-    function clone(obj) {
-        if (obj === null || typeof(obj) != 'object')
-            return obj;
+     * #Crafty.frame
+     * @category Core
+     * @sign public Number Crafty.frame(void)
+     * Returns the current frame number
+     */
+    frame: function () {
+        return frame;
+    },
 
-        var temp = obj.constructor(); // changed
+    components: function () {
+        return components;
+    },
 
-        for (var key in obj)
-            temp[key] = clone(obj[key]);
-        return temp;
-    }
+    isComp: function (comp) {
+        return comp in components;
+    },
 
-    Crafty.bind("Load", function () {
-        if (!Crafty.support.setter && Crafty.support.defineProperty) {
-            noSetter = [];
-            Crafty.bind("EnterFrame", function () {
-                var i = 0, l = noSetter.length, current;
-                for (; i < l; ++i) {
-                    current = noSetter[i];
-                    if (current.obj[current.prop] !== current.obj['_' + current.prop]) {
-                        current.fn.call(current.obj, current.obj[current.prop]);
-                    }
-                }
-            });
+    debug: function (str) {
+        // access internal variables - handlers or entities
+        if (str === 'handlers') {
+            return handlers;
         }
-    });
+        return entities;
+    },
+
+    /**@
+     * #Crafty.settings
+     * @category Core
+     * Modify the inner workings of Crafty through the settings.
+     */
+    settings: (function () {
+        var states = {},
+            callbacks = {};
+
+        return {
+            /**@
+             * #Crafty.settings.register
+             * @comp Crafty.settings
+             * @sign public void Crafty.settings.register(String settingName, Function callback)
+             * @param settingName - Name of the setting
+             * @param callback - Function to execute when use modifies setting
+             *
+             * Use this to register custom settings. Callback will be executed when `Crafty.settings.modify` is used.
+             *
+             * @see Crafty.settings.modify
+             */
+            register: function (setting, callback) {
+                callbacks[setting] = callback;
+            },
+
+            /**@
+             * #Crafty.settings.modify
+             * @comp Crafty.settings
+             * @sign public void Crafty.settings.modify(String settingName, * value)
+             * @param settingName - Name of the setting
+             * @param value - Value to set the setting to
+             *
+             * Modify settings through this method.
+             *
+             * @see Crafty.settings.register, Crafty.settings.get
+             */
+            modify: function (setting, value) {
+                if (!callbacks[setting]) return;
+                callbacks[setting].call(states[setting], value);
+                states[setting] = value;
+            },
+
+            /**@
+             * #Crafty.settings.get
+             * @comp Crafty.settings
+             * @sign public * Crafty.settings.get(String settingName)
+             * @param settingName - Name of the setting
+             * @returns Current value of the setting
+             *
+             * Returns the current value of the setting.
+             *
+             * @see Crafty.settings.register, Crafty.settings.get
+             */
+            get: function (setting) {
+                return states[setting];
+            }
+        };
+    })(),
 
-    initComponents(Crafty, window, window.document);
+    clone: clone
+});
 
-    //make Crafty global
-    window.Crafty = Crafty;
+/**
+ * Return a unique ID
+ */
 
-    if (typeof define === 'function') {
-        define('crafty', [], function() { return Crafty; });
+function UID() {
+    var id = GUID++;
+    //if GUID is not unique
+    if (id in entities) {
+        return UID(); //recurse until it is unique
+    }
+    return id;
+}
+
+/**@
+ * #Crafty.clone
+ * @category Core
+ * @sign public Object .clone(Object obj)
+ * @param obj - an object
+ *
+ * Deep copy (a.k.a clone) of an object.
+ */
+
+function clone(obj) {
+    if (obj === null || typeof (obj) != 'object')
+        return obj;
+
+    var temp = obj.constructor(); // changed
+
+    for (var key in obj)
+        temp[key] = clone(obj[key]);
+    return temp;
+}
+
+Crafty.bind("Load", function () {
+    if (!Crafty.support.setter && Crafty.support.defineProperty) {
+        noSetter = [];
+        Crafty.bind("EnterFrame", function () {
+            var i = 0,
+                l = noSetter.length,
+                current;
+            for (; i < l; ++i) {
+                current = noSetter[i];
+                if (current.obj[current.prop] !== current.obj['_' + current.prop]) {
+                    current.fn.call(current.obj, current.obj[current.prop]);
+                }
+            }
+        });
     }
-})(window,
+});
+
+
+// export Crafty
+if (typeof define === 'function') { // AMD
+    define('crafty', [], function () {
+        return Crafty;
+    });
+} else if (typeof exports === 'object') { // CommonJS
+    module.exports = Crafty;
+}
+
+window.Crafty = Crafty;
+
diff --git a/src/device.js b/src/device.js
index 81d6b61a..9050fe4e 100644
--- a/src/device.js
+++ b/src/device.js
@@ -1,107 +1,110 @@
+var Crafty = require('./core.js'),
+    document = window.document;
+
 Crafty.extend({
     /**@
-    * #Crafty.device
-    * @category Misc
-    */
-    device : {
-        _deviceOrientationCallback : false,
-        _deviceMotionCallback : false,
+     * #Crafty.device
+     * @category Misc
+     */
+    device: {
+        _deviceOrientationCallback: false,
+        _deviceMotionCallback: false,
 
         /**
-        * The HTML5 DeviceOrientation event returns three pieces of data:
-        *  * alpha the direction the device is facing according to the compass
-        *  * beta the angle in degrees the device is tilted front-to-back
-        *  * gamma the angle in degrees the device is tilted left-to-right.
-        *  * The angles values increase as you tilt the device to the right or towards you.
-        *
-        * Since Firefox uses the MozOrientationEvent which returns similar data but
-        * using different parameters and a different measurement system, we want to
-        * normalize that before we pass it to our _deviceOrientationCallback function.
-        *
-        * @param eventData HTML5 DeviceOrientation event
-        */
-        _normalizeDeviceOrientation : function(eventData) {
+         * The HTML5 DeviceOrientation event returns three pieces of data:
+         *  * alpha the direction the device is facing according to the compass
+         *  * beta the angle in degrees the device is tilted front-to-back
+         *  * gamma the angle in degrees the device is tilted left-to-right.
+         *  * The angles values increase as you tilt the device to the right or towards you.
+         *
+         * Since Firefox uses the MozOrientationEvent which returns similar data but
+         * using different parameters and a different measurement system, we want to
+         * normalize that before we pass it to our _deviceOrientationCallback function.
+         *
+         * @param eventData HTML5 DeviceOrientation event
+         */
+        _normalizeDeviceOrientation: function (eventData) {
             var data;
             if (window.DeviceOrientationEvent) {
                 data = {
                     // gamma is the left-to-right tilt in degrees, where right is positive
-                    'tiltLR'    :    eventData.gamma,
+                    'tiltLR': eventData.gamma,
                     // beta is the front-to-back tilt in degrees, where front is positive
-                    'tiltFB'    :     eventData.beta,
+                    'tiltFB': eventData.beta,
                     // alpha is the compass direction the device is facing in degrees
-                    'dir'         :     eventData.alpha,
+                    'dir': eventData.alpha,
                     // deviceorientation does not provide this data
-                    'motUD'     :     null
-                }
+                    'motUD': null
+                };
             } else if (window.OrientationEvent) {
                 data = {
                     // x is the left-to-right tilt from -1 to +1, so we need to convert to degrees
-                    'tiltLR'    :    eventData.x * 90,
+                    'tiltLR': eventData.x * 90,
                     // y is the front-to-back tilt from -1 to +1, so we need to convert to degrees
                     // We also need to invert the value so tilting the device towards us (forward)
                     // results in a positive value.
-                    'tiltFB'    :     eventData.y * -90,
+                    'tiltFB': eventData.y * -90,
                     // MozOrientation does not provide this data
-                    'dir'         :     null,
+                    'dir': null,
                     // z is the vertical acceleration of the device
-                    'motUD'     :     eventData.z
-                }
+                    'motUD': eventData.z
+                };
             }
 
             Crafty.device._deviceOrientationCallback(data);
         },
 
         /**
-        * @param eventData HTML5 DeviceMotion event
-        */
-        _normalizeDeviceMotion : function(eventData) {
-            var acceleration    = eventData.accelerationIncludingGravity,
-                facingUp        = (acceleration.z > 0) ? +1 : -1;
+         * @param eventData HTML5 DeviceMotion event
+         */
+        _normalizeDeviceMotion: function (eventData) {
+            var acceleration = eventData.accelerationIncludingGravity,
+                facingUp = (acceleration.z > 0) ? +1 : -1;
 
             var data = {
                 // Grab the acceleration including gravity from the results
-                'acceleration' : acceleration,
-                'rawAcceleration' : "["+  Math.round(acceleration.x) +", "+Math.round(acceleration.y) + ", " + Math.round(acceleration.z) + "]",
+                'acceleration': acceleration,
+                'rawAcceleration': "[" + Math.round(acceleration.x) + ", " + Math.round(acceleration.y) + ", " + Math.round(acceleration.z) + "]",
                 // Z is the acceleration in the Z axis, and if the device is facing up or down
-                'facingUp' : facingUp,
+                'facingUp': facingUp,
                 // Convert the value from acceleration to degrees acceleration.x|y is the
                 // acceleration according to gravity, we'll assume we're on Earth and divide
                 // by 9.81 (earth gravity) to get a percentage value, and then multiply that
                 // by 90 to convert to degrees.
-                'tiltLR' : Math.round(((acceleration.x) / 9.81) * -90),
-                'tiltFB' : Math.round(((acceleration.y + 9.81) / 9.81) * 90 * facingUp)
+                'tiltLR': Math.round(((acceleration.x) / 9.81) * -90),
+                'tiltFB': Math.round(((acceleration.y + 9.81) / 9.81) * 90 * facingUp)
             };
 
             Crafty.device._deviceMotionCallback(data);
         },
 
         /**@
-        * #Crafty.device.deviceOrientation
-        * @comp Crafty.device
-        * @sign public Crafty.device.deviceOrientation(Function callback)
-        * @param callback - Callback method executed once as soon as device orientation is change
-        *
-        * Do something with normalized device orientation data:
-        * ~~~
-        * {
-        *   'tiltLR'    :   'gamma the angle in degrees the device is tilted left-to-right.',
-        *   'tiltFB'    :   'beta the angle in degrees the device is tilted front-to-back',
-        *   'dir'       :   'alpha the direction the device is facing according to the compass',
-        *   'motUD'     :   'The angles values increase as you tilt the device to the right or towards you.'
-        * }
-        * ~~~
-        *
-        * @example
-        * ~~~
-        * // Get DeviceOrientation event normalized data.
-        * Crafty.device.deviceOrientation(function(data){
-        *     console.log('data.tiltLR : '+Math.round(data.tiltLR)+', data.tiltFB : '+Math.round(data.tiltFB)+', data.dir : '+Math.round(data.dir)+', data.motUD : '+data.motUD+'');
-        * });
-        * ~~~
-        *
-        * See browser support at http://caniuse.com/#search=device orientation.
-        */
-        deviceOrientation : function(func) {
+         * #Crafty.device.deviceOrientation
+         * @comp Crafty.device
+         * @sign public Crafty.device.deviceOrientation(Function callback)
+         * @param callback - Callback method executed once as soon as device orientation is change
+         *
+         * Do something with normalized device orientation data:
+         * ~~~
+         * {
+         *   'tiltLR'    :   'gamma the angle in degrees the device is tilted left-to-right.',
+         *   'tiltFB'    :   'beta the angle in degrees the device is tilted front-to-back',
+         *   'dir'       :   'alpha the direction the device is facing according to the compass',
+         *   'motUD'     :   'The angles values increase as you tilt the device to the right or towards you.'
+         * }
+         * ~~~
+         *
+         * @example
+         * ~~~
+         * // Get DeviceOrientation event normalized data.
+         * Crafty.device.deviceOrientation(function(data){
+         *     console.log('data.tiltLR : '+Math.round(data.tiltLR)+', data.tiltFB : '+Math.round(data.tiltFB)+', data.dir : '+Math.round(data.dir)+', data.motUD : '+data.motUD+'');
+         * });
+         * ~~~
+         *
+         * See browser support at http://caniuse.com/#search=device orientation.
+         */
+        deviceOrientation: function (func) {
             this._deviceOrientationCallback = func;
             if (Crafty.support.deviceorientation) {
                 if (window.DeviceOrientationEvent) {
@@ -109,39 +112,39 @@ Crafty.extend({
                     Crafty.addEvent(this, window, 'deviceorientation', this._normalizeDeviceOrientation);
                 } else if (window.OrientationEvent) {
                     // Listen for the MozOrientation event and handle OrientationData object
-                    Crafty.addEvent(this, window, 'MozOrientation', this._normalizeDeviceOrientation)
+                    Crafty.addEvent(this, window, 'MozOrientation', this._normalizeDeviceOrientation);
                 }
             }
         },
 
         /**@
-        * #Crafty.device.deviceMotion
-        * @comp Crafty.device
-        * @sign public Crafty.device.deviceMotion(Function callback)
-        * @param callback - Callback method executed once as soon as device motion is change
-        *
-        * Do something with normalized device motion data:
-        * ~~~
-        * {
-        *     'acceleration' : ' Grab the acceleration including gravity from the results',
-        *     'rawAcceleration' : 'Display the raw acceleration data',
-        *     'facingUp' : 'Z is the acceleration in the Z axis, and if the device is facing up or down',
-        *     'tiltLR' : 'Convert the value from acceleration to degrees. acceleration.x is the acceleration according to gravity, we'll assume we're on Earth and divide by 9.81 (earth gravity) to get a percentage value, and then multiply that by 90 to convert to degrees.',
-        *     'tiltFB' : 'Convert the value from acceleration to degrees.'
-        * }
-        * ~~~
-        *
-        * @example
-        * ~~~
-        * // Get DeviceMotion event normalized data.
-        * Crafty.device.deviceMotion(function(data){
-        *     console.log('data.moAccel : '+data.rawAcceleration+', data.moCalcTiltLR : '+Math.round(data.tiltLR)+', data.moCalcTiltFB : '+Math.round(data.tiltFB)+'');
-        * });
-        * ~~~
-        *
-        * See browser support at http://caniuse.com/#search=motion.
-        */
-        deviceMotion : function(func) {
+         * #Crafty.device.deviceMotion
+         * @comp Crafty.device
+         * @sign public Crafty.device.deviceMotion(Function callback)
+         * @param callback - Callback method executed once as soon as device motion is change
+         *
+         * Do something with normalized device motion data:
+         * ~~~
+         * {
+         *     'acceleration' : ' Grab the acceleration including gravity from the results',
+         *     'rawAcceleration' : 'Display the raw acceleration data',
+         *     'facingUp' : 'Z is the acceleration in the Z axis, and if the device is facing up or down',
+         *     'tiltLR' : 'Convert the value from acceleration to degrees. acceleration.x is the acceleration according to gravity, we'll assume we're on Earth and divide by 9.81 (earth gravity) to get a percentage value, and then multiply that by 90 to convert to degrees.',
+         *     'tiltFB' : 'Convert the value from acceleration to degrees.'
+         * }
+         * ~~~
+         *
+         * @example
+         * ~~~
+         * // Get DeviceMotion event normalized data.
+         * Crafty.device.deviceMotion(function(data){
+         *     console.log('data.moAccel : '+data.rawAcceleration+', data.moCalcTiltLR : '+Math.round(data.tiltLR)+', data.moCalcTiltFB : '+Math.round(data.tiltFB)+'');
+         * });
+         * ~~~
+         *
+         * See browser support at http://caniuse.com/#search=motion.
+         */
+        deviceMotion: function (func) {
             this._deviceMotionCallback = func;
             if (Crafty.support.devicemotion) {
                 if (window.DeviceMotionEvent) {
diff --git a/src/diamondiso.js b/src/diamondiso.js
index f24afdd5..246c358f 100644
--- a/src/diamondiso.js
+++ b/src/diamondiso.js
@@ -1,155 +1,158 @@
+var Crafty = require('./core.js'),
+    document = window.document;
 
 Crafty.extend({
     /**@
-* #Crafty.diamondIso
-* @category 2D
-* Place entities in a 45deg diamond isometric fashion. It is similar to isometric but has another grid locations
-*/
-    diamondIso:{
+     * #Crafty.diamondIso
+     * @category 2D
+     * Place entities in a 45deg diamond isometric fashion. It is similar to isometric but has another grid locations
+     */
+    diamondIso: {
         _tile: {
             width: 0,
             height: 0,
-            r:0
+            r: 0
         },
-        _map:{
-            width:0,
-            height:0,
-            x:0,
-            y:0
+        _map: {
+            width: 0,
+            height: 0,
+            x: 0,
+            y: 0
         },
-        
-        _origin:{
-            x:0,
-            y:0
+
+        _origin: {
+            x: 0,
+            y: 0
         },
         /**@
-        * #Crafty.diamondIso.init
-        * @comp Crafty.diamondIso
-        * @sign public this Crafty.diamondIso.init(Number tileWidth,Number tileHeight,Number mapWidth,Number mapHeight)
-        * @param tileWidth - The size of base tile width in Pixel
-        * @param tileHeight - The size of base tile height in Pixel
-        * @param mapWidth - The width of whole map in Tiles
-        * @param mapHeight - The height of whole map in Tiles
-        * 
-        * Method used to initialize the size of the isometric placement.
-        * Recommended to use a size alues in the power of `2` (128, 64 or 32).
-        * This makes it easy to calculate positions and implement zooming.
-        * 
-        * @example
-        * ~~~
-        * var iso = Crafty.diamondIso.init(64,128,20,20);
-        * ~~~
-        * 
-        * @see Crafty.diamondIso.place
-        */
-        init:function(tw, th,mw,mh){
-            this._tile.width = parseInt(tw);
-            this._tile.height = parseInt(th)||parseInt(tw)/2;
+         * #Crafty.diamondIso.init
+         * @comp Crafty.diamondIso
+         * @sign public this Crafty.diamondIso.init(Number tileWidth,Number tileHeight,Number mapWidth,Number mapHeight)
+         * @param tileWidth - The size of base tile width in Pixel
+         * @param tileHeight - The size of base tile height in Pixel
+         * @param mapWidth - The width of whole map in Tiles
+         * @param mapHeight - The height of whole map in Tiles
+         *
+         * Method used to initialize the size of the isometric placement.
+         * Recommended to use a size alues in the power of `2` (128, 64 or 32).
+         * This makes it easy to calculate positions and implement zooming.
+         *
+         * @example
+         * ~~~
+         * var iso = Crafty.diamondIso.init(64,128,20,20);
+         * ~~~
+         *
+         * @see Crafty.diamondIso.place
+         */
+        init: function (tw, th, mw, mh) {
+            this._tile.width = parseInt(tw, 10);
+            this._tile.height = parseInt(th, 10) || parseInt(tw, 10) / 2;
             this._tile.r = this._tile.width / this._tile.height;
-            
-            this._map.width = parseInt(mw);
-            this._map.height = parseInt(mh) || parseInt(mw);
-       
+
+            this._map.width = parseInt(mw, 10);
+            this._map.height = parseInt(mh, 10) || parseInt(mw, 10);
+
             this._origin.x = this._map.height * this._tile.width / 2;
             return this;
         },
-   /**@
-        * #Crafty.diamondIso.place
-        * @comp Crafty.diamondIso
-        * @sign public this Crafty.diamondIso.place(Entity tile,Number x, Number y, Number layer)
-        * @param x - The `x` position to place the tile
-        * @param y - The `y` position to place the tile
-        * @param layer - The `z` position to place the tile (calculated by y position * layer)
-        * @param tile - The entity that should be position in the isometric fashion
-        * 
-        * Use this method to place an entity in an isometric grid.
-        * 
-        * @example
-        * ~~~
-        * var iso = Crafty.diamondIso.init(64,128,20,20);
-        * isos.place(Crafty.e('2D, DOM, Color').color('red').attr({w:128, h:128}),1,1,2);
-        * ~~~
-        * 
-        * @see Crafty.diamondIso.size
-        */
-        place:function(obj,x,y,layer){
-            var pos = this.pos2px(x,y);
-            if(!layer) layer = 1;
-            var marginX = 0,marginY = 0;
-            if(obj.__margin !== undefined){
+        /**@
+         * #Crafty.diamondIso.place
+         * @comp Crafty.diamondIso
+         * @sign public this Crafty.diamondIso.place(Entity tile,Number x, Number y, Number layer)
+         * @param x - The `x` position to place the tile
+         * @param y - The `y` position to place the tile
+         * @param layer - The `z` position to place the tile (calculated by y position * layer)
+         * @param tile - The entity that should be position in the isometric fashion
+         *
+         * Use this method to place an entity in an isometric grid.
+         *
+         * @example
+         * ~~~
+         * var iso = Crafty.diamondIso.init(64,128,20,20);
+         * isos.place(Crafty.e('2D, DOM, Color').color('red').attr({w:128, h:128}),1,1,2);
+         * ~~~
+         *
+         * @see Crafty.diamondIso.size
+         */
+        place: function (obj, x, y, layer) {
+            var pos = this.pos2px(x, y);
+            if (!layer) layer = 1;
+            var marginX = 0,
+                marginY = 0;
+            if (obj.__margin !== undefined) {
                 marginX = obj.__margin[0];
                 marginY = obj.__margin[1];
             }
-          
-            obj.x = pos.left+(marginX);
-            obj.y = (pos.top+marginY)-obj.h;
-            obj.z = (pos.top)*layer;
-           
-            
+
+            obj.x = pos.left + (marginX);
+            obj.y = (pos.top + marginY) - obj.h;
+            obj.z = (pos.top) * layer;
+
+
         },
-        centerAt:function(x,y){
-            var pos = this.pos2px(x,y);
-            Crafty.viewport.x = -pos.left+Crafty.viewport.width/2-this._tile.width;
-            Crafty.viewport.y = -pos.top+Crafty.viewport.height/2;
-        
+        centerAt: function (x, y) {
+            var pos = this.pos2px(x, y);
+            Crafty.viewport.x = -pos.left + Crafty.viewport.width / 2 - this._tile.width;
+            Crafty.viewport.y = -pos.top + Crafty.viewport.height / 2;
+
         },
-        area:function(offset){
-            if(!offset) offset = 0;
+        area: function (offset) {
+            if (!offset) offset = 0;
             //calculate the corners
             var vp = Crafty.viewport.rect();
-            var ow = offset*this._tile.width;
-            var oh = offset*this._tile.height;
-            vp._x -= (this._tile.width/2+ow);
-            vp._y -= (this._tile.height/2+oh);
-            vp._w += (this._tile.width/2+ow);
-            vp._h += (this._tile.height/2+oh); 
+            var ow = offset * this._tile.width;
+            var oh = offset * this._tile.height;
+            vp._x -= (this._tile.width / 2 + ow);
+            vp._y -= (this._tile.height / 2 + oh);
+            vp._w += (this._tile.width / 2 + ow);
+            vp._h += (this._tile.height / 2 + oh);
             /*  Crafty.viewport.x = -vp._x;
             Crafty.viewport.y = -vp._y;    
             Crafty.viewport.width = vp._w;
             Crafty.viewport.height = vp._h;   */
-            
+
             var grid = [];
-            for(var y = vp._y,yl = (vp._y+vp._h);y b._x && a._y + a._h > b._y);
             }
-            changed_objs.length = 0;
-            dirty_rects.length = 0
-
-		},
-
-		/** Takes the current and previous position of an object, and pushes the dirty regions onto the stack
-		* 	If the entity has only moved/changed a little bit, the regions are squashed together */
-		createDirty: function(obj){
-			var rect = obj._mbr || obj;
-			if (obj.staleRect){
-				//If overlap, merge stale and current position together, then return
-				//Otherwise just push stale rectangle
-				if (  rectManager.overlap( obj.staleRect, rect)){
-					rectManager.merge(obj.staleRect, rect, obj.staleRect)
-					dirty_rects.push(obj.staleRect)
-					return
-				}
-				else{
-					dirty_rects.push(obj.staleRect)
-				}
-			}
-
-			// We use the intermediate "currentRect" so it can be modified without messing with obj
-			obj.currentRect._x = rect._x;
-			obj.currentRect._y = rect._y;
-			obj.currentRect._w = rect._w;
-			obj.currentRect._h = rect._h;
-			dirty_rects.push(obj.currentRect)
-			
-		},
-
-		/** Checks whether two rectangles overlap */
-		overlap: function(a, b){
-			return (a._x < b._x + b._w && a._y < b._y + b._h 
-					&& a._x + a._w > b._x && a._y + a._h > b._y)
-		}
-
-	};
-
-	return {
-		/**@
-		* #Crafty.DrawManager.total2D
-		* @comp Crafty.DrawManager
-		* 
-		* Total number of the entities that have the `2D` component.
-		*/
-		total2D: Crafty("2D").length,
-
-		/**@
-		* #Crafty.DrawManager.onScreen
-		* @comp Crafty.DrawManager
-		* @sign public Crafty.DrawManager.onScreen(Object rect)
-		* @param rect - A rectangle with field {_x: x_val, _y: y_val, _w: w_val, _h: h_val}
-		* 
-		* Test if a rectangle is completely in viewport
-		*/
-		onScreen: function (rect) {
-			return Crafty.viewport._x + rect._x + rect._w > 0 && Crafty.viewport._y + rect._y + rect._h > 0 &&
-				   Crafty.viewport._x + rect._x < Crafty.viewport.width && Crafty.viewport._y + rect._y < Crafty.viewport.height;
-		},
-
-		/**@
-		* #Crafty.DrawManager.mergeSet
-		* @comp Crafty.DrawManager
-		* @sign public Object Crafty.DrawManager.mergeSet(Object set)
-		* @param set - an array of rectangular regions
-		* 
-		* Merge any consecutive, overlapping rects into each other.
-		* Its an optimization for the redraw regions.
-		*
-		* The order of set isn't strictly meaningful, 
-		* but overlapping objects will often cause each other to change, 
-		* and so might be consecutive.
-		*/
-		mergeSet: function (set) {
-			var i = 0;
-			while (i < set.length-1) {
-				// If current and next overlap, merge them together into the first, removing the second
-				// Then skip the index backwards to compare the previous pair.
-				// Otherwise skip forward
-				if (rectManager.overlap(set[i], set[i+1])){
-					rectManager.merge(set[i], set[i+1], set[i]);
-					set.splice(i+1, 1);
-					if (i>0) i--
-				} else
-					i++;
-			}
-		
-			return set;
-		},
-
-		/**@
-		* #Crafty.DrawManager.addCanvas
-		* @comp Crafty.DrawManager
-		* @sign public Crafty.DrawManager.addCanvas(ent)
-		* @param ent - The entity to add
-		* 
-		* Add an entity to the list of Canvas objects to draw
-		*/
-		addCanvas: function addCanvas(ent){
-			changed_objs.push(ent)
-		},
-
-		/**@
-		* #Crafty.DrawManager.addDom
-		* @comp Crafty.DrawManager
-		* @sign public Crafty.DrawManager.addDom(ent)
-		* @param ent - The entity to add
-		* 
-		* Add an entity to the list of DOM object to draw
-		*/
-		addDom: function addDom(ent) {
-				dom.push(ent);
-		},
-
-		/**@
-		* #Crafty.DrawManager.debug
-		* @comp Crafty.DrawManager
-		* @sign public Crafty.DrawManager.debug()
-		*/
-		debug: function () {
-			console.log(changed_objs, dom);
-		},
-
-		/**@
-		* #Crafty.DrawManager.drawAll
-		* @comp Crafty.DrawManager
-		* @sign public Crafty.DrawManager.drawAll([Object rect])
-        * @param rect - a rectangular region {_x: x_val, _y: y_val, _w: w_val, _h: h_val}
-        * ~~~
-		* - If rect is omitted, redraw within the viewport
-		* - If rect is provided, redraw within the rect
-		* ~~~
-		*/
-		drawAll: function (rect) {
-			var rect = rect || Crafty.viewport.rect(),
-				q = Crafty.map.search(rect),
-				i = 0,
-				l = q.length,
-				ctx = Crafty.canvas.context,
-				current;
-
-			ctx.clearRect(rect._x, rect._y, rect._w, rect._h);
-
-			//sort the objects by the global Z
-			q.sort(zsort);
-			for (; i < l; i++) {
-				current = q[i];
-				if (current._visible && current.__c.Canvas) {
-					current.draw();
-					current._changed = false;
-				}
-			}
-		},
-
-		/**@
-		* #Crafty.DrawManager.boundingRect
-		* @comp Crafty.DrawManager
-		* @sign public Crafty.DrawManager.boundingRect(set)
-		* @param set - Undocumented
-		* ~~~
-		* - Calculate the common bounding rect of multiple canvas entities.
-		* - Returns coords
-		* ~~~
-		*/
-		boundingRect: function (set) {
-			if (!set || !set.length) return;
-			var newset = [], i = 1,
-			l = set.length, current, master = set[0], tmp;
-			master = [master._x, master._y, master._x + master._w, master._y + master._h];
-			while (i < l) {
-				current = set[i];
-				tmp = [current._x, current._y, current._x + current._w, current._y + current._h];
-				if (tmp[0] < master[0]) master[0] = tmp[0];
-				if (tmp[1] < master[1]) master[1] = tmp[1];
-				if (tmp[2] > master[2]) master[2] = tmp[2];
-				if (tmp[3] > master[3]) master[3] = tmp[3];
-				i++;
-			}
-			tmp = master;
-			master = { _x: tmp[0], _y: tmp[1], _w: tmp[2] - tmp[0], _h: tmp[3] - tmp[1] };
-
-			return master;
-		},
-
-
-
-		/**@
-		* #Crafty.DrawManager.draw
-		* @comp Crafty.DrawManager
-		* @sign public Crafty.DrawManager.draw()
-		* ~~~
-		* - If the number of rects is over 60% of the total number of objects
-		*	do the naive method redrawing `Crafty.DrawManager.drawAll`
-		* - Otherwise, clear the dirty regions, and redraw entities overlapping the dirty regions.
-		* ~~~
-		* 
-        * @see Canvas.draw, DOM.draw
-		*/
-		draw: function draw() {
-			//if no objects have been changed, stop
-			if (!changed_objs.length && !dom.length) return;
-
-			var i = 0, l = changed_objs.length, k = dom.length, rect, q,
-				j, len, obj, ent, ctx = Crafty.canvas.context;
-
-			//loop over all DOM elements needing updating
-			for (; i < k; ++i) {
-				dom[i].draw()._changed = false;
-			}
-			//reset DOM array
-            dom.length = 0;
 
-			//again, stop if no canvas components have changed
-			if (!l) { return; }
-
-			//if the amount of changed objects is over 60% of the total objects
-			//do the naive method redrawing
-			// TODO: I'm not sure this condition really makes that much sense!
-			if (l / this.total2D > 0.6 ) {
-				this.drawAll();
-				rectManager.clean()
-				return;
-			}
-
-			// Calculate dirty_rects from all changed objects, then merge some overlapping regions together
-			for  (i=0; i 0 && Crafty.viewport._y + rect._y + rect._h > 0 &&
+                Crafty.viewport._x + rect._x < Crafty.viewport.width && Crafty.viewport._y + rect._y < Crafty.viewport.height;
+        },
+
+        /**@
+         * #Crafty.DrawManager.mergeSet
+         * @comp Crafty.DrawManager
+         * @sign public Object Crafty.DrawManager.mergeSet(Object set)
+         * @param set - an array of rectangular regions
+         *
+         * Merge any consecutive, overlapping rects into each other.
+         * Its an optimization for the redraw regions.
+         *
+         * The order of set isn't strictly meaningful,
+         * but overlapping objects will often cause each other to change,
+         * and so might be consecutive.
+         */
+        mergeSet: function (set) {
+            var i = 0;
+            while (i < set.length - 1) {
+                // If current and next overlap, merge them together into the first, removing the second
+                // Then skip the index backwards to compare the previous pair.
+                // Otherwise skip forward
+                if (rectManager.overlap(set[i], set[i + 1])) {
+                    rectManager.merge(set[i], set[i + 1], set[i]);
+                    set.splice(i + 1, 1);
+                    if (i > 0) i--;
+                } else
+                    i++;
+            }
+
+            return set;
+        },
+
+        /**@
+         * #Crafty.DrawManager.addCanvas
+         * @comp Crafty.DrawManager
+         * @sign public Crafty.DrawManager.addCanvas(ent)
+         * @param ent - The entity to add
+         *
+         * Add an entity to the list of Canvas objects to draw
+         */
+        addCanvas: function addCanvas(ent) {
+            changed_objs.push(ent);
+        },
+
+        /**@
+         * #Crafty.DrawManager.addDom
+         * @comp Crafty.DrawManager
+         * @sign public Crafty.DrawManager.addDom(ent)
+         * @param ent - The entity to add
+         *
+         * Add an entity to the list of DOM object to draw
+         */
+        addDom: function addDom(ent) {
+            dom.push(ent);
+        },
+
+        /**@
+         * #Crafty.DrawManager.debug
+         * @comp Crafty.DrawManager
+         * @sign public Crafty.DrawManager.debug()
+         */
+        debug: function () {
+            console.log(changed_objs, dom);
+        },
+
+        /**@
+         * #Crafty.DrawManager.drawAll
+         * @comp Crafty.DrawManager
+         * @sign public Crafty.DrawManager.drawAll([Object rect])
+         * @param rect - a rectangular region {_x: x_val, _y: y_val, _w: w_val, _h: h_val}
+         * ~~~
+         * - If rect is omitted, redraw within the viewport
+         * - If rect is provided, redraw within the rect
+         * ~~~
+         */
+        drawAll: function (rect) {
+            rect = rect || Crafty.viewport.rect();
+            var q = Crafty.map.search(rect),
+                i = 0,
+                l = q.length,
+                ctx = Crafty.canvas.context,
+                current;
+
+            ctx.clearRect(rect._x, rect._y, rect._w, rect._h);
+
+            //sort the objects by the global Z
+            q.sort(zsort);
+            for (; i < l; i++) {
+                current = q[i];
+                if (current._visible && current.__c.Canvas) {
+                    current.draw();
+                    current._changed = false;
+                }
+            }
+        },
+
+        /**@
+         * #Crafty.DrawManager.boundingRect
+         * @comp Crafty.DrawManager
+         * @sign public Crafty.DrawManager.boundingRect(set)
+         * @param set - Undocumented
+         * ~~~
+         * - Calculate the common bounding rect of multiple canvas entities.
+         * - Returns coords
+         * ~~~
+         */
+        boundingRect: function (set) {
+            if (!set || !set.length) return;
+            var newset = [],
+                i = 1,
+                l = set.length,
+                current, master = set[0],
+                tmp;
+            master = [master._x, master._y, master._x + master._w, master._y + master._h];
+            while (i < l) {
+                current = set[i];
+                tmp = [current._x, current._y, current._x + current._w, current._y + current._h];
+                if (tmp[0] < master[0]) master[0] = tmp[0];
+                if (tmp[1] < master[1]) master[1] = tmp[1];
+                if (tmp[2] > master[2]) master[2] = tmp[2];
+                if (tmp[3] > master[3]) master[3] = tmp[3];
+                i++;
+            }
+            tmp = master;
+            master = {
+                _x: tmp[0],
+                _y: tmp[1],
+                _w: tmp[2] - tmp[0],
+                _h: tmp[3] - tmp[1]
+            };
+
+            return master;
+        },
+
+
+
+        /**@
+         * #Crafty.DrawManager.renderCanvas
+         * @comp Crafty.DrawManager
+         * @sign public Crafty.DrawManager.renderCanvas()
+         * ~~~
+         * - Triggered by the "RenderScene" event
+         * - If the number of rects is over 60% of the total number of objects
+         *	do the naive method redrawing `Crafty.DrawManager.drawAll`
+         * - Otherwise, clear the dirty regions, and redraw entities overlapping the dirty regions.
+         * ~~~
+         *
+         * @see Canvas.draw
+         */
+
+        renderCanvas: function () {
+            var l = changed_objs.length;
+            if (!l && !dirtyViewport) {
+                return;
+            }
+
+            var i = 0,
+                rect, q,
+                j, len, obj, ent, ctx = Crafty.canvas.context,
+                DM = Crafty.DrawManager;
+
+
+            if (dirtyViewport) {
+                var view = Crafty.viewport;
+                ctx.setTransform(view._scale, 0, 0, view._scale, view.x, view.y);
+
+            }
+            //if the amount of changed objects is over 60% of the total objects
+            //do the naive method redrawing
+            // TODO: I'm not sure this condition really makes that much sense!
+            if (l / DM.total2D > 0.6 || dirtyViewport) {
+                DM.drawAll();
+                rectManager.clean();
+                return;
+            }
+
+            // Calculate dirty_rects from all changed objects, then merge some overlapping regions together
+            for (i = 0; i < l; i++) {
+                rectManager.createDirty(changed_objs[i]);
+            }
+            dirty_rects = DM.mergeSet(dirty_rects);
+
+
+            l = dirty_rects.length;
+            var dupes = [],
+                objs = [];
+            // For each dirty rectangle, find entities near it, and draw the overlapping ones
+            for (i = 0; i < l; ++i) { //loop over every dirty rect
+                rect = dirty_rects[i];
+                dupes.length = 0;
+                objs.length = 0;
+                if (!rect) continue;
+
+                // Find the smallest rectangle with integer coordinates that encloses rect
+                rect._w = rect._x + rect._w;
+                rect._h = rect._y + rect._h;
+                rect._x = (rect._x > 0) ? (rect._x|0) : (rect._x|0) - 1;
+                rect._y = (rect._y > 0) ? (rect._y|0) : (rect._y|0) - 1;
+                rect._w -= rect._x;
+                rect._h -= rect._y;
+                rect._w = (rect._w === (rect._w|0)) ? rect._w : (rect._w|0) + 1;
+                rect._h = (rect._h === (rect._h|0)) ? rect._h : (rect._h|0) + 1;
+
+                //search for ents under dirty rect
+                q = Crafty.map.search(rect, false);
+
+                //clear the rect from the main canvas
+                ctx.clearRect(rect._x, rect._y, rect._w, rect._h);
+
+                //Then clip drawing region to dirty rectangle
+                ctx.save();
+                ctx.beginPath();
+                ctx.rect(rect._x, rect._y, rect._w, rect._h);
+                ctx.clip();
+
+                // Loop over found objects removing dupes and adding visible canvas objects to array
+                for (j = 0, len = q.length; j < len; ++j) {
+                    obj = q[j];
+
+                    if (dupes[obj[0]] || !obj._visible || !obj.__c.Canvas)
+                        continue;
+                    dupes[obj[0]] = true;
+                    objs.push(obj);
+                }
+
+                // Sort objects by z level
+                objs.sort(zsort);
+
+                // Then draw each object in that order
+                for (j = 0, len = objs.length; j < len; ++j) {
+                    obj = objs[j];
+                    var area = obj._mbr || obj;
+                    if (rectManager.overlap(area, rect))
+                        obj.draw();
+                    obj._changed = false;
+                }
+
+                // Close rectangle clipping
+                ctx.closePath();
+                ctx.restore();
+
+            }
+
+            // Draw dirty rectangles for debugging, if that flag is set
+            if (Crafty.DrawManager.debugDirty === true) {
+                ctx.strokeStyle = 'red';
+                for (i = 0, l = dirty_rects.length; i < l; ++i) {
+                    rect = dirty_rects[i];
+                    ctx.strokeRect(rect._x, rect._y, rect._w, rect._h);
+                }
+            }
             //Clean up lists etc
-            rectManager.clean()
+            rectManager.clean();
+
+        },
+
+        /**@
+         * #Crafty.DrawManager.renderDOM
+         * @comp Crafty.DrawManager
+         * @sign public Crafty.DrawManager.renderDOM()
+         * ~~~
+         * When "RenderScene" is triggered, draws all DOM entities that have been flagged
+         * ~~~
+         *
+         * @see DOM.draw
+         */
+        renderDOM: function () {
+            // Adjust the viewport
+            if (dirtyViewport) {
+                var style = Crafty.stage.inner.style,
+                    view = Crafty.viewport;
+
+                style.transform = style[Crafty.support.prefix + "Transform"] = "scale(" + view._scale + ", " + view._scale + ")";
+                style.left = view.x + "px";
+                style.top = view.y + "px";
+                style.zIndex = 10;
+            }
+
+            //if no objects have been changed, stop
+            if (!dom.length) return;
+
+            var i = 0,
+                k = dom.length;
+            //loop over all DOM elements needing updating
+            for (; i < k; ++i) {
+                dom[i].draw()._changed = false;
+            }
+
+            //reset DOM array
+            dom.length = 0;
+
+        }
+
 
-		}
-	};
+    };
 })();
diff --git a/src/extensions.js b/src/extensions.js
index a132d7c9..015fde2f 100644
--- a/src/extensions.js
+++ b/src/extensions.js
@@ -1,66 +1,71 @@
-/**@
-* #Crafty.support
-* @category Misc, Core
-* Determines feature support for what Crafty can do.
-*/
+var Crafty = require('./core.js'),
+    document = window.document;
 
+/**@
+ * #Crafty.support
+ * @category Misc, Core
+ * Determines feature support for what Crafty can do.
+ */
 (function testSupport() {
     var support = Crafty.support = {},
         ua = navigator.userAgent.toLowerCase(),
         match = /(webkit)[ \/]([\w.]+)/.exec(ua) ||
-                /(o)pera(?:.*version)?[ \/]([\w.]+)/.exec(ua) ||
-                /(ms)ie ([\w.]+)/.exec(ua) ||
-                /(moz)illa(?:.*? rv:([\w.]+))?/.exec(ua) || [],
+            /(o)pera(?:.*version)?[ \/]([\w.]+)/.exec(ua) ||
+            /(ms)ie ([\w.]+)/.exec(ua) ||
+            /(moz)illa(?:.*? rv:([\w.]+))?/.exec(ua) || [],
         mobile = /iPad|iPod|iPhone|Android|webOS|IEMobile/i.exec(ua);
 
     /**@
-    * #Crafty.mobile
-    * @comp Crafty.device
-    * 
-    * Determines if Crafty is running on mobile device.
-    * 
-    * If Crafty.mobile is equal true Crafty does some things under hood:
-    * ~~~
-    * - set viewport on max device width and height
-    * - set Crafty.stage.fullscreen on true
-    * - hide window scrollbars
-    * ~~~
-    * 
-    * @see Crafty.viewport
-    */
+     * #Crafty.mobile
+     * @comp Crafty.device
+     *
+     * Determines if Crafty is running on mobile device.
+     *
+     * If Crafty.mobile is equal true Crafty does some things under hood:
+     * ~~~
+     * - set viewport on max device width and height
+     * - set Crafty.stage.fullscreen on true
+     * - hide window scrollbars
+     * ~~~
+     *
+     * @see Crafty.viewport
+     */
     if (mobile) Crafty.mobile = mobile[0];
 
     /**@
-    * #Crafty.support.setter
-    * @comp Crafty.support
-    * Is `__defineSetter__` supported?
-    */
+     * #Crafty.support.setter
+     * @comp Crafty.support
+     * Is `__defineSetter__` supported?
+     */
     support.setter = ('__defineSetter__' in this && '__defineGetter__' in this);
 
     /**@
-    * #Crafty.support.defineProperty
-    * @comp Crafty.support
-    * Is `Object.defineProperty` supported?
-    */
+     * #Crafty.support.defineProperty
+     * @comp Crafty.support
+     * Is `Object.defineProperty` supported?
+     */
     support.defineProperty = (function () {
-        if (!'defineProperty' in Object) return false;
-        try { Object.defineProperty({}, 'x', {}); }
-        catch (e) { return false };
+        if (!('defineProperty' in Object)) return false;
+        try {
+            Object.defineProperty({}, 'x', {});
+        } catch (e) {
+            return false;
+        }
         return true;
     })();
 
     /**@
-    * #Crafty.support.audio
-    * @comp Crafty.support
-    * Is HTML5 `Audio` supported?
-    */
+     * #Crafty.support.audio
+     * @comp Crafty.support
+     * Is HTML5 `Audio` supported?
+     */
     support.audio = ('Audio' in window);
 
     /**@
-    * #Crafty.support.prefix
-    * @comp Crafty.support
-    * Returns the browser specific prefix (`Moz`, `O`, `ms`, `webkit`).
-    */
+     * #Crafty.support.prefix
+     * @comp Crafty.support
+     * Returns the browser specific prefix (`Moz`, `O`, `ms`, `webkit`).
+     */
     support.prefix = (match[1] || match[0]);
 
     //browser specific quirks
@@ -69,66 +74,63 @@
 
     if (match[2]) {
         /**@
-        * #Crafty.support.versionName
-        * @comp Crafty.support
-        * Version of the browser
-        */
+         * #Crafty.support.versionName
+         * @comp Crafty.support
+         * Version of the browser
+         */
         support.versionName = match[2];
 
         /**@
-        * #Crafty.support.version
-        * @comp Crafty.support
-        * Version number of the browser as an Integer (first number)
-        */
+         * #Crafty.support.version
+         * @comp Crafty.support
+         * Version number of the browser as an Integer (first number)
+         */
         support.version = +(match[2].split("."))[0];
     }
 
     /**@
-    * #Crafty.support.canvas
-    * @comp Crafty.support
-    * Is the `canvas` element supported?
-    */
+     * #Crafty.support.canvas
+     * @comp Crafty.support
+     * Is the `canvas` element supported?
+     */
     support.canvas = ('getContext' in document.createElement("canvas"));
 
     /**@
-    * #Crafty.support.webgl
-    * @comp Crafty.support
-    * Is WebGL supported on the canvas element?
-    */
+     * #Crafty.support.webgl
+     * @comp Crafty.support
+     * Is WebGL supported on the canvas element?
+     */
     if (support.canvas) {
         var gl;
         try {
             gl = document.createElement("canvas").getContext("experimental-webgl");
             gl.viewportWidth = support.canvas.width;
             gl.viewportHeight = support.canvas.height;
-        }
-        catch (e) { }
-        support.webgl = !!gl;
-    }
-    else {
+        } catch (e) {}
+        support.webgl = !! gl;
+    } else {
         support.webgl = false;
     }
 
     /**@
-    * #Crafty.support.css3dtransform
-    * @comp Crafty.support
-    * Is css3Dtransform supported by browser.
-    */
-    support.css3dtransform = (typeof document.createElement("div").style["Perspective"] !== "undefined")
-                            || (typeof document.createElement("div").style[support.prefix + "Perspective"] !== "undefined");
+     * #Crafty.support.css3dtransform
+     * @comp Crafty.support
+     * Is css3Dtransform supported by browser.
+     */
+    support.css3dtransform = (typeof document.createElement("div").style.Perspective !== "undefined") || (typeof document.createElement("div").style[support.prefix + "Perspective"] !== "undefined");
 
     /**@
-    * #Crafty.support.deviceorientation
-    * @comp Crafty.support
-    * Is deviceorientation event supported by browser.
-    */
+     * #Crafty.support.deviceorientation
+     * @comp Crafty.support
+     * Is deviceorientation event supported by browser.
+     */
     support.deviceorientation = (typeof window.DeviceOrientationEvent !== "undefined") || (typeof window.OrientationEvent !== "undefined");
 
     /**@
-    * #Crafty.support.devicemotion
-    * @comp Crafty.support
-    * Is devicemotion event supported by browser.
-    */
+     * #Crafty.support.devicemotion
+     * @comp Crafty.support
+     * Is devicemotion event supported by browser.
+     */
     support.devicemotion = (typeof window.DeviceMotionEvent !== "undefined");
 
 })();
@@ -142,54 +144,55 @@ Crafty.extend({
     },
 
     /**@
-    * #Crafty.sprite
-    * @category Graphics
-    * @sign public this Crafty.sprite([Number tile, [Number tileh]], String url, Object map[, Number paddingX[, Number paddingY]])
-    * @param tile - Tile size of the sprite map, defaults to 1
-    * @param tileh - Height of the tile; if provided, tile is interpreted as the width
-    * @param url - URL of the sprite image
-    * @param map - Object where the key is what becomes a new component and the value points to a position on the sprite map
-    * @param paddingX - Horizontal space in between tiles. Defaults to 0.
-    * @param paddingY - Vertical space in between tiles. Defaults to paddingX.
-    * Generates components based on positions in a sprite image to be applied to entities.
-    *
-    * Accepts a tile size, URL and map for the name of the sprite and its position.
-    *
-    * The position must be an array containing the position of the sprite where index `0`
-    * is the `x` position, `1` is the `y` position and optionally `2` is the width and `3`
-    * is the height. If the sprite map has padding, pass the values for the `x` padding
-    * or `y` padding. If they are the same, just add one value.
-    *
-    * If the sprite image has no consistent tile size, `1` or no argument need be
-    * passed for tile size.
-    *
-    * Entities that add the generated components are also given a component called `Sprite`.
-    * 
-    * @example
-    * ~~~
-    * Crafty.sprite("imgs/spritemap6.png", {flower:[0,0,20,30]});
-    * var flower_entity = Crafty.e("2D, DOM, flower");
-    * ~~~
-    * The first line creates a component called `flower` associated with the sub-image of
-    * spritemap6.png with top-left corner (0,0), width 20 pixels, and height 30 pixels.
-    * The second line creates an entity with that image. (Note: `Crafty.e("flower, 2D, DOM")`
-    * would NOT work. When the `2D` component is assigned, it erases the width and height
-    * information. So you should list `2D` before `flower`.)
-    * ~~~
-    * Crafty.sprite(50, "imgs/spritemap6.png", {flower:[0,0], grass:[0,1,3,1]});
-    * ~~~
-    * In this case, the `flower` component is pixels 0 <= x < 50, 0 <= y < 50, and the
-    * `grass` component is pixels 0 <= x < 150, 50 <= y < 100. (The `3` means grass has a
-    * width of 3 tiles, i.e. 150 pixels.)
-    * ~~~
-    * Crafty.sprite(50, 100, "imgs/spritemap6.png", {flower:[0,0], grass:[0,1]}, 10);
-    * ~~~
-    * In this case, each tile is 50x100, and there is a spacing of 10 pixels between
-    * consecutive tiles. So `flower` is pixels 0 <= x < 50, 0 <= y < 100, and `grass` is
-    * pixels 0 <= x < 50, 110 <= y < 210.
-    * 
-    * @see Sprite
-    */
+     * #Crafty.sprite
+     * @category Graphics
+     * @sign public this Crafty.sprite([Number tile, [Number tileh]], String url, Object map[, Number paddingX[, Number paddingY]])
+     * @param tile - Tile size of the sprite map, defaults to 1
+     * @param tileh - Height of the tile; if provided, tile is interpreted as the width
+     * @param url - URL of the sprite image
+     * @param map - Object where the key is what becomes a new component and the value points to a position on the sprite map
+     * @param paddingX - Horizontal space in between tiles. Defaults to 0.
+     * @param paddingY - Vertical space in between tiles. Defaults to paddingX.
+     * Generates components based on positions in a sprite image to be applied to entities.
+     *
+     * Accepts a tile size, URL and map for the name of the sprite and its position.
+     *
+     * The position must be an array containing the position of the sprite where index `0`
+     * is the `x` position, `1` is the `y` position and optionally `2` is the width and `3`
+     * is the height. If the sprite map has padding, pass the values for the `x` padding
+     * or `y` padding. If they are the same, just add one value.
+     *
+     * If the sprite image has no consistent tile size, `1` or no argument need be
+     * passed for tile size.
+     *
+     * Entities that add the generated components are also given the `2D` component, and
+     * a component called `Sprite`.
+     *
+     * @example
+     * ~~~
+     * Crafty.sprite("imgs/spritemap6.png", {flower:[0,0,20,30]});
+     * var flower_entity = Crafty.e("2D, DOM, flower");
+     * ~~~
+     * The first line creates a component called `flower` associated with the sub-image of
+     * spritemap6.png with top-left corner (0,0), width 20 pixels, and height 30 pixels.
+     * The second line creates an entity with that image. (Note: The `2D` is not really
+     * necessary here, because adding the `flower` component automatically also adds the
+     * `2D` component.)
+     * ~~~
+     * Crafty.sprite(50, "imgs/spritemap6.png", {flower:[0,0], grass:[0,1,3,1]});
+     * ~~~
+     * In this case, the `flower` component is pixels 0 <= x < 50, 0 <= y < 50, and the
+     * `grass` component is pixels 0 <= x < 150, 50 <= y < 100. (The `3` means grass has a
+     * width of 3 tiles, i.e. 150 pixels.)
+     * ~~~
+     * Crafty.sprite(50, 100, "imgs/spritemap6.png", {flower:[0,0], grass:[0,1]}, 10);
+     * ~~~
+     * In this case, each tile is 50x100, and there is a spacing of 10 pixels between
+     * consecutive tiles. So `flower` is pixels 0 <= x < 50, 0 <= y < 100, and `grass` is
+     * pixels 0 <= x < 50, 110 <= y < 210.
+     *
+     * @see Sprite
+     */
     sprite: function (tile, tileh, url, map, paddingX, paddingY) {
         var spriteName, temp, x, y, w, h, img;
 
@@ -217,6 +220,11 @@ Crafty.extend({
         paddingX = parseInt(paddingX || 0, 10); //just incase
         paddingY = parseInt(paddingY || 0, 10);
 
+        var markSpritesReady = function() {
+            this.ready = true;
+            this.trigger("Change");
+        };
+
         img = Crafty.asset(url);
         if (!img) {
             img = new Image();
@@ -224,15 +232,33 @@ Crafty.extend({
             Crafty.asset(url, img);
             img.onload = function () {
                 //all components with this img are now ready
-                for (spriteName in map) {
-                    Crafty(spriteName).each(function () {
-                        this.ready = true;
-                        this.trigger("Change");
-                    });
+                for (var spriteName in map) {
+                    Crafty(spriteName).each(markSpritesReady);
                 }
             };
         }
 
+        var sharedSpriteInit = function() {
+            this.requires("2D, Sprite");
+            this.__trim = [0, 0, 0, 0];
+            this.__image = url;
+            this.__coord = [this.__coord[0], this.__coord[1], this.__coord[2], this.__coord[3]];
+            this.__tile = tile;
+            this.__tileh = tileh;
+            this.__padding = [paddingX, paddingY];
+            this.img = img;
+
+            //draw now
+            if (this.img.complete && this.img.width > 0) {
+                this.ready = true;
+                this.trigger("Change");
+            }
+
+            //set the width and height to the sprite size
+            this.w = this.__coord[2];
+            this.h = this.__coord[3];
+        };
+
         for (spriteName in map) {
             if (!map.hasOwnProperty(spriteName)) continue;
 
@@ -247,26 +273,7 @@ Crafty.extend({
                 ready: false,
                 __coord: [x, y, w, h],
 
-                init: function () {
-                    this.requires("Sprite");
-                    this.__trim = [0, 0, 0, 0];
-                    this.__image = url;
-                    this.__coord = [this.__coord[0], this.__coord[1], this.__coord[2], this.__coord[3]];
-                    this.__tile = tile;
-                    this.__tileh = tileh;
-                    this.__padding = [paddingX, paddingY];
-                    this.img = img;
-
-                    //draw now
-                    if (this.img.complete && this.img.width > 0) {
-                        this.ready = true;
-                        this.trigger("Change");
-                    }
-
-                    //set the width and height to the sprite size
-                    this.w = this.__coord[2];
-                    this.h = this.__coord[3];
-                }
+                init: sharedSpriteInit
             });
         }
 
@@ -276,35 +283,35 @@ Crafty.extend({
     _events: {},
 
     /**@
-    * #Crafty.addEvent
-    * @category Events, Misc
-    * @sign public this Crafty.addEvent(Object ctx, HTMLElement obj, String event, Function callback)
-    * @param ctx - Context of the callback or the value of `this`
-    * @param obj - Element to add the DOM event to
-    * @param event - Event name to bind to
-    * @param callback - Method to execute when triggered
-    * 
-    * Adds DOM level 3 events to elements. The arguments it accepts are the call
-    * context (the value of `this`), the DOM element to attach the event to,
-    * the event name (without `on` (`click` rather than `onclick`)) and
-    * finally the callback method.
-    *
-    * If no element is passed, the default element will be `window.document`.
-    *
-    * Callbacks are passed with event data.
-    * 
-    * @example 
-    * Will add a stage-wide MouseDown event listener to the player. Will log which button was pressed
-    * & the (x,y) coordinates in viewport/world/game space.
-    * ~~~
-    * var player = Crafty.e("2D");
-    *     player.onMouseDown = function(e) {
-    *         console.log(e.mouseButton, e.realX, e.realY);
-    *     };
-    * Crafty.addEvent(player, Crafty.stage.elem, "mousedown", player.onMouseDown);
-    * ~~~
-    * @see Crafty.removeEvent
-    */
+     * #Crafty.addEvent
+     * @category Events, Misc
+     * @sign public this Crafty.addEvent(Object ctx, HTMLElement obj, String event, Function callback)
+     * @param ctx - Context of the callback or the value of `this`
+     * @param obj - Element to add the DOM event to
+     * @param event - Event name to bind to
+     * @param callback - Method to execute when triggered
+     *
+     * Adds DOM level 3 events to elements. The arguments it accepts are the call
+     * context (the value of `this`), the DOM element to attach the event to,
+     * the event name (without `on` (`click` rather than `onclick`)) and
+     * finally the callback method.
+     *
+     * If no element is passed, the default element will be `window.document`.
+     *
+     * Callbacks are passed with event data.
+     *
+     * @example
+     * Will add a stage-wide MouseDown event listener to the player. Will log which button was pressed
+     * & the (x,y) coordinates in viewport/world/game space.
+     * ~~~
+     * var player = Crafty.e("2D");
+     *     player.onMouseDown = function(e) {
+     *         console.log(e.mouseButton, e.realX, e.realY);
+     *     };
+     * Crafty.addEvent(player, Crafty.stage.elem, "mousedown", player.onMouseDown);
+     * ~~~
+     * @see Crafty.removeEvent
+     */
     addEvent: function (ctx, obj, type, callback) {
         if (arguments.length === 3) {
             callback = type;
@@ -313,13 +320,13 @@ Crafty.extend({
         }
 
         //save anonymous function to be able to remove
-        var afn = function (e) { 
-                var e = e || window.event; 
+        var afn = function (e) {
+            e = e || window.event;
 
-                if (typeof callback === 'function') {
-                    callback.call(ctx, e);
-                }
-            },
+            if (typeof callback === 'function') {
+                callback.call(ctx, e);
+            }
+        },
             id = ctx[0] || "";
 
         if (!this._events[id + obj + type + callback]) this._events[id + obj + type + callback] = afn;
@@ -333,20 +340,20 @@ Crafty.extend({
     },
 
     /**@
-    * #Crafty.removeEvent
-    * @category Events, Misc
-    * @sign public this Crafty.removeEvent(Object ctx, HTMLElement obj, String event, Function callback)
-    * @param ctx - Context of the callback or the value of `this`
-    * @param obj - Element the event is on
-    * @param event - Name of the event
-    * @param callback - Method executed when triggered
-    * 
-    * Removes events attached by `Crafty.addEvent()`. All parameters must
-    * be the same that were used to attach the event including a reference
-    * to the callback method.
-    * 
-    * @see Crafty.addEvent
-    */
+     * #Crafty.removeEvent
+     * @category Events, Misc
+     * @sign public this Crafty.removeEvent(Object ctx, HTMLElement obj, String event, Function callback)
+     * @param ctx - Context of the callback or the value of `this`
+     * @param obj - Element the event is on
+     * @param event - Name of the event
+     * @param callback - Method executed when triggered
+     *
+     * Removes events attached by `Crafty.addEvent()`. All parameters must
+     * be the same that were used to attach the event including a reference
+     * to the callback method.
+     *
+     * @see Crafty.addEvent
+     */
     removeEvent: function (ctx, obj, type, callback) {
         if (arguments.length === 3) {
             callback = type;
@@ -367,782 +374,119 @@ Crafty.extend({
     },
 
     /**@
-    * #Crafty.background
-    * @category Graphics, Stage
-    * @sign public void Crafty.background(String value)
-    * @param style - Modify the background with a color or image
-    * 
-    * This method is essentially a shortcut for adding a background
-    * style to the stage element.
-    */
+     * #Crafty.background
+     * @category Graphics, Stage
+     * @sign public void Crafty.background(String value)
+     * @param style - Modify the background with a color or image
+     *
+     * This method is essentially a shortcut for adding a background
+     * style to the stage element.
+     */
     background: function (style) {
         Crafty.stage.elem.style.background = style;
     },
 
-    /**@
-    * #Crafty.viewport
-    * @category Stage
-    * 
-    * Viewport is essentially a 2D camera looking at the stage. Can be moved which
-    * in turn will react just like a camera moving in that direction.
-    */
-    viewport: {
-    /**@
-        * #Crafty.viewport.clampToEntities
-        * @comp Crafty.viewport
-        * 
-        * Decides if the viewport functions should clamp to game entities.
-        * When set to `true` functions such as Crafty.viewport.mouselook() will not allow you to move the
-        * viewport over areas of the game that has no entities.
-        * For development it can be useful to set this to false.
-        */
-        clampToEntities: true,
-        width: 0,
-        height: 0,
-        /**@
-        * #Crafty.viewport.x
-        * @comp Crafty.viewport
-        * 
-        * Will move the stage and therefore every visible entity along the `x`
-        * axis in the opposite direction.
-        *
-        * When this value is set, it will shift the entire stage. This means that entity
-        * positions are not exactly where they are on screen. To get the exact position,
-        * simply add `Crafty.viewport.x` onto the entities `x` position.
-        */
-        _x: 0,
-        /**@
-        * #Crafty.viewport.y
-        * @comp Crafty.viewport
-        * 
-        * Will move the stage and therefore every visible entity along the `y`
-        * axis in the opposite direction.
-        *
-        * When this value is set, it will shift the entire stage. This means that entity
-        * positions are not exactly where they are on screen. To get the exact position,
-        * simply add `Crafty.viewport.y` onto the entities `y` position.
-        */
-        _y: 0,
-		
-		/**@
-         * #Crafty.viewport.bounds
-         * @comp Crafty.viewport
-         *
-		 * A rectangle which defines the bounds of the viewport. If this 
-		 * variable is null, Crafty uses the bounding box of all the items
-		 * on the stage.
-         */
-        bounds:null,
-
-        /**@
-         * #Crafty.viewport.scroll
-         * @comp Crafty.viewport
-         * @sign Crafty.viewport.scroll(String axis, Number v)
-         * @param axis - 'x' or 'y'
-         * @param v - The new absolute position on the axis
-         *
-         * Will move the viewport to the position given on the specified axis
-         * 
-         * @example 
-         * Will move the camera 500 pixels right of its initial position, in effect
-         * shifting everything in the viewport 500 pixels to the left.
-         * 
-         * ~~~
-         * Crafty.viewport.scroll('_x', 500);
-         * ~~~
-         */
-        scroll: function (axis, v) {
-            v = Math.floor(v);
-            var change = v - this[axis], //change in direction
-                context = Crafty.canvas.context,
-                style = Crafty.stage.inner.style,
-                canvas;
-
-            //update viewport and DOM scroll
-            this[axis] = v;
-			if (context) {
-				if (axis == '_x') {
-					context.translate(change, 0);
-				} else {
-					context.translate(0, change);
-				}
-				Crafty.DrawManager.drawAll();
-			}
-            style[axis == '_x' ? "left" : "top"] = v + "px";
-        },
-
-        rect: function () {
-            return { _x: -this._x, _y: -this._y, _w: this.width, _h: this.height };
-        },
-
-        /**@
-         * #Crafty.viewport.pan
-         * @comp Crafty.viewport
-         * @sign public void Crafty.viewport.pan(String axis, Number v, Number time)
-         * @param String axis - 'x' or 'y'. The axis to move the camera on
-         * @param Number v - the distance to move the camera by
-         * @param Number time - The duration in frames for the entire camera movement
-         *
-         * Pans the camera a given number of pixels over a given number of frames
-         */
-        pan: (function () {
-            var tweens = {}, i, bound = false;
-
-            function enterFrame(e) {
-                var l = 0;
-                for (i in tweens) {
-                    var prop = tweens[i];
-                    if (prop.remTime > 0) {
-                        prop.current += prop.diff;
-                        prop.remTime--;
-                        Crafty.viewport[i] = Math.floor(prop.current);
-                        l++;
-                    }
-                    else {
-                        delete tweens[i];
-                    }
-                }
-                if (l) Crafty.viewport._clamp();
-            }
-
-            return function (axis, v, time) {
-                Crafty.viewport.follow();
-                if (axis == 'reset') {
-                    for (i in tweens) {
-                        tweens[i].remTime = 0;
-                    }
-                    return;
-                }
-                if (time == 0) time = 1;
-                tweens[axis] = {
-                    diff: -v / time,
-                    current: Crafty.viewport[axis],
-                    remTime: time
-                };
-                if (!bound) {
-                    Crafty.bind("EnterFrame", enterFrame);
-                    bound = true;
-                }
-            }
-        })(),
-
-        /**@
-         * #Crafty.viewport.follow
-         * @comp Crafty.viewport
-         * @sign public void Crafty.viewport.follow(Object target, Number offsetx, Number offsety)
-         * @param Object target - An entity with the 2D component
-         * @param Number offsetx - Follow target should be offsetx pixels away from center
-         * @param Number offsety - Positive puts target to the right of center
-         *
-         * Follows a given entity with the 2D component. If following target will take a portion of
-         * the viewport out of bounds of the world, following will stop until the target moves away.
-         * 
-         * @example
-         * ~~~
-         * var ent = Crafty.e('2D, DOM').attr({w: 100, h: 100:});
-         * Crafty.viewport.follow(ent, 0, 0);
-         * ~~~
-         */
-        follow: (function () {
-            var oldTarget, offx, offy;
-
-            function change() {
-                Crafty.viewport.scroll('_x', -(this.x + (this.w / 2) - (Crafty.viewport.width / 2) - offx));
-                Crafty.viewport.scroll('_y', -(this.y + (this.h / 2) - (Crafty.viewport.height / 2) - offy));
-                Crafty.viewport._clamp();
-            }
-
-            return function (target, offsetx, offsety) {
-                if (oldTarget)
-                    oldTarget.unbind('Change', change);
-                if (!target || !target.has('2D'))
-                    return;
-                Crafty.viewport.pan('reset');
-
-                oldTarget = target;
-                offx = (typeof offsetx != 'undefined') ? offsetx : 0;
-                offy = (typeof offsety != 'undefined') ? offsety : 0;
-
-                target.bind('Change', change);
-                change.call(target);
-            }
-        })(),
-
-        /**@
-         * #Crafty.viewport.centerOn
-         * @comp Crafty.viewport
-         * @sign public void Crafty.viewport.centerOn(Object target, Number time)
-         * @param Object target - An entity with the 2D component
-         * @param Number time - The number of frames to perform the centering over
-         *
-         * Centers the viewport on the given entity
-         */
-        centerOn: function (targ, time) {
-            var x = targ.x,
-                    y = targ.y,
-                    mid_x = targ.w / 2,
-                    mid_y = targ.h / 2,
-                    cent_x = Crafty.viewport.width / 2,
-                    cent_y = Crafty.viewport.height / 2,
-                    new_x = x + mid_x - cent_x,
-                    new_y = y + mid_y - cent_y;
-
-            Crafty.viewport.pan('reset');
-            Crafty.viewport.pan('x', new_x, time);
-            Crafty.viewport.pan('y', new_y, time);
-        },
-        /**@
-        * #Crafty.viewport._zoom
-        * @comp Crafty.viewport
-        * 
-        * This value keeps an amount of viewport zoom, required for calculating mouse position at entity
-        */
-        _zoom : 1,
-
-        /**@
-         * #Crafty.viewport.zoom
-         * @comp Crafty.viewport
-         * @sign public void Crafty.viewport.zoom(Number amt, Number cent_x, Number cent_y, Number time)
-         * @param Number amt - amount to zoom in on the target by (eg. 2, 4, 0.5)
-         * @param Number cent_x - the center to zoom on
-         * @param Number cent_y - the center to zoom on
-         * @param Number time - the duration in frames of the entire zoom operation
-         *
-         * Zooms the camera in on a given point. amt > 1 will bring the camera closer to the subject
-         * amt < 1 will bring it farther away. amt = 0 will do nothing.
-         * Zooming is multiplicative. To reset the zoom amount, pass 0.
-         */
-        zoom: (function () {
-            var zoom = 1,
-                zoom_tick = 0,
-                dur = 0,
-                prop = Crafty.support.prefix + "Transform",
-                bound = false,
-                act = {},
-                prct = {};
-            // what's going on:
-            // 1. Get the original point as a percentage of the stage
-            // 2. Scale the stage
-            // 3. Get the new size of the stage
-            // 4. Get the absolute position of our point using previous percentage
-            // 4. Offset inner by that much
-
-            function enterFrame() {
-                if (dur > 0) {
-					if (isFinite(Crafty.viewport._zoom)) zoom = Crafty.viewport._zoom;
-                    var old = {
-                        width: act.width * zoom,
-                        height: act.height * zoom
-                    };
-                    zoom += zoom_tick;
-                    Crafty.viewport._zoom = zoom;
-                    var new_s = {
-                        width: act.width * zoom,
-                        height: act.height * zoom
-                    },
-                    diff = {
-                        width: new_s.width - old.width,
-                        height: new_s.height - old.height
-                    };
-                    Crafty.stage.inner.style[prop] = 'scale(' + zoom + ',' + zoom + ')';
-                    if (Crafty.canvas._canvas) {
-						var czoom = zoom / (zoom - zoom_tick);
-						Crafty.canvas.context.scale(czoom, czoom);
-                        Crafty.DrawManager.drawAll();
-                    }
-                    Crafty.viewport.x -= diff.width * prct.width;
-                    Crafty.viewport.y -= diff.height * prct.height;
-                    dur--;
-                }
-            }
-
-            return function (amt, cent_x, cent_y, time) {
-                var bounds = this.bounds || Crafty.map.boundaries(),
-                    final_zoom = amt ? zoom * amt : 1;
-				if (!amt) {	// we're resetting to defaults
-					zoom = 1;
-					this._zoom = 1;
-				}
-
-                act.width = bounds.max.x - bounds.min.x;
-                act.height = bounds.max.y - bounds.min.y;
-
-                prct.width = cent_x / act.width;
-                prct.height = cent_y / act.height;
-
-                if (time == 0) time = 1;
-                zoom_tick = (final_zoom - zoom) / time;
-                dur = time;
-
-                Crafty.viewport.pan('reset');
-                if (!bound) {
-                    Crafty.bind('EnterFrame', enterFrame);
-                    bound = true;
-                }
-            }
-        })(),
-        /**@
-         * #Crafty.viewport.scale
-         * @comp Crafty.viewport
-         * @sign public void Crafty.viewport.scale(Number amt)
-         * @param Number amt - amount to zoom/scale in on the element on the viewport by (eg. 2, 4, 0.5)
-         *
-         * Zooms/scale the camera. amt > 1 increase all entities on stage 
-         * amt < 1 will reduce all entities on stage. amt = 0 will reset the zoom/scale.
-         * Zooming/scaling is multiplicative. To reset the zoom/scale amount, pass 0.
-         *
-         * @example
-         * ~~~
-         * Crafty.viewport.scale(2); //to see effect add some entities on stage.
-         * ~~~
-         */
-        scale: (function () {
-            var prop = Crafty.support.prefix + "Transform",
-                act = {};
-            return function (amt) {
-                var bounds = this.bounds || Crafty.map.boundaries(),
-                    final_zoom = amt ? this._zoom * amt : 1,
-					czoom = final_zoom / this._zoom;
-
-                this._zoom = final_zoom;
-                act.width = bounds.max.x - bounds.min.x;
-                act.height = bounds.max.y - bounds.min.y;
-                var new_s = {
-                    width: act.width * final_zoom,
-                    height: act.height * final_zoom
-                }
-                Crafty.viewport.pan('reset');
-                Crafty.stage.inner.style['transform'] = 
-				Crafty.stage.inner.style[prop] = 'scale(' + this._zoom + ',' + this._zoom + ')';
-
-                if (Crafty.canvas._canvas) {
-                    Crafty.canvas.context.scale(czoom, czoom);
-                    Crafty.DrawManager.drawAll();
-                }
-                //Crafty.viewport.width = new_s.width;
-                //Crafty.viewport.height = new_s.height;
-            }
-        })(),
-        /**@
-         * #Crafty.viewport.mouselook
-         * @comp Crafty.viewport
-         * @sign public void Crafty.viewport.mouselook(Boolean active)
-         * @param Boolean active - Activate or deactivate mouselook
-         *
-         * Toggle mouselook on the current viewport.
-         * Simply call this function and the user will be able to
-         * drag the viewport around.
-         */
-        mouselook: (function () {
-            var active = false,
-                dragging = false,
-                lastMouse = {}
-            old = {};
 
 
-            return function (op, arg) {
-                if (typeof op == 'boolean') {
-                    active = op;
-                    if (active) {
-                        Crafty.mouseObjs++;
-                    }
-                    else {
-                        Crafty.mouseObjs = Math.max(0, Crafty.mouseObjs - 1);
-                    }
-                    return;
-                }
-                if (!active) return;
-                switch (op) {
-                    case 'move':
-                    case 'drag':
-                        if (!dragging) return;
-                        diff = {
-                            x: arg.clientX - lastMouse.x,
-                            y: arg.clientY - lastMouse.y
-                        };
-
-                        Crafty.viewport.x += diff.x;
-                        Crafty.viewport.y += diff.y;
-                        Crafty.viewport._clamp(); 
-                    case 'start':
-                        lastMouse.x = arg.clientX;
-                        lastMouse.y = arg.clientY;
-                        dragging = true;
-                        break;
-                    case 'stop':
-                        dragging = false;
-                        break;
-                }
-            };
-        })(),
-        _clamp: function () {
-            // clamps the viewport to the viewable area
-            // under no circumstances should the viewport see something outside the boundary of the 'world'
-            if (!this.clampToEntities) return;
-            var bound = this.bounds || Crafty.map.boundaries();
-			bound.max.x *= this._zoom;
-			bound.min.x *= this._zoom;
-			bound.max.y *= this._zoom;
-			bound.min.y *= this._zoom;
-            if (bound.max.x - bound.min.x > Crafty.viewport.width) {
-                bound.max.x -= Crafty.viewport.width;
-
-                if (Crafty.viewport.x < -bound.max.x) {
-                    Crafty.viewport.x = -bound.max.x;
-                }
-                else if (Crafty.viewport.x > -bound.min.x) {
-                    Crafty.viewport.x = -bound.min.x;
-                }
-            }
-            else {
-                Crafty.viewport.x = -1 * (bound.min.x + (bound.max.x - bound.min.x) / 2 - Crafty.viewport.width / 2);
-            }
-            if (bound.max.y - bound.min.y > Crafty.viewport.height) {
-                bound.max.y -= Crafty.viewport.height;
-
-                if (Crafty.viewport.y < -bound.max.y) {
-                    Crafty.viewport.y = -bound.max.y;
-                }
-                else if (Crafty.viewport.y > -bound.min.y) {
-                    Crafty.viewport.y = -bound.min.y;
-                }
-            }
-            else {
-                Crafty.viewport.y = -1 * (bound.min.y + (bound.max.y - bound.min.y) / 2 - Crafty.viewport.height / 2);
-            }
-        },
-
-        /**@
-         * #Crafty.viewport.init
-         * @comp Crafty.viewport
-         * @sign public void Crafty.viewport.init([Number width, Number height, String stage_elem])
-         * @sign public void Crafty.viewport.init([Number width, Number height, HTMLElement stage_elem])
-         * @param Number width - Width of the viewport
-         * @param Number height - Height of the viewport
-         * @param String or HTMLElement stage_elem - the element to use as the stage (either its id or the actual element).
-         *
-         * Initialize the viewport. If the arguments 'width' or 'height' are missing, or Crafty.mobile is true, use Crafty.DOM.window.width and Crafty.DOM.window.height (full screen model).
-         *
-         * The argument 'stage_elem' is used to specify a stage element other than the default, and can be either a string or an HTMLElement.  If a string is provided, it will look for an element with that id and, if none exists, create a div.  If an HTMLElement is provided, that is used directly.  Omitting this argument is the same as passing an id of 'cr-stage'.
-         *
-         * @see Crafty.device, Crafty.DOM, Crafty.stage
-         */
-        init: function (w, h, stage_elem) {
-            Crafty.DOM.window.init();
-
-            //fullscreen if mobile or not specified
-            this.width = (!w || Crafty.mobile) ? Crafty.DOM.window.width : w;
-            this.height = (!h || Crafty.mobile) ? Crafty.DOM.window.height : h;
-
-            //check if stage exists
-            if(typeof stage_elem === 'undefined')
-                stage_elem = "cr-stage";
-
-            var crstage;
-            if(typeof stage_elem === 'string')
-                crstage = document.getElementById(stage_elem);
-            else if(typeof HTMLElement !== "undefined" ? stage_elem instanceof HTMLElement : stage_elem instanceof Element)
-                crstage = stage_elem;
-            else
-                throw new TypeError("stage_elem must be a string or an HTMLElement");
-
-            /**@
-             * #Crafty.stage
-             * @category Core
-             * The stage where all the DOM entities will be placed.
-             */
-
-            /**@
-             * #Crafty.stage.elem
-             * @comp Crafty.stage
-             * The `#cr-stage` div element.
-             */
-
-            /**@
-             * #Crafty.stage.inner
-             * @comp Crafty.stage
-             * `Crafty.stage.inner` is a div inside the `#cr-stage` div that holds all DOM entities.
-             * If you use canvas, a `canvas` element is created at the same level in the dom
-             * as the the `Crafty.stage.inner` div. So the hierarchy in the DOM is
-             * 
-             * `Crafty.stage.elem`
-             * 
-             *
-             *     - `Crafty.stage.inner` (a div HTMLElement)
-             *
-             *     - `Crafty.canvas._canvas` (a canvas HTMLElement) 
-             */
-
-            //create stage div to contain everything
-            Crafty.stage = {
-                x: 0,
-                y: 0,
-                fullscreen: false,
-                elem: (crstage ? crstage : document.createElement("div")),
-                inner: document.createElement("div")
-            };
-
-            //fullscreen, stop scrollbars
-            if ((!w && !h) || Crafty.mobile) {
-                document.body.style.overflow = "hidden";
-                Crafty.stage.fullscreen = true;
-            }
-
-            Crafty.addEvent(this, window, "resize", Crafty.viewport.reload);
-
-            Crafty.addEvent(this, window, "blur", function () {
-                if (Crafty.settings.get("autoPause")) {
-                    if(!Crafty._paused) Crafty.pause();
-                }
-            });
-            Crafty.addEvent(this, window, "focus", function () {
-                if (Crafty._paused && Crafty.settings.get("autoPause")) {
-                    Crafty.pause();
-                }
-            });
-
-            //make the stage unselectable
-            Crafty.settings.register("stageSelectable", function (v) {
-                Crafty.stage.elem.onselectstart = v ? function () { return true; } : function () { return false; };
-            });
-            Crafty.settings.modify("stageSelectable", false);
-
-            //make the stage have no context menu
-            Crafty.settings.register("stageContextMenu", function (v) {
-                Crafty.stage.elem.oncontextmenu = v ? function () { return true; } : function () { return false; };
-            });
-            Crafty.settings.modify("stageContextMenu", false);
-
-            Crafty.settings.register("autoPause", function (){ });
-            Crafty.settings.modify("autoPause", false);
-
-            //add to the body and give it an ID if not exists
-            if (!crstage) {
-                document.body.appendChild(Crafty.stage.elem);
-                Crafty.stage.elem.id = stage_elem;
-            }
-
-            var elem = Crafty.stage.elem.style,
-                offset;
-
-            Crafty.stage.elem.appendChild(Crafty.stage.inner);
-            Crafty.stage.inner.style.position = "absolute";
-            Crafty.stage.inner.style.zIndex = "1";
-
-            //css style
-            elem.width = this.width + "px";
-            elem.height = this.height + "px";
-            elem.overflow = "hidden";
-
-            if (Crafty.mobile) {
-                elem.position = "absolute";
-                elem.left = "0px";
-                elem.top = "0px";
-
-                // remove default gray highlighting after touch
-                if (typeof elem.webkitTapHighlightColor != undefined) {
-                    elem.webkitTapHighlightColor = "rgba(0,0,0,0)";
-                }
-
-                var meta = document.createElement("meta"),
-                    head = document.getElementsByTagName("HEAD")[0];
-
-                //stop mobile zooming and scrolling
-                meta.setAttribute("name", "viewport");
-                meta.setAttribute("content", "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no");
-                head.appendChild(meta);
-
-                //hide the address bar
-                meta = document.createElement("meta");
-                meta.setAttribute("name", "apple-mobile-web-app-capable");
-                meta.setAttribute("content", "yes");
-                head.appendChild(meta);
-                setTimeout(function () { window.scrollTo(0, 1); }, 0);
-
-                Crafty.addEvent(this, window, "touchmove", function (e) {
-                    e.preventDefault();
-                });
-
-                Crafty.stage.x = 0;
-                Crafty.stage.y = 0;
-
-            } else {
-                elem.position = "relative";
-                //find out the offset position of the stage
-                offset = Crafty.DOM.inner(Crafty.stage.elem);
-                Crafty.stage.x = offset.x;
-                Crafty.stage.y = offset.y;
-            }
-
-            if (Crafty.support.setter) {
-                //define getters and setters to scroll the viewport
-                this.__defineSetter__('x', function (v) { this.scroll('_x', v); });
-                this.__defineSetter__('y', function (v) { this.scroll('_y', v); });
-                this.__defineGetter__('x', function () { return this._x; });
-                this.__defineGetter__('y', function () { return this._y; });
-                //IE9
-            } else if (Crafty.support.defineProperty) {
-                Object.defineProperty(this, 'x', { set: function (v) { this.scroll('_x', v); }, get: function () { return this._x; } });
-                Object.defineProperty(this, 'y', { set: function (v) { this.scroll('_y', v); }, get: function () { return this._y; } });
-            } else {
-                //create empty entity waiting for enterframe
-                this.x = this._x;
-                this.y = this._y;
-                Crafty.e("viewport");
-            }
-        },
-
-        /**@
-         * #Crafty.viewport.reload
-         * @comp Crafty.stage
-         * 
-         * @sign public Crafty.viewport.reload()
-         * 
-         * Recalculate and reload stage width, height and position.
-         * Useful when browser return wrong results on init (like safari on Ipad2).
-         * 
-         */
-        reload : function () {
-            Crafty.DOM.window.init();
-            var w = Crafty.DOM.window.width,
-                h = Crafty.DOM.window.height,
-                offset;
-
-
-            if (Crafty.stage.fullscreen) {
-                this.width = w;
-                this.height = h;
-                Crafty.stage.elem.style.width = w + "px";
-                Crafty.stage.elem.style.height = h + "px";
-
-                if (Crafty.canvas._canvas) {
-                    Crafty.canvas._canvas.width = w;
-                    Crafty.canvas._canvas.height = h;
-                    Crafty.DrawManager.drawAll();
-                }
-            }
-
-            offset = Crafty.DOM.inner(Crafty.stage.elem);
-            Crafty.stage.x = offset.x;
-            Crafty.stage.y = offset.y;
-        },
-		
-		/**@
-		 * #Crafty.viewport.reset
-		 * @comp Crafty.stage
-		 *
-		 * @sign public Crafty.viewport.reset()
-		 *
-		 * Resets the viewport to starting values
-		 * Called when scene() is run.
-		 */
-		reset: function () {
-			Crafty.viewport.pan('reset');
-			Crafty.viewport.follow();
-			Crafty.viewport.mouselook('stop');
-			Crafty.viewport.scale();
-		}
-    },
-
     /**@
-    * #Crafty.keys
-    * @category Input
-    * Object of key names and the corresponding key code.
-    * 
-    * ~~~
-    * BACKSPACE: 8,
-    * TAB: 9,
-    * ENTER: 13,
-    * PAUSE: 19,
-    * CAPS: 20,
-    * ESC: 27,
-    * SPACE: 32,
-    * PAGE_UP: 33,
-    * PAGE_DOWN: 34,
-    * END: 35,
-    * HOME: 36,
-    * LEFT_ARROW: 37,
-    * UP_ARROW: 38,
-    * RIGHT_ARROW: 39,
-    * DOWN_ARROW: 40,
-    * INSERT: 45,
-    * DELETE: 46,
-    * 0: 48,
-    * 1: 49,
-    * 2: 50,
-    * 3: 51,
-    * 4: 52,
-    * 5: 53,
-    * 6: 54,
-    * 7: 55,
-    * 8: 56,
-    * 9: 57,
-    * A: 65,
-    * B: 66,
-    * C: 67,
-    * D: 68,
-    * E: 69,
-    * F: 70,
-    * G: 71,
-    * H: 72,
-    * I: 73,
-    * J: 74,
-    * K: 75,
-    * L: 76,
-    * M: 77,
-    * N: 78,
-    * O: 79,
-    * P: 80,
-    * Q: 81,
-    * R: 82,
-    * S: 83,
-    * T: 84,
-    * U: 85,
-    * V: 86,
-    * W: 87,
-    * X: 88,
-    * Y: 89,
-    * Z: 90,
-    * NUMPAD_0: 96,
-    * NUMPAD_1: 97,
-    * NUMPAD_2: 98,
-    * NUMPAD_3: 99,
-    * NUMPAD_4: 100,
-    * NUMPAD_5: 101,
-    * NUMPAD_6: 102,
-    * NUMPAD_7: 103,
-    * NUMPAD_8: 104,
-    * NUMPAD_9: 105,
-    * MULTIPLY: 106,
-    * ADD: 107,
-    * SUBSTRACT: 109,
-    * DECIMAL: 110,
-    * DIVIDE: 111,
-    * F1: 112,
-    * F2: 113,
-    * F3: 114,
-    * F4: 115,
-    * F5: 116,
-    * F6: 117,
-    * F7: 118,
-    * F8: 119,
-    * F9: 120,
-    * F10: 121,
-    * F11: 122,
-    * F12: 123,
-    * SHIFT: 16,
-    * CTRL: 17,
-    * ALT: 18,
-    * PLUS: 187,
-    * COMMA: 188,
-    * MINUS: 189,
-    * PERIOD: 190,
-    * PULT_UP: 29460,
-    * PULT_DOWN: 29461,
-    * PULT_LEFT: 4,
-    * PULT_RIGHT': 5
-    * ~~~
-    */
+     * #Crafty.keys
+     * @category Input
+     * Object of key names and the corresponding key code.
+     *
+     * ~~~
+     * BACKSPACE: 8,
+     * TAB: 9,
+     * ENTER: 13,
+     * PAUSE: 19,
+     * CAPS: 20,
+     * ESC: 27,
+     * SPACE: 32,
+     * PAGE_UP: 33,
+     * PAGE_DOWN: 34,
+     * END: 35,
+     * HOME: 36,
+     * LEFT_ARROW: 37,
+     * UP_ARROW: 38,
+     * RIGHT_ARROW: 39,
+     * DOWN_ARROW: 40,
+     * INSERT: 45,
+     * DELETE: 46,
+     * 0: 48,
+     * 1: 49,
+     * 2: 50,
+     * 3: 51,
+     * 4: 52,
+     * 5: 53,
+     * 6: 54,
+     * 7: 55,
+     * 8: 56,
+     * 9: 57,
+     * A: 65,
+     * B: 66,
+     * C: 67,
+     * D: 68,
+     * E: 69,
+     * F: 70,
+     * G: 71,
+     * H: 72,
+     * I: 73,
+     * J: 74,
+     * K: 75,
+     * L: 76,
+     * M: 77,
+     * N: 78,
+     * O: 79,
+     * P: 80,
+     * Q: 81,
+     * R: 82,
+     * S: 83,
+     * T: 84,
+     * U: 85,
+     * V: 86,
+     * W: 87,
+     * X: 88,
+     * Y: 89,
+     * Z: 90,
+     * NUMPAD_0: 96,
+     * NUMPAD_1: 97,
+     * NUMPAD_2: 98,
+     * NUMPAD_3: 99,
+     * NUMPAD_4: 100,
+     * NUMPAD_5: 101,
+     * NUMPAD_6: 102,
+     * NUMPAD_7: 103,
+     * NUMPAD_8: 104,
+     * NUMPAD_9: 105,
+     * MULTIPLY: 106,
+     * ADD: 107,
+     * SUBSTRACT: 109,
+     * DECIMAL: 110,
+     * DIVIDE: 111,
+     * F1: 112,
+     * F2: 113,
+     * F3: 114,
+     * F4: 115,
+     * F5: 116,
+     * F6: 117,
+     * F7: 118,
+     * F8: 119,
+     * F9: 120,
+     * F10: 121,
+     * F11: 122,
+     * F12: 123,
+     * SHIFT: 16,
+     * CTRL: 17,
+     * ALT: 18,
+     * PLUS: 187,
+     * COMMA: 188,
+     * MINUS: 189,
+     * PERIOD: 190,
+     * PULT_UP: 29460,
+     * PULT_DOWN: 29461,
+     * PULT_LEFT: 4,
+     * PULT_RIGHT': 5
+     * ~~~
+     */
     keys: {
         'BACKSPACE': 8,
         'TAB': 9,
@@ -1239,39 +583,20 @@ Crafty.extend({
     },
 
     /**@
-    * #Crafty.mouseButtons
-    * @category Input
-    * Object of mouseButton names and the corresponding button ID.
-    * In all mouseEvents we add the e.mouseButton property with a value normalized to match e.button of modern webkit
-    * 
-    * ~~~
-    * LEFT: 0,
-    * MIDDLE: 1,
-    * RIGHT: 2
-    * ~~~
-    */
+     * #Crafty.mouseButtons
+     * @category Input
+     * Object of mouseButton names and the corresponding button ID.
+     * In all mouseEvents we add the e.mouseButton property with a value normalized to match e.button of modern webkit
+     *
+     * ~~~
+     * LEFT: 0,
+     * MIDDLE: 1,
+     * RIGHT: 2
+     * ~~~
+     */
     mouseButtons: {
         LEFT: 0,
         MIDDLE: 1,
         RIGHT: 2
     }
-});
-
-
-
-/**
-* Entity fixes the lack of setter support
-*/
-Crafty.c("viewport", {
-    init: function () {
-        this.bind("EnterFrame", function () {
-            if (Crafty.viewport._x !== Crafty.viewport.x) {
-                Crafty.viewport.scroll('_x', Crafty.viewport.x);
-            }
-
-            if (Crafty.viewport._y !== Crafty.viewport.y) {
-                Crafty.viewport.scroll('_y', Crafty.viewport.y);
-            }
-        });
-    }
-});
+});
\ No newline at end of file
diff --git a/src/fps.js b/src/fps.js
deleted file mode 100644
index 6ee60803..00000000
--- a/src/fps.js
+++ /dev/null
@@ -1,22 +0,0 @@
-  /**@
-    * #FPS
-    * @category Core
-    * @trigger MessureFPS - each second
-    * Component to last X FPS Messurements
-    * @example
-    * 
-    * Crafty.e("2D,DOM,FPS,Text").attr({maxValues:10}).bind("MessureFPS",function(fps){
-    *   this.text("FPS"+fps.value); //Display Current FPS
-    *   console.log(this.values); // Display last x Values
-    * })
-    */
-  Crafty.c("FPS",{
-         values:[],
-         maxValues:60,
-        init:function(){
-            this.bind("MessureFPS",function(fps){
-                if(this.values.length > this.maxValues) this.values.splice(0,1);
-                this.values.push(fps.value);
-             });
-        }
-    });
\ No newline at end of file
diff --git a/src/hitbox.js b/src/hitbox.js
deleted file mode 100644
index 4d12b739..00000000
--- a/src/hitbox.js
+++ /dev/null
@@ -1,117 +0,0 @@
-
-/**@
-* #.WiredHitBox
-* @comp Collision
-* 
-* Components to display Crafty.polygon Array for debugging collision detection
-* 
-* @example
-* This will display a wired square over your original Canvas screen
-* ~~~
-* Crafty.e("2D,DOM,Player,Collision,WiredHitBox").collision(new Crafty.polygon([0,0],[0,300],[300,300],[300,0]))
-* ~~~
-*/
-Crafty.c("WiredHitBox", {
-
-	init: function () {
-
-		if (Crafty.support.canvas) {
-			var c = document.getElementById('HitBox');
-			if (!c) {
-				c = document.createElement("canvas");
-				c.id = 'HitBox';
-				c.width = Crafty.viewport.width;
-				c.height = Crafty.viewport.height;
-				c.style.position = 'absolute';
-				c.style.left = "0px";
-				c.style.top = "0px";
-				c.style.zIndex = '1000';
-				Crafty.stage.elem.appendChild(c);
-			}
-			var ctx = c.getContext('2d');
-			var drawed = 0, total = Crafty("WiredHitBox").length;
-			var drawBoxFunction = function () {
-				if (drawed == total) {
-					ctx.clearRect(0, 0, Crafty.viewport.width, Crafty.viewport.height);
-					drawed = 0;
-				}
-				ctx.beginPath();
-				for (var p in this.map.points) {
-					ctx.lineTo(Crafty.viewport.x + this.map.points[p][0], Crafty.viewport.y + this.map.points[p][1]);
-				}
-				ctx.closePath();
-				ctx.stroke();
-				drawed++;
-			};
-			this.requires("Collision").bind("EnterFrame", drawBoxFunction);
-			this.bind('RemoveComponent', function (c) {
-				if (c == 'WiredHitBox') {
-					this.unbind('EnterFrame', drawBoxFunction);
-					if (drawed == total) {
-						ctx.clearRect(0, 0, Crafty.viewport.width, Crafty.viewport.height);
-						drawed = 0;
-					}
-				}
-			});
-		}
-
-		return this;
-	}
-});
-/**@
-* #.SolidHitBox
-* @comp Collision
-* 
-* Components to display Crafty.polygon Array for debugging collision detection
-* 
-* @example
-* This will display a solid triangle over your original Canvas screen
-* ~~~
-* Crafty.e("2D,DOM,Player,Collision,SolidHitBox").collision(new Crafty.polygon([0,0],[0,300],[300,300]))
-* ~~~
-*/
-Crafty.c("SolidHitBox", {
-	init: function () {
-		if (Crafty.support.canvas) {
-			var c = document.getElementById('HitBox');
-			if (!c) {
-				c = document.createElement("canvas");
-				c.id = 'HitBox';
-				c.width = Crafty.viewport.width;
-				c.height = Crafty.viewport.height;
-				c.style.position = 'absolute';
-				c.style.left = "0px";
-				c.style.top = "0px";
-				c.style.zIndex = '1000';
-				Crafty.stage.elem.appendChild(c);
-			}
-			var ctx = c.getContext('2d');
-			var drawed = 0, total = Crafty("SolidHitBox").length;
-			var drawBoxFunction = function () {
-				if (drawed == total) {
-					ctx.clearRect(0, 0, Crafty.viewport.width, Crafty.viewport.height);
-					drawed = 0;
-				}
-				ctx.beginPath();
-				for (var p in this.map.points) {
-					ctx.lineTo(Crafty.viewport.x + this.map.points[p][0], Crafty.viewport.y + this.map.points[p][1]);
-				}
-				ctx.closePath();
-				ctx.fill();
-				drawed++;
-			}
-			this.requires("Collision").bind("EnterFrame", drawBoxFunction);
-			this.bind("RemoveComponent", function (c) {
-				if (c == 'SolidHitBox') {
-					this.unbind('EnterFrame', drawBoxFunction);
-					if (drawed == total) {
-						ctx.clearRect(0, 0, Crafty.viewport.width, Crafty.viewport.height);
-						drawed = 0;
-					}
-				}
-			});
-		}
-
-		return this;
-	}
-});
\ No newline at end of file
diff --git a/src/html.js b/src/html.js
index 0f1c9081..842b898e 100644
--- a/src/html.js
+++ b/src/html.js
@@ -1,78 +1,81 @@
+var Crafty = require('./core.js'),
+    document = window.document;
+
 /**@
-* #HTML
-* @category Graphics
-* Component allow for insertion of arbitrary HTML into an entity
-*/
+ * #HTML
+ * @category Graphics
+ * Component allow for insertion of arbitrary HTML into an entity
+ */
 Crafty.c("HTML", {
-	inner: '',
+    inner: '',
 
-	init: function () {
-		this.requires('2D, DOM');
-	},
+    init: function () {
+        this.requires('2D, DOM');
+    },
 
-	/**@
-	* #.replace
-	* @comp HTML
-	* @sign public this .replace(String html)
-	* @param html - arbitrary html
-	* 
-	* This method will replace the content of this entity with the supplied html
-	*
-	* @example
-	* Create a link
-	* ~~~
-	* Crafty.e("HTML")
-	*    .attr({x:20, y:20, w:100, h:100})
-    *    .replace("Crafty.js");
-	* ~~~
-	*/
-	replace: function (new_html) {
-		this.inner = new_html;
-		this._element.innerHTML = new_html;
-		return this;
-	},
+    /**@
+     * #.replace
+     * @comp HTML
+     * @sign public this .replace(String html)
+     * @param html - arbitrary html
+     *
+     * This method will replace the content of this entity with the supplied html
+     *
+     * @example
+     * Create a link
+     * ~~~
+     * Crafty.e("HTML")
+     *    .attr({x:20, y:20, w:100, h:100})
+     *    .replace("Crafty.js");
+     * ~~~
+     */
+    replace: function (new_html) {
+        this.inner = new_html;
+        this._element.innerHTML = new_html;
+        return this;
+    },
 
-	/**@
-	* #.append
-	* @comp HTML
-	* @sign public this .append(String html)
-	* @param html - arbitrary html
-	* 
-	* This method will add the supplied html in the end of the entity
-	*
-	* @example
-	* Create a link
-	* ~~~
-	* Crafty.e("HTML")
-	*    .attr({x:20, y:20, w:100, h:100})
-    *    .append("Crafty.js");
-	* ~~~
-	*/
-	append: function (new_html) {
-		this.inner += new_html;
-		this._element.innerHTML += new_html;
-		return this;
-	},
+    /**@
+     * #.append
+     * @comp HTML
+     * @sign public this .append(String html)
+     * @param html - arbitrary html
+     *
+     * This method will add the supplied html in the end of the entity
+     *
+     * @example
+     * Create a link
+     * ~~~
+     * Crafty.e("HTML")
+     *    .attr({x:20, y:20, w:100, h:100})
+     *    .append("Crafty.js");
+     * ~~~
+     */
+    append: function (new_html) {
+        this.inner += new_html;
+        this._element.innerHTML += new_html;
+        return this;
+    },
 
-	/**@
-	* #.prepend
-	* @comp HTML
-	* @sign public this .prepend(String html)
-	* @param html - arbitrary html
-	* 
-	* This method will add the supplied html in the beginning of the entity
-	*
-	* @example
-	* Create a link
-	* ~~~
-	* Crafty.e("HTML")
-	*    .attr({x:20, y:20, w:100, h:100})
-    *    .prepend("Crafty.js");
-	* ~~~
-	*/
-	prepend: function (new_html) {
-		this.inner = new_html + this.inner;
-		this._element.innerHTML = new_html + this.inner;
-		return this;
-	}
+    /**@
+     * #.prepend
+     * @comp HTML
+     * @sign public this .prepend(String html)
+     * @param html - arbitrary html
+     *
+     * This method will add the supplied html in the beginning of the entity
+     *
+     * @example
+     * Create a link
+     * ~~~
+     * Crafty.e("HTML")
+     *    .attr({x:20, y:20, w:100, h:100})
+     *    .prepend("Crafty.js");
+     * ~~~
+     */
+    prepend: function (new_html) {
+        this.inner = new_html + this.inner;
+        this._element.innerHTML = new_html + this.inner;
+        return this;
+    }
 });
\ No newline at end of file
diff --git a/src/import.js b/src/import.js
index 10bd953a..64f4e97e 100644
--- a/src/import.js
+++ b/src/import.js
@@ -1,59 +1,63 @@
+var Crafty = require('./core.js'),
+    document = window.document;
+
 /**@
-* #Crafty.import
-* @sign public void Crafty.import(String url[, String scene])
-* @param url - Path to the saved file
-* @param scene - Name of the scene to load if saved multiple scenes
-* @sign public void Crafty.import(Object sceneData)
-* @param sceneData - Scene data generated from builder
-* This method will load in scene data generated by the Crafty Builder.
-*
-* @example
-* ~~~
-* Crafty.import({
-*	'0': {props: value},
-*	'n': [
-*		{c: "comp, list", image: ''}
-*	]
-* });
-* ~~~
-*/
-Crafty.import = function (obj, scene) {
-	//if its a string, load the script file
-	if (typeof obj === "string") {
-		if (levelData) {
-			if (scene) Crafty.import(levelData[scene]);
-			else Crafty.import(levelData);
-		} else {
-			var elem;
-			elem = document.createElement("script");
-			elem.onload = function () {
-				if (scene) Crafty.import(levelData[scene]);
-				else Crafty.import(levelData);
-			};
-			elem.src = obj;
-		}
-		return;
-	}
+ * #Crafty.import
+ * @sign public void Crafty.import(String url[, String scene])
+ * @param url - Path to the saved file
+ * @param scene - Name of the scene to load if saved multiple scenes
+ * @sign public void Crafty.import(Object sceneData)
+ * @param sceneData - Scene data generated from builder
+ * This method will load in scene data generated by the Crafty Builder.
+ *
+ * @example
+ * ~~~
+ * Crafty.import({
+ *	'0': {props: value},
+ *	'n': [
+ *		{c: "comp, list", image: ''}
+ *	]
+ * });
+ * ~~~
+ */
+Crafty['import'] = function (obj, scene) {
+    //if its a string, load the script file
+    if (typeof obj === "string") {
+        if (levelData) {
+            if (scene) Crafty.import(levelData[scene]);
+            else Crafty.import(levelData);
+        } else {
+            var elem;
+            elem = document.createElement("script");
+            elem.onload = function () {
+                if (scene) Crafty.import(levelData[scene]);
+                else Crafty.import(levelData);
+            };
+            elem.src = obj;
+        }
+        return;
+    }
 
-	var key, i = 0, l, current, ent;
+    var key, i = 0,
+        l, current, ent;
 
-	//loop over new entities to create
-	if (obj.n && typeof obj.n === "object") {
-		for (l = obj.n.length; i < l; ++i) {
-			current = obj.n[i];
+    //loop over new entities to create
+    if (obj.n && typeof obj.n === "object") {
+        for (l = obj.n.length; i < l; ++i) {
+            current = obj.n[i];
 
-			//create entity with components
-			ent = Crafty.e(current.c);
-			delete current.c; //remove the components
+            //create entity with components
+            ent = Crafty.e(current.c);
+            delete current.c; //remove the components
 
-			//apply the other properties
-			ent.attr(current);
-		}
-	}
+            //apply the other properties
+            ent.attr(current);
+        }
+    }
 
-	//loop over modified entities
-	for (key in obj) {
-		ent = Crafty(key);
-		ent.attr(obj[key]);
-	}
-}
\ No newline at end of file
+    //loop over modified entities
+    for (key in obj) {
+        ent = Crafty(key);
+        ent.attr(obj[key]);
+    }
+};
\ No newline at end of file
diff --git a/src/intro.js b/src/intro.js
deleted file mode 100644
index e2d61865..00000000
--- a/src/intro.js
+++ /dev/null
@@ -1,2 +0,0 @@
-//wrap around components
-function(Crafty, window, document) {
diff --git a/src/isometric.js b/src/isometric.js
index 1bf1d9f5..13268014 100644
--- a/src/isometric.js
+++ b/src/isometric.js
@@ -1,66 +1,69 @@
+var Crafty = require('./core.js'),
+    document = window.document;
+
 Crafty.extend({
-/**@
-* #Crafty.isometric
-* @category 2D
-* Place entities in a 45deg isometric fashion.
-*/
+    /**@
+     * #Crafty.isometric
+     * @category 2D
+     * Place entities in a 45deg isometric fashion.
+     */
     isometric: {
         _tile: {
             width: 0,
             height: 0
         },
-        _elements:{},
+        _elements: {},
         _pos: {
-            x:0,
-            y:0
+            x: 0,
+            y: 0
         },
         _z: 0,
         /**@
-        * #Crafty.isometric.size
-        * @comp Crafty.isometric
-        * @sign public this Crafty.isometric.size(Number tileSize)
-        * @param tileSize - The size of the tiles to place.
-        * 
-        * Method used to initialize the size of the isometric placement.
-        * Recommended to use a size values in the power of `2` (128, 64 or 32).
-        * This makes it easy to calculate positions and implement zooming.
-        * 
-        * @example
-        * ~~~
-        * var iso = Crafty.isometric.size(128);
-        * ~~~
-        * 
-        * @see Crafty.isometric.place
-        */
+         * #Crafty.isometric.size
+         * @comp Crafty.isometric
+         * @sign public this Crafty.isometric.size(Number tileSize)
+         * @param tileSize - The size of the tiles to place.
+         *
+         * Method used to initialize the size of the isometric placement.
+         * Recommended to use a size values in the power of `2` (128, 64 or 32).
+         * This makes it easy to calculate positions and implement zooming.
+         *
+         * @example
+         * ~~~
+         * var iso = Crafty.isometric.size(128);
+         * ~~~
+         *
+         * @see Crafty.isometric.place
+         */
         size: function (width, height) {
             this._tile.width = width;
-            this._tile.height = height > 0 ? height : width/2; //Setup width/2 if height isn't set
+            this._tile.height = height > 0 ? height : width / 2; //Setup width/2 if height isn't set
             return this;
         },
         /**@
-        * #Crafty.isometric.place
-        * @comp Crafty.isometric
-        * @sign public this Crafty.isometric.place(Number x, Number y, Number z, Entity tile)
-        * @param x - The `x` position to place the tile
-        * @param y - The `y` position to place the tile
-        * @param z - The `z` position or height to place the tile
-        * @param tile - The entity that should be position in the isometric fashion
-        * 
-        * Use this method to place an entity in an isometric grid.
-        * 
-        * @example
-        * ~~~
-        * var iso = Crafty.isometric.size(128);
-        * iso.place(2, 1, 0, Crafty.e('2D, DOM, Color').color('red').attr({w:128, h:128}));
-        * ~~~
-        * 
-        * @see Crafty.isometric.size
-        */
+         * #Crafty.isometric.place
+         * @comp Crafty.isometric
+         * @sign public this Crafty.isometric.place(Number x, Number y, Number z, Entity tile)
+         * @param x - The `x` position to place the tile
+         * @param y - The `y` position to place the tile
+         * @param z - The `z` position or height to place the tile
+         * @param tile - The entity that should be position in the isometric fashion
+         *
+         * Use this method to place an entity in an isometric grid.
+         *
+         * @example
+         * ~~~
+         * var iso = Crafty.isometric.size(128);
+         * iso.place(2, 1, 0, Crafty.e('2D, DOM, Color').color('red').attr({w:128, h:128}));
+         * ~~~
+         *
+         * @see Crafty.isometric.size
+         */
         place: function (x, y, z, obj) {
-            var pos = this.pos2px(x,y);
-            pos.top -= z * (this._tile.width / 2);
+            var pos = this.pos2px(x, y);
+            pos.top -= z * (this._tile.height / 2);
             obj.attr({
-                x: pos.left + Crafty.viewport._x, 
+                x: pos.left + Crafty.viewport._x,
                 y: pos.top + Crafty.viewport._y
             }).z += z;
             return this;
@@ -69,56 +72,56 @@ Crafty.extend({
          * #Crafty.isometric.pos2px
          * @comp Crafty.isometric
          * @sign public this Crafty.isometric.pos2px(Number x,Number y)
-         * @param x 
+         * @param x
          * @param y
          * @return Object {left Number,top Number}
-         * 
+         *
          * This method calculate the X and Y Coordinates to Pixel Positions
-         * 
+         *
          * @example
          * ~~~
          * var iso = Crafty.isometric.size(128,96);
          * var position = iso.pos2px(100,100); //Object { left=12800, top=4800}
          * ~~~
          */
-        pos2px:function(x,y){
+        pos2px: function (x, y) {
             return {
-                left:x * this._tile.width + (y & 1) * (this._tile.width / 2),
-                top:y * this._tile.height / 2 
-            }
+                left: x * this._tile.width + (y & 1) * (this._tile.width / 2),
+                top: y * this._tile.height / 2
+            };
         },
-         /**@
+        /**@
          * #Crafty.isometric.px2pos
          * @comp Crafty.isometric
          * @sign public this Crafty.isometric.px2pos(Number left,Number top)
-         * @param top 
+         * @param top
          * @param left
          * @return Object {x Number,y Number}
-         * 
+         *
          * This method calculate pixel top,left positions to x,y coordinates
-         * 
+         *
          * @example
          * ~~~
          * var iso = Crafty.isometric.size(128,96);
          * var px = iso.pos2px(12800,4800);
-         * console.log(px); //Object { x=-100, y=-100}
+         * console.log(px); //Object { x=100, y=100}
          * ~~~
          */
-        px2pos:function(left,top){
+        px2pos: function (left, top) {
             return {
-                x:Math.ceil(-left / this._tile.width - (top & 1)*0.5),
-                y:-top / this._tile.height * 2
+                x: -Math.ceil(-left / this._tile.width - (top & 1) * 0.5),
+                y: top / this._tile.height * 2
             }; 
         },
         /**@
          * #Crafty.isometric.centerAt
          * @comp Crafty.isometric
          * @sign public this Crafty.isometric.centerAt(Number x,Number y)
-         * @param top 
+         * @param top
          * @param left
-         * 
+         *
          * This method center the Viewport at x/y location or gives the current centerpoint of the viewport
-         * 
+         *
          * @example
          * ~~~
          * var iso = Crafty.isometric.size(128,96).centerAt(10,10); //Viewport is now moved
@@ -126,17 +129,17 @@ Crafty.extend({
          * console.log(iso.centerAt());
          * ~~~
          */
-        centerAt:function(x,y){   
-            if(typeof x == "number" && typeof y == "number"){
-                var center = this.pos2px(x,y);
-                Crafty.viewport._x = -center.left+Crafty.viewport.width/2-this._tile.width/2;
-                Crafty.viewport._y = -center.top+Crafty.viewport.height/2-this._tile.height/2;
+        centerAt: function (x, y) {
+            if (typeof x == "number" && typeof y == "number") {
+                var center = this.pos2px(x, y);
+                Crafty.viewport._x = -center.left + Crafty.viewport.width / 2 - this._tile.width / 2;
+                Crafty.viewport._y = -center.top + Crafty.viewport.height / 2 - this._tile.height / 2;
                 return this;
-            }else{
+            } else {
                 return {
-                    top:-Crafty.viewport._y+Crafty.viewport.height/2-this._tile.height/2,
-                    left:-Crafty.viewport._x+Crafty.viewport.width/2-this._tile.width/2
-                } 
+                    top: -Crafty.viewport._y + Crafty.viewport.height / 2 - this._tile.height / 2,
+                    left: -Crafty.viewport._x + Crafty.viewport.width / 2 - this._tile.width / 2
+                };
             }
         },
         /**@
@@ -144,9 +147,9 @@ Crafty.extend({
          * @comp Crafty.isometric
          * @sign public this Crafty.isometric.area()
          * @return Object {x:{start Number,end Number},y:{start Number,end Number}}
-         * 
+         *
          * This method get the Area surrounding by the centerpoint depends on viewport height and width
-         * 
+         *
          * @example
          * ~~~
          * var iso = Crafty.isometric.size(128,96).centerAt(10,10); //Viewport is now moved
@@ -155,24 +158,24 @@ Crafty.extend({
          *   for(var x = area.x.start ;x <= area.x.end;x++){
          *       iso.place(x,y,0,Crafty.e("2D,DOM,gras")); //Display tiles in the Screen
          *   }
-         * }  
+         * }
          * ~~~
          */
-        area:function(){
+        area: function () {
             //Get the center Point in the viewport
             var center = this.centerAt();
-            var start = this.px2pos(-center.left+Crafty.viewport.width/2,-center.top+Crafty.viewport.height/2);
-            var end = this.px2pos(-center.left-Crafty.viewport.width/2,-center.top-Crafty.viewport.height/2);
+            var start = this.px2pos(-center.left + Crafty.viewport.width / 2, -center.top + Crafty.viewport.height / 2);
+            var end = this.px2pos(-center.left - Crafty.viewport.width / 2, -center.top - Crafty.viewport.height / 2);
             return {
-                x:{
-                    start : start.x,
-                    end : end.x
+                x: {
+                    start: start.x,
+                    end: end.x
                 },
-                y:{
-                    start : start.y,
-                    end : end.y
+                y: {
+                    start: start.y,
+                    end: end.y
                 }
             };
-        } 
+        }
     }
 });
diff --git a/src/license.txt b/src/license.txt
deleted file mode 100644
index 614b3ebb..00000000
--- a/src/license.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-/*!
-* Crafty v0.5.4
-* http://craftyjs.com
-*
-* Copyright 2010-2013, Louis Stowasser
-* Dual licensed under the MIT or GPL licenses.
-*/
diff --git a/src/loader.js b/src/loader.js
index 5a180241..2dfa99e6 100644
--- a/src/loader.js
+++ b/src/loader.js
@@ -1,397 +1,423 @@
+var Crafty = require('./core.js'),
+    document = window.document;
+
 Crafty.extend({
-/**@
-	* #Crafty.assets
-	* @category Assets
-	* An object containing every asset used in the current Crafty game.
-	* The key is the URL and the value is the `Audio` or `Image` object.
-	*
-	* If loading an asset, check that it is in this object first to avoid loading twice.
-	* 
-	* @example
-	* ~~~
-	* var isLoaded = !!Crafty.assets["images/sprite.png"];
-	* ~~~
-	* @see Crafty.loader
-	*/
-	assets: {},
+    /**@
+     * #Crafty.assets
+     * @category Assets
+     * An object containing every asset used in the current Crafty game.
+     * The key is the URL and the value is the `Audio` or `Image` object.
+     *
+     * If loading an asset, check that it is in this object first to avoid loading twice.
+     *
+     * @example
+     * ~~~
+     * var isLoaded = !!Crafty.assets["images/sprite.png"];
+     * ~~~
+     * @see Crafty.loader
+     */
+    assets: {},
 
     /**@
-    * #Crafty.asset
-    * @category Assets
-    * 
-    * @trigger NewAsset - After setting new asset - Object - key and value of new added asset.
-    * @sign public void Crafty.asset(String key, Object asset)
-    * @param key - asset url.
-    * @param asset - Audio` or `Image` object.
-    * Add new asset to assets object.
-    * 
-    * @sign public void Crafty.asset(String key)
-    * @param key - asset url.
-    * Get asset from assets object.
-    * 
-    * @example
-    * ~~~
-    * Crafty.asset(key, value);
-    * var asset = Crafty.asset(key); //object with key and value fields
-    * ~~~
-    * 
-    * @see Crafty.assets
-    */
-    asset: function(key, value) {
+     * #Crafty.asset
+     * @category Assets
+     *
+     * @trigger NewAsset - After setting new asset - Object - key and value of new added asset.
+     * @sign public void Crafty.asset(String key, Object asset)
+     * @param key - asset url.
+     * @param asset - Audio` or `Image` object.
+     * Add new asset to assets object.
+     *
+     * @sign public void Crafty.asset(String key)
+     * @param key - asset url.
+     * Get asset from assets object.
+     *
+     * @example
+     * ~~~
+     * Crafty.asset(key, value);
+     * var asset = Crafty.asset(key); //object with key and value fields
+     * ~~~
+     *
+     * @see Crafty.assets
+     */
+    asset: function (key, value) {
         if (arguments.length === 1) {
             return Crafty.assets[key];
         }
 
         if (!Crafty.assets[key]) {
             Crafty.assets[key] = value;
-            this.trigger("NewAsset", {key : key, value : value});
+            this.trigger("NewAsset", {
+                key: key,
+                value: value
+            });
+            return value;
         }
     },
-        /**@
-	* #Crafty.image_whitelist
-	* @category Assets
-	* 
-    * 
-    * A list of file extensions that can be loaded as images by Crafty.load
-    *
-	* @example
-	* ~~~
-        * Crafty.image_whitelist.push("tif")
-	* Crafty.load(["images/sprite.tif", "sounds/jump.mp3"],
-	*     function() {
-	*         //when loaded
-	*         Crafty.scene("main"); //go to main scene
-	*         Crafty.audio.play("jump.mp3"); //Play the audio file
-	*     },
-	*
-	*     function(e) {
-	*       //progress
-	*     },
-	*
-	*     function(e) {
-	*       //uh oh, error loading
-	*     }
-	* );
-	* ~~~
-	* 
-	* @see Crafty.asset
-        * @see Crafty.load
-	*/
+    /**@
+     * #Crafty.image_whitelist
+     * @category Assets
+     *
+     *
+     * A list of file extensions that can be loaded as images by Crafty.load
+     *
+     * @example
+     * ~~~
+     * Crafty.image_whitelist.push("tif")
+     * Crafty.load(["images/sprite.tif", "sounds/jump.mp3"],
+     *     function() {
+     *         //when loaded
+     *         Crafty.scene("main"); //go to main scene
+     *         Crafty.audio.play("jump.mp3"); //Play the audio file
+     *     },
+     *
+     *     function(e) {
+     *       //progress
+     *     },
+     *
+     *     function(e) {
+     *       //uh oh, error loading
+     *     }
+     * );
+     * ~~~
+     *
+     * @see Crafty.asset
+     * @see Crafty.load
+     */
     image_whitelist: ["jpg", "jpeg", "gif", "png", "svg"],
-	/**@
-	* #Crafty.loader
-	* @category Assets
-	* @sign public void Crafty.load(Array assets, Function onLoad[, Function onProgress, Function onError])
-	* @param assets - Array of assets to load (accepts sounds and images)
-	* @param onLoad - Callback when the assets are loaded
-	* @param onProgress - Callback when an asset is loaded. Contains information about assets loaded
-	* @param onError - Callback when an asset fails to load
-	* 
-	* Preloader for all assets. Takes an array of URLs and
-	* adds them to the `Crafty.assets` object.
-	*
-	* Files with suffixes in `image_whitelist` (case insensitive) will be loaded.
-	*
-	* If `Crafty.support.audio` is `true`, files with the following suffixes `mp3`, `wav`, `ogg` and `mp4` (case insensitive) can be loaded.
-	*
-	* The `onProgress` function will be passed on object with information about
-	* the progress including how many assets loaded, total of all the assets to
-	* load and a percentage of the progress.
-    * ~~~
-    * { loaded: j, total: total, percent: (j / total * 100) ,src:src})
-	* ~~~
-	*
-	* `onError` will be passed with the asset that couldn't load.
-    *
-	* When `onError` is not provided, the onLoad is loaded even some assets are not successfully loaded. Otherwise, onLoad will be called no matter whether there are errors or not. 
-	* 
-	* @example
-	* ~~~
-	* Crafty.load(["images/sprite.png", "sounds/jump.mp3"],
-	*     function() {
-	*         //when loaded
-	*         Crafty.scene("main"); //go to main scene
-	*         Crafty.audio.play("jump.mp3"); //Play the audio file
-	*     },
-	*
-	*     function(e) {
-	*       //progress
-	*     },
-	*
-	*     function(e) {
-	*       //uh oh, error loading
-	*     }
-	* );
-	* ~~~
-	* 
-	* @see Crafty.assets
-        * @see Crafty.image_whitelist
-	*/
+    /**@
+     * #Crafty.loader
+     * @category Assets
+     * @sign public void Crafty.load(Array assets, Function onLoad[, Function onProgress, Function onError])
+     * @param assets - Array of assets to load (accepts sounds and images)
+     * @param onLoad - Callback when the assets are loaded
+     * @param onProgress - Callback when an asset is loaded. Contains information about assets loaded
+     * @param onError - Callback when an asset fails to load
+     *
+     * Preloader for all assets. Takes an array of URLs and
+     * adds them to the `Crafty.assets` object.
+     *
+     * Files with suffixes in `image_whitelist` (case insensitive) will be loaded.
+     *
+     * If `Crafty.support.audio` is `true`, files with the following suffixes `mp3`, `wav`, `ogg` and `mp4` (case insensitive) can be loaded.
+     *
+     * The `onProgress` function will be passed on object with information about
+     * the progress including how many assets loaded, total of all the assets to
+     * load and a percentage of the progress.
+     * ~~~
+     * { loaded: j, total: total, percent: (j / total * 100) ,src:src})
+     * ~~~
+     *
+     * `onError` will be passed with the asset that couldn't load.
+     *
+     * When `onError` is not provided, the onLoad is loaded even some assets are not successfully loaded. Otherwise, onLoad will be called no matter whether there are errors or not.
+     *
+     * @example
+     * ~~~
+     * Crafty.load(["images/sprite.png", "sounds/jump.mp3"],
+     *     function() {
+     *         //when loaded
+     *         Crafty.scene("main"); //go to main scene
+     *         Crafty.audio.play("jump.mp3"); //Play the audio file
+     *     },
+     *
+     *     function(e) {
+     *       //progress
+     *     },
+     *
+     *     function(e) {
+     *       //uh oh, error loading
+     *     }
+     * );
+     * ~~~
+     *
+     * @see Crafty.assets
+     * @see Crafty.image_whitelist
+     */
     load: function (data, oncomplete, onprogress, onerror) {
-            
-        var i = 0, l = data.length, current, obj, total = l, j = 0, ext = "" ;
-  
+
+        var i = 0,
+            l = data.length,
+            current, obj, total = l,
+            j = 0,
+            ext = "";
+
         //Progress function
-        function pro(){
+
+        function pro() {
             var src = this.src;
-           
+
             //Remove events cause audio trigger this event more than once(depends on browser)
-            if (this.removeEventListener) {  
-                this.removeEventListener('canplaythrough', pro, false);     
+            if (this.removeEventListener) {
+                this.removeEventListener('canplaythrough', pro, false);
             }
-           
+
             ++j;
             //if progress callback, give information of assets loaded, total and percent
-            if (onprogress) 
+            if (onprogress)
                 onprogress({
-                    loaded: j, 
-                    total: total, 
+                    loaded: j,
+                    total: total,
                     percent: (j / total * 100),
-                    src:src
+                    src: src
                 });
-				
-            if(j === total && oncomplete) oncomplete();
-        };
+
+            if (j === total && oncomplete) oncomplete();
+        }
         //Error function
-        function err(){
+
+        function err() {
             var src = this.src;
-            if (onerror) 
+            if (onerror)
                 onerror({
-                    loaded: j, 
-                    total: total, 
+                    loaded: j,
+                    total: total,
                     percent: (j / total * 100),
-                    src:src
+                    src: src
                 });
-           		
+
             j++;
-            if(j === total && oncomplete) oncomplete();
-        };
-           
-        for (; i < l; ++i) {       
+            if (j === total && oncomplete) oncomplete();
+        }
+
+        for (; i < l; ++i) {
             current = data[i];
             ext = current.substr(current.lastIndexOf('.') + 1, 3).toLowerCase();
-           
-            obj = Crafty.asset(current) || null;   
-          
-            if (Crafty.support.audio && Crafty.audio.supported[ext]) {   
-                //Create new object if not exists
-                if(!obj){
+
+            obj = Crafty.asset(current) || null;
+
+            if (Crafty.audio.supports(ext)) {
+                //Create a new asset if necessary, using the file name as an id
+                if (!obj) {
                     var name = current.substr(current.lastIndexOf('/') + 1).toLowerCase();
-                    obj = Crafty.audio.audioElement();
-                    obj.id = name;
-                    obj.src = current;
-                    obj.preload = "auto";
-                    obj.volume = Crafty.audio.volume;
-                    Crafty.asset(current, obj);
-                    Crafty.audio.sounds[name] = {
-                        obj:obj,
-                        played:0
-                    } 
+                    obj = Crafty.audio.create(name, current).obj;
                 }
-        
+
                 //addEventListener is supported on IE9 , Audio as well
-                if (obj.addEventListener) {  
-                    obj.addEventListener('canplaythrough', pro, false);     
+                if (obj.addEventListener) {
+                    obj.addEventListener('canplaythrough', pro, false);
                 }
-                   
-                 
-            } else if (Crafty.image_whitelist.indexOf(ext) >= 0) { 
-                if(!obj) {
+
+
+            } else if (Crafty.image_whitelist.indexOf(ext) >= 0) {
+                if (!obj) {
                     obj = new Image();
-                    Crafty.asset(current, obj);   
+                    Crafty.asset(current, obj);
+                }
+                obj.onload = pro;
+                if (Crafty.support.prefix === 'webkit') {
+                    obj.src = ""; // workaround for webkit bug
                 }
-                obj.onload=pro;
-                obj.src = ""; // workaround for webkit bug
                 obj.src = current; //setup src after onload function Opera/IE Bug
-             
+
             } else {
                 total--;
                 continue; //skip if not applicable
             }
             obj.onerror = err;
         }
-       
-       
+
+        // If we aren't trying to handle *any* of the files, that's as complete as it gets!
+        if (total === 0)
+            oncomplete();
+
     },
-	/**@
-	* #Crafty.modules
-	* @category Assets
-	* @sign public void Crafty.modules([String repoLocation,] Object moduleMap[, Function onLoad])
-	* @param modules - Map of name:version pairs for modules to load
-	* @param onLoad - Callback when the modules are loaded
-	* 
-	* Browse the selection of community modules on http://craftycomponents.com
-	* 
-    * It is possible to create your own repository.
-	*
-	*
-	* @example
-	* ~~~
-	* // Loading from default repository
-	* Crafty.modules({ moveto: 'DEV' }, function () {
-	*     //module is ready
-	*     Crafty.e("MoveTo, 2D, DOM");
-	* });
-	*
-	* // Loading from your own server
-	* Crafty.modules({ 'http://mydomain.com/js/mystuff.js': 'DEV' }, function () {
-	*     //module is ready
-	*     Crafty.e("MoveTo, 2D, DOM");
-	* });
-	*
-	* // Loading from alternative repository
-	* Crafty.modules('http://cdn.crafty-modules.com', { moveto: 'DEV' }, function () {
-	*     //module is ready
-	*     Crafty.e("MoveTo, 2D, DOM");
-	* });
-	*
-	* // Loading from the latest component website
-	* Crafty.modules(
-	*     'http://cdn.craftycomponents.com'
-	*     , { MoveTo: 'release' }
-	*     , function () {
-	*     Crafty.e("2D, DOM, Color, MoveTo")
-	*       .attr({x: 0, y: 0, w: 50, h: 50})
-	*       .color("green");
-	*     });
-	* });
-	* ~~~
-	*
-	*/
-	modules: function (modulesRepository, moduleMap, oncomplete) {
-
-		if (arguments.length === 2 && typeof modulesRepository === "object") {
-			oncomplete = moduleMap;
-			moduleMap = modulesRepository;
-			modulesRepository = 'http://cdn.craftycomponents.com';
-		}
-
-		/*!
-		  * $script.js Async loader & dependency manager
-		  * https://github.com/ded/script.js
-		  * (c) Dustin Diaz, Jacob Thornton 2011
-		  * License: MIT
-		  */
-		var $script = (function () {
-			var win = this, doc = document
-			, head = doc.getElementsByTagName('head')[0]
-			, validBase = /^https?:\/\//
-			, old = win.$script, list = {}, ids = {}, delay = {}, scriptpath
-			, scripts = {}, s = 'string', f = false
-			, push = 'push', domContentLoaded = 'DOMContentLoaded', readyState = 'readyState'
-			, addEventListener = 'addEventListener', onreadystatechange = 'onreadystatechange'
-
-			function every(ar, fn, i) {
-				for (i = 0, j = ar.length; i < j; ++i) if (!fn(ar[i])) return f
-				return 1
-			}
-			function each(ar, fn) {
-				every(ar, function (el) {
-					return !fn(el)
-				})
-			}
-
-			if (!doc[readyState] && doc[addEventListener]) {
-				doc[addEventListener](domContentLoaded, function fn() {
-					doc.removeEventListener(domContentLoaded, fn, f)
-					doc[readyState] = 'complete'
-				}, f)
-				doc[readyState] = 'loading'
-			}
-
-			function $script(paths, idOrDone, optDone) {
-				paths = paths[push] ? paths : [paths]
-				var idOrDoneIsDone = idOrDone && idOrDone.call
-				, done = idOrDoneIsDone ? idOrDone : optDone
-				, id = idOrDoneIsDone ? paths.join('') : idOrDone
-				, queue = paths.length
-				function loopFn(item) {
-					return item.call ? item() : list[item]
-				}
-				function callback() {
-					if (!--queue) {
-						list[id] = 1
-						done && done()
-						for (var dset in delay) {
-							every(dset.split('|'), loopFn) && !each(delay[dset], loopFn) && (delay[dset] = [])
-						}
-					}
-				}
-				setTimeout(function () {
-					each(paths, function (path) {
-						if (scripts[path]) {
-							id && (ids[id] = 1)
-							return scripts[path] == 2 && callback()
-						}
-						scripts[path] = 1
-						id && (ids[id] = 1)
-						create(!validBase.test(path) && scriptpath ? scriptpath + path + '.js' : path, callback)
-					})
-				}, 0)
-				return $script
-			}
-
-			function create(path, fn) {
-				var el = doc.createElement('script')
-				, loaded = f
-				el.onload = el.onerror = el[onreadystatechange] = function () {
-					if ((el[readyState] && !(/^c|loade/.test(el[readyState]))) || loaded) return;
-					el.onload = el[onreadystatechange] = null
-					loaded = 1
-					scripts[path] = 2
-					fn()
-				}
-				el.async = 1
-				el.src = path
-				head.insertBefore(el, head.firstChild)
-			}
-
-			$script.get = create
-
-			$script.order = function (scripts, id, done) {
-				(function callback(s) {
-					s = scripts.shift()
-					if (!scripts.length) $script(s, id, done)
-					else $script(s, callback)
-				}())
-			}
-
-			$script.path = function (p) {
-				scriptpath = p
-			}
-			$script.ready = function (deps, ready, req) {
-				deps = deps[push] ? deps : [deps]
-				var missing = [];
-				!each(deps, function (dep) {
-					list[dep] || missing[push](dep);
-				}) && every(deps, function (dep) { return list[dep] }) ?
-				ready() : !function (key) {
-					delay[key] = delay[key] || []
-					delay[key][push](ready)
-					req && req(missing)
-				}(deps.join('|'))
-				return $script
-			}
-
-			$script.noConflict = function () {
-				win.$script = old;
-				return this
-			}
-
-			return $script
-		})();
-
-		var modules = [];
-		var validBase = /^(https?|file):\/\//;
-		for (var i in moduleMap) {
-			if (validBase.test(i))
-				modules.push(i)
-			else
-				modules.push(modulesRepository + '/' + i.toLowerCase() + '-' + moduleMap[i].toLowerCase() + '.js');
-		}
-
-		$script(modules, function () {
-			if (oncomplete) oncomplete();
-		});
-	}
+    /**@
+     * #Crafty.modules
+     * @category Assets
+     * @sign public void Crafty.modules([String repoLocation,] Object moduleMap[, Function onLoad])
+     * @param modules - Map of name:version pairs for modules to load
+     * @param onLoad - Callback when the modules are loaded
+     *
+     * Browse the selection of community modules on http://craftycomponents.com
+     *
+     * It is possible to create your own repository.
+     *
+     *
+     * @example
+     * ~~~
+     * // Loading from default repository
+     * Crafty.modules({ moveto: 'DEV' }, function () {
+     *     //module is ready
+     *     Crafty.e("MoveTo, 2D, DOM");
+     * });
+     *
+     * // Loading from your own server
+     * Crafty.modules({ 'http://mydomain.com/js/mystuff.js': 'DEV' }, function () {
+     *     //module is ready
+     *     Crafty.e("MoveTo, 2D, DOM");
+     * });
+     *
+     * // Loading from alternative repository
+     * Crafty.modules('http://cdn.crafty-modules.com', { moveto: 'DEV' }, function () {
+     *     //module is ready
+     *     Crafty.e("MoveTo, 2D, DOM");
+     * });
+     *
+     * // Loading from the latest component website
+     * Crafty.modules(
+     *     'http://cdn.craftycomponents.com'
+     *     , { MoveTo: 'release' }
+     *     , function () {
+     *     Crafty.e("2D, DOM, Color, MoveTo")
+     *       .attr({x: 0, y: 0, w: 50, h: 50})
+     *       .color("green");
+     *     });
+     * });
+     * ~~~
+     *
+     */
+    modules: function (modulesRepository, moduleMap, oncomplete) {
+
+        if (arguments.length === 2 && typeof modulesRepository === "object") {
+            oncomplete = moduleMap;
+            moduleMap = modulesRepository;
+            modulesRepository = 'http://cdn.craftycomponents.com';
+        }
+
+        /*!
+         * $script.js Async loader & dependency manager
+         * https://github.com/ded/script.js
+         * (c) Dustin Diaz, Jacob Thornton 2011
+         * License: MIT
+         */
+        var $script = (function () {
+            var win = this,
+                doc = document,
+                head = doc.getElementsByTagName('head')[0],
+                validBase = /^https?:\/\//,
+                old = win.$script,
+                list = {}, ids = {}, delay = {}, scriptpath, scripts = {}, s = 'string',
+                f = false,
+                push = 'push',
+                domContentLoaded = 'DOMContentLoaded',
+                readyState = 'readyState',
+                addEventListener = 'addEventListener',
+                onreadystatechange = 'onreadystatechange';
+
+                function every(ar, fn, i) {
+                    for (i = 0, j = ar.length; i < j; ++i)
+                        if (!fn(ar[i])) return f;
+                    return 1;
+                }
+
+                function each(ar, fn) {
+                    every(ar, function (el) {
+                        return !fn(el);
+                    });
+                }
+
+            if (!doc[readyState] && doc[addEventListener]) {
+                doc[addEventListener](domContentLoaded, function fn() {
+                    doc.removeEventListener(domContentLoaded, fn, f);
+                    doc[readyState] = 'complete';
+                }, f);
+                doc[readyState] = 'loading';
+            }
+
+            function $script(paths, idOrDone, optDone) {
+                paths = paths[push] ? paths : [paths];
+                var idOrDoneIsDone = idOrDone && idOrDone.call,
+                    done = idOrDoneIsDone ? idOrDone : optDone,
+                    id = idOrDoneIsDone ? paths.join('') : idOrDone,
+                    queue = paths.length;
+
+                    function loopFn(item) {
+                        return item.call ? item() : list[item];
+                    }
+
+                    function callback() {
+                        if (!--queue) {
+                            list[id] = 1;
+                            if (done)
+                                done();
+                            for (var dset in delay) {
+                                if (every(dset.split('|'), loopFn) && !each(delay[dset], loopFn))
+                                    delay[dset] = [];
+                            }
+                        }
+                    }
+                setTimeout(function () {
+                    each(paths, function (path) {
+                        if (scripts[path]) {
+                            if (id)
+                                ids[id] = 1;
+                            return scripts[path] == 2 && callback();
+                        }
+                        scripts[path] = 1;
+                        if (id)
+                            ids[id] = 1;
+                        create(!validBase.test(path) && scriptpath ? scriptpath + path + '.js' : path, callback);
+                    });
+                }, 0);
+                return $script;
+            }
+
+            function create(path, fn) {
+                var el = doc.createElement('script'),
+                    loaded = f;
+                    el.onload = el.onerror = el[onreadystatechange] = function () {
+                        if ((el[readyState] && !(/^c|loade/.test(el[readyState]))) || loaded) return;
+                        el.onload = el[onreadystatechange] = null;
+                        loaded = 1;
+                        scripts[path] = 2;
+                        fn();
+                    };
+                el.async = 1;
+                el.src = path;
+                head.insertBefore(el, head.firstChild);
+            }
+
+            $script.get = create;
+
+            $script.order = function (scripts, id, done) {
+                (function callback(s) {
+                    s = scripts.shift();
+                    if (!scripts.length) $script(s, id, done);
+                    else $script(s, callback);
+                }());
+            };
+
+            $script.path = function (p) {
+                scriptpath = p;
+            };
+            // This function is a tangled mess of conciseness, so suppress warnings here
+            /* jshint -W030 */
+            $script.ready = function (deps, ready, req) {
+                deps = deps[push] ? deps : [deps];
+                var missing = [];
+                !each(deps, function (dep) {
+                    list[dep] || missing[push](dep);
+                }) && every(deps, function (dep) {
+                    return list[dep];
+                }) ?
+                    ready() : ! function (key) {
+                        delay[key] = delay[key] || [];
+                        delay[key][push](ready);
+                        req && req(missing);
+                }(deps.join('|'));
+                return $script;
+            };
+            /* jshint +W030 */
+            $script.noConflict = function () {
+                win.$script = old;
+                return this;
+            };
+
+            return $script;
+        })();
+
+        var modules = [];
+        var validBase = /^(https?|file):\/\//;
+        for (var i in moduleMap) {
+            if (validBase.test(i))
+                modules.push(i);
+            else
+                modules.push(modulesRepository + '/' + i.toLowerCase() + '-' + moduleMap[i].toLowerCase() + '.js');
+        }
+
+        $script(modules, function () {
+            if (oncomplete) oncomplete();
+        });
+    }
 });
diff --git a/src/math.js b/src/math.js
index c8fd4472..44b73677 100644
--- a/src/math.js
+++ b/src/math.js
@@ -1,486 +1,491 @@
+var Crafty = require('./core.js'),
+    document = window.document;
+
 /**@
-* #Crafty.math
-* @category 2D
-* Static functions.
-*/
+ * #Crafty.math
+ * @category 2D
+ * Static functions.
+ */
 Crafty.math = {
-/**@
-	 * #Crafty.math.abs
-	 * @comp Crafty.math
+    /**@
+     * #Crafty.math.abs
+     * @comp Crafty.math
      * @sign public this Crafty.math.abs(Number n)
      * @param n - Some value.
      * @return Absolute value.
-     * 
-	 * Returns the absolute value.
+     *
+     * Returns the absolute value.
      */
-	abs: function (x) {
-		return x < 0 ? -x : x;
-	},
+    abs: function (x) {
+        return x < 0 ? -x : x;
+    },
 
-	/**@
+    /**@
      * #Crafty.math.amountOf
-	 * @comp Crafty.math
-	 * @sign public Number Crafty.math.amountOf(Number checkValue, Number minValue, Number maxValue)
+     * @comp Crafty.math
+     * @sign public Number Crafty.math.amountOf(Number checkValue, Number minValue, Number maxValue)
      * @param checkValue - Value that should checked with minimum and maximum.
      * @param minValue - Minimum value to check.
      * @param maxValue - Maximum value to check.
      * @return Amount of checkValue compared to minValue and maxValue.
-     * 
-	 * Returns the amount of how much a checkValue is more like minValue (=0)
+     *
+     * Returns the amount of how much a checkValue is more like minValue (=0)
      * or more like maxValue (=1)
      */
-	amountOf: function (checkValue, minValue, maxValue) {
-		if (minValue < maxValue)
-			return (checkValue - minValue) / (maxValue - minValue);
-		else
-			return (checkValue - maxValue) / (minValue - maxValue);
-	},
+    amountOf: function (checkValue, minValue, maxValue) {
+        if (minValue < maxValue)
+            return (checkValue - minValue) / (maxValue - minValue);
+        else
+            return (checkValue - maxValue) / (minValue - maxValue);
+    },
 
 
-	/**@
+    /**@
      * #Crafty.math.clamp
-	 * @comp Crafty.math
-	 * @sign public Number Crafty.math.clamp(Number value, Number min, Number max)
+     * @comp Crafty.math
+     * @sign public Number Crafty.math.clamp(Number value, Number min, Number max)
      * @param value - A value.
      * @param max - Maximum that value can be.
      * @param min - Minimum that value can be.
      * @return The value between minimum and maximum.
-     * 
-	 * Restricts a value to be within a specified range.
+     *
+     * Restricts a value to be within a specified range.
      */
-	clamp: function (value, min, max) {
-		if (value > max)
-			return max;
-		else if (value < min)
-			return min;
-		else
-			return value;
-	},
-
-	/**@
+    clamp: function (value, min, max) {
+        if (value > max)
+            return max;
+        else if (value < min)
+            return min;
+        else
+            return value;
+    },
+
+    /**@
+     * #Crafty.math.degToRad
      * Converts angle from degree to radian.
-	 * @comp Crafty.math
+     * @comp Crafty.math
      * @param angleInDeg - The angle in degree.
      * @return The angle in radian.
      */
-	degToRad: function (angleInDeg) {
-		return angleInDeg * Math.PI / 180;
-	},
+    degToRad: function (angleInDeg) {
+        return angleInDeg * Math.PI / 180;
+    },
 
-	/**@
+    /**@
      * #Crafty.math.distance
-	 * @comp Crafty.math
-	 * @sign public Number Crafty.math.distance(Number x1, Number y1, Number x2, Number y2)
+     * @comp Crafty.math
+     * @sign public Number Crafty.math.distance(Number x1, Number y1, Number x2, Number y2)
      * @param x1 - First x coordinate.
      * @param y1 - First y coordinate.
      * @param x2 - Second x coordinate.
      * @param y2 - Second y coordinate.
      * @return The distance between the two points.
-     * 
-	 * Distance between two points.
+     *
+     * Distance between two points.
      */
-	distance: function (x1, y1, x2, y2) {
-		var squaredDistance = Crafty.math.squaredDistance(x1, y1, x2, y2);
-		return Math.sqrt(parseFloat(squaredDistance));
-	},
+    distance: function (x1, y1, x2, y2) {
+        var squaredDistance = Crafty.math.squaredDistance(x1, y1, x2, y2);
+        return Math.sqrt(parseFloat(squaredDistance));
+    },
 
-	/**@
+    /**@
      * #Crafty.math.lerp
-	 * @comp Crafty.math
-	 * @sign public Number Crafty.math.lerp(Number value1, Number value2, Number amount)
+     * @comp Crafty.math
+     * @sign public Number Crafty.math.lerp(Number value1, Number value2, Number amount)
      * @param value1 - One value.
      * @param value2 - Another value.
      * @param amount - Amount of value2 to value1.
      * @return Linear interpolated value.
-     * 
-	 * Linear interpolation. Passing amount with a value of 0 will cause value1 to be returned,
+     *
+     * Linear interpolation. Passing amount with a value of 0 will cause value1 to be returned,
      * a value of 1 will cause value2 to be returned.
      */
-	lerp: function (value1, value2, amount) {
-		return value1 + (value2 - value1) * amount;
-	},
+    lerp: function (value1, value2, amount) {
+        return value1 + (value2 - value1) * amount;
+    },
 
-	/**@
+    /**@
      * #Crafty.math.negate
-	 * @comp Crafty.math
-	 * @sign public Number Crafty.math.negate(Number percent)
+     * @comp Crafty.math
+     * @sign public Number Crafty.math.negate(Number percent)
      * @param percent - If you pass 1 a -1 will be returned. If you pass 0 a 1 will be returned.
      * @return 1 or -1.
-     * 
-	 * Returnes "randomly" -1.
+     *
+     * Returnes "randomly" -1.
      */
-	negate: function (percent) {
-		if (Math.random() < percent)
-			return -1;
-		else
-			return 1;
-	},
-
-	/**@
+    negate: function (percent) {
+        if (Math.random() < percent)
+            return -1;
+        else
+            return 1;
+    },
+
+    /**@
      * #Crafty.math.radToDeg
-	 * @comp Crafty.math
-	 * @sign public Number Crafty.math.radToDeg(Number angle)
+     * @comp Crafty.math
+     * @sign public Number Crafty.math.radToDeg(Number angle)
      * @param angleInRad - The angle in radian.
      * @return The angle in degree.
-     * 
-	 * Converts angle from radian to degree.
+     *
+     * Converts angle from radian to degree.
      */
-	radToDeg: function (angleInRad) {
-		return angleInRad * 180 / Math.PI;
-	},
+    radToDeg: function (angleInRad) {
+        return angleInRad * 180 / Math.PI;
+    },
 
-	/**@
+    /**@
      * #Crafty.math.randomElementOfArray
-	 * @comp Crafty.math
-	 * @sign public Object Crafty.math.randomElementOfArray(Array array)
+     * @comp Crafty.math
+     * @sign public Object Crafty.math.randomElementOfArray(Array array)
      * @param array - A specific array.
      * @return A random element of a specific array.
-     * 
-	 * Returns a random element of a specific array.
+     *
+     * Returns a random element of a specific array.
      */
-	randomElementOfArray: function (array) {
-		return array[Math.floor(array.length * Math.random())];
-	},
+    randomElementOfArray: function (array) {
+        return array[Math.floor(array.length * Math.random())];
+    },
 
-	/**@
+    /**@
      * #Crafty.math.randomInt
-	 * @comp Crafty.math
-	 * @sign public Number Crafty.math.randomInt(Number start, Number end)
+     * @comp Crafty.math
+     * @sign public Number Crafty.math.randomInt(Number start, Number end)
      * @param start - Smallest int value that can be returned.
      * @param end - Biggest int value that can be returned.
      * @return A random int.
-     * 
-	 * Returns a random int in within a specific range.
+     *
+     * Returns a random int in within a specific range.
      */
-	randomInt: function (start, end) {
-		return start + Math.floor((1 + end - start) * Math.random());
-	},
+    randomInt: function (start, end) {
+        return start + Math.floor((1 + end - start) * Math.random());
+    },
 
-	/**@
+    /**@
      * #Crafty.math.randomNumber
-	 * @comp Crafty.math
-	 * @sign public Number Crafty.math.randomInt(Number start, Number end)
+     * @comp Crafty.math
+     * @sign public Number Crafty.math.randomInt(Number start, Number end)
      * @param start - Smallest number value that can be returned.
      * @param end - Biggest number value that can be returned.
      * @return A random number.
-     * 
-	 * Returns a random number in within a specific range.
+     *
+     * Returns a random number in within a specific range.
      */
-	randomNumber: function (start, end) {
-		return start + (end - start) * Math.random();
-	},
-
-	/**@
-	 * #Crafty.math.squaredDistance
-	 * @comp Crafty.math
-	 * @sign public Number Crafty.math.squaredDistance(Number x1, Number y1, Number x2, Number y2)
+    randomNumber: function (start, end) {
+        return start + (end - start) * Math.random();
+    },
+
+    /**@
+     * #Crafty.math.squaredDistance
+     * @comp Crafty.math
+     * @sign public Number Crafty.math.squaredDistance(Number x1, Number y1, Number x2, Number y2)
      * @param x1 - First x coordinate.
      * @param y1 - First y coordinate.
      * @param x2 - Second x coordinate.
      * @param y2 - Second y coordinate.
      * @return The squared distance between the two points.
-     * 
-	 * Squared distance between two points.
+     *
+     * Squared distance between two points.
      */
-	squaredDistance: function (x1, y1, x2, y2) {
-		return (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2);
-	},
+    squaredDistance: function (x1, y1, x2, y2) {
+        return (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2);
+    },
 
-	/**@
+    /**@
      * #Crafty.math.withinRange
-	 * @comp Crafty.math
-	 * @sign public Boolean Crafty.math.withinRange(Number value, Number min, Number max)
+     * @comp Crafty.math
+     * @sign public Boolean Crafty.math.withinRange(Number value, Number min, Number max)
      * @param value - The specific value.
      * @param min - Minimum value.
      * @param max - Maximum value.
      * @return Returns true if value is within a specific range.
-     * 
-	 * Check if a value is within a specific range.
+     *
+     * Check if a value is within a specific range.
      */
-	withinRange: function (value, min, max) {
-		return (value >= min && value <= max);
-	}
+    withinRange: function (value, min, max) {
+        return (value >= min && value <= max);
+    }
 };
 
 Crafty.math.Vector2D = (function () {
-	/**@
-	 * #Crafty.math.Vector2D
-	 * @category 2D
-	 * @class This is a general purpose 2D vector class
-	 *
-	 * Vector2D uses the following form:
-	 * 
-	 *
-	 * @public
-	 * @sign public {Vector2D} Vector2D();
-	 * @sign public {Vector2D} Vector2D(Vector2D);
-	 * @sign public {Vector2D} Vector2D(Number, Number);
-	 * @param {Vector2D|Number=0} x
-	 * @param {Number=0} y
-	 */
-	function Vector2D(x, y) {
-		if (x instanceof Vector2D) {
-			this.x = x.x;
-			this.y = x.y;
-		} else if (arguments.length === 2) {
-			this.x = x;
-			this.y = y;
-		} else if (arguments.length > 0)
-			throw "Unexpected number of arguments for Vector2D()";
-	} // class Vector2D
-
-	Vector2D.prototype.x = 0;
-	Vector2D.prototype.y = 0;
-
-	/**@
-	 * #.add
-	 * @comp Crafty.math.Vector2D
-     *
-	 * Adds the passed vector to this vector
-	 *
-	 * @public
-	 * @sign public {Vector2D} add(Vector2D);
-	 * @param {vector2D} vecRH
-	 * @returns {Vector2D} this after adding
-	 */
-	Vector2D.prototype.add = function (vecRH) {
-		this.x += vecRH.x;
-		this.y += vecRH.y;
-		return this;
-	} // add
-
-	/**@
-	 * #.angleBetween
+    /**@
+     * #Crafty.math.Vector2D
+     * @category 2D
+     * @class This is a general purpose 2D vector class
+     *
+     * Vector2D uses the following form:
+     * 
+     *
+     * @public
+     * @sign public {Vector2D} Vector2D();
+     * @sign public {Vector2D} Vector2D(Vector2D);
+     * @sign public {Vector2D} Vector2D(Number, Number);
+     * @param {Vector2D|Number=0} x
+     * @param {Number=0} y
+     */
+
+    function Vector2D(x, y) {
+        if (x instanceof Vector2D) {
+            this.x = x.x;
+            this.y = x.y;
+        } else if (arguments.length === 2) {
+            this.x = x;
+            this.y = y;
+        } else if (arguments.length > 0)
+            throw "Unexpected number of arguments for Vector2D()";
+    } // class Vector2D
+
+    Vector2D.prototype.x = 0;
+    Vector2D.prototype.y = 0;
+
+    /**@
+     * #.add
      * @comp Crafty.math.Vector2D
-	 *
-	 * Calculates the angle between the passed vector and this vector, using <0,0> as the point of reference.
-	 * Angles returned have the range (−π, π].
-	 *
-	 * @public
-	 * @sign public {Number} angleBetween(Vector2D);
-	 * @param {Vector2D} vecRH
-	 * @returns {Number} the angle between the two vectors in radians
-	 */
-	Vector2D.prototype.angleBetween = function (vecRH) {
-		return Math.atan2(this.x * vecRH.y - this.y * vecRH.x, this.x * vecRH.x + this.y * vecRH.y);
-	} // angleBetween
-
-	/**@
-	 * #.angleTo
+     *
+     * Adds the passed vector to this vector
+     *
+     * @public
+     * @sign public {Vector2D} add(Vector2D);
+     * @param {vector2D} vecRH
+     * @returns {Vector2D} this after adding
+     */
+    Vector2D.prototype.add = function (vecRH) {
+        this.x += vecRH.x;
+        this.y += vecRH.y;
+        return this;
+    }; // add
+
+    /**@
+     * #.angleBetween
+     * @comp Crafty.math.Vector2D
+     *
+     * Calculates the angle between the passed vector and this vector, using <0,0> as the point of reference.
+     * Angles returned have the range (−π, π].
+     *
+     * @public
+     * @sign public {Number} angleBetween(Vector2D);
+     * @param {Vector2D} vecRH
+     * @returns {Number} the angle between the two vectors in radians
+     */
+    Vector2D.prototype.angleBetween = function (vecRH) {
+        return Math.atan2(this.x * vecRH.y - this.y * vecRH.x, this.x * vecRH.x + this.y * vecRH.y);
+    }; // angleBetween
+
+    /**@
+     * #.angleTo
      * @comp Crafty.math.Vector2D
-	 *
-	 * Calculates the angle to the passed vector from this vector, using this vector as the point of reference.
-	 *
-	 * @public
-	 * @sign public {Number} angleTo(Vector2D);
-	 * @param {Vector2D} vecRH
-	 * @returns {Number} the angle to the passed vector in radians
-	 */
-	Vector2D.prototype.angleTo = function (vecRH) {
-		return Math.atan2(vecRH.y - this.y, vecRH.x - this.x);
-	};
-
-	/**@
-	 * #.clone
+     *
+     * Calculates the angle to the passed vector from this vector, using this vector as the point of reference.
+     *
+     * @public
+     * @sign public {Number} angleTo(Vector2D);
+     * @param {Vector2D} vecRH
+     * @returns {Number} the angle to the passed vector in radians
+     */
+    Vector2D.prototype.angleTo = function (vecRH) {
+        return Math.atan2(vecRH.y - this.y, vecRH.x - this.x);
+    };
+
+    /**@
+     * #.clone
      * @comp Crafty.math.Vector2D
-	 *
-	 * Creates and exact, numeric copy of this vector
-	 *
-	 * @public
-	 * @sign public {Vector2D} clone();
-	 * @returns {Vector2D} the new vector
-	 */
-    Vector2D.prototype.clone = function() {
+     *
+     * Creates and exact, numeric copy of this vector
+     *
+     * @public
+     * @sign public {Vector2D} clone();
+     * @returns {Vector2D} the new vector
+     */
+    Vector2D.prototype.clone = function () {
         return new Vector2D(this);
     }; // clone
 
-	/**@
-	 * #.distance
+    /**@
+     * #.distance
      * @comp Crafty.math.Vector2D
-	 *
-	 * Calculates the distance from this vector to the passed vector.
-	 *
-	 * @public
-	 * @sign public {Number} distance(Vector2D);
-	 * @param {Vector2D} vecRH
-	 * @returns {Number} the distance between the two vectors
-	 */
-    Vector2D.prototype.distance = function(vecRH) {
+     *
+     * Calculates the distance from this vector to the passed vector.
+     *
+     * @public
+     * @sign public {Number} distance(Vector2D);
+     * @param {Vector2D} vecRH
+     * @returns {Number} the distance between the two vectors
+     */
+    Vector2D.prototype.distance = function (vecRH) {
         return Math.sqrt((vecRH.x - this.x) * (vecRH.x - this.x) + (vecRH.y - this.y) * (vecRH.y - this.y));
     }; // distance
 
-	/**@
-	 * #.distanceSq
+    /**@
+     * #.distanceSq
      * @comp Crafty.math.Vector2D
-	 *
-	 * Calculates the squared distance from this vector to the passed vector.
-	 * This function avoids calculating the square root, thus being slightly faster than .distance( ).
-	 *
-	 * @public
-	 * @sign public {Number} distanceSq(Vector2D);
-	 * @param {Vector2D} vecRH
-	 * @returns {Number} the squared distance between the two vectors
-	 * @see .distance
-	 */
-    Vector2D.prototype.distanceSq = function(vecRH) {
+     *
+     * Calculates the squared distance from this vector to the passed vector.
+     * This function avoids calculating the square root, thus being slightly faster than .distance( ).
+     *
+     * @public
+     * @sign public {Number} distanceSq(Vector2D);
+     * @param {Vector2D} vecRH
+     * @returns {Number} the squared distance between the two vectors
+     * @see .distance
+     */
+    Vector2D.prototype.distanceSq = function (vecRH) {
         return (vecRH.x - this.x) * (vecRH.x - this.x) + (vecRH.y - this.y) * (vecRH.y - this.y);
     }; // distanceSq
 
-	/**@
-	 * #.divide
+    /**@
+     * #.divide
      * @comp Crafty.math.Vector2D
-	 *
-	 * Divides this vector by the passed vector.
-	 *
-	 * @public
-	 * @sign public {Vector2D} divide(Vector2D);
-	 * @param {Vector2D} vecRH
-	 * @returns {Vector2D} this vector after dividing
-	 */
-    Vector2D.prototype.divide = function(vecRH) {
+     *
+     * Divides this vector by the passed vector.
+     *
+     * @public
+     * @sign public {Vector2D} divide(Vector2D);
+     * @param {Vector2D} vecRH
+     * @returns {Vector2D} this vector after dividing
+     */
+    Vector2D.prototype.divide = function (vecRH) {
         this.x /= vecRH.x;
         this.y /= vecRH.y;
         return this;
     }; // divide
 
-	/**@
-	 * #.dotProduct
+    /**@
+     * #.dotProduct
      * @comp Crafty.math.Vector2D
-	 *
-	 * Calculates the dot product of this and the passed vectors
-	 *
-	 * @public
-	 * @sign public {Number} dotProduct(Vector2D);
-	 * @param {Vector2D} vecRH
-	 * @returns {Number} the resultant dot product
-	 */
-    Vector2D.prototype.dotProduct = function(vecRH) {
+     *
+     * Calculates the dot product of this and the passed vectors
+     *
+     * @public
+     * @sign public {Number} dotProduct(Vector2D);
+     * @param {Vector2D} vecRH
+     * @returns {Number} the resultant dot product
+     */
+    Vector2D.prototype.dotProduct = function (vecRH) {
         return this.x * vecRH.x + this.y * vecRH.y;
     }; // dotProduct
 
-	/**@
-	 * #.equals
+    /**@
+     * #.equals
      * @comp Crafty.math.Vector2D
-	 *
-	 * Determines if this vector is numerically equivalent to the passed vector.
-	 *
-	 * @public
-	 * @sign public {Boolean} equals(Vector2D);
-	 * @param {Vector2D} vecRH
-	 * @returns {Boolean} true if the vectors are equivalent
-	 */
-    Vector2D.prototype.equals = function(vecRH) {
+     *
+     * Determines if this vector is numerically equivalent to the passed vector.
+     *
+     * @public
+     * @sign public {Boolean} equals(Vector2D);
+     * @param {Vector2D} vecRH
+     * @returns {Boolean} true if the vectors are equivalent
+     */
+    Vector2D.prototype.equals = function (vecRH) {
         return vecRH instanceof Vector2D &&
             this.x == vecRH.x && this.y == vecRH.y;
     }; // equals
 
-	/**@
-	 * #.getNormal
+    /**@
+     * #.getNormal
      * @comp Crafty.math.Vector2D
-	 *
-	 * Calculates a new right-handed normal vector for the line created by this and the passed vectors.
-	 *
-	 * @public
-	 * @sign public {Vector2D} getNormal([Vector2D]);
-	 * @param {Vector2D=<0,0>} [vecRH]
-	 * @returns {Vector2D} the new normal vector
-	 */
-    Vector2D.prototype.getNormal = function(vecRH) {
+     *
+     * Calculates a new right-handed normal vector for the line created by this and the passed vectors.
+     *
+     * @public
+     * @sign public {Vector2D} getNormal([Vector2D]);
+     * @param {Vector2D=<0,0>} [vecRH]
+     * @returns {Vector2D} the new normal vector
+     */
+    Vector2D.prototype.getNormal = function (vecRH) {
         if (vecRH === undefined)
             return new Vector2D(-this.y, this.x); // assume vecRH is <0, 0>
         return new Vector2D(vecRH.y - this.y, this.x - vecRH.x).normalize();
     }; // getNormal
 
-	/**@
-	 * #.isZero
+    /**@
+     * #.isZero
      * @comp Crafty.math.Vector2D
-	 *
-	 * Determines if this vector is equal to <0,0>
-	 *
-	 * @public
-	 * @sign public {Boolean} isZero();
-	 * @returns {Boolean} true if this vector is equal to <0,0>
-	 */
-    Vector2D.prototype.isZero = function() {
+     *
+     * Determines if this vector is equal to <0,0>
+     *
+     * @public
+     * @sign public {Boolean} isZero();
+     * @returns {Boolean} true if this vector is equal to <0,0>
+     */
+    Vector2D.prototype.isZero = function () {
         return this.x === 0 && this.y === 0;
     }; // isZero
 
-	/**@
-	 * #.magnitude
+    /**@
+     * #.magnitude
      * @comp Crafty.math.Vector2D
-	 *
-	 * Calculates the magnitude of this vector.
-	 * Note: Function objects in JavaScript already have a 'length' member, hence the use of magnitude instead.
-	 *
-	 * @public
-	 * @sign public {Number} magnitude();
-	 * @returns {Number} the magnitude of this vector
-	 */
-    Vector2D.prototype.magnitude = function() {
+     *
+     * Calculates the magnitude of this vector.
+     * Note: Function objects in JavaScript already have a 'length' member, hence the use of magnitude instead.
+     *
+     * @public
+     * @sign public {Number} magnitude();
+     * @returns {Number} the magnitude of this vector
+     */
+    Vector2D.prototype.magnitude = function () {
         return Math.sqrt(this.x * this.x + this.y * this.y);
     }; // magnitude
 
-	/**@
-	 * #.magnitudeSq
+    /**@
+     * #.magnitudeSq
      * @comp Crafty.math.Vector2D
-	 *
-	 * Calculates the square of the magnitude of this vector.
-	 * This function avoids calculating the square root, thus being slightly faster than .magnitude( ).
-	 *
-	 * @public
-	 * @sign public {Number} magnitudeSq();
-	 * @returns {Number} the square of the magnitude of this vector
-	 * @see .magnitude
-	 */
-    Vector2D.prototype.magnitudeSq = function() {
+     *
+     * Calculates the square of the magnitude of this vector.
+     * This function avoids calculating the square root, thus being slightly faster than .magnitude( ).
+     *
+     * @public
+     * @sign public {Number} magnitudeSq();
+     * @returns {Number} the square of the magnitude of this vector
+     * @see .magnitude
+     */
+    Vector2D.prototype.magnitudeSq = function () {
         return this.x * this.x + this.y * this.y;
     }; // magnitudeSq
 
-	/**@
-	 * #.multiply
+    /**@
+     * #.multiply
      * @comp Crafty.math.Vector2D
-	 *
-	 * Multiplies this vector by the passed vector
-	 *
-	 * @public
-	 * @sign public {Vector2D} multiply(Vector2D);
-	 * @param {Vector2D} vecRH
-	 * @returns {Vector2D} this vector after multiplying
-	 */
-    Vector2D.prototype.multiply = function(vecRH) {
+     *
+     * Multiplies this vector by the passed vector
+     *
+     * @public
+     * @sign public {Vector2D} multiply(Vector2D);
+     * @param {Vector2D} vecRH
+     * @returns {Vector2D} this vector after multiplying
+     */
+    Vector2D.prototype.multiply = function (vecRH) {
         this.x *= vecRH.x;
         this.y *= vecRH.y;
         return this;
     }; // multiply
 
-	/**@
-	 * #.negate
+    /**@
+     * #.negate
      * @comp Crafty.math.Vector2D
-	 *
-	 * Negates this vector (ie. <-x,-y>)
-	 *
-	 * @public
-	 * @sign public {Vector2D} negate();
-	 * @returns {Vector2D} this vector after negation
-	 */
-    Vector2D.prototype.negate = function() {
+     *
+     * Negates this vector (ie. <-x,-y>)
+     *
+     * @public
+     * @sign public {Vector2D} negate();
+     * @returns {Vector2D} this vector after negation
+     */
+    Vector2D.prototype.negate = function () {
         this.x = -this.x;
         this.y = -this.y;
         return this;
     }; // negate
 
-	/**@
-	 * #.normalize
+    /**@
+     * #.normalize
      * @comp Crafty.math.Vector2D
-	 *
-	 * Normalizes this vector (scales the vector so that its new magnitude is 1)
-	 * For vectors where magnitude is 0, <1,0> is returned.
-	 *
-	 * @public
-	 * @sign public {Vector2D} normalize();
-	 * @returns {Vector2D} this vector after normalization
-	 */
-    Vector2D.prototype.normalize = function() {
+     *
+     * Normalizes this vector (scales the vector so that its new magnitude is 1)
+     * For vectors where magnitude is 0, <1,0> is returned.
+     *
+     * @public
+     * @sign public {Vector2D} normalize();
+     * @returns {Vector2D} this vector after normalization
+     */
+    Vector2D.prototype.normalize = function () {
         var lng = Math.sqrt(this.x * this.x + this.y * this.y);
 
         if (lng === 0) {
@@ -495,20 +500,20 @@ Crafty.math.Vector2D = (function () {
         return this;
     }; // normalize
 
-	/**@
-	 * #.scale
-	 * @comp Crafty.math.Vector2D
-     *
-	 * Scales this vector by the passed amount(s)
-	 * If scalarY is omitted, scalarX is used for both axes
-	 *
-	 * @public
-	 * @sign public {Vector2D} scale(Number[, Number]);
-	 * @param {Number} scalarX
-	 * @param {Number} [scalarY]
-	 * @returns {Vector2D} this after scaling
-	 */
-    Vector2D.prototype.scale = function(scalarX, scalarY) {
+    /**@
+     * #.scale
+     * @comp Crafty.math.Vector2D
+     *
+     * Scales this vector by the passed amount(s)
+     * If scalarY is omitted, scalarX is used for both axes
+     *
+     * @public
+     * @sign public {Vector2D} scale(Number[, Number]);
+     * @param {Number} scalarX
+     * @param {Number} [scalarY]
+     * @returns {Vector2D} this after scaling
+     */
+    Vector2D.prototype.scale = function (scalarX, scalarY) {
         if (scalarY === undefined)
             scalarY = scalarX;
 
@@ -518,38 +523,38 @@ Crafty.math.Vector2D = (function () {
         return this;
     }; // scale
 
-	/**@
-	 * #.scaleToMagnitude
-	 * @comp Crafty.math.Vector2D
-     *
-	 * Scales this vector such that its new magnitude is equal to the passed value.
-	 *
-	 * @public
-	 * @sign public {Vector2D} scaleToMagnitude(Number);
-	 * @param {Number} mag
-	 * @returns {Vector2D} this vector after scaling
-	 */
-    Vector2D.prototype.scaleToMagnitude = function(mag) {
+    /**@
+     * #.scaleToMagnitude
+     * @comp Crafty.math.Vector2D
+     *
+     * Scales this vector such that its new magnitude is equal to the passed value.
+     *
+     * @public
+     * @sign public {Vector2D} scaleToMagnitude(Number);
+     * @param {Number} mag
+     * @returns {Vector2D} this vector after scaling
+     */
+    Vector2D.prototype.scaleToMagnitude = function (mag) {
         var k = mag / this.magnitude();
         this.x *= k;
         this.y *= k;
         return this;
     }; // scaleToMagnitude
 
-	/**@
-	 * #.setValues
-	 * @comp Crafty.math.Vector2D
-     *
-	 * Sets the values of this vector using a passed vector or pair of numbers.
-	 *
-	 * @public
-	 * @sign public {Vector2D} setValues(Vector2D);
-	 * @sign public {Vector2D} setValues(Number, Number);
-	 * @param {Number|Vector2D} x
-	 * @param {Number} y
-	 * @returns {Vector2D} this vector after setting of values
-	 */
-    Vector2D.prototype.setValues = function(x, y) {
+    /**@
+     * #.setValues
+     * @comp Crafty.math.Vector2D
+     *
+     * Sets the values of this vector using a passed vector or pair of numbers.
+     *
+     * @public
+     * @sign public {Vector2D} setValues(Vector2D);
+     * @sign public {Vector2D} setValues(Number, Number);
+     * @param {Number|Vector2D} x
+     * @param {Number} y
+     * @returns {Vector2D} this vector after setting of values
+     */
+    Vector2D.prototype.setValues = function (x, y) {
         if (x instanceof Vector2D) {
             this.x = x.x;
             this.y = x.y;
@@ -561,51 +566,51 @@ Crafty.math.Vector2D = (function () {
         return this;
     }; // setValues
 
-	/**@
-	 * #.subtract
-	 * @comp Crafty.math.Vector2D
-     *
-	 * Subtracts the passed vector from this vector.
-	 *
-	 * @public
-	 * @sign public {Vector2D} subtract(Vector2D);
-	 * @param {Vector2D} vecRH
-	 * @returns {vector2D} this vector after subtracting
-	 */
-    Vector2D.prototype.subtract = function(vecRH) {
+    /**@
+     * #.subtract
+     * @comp Crafty.math.Vector2D
+     *
+     * Subtracts the passed vector from this vector.
+     *
+     * @public
+     * @sign public {Vector2D} subtract(Vector2D);
+     * @param {Vector2D} vecRH
+     * @returns {vector2D} this vector after subtracting
+     */
+    Vector2D.prototype.subtract = function (vecRH) {
         this.x -= vecRH.x;
         this.y -= vecRH.y;
         return this;
     }; // subtract
 
-	/**@
-	 * #.toString
-	 * @comp Crafty.math.Vector2D
-     *
-	 * Returns a string representation of this vector.
-	 *
-	 * @public
-	 * @sign public {String} toString();
-	 * @returns {String}
-	 */
-    Vector2D.prototype.toString = function() {
+    /**@
+     * #.toString
+     * @comp Crafty.math.Vector2D
+     *
+     * Returns a string representation of this vector.
+     *
+     * @public
+     * @sign public {String} toString();
+     * @returns {String}
+     */
+    Vector2D.prototype.toString = function () {
         return "Vector2D(" + this.x + ", " + this.y + ")";
     }; // toString
 
-	/**@
-	 * #.translate
-	 * @comp Crafty.math.Vector2D
-     *
-	 * Translates (moves) this vector by the passed amounts.
-	 * If dy is omitted, dx is used for both axes.
-	 *
-	 * @public
-	 * @sign public {Vector2D} translate(Number[, Number]);
-	 * @param {Number} dx
-	 * @param {Number} [dy]
-	 * @returns {Vector2D} this vector after translating
-	 */
-    Vector2D.prototype.translate = function(dx, dy) {
+    /**@
+     * #.translate
+     * @comp Crafty.math.Vector2D
+     *
+     * Translates (moves) this vector by the passed amounts.
+     * If dy is omitted, dx is used for both axes.
+     *
+     * @public
+     * @sign public {Vector2D} translate(Number[, Number]);
+     * @param {Number} dx
+     * @param {Number} [dy]
+     * @returns {Vector2D} this vector after translating
+     */
+    Vector2D.prototype.translate = function (dx, dy) {
         if (dy === undefined)
             dy = dx;
 
@@ -615,92 +620,92 @@ Crafty.math.Vector2D = (function () {
         return this;
     }; // translate
 
-	/**@
-	 * #.tripleProduct
-	 * @comp Crafty.math.Vector2D
-     *
-	 * Calculates the triple product of three vectors.
-	 * triple vector product = b(a•c) - a(b•c)
-	 *
-	 * @public
-	 * @static
-	 * @sign public {Vector2D} tripleProduct(Vector2D, Vector2D, Vector2D);
-	 * @param {Vector2D} a
-	 * @param {Vector2D} b
-	 * @param {Vector2D} c
-	 * @return {Vector2D} the triple product as a new vector
-	 */
-	Vector2D.tripleProduct = function (a, b, c) {
-		var ac = a.dotProduct(c);
-		var bc = b.dotProduct(c);
-		return new Crafty.math.Vector2D(b.x * ac - a.x * bc, b.y * ac - a.y * bc);
-	};
-
-	return Vector2D;
+    /**@
+     * #.tripleProduct
+     * @comp Crafty.math.Vector2D
+     *
+     * Calculates the triple product of three vectors.
+     * triple vector product = b(a•c) - a(b•c)
+     *
+     * @public
+     * @static
+     * @sign public {Vector2D} tripleProduct(Vector2D, Vector2D, Vector2D);
+     * @param {Vector2D} a
+     * @param {Vector2D} b
+     * @param {Vector2D} c
+     * @return {Vector2D} the triple product as a new vector
+     */
+    Vector2D.tripleProduct = function (a, b, c) {
+        var ac = a.dotProduct(c);
+        var bc = b.dotProduct(c);
+        return new Crafty.math.Vector2D(b.x * ac - a.x * bc, b.y * ac - a.y * bc);
+    };
+
+    return Vector2D;
 })();
 
 Crafty.math.Matrix2D = (function () {
-	/**@
-	 * #Crafty.math.Matrix2D
-	 * @category 2D
-	 *
-	 * @class This is a 2D Matrix2D class. It is 3x3 to allow for affine transformations in 2D space.
-	 * The third row is always assumed to be [0, 0, 1].
-	 *
-	 * Matrix2D uses the following form, as per the whatwg.org specifications for canvas.transform():
-	 * [a, c, e]
-	 * [b, d, f]
-	 * [0, 0, 1]
-	 *
-	 * @public
-	 * @sign public {Matrix2D} new Matrix2D();
-	 * @sign public {Matrix2D} new Matrix2D(Matrix2D);
-	 * @sign public {Matrix2D} new Matrix2D(Number, Number, Number, Number, Number, Number);
-	 * @param {Matrix2D|Number=1} a
-	 * @param {Number=0} b
-	 * @param {Number=0} c
-	 * @param {Number=1} d
-	 * @param {Number=0} e
-	 * @param {Number=0} f
-	 */
-	Matrix2D = function (a, b, c, d, e, f) {
-		if (a instanceof Matrix2D) {
-			this.a = a.a;
-			this.b = a.b;
-			this.c = a.c;
-			this.d = a.d;
-			this.e = a.e;
-			this.f = a.f;
-		} else if (arguments.length === 6) {
-			this.a = a;
-			this.b = b;
-			this.c = c;
-			this.d = d;
-			this.e = e;
-			this.f = f;
-		} else if (arguments.length > 0)
-			throw "Unexpected number of arguments for Matrix2D()";
-	} // class Matrix2D
-
-	Matrix2D.prototype.a = 1;
-	Matrix2D.prototype.b = 0;
-	Matrix2D.prototype.c = 0;
-	Matrix2D.prototype.d = 1;
-	Matrix2D.prototype.e = 0;
-	Matrix2D.prototype.f = 0;
-
-	/**@
-	 * #.apply
+    /**@
+     * #Crafty.math.Matrix2D
+     * @category 2D
+     *
+     * @class This is a 2D Matrix2D class. It is 3x3 to allow for affine transformations in 2D space.
+     * The third row is always assumed to be [0, 0, 1].
+     *
+     * Matrix2D uses the following form, as per the whatwg.org specifications for canvas.transform():
+     * [a, c, e]
+     * [b, d, f]
+     * [0, 0, 1]
+     *
+     * @public
+     * @sign public {Matrix2D} new Matrix2D();
+     * @sign public {Matrix2D} new Matrix2D(Matrix2D);
+     * @sign public {Matrix2D} new Matrix2D(Number, Number, Number, Number, Number, Number);
+     * @param {Matrix2D|Number=1} a
+     * @param {Number=0} b
+     * @param {Number=0} c
+     * @param {Number=1} d
+     * @param {Number=0} e
+     * @param {Number=0} f
+     */
+    Matrix2D = function (a, b, c, d, e, f) {
+        if (a instanceof Matrix2D) {
+            this.a = a.a;
+            this.b = a.b;
+            this.c = a.c;
+            this.d = a.d;
+            this.e = a.e;
+            this.f = a.f;
+        } else if (arguments.length === 6) {
+            this.a = a;
+            this.b = b;
+            this.c = c;
+            this.d = d;
+            this.e = e;
+            this.f = f;
+        } else if (arguments.length > 0)
+            throw "Unexpected number of arguments for Matrix2D()";
+    }; // class Matrix2D
+
+    Matrix2D.prototype.a = 1;
+    Matrix2D.prototype.b = 0;
+    Matrix2D.prototype.c = 0;
+    Matrix2D.prototype.d = 1;
+    Matrix2D.prototype.e = 0;
+    Matrix2D.prototype.f = 0;
+
+    /**@
+     * #.apply
      * @comp Crafty.math.Matrix2D
-	 *
-	 * Applies the matrix transformations to the passed object
-	 *
-	 * @public
-	 * @sign public {Vector2D} apply(Vector2D);
-	 * @param {Vector2D} vecRH - vector to be transformed
-	 * @returns {Vector2D} the passed vector object after transforming
-	 */
-    Matrix2D.prototype.apply = function(vecRH) {
+     *
+     * Applies the matrix transformations to the passed object
+     *
+     * @public
+     * @sign public {Vector2D} apply(Vector2D);
+     * @param {Vector2D} vecRH - vector to be transformed
+     * @returns {Vector2D} the passed vector object after transforming
+     */
+    Matrix2D.prototype.apply = function (vecRH) {
         // I'm not sure of the best way for this function to be implemented. Ideally
         // support for other objects (rectangles, polygons, etc) should be easily
         // addable in the future. Maybe a function (apply) is not the best way to do
@@ -714,33 +719,33 @@ Crafty.math.Matrix2D = (function () {
         return vecRH;
     }; // apply
 
-	/**@
-	 * #.clone
+    /**@
+     * #.clone
      * @comp Crafty.math.Matrix2D
-	 *
-	 * Creates an exact, numeric copy of the current matrix
-	 *
-	 * @public
-	 * @sign public {Matrix2D} clone();
-	 * @returns {Matrix2D}
-	 */
-    Matrix2D.prototype.clone = function() {
+     *
+     * Creates an exact, numeric copy of the current matrix
+     *
+     * @public
+     * @sign public {Matrix2D} clone();
+     * @returns {Matrix2D}
+     */
+    Matrix2D.prototype.clone = function () {
         return new Matrix2D(this);
     }; // clone
 
-	/**@
-	 * #.combine
+    /**@
+     * #.combine
      * @comp Crafty.math.Matrix2D
-	 *
-	 * Multiplies this matrix with another, overriding the values of this matrix.
-	 * The passed matrix is assumed to be on the right-hand side.
-	 *
-	 * @public
-	 * @sign public {Matrix2D} combine(Matrix2D);
-	 * @param {Matrix2D} mtrxRH
-	 * @returns {Matrix2D} this matrix after combination
-	 */
-    Matrix2D.prototype.combine = function(mtrxRH) {
+     *
+     * Multiplies this matrix with another, overriding the values of this matrix.
+     * The passed matrix is assumed to be on the right-hand side.
+     *
+     * @public
+     * @sign public {Matrix2D} combine(Matrix2D);
+     * @param {Matrix2D} mtrxRH
+     * @returns {Matrix2D} this matrix after combination
+     */
+    Matrix2D.prototype.combine = function (mtrxRH) {
         var tmp = this.a;
         this.a = tmp * mtrxRH.a + this.b * mtrxRH.c;
         this.b = tmp * mtrxRH.b + this.b * mtrxRH.d;
@@ -753,49 +758,49 @@ Crafty.math.Matrix2D = (function () {
         return this;
     }; // combine
 
-	/**@
-	 * #.equals
+    /**@
+     * #.equals
      * @comp Crafty.math.Matrix2D
-	 *
-	 * Checks for the numeric equality of this matrix versus another.
-	 *
-	 * @public
-	 * @sign public {Boolean} equals(Matrix2D);
-	 * @param {Matrix2D} mtrxRH
-	 * @returns {Boolean} true if the two matrices are numerically equal
-	 */
-    Matrix2D.prototype.equals = function(mtrxRH) {
+     *
+     * Checks for the numeric equality of this matrix versus another.
+     *
+     * @public
+     * @sign public {Boolean} equals(Matrix2D);
+     * @param {Matrix2D} mtrxRH
+     * @returns {Boolean} true if the two matrices are numerically equal
+     */
+    Matrix2D.prototype.equals = function (mtrxRH) {
         return mtrxRH instanceof Matrix2D &&
             this.a == mtrxRH.a && this.b == mtrxRH.b && this.c == mtrxRH.c &&
             this.d == mtrxRH.d && this.e == mtrxRH.e && this.f == mtrxRH.f;
     }; // equals
 
-	/**@
-	 * #.determinant
+    /**@
+     * #.determinant
      * @comp Crafty.math.Matrix2D
-	 *
-	 * Calculates the determinant of this matrix
-	 *
-	 * @public
-	 * @sign public {Number} determinant();
-	 * @returns {Number} det(this matrix)
-	 */
-    Matrix2D.prototype.determinant = function() {
+     *
+     * Calculates the determinant of this matrix
+     *
+     * @public
+     * @sign public {Number} determinant();
+     * @returns {Number} det(this matrix)
+     */
+    Matrix2D.prototype.determinant = function () {
         return this.a * this.d - this.b * this.c;
     }; // determinant
 
-	/**@
-	 * #.invert
+    /**@
+     * #.invert
      * @comp Crafty.math.Matrix2D
-	 *
-	 * Inverts this matrix if possible
-	 *
-	 * @public
-	 * @sign public {Matrix2D} invert();
-	 * @returns {Matrix2D} this inverted matrix or the original matrix on failure
-	 * @see .isInvertible
-	 */
-    Matrix2D.prototype.invert = function() {
+     *
+     * Inverts this matrix if possible
+     *
+     * @public
+     * @sign public {Matrix2D} invert();
+     * @returns {Matrix2D} this inverted matrix or the original matrix on failure
+     * @see .isInvertible
+     */
+    Matrix2D.prototype.invert = function () {
         var det = this.determinant();
 
         // matrix is invertible if its determinant is non-zero
@@ -819,47 +824,47 @@ Crafty.math.Matrix2D = (function () {
         return this;
     }; // invert
 
-	/**@
-	 * #.isIdentity
+    /**@
+     * #.isIdentity
      * @comp Crafty.math.Matrix2D
-	 *
-	 * Returns true if this matrix is the identity matrix
-	 *
-	 * @public
-	 * @sign public {Boolean} isIdentity();
-	 * @returns {Boolean}
-	 */
-    Matrix2D.prototype.isIdentity = function() {
+     *
+     * Returns true if this matrix is the identity matrix
+     *
+     * @public
+     * @sign public {Boolean} isIdentity();
+     * @returns {Boolean}
+     */
+    Matrix2D.prototype.isIdentity = function () {
         return this.a === 1 && this.b === 0 && this.c === 0 && this.d === 1 && this.e === 0 && this.f === 0;
     }; // isIdentity
 
-	/**@
-	 * #.isInvertible
+    /**@
+     * #.isInvertible
      * @comp Crafty.math.Matrix2D
-	 *
-	 * Determines is this matrix is invertible.
-	 *
-	 * @public
-	 * @sign public {Boolean} isInvertible();
-	 * @returns {Boolean} true if this matrix is invertible
-	 * @see .invert
-	 */
-    Matrix2D.prototype.isInvertible = function() {
+     *
+     * Determines is this matrix is invertible.
+     *
+     * @public
+     * @sign public {Boolean} isInvertible();
+     * @returns {Boolean} true if this matrix is invertible
+     * @see .invert
+     */
+    Matrix2D.prototype.isInvertible = function () {
         return this.determinant() !== 0;
     }; // isInvertible
 
-	/**@
-	 * #.preRotate
+    /**@
+     * #.preRotate
      * @comp Crafty.math.Matrix2D
-	 *
-	 * Applies a counter-clockwise pre-rotation to this matrix
-	 *
-	 * @public
-	 * @sign public {Matrix2D} preRotate(Number);
-	 * @param {number} rads - angle to rotate in radians
-	 * @returns {Matrix2D} this matrix after pre-rotation
-	 */
-    Matrix2D.prototype.preRotate = function(rads) {
+     *
+     * Applies a counter-clockwise pre-rotation to this matrix
+     *
+     * @public
+     * @sign public {Matrix2D} preRotate(Number);
+     * @param {number} rads - angle to rotate in radians
+     * @returns {Matrix2D} this matrix after pre-rotation
+     */
+    Matrix2D.prototype.preRotate = function (rads) {
         var nCos = Math.cos(rads);
         var nSin = Math.sin(rads);
 
@@ -873,19 +878,19 @@ Crafty.math.Matrix2D = (function () {
         return this;
     }; // preRotate
 
-	/**@
-	 * #.preScale
+    /**@
+     * #.preScale
      * @comp Crafty.math.Matrix2D
-	 *
-	 * Applies a pre-scaling to this matrix
-	 *
-	 * @public
-	 * @sign public {Matrix2D} preScale(Number[, Number]);
-	 * @param {Number} scalarX
-	 * @param {Number} [scalarY] scalarX is used if scalarY is undefined
-	 * @returns {Matrix2D} this after pre-scaling
-	 */
-    Matrix2D.prototype.preScale = function(scalarX, scalarY) {
+     *
+     * Applies a pre-scaling to this matrix
+     *
+     * @public
+     * @sign public {Matrix2D} preScale(Number[, Number]);
+     * @param {Number} scalarX
+     * @param {Number} [scalarY] scalarX is used if scalarY is undefined
+     * @returns {Matrix2D} this after pre-scaling
+     */
+    Matrix2D.prototype.preScale = function (scalarX, scalarY) {
         if (scalarY === undefined)
             scalarY = scalarX;
 
@@ -897,20 +902,20 @@ Crafty.math.Matrix2D = (function () {
         return this;
     }; // preScale
 
-	/**@
-	 * #.preTranslate
+    /**@
+     * #.preTranslate
      * @comp Crafty.math.Matrix2D
-	 *
-	 * Applies a pre-translation to this matrix
-	 *
-	 * @public
-	 * @sign public {Matrix2D} preTranslate(Vector2D);
-	 * @sign public {Matrix2D} preTranslate(Number, Number);
-	 * @param {Number|Vector2D} dx
-	 * @param {Number} dy
-	 * @returns {Matrix2D} this matrix after pre-translation
-	 */
-    Matrix2D.prototype.preTranslate = function(dx, dy) {
+     *
+     * Applies a pre-translation to this matrix
+     *
+     * @public
+     * @sign public {Matrix2D} preTranslate(Vector2D);
+     * @sign public {Matrix2D} preTranslate(Number, Number);
+     * @param {Number|Vector2D} dx
+     * @param {Number} dy
+     * @returns {Matrix2D} this matrix after pre-translation
+     */
+    Matrix2D.prototype.preTranslate = function (dx, dy) {
         if (typeof dx === "number") {
             this.e += dx;
             this.f += dy;
@@ -922,18 +927,18 @@ Crafty.math.Matrix2D = (function () {
         return this;
     }; // preTranslate
 
-	/**@
-	 * #.rotate
+    /**@
+     * #.rotate
      * @comp Crafty.math.Matrix2D
-	 *
-	 * Applies a counter-clockwise post-rotation to this matrix
-	 *
-	 * @public
-	 * @sign public {Matrix2D} rotate(Number);
-	 * @param {Number} rads - angle to rotate in radians
-	 * @returns {Matrix2D} this matrix after rotation
-	 */
-    Matrix2D.prototype.rotate = function(rads) {
+     *
+     * Applies a counter-clockwise post-rotation to this matrix
+     *
+     * @public
+     * @sign public {Matrix2D} rotate(Number);
+     * @param {Number} rads - angle to rotate in radians
+     * @returns {Matrix2D} this matrix after rotation
+     */
+    Matrix2D.prototype.rotate = function (rads) {
         var nCos = Math.cos(rads);
         var nSin = Math.sin(rads);
 
@@ -950,19 +955,19 @@ Crafty.math.Matrix2D = (function () {
         return this;
     }; // rotate
 
-	/**@
-	 * #.scale
+    /**@
+     * #.scale
      * @comp Crafty.math.Matrix2D
-	 *
-	 * Applies a post-scaling to this matrix
-	 *
-	 * @public
-	 * @sign public {Matrix2D} scale(Number[, Number]);
-	 * @param {Number} scalarX
-	 * @param {Number} [scalarY] scalarX is used if scalarY is undefined
-	 * @returns {Matrix2D} this after post-scaling
-	 */
-    Matrix2D.prototype.scale = function(scalarX, scalarY) {
+     *
+     * Applies a post-scaling to this matrix
+     *
+     * @public
+     * @sign public {Matrix2D} scale(Number[, Number]);
+     * @param {Number} scalarX
+     * @param {Number} [scalarY] scalarX is used if scalarY is undefined
+     * @returns {Matrix2D} this after post-scaling
+     */
+    Matrix2D.prototype.scale = function (scalarX, scalarY) {
         if (scalarY === undefined)
             scalarY = scalarX;
 
@@ -976,24 +981,24 @@ Crafty.math.Matrix2D = (function () {
         return this;
     }; // scale
 
-	/**@
-	 * #.setValues
+    /**@
+     * #.setValues
      * @comp Crafty.math.Matrix2D
-	 *
-	 * Sets the values of this matrix
-	 *
-	 * @public
-	 * @sign public {Matrix2D} setValues(Matrix2D);
-	 * @sign public {Matrix2D} setValues(Number, Number, Number, Number, Number, Number);
-	 * @param {Matrix2D|Number} a
-	 * @param {Number} b
-	 * @param {Number} c
-	 * @param {Number} d
-	 * @param {Number} e
-	 * @param {Number} f
-	 * @returns {Matrix2D} this matrix containing the new values
-	 */
-    Matrix2D.prototype.setValues = function(a, b, c, d, e, f) {
+     *
+     * Sets the values of this matrix
+     *
+     * @public
+     * @sign public {Matrix2D} setValues(Matrix2D);
+     * @sign public {Matrix2D} setValues(Number, Number, Number, Number, Number, Number);
+     * @param {Matrix2D|Number} a
+     * @param {Number} b
+     * @param {Number} c
+     * @param {Number} d
+     * @param {Number} e
+     * @param {Number} f
+     * @returns {Matrix2D} this matrix containing the new values
+     */
+    Matrix2D.prototype.setValues = function (a, b, c, d, e, f) {
         if (a instanceof Matrix2D) {
             this.a = a.a;
             this.b = a.b;
@@ -1013,45 +1018,45 @@ Crafty.math.Matrix2D = (function () {
         return this;
     }; // setValues
 
-	/**@
-	 * #.toString
+    /**@
+     * #.toString
      * @comp Crafty.math.Matrix2D
-	 *
-	 * Returns the string representation of this matrix.
-	 *
-	 * @public
-	 * @sign public {String} toString();
-	 * @returns {String}
-	 */
-    Matrix2D.prototype.toString = function() {
+     *
+     * Returns the string representation of this matrix.
+     *
+     * @public
+     * @sign public {String} toString();
+     * @returns {String}
+     */
+    Matrix2D.prototype.toString = function () {
         return "Matrix2D([" + this.a + ", " + this.c + ", " + this.e +
             "] [" + this.b + ", " + this.d + ", " + this.f + "] [0, 0, 1])";
     }; // toString
 
-	/**@
-	 * #.translate
+    /**@
+     * #.translate
      * @comp Crafty.math.Matrix2D
-	 *
-	 * Applies a post-translation to this matrix
-	 *
-	 * @public
-	 * @sign public {Matrix2D} translate(Vector2D);
-	 * @sign public {Matrix2D} translate(Number, Number);
-	 * @param {Number|Vector2D} dx
-	 * @param {Number} dy
-	 * @returns {Matrix2D} this matrix after post-translation
-	 */
-	Matrix2D.prototype.translate = function (dx, dy) {
-		if (typeof dx === "number") {
-			this.e += this.a * dx + this.c * dy;
-			this.f += this.b * dx + this.d * dy;
-		} else {
-			this.e += this.a * dx.x + this.c * dx.y;
-			this.f += this.b * dx.x + this.d * dx.y;
-		} // else
-
-		return this;
-	} // translate
-
-	return Matrix2D;
-})();
+     *
+     * Applies a post-translation to this matrix
+     *
+     * @public
+     * @sign public {Matrix2D} translate(Vector2D);
+     * @sign public {Matrix2D} translate(Number, Number);
+     * @param {Number|Vector2D} dx
+     * @param {Number} dy
+     * @returns {Matrix2D} this matrix after post-translation
+     */
+    Matrix2D.prototype.translate = function (dx, dy) {
+        if (typeof dx === "number") {
+            this.e += this.a * dx + this.c * dy;
+            this.f += this.b * dx + this.d * dy;
+        } else {
+            this.e += this.a * dx.x + this.c * dx.y;
+            this.f += this.b * dx.x + this.d * dx.y;
+        } // else
+
+        return this;
+    }; // translate
+
+    return Matrix2D;
+})();
\ No newline at end of file
diff --git a/src/outro.js b/src/outro.js
deleted file mode 100644
index dd787619..00000000
--- a/src/outro.js
+++ /dev/null
@@ -1 +0,0 @@
-});
\ No newline at end of file
diff --git a/src/particles.js b/src/particles.js
index 6b7f99eb..0c433c04 100644
--- a/src/particles.js
+++ b/src/particles.js
@@ -1,360 +1,377 @@
+var Crafty = require('./core.js'),
+    document = window.document;
+
 /**@
-* #Particles
-* @category Graphics
-* Based on Parcycle by Mr. Speaker, licensed under the MIT, Ported by Leo Koppelkamm
-* **This is canvas only & won't do anything if the browser doesn't support it!**
-* To see how this works take a look in https://github.com/craftyjs/Crafty/blob/master/src/particles.js
-*/
+ * #Particles
+ * @category Graphics
+ * @trigger ParticleEnd - when the particle animation has finished
+ * Based on Parcycle by Mr. Speaker, licensed under the MIT, Ported by Leo Koppelkamm
+ * **This is canvas only & won't do anything if the browser doesn't support it!**
+ * To see how this works take a look in https://github.com/craftyjs/Crafty/blob/master/src/particles.js
+ */
 Crafty.c("Particles", {
-	init: function () {
-		//We need to clone it
-		this._Particles = Crafty.clone(this._Particles);
-	},
-
-	/**@
-    * #.particles
-    * @comp Particles
-    * @sign public this .particles(Object options)
-    * @param options - Map of options that specify the behavior and look of the particles.
-    *
-    * @example
-    * ~~~
-	* var options = {
-	*	maxParticles: 150,
-	*	size: 18,
-	*	sizeRandom: 4,
-	*	speed: 1,
-	*	speedRandom: 1.2,
-	*	// Lifespan in frames
-	*	lifeSpan: 29,
-	*	lifeSpanRandom: 7,
-	*	// Angle is calculated clockwise: 12pm is 0deg, 3pm is 90deg etc.
-	*	angle: 65,
-	*	angleRandom: 34,
-	*	startColour: [255, 131, 0, 1],
-	*	startColourRandom: [48, 50, 45, 0],
-	*	endColour: [245, 35, 0, 0],
-	*	endColourRandom: [60, 60, 60, 0],
-	*	// Only applies when fastMode is off, specifies how sharp the gradients are drawn
-	*	sharpness: 20,
-	*	sharpnessRandom: 10,
-	*	// Random spread from origin
-	*	spread: 10,
-	*	// How many frames should this last
-	*	duration: -1,
-	*	// Will draw squares instead of circle gradients
-	*	fastMode: false,
-	*	gravity: { x: 0, y: 0.1 },
-	*	// sensible values are 0-3
-	*	jitter: 0
-	* }
-	*
-	* Crafty.e("2D,Canvas,Particles").particles(options);
-    * ~~~
-    */
-	particles: function (options) {
-
-		if (!Crafty.support.canvas || Crafty.deactivateParticles) return this;
-
-		//If we drew on the main canvas, we'd have to redraw
-		//potentially huge sections of the screen every frame
-		//So we create a separate canvas, where we only have to redraw
-		//the changed particles.
-		var c, ctx, relativeX, relativeY, bounding;
-
-		c = document.createElement("canvas");
-		c.width = Crafty.viewport.width;
-		c.height = Crafty.viewport.height;
-		c.style.position = 'absolute';
-
-		Crafty.stage.elem.appendChild(c);
-
-		ctx = c.getContext('2d');
-
-		this._Particles.init(options);
-
-		// Clean up the DOM when this component is removed
-		this.bind('Remove', function () {
-			Crafty.stage.elem.removeChild(c);
-		}).bind("RemoveComponent", function (id) {
-			if (id === "particles")
-				Crafty.stage.elem.removeChild(c);
-		});;
-
-		relativeX = this.x + Crafty.viewport.x;
-		relativeY = this.y + Crafty.viewport.y;
-		this._Particles.position = this._Particles.vectorHelpers.create(relativeX, relativeY);
-
-		var oldViewport = { x: Crafty.viewport.x, y: Crafty.viewport.y };
-
-		this.bind('EnterFrame', function () {
-			relativeX = this.x + Crafty.viewport.x;
-			relativeY = this.y + Crafty.viewport.y;
-			this._Particles.viewportDelta = { x: Crafty.viewport.x - oldViewport.x, y: Crafty.viewport.y - oldViewport.y };
-
-			oldViewport = { x: Crafty.viewport.x, y: Crafty.viewport.y };
-
-			this._Particles.position = this._Particles.vectorHelpers.create(relativeX, relativeY);
-
-			//Selective clearing
-			if (typeof Crafty.DrawManager.boundingRect == 'function') {
-				bounding = Crafty.DrawManager.boundingRect(this._Particles.register);
-				if (bounding) ctx.clearRect(bounding._x, bounding._y, bounding._w, bounding._h);
-			} else {
-				ctx.clearRect(0, 0, Crafty.viewport.width, Crafty.viewport.height);
-			}
-
-			//This updates all particle colors & positions
-			this._Particles.update();
-
-			//This renders the updated particles
-			this._Particles.render(ctx);
-		});
-		return this;
-	},
-	_Particles: {
-		presets: {
-			maxParticles: 150,
-			size: 18,
-			sizeRandom: 4,
-			speed: 1,
-			speedRandom: 1.2,
-			// Lifespan in frames
-			lifeSpan: 29,
-			lifeSpanRandom: 7,
-			// Angle is calculated clockwise: 12pm is 0deg, 3pm is 90deg etc.
-			angle: 65,
-			angleRandom: 34,
-			startColour: [255, 131, 0, 1],
-			startColourRandom: [48, 50, 45, 0],
-			endColour: [245, 35, 0, 0],
-			endColourRandom: [60, 60, 60, 0],
-			// Only applies when fastMode is off, specifies how sharp the gradients are drawn
-			sharpness: 20,
-			sharpnessRandom: 10,
-			// Random spread from origin
-			spread: 10,
-			// How many frames should this last
-			duration: -1,
-			// Will draw squares instead of circle gradients
-			fastMode: false,
-			gravity: { x: 0, y: 0.1 },
-			// sensible values are 0-3
-			jitter: 0,
-
-			//Don't modify the following
-			particles: [],
-			active: true,
-			particleCount: 0,
-			elapsedFrames: 0,
-			emissionRate: 0,
-			emitCounter: 0,
-			particleIndex: 0
-		},
-
-
-		init: function (options) {
-			this.position = this.vectorHelpers.create(0, 0);
-			if (typeof options == 'undefined') var options = {};
-
-			//Create current config by merging given options and presets.
-			for (key in this.presets) {
-				if (typeof options[key] != 'undefined') this[key] = options[key];
-				else this[key] = this.presets[key];
-			}
-
-			this.emissionRate = this.maxParticles / this.lifeSpan;
-			this.positionRandom = this.vectorHelpers.create(this.spread, this.spread);
-		},
-
-		addParticle: function () {
-			if (this.particleCount == this.maxParticles) {
-				return false;
-			}
-
-			// Take the next particle out of the particle pool we have created and initialize it
-			var particle = new this.particle(this.vectorHelpers);
-			this.initParticle(particle);
-			this.particles[this.particleCount] = particle;
-			// Increment the particle count
-			this.particleCount++;
-
-			return true;
-		},
-		RANDM1TO1: function () {
-			return Math.random() * 2 - 1;
-		},
-		initParticle: function (particle) {
-			particle.position.x = this.position.x + this.positionRandom.x * this.RANDM1TO1();
-			particle.position.y = this.position.y + this.positionRandom.y * this.RANDM1TO1();
-
-			var newAngle = (this.angle + this.angleRandom * this.RANDM1TO1()) * (Math.PI / 180); // convert to radians
-			var vector = this.vectorHelpers.create(Math.sin(newAngle), -Math.cos(newAngle)); // Could move to lookup for speed
-			var vectorSpeed = this.speed + this.speedRandom * this.RANDM1TO1();
-			particle.direction = this.vectorHelpers.multiply(vector, vectorSpeed);
-
-			particle.size = this.size + this.sizeRandom * this.RANDM1TO1();
-			particle.size = particle.size < 0 ? 0 : ~~particle.size;
-			particle.timeToLive = this.lifeSpan + this.lifeSpanRandom * this.RANDM1TO1();
-
-			particle.sharpness = this.sharpness + this.sharpnessRandom * this.RANDM1TO1();
-			particle.sharpness = particle.sharpness > 100 ? 100 : particle.sharpness < 0 ? 0 : particle.sharpness;
-			// internal circle gradient size - affects the sharpness of the radial gradient
-			particle.sizeSmall = ~~((particle.size / 200) * particle.sharpness); //(size/2/100)
-			var start = [
-				this.startColour[0] + this.startColourRandom[0] * this.RANDM1TO1(),
-				this.startColour[1] + this.startColourRandom[1] * this.RANDM1TO1(),
-				this.startColour[2] + this.startColourRandom[2] * this.RANDM1TO1(),
-				this.startColour[3] + this.startColourRandom[3] * this.RANDM1TO1()
-				];
-
-			var end = [
-				this.endColour[0] + this.endColourRandom[0] * this.RANDM1TO1(),
-				this.endColour[1] + this.endColourRandom[1] * this.RANDM1TO1(),
-				this.endColour[2] + this.endColourRandom[2] * this.RANDM1TO1(),
-				this.endColour[3] + this.endColourRandom[3] * this.RANDM1TO1()
-				];
-
-			particle.colour = start;
-			particle.deltaColour[0] = (end[0] - start[0]) / particle.timeToLive;
-			particle.deltaColour[1] = (end[1] - start[1]) / particle.timeToLive;
-			particle.deltaColour[2] = (end[2] - start[2]) / particle.timeToLive;
-			particle.deltaColour[3] = (end[3] - start[3]) / particle.timeToLive;
-		},
-		update: function () {
-			if (this.active && this.emissionRate > 0) {
-				var rate = 1 / this.emissionRate;
-				this.emitCounter++;
-				while (this.particleCount < this.maxParticles && this.emitCounter > rate) {
-					this.addParticle();
-					this.emitCounter -= rate;
-				}
-				this.elapsedFrames++;
-				if (this.duration != -1 && this.duration < this.elapsedFrames) {
-					this.stop();
-				}
-			}
-
-			this.particleIndex = 0;
-			this.register = [];
-			var draw;
-			while (this.particleIndex < this.particleCount) {
-
-				var currentParticle = this.particles[this.particleIndex];
-
-				// If the current particle is alive then update it
-				if (currentParticle.timeToLive > 0) {
-
-					// Calculate the new direction based on gravity
-					currentParticle.direction = this.vectorHelpers.add(currentParticle.direction, this.gravity);
-					currentParticle.position = this.vectorHelpers.add(currentParticle.position, currentParticle.direction);
-					currentParticle.position = this.vectorHelpers.add(currentParticle.position, this.viewportDelta);
-					if (this.jitter) {
-						currentParticle.position.x += this.jitter * this.RANDM1TO1();
-						currentParticle.position.y += this.jitter * this.RANDM1TO1();
-					}
-					currentParticle.timeToLive--;
-
-					// Update colours
-					var r = currentParticle.colour[0] += currentParticle.deltaColour[0];
-					var g = currentParticle.colour[1] += currentParticle.deltaColour[1];
-					var b = currentParticle.colour[2] += currentParticle.deltaColour[2];
-					var a = currentParticle.colour[3] += currentParticle.deltaColour[3];
-
-					// Calculate the rgba string to draw.
-					draw = [];
-					draw.push("rgba(" + (r > 255 ? 255 : r < 0 ? 0 : ~~r));
-					draw.push(g > 255 ? 255 : g < 0 ? 0 : ~~g);
-					draw.push(b > 255 ? 255 : b < 0 ? 0 : ~~b);
-					draw.push((a > 1 ? 1 : a < 0 ? 0 : a.toFixed(2)) + ")");
-					currentParticle.drawColour = draw.join(",");
-
-					if (!this.fastMode) {
-						draw[3] = "0)";
-						currentParticle.drawColourEnd = draw.join(",");
-					}
-
-					this.particleIndex++;
-				} else {
-					// Replace particle with the last active
-					if (this.particleIndex != this.particleCount - 1) {
-						this.particles[this.particleIndex] = this.particles[this.particleCount - 1];
-					}
-					this.particleCount--;
-				}
-				var rect = {};
-				rect._x = ~~currentParticle.position.x;
-				rect._y = ~~currentParticle.position.y;
-				rect._w = currentParticle.size;
-				rect._h = currentParticle.size;
-
-				this.register.push(rect);
-			}
-		},
-
-		stop: function () {
-			this.active = false;
-			this.elapsedFrames = 0;
-			this.emitCounter = 0;
-		},
-
-		render: function (context) {
-
-			for (var i = 0, j = this.particleCount; i < j; i++) {
-				var particle = this.particles[i];
-				var size = particle.size;
-				var halfSize = size >> 1;
-
-				if (particle.position.x + size < 0
-					|| particle.position.y + size < 0
-					|| particle.position.x - size > Crafty.viewport.width
-					|| particle.position.y - size > Crafty.viewport.height) {
-					//Particle is outside
-					continue;
-				}
-				var x = ~~particle.position.x;
-				var y = ~~particle.position.y;
-
-				if (this.fastMode) {
-					context.fillStyle = particle.drawColour;
-				} else {
-					var radgrad = context.createRadialGradient(x + halfSize, y + halfSize, particle.sizeSmall, x + halfSize, y + halfSize, halfSize);
-					radgrad.addColorStop(0, particle.drawColour);
-					//0.9 to avoid visible boxing
-					radgrad.addColorStop(0.9, particle.drawColourEnd);
-					context.fillStyle = radgrad;
-				}
-				context.fillRect(x, y, size, size);
-			}
-		},
-		particle: function (vectorHelpers) {
-			this.position = vectorHelpers.create(0, 0);
-			this.direction = vectorHelpers.create(0, 0);
-			this.size = 0;
-			this.sizeSmall = 0;
-			this.timeToLive = 0;
-			this.colour = [];
-			this.drawColour = "";
-			this.deltaColour = [];
-			this.sharpness = 0;
-		},
-		vectorHelpers: {
-			create: function (x, y) {
-				return {
-					"x": x,
-					"y": y
-				};
-			},
-			multiply: function (vector, scaleFactor) {
-				vector.x *= scaleFactor;
-				vector.y *= scaleFactor;
-				return vector;
-			},
-			add: function (vector1, vector2) {
-				vector1.x += vector2.x;
-				vector1.y += vector2.y;
-				return vector1;
-			}
-		}
-	}
-});
\ No newline at end of file
+    init: function () {
+        //We need to clone it
+        this._Particles = Crafty.clone(this._Particles);
+        this._Particles.parentEntity = this;
+    },
+
+    /**@
+     * #.particles
+     * @comp Particles
+     * @sign public this .particles(Object options)
+     * @param options - Map of options that specify the behavior and look of the particles.
+     *
+     * @example
+     * ~~~
+     * var options = {
+     *	maxParticles: 150,
+     *	size: 18,
+     *	sizeRandom: 4,
+     *	speed: 1,
+     *	speedRandom: 1.2,
+     *	// Lifespan in frames
+     *	lifeSpan: 29,
+     *	lifeSpanRandom: 7,
+     *	// Angle is calculated clockwise: 12pm is 0deg, 3pm is 90deg etc.
+     *	angle: 65,
+     *	angleRandom: 34,
+     *	startColour: [255, 131, 0, 1],
+     *	startColourRandom: [48, 50, 45, 0],
+     *	endColour: [245, 35, 0, 0],
+     *	endColourRandom: [60, 60, 60, 0],
+     *	// Only applies when fastMode is off, specifies how sharp the gradients are drawn
+     *	sharpness: 20,
+     *	sharpnessRandom: 10,
+     *	// Random spread from origin
+     *	spread: 10,
+     *	// How many frames should this last
+     *	duration: -1,
+     *	// Will draw squares instead of circle gradients
+     *	fastMode: false,
+     *	gravity: { x: 0, y: 0.1 },
+     *	// sensible values are 0-3
+     *	jitter: 0
+     * }
+     *
+     * Crafty.e("2D,Canvas,Particles").particles(options);
+     * ~~~
+     */
+    particles: function (options) {
+
+        if (!Crafty.support.canvas || Crafty.deactivateParticles) return this;
+
+        //If we drew on the main canvas, we'd have to redraw
+        //potentially huge sections of the screen every frame
+        //So we create a separate canvas, where we only have to redraw
+        //the changed particles.
+        var c, ctx, relativeX, relativeY, bounding;
+
+        c = document.createElement("canvas");
+        c.width = Crafty.viewport.width;
+        c.height = Crafty.viewport.height;
+        c.style.position = 'absolute';
+        c.style.left = "0px";
+        c.style.top = "0px";
+
+        Crafty.stage.elem.appendChild(c);
+
+        ctx = c.getContext('2d');
+
+        this._Particles.init(options);
+
+        // Clean up the DOM when this component is removed
+        this.bind('Remove', function () {
+            Crafty.stage.elem.removeChild(c);
+        }).bind("RemoveComponent", function (id) {
+            if (id === "particles")
+                Crafty.stage.elem.removeChild(c);
+        });
+
+        relativeX = this.x + Crafty.viewport.x;
+        relativeY = this.y + Crafty.viewport.y;
+        this._Particles.position = this._Particles.vectorHelpers.create(relativeX, relativeY);
+
+        var oldViewport = {
+            x: Crafty.viewport.x,
+            y: Crafty.viewport.y
+        };
+
+        this.bind('EnterFrame', function () {
+            relativeX = this.x + Crafty.viewport.x;
+            relativeY = this.y + Crafty.viewport.y;
+            this._Particles.viewportDelta = {
+                x: Crafty.viewport.x - oldViewport.x,
+                y: Crafty.viewport.y - oldViewport.y
+            };
+
+            oldViewport = {
+                x: Crafty.viewport.x,
+                y: Crafty.viewport.y
+            };
+
+            this._Particles.position = this._Particles.vectorHelpers.create(relativeX, relativeY);
+
+            //Selective clearing
+            if (typeof Crafty.DrawManager.boundingRect == 'function') {
+                bounding = Crafty.DrawManager.boundingRect(this._Particles.register);
+                if (bounding) ctx.clearRect(bounding._x, bounding._y, bounding._w, bounding._h);
+            } else {
+                ctx.clearRect(0, 0, Crafty.viewport.width, Crafty.viewport.height);
+            }
+
+            //This updates all particle colors & positions
+            this._Particles.update();
+
+            //This renders the updated particles
+            this._Particles.render(ctx);
+        });
+        return this;
+    },
+    _Particles: {
+        presets: {
+            maxParticles: 150,
+            size: 18,
+            sizeRandom: 4,
+            speed: 1,
+            speedRandom: 1.2,
+            // Lifespan in frames
+            lifeSpan: 29,
+            lifeSpanRandom: 7,
+            // Angle is calculated clockwise: 12pm is 0deg, 3pm is 90deg etc.
+            angle: 65,
+            angleRandom: 34,
+            startColour: [255, 131, 0, 1],
+            startColourRandom: [48, 50, 45, 0],
+            endColour: [245, 35, 0, 0],
+            endColourRandom: [60, 60, 60, 0],
+            // Only applies when fastMode is off, specifies how sharp the gradients are drawn
+            sharpness: 20,
+            sharpnessRandom: 10,
+            // Random spread from origin
+            spread: 10,
+            // How many frames should this last
+            duration: -1,
+            // Will draw squares instead of circle gradients
+            fastMode: false,
+            gravity: {
+                x: 0,
+                y: 0.1
+            },
+            // sensible values are 0-3
+            jitter: 0,
+
+            //Don't modify the following
+            particles: [],
+            active: true,
+            particleCount: 0,
+            elapsedFrames: 0,
+            emissionRate: 0,
+            emitCounter: 0,
+            particleIndex: 0
+        },
+
+
+        init: function (options) {
+            this.position = this.vectorHelpers.create(0, 0);
+            if (typeof options == 'undefined') options = {};
+
+            //Create current config by merging given options and presets.
+            for (var key in this.presets) {
+                if (typeof options[key] != 'undefined') this[key] = options[key];
+                else this[key] = this.presets[key];
+            }
+
+            this.emissionRate = this.maxParticles / this.lifeSpan;
+            this.positionRandom = this.vectorHelpers.create(this.spread, this.spread);
+        },
+
+        addParticle: function () {
+            if (this.particleCount == this.maxParticles) {
+                return false;
+            }
+
+            // Take the next particle out of the particle pool we have created and initialize it
+            var particle = new this.particle(this.vectorHelpers);
+            this.initParticle(particle);
+            this.particles[this.particleCount] = particle;
+            // Increment the particle count
+            this.particleCount++;
+
+            return true;
+        },
+        RANDM1TO1: function () {
+            return Math.random() * 2 - 1;
+        },
+        initParticle: function (particle) {
+            particle.position.x = this.position.x + this.positionRandom.x * this.RANDM1TO1();
+            particle.position.y = this.position.y + this.positionRandom.y * this.RANDM1TO1();
+
+            var newAngle = (this.angle + this.angleRandom * this.RANDM1TO1()) * (Math.PI / 180); // convert to radians
+            var vector = this.vectorHelpers.create(Math.sin(newAngle), -Math.cos(newAngle)); // Could move to lookup for speed
+            var vectorSpeed = this.speed + this.speedRandom * this.RANDM1TO1();
+            particle.direction = this.vectorHelpers.multiply(vector, vectorSpeed);
+
+            particle.size = this.size + this.sizeRandom * this.RANDM1TO1();
+            particle.size = particle.size < 0 ? 0 : ~~particle.size;
+            particle.timeToLive = this.lifeSpan + this.lifeSpanRandom * this.RANDM1TO1();
+
+            particle.sharpness = this.sharpness + this.sharpnessRandom * this.RANDM1TO1();
+            particle.sharpness = particle.sharpness > 100 ? 100 : particle.sharpness < 0 ? 0 : particle.sharpness;
+            // internal circle gradient size - affects the sharpness of the radial gradient
+            particle.sizeSmall = ~~ ((particle.size / 200) * particle.sharpness); //(size/2/100)
+            var start = [
+                this.startColour[0] + this.startColourRandom[0] * this.RANDM1TO1(),
+                this.startColour[1] + this.startColourRandom[1] * this.RANDM1TO1(),
+                this.startColour[2] + this.startColourRandom[2] * this.RANDM1TO1(),
+                this.startColour[3] + this.startColourRandom[3] * this.RANDM1TO1()
+            ];
+
+            var end = [
+                this.endColour[0] + this.endColourRandom[0] * this.RANDM1TO1(),
+                this.endColour[1] + this.endColourRandom[1] * this.RANDM1TO1(),
+                this.endColour[2] + this.endColourRandom[2] * this.RANDM1TO1(),
+                this.endColour[3] + this.endColourRandom[3] * this.RANDM1TO1()
+            ];
+
+            particle.colour = start;
+            particle.deltaColour[0] = (end[0] - start[0]) / particle.timeToLive;
+            particle.deltaColour[1] = (end[1] - start[1]) / particle.timeToLive;
+            particle.deltaColour[2] = (end[2] - start[2]) / particle.timeToLive;
+            particle.deltaColour[3] = (end[3] - start[3]) / particle.timeToLive;
+        },
+        update: function () {
+            if (this.active && this.emissionRate > 0) {
+                var rate = 1 / this.emissionRate;
+                this.emitCounter++;
+                while (this.particleCount < this.maxParticles && this.emitCounter > rate) {
+                    this.addParticle();
+                    this.emitCounter -= rate;
+                }
+                this.elapsedFrames++;
+                if (this.duration != -1 && this.duration < this.elapsedFrames) {
+                    this.stop();
+                }
+            }
+
+            this.particleIndex = 0;
+            this.register = [];
+            var draw;
+            while (this.particleIndex < this.particleCount) {
+
+                var currentParticle = this.particles[this.particleIndex];
+
+                // If the current particle is alive then update it
+                if (currentParticle.timeToLive > 0) {
+
+                    // Calculate the new direction based on gravity
+                    currentParticle.direction = this.vectorHelpers.add(currentParticle.direction, this.gravity);
+                    currentParticle.position = this.vectorHelpers.add(currentParticle.position, currentParticle.direction);
+                    currentParticle.position = this.vectorHelpers.add(currentParticle.position, this.viewportDelta);
+                    if (this.jitter) {
+                        currentParticle.position.x += this.jitter * this.RANDM1TO1();
+                        currentParticle.position.y += this.jitter * this.RANDM1TO1();
+                    }
+                    currentParticle.timeToLive--;
+
+                    // Update colours
+                    var r = currentParticle.colour[0] += currentParticle.deltaColour[0];
+                    var g = currentParticle.colour[1] += currentParticle.deltaColour[1];
+                    var b = currentParticle.colour[2] += currentParticle.deltaColour[2];
+                    var a = currentParticle.colour[3] += currentParticle.deltaColour[3];
+
+                    // Calculate the rgba string to draw.
+                    draw = [];
+                    draw.push("rgba(" + (r > 255 ? 255 : r < 0 ? 0 : ~~r));
+                    draw.push(g > 255 ? 255 : g < 0 ? 0 : ~~g);
+                    draw.push(b > 255 ? 255 : b < 0 ? 0 : ~~b);
+                    draw.push((a > 1 ? 1 : a < 0 ? 0 : a.toFixed(2)) + ")");
+                    currentParticle.drawColour = draw.join(",");
+
+                    if (!this.fastMode) {
+                        draw[3] = "0)";
+                        currentParticle.drawColourEnd = draw.join(",");
+                    }
+
+                    this.particleIndex++;
+                } else {
+                    // Replace particle with the last active
+                    if (this.particleIndex != this.particleCount - 1) {
+                        this.particles[this.particleIndex] = this.particles[this.particleCount - 1];
+                    }
+                    this.particleCount--;
+                }
+                var rect = {};
+                rect._x = ~~currentParticle.position.x;
+                rect._y = ~~currentParticle.position.y;
+                rect._w = currentParticle.size;
+                rect._h = currentParticle.size;
+
+                this.register.push(rect);
+            }
+        },
+
+        stop: function () {
+            this.active = false;
+            this.elapsedFrames = 0;
+            this.emitCounter = 0;
+            this.parentEntity.trigger("ParticleEnd");
+        },
+
+        render: function (context) {
+
+            for (var i = 0, j = this.particleCount; i < j; i++) {
+                var particle = this.particles[i];
+                var size = particle.size;
+                var halfSize = size >> 1;
+
+                if (particle.position.x + size < 0 || particle.position.y + size < 0 || particle.position.x - size > Crafty.viewport.width || particle.position.y - size > Crafty.viewport.height) {
+                    //Particle is outside
+                    continue;
+                }
+                var x = ~~particle.position.x;
+                var y = ~~particle.position.y;
+
+                if (this.fastMode) {
+                    context.fillStyle = particle.drawColour;
+                } else {
+                    var radgrad = context.createRadialGradient(x + halfSize, y + halfSize, particle.sizeSmall, x + halfSize, y + halfSize, halfSize);
+                    radgrad.addColorStop(0, particle.drawColour);
+                    //0.9 to avoid visible boxing
+                    radgrad.addColorStop(0.9, particle.drawColourEnd);
+                    context.fillStyle = radgrad;
+                }
+                context.fillRect(x, y, size, size);
+            }
+        },
+        particle: function (vectorHelpers) {
+            this.position = vectorHelpers.create(0, 0);
+            this.direction = vectorHelpers.create(0, 0);
+            this.size = 0;
+            this.sizeSmall = 0;
+            this.timeToLive = 0;
+            this.colour = [];
+            this.drawColour = "";
+            this.deltaColour = [];
+            this.sharpness = 0;
+        },
+        vectorHelpers: {
+            create: function (x, y) {
+                return {
+                    "x": x,
+                    "y": y
+                };
+            },
+            multiply: function (vector, scaleFactor) {
+                vector.x *= scaleFactor;
+                vector.y *= scaleFactor;
+                return vector;
+            },
+            add: function (vector1, vector2) {
+                vector1.x += vector2.x;
+                vector1.y += vector2.y;
+                return vector1;
+            }
+        }
+    }
+});
diff --git a/src/sound.js b/src/sound.js
index 96c2856e..7e84a9a3 100644
--- a/src/sound.js
+++ b/src/sound.js
@@ -1,411 +1,516 @@
+var Crafty = require('./core.js'),
+    document = window.document;
+
 Crafty.extend({
-	/**@
-	 * #Crafty.audio
-	 * @category Audio
-	 *
-	 * Add sound files and play them. Chooses best format for browser support.
-	 * Due to the nature of HTML5 audio, three types of audio files will be
-	 * required for cross-browser capabilities. These formats are MP3, Ogg and WAV.
-	 * When sound was not muted on before pause, sound will be unmuted after unpause.
-	 * When sound is muted Crafty.pause() does not have any effect on sound.
-	 */
-	audio : {
-		sounds : {},
-		supported : {},
-		codecs : {// Chart from jPlayer
-			ogg : 'audio/ogg; codecs="vorbis"', //OGG
-			wav : 'audio/wav; codecs="1"', // PCM
-			webma : 'audio/webm; codecs="vorbis"', // WEBM
-			mp3 : 'audio/mpeg; codecs="mp3"', //MP3
-			m4a : 'audio/mp4; codecs="mp4a.40.2"'// AAC / MP4
-		},
-		volume : 1, //Global Volume
-		muted : false,
-		paused : false,
-		/**
-		 * Function to setup supported formats
-		 **/
-		canPlay : function() {
-			var audio = this.audioElement(), canplay;
-			for (var i in this.codecs) {
-				canplay = audio.canPlayType(this.codecs[i]);
-				if (canplay !== "" && canplay !== "no") {
-					this.supported[i] = true;
-				} else {
-					this.supported[i] = false;
-				}
-			}
-
-		},
-		/**
-		 * Function to get an Audio Element
-		 **/
-		audioElement : function() {
-			//IE does not support Audio Object
-			return typeof Audio !== 'undefined' ? new Audio("") : document.createElement('audio');
-		},
-		/**@
-		 * #Crafty.audio.add
-		 * @comp Crafty.audio
-		 * @sign public this Crafty.audio.add(String id, String url)
-		 * @param id - A string to refer to sounds
-		 * @param url - A string pointing to the sound file
-		 * @sign public this Crafty.audio.add(String id, Array urls)
-		 * @param urls - Array of urls pointing to different format of the same sound, selecting the first that is playable
-		 * @sign public this Crafty.audio.add(Object map)
-		 * @param map - key-value pairs where the key is the `id` and the value is either a `url` or `urls`
-		 *
-		 * Loads a sound to be played. Due to the nature of HTML5 audio,
-		 * three types of audio files will be required for cross-browser capabilities.
-		 * These formats are MP3, Ogg and WAV.
-		 *
-		 * Passing an array of URLs will determine which format the browser can play and select it over any other.
-		 *
-		 * Accepts an object where the key is the audio name and
-		 * either a URL or an Array of URLs (to determine which type to use).
-		 *
-		 * The ID you use will be how you refer to that sound when using `Crafty.audio.play`.
-		 *
-		 * @example
-		 * ~~~
-		 * //adding audio from an object
-		 * Crafty.audio.add({
-		 * shoot: ["sounds/shoot.wav",
-		 * "sounds/shoot.mp3",
-		 * "sounds/shoot.ogg"],
-		 *
-		 * coin: "sounds/coin.mp3"
-		 * });
-		 *
-		 * //adding a single sound
-		 * Crafty.audio.add("walk", [
-		 * "sounds/walk.mp3",
-		 * "sounds/walk.ogg",
-		 * "sounds/walk.wav"
-		 * ]);
-		 *
-		 * //only one format
-		 * Crafty.audio.add("jump", "sounds/jump.mp3");
-		 * ~~~
-		 */
-		add : function(id, url) {
-			Crafty.support.audio = !!this.audioElement().canPlayType;
-			//Setup audio support
-			if (!Crafty.support.audio)
-				return;
-
-			this.canPlay();
-			//Setup supported Extensions
-
-			var audio, ext, path;
-			if (arguments.length === 1 && typeof id === "object") {
-				for (var i in id) {
-					for (var src in id[i]) {
-						audio = this.audioElement();
-						audio.id = i;
-						audio.preload = "auto";
-						audio.volume = Crafty.audio.volume;
-						path = id[i][src];
-						ext = path.substr(path.lastIndexOf('.') + 1).toLowerCase();
-						if (this.supported[ext]) {
-							audio.src = path;
-							Crafty.asset(path, audio);
-							this.sounds[i] = {
-								obj : audio,
-								played : 0,
-								volume : Crafty.audio.volume
-							}
-						}
-
-					}
-				}
-			}
-			if ( typeof id === "string") {
-				audio = this.audioElement();
-				audio.id = id;
-				audio.preload = "auto";
-				audio.volume = Crafty.audio.volume;
-
-				if ( typeof url === "string") {
-					ext = url.substr(url.lastIndexOf('.') + 1).toLowerCase();
-					if (this.supported[ext]) {
-						audio.src = url;
-						Crafty.asset(url, audio);
-						this.sounds[id] = {
-							obj : audio,
-							played : 0,
-							volume : Crafty.audio.volume
-						}
-
-					}
-
-				}
-
-				if ( typeof url === "object") {
-					for (src in url) {
-						audio = this.audioElement();
-						audio.id = id;
-						audio.preload = "auto";
-						audio.volume = Crafty.audio.volume;
-						path = url[src];
-						ext = path.substr(path.lastIndexOf('.') + 1).toLowerCase();
-						if (this.supported[ext]) {
-							audio.src = path;
-							Crafty.asset(path, audio);
-							this.sounds[id] = {
-								obj : audio,
-								played : 0,
-								volume : Crafty.audio.volume
-							}
-						}
-
-					}
-				}
-
-			}
-
-		},
-		/**@
-		 * #Crafty.audio.play
-		 * @comp Crafty.audio
-		 * @sign public this Crafty.audio.play(String id)
-		 * @sign public this Crafty.audio.play(String id, Number repeatCount)
-		 * @sign public this Crafty.audio.play(String id, Number repeatCount,Number volume)
-		 * @param id - A string to refer to sounds
-		 * @param repeatCount - Repeat count for the file, where -1 stands for repeat forever.
-		 * @param volume - volume can be a number between 0.0 and 1.0
-		 *
-		 * Will play a sound previously added by using the ID that was used in `Crafty.audio.add`.
-		 * Has a default maximum of 5 channels so that the same sound can play simultaneously unless all of the channels are playing.
-
-		 * *Note that the implementation of HTML5 Audio is buggy at best.*
-		 *
-		 * @example
-		 * ~~~
-		 * Crafty.audio.play("walk");
-		 *
-		 * //play and repeat forever
-		 * Crafty.audio.play("backgroundMusic", -1);
-		 * Crafty.audio.play("explosion",1,0.5); //play sound once with volume of 50%
-		 * ~~~
-		 */
-		play : function(id, repeat, volume) {
-			if (repeat == 0 || !Crafty.support.audio || !this.sounds[id])
-				return;
-			var s = this.sounds[id];
-			s.volume = s.obj.volume = volume || Crafty.audio.volume;
-			if (s.obj.currentTime)
-				s.obj.currentTime = 0;
-			if (this.muted)
-				s.obj.volume = 0;
-			s.obj.play();
-			s.played++;
-			s.obj.addEventListener("ended", function() {
-				if (s.played < repeat || repeat == -1) {
-					if (this.currentTime)
-						this.currentTime = 0;
-					this.play();
-					s.played++;
-				}
-			}, true);
-		},
-	    /**@
-		 * #Crafty.audio.remove
-		 * @comp Crafty.audio
-		 * @sign public this Crafty.audio.remove([String id])
-		 * @param id - A string to refer to sounds
-		 *
-		 * Will stop the sound and remove all references to the audio object allowing the browser to free the memory.
+    /**@
+     * #Crafty.audio
+     * @category Audio
+     *
+     * Add sound files and play them. Chooses best format for browser support.
+     * Due to the nature of HTML5 audio, three types of audio files will be
+     * required for cross-browser capabilities. These formats are MP3, Ogg and WAV.
+     * When sound was not muted on before pause, sound will be unmuted after unpause.
+     * When sound is muted Crafty.pause() does not have any effect on sound
+     *
+     * The maximum number of sounds that can be played simultaneously is defined by Crafty.audio.maxChannels.  The default value is 7.
+     */
+    audio: {
+
+        sounds: {},
+        supported: null,
+        codecs: { // Chart from jPlayer
+            ogg: 'audio/ogg; codecs="vorbis"', //OGG
+            wav: 'audio/wav; codecs="1"', // PCM
+            webma: 'audio/webm; codecs="vorbis"', // WEBM
+            mp3: 'audio/mpeg; codecs="mp3"', //MP3
+            m4a: 'audio/mp4; codecs="mp4a.40.2"' // AAC / MP4
+        },
+        volume: 1, //Global Volume
+        muted: false,
+        paused: false,
+        playCheck: null,
+        /**
+         * Function to setup supported formats
+         **/
+        _canPlay: function () {
+            this.supported = {};
+            // Without support, no formats are supported
+            if (!Crafty.support.audio)
+                return;
+            var audio = this.audioElement(),
+                canplay;
+            for (var i in this.codecs) {
+                canplay = audio.canPlayType(this.codecs[i]);
+                if (canplay !== "" && canplay !== "no") {
+                    this.supported[i] = true;
+                } else {
+                    this.supported[i] = false;
+                }
+            }
+
+        },
+
+        /**@
+         * #Crafty.audio.supports
+         * @comp Crafty.audio
+         * @sign public this Crafty.audio.supports(String extension)
+         * @param extension - A file extension to check audio support for
+         *
+         * Return true if the browser thinks it can play the given file type, otherwise false
+         */
+        supports: function (extension) {
+            // Build cache of supported formats, if necessary
+            if (this.supported === null)
+                this._canPlay();
+
+            if (this.supported[extension])
+                return true;
+            else
+                return false;
+        },
+
+        /**
+         * Function to get an Audio Element
+         **/
+        audioElement: function () {
+            //IE does not support Audio Object
+            return typeof Audio !== 'undefined' ? new Audio("") : document.createElement('audio');
+        },
+
+        /**@
+         * #Crafty.audio.create
+         * @comp Crafty.audio
+         * @sign public this Crafty.audio.create(String id, String url)
+         * @param id - A string to refer to sounds
+         * @param url - A string pointing to the sound file
+         *
+         * Creates an audio asset with the given id and resource.  `Crafty.audio.add` is a more flexible interface that allows cross-browser compatibility.
+         *
+         * If the sound file extension is not supported, returns false; otherwise, returns the audio asset.
+         */
+        create: function (id, path) {
+            //check extension, return if not supported
+            var ext = path.substr(path.lastIndexOf('.') + 1).toLowerCase();
+            if (!this.supports(ext))
+                return false;
+
+            //initiate the audio element
+            var audio = this.audioElement();
+            audio.id = id;
+            audio.preload = "auto";
+            audio.volume = Crafty.audio.volume;
+            audio.src = path;
+
+            //create an asset and metadata for the audio element
+            Crafty.asset(path, audio);
+            this.sounds[id] = {
+                obj: audio,
+                played: 0,
+                volume: Crafty.audio.volume
+            };
+            return this.sounds[id];
+
+        },
+
+        /**@
+         * #Crafty.audio.add
+         * @comp Crafty.audio
+         * @sign public this Crafty.audio.add(String id, String url)
+         * @param id - A string to refer to sounds
+         * @param url - A string pointing to the sound file
+         * @sign public this Crafty.audio.add(String id, Array urls)
+         * @param urls - Array of urls pointing to different format of the same sound, selecting the first that is playable
+         * @sign public this Crafty.audio.add(Object map)
+         * @param map - key-value pairs where the key is the `id` and the value is either a `url` or `urls`
+         *
+         * Loads a sound to be played. Due to the nature of HTML5 audio,
+         * three types of audio files will be required for cross-browser capabilities.
+         * These formats are MP3, Ogg and WAV.
+         *
+         * Passing an array of URLs will determine which format the browser can play and select it over any other.
+         *
+         * Accepts an object where the key is the audio name and
+         * either a URL or an Array of URLs (to determine which type to use).
+         *
+         * The ID you use will be how you refer to that sound when using `Crafty.audio.play`.
+         *
+         * @example
+         * ~~~
+         * //adding audio from an object
+         * Crafty.audio.add({
+         * shoot: ["sounds/shoot.wav",
+         * "sounds/shoot.mp3",
+         * "sounds/shoot.ogg"],
+         *
+         * coin: "sounds/coin.mp3"
+         * });
+         *
+         * //adding a single sound
+         * Crafty.audio.add("walk", [
+         * "sounds/walk.mp3",
+         * "sounds/walk.ogg",
+         * "sounds/walk.wav"
+         * ]);
+         *
+         * //only one format
+         * Crafty.audio.add("jump", "sounds/jump.mp3");
+         * ~~~
+         */
+        add: function (id, url) {
+            if (!Crafty.support.audio)
+                return;
+
+            var src;
+
+            if (arguments.length === 1 && typeof id === "object") {
+                for (var i in id) {
+                    for (src in id[i]) {
+                        if (Crafty.audio.create(i, id[i][src]))
+                            break;
+                    }
+                }
+            }
+            if (typeof id === "string") {
+                if (typeof url === "string") {
+                    Crafty.audio.create(id, url);
+                }
+
+                if (typeof url === "object") {
+                    for (src in url) {
+                        if (Crafty.audio.create(id, url[src]))
+                            break;
+                    }
+                }
+
+            }
+        },
+        /**@
+         * #Crafty.audio.play
+         * @comp Crafty.audio
+         * @sign public this Crafty.audio.play(String id)
+         * @sign public this Crafty.audio.play(String id, Number repeatCount)
+         * @sign public this Crafty.audio.play(String id, Number repeatCount, Number volume)
+         * @param id - A string to refer to sounds
+         * @param repeatCount - Repeat count for the file, where -1 stands for repeat forever.
+         * @param volume - volume can be a number between 0.0 and 1.0
+         * @returns The audio element used to play the sound.  Null if the call failed due to a lack of open channels.
+         *
+         * Will play a sound previously added by using the ID that was used in `Crafty.audio.add`.
+         * Has a default maximum of 5 channels so that the same sound can play simultaneously unless all of the channels are playing.
+
+         * *Note that the implementation of HTML5 Audio is buggy at best.*
+         *
+         * @example
+         * ~~~
+         * Crafty.audio.play("walk");
+         *
+         * //play and repeat forever
+         * Crafty.audio.play("backgroundMusic", -1);
+         * Crafty.audio.play("explosion",1,0.5); //play sound once with volume of 50%
+         * ~~~
+         */
+        play: function (id, repeat, volume) {
+            if (repeat === 0 || !Crafty.support.audio || !this.sounds[id])
+                return;
+            var s = this.sounds[id];
+            var c = this.getOpenChannel();
+            if (!c)
+                return null;
+            c.id = id;
+            c.repeat = repeat;
+            var a = c.obj;
+
+
+            c.volume = s.volume = s.obj.volume = volume || Crafty.audio.volume;
+
+            a.volume = s.volume;
+            a.src = s.obj.src;
+
+            if (this.muted)
+                a.volume = 0;
+            a.play();
+            s.played++;
+            c.onEnd = function () {
+                if (s.played < c.repeat || repeat == -1) {
+                    if (this.currentTime)
+                        this.currentTime = 0;
+                    this.play();
+                    s.played++;
+                } else {
+                    c.active = false;
+                    this.pause();
+                    this.removeEventListener("ended", c.onEnd, true);
+                    this.currentTime = 0;
+                    Crafty.trigger("SoundComplete", {
+                        id: c.id
+                    });
+                }
+
+            };
+            a.addEventListener("ended", c.onEnd, true);
+
+            return a;
+        },
+
+
+
+        /**@
+         * #Crafty.audio.setChannels
+         * @comp Crafty.audio
+         * @sign public this Crafty.audio.setChannels(Number n)
+         * @param n - The maximum number of channels
+         */
+        maxChannels: 7,
+        setChannels: function (n) {
+            this.maxChannels = n;
+            if (n < this.channels.length)
+                this.channels.length = n;
+        },
+
+        channels: [],
+        // Finds an unused audio element, marks it as in use, and return it.
+        getOpenChannel: function () {
+            for (var i = 0; i < this.channels.length; i++) {
+                var chan = this.channels[i];
+                  /*
+                   * Second test looks for stuff that's out of use,
+                   * but fallen foul of Chromium bug 280417
+                   */
+                if (chan.active === false ||
+                      chan.obj.ended && chan.repeat <= this.sounds[chan.id].played) {
+                    chan.active = true;
+                    return chan;
+                }
+            }
+            // If necessary, create a new element, unless we've already reached the max limit
+            if (i < this.maxChannels) {
+                var c = {
+                    obj: this.audioElement(),
+                    active: true,
+                    // Checks that the channel is being used to play sound id
+                    _is: function (id) {
+                        return this.id === id && this.active;
+                    }
+                };
+                this.channels.push(c);
+                return c;
+            }
+            // In that case, return null
+            return null;
+        },
+
+        /**@
+         * #Crafty.audio.remove
+         * @comp Crafty.audio
+         * @sign public this Crafty.audio.remove([String id])
+         * @param id - A string to refer to sounds
+         *
+         * Will stop the sound and remove all references to the audio object allowing the browser to free the memory.
          * If no id is given, all sounds will be removed.
-		 *
-		 * @example
-		 * ~~~
-		 * Crafty.audio.remove("walk");
-		 * ~~~
-		 */
-		remove: function (id) {
-		    if (!Crafty.support.audio)
-		        return;
-
-		    var s;
-
-		    if (!id) {
-		        for (var i in this.sounds) {
-		            s = this.sounds[i];
-		            Crafty.audio.stop(id);
-		            delete Crafty.assets[s.obj.src];
-		            delete Crafty.audio.sounds[id];
-		        }
-		        return;
-		    }
-		    if (!this.sounds[id])
-		        return;
-
-		    s = this.sounds[id];
-		    Crafty.audio.stop(id);
-		    delete Crafty.assets[s.obj.src];
-		    delete Crafty.audio.sounds[id];
-		},
-		/**@
-		 * #Crafty.audio.stop
-		 * @sign public this Crafty.audio.stop([Number ID])
-		 *
-		 * Stops any playing sound. if id is not set, stop all sounds which are playing
-		 *
-		 * @example
-		 * ~~~
-		 * //all sounds stopped playing now
-		 * Crafty.audio.stop();
-		 *
-		 * ~~~
-		 */
-		stop : function(id) {
-			if (!Crafty.support.audio)
-				return;
-			var s;
-			if (!id) {
-				for (var i in this.sounds) {
-					s = this.sounds[i];
-					if (!s.obj.paused)
-						s.obj.pause();
-				}
-			}
-			if (!this.sounds[id])
-				return;
-			s = this.sounds[id];
-			if (!s.obj.paused)
-				s.obj.pause();
-		},
-		/**
-		 * #Crafty.audio._mute
-		 * @sign public this Crafty.audio._mute([Boolean mute])
-		 *
-		 * Mute or unmute every Audio instance that is playing.
-		 */
-		_mute : function(mute) {
-			if (!Crafty.support.audio)
-				return;
-			var s;
-			for (var i in this.sounds) {
-				s = this.sounds[i];
-				s.obj.volume = mute ? 0 : s.volume;
-			}
-			this.muted = mute;
-		},
-		/**@
-		 * #Crafty.audio.toggleMute
-		 * @sign public this Crafty.audio.toggleMute()
-		 *
-		 * Mute or unmute every Audio instance that is playing. Toggles between
-		 * pausing or playing depending on the state.
-		 *
-		 * @example
-		 * ~~~
-		 * //toggle mute and unmute depending on current state
-		 * Crafty.audio.toggleMute();
-		 * ~~~
-		 */
-		toggleMute : function() {
-			if (!this.muted) {
-				this._mute(true);
-			} else {
-				this._mute(false);
-			}
-
-		},
-		/**@
-		 * #Crafty.audio.mute
-		 * @sign public this Crafty.audio.mute()
-		 *
-		 * Mute every Audio instance that is playing.
-		 *
-		 * @example
-		 * ~~~
-		 * Crafty.audio.mute();
-		 * ~~~
-		 */
-		mute : function() {
-			this._mute(true);
-		},
-		/**@
-		 * #Crafty.audio.unmute
-		 * @sign public this Crafty.audio.unmute()
-		 *
-		 * Unmute every Audio instance that is playing.
-		 *
-		 * @example
-		 * ~~~
-		 * Crafty.audio.unmute();
-		 * ~~~
-		 */
-		unmute : function() {
-			this._mute(false);
-		},
-
-		/**@
-		 * #Crafty.audio.pause
-		 * @sign public this Crafty.audio.pause(string ID)
-		 *
-		 * Pause the Audio instance specified by id param.
-		 *
-		 * @example
-		 * ~~~
-		 * Crafty.audio.pause('music');
-		 * ~~~
-		 *
-		 * @param {string} id The id of the audio object to pause
-		 */
-		pause : function(id) {
-			if (!Crafty.support.audio || !id || !this.sounds[id])
-				return;
-			var s = this.sounds[id];
-			if (!s.obj.paused)
-				s.obj.pause();
-		},
-
-		/**@
-		 * #Crafty.audio.unpause
-		 * @sign public this Crafty.audio.unpause(string ID)
-		 *
-		 * Resume playing the Audio instance specified by id param.
-		 *
-		 * @example
-		 * ~~~
-		 * Crafty.audio.unpause('music');
-		 * ~~~
-		 *
-		 * @param {string} id The id of the audio object to unpause
-		 */
-		unpause : function(id) {
-			if (!Crafty.support.audio || !id || !this.sounds[id])
-				return;
-			var s = this.sounds[id];
-			if (s.obj.paused)
-				s.obj.play();
-		},
-
-		/**@
-		 * #Crafty.audio.togglePause
-		 * @sign public this Crafty.audio.togglePause(string ID)
-		 *
-		 * Toggle the pause status of the Audio instance specified by id param.
-		 *
-		 * @example
-		 * ~~~
-		 * Crafty.audio.togglePause('music');
-		 * ~~~
-		 *
-		 * @param {string} id The id of the audio object to pause/unpause
-		 */
-		togglePause : function(id) {
-			if (!Crafty.support.audio || !id || !this.sounds[id])
-				return;
-			var s = this.sounds[id];
-			if (s.obj.paused) {
-				s.obj.play();
-			} else {
-				s.obj.pause();
-			}
-		}
-	}
+         *
+         * @example
+         * ~~~
+         * Crafty.audio.remove("walk");
+         * ~~~
+         */
+        remove: function (id) {
+            if (!Crafty.support.audio)
+                return;
+
+            var s;
+
+            if (!id) {
+                for (var i in this.sounds) {
+                    s = this.sounds[i];
+                    Crafty.audio.stop(id);
+                    delete Crafty.assets[s.obj.src];
+                    delete Crafty.audio.sounds[id];
+                }
+                return;
+            }
+            if (!this.sounds[id])
+                return;
+
+            s = this.sounds[id];
+            Crafty.audio.stop(id);
+            delete Crafty.assets[s.obj.src];
+            delete Crafty.audio.sounds[id];
+        },
+        /**@
+         * #Crafty.audio.stop
+         * @comp Crafty.audio
+         * @sign public this Crafty.audio.stop([Number ID])
+         *
+         * Stops any playing sound. if id is not set, stop all sounds which are playing
+         *
+         * @example
+         * ~~~
+         * //all sounds stopped playing now
+         * Crafty.audio.stop();
+         *
+         * ~~~
+         */
+        stop: function (id) {
+            if (!Crafty.support.audio)
+                return;
+            for (var i in this.channels) {
+                c = this.channels[i];
+                if ( (!id && c.active) || c._is(id) ) {
+                    c.active = false;
+                    c.obj.pause();
+                }
+            }
+            return;
+        },
+        /**
+         * #Crafty.audio._mute
+         * @comp Crafty.audio
+         * @sign public this Crafty.audio._mute([Boolean mute])
+         *
+         * Mute or unmute every Audio instance that is playing.
+         */
+        _mute: function (mute) {
+            if (!Crafty.support.audio)
+                return;
+            var c;
+            for (var i in this.channels) {
+                c = this.channels[i];
+                c.obj.volume = mute ? 0 : c.volume;
+            }
+            this.muted = mute;
+        },
+        /**@
+         * #Crafty.audio.toggleMute
+         * @comp Crafty.audio
+         * @sign public this Crafty.audio.toggleMute()
+         *
+         * Mute or unmute every Audio instance that is playing. Toggles between
+         * pausing or playing depending on the state.
+         *
+         * @example
+         * ~~~
+         * //toggle mute and unmute depending on current state
+         * Crafty.audio.toggleMute();
+         * ~~~
+         */
+        toggleMute: function () {
+            if (!this.muted) {
+                this._mute(true);
+            } else {
+                this._mute(false);
+            }
+
+        },
+        /**@
+         * #Crafty.audio.mute
+         * @comp Crafty.audio
+         * @sign public this Crafty.audio.mute()
+         *
+         * Mute every Audio instance that is playing.
+         *
+         * @example
+         * ~~~
+         * Crafty.audio.mute();
+         * ~~~
+         */
+        mute: function () {
+            this._mute(true);
+        },
+        /**@
+         * #Crafty.audio.unmute
+         * @comp Crafty.audio
+         * @sign public this Crafty.audio.unmute()
+         *
+         * Unmute every Audio instance that is playing.
+         *
+         * @example
+         * ~~~
+         * Crafty.audio.unmute();
+         * ~~~
+         */
+        unmute: function () {
+            this._mute(false);
+        },
+
+        /**@
+         * #Crafty.audio.pause
+         * @comp Crafty.audio
+         * @sign public this Crafty.audio.pause(string ID)
+         *
+         * Pause the Audio instance specified by id param.
+         *
+         * @example
+         * ~~~
+         * Crafty.audio.pause('music');
+         * ~~~
+         *
+         * @param {string} id The id of the audio object to pause
+         */
+        pause: function (id) {
+            if (!Crafty.support.audio || !id || !this.sounds[id])
+                return;
+            var c;
+            for (var i in this.channels) {
+                c = this.channels[i];
+                if (c._is(id) && !c.obj.paused)
+                    c.obj.pause();
+            }
+
+        },
+
+        /**@
+         * #Crafty.audio.unpause
+         * @comp Crafty.audio
+         * @sign public this Crafty.audio.unpause(string ID)
+         *
+         * Resume playing the Audio instance specified by id param.
+         *
+         * @example
+         * ~~~
+         * Crafty.audio.unpause('music');
+         * ~~~
+         *
+         * @param {string} id The id of the audio object to unpause
+         */
+        unpause: function (id) {
+            if (!Crafty.support.audio || !id || !this.sounds[id])
+                return;
+            var c;
+            for (var i in this.channels) {
+                c = this.channels[i];
+                if (c._is(id) && c.obj.paused)
+                    c.obj.play();
+            }
+        },
+
+        /**@
+         * #Crafty.audio.togglePause
+         * @comp Crafty.audio
+         * @sign public this Crafty.audio.togglePause(string ID)
+         *
+         * Toggle the pause status of the Audio instance specified by id param.
+         *
+         * @example
+         * ~~~
+         * Crafty.audio.togglePause('music');
+         * ~~~
+         *
+         * @param {string} id The id of the audio object to pause/unpause
+         */
+        togglePause: function (id) {
+            if (!Crafty.support.audio || !id || !this.sounds[id])
+                return;
+            var c;
+            for (var i in this.channels) {
+                c = this.channels[i];
+                if (c._is(id)) {
+                    if (c.obj.paused) {
+                        c.obj.play();
+                    } else {
+                        c.obj.pause();
+                    }
+                }
+            }
+        }
+    }
 });
diff --git a/src/sprite.js b/src/sprite.js
index 5dfcf43b..1e8576bb 100644
--- a/src/sprite.js
+++ b/src/sprite.js
@@ -1,132 +1,146 @@
+var Crafty = require('./core.js'),
+    document = window.document;
+
 /**@
-* #Sprite
-* @category Graphics
-* @trigger Change - when the sprites change
-* Component for using tiles in a sprite map.
-*/
+ * #Sprite
+ * @category Graphics
+ * @trigger Change - when the sprites change
+ * Component for using tiles in a sprite map.
+ */
 Crafty.c("Sprite", {
-	__image: '',
-	/*
-	* #.__tile
-	* @comp Sprite
-	*
-	* Horizontal sprite tile size.
-	*/
-	__tile: 0,
-	/*
-	* #.__tileh
-	* @comp Sprite
-	*
-	* Vertical sprite tile size.
-	*/
-	__tileh: 0,
-	__padding: null,
-	__trim: null,
-	img: null,
-	//ready is changed to true in Crafty.sprite
-	ready: false,
+    __image: '',
+    /*
+     * #.__tile
+     * @comp Sprite
+     *
+     * Horizontal sprite tile size.
+     */
+    __tile: 0,
+    /*
+     * #.__tileh
+     * @comp Sprite
+     *
+     * Vertical sprite tile size.
+     */
+    __tileh: 0,
+    __padding: null,
+    __trim: null,
+    img: null,
+    //ready is changed to true in Crafty.sprite
+    ready: false,
+
+    init: function () {
+        this.__trim = [0, 0, 0, 0];
 
-	init: function () {
-		this.__trim = [0, 0, 0, 0];
+        var draw = function (e) {
+            var co = e.co,
+                pos = e.pos,
+                context = e.ctx;
 
-		var draw = function (e) {
-			var co = e.co,
-				pos = e.pos,
-				context = e.ctx;
+            if (e.type === "canvas") {
+                //draw the image on the canvas element
+                context.drawImage(this.img, //image element
+                    co.x, //x position on sprite
+                    co.y, //y position on sprite
+                    co.w, //width on sprite
+                    co.h, //height on sprite
+                    pos._x, //x position on canvas
+                    pos._y, //y position on canvas
+                    pos._w, //width on canvas
+                    pos._h //height on canvas
+                );
+            } else if (e.type === "DOM") {
+                // Get scale (ratio of entity dimensions to sprite's dimensions)
+                // If needed, we will scale up the entire sprite sheet, and then modify the position accordingly
+                var vscale = this._h / co.h,
+                    hscale = this._w / co.w,
+                    style = this._element.style;
 
-			if (e.type === "canvas") {
-				//draw the image on the canvas element
-				context.drawImage(this.img, //image element
-								 co.x, //x position on sprite
-								 co.y, //y position on sprite
-								 co.w, //width on sprite
-								 co.h, //height on sprite
-								 pos._x, //x position on canvas
-								 pos._y, //y position on canvas
-								 pos._w, //width on canvas
-								 pos._h //height on canvas
-				);
-			} else if (e.type === "DOM") {
-				this._element.style.background = "url('" + this.__image + "') no-repeat -" + co.x + "px -" + co.y + "px";
-			}
-		};
+                style.background = style.backgroundColor + " url('" + this.__image + "') no-repeat -" + co.x * hscale + "px -" + co.y * vscale + "px";
+                // style.backgroundSize must be set AFTER style.background!
+                if (vscale != 1 || hscale != 1) {
+                    style.backgroundSize = (this.img.width * hscale) + "px" + " " + (this.img.height * vscale) + "px";
+                }
+            }
+        };
 
-		this.bind("Draw", draw).bind("RemoveComponent", function (id) {
-			if (id === "Sprite") this.unbind("Draw", draw);
-		});
-	},
+        this.bind("Draw", draw).bind("RemoveComponent", function (id) {
+            if (id === "Sprite") this.unbind("Draw", draw);
+        });
+    },
 
-	/**@
-	* #.sprite
-	* @comp Sprite
-	* @sign public this .sprite(Number x, Number y, Number w, Number h)
-	* @param x - X cell position
-	* @param y - Y cell position
-	* @param w - Width in cells
-	* @param h - Height in cells
-	* 
-	* Uses a new location on the sprite map as its sprite.
-	*
-	* Values should be in tiles or cells (not pixels).
-	*
-	* @example
-	* ~~~
-	* Crafty.e("2D, DOM, Sprite")
-	* 	.sprite(0, 0, 2, 2);
-	* ~~~
-	*/
+    /**@
+     * #.sprite
+     * @comp Sprite
+     * @sign public this .sprite(Number x, Number y, Number w, Number h)
+     * @param x - X cell position
+     * @param y - Y cell position
+     * @param w - Width in cells
+     * @param h - Height in cells
+     *
+     * Uses a new location on the sprite map as its sprite.
+     *
+     * Values should be in tiles or cells (not pixels).
+     *
+     * @example
+     * ~~~
+     * Crafty.e("2D, DOM, Sprite")
+     *   .sprite(0, 0, 2, 2);
+     * ~~~
+     */
 
-	/**@
-	* #.__coord
-	* @comp Sprite
-	*
-	* The coordinate of the slide within the sprite in the format of [x, y, w, h].
-	*/
-	sprite: function (x, y, w, h) {
-		this.__coord = [x * this.__tile + this.__padding[0] + this.__trim[0],
-						y * this.__tileh + this.__padding[1] + this.__trim[1],
-						this.__trim[2] || w * this.__tile || this.__tile,
-						this.__trim[3] || h * this.__tileh || this.__tileh];
+    /**@
+     * #.__coord
+     * @comp Sprite
+     *
+     * The coordinate of the slide within the sprite in the format of [x, y, w, h].
+     */
+    sprite: function (x, y, w, h) {
+        this.__coord = [x * (this.__tile + this.__padding[0]) + this.__trim[0],
+            y * (this.__tileh + this.__padding[1]) + this.__trim[1],
+            this.__trim[2] || w * this.__tile || this.__tile,
+            this.__trim[3] || h * this.__tileh || this.__tileh
+        ];
 
-		this.trigger("Change");
-		return this;
-	},
+        this.trigger("Change");
+        return this;
+    },
 
-	/**@
-	* #.crop
-	* @comp Sprite
-	* @sign public this .crop(Number x, Number y, Number w, Number h)
-	* @param x - Offset x position
-	* @param y - Offset y position
-	* @param w - New width
-	* @param h - New height
-	* 
-	* If the entity needs to be smaller than the tile size, use this method to crop it.
-	*
-	* The values should be in pixels rather than tiles.
-	*
-	* @example
-	* ~~~
-	* Crafty.e("2D, DOM, Sprite")
-	* 	.crop(40, 40, 22, 23);
-	* ~~~
-	*/
-	crop: function (x, y, w, h) {
-		var old = this._mbr || this.pos();
-		this.__trim = [];
-		this.__trim[0] = x;
-		this.__trim[1] = y;
-		this.__trim[2] = w;
-		this.__trim[3] = h;
+    /**@
+     * #.crop
+     * @comp Sprite
+     * @sign public this .crop(Number x, Number y, Number w, Number h)
+     * @param x - Offset x position
+     * @param y - Offset y position
+     * @param w - New width
+     * @param h - New height
+     *
+     * If the entity needs to be smaller than the tile size, use this method to crop it.
+     *
+     * The values should be in pixels rather than tiles.
+     *
+     * @example
+     * ~~~
+     * Crafty.e("2D, DOM, Sprite")
+     *   .crop(40, 40, 22, 23);
+     * ~~~
+     */
+    crop: function (x, y, w, h) {
+        var old = this._mbr || this.pos();
+        this.__trim = [];
+        this.__trim[0] = x;
+        this.__trim[1] = y;
+        this.__trim[2] = w;
+        this.__trim[3] = h;
 
-		this.__coord[0] += x;
-		this.__coord[1] += y;
-		this.__coord[2] = w;
-		this.__coord[3] = h;
-		this._w = w;
-		this._h = h;
+        this.__coord[0] += x;
+        this.__coord[1] += y;
+        this.__coord[2] = w;
+        this.__coord[3] = h;
+        this._w = w;
+        this._h = h;
 
-		this.trigger("Change", old);
-		return this;
-	}
-});
+        this.trigger("Change", old);
+        return this;
+    }
+});
\ No newline at end of file
diff --git a/src/storage.js b/src/storage.js
index d34bd39f..563d4eb8 100644
--- a/src/storage.js
+++ b/src/storage.js
@@ -1,47 +1,52 @@
+var Crafty = require('./core.js'),
+    document = window.document;
+
+// Directive for jshint to ignore evals
+// eval is used to support IE8, so this can be removed if we decide to drop that
+/* jshint evil:true */
+
 /**@
  * #Storage
  * @category Utilities
  * Utility to allow data to be saved to a permanent storage solution: IndexedDB, WebSql, localstorage or cookies
  */
-    /**@
-	 * #.open
-	 * @comp Storage
-	 * @sign .open(String gameName)
-	 * @param gameName - a machine readable string to uniquely identify your game
-	 * 
-	 * Opens a connection to the database. If the best they have is localstorage or lower, it does nothing
-	 *
-	 * @example
-	 * Open a database
-	 * ~~~
-	 * Crafty.storage.open('MyGame');
-	 * ~~~
-	 */
-
-    /**@
-	 * #.save
-	 * @comp Storage
-	 * @sign .save(String key, String type, Mixed data)
-	 * @param key - A unique key for identifying this piece of data
-	 * @param type - 'save' or 'cache'
-	 * @param data - Some kind of data.
-	 * 
-	 * Saves a piece of data to the database. Can be anything, although entities are preferred.
-	 * For all storage methods but IndexedDB, the data will be serialized as a string
-	 * During serialization, an entity's SaveData event will be triggered.
-	 * Components should implement a SaveData handler and attach the necessary information to the passed object
-	 *
-	 * @example
-	 * Saves an entity to the database
-	 * ~~~
-	 * var ent = Crafty.e("2D, DOM")
-	 *                     .attr({x: 20, y: 20, w: 100, h:100});
-	 * Crafty.storage.open('MyGame');
-	 * Crafty.storage.save('MyEntity', 'save', ent);
-	 * ~~~
-	 */
-
-    /**@
+/**@
+ * #.open
+ * @comp Storage
+ * @sign .open(String gameName)
+ * @param gameName - a machine readable string to uniquely identify your game
+ *
+ * Opens a connection to the database. If the best they have is localstorage or lower, it does nothing
+ *
+ * @example
+ * Open a database
+ * ~~~
+ * Crafty.storage.open('MyGame');
+ * ~~~
+ */
+/**@
+ * #.save
+ * @comp Storage
+ * @sign .save(String key, String type, Mixed data)
+ * @param key - A unique key for identifying this piece of data
+ * @param type - 'save' or 'cache'
+ * @param data - Some kind of data.
+ *
+ * Saves a piece of data to the database. Can be anything, although entities are preferred.
+ * For all storage methods but IndexedDB, the data will be serialized as a string
+ * During serialization, an entity's SaveData event will be triggered.
+ * Components should implement a SaveData handler and attach the necessary information to the passed object
+ *
+ * @example
+ * Saves an entity to the database
+ * ~~~
+ * var ent = Crafty.e("2D, DOM")
+ *                     .attr({x: 20, y: 20, w: 100, h:100});
+ * Crafty.storage.open('MyGame');
+ * Crafty.storage.save('MyEntity', 'save', ent);
+ * ~~~
+ */
+/**@
 	 * #.load
 	 * @comp Storage
 	 * @sign .load(String key, String type)
@@ -59,8 +64,7 @@
 	 * Crafty.storage.load('MyEntity', 'save', function (data) { // do things });
 	 * ~~~
 	 */
-
-    /**@
+/**@
 	 * #.getAllKeys
 	 * @comp Storage
 	 * @sign .getAllKeys(String type)
@@ -74,516 +78,532 @@
 	 * var saves = Crafty.storage.getAllKeys('save');
 	 * ~~~
 	 */
-
-    /**@
-	 * #.external
-	 * @comp Storage
-	 * @sign .external(String url)
-	 * @param url - URL to an external to save games too
-	 * 
-	 * Enables and sets the url for saving games to an external server
-	 * 
-	 * @example
-	 * Save an entity to an external server
-	 * ~~~
-	 * Crafty.storage.external('http://somewhere.com/server.php');
-	 * Crafty.storage.open('MyGame');
-	 * var ent = Crafty.e('2D, DOM')
-	 *                     .attr({x: 20, y: 20, w: 100, h:100});
-	 * Crafty.storage.save('save01', 'save', ent);
-	 * ~~~
-	 */
-
-    /**@
-	 * #SaveData event
-	 * @comp Storage
-	 * @param data - An object containing all of the data to be serialized
-	 * @param prepare - The function to prepare an entity for serialization
-	 * 
-	 * Any data a component wants to save when it's serialized should be added to this object.
-	 * Straight attribute should be set in data.attr.
-	 * Anything that requires a special handler should be set in a unique property.
-	 *
-	 * @example
-	 * Saves the innerHTML of an entity
-	 * ~~~
-	 * Crafty.e("2D DOM").bind("SaveData", function (data, prepare) {
-	 *     data.attr.x = this.x;
-	 *     data.attr.y = this.y;
-	 *     data.dom = this.element.innerHTML;
-	 * });
-	 * ~~~
-	 */
-
-    /**@
-	 * #LoadData event
-	 * @param data - An object containing all the data that been saved
-	 * @param process - The function to turn a string into an entity
-	 * 
-	 * Handlers for processing any data that needs more than straight assignment
-	 *
-	 * Note that data stored in the .attr object is automatically added to the entity.
-	 * It does not need to be handled here
-	 *
-	 * @example
-	 * ~~~
-	 * Sets the innerHTML from a saved entity
-	 * Crafty.e("2D DOM").bind("LoadData", function (data, process) {
-	 *     this.element.innerHTML = data.dom;
-	 * });
-	 * ~~~
-	 */
-
+/**@
+ * #.external
+ * @comp Storage
+ * @sign .external(String url)
+ * @param url - URL to an external to save games too
+ *
+ * Enables and sets the url for saving games to an external server
+ *
+ * @example
+ * Save an entity to an external server
+ * ~~~
+ * Crafty.storage.external('http://somewhere.com/server.php');
+ * Crafty.storage.open('MyGame');
+ * var ent = Crafty.e('2D, DOM')
+ *                     .attr({x: 20, y: 20, w: 100, h:100});
+ * Crafty.storage.save('save01', 'save', ent);
+ * ~~~
+ */
+/**@
+ * #SaveData event
+ * @comp Storage
+ * @param data - An object containing all of the data to be serialized
+ * @param prepare - The function to prepare an entity for serialization
+ *
+ * Any data a component wants to save when it's serialized should be added to this object.
+ * Straight attribute should be set in data.attr.
+ * Anything that requires a special handler should be set in a unique property.
+ *
+ * @example
+ * Saves the innerHTML of an entity
+ * ~~~
+ * Crafty.e("2D DOM").bind("SaveData", function (data, prepare) {
+ *     data.attr.x = this.x;
+ *     data.attr.y = this.y;
+ *     data.dom = this.element.innerHTML;
+ * });
+ * ~~~
+ */
+/**@
+ * #LoadData event
+ * @comp Storage
+ * @param data - An object containing all the data that been saved
+ * @param process - The function to turn a string into an entity
+ *
+ * Handlers for processing any data that needs more than straight assignment
+ *
+ * Note that data stored in the .attr object is automatically added to the entity.
+ * It does not need to be handled here
+ *
+ * @example
+ * ~~~
+ * Sets the innerHTML from a saved entity
+ * Crafty.e("2D DOM").bind("LoadData", function (data, process) {
+ *     this.element.innerHTML = data.dom;
+ * });
+ * ~~~
+ */
 Crafty.storage = (function () {
-	var db = null, url, gameName, timestamps = {}, 
-		transactionType = { READ: "readonly", READ_WRITE: "readwrite" };
-
-	/*
-	 * Processes a retrieved object.
-	 * Creates an entity if it is one
-	 */
-	function process(obj) {
-		if (obj.c) {
-			var d = Crafty.e(obj.c)
-						.attr(obj.attr)
-						.trigger('LoadData', obj, process);
-			return d;
-		}
-		else if (typeof obj == 'object') {
-			for (var prop in obj) {
-				obj[prop] = process(obj[prop]);
-			}
-		}
-		return obj;
-	}
-
-	function unserialize(str) {
-		if (typeof str != 'string') return null;
-		var data = (JSON ? JSON.parse(str) : eval('(' + str + ')'));
-		return process(data);
-	}
-
-	/* recursive function
-	 * searches for entities in an object and processes them for serialization
-	 */
-	function prep(obj) {
-		if (obj.__c) {
-			// object is entity
-			var data = { c: [], attr: {} };
-			obj.trigger("SaveData", data, prep);
-			for (var i in obj.__c) {
-				data.c.push(i);
-			}
-			data.c = data.c.join(', ');
-			obj = data;
-		}
-		else if (typeof obj == 'object') {
-			// recurse and look for entities
-			for (var prop in obj) {
-				obj[prop] = prep(obj[prop]);
-			}
-		}
-		return obj;
-	}
-
-	function serialize(e) {
-		if (JSON) {
-			var data = prep(e);
-			return JSON.stringify(data);
-		}
-		else {
-			alert("Crafty does not support saving on your browser. Please upgrade to a newer browser.");
-			return false;
-		}
-	}
-
-	// for saving a game to a central server
-	function external(setUrl) {
-		url = setUrl;
-	}
-
-	function openExternal() {
-		if (1 && typeof url == "undefined") return;
-		// get the timestamps for external saves and compare them to local
-		// if the external is newer, load it
-
-		var xml = new XMLHttpRequest();
-		xhr.open("POST", url);
-		xhr.onreadystatechange = function (evt) {
-			if (xhr.readyState == 4) {
-				if (xhr.status == 200) {
-					var data = eval("(" + xhr.responseText + ")");
-					for (var i in data) {
-						if (Crafty.storage.check(data[i].key, data[i].timestamp)) {
-							loadExternal(data[i].key);
-						}
-					}
-				}
-			}
-		}
-		xhr.send("mode=timestamps&game=" + gameName);
-	}
-
-	function saveExternal(key, data, ts) {
-		if (1 && typeof url == "undefined") return;
-		var xhr = new XMLHttpRequest();
-		xhr.open("POST", url);
-		xhr.send("mode=save&key=" + key + "&data=" + encodeURIComponent(data) + "&ts=" + ts + "&game=" + gameName);
-	}
-
-	function loadExternal(key) {
-		if (1 && typeof url == "undefined") return;
-		var xhr = new XMLHttpRequest();
-		xhr.open("POST", url);
-		xhr.onreadystatechange = function (evt) {
-			if (xhr.readyState == 4) {
-				if (xhr.status == 200) {
-					var data = eval("(" + xhr.responseText + ")");
-					Crafty.storage.save(key, 'save', data);
-				}
-			}
-		}
-		xhr.send("mode=load&key=" + key + "&game=" + gameName);
-	}
-
-	/**
-	 * get timestamp
-	 */
-	function ts() {
-		var d = new Date();
-		return d.getTime();
-	}
-
-	// everyone names their object different. Fix that nonsense.
-	if (typeof indexedDB != 'object') {
-		window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
-		window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
-		window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
-		
-		/* Numeric constants for transaction type are deprecated
-		 * Ensure that the script will work consistenly for recent and legacy browser versions
-		 */
-		if (typeof IDBTransaction == 'object') {
-			transactionType.READ = IDBTransaction.READ || IDBTransaction.readonly || transactionType.READ || 'read';
-			transactionType.READ_WRITE = IDBTransaction.READ_WRITE || IDBTransaction.readwrite || transactionType.READ_WRITE || 'readwrite';
-		}
-	}
-
-	if (typeof indexedDB == 'object') {
-
-		return {
-			open: function (gameName_n) {
-				gameName = gameName_n;
-				var stores = [];
-
-				if (arguments.length == 1) {
-					stores.push('save');
-					stores.push('cache');
-				}
-				else {
-					stores = arguments;
-					stores.shift();
-					stores.push('save');
-					stores.push('cache');
-				}
-				if (db == null) {
-					var request = indexedDB.open(gameName);
-					request.onsuccess = function (e) {
-						db = e.target.result;
-						getTimestamps();
-						openExternal();
-					};
-					request.onupgradeneeded = function (e) {
-						createStores();
-					};
-				}
-				else {
-					createStores();
-					getTimestamps();
-					openExternal();
-				}
-
-				// get all the timestamps for existing keys
-				function getTimestamps() {
-					try {
-						var trans = db.transaction(['save'], "read"),
-						store = trans.objectStore('save'),
-						request = store.getAll();
-						request.onsuccess = function (e) {
-							var i = 0, a = event.target.result, l = a.length;
-							for (; i < l; i++) {
-								timestamps[a[i].key] = a[i].timestamp;
-							}
-						};
-					}
-					catch (e) {
-					}
-				}
-
-				function createStores() {
-					var request = db.setVersion("1.0");
-					request.onsuccess = function (e) {
-						for (var i = 0; i < stores.length; i++) {
-							var st = stores[i];
-							if (db.objectStoreNames.contains(st)) continue;
-							var store = db.createObjectStore(st, { keyPath: "key" });
-						}
-					};
-				}
-			},
-
-			save: function (key, type, data, callback) {
-				if (db == null) {
-					setTimeout(function () { Crafty.storage.save(key, type, data); }, 1);
-					return;
-				}
-
-				var str = serialize(data), t = ts();
-				if (type == 'save')	saveExternal(key, str, t);
-				try {
-					var request = db.transaction([type], transactionType.READ_WRITE).objectStore(type).add({
-						"data": str,
-						"timestamp": t,
-						"key": key
-					});
-					if (typeof callback == 'function') {
-						request.onsuccess = callback;
-					}
-				}
-				catch (e) {
-					console.error(e);
-				}
-			},
-
-			load: function (key, type, callback) {
-				if (db == null) {
-					setTimeout(function () { Crafty.storage.load(key, type, callback); }, 1);
-					return;
-				}
-				try {
-					var request = db.transaction([type], transactionType.READ).objectStore(type).get(key);
-					request.onsuccess = function (e) {
-						callback(unserialize(e.target.result.data));
-					};
-				}
-				catch (e) {
-					console.error(e);
-				}
-			},
-
-			getAllKeys: function (type, callback) {
-				if (db == null) {
-					setTimeout(function () { Crafty.storage.getAllkeys(type, callback); }, 1);
-				}
-				try {
-					var request = db.transaction([type], transactionType.READ).objectStore(type).openCursor(),
-						res = [];
-					request.onsuccess = function (e) {
-						var cursor = e.target.result;
-						if (cursor) {
-							res.push(cursor.key);
-							// 'continue' is a reserved word, so .continue() causes IE8 to completely bark with "SCRIPT1010: Expected identifier".
-							cursor['continue']();
-						}
-						else {
-							callback(res);
-						}
-					};
-				}
-				catch (e) {
-					console.error(e);
-				}
-			},
-
-			check: function (key, timestamp) {
-				return (timestamps[key] > timestamp);
-			},
-
-			external: external
-		};
-	}
-	else if (typeof openDatabase == 'function') {
-		return {
-			open: function (gameName_n) {
-				gameName = gameName_n;
-				if (arguments.length == 1) {
-					db = {
-						save: openDatabase(gameName_n + '_save', '1.0', 'Saves games for ' + gameName_n, 5 * 1024 * 1024),
-						cache: openDatabase(gameName_n + '_cache', '1.0', 'Cache for ' + gameName_n, 5 * 1024 * 1024)
-					}
-				}
-				else {
-					// allows for any other types that can be thought of
-					var args = arguments, i = 0;
-					args.shift();
-					for (; i < args.length; i++) {
-						if (typeof db[args[i]] == 'undefined')
-							db[args[i]] = openDatabase(gameName + '_' + args[i], '1.0', type, 5 * 1024 * 1024);
-					}
-				}
-
-				db['save'].transaction(function (tx) {
-					tx.executeSql('SELECT key, timestamp FROM data', [], function (tx, res) {
-						var i = 0, a = res.rows, l = a.length;
-						for (; i < l; i++) {
-							timestamps[a.item(i).key] = a.item(i).timestamp;
-						}
-					});
-				});
-			},
-
-			save: function (key, type, data) {
-				if (typeof db[type] == 'undefined' && gameName != '') {
-					this.open(gameName, type);
-				}
-
-				var str = serialize(data), t = ts();
-				if (type == 'save')	saveExternal(key, str, t);
-				db[type].transaction(function (tx) {
-					tx.executeSql('CREATE TABLE IF NOT EXISTS data (key unique, text, timestamp)');
-					tx.executeSql('SELECT * FROM data WHERE key = ?', [key], function (tx, results) {
-						if (results.rows.length) {
-							tx.executeSql('UPDATE data SET text = ?, timestamp = ? WHERE key = ?', [str, t, key]);
-						}
-						else {
-							tx.executeSql('INSERT INTO data VALUES (?, ?, ?)', [key, str, t]);
-						}
-					});
-				});
-			},
-
-			load: function (key, type, callback) {
-				if (db[type] == null) {
-					setTimeout(function () { Crafty.storage.load(key, type, callback); }, 1);
-					return;
-				}
-				db[type].transaction(function (tx) {
-					tx.executeSql('SELECT text FROM data WHERE key = ?', [key], function (tx, results) {
-						if (results.rows.length) {
-							res = unserialize(results.rows.item(0).text);
-							callback(res);
-						}
-					});
-				});
-			},
-
-			getAllKeys: function (type, callback) {
-				if (db[type] == null) {
-					setTimeout(function () { Crafty.storage.getAllKeys(type, callback); }, 1);
-					return;
-				}
-				db[type].transaction(function (tx) {
-					tx.executeSql('SELECT key FROM data', [], function (tx, results) {
-						callback(results.rows);
-					});
-				});
-			},
-
-			check: function (key, timestamp) {
-				return (timestamps[key] > timestamp);
-			},
-
-			external: external
-		};
-	}
-	else if (typeof window.localStorage == 'object') {
-		return {
-			open: function (gameName_n) {
-				gameName = gameName_n;
-			},
-
-			save: function (key, type, data) {
-				var k = gameName + '.' + type + '.' + key,
-					str = serialize(data),
-					t = ts();
-				if (type == 'save')	saveExternal(key, str, t);
-				window.localStorage[k] = str;
-				if (type == 'save')
-					window.localStorage[k + '.ts'] = t;
-			},
-
-			load: function (key, type, callback) {
-				var k = gameName + '.' + type + '.' + key,
-					str = window.localStorage[k];
-
-				callback(unserialize(str));
-			},
-
-			getAllKeys: function (type, callback) {
-				var res = {}, output = [], header = gameName + '.' + type;
-				for (var i in window.localStorage) {
-					if (i.indexOf(header) != -1) {
-						var key = i.replace(header, '').replace('.ts', '');
-						res[key] = true;
-					}
-				}
-				for (i in res) {
-					output.push(i);
-				}
-				callback(output);
-			},
-
-			check: function (key, timestamp) {
-				var ts = window.localStorage[gameName + '.save.' + key + '.ts'];
-
-				return (parseInt(timestamp) > parseInt(ts));
-			},
-
-			external: external
-		};
-	}
-	else {
-		// default fallback to cookies
-		return {
-			open: function (gameName_n) {
-				gameName = gameName_n;
-			},
-
-			save: function (key, type, data) {
-				// cookies are very limited in space. we can only keep saves there
-				if (type != 'save') return;
-				var str = serialize(data), t = ts();
-				if (type == 'save')	saveExternal(key, str, t);
-				document.cookie = gameName + '_' + key + '=' + str + '; ' + gameName + '_' + key + '_ts=' + t + '; expires=Thur, 31 Dec 2099 23:59:59 UTC; path=/';
-			},
-
-			load: function (key, type, callback) {
-				if (type != 'save') return;
-				var reg = new RegExp(gameName + '_' + key + '=[^;]*'),
-					result = reg.exec(document.cookie),
-					data = unserialize(result[0].replace(gameName + '_' + key + '=', ''));
-
-				callback(data);
-			},
-
-			getAllKeys: function (type, callback) {
-				if (type != 'save') return;
-				var reg = new RegExp(gameName + '_[^_=]', 'g'),
-					matches = reg.exec(document.cookie),
-					i = 0, l = matches.length, res = {}, output = [];
-				for (; i < l; i++) {
-					var key = matches[i].replace(gameName + '_', '');
-					res[key] = true;
-				}
-				for (i in res) {
-					output.push(i);
-				}
-				callback(output);
-			},
-
-			check: function (key, timestamp) {
-				var header = gameName + '_' + key + '_ts',
-					reg = new RegExp(header + '=[^;]'),
-					result = reg.exec(document.cookie),
-					ts = result[0].replace(header + '=', '');
-
-				return (parseInt(timestamp) > parseInt(ts));
-			},
-
-			external: external
-		};
-	}
-	/* template
+    var db = null,
+        url, gameName, timestamps = {},
+        transactionType = {
+            READ: "readonly",
+            READ_WRITE: "readwrite"
+        };
+
+    /*
+     * Processes a retrieved object.
+     * Creates an entity if it is one
+     */
+
+    function process(obj) {
+        if (obj.c) {
+            var d = Crafty.e(obj.c)
+                .attr(obj.attr)
+                .trigger('LoadData', obj, process);
+            return d;
+        } else if (typeof obj == 'object') {
+            for (var prop in obj) {
+                obj[prop] = process(obj[prop]);
+            }
+        }
+        return obj;
+    }
+
+    function unserialize(str) {
+        if (typeof str != 'string') return null;
+        var data = (JSON ? JSON.parse(str) : eval('(' + str + ')'));
+        return process(data);
+    }
+
+    /* recursive function
+     * searches for entities in an object and processes them for serialization
+     */
+
+    function prep(obj) {
+        if (obj.__c) {
+            // object is entity
+            var data = {
+                c: [],
+                attr: {}
+            };
+            obj.trigger("SaveData", data, prep);
+            for (var i in obj.__c) {
+                data.c.push(i);
+            }
+            data.c = data.c.join(', ');
+            obj = data;
+        } else if (typeof obj == 'object') {
+            // recurse and look for entities
+            for (var prop in obj) {
+                obj[prop] = prep(obj[prop]);
+            }
+        }
+        return obj;
+    }
+
+    function serialize(e) {
+        if (JSON) {
+            var data = prep(e);
+            return JSON.stringify(data);
+        } else {
+            alert("Crafty does not support saving on your browser. Please upgrade to a newer browser.");
+            return false;
+        }
+    }
+
+    // for saving a game to a central server
+
+    function external(setUrl) {
+        url = setUrl;
+    }
+
+    function openExternal() {
+        if (1 && typeof url == "undefined") return;
+        // get the timestamps for external saves and compare them to local
+        // if the external is newer, load it
+
+        var xml = new XMLHttpRequest();
+        xhr.open("POST", url);
+        xhr.onreadystatechange = function (evt) {
+            if (xhr.readyState == 4) {
+                if (xhr.status == 200) {
+                    var data = eval("(" + xhr.responseText + ")");
+                    for (var i in data) {
+                        if (Crafty.storage.check(data[i].key, data[i].timestamp)) {
+                            loadExternal(data[i].key);
+                        }
+                    }
+                }
+            }
+        };
+        xhr.send("mode=timestamps&game=" + gameName);
+    }
+
+    function saveExternal(key, data, ts) {
+        if (1 && typeof url == "undefined") return;
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", url);
+        xhr.send("mode=save&key=" + key + "&data=" + encodeURIComponent(data) + "&ts=" + ts + "&game=" + gameName);
+    }
+
+    function loadExternal(key) {
+        if (1 && typeof url == "undefined") return;
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", url);
+        xhr.onreadystatechange = function (evt) {
+            if (xhr.readyState == 4) {
+                if (xhr.status == 200) {
+                    var data = eval("(" + xhr.responseText + ")");
+                    Crafty.storage.save(key, 'save', data);
+                }
+            }
+        };
+        xhr.send("mode=load&key=" + key + "&game=" + gameName);
+    }
+
+    /**
+     * get timestamp
+     */
+
+    function ts() {
+        var d = new Date();
+        return d.getTime();
+    }
+
+    // everyone names their object different. Fix that nonsense.
+    if (typeof indexedDB != 'object') {
+        window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+        window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
+        window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+
+        /* Numeric constants for transaction type are deprecated
+         * Ensure that the script will work consistenly for recent and legacy browser versions
+         */
+        if (typeof IDBTransaction == 'object') {
+            transactionType.READ = IDBTransaction.READ || IDBTransaction.readonly || transactionType.READ || 'read';
+            transactionType.READ_WRITE = IDBTransaction.READ_WRITE || IDBTransaction.readwrite || transactionType.READ_WRITE || 'readwrite';
+        }
+    }
+
+    if (typeof indexedDB == 'object') {
+
+        return {
+            open: function (gameName_n) {
+                gameName = gameName_n;
+                var stores = [];
+
+                if (arguments.length == 1) {
+                    stores.push('save');
+                    stores.push('cache');
+                } else {
+                    stores = arguments;
+                    stores.shift();
+                    stores.push('save');
+                    stores.push('cache');
+                }
+                if (db === null) {
+                    var request = indexedDB.open(gameName);
+                    request.onsuccess = function (e) {
+                        db = e.target.result;
+                        getTimestamps();
+                        openExternal();
+                    };
+                    request.onupgradeneeded = function (e) {
+                        createStores();
+                    };
+                } else {
+                    createStores();
+                    getTimestamps();
+                    openExternal();
+                }
+
+                // get all the timestamps for existing keys
+
+                function getTimestamps() {
+                    try {
+                        var trans = db.transaction(['save'], "read"),
+                            store = trans.objectStore('save'),
+                            request = store.getAll();
+                        request.onsuccess = function (e) {
+                            var i = 0,
+                                a = event.target.result,
+                                l = a.length;
+                            for (; i < l; i++) {
+                                timestamps[a[i].key] = a[i].timestamp;
+                            }
+                        };
+                    } catch (e) {}
+                }
+
+                function createStores() {
+                    var request = db.setVersion("1.0");
+                    request.onsuccess = function (e) {
+                        for (var i = 0; i < stores.length; i++) {
+                            var st = stores[i];
+                            if (db.objectStoreNames.contains(st)) continue;
+                            var store = db.createObjectStore(st, {
+                                keyPath: "key"
+                            });
+                        }
+                    };
+                }
+            },
+
+            save: function (key, type, data, callback) {
+                if (db === null) {
+                    setTimeout(function () {
+                        Crafty.storage.save(key, type, data);
+                    }, 1);
+                    return;
+                }
+
+                var str = serialize(data),
+                    t = ts();
+                if (type == 'save') saveExternal(key, str, t);
+                try {
+                    var request = db.transaction([type], transactionType.READ_WRITE).objectStore(type).add({
+                        "data": str,
+                        "timestamp": t,
+                        "key": key
+                    });
+                    if (typeof callback == 'function') {
+                        request.onsuccess = callback;
+                    }
+                } catch (e) {
+                    console.error(e);
+                }
+            },
+
+            load: function (key, type, callback) {
+                if (db === null) {
+                    setTimeout(function () {
+                        Crafty.storage.load(key, type, callback);
+                    }, 1);
+                    return;
+                }
+                try {
+                    var request = db.transaction([type], transactionType.READ).objectStore(type).get(key);
+                    request.onsuccess = function (e) {
+                        callback(unserialize(e.target.result.data));
+                    };
+                } catch (e) {
+                    console.error(e);
+                }
+            },
+
+            getAllKeys: function (type, callback) {
+                if (db === null) {
+                    setTimeout(function () {
+                        Crafty.storage.getAllkeys(type, callback);
+                    }, 1);
+                }
+                try {
+                    var request = db.transaction([type], transactionType.READ).objectStore(type).openCursor(),
+                        res = [];
+                    request.onsuccess = function (e) {
+                        var cursor = e.target.result;
+                        if (cursor) {
+                            res.push(cursor.key);
+                            // 'continue' is a reserved word, so .continue() causes IE8 to completely bark with "SCRIPT1010: Expected identifier".
+                            cursor['continue']();
+                        } else {
+                            callback(res);
+                        }
+                    };
+                } catch (e) {
+                    console.error(e);
+                }
+            },
+
+            check: function (key, timestamp) {
+                return (timestamps[key] > timestamp);
+            },
+
+            external: external
+        };
+    } else if (typeof openDatabase == 'function') {
+        return {
+            open: function (gameName_n) {
+                gameName = gameName_n;
+                if (arguments.length == 1) {
+                    db = {
+                        save: openDatabase(gameName_n + '_save', '1.0', 'Saves games for ' + gameName_n, 5 * 1024 * 1024),
+                        cache: openDatabase(gameName_n + '_cache', '1.0', 'Cache for ' + gameName_n, 5 * 1024 * 1024)
+                    };
+                } else {
+                    // allows for any other types that can be thought of
+                    var args = arguments,
+                        i = 0;
+                    args.shift();
+                    for (; i < args.length; i++) {
+                        if (typeof db[args[i]] == 'undefined')
+                            db[args[i]] = openDatabase(gameName + '_' + args[i], '1.0', type, 5 * 1024 * 1024);
+                    }
+                }
+
+                db.save.transaction(function (tx) {
+                    tx.executeSql('SELECT key, timestamp FROM data', [], function (tx, res) {
+                        var i = 0,
+                            a = res.rows,
+                            l = a.length;
+                        for (; i < l; i++) {
+                            timestamps[a.item(i).key] = a.item(i).timestamp;
+                        }
+                    });
+                });
+            },
+
+            save: function (key, type, data) {
+                if (typeof db[type] == 'undefined' && gameName !== '') {
+                    this.open(gameName, type);
+                }
+
+                var str = serialize(data),
+                    t = ts();
+                if (type == 'save') saveExternal(key, str, t);
+                db[type].transaction(function (tx) {
+                    tx.executeSql('CREATE TABLE IF NOT EXISTS data (key unique, text, timestamp)');
+                    tx.executeSql('SELECT * FROM data WHERE key = ?', [key], function (tx, results) {
+                        if (results.rows.length) {
+                            tx.executeSql('UPDATE data SET text = ?, timestamp = ? WHERE key = ?', [str, t, key]);
+                        } else {
+                            tx.executeSql('INSERT INTO data VALUES (?, ?, ?)', [key, str, t]);
+                        }
+                    });
+                });
+            },
+
+            load: function (key, type, callback) {
+                if (typeof db[type] === 'undefined') {
+                    setTimeout(function () {
+                        Crafty.storage.load(key, type, callback);
+                    }, 1);
+                    return;
+                }
+                db[type].transaction(function (tx) {
+                    tx.executeSql('SELECT text FROM data WHERE key = ?', [key], function (tx, results) {
+                        if (results.rows.length) {
+                            res = unserialize(results.rows.item(0).text);
+                            callback(res);
+                        }
+                    });
+                });
+            },
+
+            getAllKeys: function (type, callback) {
+                if (typeof db[type] === 'undefined') {
+                    setTimeout(function () {
+                        Crafty.storage.getAllKeys(type, callback);
+                    }, 1);
+                    return;
+                }
+                db[type].transaction(function (tx) {
+                    tx.executeSql('SELECT key FROM data', [], function (tx, results) {
+                        callback(results.rows);
+                    });
+                });
+            },
+
+            check: function (key, timestamp) {
+                return (timestamps[key] > timestamp);
+            },
+
+            external: external
+        };
+    } else if (typeof window.localStorage == 'object') {
+        return {
+            open: function (gameName_n) {
+                gameName = gameName_n;
+            },
+
+            save: function (key, type, data) {
+                var k = gameName + '.' + type + '.' + key,
+                    str = serialize(data),
+                    t = ts();
+                if (type == 'save') saveExternal(key, str, t);
+                window.localStorage[k] = str;
+                if (type == 'save')
+                    window.localStorage[k + '.ts'] = t;
+            },
+
+            load: function (key, type, callback) {
+                var k = gameName + '.' + type + '.' + key,
+                    str = window.localStorage[k];
+
+                callback(unserialize(str));
+            },
+
+            getAllKeys: function (type, callback) {
+                var res = {}, output = [],
+                    header = gameName + '.' + type;
+                for (var i in window.localStorage) {
+                    if (i.indexOf(header) != -1) {
+                        var key = i.replace(header, '').replace('.ts', '');
+                        res[key] = true;
+                    }
+                }
+                for (i in res) {
+                    output.push(i);
+                }
+                callback(output);
+            },
+
+            check: function (key, timestamp) {
+                var ts = window.localStorage[gameName + '.save.' + key + '.ts'];
+
+                return (parseInt(timestamp, 10) > parseInt(ts, 10));
+            },
+
+            external: external
+        };
+    } else {
+        // default fallback to cookies
+        return {
+            open: function (gameName_n) {
+                gameName = gameName_n;
+            },
+
+            save: function (key, type, data) {
+                // cookies are very limited in space. we can only keep saves there
+                if (type != 'save') return;
+                var str = serialize(data),
+                    t = ts();
+                if (type == 'save') saveExternal(key, str, t);
+                document.cookie = gameName + '_' + key + '=' + str + '; ' + gameName + '_' + key + '_ts=' + t + '; expires=Thur, 31 Dec 2099 23:59:59 UTC; path=/';
+            },
+
+            load: function (key, type, callback) {
+                if (type != 'save') return;
+                var reg = new RegExp(gameName + '_' + key + '=[^;]*'),
+                    result = reg.exec(document.cookie),
+                    data = unserialize(result[0].replace(gameName + '_' + key + '=', ''));
+
+                callback(data);
+            },
+
+            getAllKeys: function (type, callback) {
+                if (type != 'save') return;
+                var reg = new RegExp(gameName + '_[^_=]', 'g'),
+                    matches = reg.exec(document.cookie),
+                    i = 0,
+                    l = matches.length,
+                    res = {}, output = [];
+                for (; i < l; i++) {
+                    var key = matches[i].replace(gameName + '_', '');
+                    res[key] = true;
+                }
+                for (i in res) {
+                    output.push(i);
+                }
+                callback(output);
+            },
+
+            check: function (key, timestamp) {
+                var header = gameName + '_' + key + '_ts',
+                    reg = new RegExp(header + '=[^;]'),
+                    result = reg.exec(document.cookie),
+                    ts = result[0].replace(header + '=', '');
+
+                return (parseInt(timestamp, 10) > parseInt(ts, 10));
+            },
+
+            external: external
+        };
+    }
+    /* template
 	return {
 		open: function (gameName) {
 		},
diff --git a/src/text.js b/src/text.js
index a648cf63..89c5540c 100644
--- a/src/text.js
+++ b/src/text.js
@@ -1,199 +1,254 @@
+var Crafty = require('./core.js'),
+    document = window.document;
+
 /**@
-* #Text
-* @category Graphics
-* @trigger Change - when the text is changed
-* @requires Canvas or DOM
-* Component to make a text entity.
-*
-* By default, text will have the style "10px sans-serif".
-* 
-* Note 1: An entity with the text component is just text! If you want to write text
-* inside an image, you need one entity for the text and another entity for the image.
-* More tips for writing text inside an image: (1) Use the z-index (from 2D component)
-* to ensure that the text is on top of the image, not the other way around; (2)
-* use .attach() (from 2D component) to glue the text to the image so they move and
-* rotate together.
-* 
-* Note 2: For DOM (but not canvas) text entities, various font settings (like
-* text-decoration and text-align) can be set using `.css()` (see DOM component). But
-* you cannot use `.css()` to set the properties which are controlled by `.textFont()`
-* or `.textColor()` -- the settings will be ignored.
-*/
+ * #Text
+ * @category Graphics
+ * @trigger Change - when the text is changed
+ * @requires Canvas or DOM
+ * Component to make a text entity.
+ *
+ * By default, text will have the style "10px sans-serif".
+ *
+ * Note 1: An entity with the text component is just text! If you want to write text
+ * inside an image, you need one entity for the text and another entity for the image.
+ * More tips for writing text inside an image: (1) Use the z-index (from 2D component)
+ * to ensure that the text is on top of the image, not the other way around; (2)
+ * use .attach() (from 2D component) to glue the text to the image so they move and
+ * rotate together.
+ *
+ * Note 2: For DOM (but not canvas) text entities, various font settings (like
+ * text-decoration and text-align) can be set using `.css()` (see DOM component). But
+ * you cannot use `.css()` to set the properties which are controlled by `.textFont()`
+ * or `.textColor()` -- the settings will be ignored.
+ *
+ * Note 3: If you use canvas text with glyphs that are taller than standard letters, portions of the glyphs might be cut off.
+ */
 Crafty.c("Text", {
-	_text: "",
-	defaultSize: "10px",
-	defaultFamily: "sans-serif",
-	ready: true,
-
-	init: function () {
-		this.requires("2D");
-		this._textFont = {
-			"type": "",
-			"weight": "",
-			"size": "",
-			"family": ""
-		};
-
-		this.bind("Draw", function (e) {
-			var font = this._textFont["type"] + ' ' + this._textFont["weight"] + ' '
-			 	+ (this._textFont["size"] || this.defaultSize) + ' ' 
-				+ (this._textFont["family"] || this.defaultFamily);
-
-			if (e.type === "DOM") {
-				var el = this._element,
-					style = el.style;
-
-				style.color = this._textColor;
-				style.font = font;
-				el.innerHTML = this._text;
-			} else if (e.type === "canvas") {
-				var context = e.ctx,
-                    metrics = null;
-
-				context.save();
-
-				context.fillStyle = this._textColor || "rgb(0,0,0)";
-				context.font = font;
-
-				context.translate(this.x, this.y + this.h);
-				context.fillText(this._text, 0, 0);
-
-				metrics = context.measureText(this._text);
-				this._w = metrics.width;
-
-				context.restore();
-			}
-		});
-	},
-
-	/**@
-    * #.text
-    * @comp Text
-    * @sign public this .text(String text)
-    * @sign public this .text(Function textgenerator)
-    * @param text - String of text that will be inserted into the DOM or Canvas element.
-    * 
-    * This method will update the text inside the entity.
-    *
-    * If you need to reference attributes on the entity itself you can pass a function instead of a string.
-    * 
-    * @example
-    * ~~~
-    * Crafty.e("2D, DOM, Text").attr({ x: 100, y: 100 }).text("Look at me!!");
-    *
-    * Crafty.e("2D, DOM, Text").attr({ x: 100, y: 100 })
-    *     .text(function () { return "My position is " + this._x });
-    *
-    * Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 }).text("Look at me!!");
-    *
-    * Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 })
-    *     .text(function () { return "My position is " + this._x });
-    * ~~~
-    */
-	text: function (text) {
-		if (!(typeof text !== "undefined" && text !== null)) return this._text;
-		if (typeof(text) == "function")
-			this._text = text.call(this);
-		else
-			this._text = text;
-		this.trigger("Change");
-		return this;
-	},
-
-	/**@
-    * #.textColor
-    * @comp Text
-    * @sign public this .textColor(String color, Number strength)
-    * @param color - The color in hexadecimal
-    * @param strength - Level of opacity
-    *
-    * Modify the text color and level of opacity.
-    * 
-    * @example
-    * ~~~
-    * Crafty.e("2D, DOM, Text").attr({ x: 100, y: 100 }).text("Look at me!!")
-    *   .textColor('#FF0000');
-    *
-    * Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 }).text('Look at me!!')
-    *   .textColor('#FF0000', 0.6);
-    * ~~~
-    * @see Crafty.toRGB
-    */
-	textColor: function (color, strength) {
-		this._strength = strength;
-		this._textColor = Crafty.toRGB(color, this._strength);
-		this.trigger("Change");
-		return this;
-	},
-
-	/**@
-    * #.textFont
-    * @comp Text
-    * @triggers Change
-    * @sign public this .textFont(String key, * value)
-    * @param key - Property of the entity to modify
-    * @param value - Value to set the property to
-    *
-    * @sign public this .textFont(Object map)
-    * @param map - Object where the key is the property to modify and the value as the property value
-    *
-    * Use this method to set font property of the text entity.
-    * 
-    * @example
-    * ~~~
-    * Crafty.e("2D, DOM, Text").textFont({ type: 'italic', family: 'Arial' });
-    * Crafty.e("2D, Canvas, Text").textFont({ size: '20px', weight: 'bold' });
-    *
-    * Crafty.e("2D, Canvas, Text").textFont("type", "italic");
-    * Crafty.e("2D, Canvas, Text").textFont("type"); // italic
-    * ~~~
-    */
-	textFont: function (key, value) {
-		if (arguments.length === 1) {
-			//if just the key, return the value
-			if (typeof key === "string") {
-				return this._textFont[key];
-			}
-
-			if (typeof key === "object") {
-				for (propertyKey in key) {
-					this._textFont[propertyKey] = key[propertyKey];
-				}
-			}
-		} else {
-			this._textFont[key] = value;
-		}
-
-		this.trigger("Change");
-		return this;
-	},
-	/**@
-    * #.unselectable
-    * @comp Text
-    * @triggers Change
-    * @sign public this .unselectable()
-    *
-    * This method sets the text so that it cannot be selected (highlighted) by dragging.
-    * (Canvas text can never be highlighted, so this only matters for DOM text.)
-    * Works by changing the css property "user-select" and its variants.
-    * 
-    * @example
-    * ~~~
-    * Crafty.e("2D, DOM, Text").text('This text cannot be highlighted!').unselectable();
-    * ~~~
-    */
-	unselectable: function () {
-		// http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting
-		if (this.has("DOM")) {
-			this.css({'-webkit-touch-callout': 'none',
-				'-webkit-user-select': 'none',
-				'-khtml-user-select': 'none',
-				'-moz-user-select': 'none',
-				'-ms-user-select': 'none',
-				'user-select': 'none'});
-			this.trigger("Change");
-		}
-		return this;
-	}
-
-});
+    _text: "",
+    defaultSize: "10px",
+    defaultFamily: "sans-serif",
+    ready: true,
+
+    init: function () {
+        this.requires("2D");
+        this._textFont = {
+            "type": "",
+            "weight": "",
+            "size": this.defaultSize,
+            "family": this.defaultFamily
+        };
+
+        this.bind("Draw", function (e) {
+            var font = this._fontString();
+
+            if (e.type === "DOM") {
+                var el = this._element,
+                    style = el.style;
+
+                style.color = this._textColor;
+                style.font = font;
+                el.innerHTML = this._text;
+            } else if (e.type === "canvas") {
+                var context = e.ctx;
+
+                context.save();
+
+                context.textBaseline = "top";
+                context.fillStyle = this._textColor || "rgb(0,0,0)";
+                context.font = font;
+
+                context.fillText(this._text, this._x, this._y);
+
+                context.restore();
+            }
+        });
+    },
+
+    // takes a CSS font-size string and gets the height of the resulting font in px
+    _getFontHeight: (function(){
+        // regex for grabbing the first string of letters
+        var re = /([a-zA-Z]+)\b/;
+        // From the CSS spec.  "em" and "ex" are undefined on a canvas.
+        var multipliers = {
+            "px": 1,
+            "pt": 4/3,
+            "pc": 16,
+            "cm": 96/2.54,
+            "mm": 96/25.4,
+            "in": 96,
+            "em": undefined, 
+            "ex": undefined
+        };
+        return function (font){
+            var number = parseFloat(font);  
+            var match = re.exec(font);
+            var unit =  match ? match[1] : "px";
+            if (multipliers[unit] !== undefined)
+                return Math.ceil(number * multipliers[unit]);
+            else
+                return Math.ceil(number);
+        };
+    })(),
+
+    /**@
+     * #.text
+     * @comp Text
+     * @sign public this .text(String text)
+     * @sign public this .text(Function textgenerator)
+     * @param text - String of text that will be inserted into the DOM or Canvas element.
+     *
+     * This method will update the text inside the entity.
+     *
+     * If you need to reference attributes on the entity itself you can pass a function instead of a string.
+     *
+     * @example
+     * ~~~
+     * Crafty.e("2D, DOM, Text").attr({ x: 100, y: 100 }).text("Look at me!!");
+     *
+     * Crafty.e("2D, DOM, Text").attr({ x: 100, y: 100 })
+     *     .text(function () { return "My position is " + this._x });
+     *
+     * Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 }).text("Look at me!!");
+     *
+     * Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 })
+     *     .text(function () { return "My position is " + this._x });
+     * ~~~
+     */
+    text: function (text) {
+        if (!(typeof text !== "undefined" && text !== null)) return this._text;
+        if (typeof (text) == "function")
+            this._text = text.call(this);
+        else
+            this._text = text;
+
+        if (this.has("Canvas") )
+            this._resizeForCanvas();
+
+        this.trigger("Change");
+        return this;
+    },
+
+    // Calculates the height and width of text on the canvas
+    // Width is found by using the canvas measureText function
+    // Height is only estimated -- it calculates the font size in pixels, and sets the height to 110% of that.
+    _resizeForCanvas: function(){
+        var ctx = Crafty.canvas.context;
+        ctx.font = this._fontString();
+        this.w = ctx.measureText(this._text).width;
+
+        var size = (this._textFont.size || this.defaultSize);
+        this.h = 1.1 * this._getFontHeight(size);
+    },
+
+    // Returns the font string to use
+    _fontString: function(){
+        return this._textFont.type + ' ' + this._textFont.weight + ' ' + this._textFont.size  + ' ' + this._textFont.family;
+    },
+
+    /**@
+     * #.textColor
+     * @comp Text
+     * @sign public this .textColor(String color, Number strength)
+     * @param color - The color in hexadecimal
+     * @param strength - Level of opacity
+     *
+     * Modify the text color and level of opacity.
+     *
+     * @example
+     * ~~~
+     * Crafty.e("2D, DOM, Text").attr({ x: 100, y: 100 }).text("Look at me!!")
+     *   .textColor('#FF0000');
+     *
+     * Crafty.e("2D, Canvas, Text").attr({ x: 100, y: 100 }).text('Look at me!!')
+     *   .textColor('#FF0000', 0.6);
+     * ~~~
+     * @see Crafty.toRGB
+     */
+    textColor: function (color, strength) {
+        this._strength = strength;
+        this._textColor = Crafty.toRGB(color, this._strength);
+        this.trigger("Change");
+        return this;
+    },
+
+    /**@
+     * #.textFont
+     * @comp Text
+     * @triggers Change
+     * @sign public this .textFont(String key, * value)
+     * @param key - Property of the entity to modify
+     * @param value - Value to set the property to
+     *
+     * @sign public this .textFont(Object map)
+     * @param map - Object where the key is the property to modify and the value as the property value
+     *
+     * Use this method to set font property of the text entity.
+     *
+     * @example
+     * ~~~
+     * Crafty.e("2D, DOM, Text").textFont({ type: 'italic', family: 'Arial' });
+     * Crafty.e("2D, Canvas, Text").textFont({ size: '20px', weight: 'bold' });
+     *
+     * Crafty.e("2D, Canvas, Text").textFont("type", "italic");
+     * Crafty.e("2D, Canvas, Text").textFont("type"); // italic
+     * ~~~
+     */
+    textFont: function (key, value) {
+        if (arguments.length === 1) {
+            //if just the key, return the value
+            if (typeof key === "string") {
+                return this._textFont[key];
+            }
+
+            if (typeof key === "object") {
+                for (var propertyKey in key) {
+                    if(propertyKey == 'family'){
+                        this._textFont[propertyKey] = "'" + key[propertyKey] + "'";
+                    } else {
+                        this._textFont[propertyKey] = key[propertyKey]; 
+                    }
+                }
+            }
+        } else {
+            this._textFont[key] = value;
+        }
+
+        if (this.has("Canvas") )
+            this._resizeForCanvas();
+
+        this.trigger("Change");
+        return this;
+    },
+    /**@
+     * #.unselectable
+     * @comp Text
+     * @triggers Change
+     * @sign public this .unselectable()
+     *
+     * This method sets the text so that it cannot be selected (highlighted) by dragging.
+     * (Canvas text can never be highlighted, so this only matters for DOM text.)
+     * Works by changing the css property "user-select" and its variants.
+     *
+     * @example
+     * ~~~
+     * Crafty.e("2D, DOM, Text").text('This text cannot be highlighted!').unselectable();
+     * ~~~
+     */
+    unselectable: function () {
+        // http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting
+        if (this.has("DOM")) {
+            this.css({
+                '-webkit-touch-callout': 'none',
+                '-webkit-user-select': 'none',
+                '-khtml-user-select': 'none',
+                '-moz-user-select': 'none',
+                '-ms-user-select': 'none',
+                'user-select': 'none'
+            });
+            this.trigger("Change");
+        }
+        return this;
+    }
+
+});
\ No newline at end of file
diff --git a/src/time.js b/src/time.js
index dbfd2791..b4185ee3 100644
--- a/src/time.js
+++ b/src/time.js
@@ -1,79 +1,82 @@
+var Crafty = require('./core.js'),
+    document = window.document;
+
 /**@
-* #Crafty Time
-* @category Utilities
-*/
+ * #Delay
+ * @category Utilities
+ */
 Crafty.c("Delay", {
-	init : function() {
-		this._delays = [];
-		this.bind("EnterFrame", function() {
-			var now = new Date().getTime();
-			var index = this._delays.length;
-			while (--index >= 0) {
-				var item = this._delays[index];
-				if(item.start + item.delay + item.pause < now) {
-					item.func.call(this);
-					if (item.repeat > 0 ) {
-						// reschedule item
-						item.start = now;
-						item.pause = 0;
-						item.pauseBuffer = 0;
-						item.repeat--;
-					} else if (item.repeat <= 0) {
-						// remove item from array
-						this._delays.splice(index,1);
-					}
-				}
-			}
-		});
-		this.bind("Pause", function() {
-			var now = new Date().getTime();
-			for(var index in this._delays) {
-				this._delays[index].pauseBuffer = now;
-			}
-		});
-		this.bind("Unpause", function() {
-			var now = new Date().getTime();
-			for(var index in this._delays) {
-				var item = this._delays[index];
-				item.pause += now-item.pauseBuffer;
-			}
-		});
-	},
-	/**@
-	* #.delay
-	* @comp Crafty Time
-	* @sign public this.delay(Function callback, Number delay)
-	* @param callback - Method to execute after given amount of milliseconds
-	* @param delay - Amount of milliseconds to execute the method
-	* @param repeat - How often to repeat the delayed function. A value of 0 triggers the delayed
-	* function exactly once. A value n > 0 triggers the delayed function exactly n+1 times. A
-	* value of -1 triggers the delayed function indefinitely.
-	* 
-	* The delay method will execute a function after a given amount of time in milliseconds.
-	* 
-	* It is not a wrapper for `setTimeout`.
-	* 
-	* If Crafty is paused, the delay is interrupted with the pause and then resume when unpaused
-	*
-	* If the entity is destroyed, the delay is also destroyed and will not have effect. 
-	*
-	* @example
-	* ~~~
-	* console.log("start");
-	* this.delay(function() {
-		 console.log("100ms later");
-	* }, 100, 0);
-	* ~~~
-	*/
-	delay : function(func, delay, repeat) {
-		this._delays.push({
-			start : new Date().getTime(),
-			func : func,
-			delay : delay,
-			repeat: ( repeat < 0 ? Infinity : repeat) || 0,
-			pauseBuffer: 0,
-			pause: 0
-		});
-		return this;
-	}
-});
+    init: function () {
+        this._delays = [];
+        this.bind("EnterFrame", function () {
+            var now = new Date().getTime();
+            var index = this._delays.length;
+            while (--index >= 0) {
+                var item = this._delays[index];
+                if (item.start + item.delay + item.pause < now) {
+                    item.func.call(this);
+                    if (item.repeat > 0) {
+                        // reschedule item
+                        item.start = now;
+                        item.pause = 0;
+                        item.pauseBuffer = 0;
+                        item.repeat--;
+                    } else if (item.repeat <= 0) {
+                        // remove item from array
+                        this._delays.splice(index, 1);
+                    }
+                }
+            }
+        });
+        this.bind("Pause", function () {
+            var now = new Date().getTime();
+            for (var index in this._delays) {
+                this._delays[index].pauseBuffer = now;
+            }
+        });
+        this.bind("Unpause", function () {
+            var now = new Date().getTime();
+            for (var index in this._delays) {
+                var item = this._delays[index];
+                item.pause += now - item.pauseBuffer;
+            }
+        });
+    },
+    /**@
+     * #.delay
+     * @comp Delay
+     * @sign public this.delay(Function callback, Number delay)
+     * @param callback - Method to execute after given amount of milliseconds
+     * @param delay - Amount of milliseconds to execute the method
+     * @param repeat - How often to repeat the delayed function. A value of 0 triggers the delayed
+     * function exactly once. A value n > 0 triggers the delayed function exactly n+1 times. A
+     * value of -1 triggers the delayed function indefinitely.
+     *
+     * The delay method will execute a function after a given amount of time in milliseconds.
+     *
+     * It is not a wrapper for `setTimeout`.
+     *
+     * If Crafty is paused, the delay is interrupted with the pause and then resume when unpaused
+     *
+     * If the entity is destroyed, the delay is also destroyed and will not have effect.
+     *
+     * @example
+     * ~~~
+     * console.log("start");
+     * Crafty.e("Delay").delay(function() {
+     *   console.log("100ms later");
+     * }, 100, 0);
+     * ~~~
+     */
+    delay: function (func, delay, repeat) {
+        this._delays.push({
+            start: new Date().getTime(),
+            func: func,
+            delay: delay,
+            repeat: (repeat < 0 ? Infinity : repeat) || 0,
+            pauseBuffer: 0,
+            pause: 0
+        });
+        return this;
+    }
+});
\ No newline at end of file
diff --git a/src/version.js b/src/version.js
new file mode 100644
index 00000000..218121bd
--- /dev/null
+++ b/src/version.js
@@ -0,0 +1 @@
+module.exports = "0.6.0";
\ No newline at end of file
diff --git a/src/viewport.js b/src/viewport.js
new file mode 100644
index 00000000..f9446ee1
--- /dev/null
+++ b/src/viewport.js
@@ -0,0 +1,711 @@
+var Crafty = require('./core.js'),
+    document = window.document;
+
+Crafty.extend({
+    /**@
+     * #Crafty.viewport
+     * @category Stage
+     * @trigger ViewportScroll - when the viewport's x or y coordinates change
+     * @trigger ViewportScale - when the viewport's scale changes
+     * @trigger InvalidateViewport - when the viewport changes
+     *
+     * Viewport is essentially a 2D camera looking at the stage. Can be moved which
+     * in turn will react just like a camera moving in that direction.
+     */
+    viewport: {
+        /**@
+         * #Crafty.viewport.clampToEntities
+         * @comp Crafty.viewport
+         *
+         * Decides if the viewport functions should clamp to game entities.
+         * When set to `true` functions such as Crafty.viewport.mouselook() will not allow you to move the
+         * viewport over areas of the game that has no entities.
+         * For development it can be useful to set this to false.
+         */
+        clampToEntities: true,
+        width: 0,
+        height: 0,
+        /**@
+         * #Crafty.viewport.x
+         * @comp Crafty.viewport
+         *
+         * Will move the stage and therefore every visible entity along the `x`
+         * axis in the opposite direction.
+         *
+         * When this value is set, it will shift the entire stage. This means that entity
+         * positions are not exactly where they are on screen. To get the exact position,
+         * simply add `Crafty.viewport.x` onto the entities `x` position.
+         */
+        _x: 0,
+        /**@
+         * #Crafty.viewport.y
+         * @comp Crafty.viewport
+         *
+         * Will move the stage and therefore every visible entity along the `y`
+         * axis in the opposite direction.
+         *
+         * When this value is set, it will shift the entire stage. This means that entity
+         * positions are not exactly where they are on screen. To get the exact position,
+         * simply add `Crafty.viewport.y` onto the entities `y` position.
+         */
+        _y: 0,
+
+        /**@
+         * #Crafty.viewport._scale
+         * @comp Crafty.viewport
+         *
+         * What scale to render the viewport at.  This does not alter the size of the stage itself, but the magnification of what it shows.
+         */
+
+        _scale: 1,
+
+        /**@
+         * #Crafty.viewport.bounds
+         * @comp Crafty.viewport
+         *
+         * A rectangle which defines the bounds of the viewport.
+         * It should be an object with two properties, `max` and `min`, 
+         * which are each an object with `x` and `y` properties.
+         *
+         * If this property is null, Crafty uses the bounding box of all the items
+         * on the stage.  This is the initial value.
+         *
+         * @example
+         * Set the bounds to a 500 by 500 square:
+         *
+         * ~~~
+         * Crafty.viewport.bounds = {min:{x:0, y:0}, max:{x:500, y:500}};
+         * ~~~
+         */
+        bounds: null,
+
+        /**@
+         * #Crafty.viewport.scroll
+         * @comp Crafty.viewport
+         * @sign Crafty.viewport.scroll(String axis, Number v)
+         * @param axis - 'x' or 'y'
+         * @param v - The new absolute position on the axis
+         *
+         * Will move the viewport to the position given on the specified axis
+         *
+         * @example
+         * Will move the camera 500 pixels right of its initial position, in effect
+         * shifting everything in the viewport 500 pixels to the left.
+         *
+         * ~~~
+         * Crafty.viewport.scroll('_x', 500);
+         * ~~~
+         */
+        scroll: function (axis, v) {
+            v = Math.floor(v);
+            this[axis] = v;
+            Crafty.trigger("ViewportScroll");
+            Crafty.trigger("InvalidateViewport");
+        },
+
+        rect: function () {
+            return {
+                _x: -this._x / this._scale,
+                _y: -this._y / this._scale,
+                _w: this.width / this._scale,
+                _h: this.height / this._scale
+            };
+        },
+
+        /**@
+         * #Crafty.viewport.pan
+         * @comp Crafty.viewport
+         * @sign public void Crafty.viewport.pan(String axis, Number v, Number time)
+         * @param String axis - 'x' or 'y'. The axis to move the camera on
+         * @param Number v - the distance to move the camera by
+         * @param Number time - The duration in frames for the entire camera movement
+         *
+         * Pans the camera a given number of pixels over a given number of frames
+         */
+        pan: (function () {
+            var tweens = {}, i, bound = false;
+
+            function enterFrame(e) {
+                var l = 0;
+                for (var i in tweens) {
+                    var prop = tweens[i];
+                    if (prop.remTime > 0) {
+                        prop.current += prop.diff;
+                        prop.remTime--;
+                        Crafty.viewport[i] = Math.floor(prop.current);
+                        l++;
+                    } else {
+                        delete tweens[i];
+                    }
+                }
+                if (l) Crafty.viewport._clamp();
+            }
+
+            return function (axis, v, time) {
+                Crafty.viewport.follow();
+                if (axis == 'reset') {
+                    for (var i in tweens) {
+                        tweens[i].remTime = 0;
+                    }
+                    return;
+                }
+                if (time === 0) time = 1;
+                tweens[axis] = {
+                    diff: -v / time,
+                    current: Crafty.viewport[axis],
+                    remTime: time
+                };
+                if (!bound) {
+                    Crafty.bind("EnterFrame", enterFrame);
+                    bound = true;
+                }
+            };
+        })(),
+
+        /**@
+         * #Crafty.viewport.follow
+         * @comp Crafty.viewport
+         * @sign public void Crafty.viewport.follow(Object target, Number offsetx, Number offsety)
+         * @param Object target - An entity with the 2D component
+         * @param Number offsetx - Follow target should be offsetx pixels away from center
+         * @param Number offsety - Positive puts target to the right of center
+         *
+         * Follows a given entity with the 2D component. If following target will take a portion of
+         * the viewport out of bounds of the world, following will stop until the target moves away.
+         *
+         * @example
+         * ~~~
+         * var ent = Crafty.e('2D, DOM').attr({w: 100, h: 100:});
+         * Crafty.viewport.follow(ent, 0, 0);
+         * ~~~
+         */
+        follow: (function () {
+            var oldTarget, offx, offy;
+
+            function change() {
+                Crafty.viewport.scroll('_x', -(this.x + (this.w / 2) - (Crafty.viewport.width / 2) - offx));
+                Crafty.viewport.scroll('_y', -(this.y + (this.h / 2) - (Crafty.viewport.height / 2) - offy));
+                Crafty.viewport._clamp();
+            }
+
+            return function (target, offsetx, offsety) {
+                if (oldTarget)
+                    oldTarget.unbind('Change', change);
+                if (!target || !target.has('2D'))
+                    return;
+                Crafty.viewport.pan('reset');
+
+                oldTarget = target;
+                offx = (typeof offsetx != 'undefined') ? offsetx : 0;
+                offy = (typeof offsety != 'undefined') ? offsety : 0;
+
+                target.bind('Change', change);
+                change.call(target);
+            };
+        })(),
+
+        /**@
+         * #Crafty.viewport.centerOn
+         * @comp Crafty.viewport
+         * @sign public void Crafty.viewport.centerOn(Object target, Number time)
+         * @param Object target - An entity with the 2D component
+         * @param Number time - The number of frames to perform the centering over
+         *
+         * Centers the viewport on the given entity
+         */
+        centerOn: function (targ, time) {
+            var x = targ.x + Crafty.viewport.x,
+                y = targ.y + Crafty.viewport.y,
+                mid_x = targ.w / 2,
+                mid_y = targ.h / 2,
+                cent_x = Crafty.viewport.width / 2,
+                cent_y = Crafty.viewport.height / 2,
+                new_x = x + mid_x - cent_x,
+                new_y = y + mid_y - cent_y;
+
+            Crafty.viewport.pan('reset');
+            Crafty.viewport.pan('x', new_x, time);
+            Crafty.viewport.pan('y', new_y, time);
+        },
+        /**@
+         * #Crafty.viewport._zoom
+         * @comp Crafty.viewport
+         *
+         * This value keeps an amount of viewport zoom, required for calculating mouse position at entity
+         */
+        _zoom: 1,
+
+        /**@
+         * #Crafty.viewport.zoom
+         * @comp Crafty.viewport
+         * @sign public void Crafty.viewport.zoom(Number amt, Number cent_x, Number cent_y, Number time)
+         * @param Number amt - amount to zoom in on the target by (eg. 2, 4, 0.5)
+         * @param Number cent_x - the center to zoom on
+         * @param Number cent_y - the center to zoom on
+         * @param Number time - the duration in frames of the entire zoom operation
+         *
+         * Zooms the camera in on a given point. amt > 1 will bring the camera closer to the subject
+         * amt < 1 will bring it farther away. amt = 0 will do nothing.
+         * Zooming is multiplicative. To reset the zoom amount, pass 0.
+         */
+        zoom: (function () {
+            var zoom = 1,
+                zoom_tick = 0,
+                dur = 0,
+                prop = Crafty.support.prefix + "Transform",
+                bound = false,
+                act = {},
+                prct = {};
+            // what's going on:
+            // 1. Get the original point as a percentage of the stage
+            // 2. Scale the stage
+            // 3. Get the new size of the stage
+            // 4. Get the absolute position of our point using previous percentage
+            // 4. Offset inner by that much
+
+            function enterFrame() {
+                if (dur > 0) {
+                    if (isFinite(Crafty.viewport._zoom)) zoom = Crafty.viewport._zoom;
+                    var old = {
+                        width: act.width * zoom,
+                        height: act.height * zoom
+                    };
+                    zoom += zoom_tick;
+                    Crafty.viewport._zoom = zoom;
+                    var new_s = {
+                        width: act.width * zoom,
+                        height: act.height * zoom
+                    },
+                        diff = {
+                            width: new_s.width - old.width,
+                            height: new_s.height - old.height
+                        };
+                    Crafty.stage.inner.style[prop] = 'scale(' + zoom + ',' + zoom + ')';
+                    if (Crafty.canvas._canvas) {
+                        var czoom = zoom / (zoom - zoom_tick);
+                        Crafty.canvas.context.scale(czoom, czoom);
+                        Crafty.trigger("InvalidateViewport");
+                    }
+                    Crafty.viewport.x -= diff.width * prct.width;
+                    Crafty.viewport.y -= diff.height * prct.height;
+                    dur--;
+                }
+            }
+
+            return function (amt, cent_x, cent_y, time) {
+                var bounds = this.bounds || Crafty.map.boundaries(),
+                    final_zoom = amt ? zoom * amt : 1;
+                if (!amt) { // we're resetting to defaults
+                    zoom = 1;
+                    this._zoom = 1;
+                }
+
+                act.width = bounds.max.x - bounds.min.x;
+                act.height = bounds.max.y - bounds.min.y;
+
+                prct.width = cent_x / act.width;
+                prct.height = cent_y / act.height;
+
+                if (time === 0) time = 1;
+                zoom_tick = (final_zoom - zoom) / time;
+                dur = time;
+
+                Crafty.viewport.pan('reset');
+                if (!bound) {
+                    Crafty.bind('EnterFrame', enterFrame);
+                    bound = true;
+                }
+            };
+        })(),
+        /**@
+         * #Crafty.viewport.scale
+         * @comp Crafty.viewport
+         * @sign public void Crafty.viewport.scale(Number amt)
+         * @param Number amt - amount to zoom/scale in on the element on the viewport by (eg. 2, 4, 0.5)
+         *
+         * Zooms/scale the camera. amt > 1 increase all entities on stage
+         * amt < 1 will reduce all entities on stage. amt = 0 will reset the zoom/scale.
+         * Zooming/scaling is multiplicative. To reset the zoom/scale amount, pass 0.
+         *
+         * @example
+         * ~~~
+         * Crafty.viewport.scale(2); //to see effect add some entities on stage.
+         * ~~~
+         */
+        scale: (function () {
+            return function (amt) {
+                var bounds = this.bounds || Crafty.map.boundaries(),
+                    final_zoom = amt ? amt : 1;
+
+
+                this._zoom = final_zoom;
+                this._scale = final_zoom;
+                Crafty.trigger("InvalidateViewport");
+                Crafty.trigger("ViewportScale");
+
+            };
+        })(),
+        /**@
+         * #Crafty.viewport.mouselook
+         * @comp Crafty.viewport
+         * @sign public void Crafty.viewport.mouselook(Boolean active)
+         * @param Boolean active - Activate or deactivate mouselook
+         *
+         * Toggle mouselook on the current viewport.
+         * Simply call this function and the user will be able to
+         * drag the viewport around.
+         */
+        mouselook: (function () {
+            var active = false,
+                dragging = false,
+                lastMouse = {};
+            old = {};
+
+
+            return function (op, arg) {
+                if (typeof op == 'boolean') {
+                    active = op;
+                    if (active) {
+                        Crafty.mouseObjs++;
+                    } else {
+                        Crafty.mouseObjs = Math.max(0, Crafty.mouseObjs - 1);
+                    }
+                    return;
+                }
+                if (!active) return;
+                switch (op) {
+                case 'move':
+                case 'drag':
+                    if (!dragging) return;
+                    diff = {
+                        x: arg.clientX - lastMouse.x,
+                        y: arg.clientY - lastMouse.y
+                    };
+
+                    lastMouse.x = arg.clientX;
+                    lastMouse.y = arg.clientY;
+
+                    Crafty.viewport.x += diff.x;
+                    Crafty.viewport.y += diff.y;
+                    Crafty.viewport._clamp();
+                    break;
+                case 'start':
+                    lastMouse.x = arg.clientX;
+                    lastMouse.y = arg.clientY;
+                    dragging = true;
+                    break;
+                case 'stop':
+                    dragging = false;
+                    break;
+                }
+            };
+        })(),
+        _clamp: function () {
+            // clamps the viewport to the viewable area
+            // under no circumstances should the viewport see something outside the boundary of the 'world'
+            if (!this.clampToEntities) return;
+            var bound = this.bounds || Crafty.map.boundaries();
+            bound.max.x *= this._zoom;
+            bound.min.x *= this._zoom;
+            bound.max.y *= this._zoom;
+            bound.min.y *= this._zoom;
+            if (bound.max.x - bound.min.x > Crafty.viewport.width) {
+                bound.max.x -= Crafty.viewport.width;
+
+                if (Crafty.viewport.x < -bound.max.x) {
+                    Crafty.viewport.x = -bound.max.x;
+                } else if (Crafty.viewport.x > -bound.min.x) {
+                    Crafty.viewport.x = -bound.min.x;
+                }
+            } else {
+                Crafty.viewport.x = -1 * (bound.min.x + (bound.max.x - bound.min.x) / 2 - Crafty.viewport.width / 2);
+            }
+            if (bound.max.y - bound.min.y > Crafty.viewport.height) {
+                bound.max.y -= Crafty.viewport.height;
+
+                if (Crafty.viewport.y < -bound.max.y) {
+                    Crafty.viewport.y = -bound.max.y;
+                } else if (Crafty.viewport.y > -bound.min.y) {
+                    Crafty.viewport.y = -bound.min.y;
+                }
+            } else {
+                Crafty.viewport.y = -1 * (bound.min.y + (bound.max.y - bound.min.y) / 2 - Crafty.viewport.height / 2);
+            }
+        },
+
+        /**@
+         * #Crafty.viewport.init
+         * @comp Crafty.viewport
+         * @sign public void Crafty.viewport.init([Number width, Number height, String stage_elem])
+         * @sign public void Crafty.viewport.init([Number width, Number height, HTMLElement stage_elem])
+         * @param Number width - Width of the viewport
+         * @param Number height - Height of the viewport
+         * @param String or HTMLElement stage_elem - the element to use as the stage (either its id or the actual element).
+         *
+         * Initialize the viewport. If the arguments 'width' or 'height' are missing, or Crafty.mobile is true, use Crafty.DOM.window.width and Crafty.DOM.window.height (full screen model).
+         *
+         * The argument 'stage_elem' is used to specify a stage element other than the default, and can be either a string or an HTMLElement.  If a string is provided, it will look for an element with that id and, if none exists, create a div.  If an HTMLElement is provided, that is used directly.  Omitting this argument is the same as passing an id of 'cr-stage'.
+         *
+         * @see Crafty.device, Crafty.DOM, Crafty.stage
+         */
+        init: function (w, h, stage_elem) {
+            Crafty.DOM.window.init();
+
+            //fullscreen if mobile or not specified
+            this.width = (!w || Crafty.mobile) ? Crafty.DOM.window.width : w;
+            this.height = (!h || Crafty.mobile) ? Crafty.DOM.window.height : h;
+
+            //check if stage exists
+            if (typeof stage_elem === 'undefined')
+                stage_elem = "cr-stage";
+
+            var crstage;
+            if (typeof stage_elem === 'string')
+                crstage = document.getElementById(stage_elem);
+            else if (typeof HTMLElement !== "undefined" ? stage_elem instanceof HTMLElement : stage_elem instanceof Element)
+                crstage = stage_elem;
+            else
+                throw new TypeError("stage_elem must be a string or an HTMLElement");
+
+            /**@
+             * #Crafty.stage
+             * @category Core
+             * The stage where all the DOM entities will be placed.
+             */
+
+            /**@
+             * #Crafty.stage.elem
+             * @comp Crafty.stage
+             * The `#cr-stage` div element.
+             */
+
+            /**@
+             * #Crafty.stage.inner
+             * @comp Crafty.stage
+             * `Crafty.stage.inner` is a div inside the `#cr-stage` div that holds all DOM entities.
+             * If you use canvas, a `canvas` element is created at the same level in the dom
+             * as the the `Crafty.stage.inner` div. So the hierarchy in the DOM is
+             *
+             * `Crafty.stage.elem`
+             * 
+             *
+             *     - `Crafty.stage.inner` (a div HTMLElement)
+             *
+             *     - `Crafty.canvas._canvas` (a canvas HTMLElement)
+             */
+
+            //create stage div to contain everything
+            Crafty.stage = {
+                x: 0,
+                y: 0,
+                fullscreen: false,
+                elem: (crstage ? crstage : document.createElement("div")),
+                inner: document.createElement("div")
+            };
+
+            //fullscreen, stop scrollbars
+            if ((!w && !h) || Crafty.mobile) {
+                document.body.style.overflow = "hidden";
+                Crafty.stage.fullscreen = true;
+            }
+
+            Crafty.addEvent(this, window, "resize", Crafty.viewport.reload);
+
+            Crafty.addEvent(this, window, "blur", function () {
+                if (Crafty.settings.get("autoPause")) {
+                    if (!Crafty._paused) Crafty.pause();
+                }
+            });
+            Crafty.addEvent(this, window, "focus", function () {
+                if (Crafty._paused && Crafty.settings.get("autoPause")) {
+                    Crafty.pause();
+                }
+            });
+
+            //make the stage unselectable
+            Crafty.settings.register("stageSelectable", function (v) {
+                Crafty.stage.elem.onselectstart = v ? function () {
+                    return true;
+                } : function () {
+                    return false;
+                };
+            });
+            Crafty.settings.modify("stageSelectable", false);
+
+            //make the stage have no context menu
+            Crafty.settings.register("stageContextMenu", function (v) {
+                Crafty.stage.elem.oncontextmenu = v ? function () {
+                    return true;
+                } : function () {
+                    return false;
+                };
+            });
+            Crafty.settings.modify("stageContextMenu", false);
+
+            Crafty.settings.register("autoPause", function () {});
+            Crafty.settings.modify("autoPause", false);
+
+            //add to the body and give it an ID if not exists
+            if (!crstage) {
+                document.body.appendChild(Crafty.stage.elem);
+                Crafty.stage.elem.id = stage_elem;
+            }
+
+            var elem = Crafty.stage.elem.style,
+                offset;
+
+            Crafty.stage.elem.appendChild(Crafty.stage.inner);
+            Crafty.stage.inner.style.position = "absolute";
+            Crafty.stage.inner.style.zIndex = "1";
+            Crafty.stage.inner.style.transformStyle = "preserve-3d"; // Seems necessary for Firefox to preserve zIndexes?
+
+            //css style
+            elem.width = this.width + "px";
+            elem.height = this.height + "px";
+            elem.overflow = "hidden";
+
+            if (Crafty.mobile) {
+                elem.position = "absolute";
+                elem.left = "0px";
+                elem.top = "0px";
+
+                // remove default gray highlighting after touch
+                if (typeof elem.webkitTapHighlightColor !== undefined) {
+                    elem.webkitTapHighlightColor = "rgba(0,0,0,0)";
+                }
+
+                var meta = document.createElement("meta"),
+                    head = document.getElementsByTagName("HEAD")[0];
+
+                //stop mobile zooming and scrolling
+                meta.setAttribute("name", "viewport");
+                meta.setAttribute("content", "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no");
+                head.appendChild(meta);
+
+                //hide the address bar
+                meta = document.createElement("meta");
+                meta.setAttribute("name", "apple-mobile-web-app-capable");
+                meta.setAttribute("content", "yes");
+                head.appendChild(meta);
+                setTimeout(function () {
+                    window.scrollTo(0, 1);
+                }, 0);
+
+                Crafty.addEvent(this, window, "touchmove", function (e) {
+                    e.preventDefault();
+                });
+
+                Crafty.stage.x = 0;
+                Crafty.stage.y = 0;
+
+            } else {
+                elem.position = "relative";
+                //find out the offset position of the stage
+                offset = Crafty.DOM.inner(Crafty.stage.elem);
+                Crafty.stage.x = offset.x;
+                Crafty.stage.y = offset.y;
+            }
+
+            if (Crafty.support.setter) {
+                //define getters and setters to scroll the viewport
+                this.__defineSetter__('x', function (v) {
+                    this.scroll('_x', v);
+                });
+                this.__defineSetter__('y', function (v) {
+                    this.scroll('_y', v);
+                });
+                this.__defineGetter__('x', function () {
+                    return this._x;
+                });
+                this.__defineGetter__('y', function () {
+                    return this._y;
+                });
+
+                //IE9
+            } else if (Crafty.support.defineProperty) {
+                Object.defineProperty(this, 'x', {
+                    set: function (v) {
+                        this.scroll('_x', v);
+                    },
+                    get: function () {
+                        return this._x;
+                    },
+                    configurable : true
+                });
+                Object.defineProperty(this, 'y', {
+                    set: function (v) {
+                        this.scroll('_y', v);
+                    },
+                    get: function () {
+                        return this._y;
+                    },
+                    configurable : true
+                });
+            } else {
+                // IE8 has no getter/setters -- Check for an update each frame.
+                this.x = this._x;
+                this.y = this._y;
+                Crafty.bind("EnterFrame", function () {
+                    if (Crafty.viewport._x !== Crafty.viewport.x) {
+                        Crafty.viewport.scroll('_x', Crafty.viewport.x);
+                    }
+
+                    if (Crafty.viewport._y !== Crafty.viewport.y) {
+                        Crafty.viewport.scroll('_y', Crafty.viewport.y);
+                    }
+                });
+            }
+        },
+
+        /**@
+         * #Crafty.viewport.reload
+         * @comp Crafty.stage
+         *
+         * @sign public Crafty.viewport.reload()
+         *
+         * Recalculate and reload stage width, height and position.
+         * Useful when browser return wrong results on init (like safari on Ipad2).
+         *
+         */
+        reload: function () {
+            Crafty.DOM.window.init();
+            var w = Crafty.DOM.window.width,
+                h = Crafty.DOM.window.height,
+                offset;
+
+
+            if (Crafty.stage.fullscreen) {
+                this.width = w;
+                this.height = h;
+                Crafty.stage.elem.style.width = w + "px";
+                Crafty.stage.elem.style.height = h + "px";
+
+                if (Crafty.canvas._canvas) {
+                    Crafty.canvas._canvas.width = w;
+                    Crafty.canvas._canvas.height = h;
+                    Crafty.trigger("InvalidateViewport");
+                }
+            }
+
+            offset = Crafty.DOM.inner(Crafty.stage.elem);
+            Crafty.stage.x = offset.x;
+            Crafty.stage.y = offset.y;
+        },
+
+        /**@
+         * #Crafty.viewport.reset
+         * @comp Crafty.stage
+         *
+         * @sign public Crafty.viewport.reset()
+         *
+         * Resets the viewport to starting values
+         * Called when scene() is run.
+         */
+        reset: function () {
+            Crafty.viewport.pan('reset');
+            Crafty.viewport.follow();
+            Crafty.viewport.mouselook('stop');
+            Crafty.viewport.scale();
+        }
+    }
+});
diff --git a/testing/Crafty/Input/Draggable/main_dragDirection.html b/testing/Crafty/Input/Draggable/main_dragDirection.html
deleted file mode 100644
index 1ab94f58..00000000
--- a/testing/Crafty/Input/Draggable/main_dragDirection.html
+++ /dev/null
@@ -1,68 +0,0 @@
-
-
-  
-    
-  
-  
-    
-    
-    
-  
-
diff --git a/testing/Crafty/Input/Draggable/main_dragDirectionCanvas.html b/testing/Crafty/Input/Draggable/main_dragDirectionCanvas.html
deleted file mode 100644
index 69bc19e1..00000000
--- a/testing/Crafty/Input/Draggable/main_dragDirectionCanvas.html
+++ /dev/null
@@ -1,69 +0,0 @@
-
-
-  
-    
-  
-  
-    
-    
-    
-  
-
diff --git a/tests/animation/animation.html b/tests/animation/animation.html
new file mode 100644
index 00000000..f22e5c78
--- /dev/null
+++ b/tests/animation/animation.html
@@ -0,0 +1,47 @@
+
+
+	
+		
+		
+		
+		
+	
+	
+		
            Crafty: Animation
            
+		
            
+		
            
+		
            
+		
              
+		
              test markup, will be hidden
              
+		
              Sprite animation playground:
              
+		
              
+		
+		
              
+			
+			
+			
+			
+			
+			
+			
+		
              
+		
              
+			
+			
+		
              
+		
              
+			
+		
+			
+	
+			
+			
+		
              
+
+	
+
diff --git a/tests/animation/numbers.png b/tests/animation/numbers.png
new file mode 100644
index 00000000..bd55daf0
Binary files /dev/null and b/tests/animation/numbers.png differ
diff --git a/tests/animation/sprite-animation.js b/tests/animation/sprite-animation.js
new file mode 100644
index 00000000..c0c412cc
--- /dev/null
+++ b/tests/animation/sprite-animation.js
@@ -0,0 +1,576 @@
+// Initialize crafty and a sprite component
+Crafty.init(650, 74);
+Crafty.sprite(64, 'numbers.png', { 'numbers': [0, 0] });
+
+// Add an animation to the stage
+spriteAnimation = Crafty.e('2D, DOM, numbers, SpriteAnimation');
+spriteAnimation.attr({ x: 10, y: 10 });
+spriteAnimation.reel('count', 200, 0, 0, 10);	// 10 frames duration
+spriteAnimation.reel('countSlow', 1200, 0, 0, 10);	//60 frames duration
+spriteAnimation.reel('countEven', 100, [[0, 0], [2, 0], [4, 0], [6, 0], [8, 0]]);	// 5 frames
+spriteAnimation.reel('short', 60, 0, 0, 3);	// 3 frames
+
+// We don't want anything to actually run in an uncontrolled manner during tests
+Crafty.pause();
+
+var eventFrames = [];
+spriteAnimation.bind("FrameChange", function(changeData) {
+	eventFrames.push(changeData.currentFrame);
+});
+
+
+
+
+
+
+var finishedAnimations = [];
+spriteAnimation.bind("AnimationEnd", function(endData) {
+	finishedAnimations.push(endData.id);
+});
+
+
+module("Undefined reel");
+
+
+test("Test .getReel() with no active reel", function(){
+	var ret;
+	var newAnimation = Crafty.e("SpriteAnimation");
+	var ret = newAnimation.getReel();
+	equal(ret, null, "The active reel should be null");
+})
+
+test("Test .reel() with no active reel", function() {
+	var ret;
+	var newAnimation = Crafty.e("SpriteAnimation");
+	
+	ret = newAnimation.reel();
+	strictEqual(ret, null, "reel() returns null");
+
+	newAnimation.destroy();
+});
+
+
+test("Test .animate() with no active reel", function() {
+	var newAnimation = Crafty.e("SpriteAnimation");
+	
+	throws(function(){newAnimation.animate()}, /No reel is specified, and there is no currently active reel./, "Throws when calling .animate().")
+	throws(function(){newAnimation.animate(3)}, /No reel is specified, and there is no currently active reel./, "Throws when calling .animate() with loop count.")
+
+	newAnimation.destroy();
+});
+
+
+test("Test .loops() with no active reel", function() {
+	var ret;
+	var newAnimation = Crafty.e("SpriteAnimation");
+
+	ret = newAnimation.loops();
+	equal(ret, 0, "No loops when reel is undefined.");
+	ret = newAnimation.loops(2);
+	equal(ret, newAnimation, "No error when setting loops.");
+
+	newAnimation.destroy();
+});
+
+
+
+test("Test .reelPosition() with no active reel", function() {
+	var newAnimation = Crafty.e("SpriteAnimation");
+
+	throws(function(){newAnimation.reelPosition()}, /No active reel/, "Throws when calling .reelPosition().")
+	throws(function(){newAnimation.reelPosition(0.5)}, /No active reel/, "Throws when calling .reelPosition(0.5).")
+	throws(function(){newAnimation.reelPosition(2)}, /No active reel/, "Throws when calling .reelPosition(2).")
+	throws(function(){newAnimation.reelPosition('end')}, /No active reel/, "Throws when calling .reelPosition('end').")
+
+	newAnimation.destroy();
+});
+
+
+
+test("Test .resumeAnimation() with no active reel", function() {
+	var ret;
+	var newAnimation = Crafty.e("SpriteAnimation");
+
+	ret = newAnimation.resumeAnimation();
+	notEqual(this._isPlaying, true, "Resume animation is a no-op when no reel is defined.")
+	equal(ret, newAnimation, "Resume animation returns self.");
+
+
+	newAnimation.destroy();
+});
+
+
+test("Test .pauseAnimation() with no active reel", function() {
+	var ret;
+	var newAnimation = Crafty.e("SpriteAnimation");
+
+	ret = newAnimation.pauseAnimation();
+	equal(ret, newAnimation, "Pause animation returns self.");
+
+
+	newAnimation.destroy();
+});
+
+test("Test .resetAnimation() with no active reel", function() {
+	var ret;
+	var newAnimation = Crafty.e("SpriteAnimation");
+
+	throws(function(){newAnimation.resetAnimation()}, /No active reel/, "Throws when calling .resetAnimation().")
+
+
+	newAnimation.destroy();
+});
+
+	
+
+
+test("Test .isPlaying() with no active reel", function() {
+	var ret;
+	var newAnimation = Crafty.e("SpriteAnimation");
+
+	ret = newAnimation.isPlaying();
+	strictEqual(ret, false, "isPlaying() returns false.")
+
+	ret = newAnimation.isPlaying("short");
+	strictEqual(ret, false, "isPlaying('short') returns false.")
+
+
+	newAnimation.destroy();
+});
+
+
+
+
+
+
+module("Reels", {
+	setup: function() {
+		spriteAnimation.reel("count").resetAnimation().pauseAnimation();
+		spriteAnimation.reel("countEven").resetAnimation().pauseAnimation();
+		spriteAnimation.reel("short").resetAnimation().pauseAnimation();
+		eventFrames = [];
+		finishedAnimations = [];
+	}
+});
+
+
+
+
+test("Test reel switching functionality", function(){
+	var ret = spriteAnimation.reel("short");
+	equal(ret, spriteAnimation, "Correctly returned self");
+	equal(spriteAnimation._currentReelId, "short", "Correct _currentReelId after switching");
+	equal(spriteAnimation._currentReel.id, "short", "Correct _currentReel.id after switching");
+	var e ="";
+	
+	throws( function(){spriteAnimation.reel("wrong");}, /The specified reel wrong is undefined/,  "Function should throw on bad reel");
+	
+	equal(spriteAnimation._currentReelId, "short", "Correct _currentReelId after attempting to switch to bad reel");
+	
+	
+});
+
+test("Test using reel() with no arguments", function(){
+	spriteAnimation.reel("count");
+	var ret = spriteAnimation.reel();
+	equal(ret, "count", ".reel() returns the current id");
+	
+	// Test setting reel id manually, since that's what reel() should return
+	// Don't ever do this in actual code!
+	spriteAnimation._currentReelId = null;
+	ret = spriteAnimation.reel();
+	strictEqual(ret, null, ".reel() returns the current id after it's set manually");
+	// Reset currentReelId, since we messed it up!
+	spriteAnimation.reel("count");
+
+	
+});
+
+test("Test using .getReel() with no arguments", function(){
+	spriteAnimation.reel("short");
+	var ret = spriteAnimation.getReel();
+	equal(ret.id, spriteAnimation._currentReelId, "getReel returns reel with the correct id");
+});
+
+test("Test using .getReel() to get specific reels", function(){
+	spriteAnimation.reel("short");
+	var ret = spriteAnimation.getReel("count");
+	equal(ret, spriteAnimation._reels['count'], "getReel('count') returns correctly when active reel is 'short'");
+
+	var ret = spriteAnimation.getReel("nonsense");
+	equal(typeof ret, "undefined", "getReel returns undefined when nonexistant reel requested");
+
+})
+
+
+test("Test using .reel to set an animation using start and end values", function(){
+
+	var ret = spriteAnimation.reel('short-test', 3, 0, 0, 3);
+	equal(ret, spriteAnimation, ".reel returned self correctly");
+	spriteAnimation.reel('short-test');
+	var reel = spriteAnimation.getReel('short-test');
+	equal(reel.id, "short-test", "Id of reel is set correctly.");
+	
+	equal(reel.duration, 3, "Reel has correct duration.")
+	equal(reel.currentFrame, 0, "Reel starts with correct currentFrame of 0.");
+	equal(reel.defaultLoops, 1, "Reel starts with correct default number of loops.");
+
+	var frames = reel.frames;
+	equal(frames.length, 3, "Reel has correct number of frames.");
+	deepEqual(frames[0], [0, 0], "First frame is correct.");
+	deepEqual(frames[1], [64, 0], "Second frame is correct.");
+	deepEqual(frames[2], [128, 0], "Third frame is correct.");
+
+})
+
+test("Test using .reel to set an animation using an array of frames", function(){
+	// This should produce the same results as the previous test!
+	var ret = spriteAnimation.reel('short-test-2', 3, [[0, 0], [1, 0], [2, 0]] );
+	equal(ret, spriteAnimation, ".reel returned self correctly");
+	spriteAnimation.reel('short-test-2');
+	var reel = spriteAnimation.getReel('short-test-2');
+	equal(reel.id, "short-test-2", "Id of reel is set correctly.");
+	
+	equal(reel.duration, 3, "Reel has correct duration.")
+	equal(reel.currentFrame, 0, "Reel starts with correct currentFrame of 0.");
+	equal(reel.defaultLoops, 1, "Reel starts with correct default number of loops.");
+
+	var frames = reel.frames;
+	equal(frames.length, 3, "Reel has correct number of frames.");
+	// This relies on the sprite being defined with a size of 64
+	deepEqual(frames[0], [0, 0], "First frame is correct.");
+	deepEqual(frames[1], [64, 0], "Second frame is correct.");
+	deepEqual(frames[2], [128, 0], "Third frame is correct.");
+	
+})
+
+module("Reel state");
+
+test("Set position of current reel by frame.", function(){
+	spriteAnimation.reel("short");
+	var ret = spriteAnimation.reelPosition(1);
+	equal(ret, spriteAnimation, "Correctly returned self.")
+	equal(spriteAnimation._currentReel.currentFrame, 1, "Set to frame of index 1.");
+	spriteAnimation.reelPosition(0);
+	equal(spriteAnimation._currentReel.currentFrame, 0, "Set back to first frame.");
+	spriteAnimation.reelPosition(10);
+	equal(spriteAnimation._currentReel.currentFrame, 2, "Set to frame beyond last index.");
+	spriteAnimation.reelPosition(-1);
+	equal(spriteAnimation._currentReel.currentFrame, 1, "Set to negative frame; 1 before last frame.");
+	spriteAnimation.reelPosition(-10);
+	equal(spriteAnimation._currentReel.currentFrame, 0, "Set to negative frame with magnitude greater than length.");
+});
+
+test("Set position of current reel by progress.", function(){
+	spriteAnimation.reel("short");
+	var ret = spriteAnimation.reelPosition(0.33);
+	equal(ret, spriteAnimation, "Correctly returned self.")
+	equal(spriteAnimation._currentReel.currentFrame, 0, "Set to frame of index 0 at 33%");
+	spriteAnimation.reelPosition(0.34);
+	equal(spriteAnimation._currentReel.currentFrame, 1, "Set to frame of index 1 at 34%");
+	spriteAnimation.reelPosition(0.66);
+	equal(spriteAnimation._currentReel.currentFrame, 1, "Set to frame of index 1 at 66%");
+	spriteAnimation.reelPosition(0.67);
+	equal(spriteAnimation._currentReel.currentFrame, 2, "Set to frame of index 2 at 67%");
+
+	throws( function(){spriteAnimation.reelPosition(1.2);}, /Position .+ invalid/, "Throws an exception when set to 120% completion");
+})
+
+test("Set position of reel to end", function(){
+	spriteAnimation.reel("short");
+	var ret = spriteAnimation.reelPosition("end");
+	equal(ret, spriteAnimation, "Correctly returned self.")
+	equal(spriteAnimation._currentReel.currentFrame, 2, "Set to last frame");
+
+})
+
+test("Get current position of reel", function(){
+	spriteAnimation.reel("short");
+	spriteAnimation.reelPosition("end");
+	var pos = spriteAnimation.reelPosition();
+	equal(pos, 2, "Correctly returned current position at end.")
+	spriteAnimation.reelPosition(0);
+	pos = spriteAnimation.reelPosition();
+	equal(pos, 0, "Correctly returned current position at beginning.")
+
+})
+
+test("Get number of loops left; .loops(void)", function(){
+	spriteAnimation.reel("count");
+	var loopCount = spriteAnimation.loops();
+	equal(loopCount, spriteAnimation._currentReel.easing.loops, "Number of loops matches");
+
+})
+
+test("Set number of loops left; .loops(n)", function(){
+	spriteAnimation.reel("count");
+	var ret = spriteAnimation.loops(10);
+	equal(10, spriteAnimation._currentReel.easing.loops, "Number of loops set to 10");
+	equal(ret, spriteAnimation, "Returned self.");
+	ret = spriteAnimation.loops(-1);
+	equal(Infinity, spriteAnimation._currentReel.easing.loops, "Set to loop forever");
+	equal(ret, spriteAnimation, "Returned self.");
+});
+
+
+
+module("Animation", {
+	setup: function() {
+		spriteAnimation.reel("count").resetAnimation().pauseAnimation();
+		spriteAnimation.reel("countEven").resetAnimation().pauseAnimation();
+		spriteAnimation.reel("short").resetAnimation().pauseAnimation();
+		eventFrames = [];
+		finishedAnimations = [];
+	}
+});
+
+test("Play an animation", function() {
+	// Play for 10 frames, each sprite will show up for one frame
+	var ret = spriteAnimation.animate('count');
+	equal(ret, spriteAnimation, "Returned self correctly.")
+	equal(ret._currentReel.easing.loops, 1, "Set to one loop correctly.")
+	for (var i = 0; i < 10; i++) {
+		var activeReel = spriteAnimation.getReel();
+		equal(activeReel.currentFrame, i, "Frame " + i + " should be displayed");
+		Crafty.timer.simulateFrames(1);
+	}
+});
+
+test("Play an animation defined using an array", function() {
+	// Play for 5 frames, each sprite will show up for one frame
+	spriteAnimation.animate('countEven');
+	for (var i = 0; i < 5; i++) {
+		var activeReel = spriteAnimation.getReel();
+		equal(activeReel.currentFrame, i, "Frame " + i + " should be displayed");
+		Crafty.timer.simulateFrames(1);
+	}
+});
+
+
+test("Play an animation where sprites are displayed for more than one frame", function() {
+	// Play for 60 frames, each sprite will show up for six frames
+	spriteAnimation.animate('countSlow');
+	for (var i = 0; i < 10; i++) {
+		var activeReel = spriteAnimation.getReel();
+		equal(activeReel.currentFrame, i, "Frame " + i + " should be displayed");
+		Crafty.timer.simulateFrames(6);
+	}
+});
+
+test("Show the last frame after an animation ends", function() {
+	spriteAnimation.animate('count');
+	Crafty.timer.simulateFrames(20);
+	var activeReel = spriteAnimation.getReel();
+	equal(activeReel.currentFrame, 9, "Frame 9 should be displayed after the animation ends");
+});
+
+test("Get events for each frame change", function() {
+	spriteAnimation.animate('count');
+	Crafty.timer.simulateFrames(20);
+
+	deepEqual(eventFrames, [1, 2, 3, 4, 5, 6, 7, 8, 9], "Expected events for frames 0 through 9");
+});
+
+test("Get an event when an animation ends", function() {
+	spriteAnimation.animate('count');
+	Crafty.timer.simulateFrames(20);
+
+	deepEqual(finishedAnimations, ['count'], "Should have received an event for the 'count' animation's end");
+});
+
+
+test("Play an animation and then switch to another reel", function(){
+	var countReel = spriteAnimation.getReel("count");
+	var shortReel = spriteAnimation.getReel("short");
+	spriteAnimation.animate('count');
+	equal(spriteAnimation._isPlaying, true, "playing after call to animate.");
+	equal(countReel.easing.paused, false, "easing not paused after call to animate.");
+	spriteAnimation.reel('short');
+	equal(spriteAnimation._isPlaying, false, "not playing after switching reel.");
+	equal(countReel.easing.paused, true, "easing paused after switching reel.");
+
+
+
+})
+
+test("Play an animation with a repeat count", function() {
+	var ret = spriteAnimation.animate('short', 3);
+	equal(ret._currentReel.easing.loops, 3, "Set to 3 loops correctly.")
+	Crafty.timer.simulateFrames(10);
+	equal(ret._currentReel.easing.loops, 0, "0 loops after running.")
+	// No "FrameChange" event for starting frame!
+	deepEqual(eventFrames, [1, 2, 0, 1, 2, 0, 1, 2], "Expected events matching the repeat count");
+	deepEqual(finishedAnimations, ['short'], "Expected a single animation end event");
+});
+
+test("Play an animation with an infinite repeat count", function() {
+	equal(spriteAnimation.getReel('short').currentFrame, 0);
+	spriteAnimation.animate('short', -1);
+	Crafty.timer.simulateFrames(32);
+
+	var expected = [];
+	for (var i = 0; i < 11; i++) {
+		if (i>0)
+			expected.push(0);
+		expected.push(1);
+		expected.push(2);
+	}	
+
+	deepEqual(eventFrames, expected, "Expected events matching the amount of frames that pass");
+	deepEqual(finishedAnimations, [], "Expected no animation to end");
+});
+
+test("Play an animation from a specific frame", function() {
+	spriteAnimation.reel('count').pauseAnimation().reelPosition(5).loops(1);
+	spriteAnimation.resumeAnimation();
+	Crafty.timer.simulateFrames(5);
+
+	deepEqual(eventFrames, [5, 6, 7, 8, 9], "Expected events for frames 5 through 9");
+	deepEqual(finishedAnimations, ['count'], "Expected a single animation end event");
+});
+
+test("Play an animation from a specific frame, with a repeat count", function() {
+	spriteAnimation.reel('count').loops(2).reelPosition(6);
+	spriteAnimation.resumeAnimation();
+	Crafty.timer.simulateFrames(7);
+
+	deepEqual(eventFrames, [6, 7, 8, 9, 0, 1, 2, 3], "Expected events for frames 6 through 9 and then 0 through 3");
+});
+
+test("Pause an animation", function() {
+	spriteAnimation.animate('count');
+	Crafty.timer.simulateFrames(5);
+	var ret = spriteAnimation.pauseAnimation();
+	Crafty.timer.simulateFrames(5);
+
+	deepEqual(eventFrames, [1, 2, 3, 4, 5], "Expected events for frames 1 through 5");
+	equal(ret, spriteAnimation, ".pauseAnimation() returned correct value");
+});
+
+test("Play an animation while another is already playing", function() {
+	spriteAnimation.animate('count');
+	Crafty.timer.simulateFrames(5);
+	spriteAnimation.animate('short');
+	Crafty.timer.simulateFrames(10);
+
+	deepEqual(eventFrames, [1, 2, 3, 4, 5, 1, 2], "Expected events for frames from both animations.");
+	deepEqual(finishedAnimations, ['short'], "Expected end event for the second animation");
+});
+
+test("Pause an animation, then resume it", function() {
+	equal(spriteAnimation.getReel('count').currentFrame, 0);
+	spriteAnimation.animate('count');
+	Crafty.timer.simulateFrames(5);
+	equal(spriteAnimation._currentReel.currentFrame, 5, "Advanced to frame index 5 after 5 frames of animation");
+	spriteAnimation.pauseAnimation();
+	Crafty.timer.simulateFrames(5);
+	equal(spriteAnimation._currentReel.currentFrame, 5, "Didn't advance while paused");
+	var ret = spriteAnimation.resumeAnimation();
+	Crafty.timer.simulateFrames(5);
+	equal(spriteAnimation._currentReel.currentFrame, 9, "Advanced to last frame when resumed");
+	equal(ret, spriteAnimation, ".resumeAnimation() returned correct value");
+
+	deepEqual(eventFrames, [1, 2, 3, 4, 5, 6, 7, 8, 9], "Expected one event for each frame 0 through 9");
+	deepEqual(finishedAnimations, ['count'], "Expected a single animation end event");
+});
+
+test("Reset a paused animation", function(){
+	spriteAnimation.reel("count").reelPosition(5).pauseAnimation();
+	var ret = spriteAnimation.resetAnimation();
+	equal(spriteAnimation.isPlaying(), false, "Does not resume paused animation.")
+	equal(spriteAnimation._currentReel.currentFrame, 0, "Resets to initial frame.")
+	equal(ret, spriteAnimation, "Correctly returns self.")
+});
+
+test("Reset a playing animation", function(){
+	spriteAnimation.reel("count").reelPosition(5).resumeAnimation();
+	var ret = spriteAnimation.resetAnimation();
+	equal(spriteAnimation.isPlaying(), true, "Does not stop playing animation.")
+	equal(spriteAnimation._currentReel.currentFrame, 0, "Resets to initial frame.")
+	equal(ret, spriteAnimation, "Correctly returns self.")
+});
+
+
+
+
+test("Try to play an animation after it ends", function() {
+	spriteAnimation.animate('count');
+	Crafty.timer.simulateFrames(10);
+	spriteAnimation.resumeAnimation();
+	Crafty.timer.simulateFrames(1);
+	deepEqual(finishedAnimations, ['count', 'count'], "Expected the animation to end twice");
+});
+
+
+
+test("Play an animation twice", function() {
+	spriteAnimation.animate('short');
+	Crafty.timer.simulateFrames(3);
+	spriteAnimation.animate('short');
+	Crafty.timer.simulateFrames(3);
+
+	deepEqual(eventFrames, [1, 2, 0, 1, 2], "Expected events for frames 0 through 2, twice");
+	deepEqual(finishedAnimations, ['short', 'short'], "Expected the animation to end twice");
+});
+
+test("Set an animation to a specific frame", function() {
+	spriteAnimation.animate('short');
+	Crafty.timer.simulateFrames(3);
+	var ret = spriteAnimation.reelPosition(1);
+	spriteAnimation.resumeAnimation();
+	Crafty.timer.simulateFrames(2);
+
+	deepEqual(eventFrames, [1, 2, 1, 2], "Expected events for frames 0 through 2 and then 1 through 2");
+	deepEqual(finishedAnimations, ['short', 'short'], "Expected the animation to end twice");
+	equal(ret, spriteAnimation, ".reelPosition(1) returned correct value");
+});
+
+test("See if any animation is playing", function() {
+	equal(spriteAnimation.isPlaying(), false, "No animation should be playing");
+	spriteAnimation.animate('short');
+	equal(spriteAnimation.isPlaying(), true, "An animation should be playing");
+});
+
+test("See if a specific animation is playing", function() {
+	spriteAnimation.animate('count');
+	equal(spriteAnimation.isPlaying('short'), false, "The 'short' animation shouldn't be playing");
+	spriteAnimation.animate('short');
+	equal(spriteAnimation.isPlaying('short'), true, "The 'short' animation should be playing");
+});
+
+
+
+
+
+Crafty.pause();
+
+
+// Some extra functions for the animation playground
+playgroundPlay = function() {
+	reelId = $('#playReelId').val();
+
+
+	loopCount = parseInt($('#playRepeatCount').val());
+	if (isNaN(loopCount)) loopCount = 1;
+
+	spriteAnimation.animate(reelId, loopCount);
+}
+
+playgroundPosition = function() {
+	var pos  = parseInt($('#reelPosition').val());
+	if (isNaN(pos)) pos = 0;
+	spriteAnimation.reelPosition(pos);
+}
+
+playgroundPause = function() {
+	spriteAnimation.pauseAnimation();
+}
+
+playgroundResume = function() {
+
+	spriteAnimation.resumeAnimation();
+}
+
+playgroundReset = function() {
+	spriteAnimation.resetAnimation();
+}
diff --git a/tests/assets/100x100.png b/tests/assets/100x100.png
new file mode 100644
index 00000000..75fe243c
Binary files /dev/null and b/tests/assets/100x100.png differ
diff --git a/tests/core.html b/tests/core.html
index 3661bb31..82428a83 100755
--- a/tests/core.html
+++ b/tests/core.html
@@ -2,29 +2,44 @@
                     "http://www.w3.org/TR/html4/loose.dtd">
 
 
-
+-->
 
 
-	
-	
-	
+	
+	
+	
 	
 
 
   
diff --git a/tests/dom.html b/tests/dom.html
new file mode 100644
index 00000000..461efbcc
--- /dev/null
+++ b/tests/dom.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+  
+  
+  
+  
+
+
+  
+
+
+
              Crafty: Core
              
+
              
+
              
+
              
+
                
+
                test markup, will be hidden
                
+
+
diff --git a/tests/events.html b/tests/events.html
new file mode 100644
index 00000000..73168b37
--- /dev/null
+++ b/tests/events.html
@@ -0,0 +1,198 @@
+
+
+
+
+
+
+	
+	
+	
+	
+
+
+  
+
+
+
                Crafty: Events
                
+
                
+
                
+
                
+
                  
+
                  test markup, will be hidden
                  
+
+
diff --git a/tests/isometric.html b/tests/isometric.html
new file mode 100644
index 00000000..255ba4c4
--- /dev/null
+++ b/tests/isometric.html
@@ -0,0 +1,115 @@
+
+
+
+
+
+
+	
+	
+	
+	
+
+
+  
+
+
+
                  Crafty: Core
                  
+
                  
+
                  
+
                  
+
                    
+
                    test markup, will be hidden
                    
+
+
diff --git a/tests/lib/jquery.min.js b/tests/lib/jquery.min.js
new file mode 100644
index 00000000..da417064
--- /dev/null
+++ b/tests/lib/jquery.min.js
@@ -0,0 +1,6 @@
+/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
+//@ sourceMappingURL=jquery-1.10.2.min.map
+*/
+(function(e,t){var n,r,i=typeof t,o=e.location,a=e.document,s=a.documentElement,l=e.jQuery,u=e.$,c={},p=[],f="1.10.2",d=p.concat,h=p.push,g=p.slice,m=p.indexOf,y=c.toString,v=c.hasOwnProperty,b=f.trim,x=function(e,t){return new x.fn.init(e,t,r)},w=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,T=/\S+/g,C=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,N=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,k=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,E=/^[\],:{}\s]*$/,S=/(?:^|:|,)(?:\s*\[)+/g,A=/\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,j=/"[^"\\\r\n]*"|true|false|null|-?(?:\d+\.|)\d+(?:[eE][+-]?\d+|)/g,D=/^-ms-/,L=/-([\da-z])/gi,H=function(e,t){return t.toUpperCase()},q=function(e){(a.addEventListener||"load"===e.type||"complete"===a.readyState)&&(_(),x.ready())},_=function(){a.addEventListener?(a.removeEventListener("DOMContentLoaded",q,!1),e.removeEventListener("load",q,!1)):(a.detachEvent("onreadystatechange",q),e.detachEvent("onload",q))};x.fn=x.prototype={jquery:f,constructor:x,init:function(e,n,r){var i,o;if(!e)return this;if("string"==typeof e){if(i="<"===e.charAt(0)&&">"===e.charAt(e.length-1)&&e.length>=3?[null,e,null]:N.exec(e),!i||!i[1]&&n)return!n||n.jquery?(n||r).find(e):this.constructor(n).find(e);if(i[1]){if(n=n instanceof x?n[0]:n,x.merge(this,x.parseHTML(i[1],n&&n.nodeType?n.ownerDocument||n:a,!0)),k.test(i[1])&&x.isPlainObject(n))for(i in n)x.isFunction(this[i])?this[i](n[i]):this.attr(i,n[i]);return this}if(o=a.getElementById(i[2]),o&&o.parentNode){if(o.id!==i[2])return r.find(e);this.length=1,this[0]=o}return this.context=a,this.selector=e,this}return e.nodeType?(this.context=this[0]=e,this.length=1,this):x.isFunction(e)?r.ready(e):(e.selector!==t&&(this.selector=e.selector,this.context=e.context),x.makeArray(e,this))},selector:"",length:0,toArray:function(){return g.call(this)},get:function(e){return null==e?this.toArray():0>e?this[this.length+e]:this[e]},pushStack:function(e){var t=x.merge(this.constructor(),e);return t.prevObject=this,t.context=this.context,t},each:function(e,t){return x.each(this,e,t)},ready:function(e){return x.ready.promise().done(e),this},slice:function(){return this.pushStack(g.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(0>e?t:0);return this.pushStack(n>=0&&t>n?[this[n]]:[])},map:function(e){return this.pushStack(x.map(this,function(t,n){return e.call(t,n,t)}))},end:function(){return this.prevObject||this.constructor(null)},push:h,sort:[].sort,splice:[].splice},x.fn.init.prototype=x.fn,x.extend=x.fn.extend=function(){var e,n,r,i,o,a,s=arguments[0]||{},l=1,u=arguments.length,c=!1;for("boolean"==typeof s&&(c=s,s=arguments[1]||{},l=2),"object"==typeof s||x.isFunction(s)||(s={}),u===l&&(s=this,--l);u>l;l++)if(null!=(o=arguments[l]))for(i in o)e=s[i],r=o[i],s!==r&&(c&&r&&(x.isPlainObject(r)||(n=x.isArray(r)))?(n?(n=!1,a=e&&x.isArray(e)?e:[]):a=e&&x.isPlainObject(e)?e:{},s[i]=x.extend(c,a,r)):r!==t&&(s[i]=r));return s},x.extend({expando:"jQuery"+(f+Math.random()).replace(/\D/g,""),noConflict:function(t){return e.$===x&&(e.$=u),t&&e.jQuery===x&&(e.jQuery=l),x},isReady:!1,readyWait:1,holdReady:function(e){e?x.readyWait++:x.ready(!0)},ready:function(e){if(e===!0?!--x.readyWait:!x.isReady){if(!a.body)return setTimeout(x.ready);x.isReady=!0,e!==!0&&--x.readyWait>0||(n.resolveWith(a,[x]),x.fn.trigger&&x(a).trigger("ready").off("ready"))}},isFunction:function(e){return"function"===x.type(e)},isArray:Array.isArray||function(e){return"array"===x.type(e)},isWindow:function(e){return null!=e&&e==e.window},isNumeric:function(e){return!isNaN(parseFloat(e))&&isFinite(e)},type:function(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?c[y.call(e)]||"object":typeof e},isPlainObject:function(e){var n;if(!e||"object"!==x.type(e)||e.nodeType||x.isWindow(e))return!1;try{if(e.constructor&&!v.call(e,"constructor")&&!v.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(r){return!1}if(x.support.ownLast)for(n in e)return v.call(e,n);for(n in e);return n===t||v.call(e,n)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},error:function(e){throw Error(e)},parseHTML:function(e,t,n){if(!e||"string"!=typeof e)return null;"boolean"==typeof t&&(n=t,t=!1),t=t||a;var r=k.exec(e),i=!n&&[];return r?[t.createElement(r[1])]:(r=x.buildFragment([e],t,i),i&&x(i).remove(),x.merge([],r.childNodes))},parseJSON:function(n){return e.JSON&&e.JSON.parse?e.JSON.parse(n):null===n?n:"string"==typeof n&&(n=x.trim(n),n&&E.test(n.replace(A,"@").replace(j,"]").replace(S,"")))?Function("return "+n)():(x.error("Invalid JSON: "+n),t)},parseXML:function(n){var r,i;if(!n||"string"!=typeof n)return null;try{e.DOMParser?(i=new DOMParser,r=i.parseFromString(n,"text/xml")):(r=new ActiveXObject("Microsoft.XMLDOM"),r.async="false",r.loadXML(n))}catch(o){r=t}return r&&r.documentElement&&!r.getElementsByTagName("parsererror").length||x.error("Invalid XML: "+n),r},noop:function(){},globalEval:function(t){t&&x.trim(t)&&(e.execScript||function(t){e.eval.call(e,t)})(t)},camelCase:function(e){return e.replace(D,"ms-").replace(L,H)},nodeName:function(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()},each:function(e,t,n){var r,i=0,o=e.length,a=M(e);if(n){if(a){for(;o>i;i++)if(r=t.apply(e[i],n),r===!1)break}else for(i in e)if(r=t.apply(e[i],n),r===!1)break}else if(a){for(;o>i;i++)if(r=t.call(e[i],i,e[i]),r===!1)break}else for(i in e)if(r=t.call(e[i],i,e[i]),r===!1)break;return e},trim:b&&!b.call("\ufeff\u00a0")?function(e){return null==e?"":b.call(e)}:function(e){return null==e?"":(e+"").replace(C,"")},makeArray:function(e,t){var n=t||[];return null!=e&&(M(Object(e))?x.merge(n,"string"==typeof e?[e]:e):h.call(n,e)),n},inArray:function(e,t,n){var r;if(t){if(m)return m.call(t,e,n);for(r=t.length,n=n?0>n?Math.max(0,r+n):n:0;r>n;n++)if(n in t&&t[n]===e)return n}return-1},merge:function(e,n){var r=n.length,i=e.length,o=0;if("number"==typeof r)for(;r>o;o++)e[i++]=n[o];else while(n[o]!==t)e[i++]=n[o++];return e.length=i,e},grep:function(e,t,n){var r,i=[],o=0,a=e.length;for(n=!!n;a>o;o++)r=!!t(e[o],o),n!==r&&i.push(e[o]);return i},map:function(e,t,n){var r,i=0,o=e.length,a=M(e),s=[];if(a)for(;o>i;i++)r=t(e[i],i,n),null!=r&&(s[s.length]=r);else for(i in e)r=t(e[i],i,n),null!=r&&(s[s.length]=r);return d.apply([],s)},guid:1,proxy:function(e,n){var r,i,o;return"string"==typeof n&&(o=e[n],n=e,e=o),x.isFunction(e)?(r=g.call(arguments,2),i=function(){return e.apply(n||this,r.concat(g.call(arguments)))},i.guid=e.guid=e.guid||x.guid++,i):t},access:function(e,n,r,i,o,a,s){var l=0,u=e.length,c=null==r;if("object"===x.type(r)){o=!0;for(l in r)x.access(e,n,l,r[l],!0,a,s)}else if(i!==t&&(o=!0,x.isFunction(i)||(s=!0),c&&(s?(n.call(e,i),n=null):(c=n,n=function(e,t,n){return c.call(x(e),n)})),n))for(;u>l;l++)n(e[l],r,s?i:i.call(e[l],l,n(e[l],r)));return o?e:c?n.call(e):u?n(e[0],r):a},now:function(){return(new Date).getTime()},swap:function(e,t,n,r){var i,o,a={};for(o in t)a[o]=e.style[o],e.style[o]=t[o];i=n.apply(e,r||[]);for(o in t)e.style[o]=a[o];return i}}),x.ready.promise=function(t){if(!n)if(n=x.Deferred(),"complete"===a.readyState)setTimeout(x.ready);else if(a.addEventListener)a.addEventListener("DOMContentLoaded",q,!1),e.addEventListener("load",q,!1);else{a.attachEvent("onreadystatechange",q),e.attachEvent("onload",q);var r=!1;try{r=null==e.frameElement&&a.documentElement}catch(i){}r&&r.doScroll&&function o(){if(!x.isReady){try{r.doScroll("left")}catch(e){return setTimeout(o,50)}_(),x.ready()}}()}return n.promise(t)},x.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(e,t){c["[object "+t+"]"]=t.toLowerCase()});function M(e){var t=e.length,n=x.type(e);return x.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||"function"!==n&&(0===t||"number"==typeof t&&t>0&&t-1 in e)}r=x(a),function(e,t){var n,r,i,o,a,s,l,u,c,p,f,d,h,g,m,y,v,b="sizzle"+-new Date,w=e.document,T=0,C=0,N=st(),k=st(),E=st(),S=!1,A=function(e,t){return e===t?(S=!0,0):0},j=typeof t,D=1<<31,L={}.hasOwnProperty,H=[],q=H.pop,_=H.push,M=H.push,O=H.slice,F=H.indexOf||function(e){var t=0,n=this.length;for(;n>t;t++)if(this[t]===e)return t;return-1},B="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",P="[\\x20\\t\\r\\n\\f]",R="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",W=R.replace("w","w#"),$="\\["+P+"*("+R+")"+P+"*(?:([*^$|!~]?=)"+P+"*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|("+W+")|)|)"+P+"*\\]",I=":("+R+")(?:\\(((['\"])((?:\\\\.|[^\\\\])*?)\\3|((?:\\\\.|[^\\\\()[\\]]|"+$.replace(3,8)+")*)|.*)\\)|)",z=RegExp("^"+P+"+|((?:^|[^\\\\])(?:\\\\.)*)"+P+"+$","g"),X=RegExp("^"+P+"*,"+P+"*"),U=RegExp("^"+P+"*([>+~]|"+P+")"+P+"*"),V=RegExp(P+"*[+~]"),Y=RegExp("="+P+"*([^\\]'\"]*)"+P+"*\\]","g"),J=RegExp(I),G=RegExp("^"+W+"$"),Q={ID:RegExp("^#("+R+")"),CLASS:RegExp("^\\.("+R+")"),TAG:RegExp("^("+R.replace("w","w*")+")"),ATTR:RegExp("^"+$),PSEUDO:RegExp("^"+I),CHILD:RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+P+"*(even|odd|(([+-]|)(\\d*)n|)"+P+"*(?:([+-]|)"+P+"*(\\d+)|))"+P+"*\\)|)","i"),bool:RegExp("^(?:"+B+")$","i"),needsContext:RegExp("^"+P+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+P+"*((?:-\\d)?\\d*)"+P+"*\\)|)(?=[^-]|$)","i")},K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,et=/^(?:input|select|textarea|button)$/i,tt=/^h\d$/i,nt=/'|\\/g,rt=RegExp("\\\\([\\da-f]{1,6}"+P+"?|("+P+")|.)","ig"),it=function(e,t,n){var r="0x"+t-65536;return r!==r||n?t:0>r?String.fromCharCode(r+65536):String.fromCharCode(55296|r>>10,56320|1023&r)};try{M.apply(H=O.call(w.childNodes),w.childNodes),H[w.childNodes.length].nodeType}catch(ot){M={apply:H.length?function(e,t){_.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function at(e,t,n,i){var o,a,s,l,u,c,d,m,y,x;if((t?t.ownerDocument||t:w)!==f&&p(t),t=t||f,n=n||[],!e||"string"!=typeof e)return n;if(1!==(l=t.nodeType)&&9!==l)return[];if(h&&!i){if(o=Z.exec(e))if(s=o[1]){if(9===l){if(a=t.getElementById(s),!a||!a.parentNode)return n;if(a.id===s)return n.push(a),n}else if(t.ownerDocument&&(a=t.ownerDocument.getElementById(s))&&v(t,a)&&a.id===s)return n.push(a),n}else{if(o[2])return M.apply(n,t.getElementsByTagName(e)),n;if((s=o[3])&&r.getElementsByClassName&&t.getElementsByClassName)return M.apply(n,t.getElementsByClassName(s)),n}if(r.qsa&&(!g||!g.test(e))){if(m=d=b,y=t,x=9===l&&e,1===l&&"object"!==t.nodeName.toLowerCase()){c=mt(e),(d=t.getAttribute("id"))?m=d.replace(nt,"\\$&"):t.setAttribute("id",m),m="[id='"+m+"'] ",u=c.length;while(u--)c[u]=m+yt(c[u]);y=V.test(e)&&t.parentNode||t,x=c.join(",")}if(x)try{return M.apply(n,y.querySelectorAll(x)),n}catch(T){}finally{d||t.removeAttribute("id")}}}return kt(e.replace(z,"$1"),t,n,i)}function st(){var e=[];function t(n,r){return e.push(n+=" ")>o.cacheLength&&delete t[e.shift()],t[n]=r}return t}function lt(e){return e[b]=!0,e}function ut(e){var t=f.createElement("div");try{return!!e(t)}catch(n){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function ct(e,t){var n=e.split("|"),r=e.length;while(r--)o.attrHandle[n[r]]=t}function pt(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&(~t.sourceIndex||D)-(~e.sourceIndex||D);if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function ft(e){return function(t){var n=t.nodeName.toLowerCase();return"input"===n&&t.type===e}}function dt(e){return function(t){var n=t.nodeName.toLowerCase();return("input"===n||"button"===n)&&t.type===e}}function ht(e){return lt(function(t){return t=+t,lt(function(n,r){var i,o=e([],n.length,t),a=o.length;while(a--)n[i=o[a]]&&(n[i]=!(r[i]=n[i]))})})}s=at.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return t?"HTML"!==t.nodeName:!1},r=at.support={},p=at.setDocument=function(e){var n=e?e.ownerDocument||e:w,i=n.defaultView;return n!==f&&9===n.nodeType&&n.documentElement?(f=n,d=n.documentElement,h=!s(n),i&&i.attachEvent&&i!==i.top&&i.attachEvent("onbeforeunload",function(){p()}),r.attributes=ut(function(e){return e.className="i",!e.getAttribute("className")}),r.getElementsByTagName=ut(function(e){return e.appendChild(n.createComment("")),!e.getElementsByTagName("*").length}),r.getElementsByClassName=ut(function(e){return e.innerHTML="
                    ",e.firstChild.className="i",2===e.getElementsByClassName("i").length}),r.getById=ut(function(e){return d.appendChild(e).id=b,!n.getElementsByName||!n.getElementsByName(b).length}),r.getById?(o.find.ID=function(e,t){if(typeof t.getElementById!==j&&h){var n=t.getElementById(e);return n&&n.parentNode?[n]:[]}},o.filter.ID=function(e){var t=e.replace(rt,it);return function(e){return e.getAttribute("id")===t}}):(delete o.find.ID,o.filter.ID=function(e){var t=e.replace(rt,it);return function(e){var n=typeof e.getAttributeNode!==j&&e.getAttributeNode("id");return n&&n.value===t}}),o.find.TAG=r.getElementsByTagName?function(e,n){return typeof n.getElementsByTagName!==j?n.getElementsByTagName(e):t}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},o.find.CLASS=r.getElementsByClassName&&function(e,n){return typeof n.getElementsByClassName!==j&&h?n.getElementsByClassName(e):t},m=[],g=[],(r.qsa=K.test(n.querySelectorAll))&&(ut(function(e){e.innerHTML="",e.querySelectorAll("[selected]").length||g.push("\\["+P+"*(?:value|"+B+")"),e.querySelectorAll(":checked").length||g.push(":checked")}),ut(function(e){var t=n.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("t",""),e.querySelectorAll("[t^='']").length&&g.push("[*^$]="+P+"*(?:''|\"\")"),e.querySelectorAll(":enabled").length||g.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),g.push(",.*:")})),(r.matchesSelector=K.test(y=d.webkitMatchesSelector||d.mozMatchesSelector||d.oMatchesSelector||d.msMatchesSelector))&&ut(function(e){r.disconnectedMatch=y.call(e,"div"),y.call(e,"[s!='']:x"),m.push("!=",I)}),g=g.length&&RegExp(g.join("|")),m=m.length&&RegExp(m.join("|")),v=K.test(d.contains)||d.compareDocumentPosition?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},A=d.compareDocumentPosition?function(e,t){if(e===t)return S=!0,0;var i=t.compareDocumentPosition&&e.compareDocumentPosition&&e.compareDocumentPosition(t);return i?1&i||!r.sortDetached&&t.compareDocumentPosition(e)===i?e===n||v(w,e)?-1:t===n||v(w,t)?1:c?F.call(c,e)-F.call(c,t):0:4&i?-1:1:e.compareDocumentPosition?-1:1}:function(e,t){var r,i=0,o=e.parentNode,a=t.parentNode,s=[e],l=[t];if(e===t)return S=!0,0;if(!o||!a)return e===n?-1:t===n?1:o?-1:a?1:c?F.call(c,e)-F.call(c,t):0;if(o===a)return pt(e,t);r=e;while(r=r.parentNode)s.unshift(r);r=t;while(r=r.parentNode)l.unshift(r);while(s[i]===l[i])i++;return i?pt(s[i],l[i]):s[i]===w?-1:l[i]===w?1:0},n):f},at.matches=function(e,t){return at(e,null,null,t)},at.matchesSelector=function(e,t){if((e.ownerDocument||e)!==f&&p(e),t=t.replace(Y,"='$1']"),!(!r.matchesSelector||!h||m&&m.test(t)||g&&g.test(t)))try{var n=y.call(e,t);if(n||r.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(i){}return at(t,f,null,[e]).length>0},at.contains=function(e,t){return(e.ownerDocument||e)!==f&&p(e),v(e,t)},at.attr=function(e,n){(e.ownerDocument||e)!==f&&p(e);var i=o.attrHandle[n.toLowerCase()],a=i&&L.call(o.attrHandle,n.toLowerCase())?i(e,n,!h):t;return a===t?r.attributes||!h?e.getAttribute(n):(a=e.getAttributeNode(n))&&a.specified?a.value:null:a},at.error=function(e){throw Error("Syntax error, unrecognized expression: "+e)},at.uniqueSort=function(e){var t,n=[],i=0,o=0;if(S=!r.detectDuplicates,c=!r.sortStable&&e.slice(0),e.sort(A),S){while(t=e[o++])t===e[o]&&(i=n.push(o));while(i--)e.splice(n[i],1)}return e},a=at.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=a(e)}else if(3===i||4===i)return e.nodeValue}else for(;t=e[r];r++)n+=a(t);return n},o=at.selectors={cacheLength:50,createPseudo:lt,match:Q,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(rt,it),e[3]=(e[4]||e[5]||"").replace(rt,it),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||at.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&at.error(e[0]),e},PSEUDO:function(e){var n,r=!e[5]&&e[2];return Q.CHILD.test(e[0])?null:(e[3]&&e[4]!==t?e[2]=e[4]:r&&J.test(r)&&(n=mt(r,!0))&&(n=r.indexOf(")",r.length-n)-r.length)&&(e[0]=e[0].slice(0,n),e[2]=r.slice(0,n)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(rt,it).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=N[e+" "];return t||(t=RegExp("(^|"+P+")"+e+"("+P+"|$)"))&&N(e,function(e){return t.test("string"==typeof e.className&&e.className||typeof e.getAttribute!==j&&e.getAttribute("class")||"")})},ATTR:function(e,t,n){return function(r){var i=at.attr(r,e);return null==i?"!="===t:t?(i+="","="===t?i===n:"!="===t?i!==n:"^="===t?n&&0===i.indexOf(n):"*="===t?n&&i.indexOf(n)>-1:"$="===t?n&&i.slice(-n.length)===n:"~="===t?(" "+i+" ").indexOf(n)>-1:"|="===t?i===n||i.slice(0,n.length+1)===n+"-":!1):!0}},CHILD:function(e,t,n,r,i){var o="nth"!==e.slice(0,3),a="last"!==e.slice(-4),s="of-type"===t;return 1===r&&0===i?function(e){return!!e.parentNode}:function(t,n,l){var u,c,p,f,d,h,g=o!==a?"nextSibling":"previousSibling",m=t.parentNode,y=s&&t.nodeName.toLowerCase(),v=!l&&!s;if(m){if(o){while(g){p=t;while(p=p[g])if(s?p.nodeName.toLowerCase()===y:1===p.nodeType)return!1;h=g="only"===e&&!h&&"nextSibling"}return!0}if(h=[a?m.firstChild:m.lastChild],a&&v){c=m[b]||(m[b]={}),u=c[e]||[],d=u[0]===T&&u[1],f=u[0]===T&&u[2],p=d&&m.childNodes[d];while(p=++d&&p&&p[g]||(f=d=0)||h.pop())if(1===p.nodeType&&++f&&p===t){c[e]=[T,d,f];break}}else if(v&&(u=(t[b]||(t[b]={}))[e])&&u[0]===T)f=u[1];else while(p=++d&&p&&p[g]||(f=d=0)||h.pop())if((s?p.nodeName.toLowerCase()===y:1===p.nodeType)&&++f&&(v&&((p[b]||(p[b]={}))[e]=[T,f]),p===t))break;return f-=i,f===r||0===f%r&&f/r>=0}}},PSEUDO:function(e,t){var n,r=o.pseudos[e]||o.setFilters[e.toLowerCase()]||at.error("unsupported pseudo: "+e);return r[b]?r(t):r.length>1?(n=[e,e,"",t],o.setFilters.hasOwnProperty(e.toLowerCase())?lt(function(e,n){var i,o=r(e,t),a=o.length;while(a--)i=F.call(e,o[a]),e[i]=!(n[i]=o[a])}):function(e){return r(e,0,n)}):r}},pseudos:{not:lt(function(e){var t=[],n=[],r=l(e.replace(z,"$1"));return r[b]?lt(function(e,t,n,i){var o,a=r(e,null,i,[]),s=e.length;while(s--)(o=a[s])&&(e[s]=!(t[s]=o))}):function(e,i,o){return t[0]=e,r(t,null,o,n),!n.pop()}}),has:lt(function(e){return function(t){return at(e,t).length>0}}),contains:lt(function(e){return function(t){return(t.textContent||t.innerText||a(t)).indexOf(e)>-1}}),lang:lt(function(e){return G.test(e||"")||at.error("unsupported lang: "+e),e=e.replace(rt,it).toLowerCase(),function(t){var n;do if(n=h?t.lang:t.getAttribute("xml:lang")||t.getAttribute("lang"))return n=n.toLowerCase(),n===e||0===n.indexOf(e+"-");while((t=t.parentNode)&&1===t.nodeType);return!1}}),target:function(t){var n=e.location&&e.location.hash;return n&&n.slice(1)===t.id},root:function(e){return e===d},focus:function(e){return e===f.activeElement&&(!f.hasFocus||f.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:function(e){return e.disabled===!1},disabled:function(e){return e.disabled===!0},checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,e.selected===!0},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeName>"@"||3===e.nodeType||4===e.nodeType)return!1;return!0},parent:function(e){return!o.pseudos.empty(e)},header:function(e){return tt.test(e.nodeName)},input:function(e){return et.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||t.toLowerCase()===e.type)},first:ht(function(){return[0]}),last:ht(function(e,t){return[t-1]}),eq:ht(function(e,t,n){return[0>n?n+t:n]}),even:ht(function(e,t){var n=0;for(;t>n;n+=2)e.push(n);return e}),odd:ht(function(e,t){var n=1;for(;t>n;n+=2)e.push(n);return e}),lt:ht(function(e,t,n){var r=0>n?n+t:n;for(;--r>=0;)e.push(r);return e}),gt:ht(function(e,t,n){var r=0>n?n+t:n;for(;t>++r;)e.push(r);return e})}},o.pseudos.nth=o.pseudos.eq;for(n in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})o.pseudos[n]=ft(n);for(n in{submit:!0,reset:!0})o.pseudos[n]=dt(n);function gt(){}gt.prototype=o.filters=o.pseudos,o.setFilters=new gt;function mt(e,t){var n,r,i,a,s,l,u,c=k[e+" "];if(c)return t?0:c.slice(0);s=e,l=[],u=o.preFilter;while(s){(!n||(r=X.exec(s)))&&(r&&(s=s.slice(r[0].length)||s),l.push(i=[])),n=!1,(r=U.exec(s))&&(n=r.shift(),i.push({value:n,type:r[0].replace(z," ")}),s=s.slice(n.length));for(a in o.filter)!(r=Q[a].exec(s))||u[a]&&!(r=u[a](r))||(n=r.shift(),i.push({value:n,type:a,matches:r}),s=s.slice(n.length));if(!n)break}return t?s.length:s?at.error(e):k(e,l).slice(0)}function yt(e){var t=0,n=e.length,r="";for(;n>t;t++)r+=e[t].value;return r}function vt(e,t,n){var r=t.dir,o=n&&"parentNode"===r,a=C++;return t.first?function(t,n,i){while(t=t[r])if(1===t.nodeType||o)return e(t,n,i)}:function(t,n,s){var l,u,c,p=T+" "+a;if(s){while(t=t[r])if((1===t.nodeType||o)&&e(t,n,s))return!0}else while(t=t[r])if(1===t.nodeType||o)if(c=t[b]||(t[b]={}),(u=c[r])&&u[0]===p){if((l=u[1])===!0||l===i)return l===!0}else if(u=c[r]=[p],u[1]=e(t,n,s)||i,u[1]===!0)return!0}}function bt(e){return e.length>1?function(t,n,r){var i=e.length;while(i--)if(!e[i](t,n,r))return!1;return!0}:e[0]}function xt(e,t,n,r,i){var o,a=[],s=0,l=e.length,u=null!=t;for(;l>s;s++)(o=e[s])&&(!n||n(o,r,i))&&(a.push(o),u&&t.push(s));return a}function wt(e,t,n,r,i,o){return r&&!r[b]&&(r=wt(r)),i&&!i[b]&&(i=wt(i,o)),lt(function(o,a,s,l){var u,c,p,f=[],d=[],h=a.length,g=o||Nt(t||"*",s.nodeType?[s]:s,[]),m=!e||!o&&t?g:xt(g,f,e,s,l),y=n?i||(o?e:h||r)?[]:a:m;if(n&&n(m,y,s,l),r){u=xt(y,d),r(u,[],s,l),c=u.length;while(c--)(p=u[c])&&(y[d[c]]=!(m[d[c]]=p))}if(o){if(i||e){if(i){u=[],c=y.length;while(c--)(p=y[c])&&u.push(m[c]=p);i(null,y=[],u,l)}c=y.length;while(c--)(p=y[c])&&(u=i?F.call(o,p):f[c])>-1&&(o[u]=!(a[u]=p))}}else y=xt(y===a?y.splice(h,y.length):y),i?i(null,a,y,l):M.apply(a,y)})}function Tt(e){var t,n,r,i=e.length,a=o.relative[e[0].type],s=a||o.relative[" "],l=a?1:0,c=vt(function(e){return e===t},s,!0),p=vt(function(e){return F.call(t,e)>-1},s,!0),f=[function(e,n,r){return!a&&(r||n!==u)||((t=n).nodeType?c(e,n,r):p(e,n,r))}];for(;i>l;l++)if(n=o.relative[e[l].type])f=[vt(bt(f),n)];else{if(n=o.filter[e[l].type].apply(null,e[l].matches),n[b]){for(r=++l;i>r;r++)if(o.relative[e[r].type])break;return wt(l>1&&bt(f),l>1&&yt(e.slice(0,l-1).concat({value:" "===e[l-2].type?"*":""})).replace(z,"$1"),n,r>l&&Tt(e.slice(l,r)),i>r&&Tt(e=e.slice(r)),i>r&&yt(e))}f.push(n)}return bt(f)}function Ct(e,t){var n=0,r=t.length>0,a=e.length>0,s=function(s,l,c,p,d){var h,g,m,y=[],v=0,b="0",x=s&&[],w=null!=d,C=u,N=s||a&&o.find.TAG("*",d&&l.parentNode||l),k=T+=null==C?1:Math.random()||.1;for(w&&(u=l!==f&&l,i=n);null!=(h=N[b]);b++){if(a&&h){g=0;while(m=e[g++])if(m(h,l,c)){p.push(h);break}w&&(T=k,i=++n)}r&&((h=!m&&h)&&v--,s&&x.push(h))}if(v+=b,r&&b!==v){g=0;while(m=t[g++])m(x,y,l,c);if(s){if(v>0)while(b--)x[b]||y[b]||(y[b]=q.call(p));y=xt(y)}M.apply(p,y),w&&!s&&y.length>0&&v+t.length>1&&at.uniqueSort(p)}return w&&(T=k,u=C),x};return r?lt(s):s}l=at.compile=function(e,t){var n,r=[],i=[],o=E[e+" "];if(!o){t||(t=mt(e)),n=t.length;while(n--)o=Tt(t[n]),o[b]?r.push(o):i.push(o);o=E(e,Ct(i,r))}return o};function Nt(e,t,n){var r=0,i=t.length;for(;i>r;r++)at(e,t[r],n);return n}function kt(e,t,n,i){var a,s,u,c,p,f=mt(e);if(!i&&1===f.length){if(s=f[0]=f[0].slice(0),s.length>2&&"ID"===(u=s[0]).type&&r.getById&&9===t.nodeType&&h&&o.relative[s[1].type]){if(t=(o.find.ID(u.matches[0].replace(rt,it),t)||[])[0],!t)return n;e=e.slice(s.shift().value.length)}a=Q.needsContext.test(e)?0:s.length;while(a--){if(u=s[a],o.relative[c=u.type])break;if((p=o.find[c])&&(i=p(u.matches[0].replace(rt,it),V.test(s[0].type)&&t.parentNode||t))){if(s.splice(a,1),e=i.length&&yt(s),!e)return M.apply(n,i),n;break}}}return l(e,f)(i,t,!h,n,V.test(e)),n}r.sortStable=b.split("").sort(A).join("")===b,r.detectDuplicates=S,p(),r.sortDetached=ut(function(e){return 1&e.compareDocumentPosition(f.createElement("div"))}),ut(function(e){return e.innerHTML="","#"===e.firstChild.getAttribute("href")})||ct("type|href|height|width",function(e,n,r){return r?t:e.getAttribute(n,"type"===n.toLowerCase()?1:2)}),r.attributes&&ut(function(e){return e.innerHTML="",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||ct("value",function(e,n,r){return r||"input"!==e.nodeName.toLowerCase()?t:e.defaultValue}),ut(function(e){return null==e.getAttribute("disabled")})||ct(B,function(e,n,r){var i;return r?t:(i=e.getAttributeNode(n))&&i.specified?i.value:e[n]===!0?n.toLowerCase():null}),x.find=at,x.expr=at.selectors,x.expr[":"]=x.expr.pseudos,x.unique=at.uniqueSort,x.text=at.getText,x.isXMLDoc=at.isXML,x.contains=at.contains}(e);var O={};function F(e){var t=O[e]={};return x.each(e.match(T)||[],function(e,n){t[n]=!0}),t}x.Callbacks=function(e){e="string"==typeof e?O[e]||F(e):x.extend({},e);var n,r,i,o,a,s,l=[],u=!e.once&&[],c=function(t){for(r=e.memory&&t,i=!0,a=s||0,s=0,o=l.length,n=!0;l&&o>a;a++)if(l[a].apply(t[0],t[1])===!1&&e.stopOnFalse){r=!1;break}n=!1,l&&(u?u.length&&c(u.shift()):r?l=[]:p.disable())},p={add:function(){if(l){var t=l.length;(function i(t){x.each(t,function(t,n){var r=x.type(n);"function"===r?e.unique&&p.has(n)||l.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=l.length:r&&(s=t,c(r))}return this},remove:function(){return l&&x.each(arguments,function(e,t){var r;while((r=x.inArray(t,l,r))>-1)l.splice(r,1),n&&(o>=r&&o--,a>=r&&a--)}),this},has:function(e){return e?x.inArray(e,l)>-1:!(!l||!l.length)},empty:function(){return l=[],o=0,this},disable:function(){return l=u=r=t,this},disabled:function(){return!l},lock:function(){return u=t,r||p.disable(),this},locked:function(){return!u},fireWith:function(e,t){return!l||i&&!u||(t=t||[],t=[e,t.slice?t.slice():t],n?u.push(t):c(t)),this},fire:function(){return p.fireWith(this,arguments),this},fired:function(){return!!i}};return p},x.extend({Deferred:function(e){var t=[["resolve","done",x.Callbacks("once memory"),"resolved"],["reject","fail",x.Callbacks("once memory"),"rejected"],["notify","progress",x.Callbacks("memory")]],n="pending",r={state:function(){return n},always:function(){return i.done(arguments).fail(arguments),this},then:function(){var e=arguments;return x.Deferred(function(n){x.each(t,function(t,o){var a=o[0],s=x.isFunction(e[t])&&e[t];i[o[1]](function(){var e=s&&s.apply(this,arguments);e&&x.isFunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[a+"With"](this===r?n.promise():this,s?[e]:arguments)})}),e=null}).promise()},promise:function(e){return null!=e?x.extend(e,r):r}},i={};return r.pipe=r.then,x.each(t,function(e,o){var a=o[2],s=o[3];r[o[1]]=a.add,s&&a.add(function(){n=s},t[1^e][2].disable,t[2][2].lock),i[o[0]]=function(){return i[o[0]+"With"](this===i?r:this,arguments),this},i[o[0]+"With"]=a.fireWith}),r.promise(i),e&&e.call(i,i),i},when:function(e){var t=0,n=g.call(arguments),r=n.length,i=1!==r||e&&x.isFunction(e.promise)?r:0,o=1===i?e:x.Deferred(),a=function(e,t,n){return function(r){t[e]=this,n[e]=arguments.length>1?g.call(arguments):r,n===s?o.notifyWith(t,n):--i||o.resolveWith(t,n)}},s,l,u;if(r>1)for(s=Array(r),l=Array(r),u=Array(r);r>t;t++)n[t]&&x.isFunction(n[t].promise)?n[t].promise().done(a(t,u,n)).fail(o.reject).progress(a(t,l,s)):--i;return i||o.resolveWith(u,n),o.promise()}}),x.support=function(t){var n,r,o,s,l,u,c,p,f,d=a.createElement("div");if(d.setAttribute("className","t"),d.innerHTML="  
                    a",n=d.getElementsByTagName("*")||[],r=d.getElementsByTagName("a")[0],!r||!r.style||!n.length)return t;s=a.createElement("select"),u=s.appendChild(a.createElement("option")),o=d.getElementsByTagName("input")[0],r.style.cssText="top:1px;float:left;opacity:.5",t.getSetAttribute="t"!==d.className,t.leadingWhitespace=3===d.firstChild.nodeType,t.tbody=!d.getElementsByTagName("tbody").length,t.htmlSerialize=!!d.getElementsByTagName("link").length,t.style=/top/.test(r.getAttribute("style")),t.hrefNormalized="/a"===r.getAttribute("href"),t.opacity=/^0.5/.test(r.style.opacity),t.cssFloat=!!r.style.cssFloat,t.checkOn=!!o.value,t.optSelected=u.selected,t.enctype=!!a.createElement("form").enctype,t.html5Clone="<:nav>"!==a.createElement("nav").cloneNode(!0).outerHTML,t.inlineBlockNeedsLayout=!1,t.shrinkWrapBlocks=!1,t.pixelPosition=!1,t.deleteExpando=!0,t.noCloneEvent=!0,t.reliableMarginRight=!0,t.boxSizingReliable=!0,o.checked=!0,t.noCloneChecked=o.cloneNode(!0).checked,s.disabled=!0,t.optDisabled=!u.disabled;try{delete d.test}catch(h){t.deleteExpando=!1}o=a.createElement("input"),o.setAttribute("value",""),t.input=""===o.getAttribute("value"),o.value="t",o.setAttribute("type","radio"),t.radioValue="t"===o.value,o.setAttribute("checked","t"),o.setAttribute("name","t"),l=a.createDocumentFragment(),l.appendChild(o),t.appendChecked=o.checked,t.checkClone=l.cloneNode(!0).cloneNode(!0).lastChild.checked,d.attachEvent&&(d.attachEvent("onclick",function(){t.noCloneEvent=!1}),d.cloneNode(!0).click());for(f in{submit:!0,change:!0,focusin:!0})d.setAttribute(c="on"+f,"t"),t[f+"Bubbles"]=c in e||d.attributes[c].expando===!1;d.style.backgroundClip="content-box",d.cloneNode(!0).style.backgroundClip="",t.clearCloneStyle="content-box"===d.style.backgroundClip;for(f in x(t))break;return t.ownLast="0"!==f,x(function(){var n,r,o,s="padding:0;margin:0;border:0;display:block;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;",l=a.getElementsByTagName("body")[0];l&&(n=a.createElement("div"),n.style.cssText="border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px",l.appendChild(n).appendChild(d),d.innerHTML="
                    t
                    ",o=d.getElementsByTagName("td"),o[0].style.cssText="padding:0;margin:0;border:0;display:none",p=0===o[0].offsetHeight,o[0].style.display="",o[1].style.display="none",t.reliableHiddenOffsets=p&&0===o[0].offsetHeight,d.innerHTML="",d.style.cssText="box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%;",x.swap(l,null!=l.style.zoom?{zoom:1}:{},function(){t.boxSizing=4===d.offsetWidth}),e.getComputedStyle&&(t.pixelPosition="1%"!==(e.getComputedStyle(d,null)||{}).top,t.boxSizingReliable="4px"===(e.getComputedStyle(d,null)||{width:"4px"}).width,r=d.appendChild(a.createElement("div")),r.style.cssText=d.style.cssText=s,r.style.marginRight=r.style.width="0",d.style.width="1px",t.reliableMarginRight=!parseFloat((e.getComputedStyle(r,null)||{}).marginRight)),typeof d.style.zoom!==i&&(d.innerHTML="",d.style.cssText=s+"width:1px;padding:1px;display:inline;zoom:1",t.inlineBlockNeedsLayout=3===d.offsetWidth,d.style.display="block",d.innerHTML="
                    ",d.firstChild.style.width="5px",t.shrinkWrapBlocks=3!==d.offsetWidth,t.inlineBlockNeedsLayout&&(l.style.zoom=1)),l.removeChild(n),n=d=o=r=null)}),n=s=l=u=r=o=null,t
+}({});var B=/(?:\{[\s\S]*\}|\[[\s\S]*\])$/,P=/([A-Z])/g;function R(e,n,r,i){if(x.acceptData(e)){var o,a,s=x.expando,l=e.nodeType,u=l?x.cache:e,c=l?e[s]:e[s]&&s;if(c&&u[c]&&(i||u[c].data)||r!==t||"string"!=typeof n)return c||(c=l?e[s]=p.pop()||x.guid++:s),u[c]||(u[c]=l?{}:{toJSON:x.noop}),("object"==typeof n||"function"==typeof n)&&(i?u[c]=x.extend(u[c],n):u[c].data=x.extend(u[c].data,n)),a=u[c],i||(a.data||(a.data={}),a=a.data),r!==t&&(a[x.camelCase(n)]=r),"string"==typeof n?(o=a[n],null==o&&(o=a[x.camelCase(n)])):o=a,o}}function W(e,t,n){if(x.acceptData(e)){var r,i,o=e.nodeType,a=o?x.cache:e,s=o?e[x.expando]:x.expando;if(a[s]){if(t&&(r=n?a[s]:a[s].data)){x.isArray(t)?t=t.concat(x.map(t,x.camelCase)):t in r?t=[t]:(t=x.camelCase(t),t=t in r?[t]:t.split(" ")),i=t.length;while(i--)delete r[t[i]];if(n?!I(r):!x.isEmptyObject(r))return}(n||(delete a[s].data,I(a[s])))&&(o?x.cleanData([e],!0):x.support.deleteExpando||a!=a.window?delete a[s]:a[s]=null)}}}x.extend({cache:{},noData:{applet:!0,embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"},hasData:function(e){return e=e.nodeType?x.cache[e[x.expando]]:e[x.expando],!!e&&!I(e)},data:function(e,t,n){return R(e,t,n)},removeData:function(e,t){return W(e,t)},_data:function(e,t,n){return R(e,t,n,!0)},_removeData:function(e,t){return W(e,t,!0)},acceptData:function(e){if(e.nodeType&&1!==e.nodeType&&9!==e.nodeType)return!1;var t=e.nodeName&&x.noData[e.nodeName.toLowerCase()];return!t||t!==!0&&e.getAttribute("classid")===t}}),x.fn.extend({data:function(e,n){var r,i,o=null,a=0,s=this[0];if(e===t){if(this.length&&(o=x.data(s),1===s.nodeType&&!x._data(s,"parsedAttrs"))){for(r=s.attributes;r.length>a;a++)i=r[a].name,0===i.indexOf("data-")&&(i=x.camelCase(i.slice(5)),$(s,i,o[i]));x._data(s,"parsedAttrs",!0)}return o}return"object"==typeof e?this.each(function(){x.data(this,e)}):arguments.length>1?this.each(function(){x.data(this,e,n)}):s?$(s,e,x.data(s,e)):null},removeData:function(e){return this.each(function(){x.removeData(this,e)})}});function $(e,n,r){if(r===t&&1===e.nodeType){var i="data-"+n.replace(P,"-$1").toLowerCase();if(r=e.getAttribute(i),"string"==typeof r){try{r="true"===r?!0:"false"===r?!1:"null"===r?null:+r+""===r?+r:B.test(r)?x.parseJSON(r):r}catch(o){}x.data(e,n,r)}else r=t}return r}function I(e){var t;for(t in e)if(("data"!==t||!x.isEmptyObject(e[t]))&&"toJSON"!==t)return!1;return!0}x.extend({queue:function(e,n,r){var i;return e?(n=(n||"fx")+"queue",i=x._data(e,n),r&&(!i||x.isArray(r)?i=x._data(e,n,x.makeArray(r)):i.push(r)),i||[]):t},dequeue:function(e,t){t=t||"fx";var n=x.queue(e,t),r=n.length,i=n.shift(),o=x._queueHooks(e,t),a=function(){x.dequeue(e,t)};"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,a,o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return x._data(e,n)||x._data(e,n,{empty:x.Callbacks("once memory").add(function(){x._removeData(e,t+"queue"),x._removeData(e,n)})})}}),x.fn.extend({queue:function(e,n){var r=2;return"string"!=typeof e&&(n=e,e="fx",r--),r>arguments.length?x.queue(this[0],e):n===t?this:this.each(function(){var t=x.queue(this,e,n);x._queueHooks(this,e),"fx"===e&&"inprogress"!==t[0]&&x.dequeue(this,e)})},dequeue:function(e){return this.each(function(){x.dequeue(this,e)})},delay:function(e,t){return e=x.fx?x.fx.speeds[e]||e:e,t=t||"fx",this.queue(t,function(t,n){var r=setTimeout(t,e);n.stop=function(){clearTimeout(r)}})},clearQueue:function(e){return this.queue(e||"fx",[])},promise:function(e,n){var r,i=1,o=x.Deferred(),a=this,s=this.length,l=function(){--i||o.resolveWith(a,[a])};"string"!=typeof e&&(n=e,e=t),e=e||"fx";while(s--)r=x._data(a[s],e+"queueHooks"),r&&r.empty&&(i++,r.empty.add(l));return l(),o.promise(n)}});var z,X,U=/[\t\r\n\f]/g,V=/\r/g,Y=/^(?:input|select|textarea|button|object)$/i,J=/^(?:a|area)$/i,G=/^(?:checked|selected)$/i,Q=x.support.getSetAttribute,K=x.support.input;x.fn.extend({attr:function(e,t){return x.access(this,x.attr,e,t,arguments.length>1)},removeAttr:function(e){return this.each(function(){x.removeAttr(this,e)})},prop:function(e,t){return x.access(this,x.prop,e,t,arguments.length>1)},removeProp:function(e){return e=x.propFix[e]||e,this.each(function(){try{this[e]=t,delete this[e]}catch(n){}})},addClass:function(e){var t,n,r,i,o,a=0,s=this.length,l="string"==typeof e&&e;if(x.isFunction(e))return this.each(function(t){x(this).addClass(e.call(this,t,this.className))});if(l)for(t=(e||"").match(T)||[];s>a;a++)if(n=this[a],r=1===n.nodeType&&(n.className?(" "+n.className+" ").replace(U," "):" ")){o=0;while(i=t[o++])0>r.indexOf(" "+i+" ")&&(r+=i+" ");n.className=x.trim(r)}return this},removeClass:function(e){var t,n,r,i,o,a=0,s=this.length,l=0===arguments.length||"string"==typeof e&&e;if(x.isFunction(e))return this.each(function(t){x(this).removeClass(e.call(this,t,this.className))});if(l)for(t=(e||"").match(T)||[];s>a;a++)if(n=this[a],r=1===n.nodeType&&(n.className?(" "+n.className+" ").replace(U," "):"")){o=0;while(i=t[o++])while(r.indexOf(" "+i+" ")>=0)r=r.replace(" "+i+" "," ");n.className=e?x.trim(r):""}return this},toggleClass:function(e,t){var n=typeof e;return"boolean"==typeof t&&"string"===n?t?this.addClass(e):this.removeClass(e):x.isFunction(e)?this.each(function(n){x(this).toggleClass(e.call(this,n,this.className,t),t)}):this.each(function(){if("string"===n){var t,r=0,o=x(this),a=e.match(T)||[];while(t=a[r++])o.hasClass(t)?o.removeClass(t):o.addClass(t)}else(n===i||"boolean"===n)&&(this.className&&x._data(this,"__className__",this.className),this.className=this.className||e===!1?"":x._data(this,"__className__")||"")})},hasClass:function(e){var t=" "+e+" ",n=0,r=this.length;for(;r>n;n++)if(1===this[n].nodeType&&(" "+this[n].className+" ").replace(U," ").indexOf(t)>=0)return!0;return!1},val:function(e){var n,r,i,o=this[0];{if(arguments.length)return i=x.isFunction(e),this.each(function(n){var o;1===this.nodeType&&(o=i?e.call(this,n,x(this).val()):e,null==o?o="":"number"==typeof o?o+="":x.isArray(o)&&(o=x.map(o,function(e){return null==e?"":e+""})),r=x.valHooks[this.type]||x.valHooks[this.nodeName.toLowerCase()],r&&"set"in r&&r.set(this,o,"value")!==t||(this.value=o))});if(o)return r=x.valHooks[o.type]||x.valHooks[o.nodeName.toLowerCase()],r&&"get"in r&&(n=r.get(o,"value"))!==t?n:(n=o.value,"string"==typeof n?n.replace(V,""):null==n?"":n)}}}),x.extend({valHooks:{option:{get:function(e){var t=x.find.attr(e,"value");return null!=t?t:e.text}},select:{get:function(e){var t,n,r=e.options,i=e.selectedIndex,o="select-one"===e.type||0>i,a=o?null:[],s=o?i+1:r.length,l=0>i?s:o?i:0;for(;s>l;l++)if(n=r[l],!(!n.selected&&l!==i||(x.support.optDisabled?n.disabled:null!==n.getAttribute("disabled"))||n.parentNode.disabled&&x.nodeName(n.parentNode,"optgroup"))){if(t=x(n).val(),o)return t;a.push(t)}return a},set:function(e,t){var n,r,i=e.options,o=x.makeArray(t),a=i.length;while(a--)r=i[a],(r.selected=x.inArray(x(r).val(),o)>=0)&&(n=!0);return n||(e.selectedIndex=-1),o}}},attr:function(e,n,r){var o,a,s=e.nodeType;if(e&&3!==s&&8!==s&&2!==s)return typeof e.getAttribute===i?x.prop(e,n,r):(1===s&&x.isXMLDoc(e)||(n=n.toLowerCase(),o=x.attrHooks[n]||(x.expr.match.bool.test(n)?X:z)),r===t?o&&"get"in o&&null!==(a=o.get(e,n))?a:(a=x.find.attr(e,n),null==a?t:a):null!==r?o&&"set"in o&&(a=o.set(e,r,n))!==t?a:(e.setAttribute(n,r+""),r):(x.removeAttr(e,n),t))},removeAttr:function(e,t){var n,r,i=0,o=t&&t.match(T);if(o&&1===e.nodeType)while(n=o[i++])r=x.propFix[n]||n,x.expr.match.bool.test(n)?K&&Q||!G.test(n)?e[r]=!1:e[x.camelCase("default-"+n)]=e[r]=!1:x.attr(e,n,""),e.removeAttribute(Q?n:r)},attrHooks:{type:{set:function(e,t){if(!x.support.radioValue&&"radio"===t&&x.nodeName(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},propFix:{"for":"htmlFor","class":"className"},prop:function(e,n,r){var i,o,a,s=e.nodeType;if(e&&3!==s&&8!==s&&2!==s)return a=1!==s||!x.isXMLDoc(e),a&&(n=x.propFix[n]||n,o=x.propHooks[n]),r!==t?o&&"set"in o&&(i=o.set(e,r,n))!==t?i:e[n]=r:o&&"get"in o&&null!==(i=o.get(e,n))?i:e[n]},propHooks:{tabIndex:{get:function(e){var t=x.find.attr(e,"tabindex");return t?parseInt(t,10):Y.test(e.nodeName)||J.test(e.nodeName)&&e.href?0:-1}}}}),X={set:function(e,t,n){return t===!1?x.removeAttr(e,n):K&&Q||!G.test(n)?e.setAttribute(!Q&&x.propFix[n]||n,n):e[x.camelCase("default-"+n)]=e[n]=!0,n}},x.each(x.expr.match.bool.source.match(/\w+/g),function(e,n){var r=x.expr.attrHandle[n]||x.find.attr;x.expr.attrHandle[n]=K&&Q||!G.test(n)?function(e,n,i){var o=x.expr.attrHandle[n],a=i?t:(x.expr.attrHandle[n]=t)!=r(e,n,i)?n.toLowerCase():null;return x.expr.attrHandle[n]=o,a}:function(e,n,r){return r?t:e[x.camelCase("default-"+n)]?n.toLowerCase():null}}),K&&Q||(x.attrHooks.value={set:function(e,n,r){return x.nodeName(e,"input")?(e.defaultValue=n,t):z&&z.set(e,n,r)}}),Q||(z={set:function(e,n,r){var i=e.getAttributeNode(r);return i||e.setAttributeNode(i=e.ownerDocument.createAttribute(r)),i.value=n+="","value"===r||n===e.getAttribute(r)?n:t}},x.expr.attrHandle.id=x.expr.attrHandle.name=x.expr.attrHandle.coords=function(e,n,r){var i;return r?t:(i=e.getAttributeNode(n))&&""!==i.value?i.value:null},x.valHooks.button={get:function(e,n){var r=e.getAttributeNode(n);return r&&r.specified?r.value:t},set:z.set},x.attrHooks.contenteditable={set:function(e,t,n){z.set(e,""===t?!1:t,n)}},x.each(["width","height"],function(e,n){x.attrHooks[n]={set:function(e,r){return""===r?(e.setAttribute(n,"auto"),r):t}}})),x.support.hrefNormalized||x.each(["href","src"],function(e,t){x.propHooks[t]={get:function(e){return e.getAttribute(t,4)}}}),x.support.style||(x.attrHooks.style={get:function(e){return e.style.cssText||t},set:function(e,t){return e.style.cssText=t+""}}),x.support.optSelected||(x.propHooks.selected={get:function(e){var t=e.parentNode;return t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex),null}}),x.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){x.propFix[this.toLowerCase()]=this}),x.support.enctype||(x.propFix.enctype="encoding"),x.each(["radio","checkbox"],function(){x.valHooks[this]={set:function(e,n){return x.isArray(n)?e.checked=x.inArray(x(e).val(),n)>=0:t}},x.support.checkOn||(x.valHooks[this].get=function(e){return null===e.getAttribute("value")?"on":e.value})});var Z=/^(?:input|select|textarea)$/i,et=/^key/,tt=/^(?:mouse|contextmenu)|click/,nt=/^(?:focusinfocus|focusoutblur)$/,rt=/^([^.]*)(?:\.(.+)|)$/;function it(){return!0}function ot(){return!1}function at(){try{return a.activeElement}catch(e){}}x.event={global:{},add:function(e,n,r,o,a){var s,l,u,c,p,f,d,h,g,m,y,v=x._data(e);if(v){r.handler&&(c=r,r=c.handler,a=c.selector),r.guid||(r.guid=x.guid++),(l=v.events)||(l=v.events={}),(f=v.handle)||(f=v.handle=function(e){return typeof x===i||e&&x.event.triggered===e.type?t:x.event.dispatch.apply(f.elem,arguments)},f.elem=e),n=(n||"").match(T)||[""],u=n.length;while(u--)s=rt.exec(n[u])||[],g=y=s[1],m=(s[2]||"").split(".").sort(),g&&(p=x.event.special[g]||{},g=(a?p.delegateType:p.bindType)||g,p=x.event.special[g]||{},d=x.extend({type:g,origType:y,data:o,handler:r,guid:r.guid,selector:a,needsContext:a&&x.expr.match.needsContext.test(a),namespace:m.join(".")},c),(h=l[g])||(h=l[g]=[],h.delegateCount=0,p.setup&&p.setup.call(e,o,m,f)!==!1||(e.addEventListener?e.addEventListener(g,f,!1):e.attachEvent&&e.attachEvent("on"+g,f))),p.add&&(p.add.call(e,d),d.handler.guid||(d.handler.guid=r.guid)),a?h.splice(h.delegateCount++,0,d):h.push(d),x.event.global[g]=!0);e=null}},remove:function(e,t,n,r,i){var o,a,s,l,u,c,p,f,d,h,g,m=x.hasData(e)&&x._data(e);if(m&&(c=m.events)){t=(t||"").match(T)||[""],u=t.length;while(u--)if(s=rt.exec(t[u])||[],d=g=s[1],h=(s[2]||"").split(".").sort(),d){p=x.event.special[d]||{},d=(r?p.delegateType:p.bindType)||d,f=c[d]||[],s=s[2]&&RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),l=o=f.length;while(o--)a=f[o],!i&&g!==a.origType||n&&n.guid!==a.guid||s&&!s.test(a.namespace)||r&&r!==a.selector&&("**"!==r||!a.selector)||(f.splice(o,1),a.selector&&f.delegateCount--,p.remove&&p.remove.call(e,a));l&&!f.length&&(p.teardown&&p.teardown.call(e,h,m.handle)!==!1||x.removeEvent(e,d,m.handle),delete c[d])}else for(d in c)x.event.remove(e,d+t[u],n,r,!0);x.isEmptyObject(c)&&(delete m.handle,x._removeData(e,"events"))}},trigger:function(n,r,i,o){var s,l,u,c,p,f,d,h=[i||a],g=v.call(n,"type")?n.type:n,m=v.call(n,"namespace")?n.namespace.split("."):[];if(u=f=i=i||a,3!==i.nodeType&&8!==i.nodeType&&!nt.test(g+x.event.triggered)&&(g.indexOf(".")>=0&&(m=g.split("."),g=m.shift(),m.sort()),l=0>g.indexOf(":")&&"on"+g,n=n[x.expando]?n:new x.Event(g,"object"==typeof n&&n),n.isTrigger=o?2:3,n.namespace=m.join("."),n.namespace_re=n.namespace?RegExp("(^|\\.)"+m.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,n.result=t,n.target||(n.target=i),r=null==r?[n]:x.makeArray(r,[n]),p=x.event.special[g]||{},o||!p.trigger||p.trigger.apply(i,r)!==!1)){if(!o&&!p.noBubble&&!x.isWindow(i)){for(c=p.delegateType||g,nt.test(c+g)||(u=u.parentNode);u;u=u.parentNode)h.push(u),f=u;f===(i.ownerDocument||a)&&h.push(f.defaultView||f.parentWindow||e)}d=0;while((u=h[d++])&&!n.isPropagationStopped())n.type=d>1?c:p.bindType||g,s=(x._data(u,"events")||{})[n.type]&&x._data(u,"handle"),s&&s.apply(u,r),s=l&&u[l],s&&x.acceptData(u)&&s.apply&&s.apply(u,r)===!1&&n.preventDefault();if(n.type=g,!o&&!n.isDefaultPrevented()&&(!p._default||p._default.apply(h.pop(),r)===!1)&&x.acceptData(i)&&l&&i[g]&&!x.isWindow(i)){f=i[l],f&&(i[l]=null),x.event.triggered=g;try{i[g]()}catch(y){}x.event.triggered=t,f&&(i[l]=f)}return n.result}},dispatch:function(e){e=x.event.fix(e);var n,r,i,o,a,s=[],l=g.call(arguments),u=(x._data(this,"events")||{})[e.type]||[],c=x.event.special[e.type]||{};if(l[0]=e,e.delegateTarget=this,!c.preDispatch||c.preDispatch.call(this,e)!==!1){s=x.event.handlers.call(this,e,u),n=0;while((o=s[n++])&&!e.isPropagationStopped()){e.currentTarget=o.elem,a=0;while((i=o.handlers[a++])&&!e.isImmediatePropagationStopped())(!e.namespace_re||e.namespace_re.test(i.namespace))&&(e.handleObj=i,e.data=i.data,r=((x.event.special[i.origType]||{}).handle||i.handler).apply(o.elem,l),r!==t&&(e.result=r)===!1&&(e.preventDefault(),e.stopPropagation()))}return c.postDispatch&&c.postDispatch.call(this,e),e.result}},handlers:function(e,n){var r,i,o,a,s=[],l=n.delegateCount,u=e.target;if(l&&u.nodeType&&(!e.button||"click"!==e.type))for(;u!=this;u=u.parentNode||this)if(1===u.nodeType&&(u.disabled!==!0||"click"!==e.type)){for(o=[],a=0;l>a;a++)i=n[a],r=i.selector+" ",o[r]===t&&(o[r]=i.needsContext?x(r,this).index(u)>=0:x.find(r,this,null,[u]).length),o[r]&&o.push(i);o.length&&s.push({elem:u,handlers:o})}return n.length>l&&s.push({elem:this,handlers:n.slice(l)}),s},fix:function(e){if(e[x.expando])return e;var t,n,r,i=e.type,o=e,s=this.fixHooks[i];s||(this.fixHooks[i]=s=tt.test(i)?this.mouseHooks:et.test(i)?this.keyHooks:{}),r=s.props?this.props.concat(s.props):this.props,e=new x.Event(o),t=r.length;while(t--)n=r[t],e[n]=o[n];return e.target||(e.target=o.srcElement||a),3===e.target.nodeType&&(e.target=e.target.parentNode),e.metaKey=!!e.metaKey,s.filter?s.filter(e,o):e},props:"altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(e,t){return null==e.which&&(e.which=null!=t.charCode?t.charCode:t.keyCode),e}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(e,n){var r,i,o,s=n.button,l=n.fromElement;return null==e.pageX&&null!=n.clientX&&(i=e.target.ownerDocument||a,o=i.documentElement,r=i.body,e.pageX=n.clientX+(o&&o.scrollLeft||r&&r.scrollLeft||0)-(o&&o.clientLeft||r&&r.clientLeft||0),e.pageY=n.clientY+(o&&o.scrollTop||r&&r.scrollTop||0)-(o&&o.clientTop||r&&r.clientTop||0)),!e.relatedTarget&&l&&(e.relatedTarget=l===e.target?n.toElement:l),e.which||s===t||(e.which=1&s?1:2&s?3:4&s?2:0),e}},special:{load:{noBubble:!0},focus:{trigger:function(){if(this!==at()&&this.focus)try{return this.focus(),!1}catch(e){}},delegateType:"focusin"},blur:{trigger:function(){return this===at()&&this.blur?(this.blur(),!1):t},delegateType:"focusout"},click:{trigger:function(){return x.nodeName(this,"input")&&"checkbox"===this.type&&this.click?(this.click(),!1):t},_default:function(e){return x.nodeName(e.target,"a")}},beforeunload:{postDispatch:function(e){e.result!==t&&(e.originalEvent.returnValue=e.result)}}},simulate:function(e,t,n,r){var i=x.extend(new x.Event,n,{type:e,isSimulated:!0,originalEvent:{}});r?x.event.trigger(i,null,t):x.event.dispatch.call(t,i),i.isDefaultPrevented()&&n.preventDefault()}},x.removeEvent=a.removeEventListener?function(e,t,n){e.removeEventListener&&e.removeEventListener(t,n,!1)}:function(e,t,n){var r="on"+t;e.detachEvent&&(typeof e[r]===i&&(e[r]=null),e.detachEvent(r,n))},x.Event=function(e,n){return this instanceof x.Event?(e&&e.type?(this.originalEvent=e,this.type=e.type,this.isDefaultPrevented=e.defaultPrevented||e.returnValue===!1||e.getPreventDefault&&e.getPreventDefault()?it:ot):this.type=e,n&&x.extend(this,n),this.timeStamp=e&&e.timeStamp||x.now(),this[x.expando]=!0,t):new x.Event(e,n)},x.Event.prototype={isDefaultPrevented:ot,isPropagationStopped:ot,isImmediatePropagationStopped:ot,preventDefault:function(){var e=this.originalEvent;this.isDefaultPrevented=it,e&&(e.preventDefault?e.preventDefault():e.returnValue=!1)},stopPropagation:function(){var e=this.originalEvent;this.isPropagationStopped=it,e&&(e.stopPropagation&&e.stopPropagation(),e.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=it,this.stopPropagation()}},x.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(e,t){x.event.special[e]={delegateType:t,bindType:t,handle:function(e){var n,r=this,i=e.relatedTarget,o=e.handleObj;return(!i||i!==r&&!x.contains(r,i))&&(e.type=o.origType,n=o.handler.apply(this,arguments),e.type=t),n}}}),x.support.submitBubbles||(x.event.special.submit={setup:function(){return x.nodeName(this,"form")?!1:(x.event.add(this,"click._submit keypress._submit",function(e){var n=e.target,r=x.nodeName(n,"input")||x.nodeName(n,"button")?n.form:t;r&&!x._data(r,"submitBubbles")&&(x.event.add(r,"submit._submit",function(e){e._submit_bubble=!0}),x._data(r,"submitBubbles",!0))}),t)},postDispatch:function(e){e._submit_bubble&&(delete e._submit_bubble,this.parentNode&&!e.isTrigger&&x.event.simulate("submit",this.parentNode,e,!0))},teardown:function(){return x.nodeName(this,"form")?!1:(x.event.remove(this,"._submit"),t)}}),x.support.changeBubbles||(x.event.special.change={setup:function(){return Z.test(this.nodeName)?(("checkbox"===this.type||"radio"===this.type)&&(x.event.add(this,"propertychange._change",function(e){"checked"===e.originalEvent.propertyName&&(this._just_changed=!0)}),x.event.add(this,"click._change",function(e){this._just_changed&&!e.isTrigger&&(this._just_changed=!1),x.event.simulate("change",this,e,!0)})),!1):(x.event.add(this,"beforeactivate._change",function(e){var t=e.target;Z.test(t.nodeName)&&!x._data(t,"changeBubbles")&&(x.event.add(t,"change._change",function(e){!this.parentNode||e.isSimulated||e.isTrigger||x.event.simulate("change",this.parentNode,e,!0)}),x._data(t,"changeBubbles",!0))}),t)},handle:function(e){var n=e.target;return this!==n||e.isSimulated||e.isTrigger||"radio"!==n.type&&"checkbox"!==n.type?e.handleObj.handler.apply(this,arguments):t},teardown:function(){return x.event.remove(this,"._change"),!Z.test(this.nodeName)}}),x.support.focusinBubbles||x.each({focus:"focusin",blur:"focusout"},function(e,t){var n=0,r=function(e){x.event.simulate(t,e.target,x.event.fix(e),!0)};x.event.special[t]={setup:function(){0===n++&&a.addEventListener(e,r,!0)},teardown:function(){0===--n&&a.removeEventListener(e,r,!0)}}}),x.fn.extend({on:function(e,n,r,i,o){var a,s;if("object"==typeof e){"string"!=typeof n&&(r=r||n,n=t);for(a in e)this.on(a,n,r,e[a],o);return this}if(null==r&&null==i?(i=n,r=n=t):null==i&&("string"==typeof n?(i=r,r=t):(i=r,r=n,n=t)),i===!1)i=ot;else if(!i)return this;return 1===o&&(s=i,i=function(e){return x().off(e),s.apply(this,arguments)},i.guid=s.guid||(s.guid=x.guid++)),this.each(function(){x.event.add(this,e,i,r,n)})},one:function(e,t,n,r){return this.on(e,t,n,r,1)},off:function(e,n,r){var i,o;if(e&&e.preventDefault&&e.handleObj)return i=e.handleObj,x(e.delegateTarget).off(i.namespace?i.origType+"."+i.namespace:i.origType,i.selector,i.handler),this;if("object"==typeof e){for(o in e)this.off(o,n,e[o]);return this}return(n===!1||"function"==typeof n)&&(r=n,n=t),r===!1&&(r=ot),this.each(function(){x.event.remove(this,e,r,n)})},trigger:function(e,t){return this.each(function(){x.event.trigger(e,t,this)})},triggerHandler:function(e,n){var r=this[0];return r?x.event.trigger(e,n,r,!0):t}});var st=/^.[^:#\[\.,]*$/,lt=/^(?:parents|prev(?:Until|All))/,ut=x.expr.match.needsContext,ct={children:!0,contents:!0,next:!0,prev:!0};x.fn.extend({find:function(e){var t,n=[],r=this,i=r.length;if("string"!=typeof e)return this.pushStack(x(e).filter(function(){for(t=0;i>t;t++)if(x.contains(r[t],this))return!0}));for(t=0;i>t;t++)x.find(e,r[t],n);return n=this.pushStack(i>1?x.unique(n):n),n.selector=this.selector?this.selector+" "+e:e,n},has:function(e){var t,n=x(e,this),r=n.length;return this.filter(function(){for(t=0;r>t;t++)if(x.contains(this,n[t]))return!0})},not:function(e){return this.pushStack(ft(this,e||[],!0))},filter:function(e){return this.pushStack(ft(this,e||[],!1))},is:function(e){return!!ft(this,"string"==typeof e&&ut.test(e)?x(e):e||[],!1).length},closest:function(e,t){var n,r=0,i=this.length,o=[],a=ut.test(e)||"string"!=typeof e?x(e,t||this.context):0;for(;i>r;r++)for(n=this[r];n&&n!==t;n=n.parentNode)if(11>n.nodeType&&(a?a.index(n)>-1:1===n.nodeType&&x.find.matchesSelector(n,e))){n=o.push(n);break}return this.pushStack(o.length>1?x.unique(o):o)},index:function(e){return e?"string"==typeof e?x.inArray(this[0],x(e)):x.inArray(e.jquery?e[0]:e,this):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){var n="string"==typeof e?x(e,t):x.makeArray(e&&e.nodeType?[e]:e),r=x.merge(this.get(),n);return this.pushStack(x.unique(r))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}});function pt(e,t){do e=e[t];while(e&&1!==e.nodeType);return e}x.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return x.dir(e,"parentNode")},parentsUntil:function(e,t,n){return x.dir(e,"parentNode",n)},next:function(e){return pt(e,"nextSibling")},prev:function(e){return pt(e,"previousSibling")},nextAll:function(e){return x.dir(e,"nextSibling")},prevAll:function(e){return x.dir(e,"previousSibling")},nextUntil:function(e,t,n){return x.dir(e,"nextSibling",n)},prevUntil:function(e,t,n){return x.dir(e,"previousSibling",n)},siblings:function(e){return x.sibling((e.parentNode||{}).firstChild,e)},children:function(e){return x.sibling(e.firstChild)},contents:function(e){return x.nodeName(e,"iframe")?e.contentDocument||e.contentWindow.document:x.merge([],e.childNodes)}},function(e,t){x.fn[e]=function(n,r){var i=x.map(this,t,n);return"Until"!==e.slice(-5)&&(r=n),r&&"string"==typeof r&&(i=x.filter(r,i)),this.length>1&&(ct[e]||(i=x.unique(i)),lt.test(e)&&(i=i.reverse())),this.pushStack(i)}}),x.extend({filter:function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?x.find.matchesSelector(r,e)?[r]:[]:x.find.matches(e,x.grep(t,function(e){return 1===e.nodeType}))},dir:function(e,n,r){var i=[],o=e[n];while(o&&9!==o.nodeType&&(r===t||1!==o.nodeType||!x(o).is(r)))1===o.nodeType&&i.push(o),o=o[n];return i},sibling:function(e,t){var n=[];for(;e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n}});function ft(e,t,n){if(x.isFunction(t))return x.grep(e,function(e,r){return!!t.call(e,r,e)!==n});if(t.nodeType)return x.grep(e,function(e){return e===t!==n});if("string"==typeof t){if(st.test(t))return x.filter(t,e,n);t=x.filter(t,e)}return x.grep(e,function(e){return x.inArray(e,t)>=0!==n})}function dt(e){var t=ht.split("|"),n=e.createDocumentFragment();if(n.createElement)while(t.length)n.createElement(t.pop());return n}var ht="abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",gt=/ jQuery\d+="(?:null|\d+)"/g,mt=RegExp("<(?:"+ht+")[\\s/>]","i"),yt=/^\s+/,vt=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,bt=/<([\w:]+)/,xt=/\s*$/g,At={option:[1,""],legend:[1,"
                    ","
                    "],area:[1,"",""],param:[1,"",""],thead:[1,"","
                    "],tr:[2,"","
                    "],col:[2,"","
                    "],td:[3,"","
                    "],_default:x.support.htmlSerialize?[0,"",""]:[1,"X
                    ","
                    "]},jt=dt(a),Dt=jt.appendChild(a.createElement("div"));At.optgroup=At.option,At.tbody=At.tfoot=At.colgroup=At.caption=At.thead,At.th=At.td,x.fn.extend({text:function(e){return x.access(this,function(e){return e===t?x.text(this):this.empty().append((this[0]&&this[0].ownerDocument||a).createTextNode(e))},null,e,arguments.length)},append:function(){return this.domManip(arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=Lt(this,e);t.appendChild(e)}})},prepend:function(){return this.domManip(arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=Lt(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return this.domManip(arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return this.domManip(arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},remove:function(e,t){var n,r=e?x.filter(e,this):this,i=0;for(;null!=(n=r[i]);i++)t||1!==n.nodeType||x.cleanData(Ft(n)),n.parentNode&&(t&&x.contains(n.ownerDocument,n)&&_t(Ft(n,"script")),n.parentNode.removeChild(n));return this},empty:function(){var e,t=0;for(;null!=(e=this[t]);t++){1===e.nodeType&&x.cleanData(Ft(e,!1));while(e.firstChild)e.removeChild(e.firstChild);e.options&&x.nodeName(e,"select")&&(e.options.length=0)}return this},clone:function(e,t){return e=null==e?!1:e,t=null==t?e:t,this.map(function(){return x.clone(this,e,t)})},html:function(e){return x.access(this,function(e){var n=this[0]||{},r=0,i=this.length;if(e===t)return 1===n.nodeType?n.innerHTML.replace(gt,""):t;if(!("string"!=typeof e||Tt.test(e)||!x.support.htmlSerialize&&mt.test(e)||!x.support.leadingWhitespace&&yt.test(e)||At[(bt.exec(e)||["",""])[1].toLowerCase()])){e=e.replace(vt,"<$1>");try{for(;i>r;r++)n=this[r]||{},1===n.nodeType&&(x.cleanData(Ft(n,!1)),n.innerHTML=e);n=0}catch(o){}}n&&this.empty().append(e)},null,e,arguments.length)},replaceWith:function(){var e=x.map(this,function(e){return[e.nextSibling,e.parentNode]}),t=0;return this.domManip(arguments,function(n){var r=e[t++],i=e[t++];i&&(r&&r.parentNode!==i&&(r=this.nextSibling),x(this).remove(),i.insertBefore(n,r))},!0),t?this:this.remove()},detach:function(e){return this.remove(e,!0)},domManip:function(e,t,n){e=d.apply([],e);var r,i,o,a,s,l,u=0,c=this.length,p=this,f=c-1,h=e[0],g=x.isFunction(h);if(g||!(1>=c||"string"!=typeof h||x.support.checkClone)&&Nt.test(h))return this.each(function(r){var i=p.eq(r);g&&(e[0]=h.call(this,r,i.html())),i.domManip(e,t,n)});if(c&&(l=x.buildFragment(e,this[0].ownerDocument,!1,!n&&this),r=l.firstChild,1===l.childNodes.length&&(l=r),r)){for(a=x.map(Ft(l,"script"),Ht),o=a.length;c>u;u++)i=l,u!==f&&(i=x.clone(i,!0,!0),o&&x.merge(a,Ft(i,"script"))),t.call(this[u],i,u);if(o)for(s=a[a.length-1].ownerDocument,x.map(a,qt),u=0;o>u;u++)i=a[u],kt.test(i.type||"")&&!x._data(i,"globalEval")&&x.contains(s,i)&&(i.src?x._evalUrl(i.src):x.globalEval((i.text||i.textContent||i.innerHTML||"").replace(St,"")));l=r=null}return this}});function Lt(e,t){return x.nodeName(e,"table")&&x.nodeName(1===t.nodeType?t:t.firstChild,"tr")?e.getElementsByTagName("tbody")[0]||e.appendChild(e.ownerDocument.createElement("tbody")):e}function Ht(e){return e.type=(null!==x.find.attr(e,"type"))+"/"+e.type,e}function qt(e){var t=Et.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function _t(e,t){var n,r=0;for(;null!=(n=e[r]);r++)x._data(n,"globalEval",!t||x._data(t[r],"globalEval"))}function Mt(e,t){if(1===t.nodeType&&x.hasData(e)){var n,r,i,o=x._data(e),a=x._data(t,o),s=o.events;if(s){delete a.handle,a.events={};for(n in s)for(r=0,i=s[n].length;i>r;r++)x.event.add(t,n,s[n][r])}a.data&&(a.data=x.extend({},a.data))}}function Ot(e,t){var n,r,i;if(1===t.nodeType){if(n=t.nodeName.toLowerCase(),!x.support.noCloneEvent&&t[x.expando]){i=x._data(t);for(r in i.events)x.removeEvent(t,r,i.handle);t.removeAttribute(x.expando)}"script"===n&&t.text!==e.text?(Ht(t).text=e.text,qt(t)):"object"===n?(t.parentNode&&(t.outerHTML=e.outerHTML),x.support.html5Clone&&e.innerHTML&&!x.trim(t.innerHTML)&&(t.innerHTML=e.innerHTML)):"input"===n&&Ct.test(e.type)?(t.defaultChecked=t.checked=e.checked,t.value!==e.value&&(t.value=e.value)):"option"===n?t.defaultSelected=t.selected=e.defaultSelected:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}}x.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(e,t){x.fn[e]=function(e){var n,r=0,i=[],o=x(e),a=o.length-1;for(;a>=r;r++)n=r===a?this:this.clone(!0),x(o[r])[t](n),h.apply(i,n.get());return this.pushStack(i)}});function Ft(e,n){var r,o,a=0,s=typeof e.getElementsByTagName!==i?e.getElementsByTagName(n||"*"):typeof e.querySelectorAll!==i?e.querySelectorAll(n||"*"):t;if(!s)for(s=[],r=e.childNodes||e;null!=(o=r[a]);a++)!n||x.nodeName(o,n)?s.push(o):x.merge(s,Ft(o,n));return n===t||n&&x.nodeName(e,n)?x.merge([e],s):s}function Bt(e){Ct.test(e.type)&&(e.defaultChecked=e.checked)}x.extend({clone:function(e,t,n){var r,i,o,a,s,l=x.contains(e.ownerDocument,e);if(x.support.html5Clone||x.isXMLDoc(e)||!mt.test("<"+e.nodeName+">")?o=e.cloneNode(!0):(Dt.innerHTML=e.outerHTML,Dt.removeChild(o=Dt.firstChild)),!(x.support.noCloneEvent&&x.support.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||x.isXMLDoc(e)))for(r=Ft(o),s=Ft(e),a=0;null!=(i=s[a]);++a)r[a]&&Ot(i,r[a]);if(t)if(n)for(s=s||Ft(e),r=r||Ft(o),a=0;null!=(i=s[a]);a++)Mt(i,r[a]);else Mt(e,o);return r=Ft(o,"script"),r.length>0&&_t(r,!l&&Ft(e,"script")),r=s=i=null,o},buildFragment:function(e,t,n,r){var i,o,a,s,l,u,c,p=e.length,f=dt(t),d=[],h=0;for(;p>h;h++)if(o=e[h],o||0===o)if("object"===x.type(o))x.merge(d,o.nodeType?[o]:o);else if(wt.test(o)){s=s||f.appendChild(t.createElement("div")),l=(bt.exec(o)||["",""])[1].toLowerCase(),c=At[l]||At._default,s.innerHTML=c[1]+o.replace(vt,"<$1>")+c[2],i=c[0];while(i--)s=s.lastChild;if(!x.support.leadingWhitespace&&yt.test(o)&&d.push(t.createTextNode(yt.exec(o)[0])),!x.support.tbody){o="table"!==l||xt.test(o)?""!==c[1]||xt.test(o)?0:s:s.firstChild,i=o&&o.childNodes.length;while(i--)x.nodeName(u=o.childNodes[i],"tbody")&&!u.childNodes.length&&o.removeChild(u)}x.merge(d,s.childNodes),s.textContent="";while(s.firstChild)s.removeChild(s.firstChild);s=f.lastChild}else d.push(t.createTextNode(o));s&&f.removeChild(s),x.support.appendChecked||x.grep(Ft(d,"input"),Bt),h=0;while(o=d[h++])if((!r||-1===x.inArray(o,r))&&(a=x.contains(o.ownerDocument,o),s=Ft(f.appendChild(o),"script"),a&&_t(s),n)){i=0;while(o=s[i++])kt.test(o.type||"")&&n.push(o)}return s=null,f},cleanData:function(e,t){var n,r,o,a,s=0,l=x.expando,u=x.cache,c=x.support.deleteExpando,f=x.event.special;for(;null!=(n=e[s]);s++)if((t||x.acceptData(n))&&(o=n[l],a=o&&u[o])){if(a.events)for(r in a.events)f[r]?x.event.remove(n,r):x.removeEvent(n,r,a.handle);
+u[o]&&(delete u[o],c?delete n[l]:typeof n.removeAttribute!==i?n.removeAttribute(l):n[l]=null,p.push(o))}},_evalUrl:function(e){return x.ajax({url:e,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0})}}),x.fn.extend({wrapAll:function(e){if(x.isFunction(e))return this.each(function(t){x(this).wrapAll(e.call(this,t))});if(this[0]){var t=x(e,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstChild&&1===e.firstChild.nodeType)e=e.firstChild;return e}).append(this)}return this},wrapInner:function(e){return x.isFunction(e)?this.each(function(t){x(this).wrapInner(e.call(this,t))}):this.each(function(){var t=x(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=x.isFunction(e);return this.each(function(n){x(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(){return this.parent().each(function(){x.nodeName(this,"body")||x(this).replaceWith(this.childNodes)}).end()}});var Pt,Rt,Wt,$t=/alpha\([^)]*\)/i,It=/opacity\s*=\s*([^)]*)/,zt=/^(top|right|bottom|left)$/,Xt=/^(none|table(?!-c[ea]).+)/,Ut=/^margin/,Vt=RegExp("^("+w+")(.*)$","i"),Yt=RegExp("^("+w+")(?!px)[a-z%]+$","i"),Jt=RegExp("^([+-])=("+w+")","i"),Gt={BODY:"block"},Qt={position:"absolute",visibility:"hidden",display:"block"},Kt={letterSpacing:0,fontWeight:400},Zt=["Top","Right","Bottom","Left"],en=["Webkit","O","Moz","ms"];function tn(e,t){if(t in e)return t;var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=en.length;while(i--)if(t=en[i]+n,t in e)return t;return r}function nn(e,t){return e=t||e,"none"===x.css(e,"display")||!x.contains(e.ownerDocument,e)}function rn(e,t){var n,r,i,o=[],a=0,s=e.length;for(;s>a;a++)r=e[a],r.style&&(o[a]=x._data(r,"olddisplay"),n=r.style.display,t?(o[a]||"none"!==n||(r.style.display=""),""===r.style.display&&nn(r)&&(o[a]=x._data(r,"olddisplay",ln(r.nodeName)))):o[a]||(i=nn(r),(n&&"none"!==n||!i)&&x._data(r,"olddisplay",i?n:x.css(r,"display"))));for(a=0;s>a;a++)r=e[a],r.style&&(t&&"none"!==r.style.display&&""!==r.style.display||(r.style.display=t?o[a]||"":"none"));return e}x.fn.extend({css:function(e,n){return x.access(this,function(e,n,r){var i,o,a={},s=0;if(x.isArray(n)){for(o=Rt(e),i=n.length;i>s;s++)a[n[s]]=x.css(e,n[s],!1,o);return a}return r!==t?x.style(e,n,r):x.css(e,n)},e,n,arguments.length>1)},show:function(){return rn(this,!0)},hide:function(){return rn(this)},toggle:function(e){return"boolean"==typeof e?e?this.show():this.hide():this.each(function(){nn(this)?x(this).show():x(this).hide()})}}),x.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=Wt(e,"opacity");return""===n?"1":n}}}},cssNumber:{columnCount:!0,fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":x.support.cssFloat?"cssFloat":"styleFloat"},style:function(e,n,r,i){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var o,a,s,l=x.camelCase(n),u=e.style;if(n=x.cssProps[l]||(x.cssProps[l]=tn(u,l)),s=x.cssHooks[n]||x.cssHooks[l],r===t)return s&&"get"in s&&(o=s.get(e,!1,i))!==t?o:u[n];if(a=typeof r,"string"===a&&(o=Jt.exec(r))&&(r=(o[1]+1)*o[2]+parseFloat(x.css(e,n)),a="number"),!(null==r||"number"===a&&isNaN(r)||("number"!==a||x.cssNumber[l]||(r+="px"),x.support.clearCloneStyle||""!==r||0!==n.indexOf("background")||(u[n]="inherit"),s&&"set"in s&&(r=s.set(e,r,i))===t)))try{u[n]=r}catch(c){}}},css:function(e,n,r,i){var o,a,s,l=x.camelCase(n);return n=x.cssProps[l]||(x.cssProps[l]=tn(e.style,l)),s=x.cssHooks[n]||x.cssHooks[l],s&&"get"in s&&(a=s.get(e,!0,r)),a===t&&(a=Wt(e,n,i)),"normal"===a&&n in Kt&&(a=Kt[n]),""===r||r?(o=parseFloat(a),r===!0||x.isNumeric(o)?o||0:a):a}}),e.getComputedStyle?(Rt=function(t){return e.getComputedStyle(t,null)},Wt=function(e,n,r){var i,o,a,s=r||Rt(e),l=s?s.getPropertyValue(n)||s[n]:t,u=e.style;return s&&(""!==l||x.contains(e.ownerDocument,e)||(l=x.style(e,n)),Yt.test(l)&&Ut.test(n)&&(i=u.width,o=u.minWidth,a=u.maxWidth,u.minWidth=u.maxWidth=u.width=l,l=s.width,u.width=i,u.minWidth=o,u.maxWidth=a)),l}):a.documentElement.currentStyle&&(Rt=function(e){return e.currentStyle},Wt=function(e,n,r){var i,o,a,s=r||Rt(e),l=s?s[n]:t,u=e.style;return null==l&&u&&u[n]&&(l=u[n]),Yt.test(l)&&!zt.test(n)&&(i=u.left,o=e.runtimeStyle,a=o&&o.left,a&&(o.left=e.currentStyle.left),u.left="fontSize"===n?"1em":l,l=u.pixelLeft+"px",u.left=i,a&&(o.left=a)),""===l?"auto":l});function on(e,t,n){var r=Vt.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function an(e,t,n,r,i){var o=n===(r?"border":"content")?4:"width"===t?1:0,a=0;for(;4>o;o+=2)"margin"===n&&(a+=x.css(e,n+Zt[o],!0,i)),r?("content"===n&&(a-=x.css(e,"padding"+Zt[o],!0,i)),"margin"!==n&&(a-=x.css(e,"border"+Zt[o]+"Width",!0,i))):(a+=x.css(e,"padding"+Zt[o],!0,i),"padding"!==n&&(a+=x.css(e,"border"+Zt[o]+"Width",!0,i)));return a}function sn(e,t,n){var r=!0,i="width"===t?e.offsetWidth:e.offsetHeight,o=Rt(e),a=x.support.boxSizing&&"border-box"===x.css(e,"boxSizing",!1,o);if(0>=i||null==i){if(i=Wt(e,t,o),(0>i||null==i)&&(i=e.style[t]),Yt.test(i))return i;r=a&&(x.support.boxSizingReliable||i===e.style[t]),i=parseFloat(i)||0}return i+an(e,t,n||(a?"border":"content"),r,o)+"px"}function ln(e){var t=a,n=Gt[e];return n||(n=un(e,t),"none"!==n&&n||(Pt=(Pt||x("