Merge branch 'update' into develop

2015-12-23 23:09:43 +01:00 · 2015-12-23 23:09:43 +01:00 · 9f723a45ee
commit 9f723a45ee
parent af20f1e045 f2e76ee1f3
124 changed files with 10878 additions and 2600 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,7 +2,6 @@
 .DS_Store
 .AppleDouble
 .LSOverride
-Icon

 # Thumbnails
 ._*
--- a/2
+++ b/2
@ -1,6 +1,6 @@
 The MIT License (MIT)

-Copyright (c) 2013 Georg Fischer
+Copyright (c) 2015 Georg Fischer

 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in
--- a/README.md
+++ b/README.md
@ -3,12 +3,44 @@ image glitch experiment

 this is an experiment for the web browser. it corrupts jpg images so that they appear "glitched".

-[![glitch experiment screen shot](http://dl.dropboxusercontent.com/u/1098704/Screenshots/github-glitch.png)](http://snorpey.github.io/jpg-glitch/)
+[![glitch experiment screen shot](images/screenshot.png)](http://snorpey.github.io/jpg-glitch/)

 [online demo](http://snorpey.github.io/jpg-glitch/)

 this experiment is very much based on the [smack my glitch up js](https://github.com/Hugosslade/smackmyglitchupjs) script.

+glitch effect code
+---
+if you're a developer and just interested in the code for the glitch effect, there's a separate repository for that: [glitch-canvas](https://github.com/snorpey/glitch-canvas).
+
+third party code used in this experiment
+---
+* [localforage](https://github.com/mozilla/localForage) by [mozilla](https://github.com/mozilla), Apache License 2.0
+* [requirejs](http://requirejs.org/), by [jrburke](jrburke), BSD & MIT license
+* [almond](https://github.com/jrburke/almond), by [jrburke](jrburke), BSD & MIT license
+* [javascript-md5](https://blueimp.github.io/JavaScript-MD5/), by [blueimp](https://github.com/blueimp), MIT license
+* [reqwest](https://github.com/ded/reqwest/), by [ded](https://github.com/ded), MIT license
+* [glitch-canvas](https://github.com/snorpey/glitch-canvas/), by [snorpey](https://github.com/snorpey), MIT license
+* [material design icons](https://github.com/Templarian/MaterialDesign), by [templarian](https://github.com/templarian), Open Font License 1.1
+
+license
+---
+[MIT License](LICENSE)
+
+development
+---
+if you're interested in adding features, fixing bugs the code, or running the tool on your own server, here are some pointers to help you get familar with the code base.
+
+if you have questions about the code, don't hesitate to open an [issue](issues) or send me an email.
+
+* ``config.js``: all defaults and settings are in here
+* ``glitcher.js`` the main app starting point. all events are hooked up in here.
+* the app does not use any big dom libraries or app frameworks (like jquery, angular or react)
+* where possible, the app uses webworkers for complex tasks
+* all strings that are displayed to the user are located in the ``lang/`` folder. for each language, a different file is created.
+* the app uses a serviceworker to make it available offline in [browsers](http://caniuse.com/#feat=serviceworkers) that support it
+* the app was built without any preprocessors in mind. using the [build script](#build-script) is entirely optional and not required to get the app to work.
+
 build script
 ---
 the build script takes care of concatenating and minifying all scripts and styles. it uses [gruntjs](http://gruntjs.com/).
@ -18,20 +50,3 @@ please make sure that both [nodejs](http://nodejs.org/) and grunt-cli are [set u
 run ```npm install``` from within the ```build/``` folder to install the dependencies of the build script.

 to build, run ```grunt production``` from within the ```build/``` folder. the optimized files will get copied to the ```production/``` folder.
-
-glitch code
---
-if you're a developer and just interested in the code for the glitch effect, there's a separate repository for that: [glitch-canvas](https://github.com/snorpey/glitch-canvas).
-
-third party code used in this experiment
---
-* [js signals](http://millermedeiros.github.io/js-signals/) by [millermedeiros](https://github.com/millermedeiros), MIT license
-* [require js](http://requirejs.org/), by [jrburke](jrburke), BSD & MIT license
-* [almond js](https://github.com/jrburke/almond), by [jrburke](jrburke), BSD & MIT license
-* [raf js](https://gist.github.com/paulirish/1579671), by [paulirish](https://github.com/paulirish), MIT license
-* [reqwest js](https://github.com/ded/reqwest/), by [ded](https://github.com/ded), MIT license
-* [glitch-canvas js](https://github.com/snorpey/glitch-canvas/), by [snorpey](snorpey), MIT license
-
-license
---
-[MIT License](LICENSE)
--- a/build/Gruntfile.js
+++ b/build/Gruntfile.js
@ -1,59 +1,197 @@
 // http://gruntjs.com/configuring-tasks
-module.exports = function( grunt )
-{
+module.exports = function( grunt ) {
 	var grunt_configuration = {
 		pkg: grunt.file.readJSON( 'package.json' ),
+
+		// concatenate all javascript files in scripts folder and compress them;
+		// replace requirejs with the more lightweight almond js
 		requirejs: {
-			index: {
+			production: {
 				options: {
-					name: 'lib/almond-0.2.6',
-					include: 'main',
+					name: 'lib/almond',
+					include: 'glitcher',
 					baseUrl: '../scripts/',
-					mainConfigFile: '../scripts/main.js',
-					out: '../production/scripts/main.min.js',
+					mainConfigFile: '../scripts/glitcher.js',
+					out: '../production/glitcher.min.js',
 					wrap: true
 				}
 			}
 		},
+
+		// minify css files in styles dir
 		cssmin: {
-			inline_import: {
+			production: {
 				files: {
-					'../production/styles/main.min.css': [ '../styles/main.css' ]
+					'../production/glitcher.min.css': [ '../styles/glitcher.css' ]
 				}
 			}
 		},
-		copy: {
-			copy_html: {
-				options: { processContent: updateHTML },
+
+		// minify svg files
+		svgmin: {
+			production: {
+				options: {
+					plugins: [
+						{ removeViewBox: false }
+					]
+				},
+				files: [ {
+					expand: true,
+					cwd: '../',
+					src: 'images/icon/*.svg',
+					dest: '../production/'
+				}, {
+					expand: true,
+					cwd: '../',
+					src: 'images/logos/*.svg',
+					dest: '../production/'
+				} ]
+			}
+		},
+
+		uglify: {
+			options: {
+				compress: {
+					dead_code: true,
+					properties: true,
+					booleans: true,
+					unused: true,
+					hoist_funs: true,
+					hoist_vars: true,
+					if_return: true,
+					join_vars: true
+				},
+				mangle: {
+					sort: true,
+					toplevel: true
+				}
+			},
+			production: {
 				files: [
-					{ src: [ '../index.html' ], dest: '../production/index.html' }
+					{ src: '../serviceworker.js', dest: '../production/serviceworker.min.js' },
+					{ src: '../scripts/workers/glitchworker.js', dest: '../production/glitchworker.min.js' },
+					{ src: [
+						'../scripts/lib/localforage.nopromises.js',
+						'../scripts/lib/md5.js',
+						'../scripts/workers/storageworker.js'
+					], dest: '../production/storageworker.min.js' },
+					{ src: [
+						'../scripts/lib/localforage.nopromises.js',
+						'../scripts/workers/settingsworker.js'
+					], dest: '../production/settingsworker.min.js' }
 				]
 			}
 		},
-		imagemin: {
-			jpg: {
-				options: { progressive: true },
+
+		// copy the index file
+		copy: {
+			productionTextBasedFiles: {
+				options: { processContent: updateContent },
 				files: [
+					{ src: '../index.html', dest: '../production/index.html' },
+					{ src: '../manifest.json', dest: '../production/manifest.json' },
 					{
 						expand: true,
 						cwd: '../',
-						src: [ '**/*.jpg', '!**/production/**', '!**/node_modules/**' ],
-						dest: '../production/',
-						ext: '.jpg'
-					}
+						src: [ 'lang/*.json' ],
+						dest: '../production/'
+					},
+					
+					// copying these files 'in place' to apply updateContent function 
+					// that updates some of the paths in the minified files
+					{ src: '../production/glitcher.min.js', dest: '../production/glitcher.min.js' },
+					{ src: '../production/serviceworker.min.js', dest: '../production/serviceworker.min.js' },
+					{ src: '../production/storageworker.min.js', dest: '../production/storageworker.min.js' },
+					{ src: '../production/settingsworker.min.js', dest: '../production/settingsworker.min.js' },
+					{ src: '../production/glitcher.min.css', dest: '../production/glitcher.min.css' }
 				]
+			},
+			productionBinaryFiles: {
+				files: [ {
+					expand: true,
+					cwd: '../',
+					src: [ 'images/*.jpg' ],
+					dest: '../production/'
+				}, {
+					expand: true,
+					cwd: '../',
+					src: [ 'images/logos/*.png' ],
+					dest: '../production/'
+				},
+				{ src: '../images/favicon.ico', dest: '../production/images/favicon.ico' } ]
 			}
+		},
+
+		// minify index file in production dir
+		// including css and javascript
+		htmlmin: {
+			production: {
+				options: {
+					removeComments: true,
+					collapseWhitespace: true,
+					minifyCSS: true,
+					minifyJS: {
+						compress: {
+							dead_code: true,
+							properties: true,
+							booleans: true,
+							unused: true,
+							hoist_funs: true,
+							hoist_vars: true,
+							if_return: true,
+							join_vars: true
+						},
+						mangle: {
+							sort: true,
+							toplevel: true
 						}
+					},
+					removeScriptTypeAttributes: true
+				},
+				files: [ {
+					src: '../production/index.html', dest: '../production/index.html'
+				} ]
+			}
+		},
 	};

-	function updateHTML( content, path )
-	{
-		if ( path === '../index.html' )
-		{
+	// replace javscript and css paths when copying files
+	function updateContent ( content, path ) {
+		if ( path === '../index.html' ) {
 			content = content
-				.replace( 'href="styles/main.css"', 'href="styles/main.min.css"' )
-				.replace( 'src="scripts/lib/require-2.1.4.js"', 'src="scripts/main.min.js"' )
-				.replace( ' data-main="scripts/main"', '' );
+				.replace( 'styles/glitcher.css', 'glitcher.min.css' )
+				.replace( 'scripts/lib/require.js', 'glitcher.min.js' )
+				.replace( 'serviceworker.js', 'serviceworker.min.js' )
+				.replace( "scriptEl.setAttribute( 'data-main', 'scripts/glitcher.js' );", '' );
+		}
+
+		if ( path === '../production/glitcher.min.js' ) {
+			content = content
+				.replace( 'scripts/workers/glitchworker.js', 'glitchworker.min.js' )
+				.replace( 'scripts/workers/storageworker.js', 'storageworker.min.js' )
+				.replace( 'scripts/workers/settingsworker.js', 'settingsworker.min.js' );
+		}
+
+		if ( path === '../production/serviceworker.min.js' ) {
+			content = content
+				.replace( /v\d+(.?\d*)+::/g, 'b' + Date.now() + '::' ) // 'v1.0.1::'' -> 'b{timestamp}'
+				.replace( 'styles/glitcher.css', 'glitcher.min.css' )
+				.replace( 'scripts/glitcher.js', 'glitcher.min.js' )
+				.replace( 'scripts/workers/glitchworker.js', 'glitchworker.min.js' )
+				.replace( 'scripts/workers/storageworker.js', 'storageworker.min.js' )
+				.replace( 'scripts/workers/settingsworker.js', 'settingsworker.min.js' );
+		}
+
+		if ( path === '../production/storageworker.min.js' || '../production/settingsworker.min.js' ) {
+			content = content.replace( /,importScripts\(.*\),/, ',' ); // replaces importScripts
+		}
+
+		if ( path === '../production/glitcher.min.css' ) {
+			content = content.replace( /\.\.\/images\//gi, 'images/' ); // replaces importScripts
+		}
+
+		if ( path === '../manifest.json' ) {
+			content = content.replace( 'serviceworker.js', 'serviceworker.min.js' );
 		}

 		return content;
@ -63,12 +201,14 @@ module.exports = function( grunt )
 	grunt.loadNpmTasks( 'grunt-contrib-requirejs' );
 	grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
 	grunt.loadNpmTasks( 'grunt-contrib-copy' );
-	grunt.loadNpmTasks( 'grunt-contrib-imagemin' );
+	grunt.loadNpmTasks( 'grunt-contrib-htmlmin' );
+	grunt.loadNpmTasks( 'grunt-svgmin' );
+	grunt.loadNpmTasks( 'grunt-contrib-uglify' );

-	grunt.registerTask( 'default', [ 'requirejs', 'cssmin', 'copy', 'imagemin' ] );
-	grunt.registerTask( 'production', [ 'requirejs', 'cssmin', 'copy', 'imagemin' ] );
-	grunt.registerTask( 'js', [ 'requirejs' ] );
+	grunt.registerTask( 'default', [ 'requirejs', 'cssmin', 'svgmin', 'uglify', 'copy', 'htmlmin' ] );
+	grunt.registerTask( 'production', [ 'requirejs', 'cssmin', 'copy' ] );
+	grunt.registerTask( 'js', [ 'requirejs', 'uglify', 'copy' ] );
 	grunt.registerTask( 'css', [ 'cssmin' ] );
 	grunt.registerTask( 'cp', [ 'copy' ] );
-	grunt.registerTask( 'img', [ 'imagemin' ] );
+	grunt.registerTask( 'html', [ 'copy', 'htmlmin' ] );
 };
--- a/build/package.json
+++ b/build/package.json
@ -1,11 +1,14 @@
 {
-  "name": "jpg-glitch-build",
+  "name": "distort-grid-build",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.1",
-    "grunt-contrib-requirejs": "~0.4.1",
-    "grunt-contrib-cssmin": "~0.6.1",
    "grunt-contrib-copy": "~0.4.1",
-    "grunt-contrib-imagemin": "~0.3.0"
+    "grunt-contrib-cssmin": "~0.6.1",
+    "grunt-contrib-htmlmin": "~0.6.0",
+    "grunt-contrib-imagemin": "~0.3.0",
+    "grunt-contrib-requirejs": "~0.4.1",
+    "grunt-contrib-uglify": "^0.11.0",
+    "grunt-svgmin": "^3.1.0"
  }
 }
--- a/images/favicon.ico
+++ b/images/favicon.ico
--- a/images/icon/alert-circle.svg
+++ b/images/icon/alert-circle.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>
--- a/images/icon/camera.svg
+++ b/images/icon/camera.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" /></svg>
--- a/images/icon/chevron-down-black.svg
+++ b/images/icon/chevron-down-black.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#000" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
--- a/images/icon/chevron-down.svg
+++ b/images/icon/chevron-down.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
--- a/images/icon/content-save.svg
+++ b/images/icon/content-save.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" /></svg>
--- a/images/icon/delete.svg
+++ b/images/icon/delete.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" /></svg>
--- a/images/icon/emoticon.svg
+++ b/images/icon/emoticon.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>
--- a/images/icon/fullscreen-exit.svg
+++ b/images/icon/fullscreen-exit.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M14,14H19V16H16V19H14V14M5,14H10V19H8V16H5V14M8,5H10V10H5V8H8V5M19,8V10H14V5H16V8H19Z" /></svg>
--- a/images/icon/fullscreen.svg
+++ b/images/icon/fullscreen.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M5,5H10V7H7V10H5V5M14,5H19V10H17V7H14V5M17,14H19V19H14V17H17V14M10,17V19H5V14H7V17H10Z" /></svg>
--- a/images/icon/information-outline.svg
+++ b/images/icon/information-outline.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" /></svg>
--- a/images/icon/nav.svg
+++ b/images/icon/nav.svg
@ -0,0 +1,7 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<g fill="#000">
+		<rect id="rect-1" x="3" y="16" width="18" height="2"></rect>
+		<rect id="rect-2" x="3" y="6" width="18" height="2"></rect>
+		<rect id="rect-3" x="3" y="11" width="18" height="2"></rect>
+	</g>
+</svg>
--- a/images/icon/open-in-app.svg
+++ b/images/icon/open-in-app.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M12,10L8,14H11V20H13V14H16M19,4H5C3.89,4 3,4.9 3,6V18A2,2 0 0,0 5,20H9V18H5V8H19V18H15V20H19A2,2 0 0,0 21,18V6A2,2 0 0,0 19,4Z" /></svg>
--- a/images/icon/settings.svg
+++ b/images/icon/settings.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" /></svg>
--- a/images/icon/share-variant.svg
+++ b/images/icon/share-variant.svg
@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" /></svg>
--- a/images/lincoln.jpg
+++ b/images/lincoln.jpg
--- a/images/logos/glitch-144x144.png
+++ b/images/logos/glitch-144x144.png
--- a/images/logos/glitch-144x144.svg
+++ b/images/logos/glitch-144x144.svg
@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="144px" height="144px" viewBox="0 0 144 144" enable-background="new 0 0 144 144" xml:space="preserve">
+<g>
+	<path fill="#343434" d="M18.609,140.648h106.782c8.433,0,15.256-6.83,15.256-15.256V18.606c0-8.424-6.823-15.255-15.256-15.255
+		H18.609c-8.387,0-15.255,6.794-15.255,15.255v106.786C3.354,133.818,10.191,140.648,18.609,140.648z"/>
+	<path fill="#F3961D" d="M87.511,37.058H34.008c1.334-5.356,4.209-10.063,8.157-13.676H79.35
+		C83.298,26.995,86.17,31.702,87.511,37.058z"/>
+	<path fill="#D32F2E" d="M57.989,16.074c7.188,0,13.675,2.808,18.591,7.307H39.396C44.312,18.882,50.799,16.074,57.989,16.074z"/>
+	<path fill="#FBC013" d="M91.689,43.724c0,2.436-0.417,4.76-1.007,7.01H37.4c-0.592-2.25-1.009-4.574-1.009-7.01
+		c0-2.31,0.369-4.521,0.901-6.667h53.502C91.324,39.203,91.689,41.415,91.689,43.724z"/>
+	<path fill="#24B7CF" d="M70.768,71.375c-6.995,0-13.308-2.682-18.175-6.965h36.354C84.076,68.693,77.761,71.375,70.768,71.375z"/>
+	<path fill="#CCD642" d="M84.213,64.41H47.862c-4.068-3.576-7.047-8.283-8.466-13.676h53.286
+		C91.259,56.126,88.28,60.834,84.213,64.41z"/>
+	<path fill="#4D8EC7" d="M67.366,85.438c13.62,0,26.067,2.473,35.706,6.547H31.667C41.302,87.911,53.749,85.438,67.366,85.438z"/>
+	<rect x="22.616" y="119.367" fill="#A45D9D" width="110.595" height="7.307"/>
+	<path fill="#61539A" d="M129.25,112.85v6.488H18.653v-6.488c0-2.488,0.718-4.895,1.952-7.188h106.693
+		C128.534,107.955,129.25,110.361,129.25,112.85z"/>
+	<path fill="#5565A8" d="M124.117,105.662H17.422c2.897-5.393,8.942-10.124,17.125-13.677h72.451
+		C115.178,95.539,121.225,100.27,124.117,105.662z"/>
+</g>
+</svg>
--- a/images/logos/glitch-168x168.png
+++ b/images/logos/glitch-168x168.png
--- a/images/logos/glitch-168x168.svg
+++ b/images/logos/glitch-168x168.svg
@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="168px" height="168px" viewBox="0 0 168 168" enable-background="new 0 0 168 168" xml:space="preserve">
+<g>
+	<path fill="#343434" d="M20.498,165.649h127.004c10.029,0,18.145-8.124,18.145-18.145V20.495c0-10.02-8.115-18.145-18.145-18.145
+		H20.498c-9.976,0-18.145,8.081-18.145,18.145v127.01C2.354,157.525,10.486,165.649,20.498,165.649z"/>
+	<path fill="#F3961D" d="M104.156,42.44H40.521c1.587-6.37,5.007-11.969,9.702-16.267H94.45
+		C99.146,30.472,102.562,36.07,104.156,42.44z"/>
+	<path fill="#D32F2E" d="M68.922,17.483c8.549,0,16.265,3.34,22.112,8.691H46.808C52.655,20.823,60.371,17.483,68.922,17.483z"/>
+	<path fill="#FBC013" d="M107.417,50.369c0,2.897-0.496,5.662-1.197,8.337H42.848c-0.704-2.675-1.2-5.44-1.2-8.337
+		c0-2.747,0.438-5.377,1.072-7.929h63.634C106.982,44.992,107.417,47.623,107.417,50.369z"/>
+	<path fill="#24B7CF" d="M82.534,83.256c-8.319,0-15.828-3.189-21.617-8.284h43.239C98.362,80.066,90.853,83.256,82.534,83.256z"/>
+	<path fill="#CCD642" d="M100.108,74.972H56.873c-4.838-4.253-8.382-9.852-10.069-16.266h63.377
+		C108.489,65.121,104.945,70.719,100.108,74.972z"/>
+	<path fill="#4D8EC7" d="M78.882,99.982c16.199,0,31.004,2.941,42.468,7.787H36.423C47.883,102.924,62.687,99.982,78.882,99.982z"/>
+	<rect x="23.899" y="140.337" fill="#A45D9D" width="131.54" height="8.691"/>
+	<path fill="#61539A" d="M152.092,132.586v7.716H20.551v-7.716c0-2.96,0.854-5.821,2.321-8.55h126.898
+		C151.24,126.765,152.092,129.626,152.092,132.586z"/>
+	<path fill="#5565A8" d="M147.45,124.036H20.551c3.446-6.414,10.636-12.04,20.367-16.267h86.173
+		C136.818,111.996,144.012,117.622,147.45,124.036z"/>
+</g>
+</svg>
--- a/images/logos/glitch-192x192.png
+++ b/images/logos/glitch-192x192.png
--- a/images/logos/glitch-192x192.svg
+++ b/images/logos/glitch-192x192.svg
@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="192px" height="192px" viewBox="0 0 192 192" enable-background="new 0 0 192 192" xml:space="preserve">
+<path fill="#343434" d="M22.957,190.043h146.449c11.564,0,20.922-9.368,20.922-20.923V22.666c0-11.554-9.357-20.922-20.922-20.922
+	H22.957c-11.503,0-20.922,9.318-20.922,20.922V169.12C2.035,180.675,11.413,190.043,22.957,190.043z"/>
+<path fill="#F3961D" d="M119.424,47.971H46.047c1.829-7.345,5.772-13.801,11.187-18.757h50.998
+	C113.646,34.169,117.585,40.625,119.424,47.971z"/>
+<path fill="#D32F2E" d="M78.794,19.192c9.858,0,18.755,3.851,25.498,10.021H53.295C60.038,23.043,68.935,19.192,78.794,19.192z"/>
+<path fill="#FBC013" d="M123.184,57.113c0,3.34-0.572,6.529-1.38,9.614H48.729c-0.812-3.085-1.384-6.273-1.384-9.614
+	c0-3.167,0.505-6.201,1.236-9.143h73.376C122.683,50.913,123.184,53.946,123.184,57.113z"/>
+<path fill="#24B7CF" d="M94.491,95.035c-9.593,0-18.251-3.678-24.927-9.552h49.86C112.743,91.357,104.083,95.035,94.491,95.035z"/>
+<path fill="#CCD642" d="M114.756,85.483H64.901c-5.579-4.904-9.665-11.36-11.611-18.756h73.08
+	C124.42,74.123,120.334,80.579,114.756,85.483z"/>
+<path fill="#4D8EC7" d="M90.279,114.322c18.68,0,35.751,3.392,48.97,8.979H41.32C54.534,117.714,71.605,114.322,90.279,114.322z"/>
+<rect x="26.88" y="160.854" fill="#A45D9D" width="151.679" height="10.022"/>
+<path fill="#61539A" d="M174.698,151.917v8.897H23.019v-8.897c0-3.413,0.985-6.712,2.677-9.858h146.326
+	C173.717,145.205,174.698,148.504,174.698,151.917z"/>
+<path fill="#5565A8" d="M169.346,142.059H23.019c3.974-7.396,12.263-13.883,23.485-18.757h99.365
+	C157.086,128.176,165.381,134.663,169.346,142.059z"/>
+</svg>
--- a/images/logos/glitch-48x48.png
+++ b/images/logos/glitch-48x48.png
--- a/images/logos/glitch-48x48.svg
+++ b/images/logos/glitch-48x48.svg
@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g>
+	<path fill="#343434" d="M6.623,46.344h34.754c2.745,0,4.966-2.224,4.966-4.966V6.621c0-2.741-2.221-4.965-4.966-4.965H6.623
+		c-2.73,0-4.966,2.211-4.966,4.965v34.757C1.657,44.12,3.883,46.344,6.623,46.344z"/>
+	<path fill="#F3961D" d="M26.921,12.683H9.507c0.435-1.743,1.37-3.275,2.655-4.451h12.103C25.55,9.407,26.484,10.939,26.921,12.683z
+		"/>
+	<path fill="#D32F2E" d="M15.556,5.854c2.339,0,4.451,0.914,6.051,2.378H9.504C11.104,6.768,13.216,5.854,15.556,5.854z"/>
+	<path fill="#FBC013" d="M29.364,14.853c0,0.793-0.136,1.55-0.328,2.281H11.694c-0.192-0.731-0.328-1.488-0.328-2.281
+		c0-0.752,0.12-1.472,0.293-2.17h17.414C29.246,13.381,29.364,14.101,29.364,14.853z"/>
+	<path fill="#24B7CF" d="M24.129,23.852c-2.275,0-4.331-0.872-5.915-2.267h11.832C28.46,22.979,26.405,23.852,24.129,23.852z"/>
+	<path fill="#CCD642" d="M28.423,21.585H16.592c-1.324-1.163-2.294-2.696-2.756-4.451h17.343
+		C30.716,18.889,29.746,20.422,28.423,21.585z"/>
+	<path fill="#4D8EC7" d="M19.094,28.373c4.433,0,8.484,0.806,11.622,2.132H7.476C10.611,29.179,14.662,28.373,19.094,28.373z"/>
+	<rect x="7.476" y="39.417" fill="#A45D9D" width="35.995" height="2.378"/>
+	<path fill="#61539A" d="M41.747,37.296v2.111H5.75v-2.111c0-0.81,0.234-1.594,0.636-2.341h34.726
+		C41.514,35.702,41.747,36.486,41.747,37.296z"/>
+	<path fill="#5565A8" d="M39.256,34.955H4.529c0.942-1.754,2.91-3.294,5.573-4.45h23.581C36.346,31.661,38.313,33.201,39.256,34.955
+		z"/>
+</g>
+</svg>
--- a/images/logos/glitch-72x72.png
+++ b/images/logos/glitch-72x72.png
--- a/images/logos/glitch-72x72.svg
+++ b/images/logos/glitch-72x72.svg
@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="72px" height="72px" viewBox="0 0 72 72" enable-background="new 0 0 72 72" xml:space="preserve">
+<g>
+	<path fill="#343434" d="M9.307,70.322h53.387c4.216,0,7.627-3.416,7.627-7.627V9.305c0-4.211-3.411-7.626-7.627-7.626H9.307
+		c-4.193,0-7.627,3.396-7.627,7.626v53.39C1.68,66.906,5.099,70.322,9.307,70.322z"/>
+	<path fill="#F3961D" d="M40.486,18.616H13.737c0.667-2.677,2.104-5.031,4.078-6.838h18.591
+		C38.381,13.585,39.816,15.938,40.486,18.616z"/>
+	<path fill="#D32F2E" d="M23.029,8.125c3.593,0,6.837,1.403,9.295,3.653H13.732C16.191,9.528,19.435,8.125,23.029,8.125z"/>
+	<path fill="#FBC013" d="M44.239,21.949c0,1.217-0.208,2.38-0.503,3.505H17.098c-0.296-1.125-0.504-2.288-0.504-3.505
+		c0-1.155,0.185-2.261,0.45-3.333h26.749C44.058,19.688,44.239,20.793,44.239,21.949z"/>
+	<path fill="#24B7CF" d="M36.198,35.772c-3.496,0-6.653-1.34-9.087-3.482h18.176C42.852,34.433,39.694,35.772,36.198,35.772z"/>
+	<path fill="#CCD642" d="M42.794,32.291H24.62c-2.034-1.788-3.523-4.142-4.233-6.837h26.641
+		C46.316,28.149,44.827,30.503,42.794,32.291z"/>
+	<path fill="#4D8EC7" d="M28.464,42.718c6.809,0,13.033,1.236,17.852,3.273H10.616C15.434,43.955,21.656,42.718,28.464,42.718z"/>
+	<rect x="10.616" y="59.682" fill="#A45D9D" width="55.293" height="3.653"/>
+	<path fill="#61539A" d="M63.261,56.423v3.244H7.967v-3.244c0-1.244,0.359-2.447,0.976-3.594h53.343
+		C62.902,53.976,63.261,55.179,63.261,56.423z"/>
+	<path fill="#5565A8" d="M59.434,52.829H6.091c1.447-2.695,4.471-5.061,8.562-6.837h36.223
+		C54.964,47.769,57.987,50.134,59.434,52.829z"/>
+</g>
+</svg>
--- a/images/logos/glitch-96x96.png
+++ b/images/logos/glitch-96x96.png
--- a/images/logos/glitch-96x96.svg
+++ b/images/logos/glitch-96x96.svg
@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="96px" height="96px" viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
+<g>
+	<path fill="#343434" d="M13.399,92.489h69.201c5.465,0,9.887-4.427,9.887-9.887V13.397c0-5.459-4.422-9.886-9.887-9.886H13.399
+		c-5.436,0-9.887,4.402-9.887,9.886v69.205C3.513,88.062,7.944,92.489,13.399,92.489z"/>
+	<path fill="#F3961D" d="M53.815,25.467H19.142c0.865-3.471,2.729-6.521,5.287-8.863h24.098
+		C51.085,18.945,52.947,21.996,53.815,25.467z"/>
+	<path fill="#D32F2E" d="M31.187,11.868c4.658,0,8.862,1.819,12.049,4.735H19.137C22.323,13.688,26.527,11.868,31.187,11.868z"/>
+	<path fill="#FBC013" d="M58.681,29.787c0,1.578-0.271,3.085-0.652,4.543h-34.53c-0.383-1.458-0.653-2.965-0.653-4.543
+		c0-1.497,0.239-2.931,0.584-4.32h34.673C58.444,26.856,58.681,28.29,58.681,29.787z"/>
+	<path fill="#24B7CF" d="M48.257,47.706c-4.532,0-8.624-1.737-11.778-4.514h23.56C56.882,45.969,52.789,47.706,48.257,47.706z"/>
+	<path fill="#CCD642" d="M56.806,43.192H33.249c-2.637-2.317-4.567-5.368-5.487-8.862h34.533
+		C61.373,37.824,59.442,40.875,56.806,43.192z"/>
+	<path fill="#4D8EC7" d="M38.231,56.709c8.826,0,16.894,1.603,23.14,4.243H15.097C21.341,58.312,29.407,56.709,38.231,56.709z"/>
+	<rect x="15.097" y="78.697" fill="#A45D9D" width="71.673" height="4.735"/>
+	<path fill="#61539A" d="M83.336,74.474v4.205H11.662v-4.205c0-1.612,0.466-3.172,1.266-4.658h69.144
+		C82.872,71.302,83.336,72.861,83.336,74.474z"/>
+	<path fill="#5565A8" d="M78.375,69.815H9.23c1.877-3.494,5.795-6.561,11.098-8.863h46.953
+		C72.582,63.255,76.501,66.321,78.375,69.815z"/>
+</g>
+</svg>
--- a/images/screenshot.png
+++ b/images/screenshot.png
--- a/index.html
+++ b/index.html
@ -1,69 +1,89 @@
 <!doctype html>
-<!--[if lt IE 10 ]> <html class="oldie"> <![endif]-->
-<!--[if gt IE 9 ]> <html class="somewhatokie"> <![endif]-->
-<!--[if gt IE 11]><!--> <html> <!--<![endif]-->
+<html>
 	<head>
 		<meta charset="utf-8" />
-		<title>image glitch experiment</title>
-		<link rel="stylesheet" href="styles/main.css" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="manifest" href="manifest.json" />
+		<link rel="icon" type="image/png" href="images/logos/glitch-48x48.png" sizes="48x48" />
+		<link rel="icon" type="image/png" href="images/logos/glitch-96x96.png" sizes="96x96" />
+		<link rel="icon" type="image/png" href="images/logos/glitch-144x144.png" sizes="144x144" />
+		<link rel="apple-touch-icon" sizes="96x96" href="images/logos/glitch-96x96.png" />
+		<link rel="apple-touch-icon" sizes="144x144" href="images/logos/glitch-144x144.png" />
+		<title>Image Glitch Tool</title>
+		<style>
+		* { margin: 0; padding: 0; box-sizing: border-box; }
+		body { font-family: -apple-system, Roboto, 'Lucida Grande', sans-serif; }
+		body > p, .description { margin: 50px auto; max-width: 500px; width: 90%; }
+		.is-good-enough .min-requirements, .has-js .js-required { display: none; }
+		.text { opacity: 1; }
+		.has-js .text { opacity: 0; transition: opacity 0.8s ease-in; }
+		.text p + p, .text p + div { margin-top: 1em; }
+		.is-too-old .text { opacity: 1 }
+		.is-loading .text { opacity: 0 }
+		.app-loader { display: inline-block; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 90px; transition: opacity 0.1s; }
+		.loader { opacity: 0; }
+		.is-loading .loader { opacity: 1; }
+		.loader::before, .loader::after { content: ''; display: block; position: absolute; top: 8px; left: 18px; width: 20px; height: 20px; border-radius: 40px; border: 2px currentColor solid; z-index: 1; transform: scale(0.5); opacity: 0; }
+		.is-loading .loader::before { animation: pulse 2s infinite; }
+		.is-loading .loader::after { animation: pulse 2s infinite; animation-delay: 1s; }
+		@keyframes pulse { 0% { transform: scale(1); opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; transform: scale(0.5); } }
+		</style>
+		<script>document.documentElement.setAttribute( 'class', 'has-js' );</script>
 	</head>
-	<body data-defaultimage="lincoln.jpg">
-		<div class="nav-wrapper dark-bg">
-			<div class="export-wrapper center">
-				<h1 class="headline">glitch images</h1>
-				<button id="cam-button" class="button" title="take photo with you web cam">take photo</button>
-				<button id="import-button" class="button" title="open image from your computer">open image</button>
-				<input type="file" id="import-input" accept="image/*" />
-				<button id="export-button" class="button" title="save image to your computer">download image</button>
-				<button id="imgur-button" class="button" title="share image via imgur.com"><span>share image</span></button>
-				<a id="png-button" download="abrahamlincoln.png" target="_blank" class="download-link">download bitmap file<span> (.png)</span></a>
-				<div id="imgur-url-container">
-					<input id="imgur-url-input" type="text" readonly="readonly" />
-					<a id="imgur-url-link" class="button social-link" href="https://imgur.com/" target="_blank">open</a>
-					<a id="twitter-link" class="button social-link" href="https://twitter.com/" target="_blank" title="post your image on twitter">twitter</a>
-					<a id="facebook-link" class="button social-link" href="https://www.facebook.com/" target="_blank" title="post your image on facebook">facebook</a>
-					<a id="reddit-link" class="button social-link" href="https://www.reddit.com/" target="_blank" title="post your image on reddit">reddit</a>
-					<span id="imgur-url-error">sorry, something went wrong. maybe try again?</span>
-				</div>
-				<button class="intro-button button is-active">?</button>
-			</div>
-		</div>
-		<div class="nav-wrapper light-bg">
-			<div class="content center" id="controls">
-				<div class="control-wrapper">
-					<label class="control-label" for="amount-slider">amount</label>
-					<input class="control-input control-number" id="amount-number" type="number" min="0" max="99" value="50" maxlength="2" />
-					<input class="control-input control-slider" id="amount-slider" type="range" min="0" max="99" value="50" step="1" maxlength="2" />
-				</div>
-				<div class="control-wrapper">
-					<label class="control-label" for="seed-slider">seed</label>
-					<input class="control-input control-number" id="seed-number" type="number" min="0" max="100" value="50" maxlength="2" />
-					<input class="control-input control-slider" id="seed-slider" type="range" min="0" max="100" value="50" step="1" maxlength="2" />
-				</div>
-				<div class="control-wrapper">
-					<label class="control-label" for="iterations-slider">iterations</label>
-					<input class="control-input control-number" id="iterations-number" type="number" min="1" max="50" value="5" maxlength="2" />
-					<input class="control-input control-slider" id="iterations-slider" type="range" min="1" max="50" value="5" step="1" maxlength="2"/>
-				</div>
-				<div class="control-wrapper">
-					<label class="control-label" for="quality-slider">quality</label>
-					<input class="control-input control-number" id="quality-number" type="number" min="1" max="99" value="50" maxlength="2" />
-					<input class="control-input control-slider" id="quality-slider" type="range" min="1" max="99" value="50" step="1" maxlength="2" />
-				</div>
-				<button id="random-button" class="button is-hidden">randomise</button>
-			</div>
-		</div>
-		<div class="canvas-wrapper">
-			<canvas id="canvas"></canvas>
-			<article class="content intro is-active">
-				<div class="center">
-					<p>drag an image into the browser window to modify it.</p>
-					<p>this script corrupts some bytes in a jpg image. because of the way <a href="https://en.wikipedia.org/wiki/JPEG">jpg</a> encoding works, the corrupted file still shows something. inspired by <a href="http://github.com/soulwire">soulwire</a>s <a href="http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator">experiment</a> in flash. this experiment was created by <a href="http://fishnation.de/">georg</a>. you can follow him on <a href="https://twitter.com/snorpey">twitter</a> or explore the source code on <a href="https://github.com/snorpey/jpg-glitch">github</a>.</p>
-					<p>if you like this one, you can check out some of his other <a href="http://snorpey.github.io/experiments/">javascript experiments</a>.</p>
-					<button class="close">✕</button>
-				</div>
+	<body>
+		<article class="description text">
+			<p>With this app, you can glitch your own images by dragging an image into the browser window. Use the sliders in the control panel to alter the glitched parameters. The image updates in real time.</p>
+			<p>This app corrupts some bytes in an image. Because of the way <a href="https://en.wikipedia.org/wiki/JPEG">JPEG encoding</a> works, the corrupted file still shows a corrupted image. It was inspired by <a href="http://github.com/soulwire">soulwire</a>’s <a href="http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator">experiment</a> in Flash.</p>
+			<p>This tool was created by <a href="http://snorpey.com/">Georg</a>. He is always happy to learn about the things that people are creating with his tools. You can follow him on <a href="https://twitter.com/snorpey">Twitter</a> or explore the source code of this app on <a href="https://github.com/snorpey/jpg-glitch">GitHub</a>.</p>
+			<p>If you like the glitcher, you can check out some of Georg’s other <a href="http://snorpey.github.io/experiments/">JavaScript experiments</a>.</p>
+			<p class="min-requirements text">
+				<strong>Please note</strong>: <span class="js-required">javascript and </span><a href="http://caniuse.com/#feat=addeventlistener,canvas,classlist,es5,json,queryselector">modern browsers</a> are required for this app to work.
+			</p>
 		</article>
-		</div>
-		<script src="scripts/lib/require-2.1.4.js" data-main="scripts/main"></script>
+		<svg id="svg" xmlns="http://www.w3.org/2000/svg"></svg>
+		<script>
+		var testCanvas = document.createElement( 'canvas' );
+
+		if (
+			'querySelector' in document &&
+			'addEventListener' in window &&
+			Array.prototype.forEach &&
+			document.createElement( 'a' ).classList &&
+			( testCanvas.getContext && testCanvas.getContext( '2d' ) )
+		) {
+			if ( 'serviceWorker' in navigator ) {
+				if ( location.protocol !== 'https:' && location.host !== 'localhost' ) {
+					location.protocol = 'https:';
+				} else {
+					navigator.serviceWorker.register( 'serviceworker.js' );
+				}
+			}
+
+			var loaderEl = document.createElement( 'div' );
+			loaderEl.classList.add( 'loader' );
+			loaderEl.classList.add( 'app-loader' );
+			loaderEl.textContent = 'Loading…';
+			document.body.appendChild( loaderEl );
+
+			var scriptEl = document.createElement( 'script' );
+			scriptEl.setAttribute( 'data-main', 'scripts/glitcher.js' );
+			scriptEl.async = true;
+			scriptEl.src = 'scripts/lib/require.js';
+			document.documentElement.classList.add( 'is-loading' );
+			document.documentElement.classList.add( 'is-good-enough' );
+			document.body.appendChild( scriptEl );
+			testCanvas = null;
+
+			var linkEl = document.createElement( 'link' );
+			linkEl.href = 'styles/glitcher.css';
+			linkEl.rel = 'stylesheet';
+			document.head.appendChild( linkEl );
+		} else {
+			setTimeout( function () {
+				document.documentElement.setAttribute( 'class', 'has-js is-too-old' );
+			}, 20 );
+		}
+
+		</script>
 	</body>
 </html>
--- a/lang/de-de.json
+++ b/lang/de-de.json
@ -0,0 +1,134 @@
+{
+	"lang": "en-us",
+	"index": {
+		"title": "Image Glitch Werkzeug",
+		"description": "Mit diesem Programm kannst du ein Bild so bearbeiten, dass es kaputt aussieht. Ziehe ein Bild in das Browserfenster um loszulegen.\n\nDas Programm verändert einige Bytes in der Bilddatei. Aufgrund der Art und Weise wie der [JPEG Logarithmus](https://de.wikipedia.org/wiki/JPEG) funktioniert, wird trotz eigenlich unlesbarer Rohdaten weiterhin ein Bild erzeugt. Dieses Programm ist angelehnt an ein ähnliches Experiment von [experiment](http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator) von [soulwire](http://github.com/soulwire) in Flash.\n\nDieses Programm wurde von [Georg](http://snorpey.com/) entwickelt. Er freut sich übrigens immer, von den Nutzern seiner Programme zu hören wie sie die Programme einsetzen. Du kannst Georg bei [Twitter](https://twitter.com/snorpey) folgen oder dir den Quellcode dieses Programms bei [GitHub](https://github.com/snorpey/jpg-glitch) ansehen.\n\nFalls dir dieses Programm gefallen hat, gefallen dir vielleicht auch Georgs andere [Experimente](http://snorpey.github.io/experiments/)."
+	},
+	"settings": {
+		"settings": "Einstellungen",
+		"settingstitle": "Ändere die Einstellungen des Programms",
+		"canzoomwithpointer": "Erlaube Zoomen mit Mausrad und Gesten",
+		"resizeuploadedimages": "Große Bilder verkleinen, um Fehler zu vermeiden",
+		"language": "Sprache (Language)",
+		"languageoptions": {
+			"de-de": "Deutsch DE",
+			"en-us": "Englisch (English US)"
+		},
+		"error": {
+			"save": "Konnte die Einstellungen nicht im Browser speichern.",
+			"load": "Konnte die Einstellungen nicht vom Browser laden."
+		}
+	},
+	"about": {
+		"info": "Über",
+		"infotitle": "Weitere Informationen über dieses Programm"
+	},
+	"controls": {
+		"controls": "Regler",
+		"controlstitle": "Regler ein- und ausblenden",
+		"randomize": "Zufall",
+		"randomizetitle": "Zufällige Reglerwerte wählen",
+		"center": "Mittig",
+		"centertitle": "Zentriere das Bild auf dem Bildschirm",
+		"original": "100%",
+		"originaltitle": "Zoome zur Originalgröße des Bildes",
+		"zoom": "Zoom",
+		"amount": "Betrag",
+		"seed": "Startwert",
+		"iterations": "Wiederholungen",
+		"quality": "Qualität",
+		"fullscreen": "Vollbild",
+		"fullscreentitle": "Vollbild ein- und ausschalten"
+	},
+	"nav": {
+		"menu": "Menü",
+		"menutitle": "Hauptmenü ein- und ausschalten"
+	},
+	"file": {
+		"open": "Öffnen",
+		"opentitle": "Eine Datei von deinem Gerät öffnen",
+		"import": "Importieren",
+		"importtitle": "Öffne ein Bild von deiner Festplatte",
+		"recent": "Bilder aus vorherigen Sitzungen",
+		"norecent": "Noch keine Bilder vorhanden",
+		"untitled": "Ohne Titel",
+		"del": "Löschen",
+		"deltitle": "Dieses Bild aus dem Speicher deines Browsers löschen",
+		"openimage": "Öffnen",
+		"openimagetitle": "Dieses Bild laden",
+		"offline": "Offline nehmen",
+		"offlinetitle": "Dieses Bild von Imgur löschen und vom Netz nehmen",
+		"openlink": "Link öffnen",
+		"openlinktitle": "Das Bild in einen neuen Browsertab öffnen",
+		"save": "Speichern",
+		"savetitle": "Aktuelles Bild für spätere Sitzungen speichern",
+		"download": "Herunterladen",
+		"downloadtitle": "Lade das bearbeitete Bild auf herunter",
+		"saveinbrowser": "Speichern",
+		"saveinbrowsertitle": "Speichere das Bild im Speicher deines Browsers",
+		"error": {
+			"load": "Konnte vorherige Sitzung nicht laden.",
+			"save": "Konnte aktuelle Sitzung nicht speichern.",
+			"openimage": "Kann das Bild nicht öffnen.",
+			"openfile": "Kann die Datei nicht öffnen."
+		},
+		"message": {
+			"before": "Das gleiche Bild wurde vorher schonmal gespeichert.",
+			"save": "Die Datei wurde in deinem Browser gespeichert.",
+			"del": "Eine Datei wurde aus dem Speicher deines Browsers gelöscht.",
+			"resize": "Dein Bild wurde etwas verkleinert, um Programmfehler zu vermeiden."
+		}
+	},
+	"share": {
+		"share": "Teilen",
+		"sharetitle": "Teile das Bild im Internet",
+		"info": "Du kannst das Bild auf [Imgur](https://imgur.com) hochladen, um es mit anderen zu teilen. Bitte beachte dass das Bild dann öffentlich einsehbar ist und die [Terms of Service](https://imgur.com/tos) von Imgur gelten.",
+		"openon": "Das Bild auf {$1} öffnen",
+		"openontitle": "Das Bild öffnen, dass auf {$1} geteilt wurde",
+		"shareon": "Auf {$1} teilen",
+		"shareontitle": "Das Bild auf {$1} teilen",
+		"upload": "Bild auf Imgur Hochladen",
+		"uploadtitle": "Lade das Bild auf Imgur hoch, um es mit anderen zu teilen",
+		"uploading": "Lade Bild hoch…",
+		"imagelink": "Online Link zum Bild",
+		"imagelinktitle": "Du kannst diesen Link nehmen um das Bild auf anderen Seiten zu teilen oder hochzuladen",
+		"opennewtabtitle": "Öffne das Bild in einem neuen Browsertab",
+		"imgur": "Imgur",
+		"reddit": "Reddit",
+		"twitter": "Twitter",
+		"facebook": "Facebook",
+		"pinterest": "Pinterest",
+		"recentlyshared": "Kürzlich geteilte Bilder",
+		"untitled": "Ohne Titel",
+		"openlink": "Öffne Link",
+		"openlinktitle": "Das Bild in einen neuen Browsertab öffnen",
+		"offline": "Offline nehmen",
+		"offlinetitle": "Dieses Bild von Imgur löschen und vom Netz nehmen",
+		"error": {
+			"base64": "Es gibt keine Base64-Adresse zum hochladen",
+			"upload": "Konnte das Bild nicht auf Imgur hochladen."
+		},
+		"message": {
+			"upload": "Das Bild wurde zu Imgur hochgeladen. [Bild öffnen.]({$1})",
+			"del": "Das Bild wurde von Imgur gelöscht."
+		}
+	},
+	"webcam": {
+		"webcam": "Webcam",
+		"webcamtitle": "Mache ein Bild mit deiner Webcam",
+		"webcamlabel": "Foto",
+		"trigger": "Ein Foto machen",
+		"triggertitle": "Klicken, um ein Foto mit deiner Webcam zu machen",
+		"picture": "Webcam Foto von {$1}",
+		"error": {
+			"access": "Der Zugriff auf deine Webcam wurde leider verweigert."
+		}
+	},
+	"welcome": {
+		"firstvisit": [
+			"Hallo! Es scheint als wärst du zum ersten Mal hier.",
+			"Um loszulegen, ziehe an den Reglern am unteren Fensterrand um das Bild zu bearbeiten.",
+			"Du kannst auch ein Bild importieren. Klicke dazu einfach im Menü auf ÖFFNEN."
+		]
+	}
+}
--- a/lang/en-us.json
+++ b/lang/en-us.json
@ -0,0 +1,135 @@
+{
+	"lang": "en-us",
+	"index": {
+		"title": "Image Glitch Tool",
+		"description": "With this app, you can glitch your own images by dragging an image into the browser window. Use the sliders in the control panel to alter the glitched parameters. The image updates in real time.\n\nThis app corrupts some bytes in an image. Because of the way [JPEG encoding](https://en.wikipedia.org/wiki/JPEG) works, the corrupted file still shows a corrupted image. It was inspired by [soulwire](http://github.com/soulwire)’s [experiment](http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator) in Flash.\n\nThis tool was created by [Georg](http://snorpey.com/). He is always happy to learn about the things that people are creating with his tools. You can follow him on [Twitter](https://twitter.com/snorpey) or explore the source code of this app on [GitHub](https://github.com/snorpey/jpg-glitch).\n\nIf you like this glitch tool, you can check out some of Georg’s other [JavaScript experiments](http://snorpey.github.io/experiments/)."
+	},
+	"settings": {
+		"settings": "Settings",
+		"settingstitle": "Change the tool settings",
+		"canzoomwithpointer": "Enable zooming with mousewheel and touch gestures",
+		"language": "Language (Sprache)",
+		"languageoptions": {
+			"de-de": "German (Deutsch DE)",
+			"en-us": "English US"
+		},
+		"resizeuploadedimages": "Resize big images to avoid errors",
+		"error": {
+			"save": "Could not save settings to your browser.",
+			"load": "Could not load previous settings data from your browser."
+		}
+	},
+	"about": {
+		"info": "Info",
+		"infotitle": "Learn about the author of this tool."
+	},
+	"controls": {
+		"controls": "Controls",
+		"controlstitle": "Show and hide controls",
+		"randomize": "Randomize",
+		"randomizetitle": "Randomize control values",
+		"center": "Center",
+		"centertitle": "Fit image to screen",
+		"original": "100%",
+		"originaltitle": "Zoom image to its original size 100%",
+		"zoom": "Zoom",
+		"amount": "Amount",
+		"seed": "Seed",
+		"iterations": "Iterations",
+		"quality": "Quality",
+		"fullscreen": "Fullscreen",
+		"fullscreentitle": "Toggle Fullscreen"
+	},
+	"nav": {
+		"menu": "Menu",
+		"menutitle": "Toggle the main menu"
+	},
+	"file": {
+		"open": "Open",
+		"opentitle": "Open an image from your device",
+		"import": "Import File",
+		"importtitle": "Import image from your hard drive",
+		"recent": "Open recently edited file",
+		"norecent": "No recently edited files available",
+		"untitled": "Untitled",
+		"del": "delete",
+		"deltitle": "Delete this image from your browser’s storage",
+		"openimage": "Open",
+		"openimagetitle": "Open this image from your browser’s storage",
+		"offline": "Take Offline",
+		"offlinetitle": "Delete this image from Imgur",
+		"openlink": "Open Link",
+		"openlinktitle": "Open image link in new browser tab",
+		"save": "Save",
+		"savetitle": "Save current image for later sessions",
+		"download": "Download Image",
+		"downloadtitle": "Download the glitched image to your device",
+		"saveinbrowser": "Save in Browser",
+		"saveinbrowsertitle": "Save image in your browser’s storage",
+		"error": {
+			"load": "Could not get previous session data from your browser.",
+			"save": "Could not save data to your browser.",
+			"openimage": "Could not open image.",
+			"openfile": "Could not open file."
+		},
+		"message": {
+			"before": "This file has been saved before.",
+			"save": "A file was saved to your browser’s storage.",
+			"del": "A file was deleted from your browser’s storage.",
+			"resize": "Your image was scaled down a bit to work better with this app."
+		}
+	},
+	"share": {
+		"share": "Share",
+		"sharetitle": "Share your glitched image on the internet",
+		"info": "You can upload the image to [Imgur](https://imgur.com) to share it. Please note that after uploading the image will be publicly visible on the internet and the Imgur's [terms of service](https://imgur.com/tos) apply.",
+		"openon": "Open image on {$1}",
+		"openontitle": "Open the image you shared on {$1}",
+		"shareon": "Share image on {$1}",
+		"shareontitle": "Share your glitched image on {$1}",
+		"upload": "Upload Image to Imgur",
+		"uploadtitle": "Upload your glitched image to Imgur and share it with others online",
+		"uploading": "Uploading Image…",
+		"imagelink": "Online link to image",
+		"imagelinktitle": "You can use this link to share the image or embed it on other sites",
+		"opennewtabtitle": "Open the image in a new browser tab",
+		"imgur": "Imgur",
+		"reddit": "Reddit",
+		"twitter": "Twitter",
+		"facebook": "Facebook",
+		"pinterest": "Pinterest",
+		"recentlyshared": "Recently shared images",
+		"untitled": "Untitled",
+		"openlink": "Open Link",
+		"openlinktitle": "Open the online link of this image in a new browser tab",
+		"offline": "Take Offline",
+		"offlinetitle": "Delete this image from Imgur",
+		"error": {
+			"base64": "No base64 URL to upload.",
+			"upload": "Could not upload file to Imgur.",
+			"del": "Could not delete file from Imgur."
+		},
+		"message": {
+			"upload": "The image was successfully uploaded to Imgur. [Click here to open it]({$1})",
+			"del": "The image was successfully deleted from Imgur."
+		}
+	},
+	"webcam": {
+		"webcam": "Webcam",
+		"webcamtitle": "Take a picture with your webcam",
+		"webcamlabel": "Take a Picture",
+		"trigger": "Take Picture",
+		"triggertitle": "Click to take a picture with your webcam",
+		"picture": "'Webcam Picture {$1}",
+		"error": {
+			"access": "Could not access your webcam."
+		}
+	},
+	"welcome": {
+		"firstvisit": [
+			"Welcome! Looks like this is your first time here.",
+			"To get started, you can drag the sliders below and glitch an image.",
+			"You can also import an image from your device. Just click on the OPEN button in the menu."
+		]
+	}
+}
--- a/manifest.json
+++ b/manifest.json
@ -0,0 +1,39 @@
+{
+	"name": "Image Glitch Tool",
+	"short_name": "Glitch Tool",
+	"start_url": "./?utm_source=web_app_manifest",
+	"display": "standalone",
+	"background_color": "white",
+	"orientation": "any",
+	"icons": [ {
+		"src": "images/logos/glitch-48x48.png",
+		"sizes": "48x48",
+		"type": "image/png"
+	}, {
+		"src": "images/logos/glitch-72x72.png",
+		"sizes": "72x72",
+		"type": "image/png"
+	}, {
+		"src": "images/logos/glitch-96x96.png",
+		"sizes": "96x96",
+		"type": "image/png"
+	}, {
+		"src": "images/logos/glitch-144x144.png",
+		"sizes": "144x144",
+		"type": "image/png"
+	}, {
+		"src": "images/logos/glitch-168x168.png",
+		"sizes": "168x168",
+		"type": "image/png"
+	}, {
+		"src": "images/logos/glitch-192x192.png",
+		"sizes": "192x192",
+		"type": "image/png"
+	}, {
+		"src": "images/logos/glitch-192x192.svg",
+		"sizes": "144x144 168x168 192x192",
+		"density": 2
+	} ],
+	"theme_color": "black",
+	"service_worker": { "src": "serviceworker.js" }
+}
--- a/scripts/config.js
+++ b/scripts/config.js
@ -0,0 +1,43 @@
+define(
+	function () {
+		return {
+			keys: {
+				// this is my api key
+				// please get your own if you're hosting this app
+				// on a different server.
+				// https://api.imgur.com/oauth2/addclient
+				// thank you.
+				imgur:   'a4c24380d884932',
+				storage: 'glitch-items'
+			},
+			defaultControlParams: {
+				amount: {     min: 0, max: 99,  value: 24 },
+				seed: {       min: 0, max: 100, value: 53 },
+				iterations: { min: 0, max: 100, value: 21 },
+				quality: {    min: 1, max: 99,  value: 46 }
+			},
+			defaultImage: {
+				name: 'AbrahamLincoln',
+				path: 'images/lincoln.jpg'
+			},
+			workers: {
+				glitch:   'scripts/workers/glitchworker.js',
+				storage:  'scripts/workers/storageworker.js',
+				settings: 'scripts/workers/settingsworker.js'
+			},
+			language: {
+				dir: 'lang',
+				preset: 'en-us'
+			},
+			settings: {
+				canZoomWithPointer: { value: true },
+				resizeUploadedImages: { value: true },
+				language: { value: 'en-us', options: [ 'en-us', 'de-de' ] }
+			},
+			localForage: {
+				name      : 'glitchtool',
+				storeName : 'keyvaluepairs'
+			}
+		};
+	}
+);
--- a/scripts/glitcher.js
+++ b/scripts/glitcher.js
@ -0,0 +1,331 @@
+/*global require, requirejs, define*/
+// gf: http://requirejs.org/docs/api.html#config
+requirejs.config( {
+	baseUrl: 'scripts/',
+	waitSeconds: 10
+} );
+
+require( [
+	'config',
+	'util/browser',
+	'views/appview',
+	'views/navview',
+	'views/controlsview',
+	'views/openfileview',
+	'views/fullscreenview',
+	'views/webcamview',
+	'views/canvasview',
+	'views/canvascontrolsview',
+	'views/saveview',
+	'views/shareview',
+	'views/indicatorview',
+	'views/workspacenavview',
+	'views/aboutview',
+	'views/draganddropview',
+	'views/workspaceview',
+	'views/welcomeview',
+	'views/settingsview',
+	'models/controlsmodel',
+	'models/imagemodel',
+	'models/glitchmodel',
+	'models/storagemodel',
+	'models/sharemodel',
+	'models/networkmodel',
+	'models/settingsmodel',
+	'models/localisationmodel',
+	'lib/localforage.nopromises'
+], function (
+	config,
+	browser,
+	AppView,
+	NavView,
+	ControlsView,
+	OpenFileView,
+	FullscreenView,
+	WebCamView,
+	CanvasView,
+	CanvasControlsView,
+	SaveView,
+	ShareView,
+	IndicatorView,
+	WorkspaceNavView,
+	AboutView,
+	DragAndDropView,
+	WorkspaceView,
+	WelcomeView,
+	SettingsView,
+	ControlsModel,
+	ImageModel,
+	GlitchModel,
+	StorageModel,
+	ShareModel,
+	NetworkModel,
+	SettingsModel,
+	LocalisationModel,
+	localforage
+) {
+	var imageModel = ImageModel();
+	var glitchModel = GlitchModel();
+	var shareModel = ShareModel();
+	var storageModel = StorageModel();
+	var controlsModel = ControlsModel( config.defaultControlParams );
+	var networkModel = NetworkModel();
+	var settingsModel = SettingsModel();
+	var localisationModel = LocalisationModel.sharedInstance;
+
+	var appView = AppView( document.body );
+	var navView = NavView( appView.el );
+	var workspaceView = WorkspaceView( appView.el );
+	var workspaceNavView = WorkspaceNavView( workspaceView.el );
+	var canvasControlsView = CanvasControlsView( workspaceNavView.el );
+	var controlsView = ControlsView( workspaceNavView.el, canvasControlsView.el, config.defaultControlParams );
+	var indicatorView = IndicatorView( workspaceView.el );
+	var canvasView = CanvasView( workspaceView.el, navView.el );
+	var openFileView = OpenFileView( navView.el );
+	var saveView = SaveView( navView.el );
+	var webcamView = WebCamView( navView.el );
+	var shareView = ShareView( navView.el );
+	var aboutView = AboutView( navView.el );
+	var settingsView = SettingsView( navView.el );
+	var fullscreenView = FullscreenView( workspaceView.el );
+	var dragAndDropView = DragAndDropView( canvasView.el );
+	var welcomeView = WelcomeView();
+	
+	function init () {
+		addCSSClasses();
+		addSubscribers();
+
+		networkModel.checkConnectivity();
+
+		if ( browser.test( 'localforage' ) && localforage ) {
+			setUpLocalForage( function () {
+				storageModel.load();
+				settingsModel.load();
+			} );
+		} else {
+			settingsModel.load();
+			controlsView.loadInitialValues();
+			loadInitialItem();
+		}
+
+		document.documentElement.classList.add( 'is-loaded' );
+		
+		setTimeout( function () {
+			document.documentElement.classList.remove( 'is-loading' );
+		}, 10 );
+	}
+
+	// hooks up all messaging between items
+	// using publisher/subscriber model
+	function addSubscribers () {
+		controlsView
+			.on( 'update', controlsModel.setValue )
+			.on( 'random', controlsModel.randomizeValues );
+
+		controlsModel
+			.on( 'update', controlsView.setValue )
+			.on( 'update', glitchModel.setValue )
+			.on( 'update', shareView.hideShareLinks );
+
+		canvasControlsView
+			.on( 'center', canvasView.animateToCenter )
+			.on( 'scale', canvasView.setScale );
+
+		canvasView
+			.on( 'scale', canvasControlsView.setScale )
+			.on( 'dblclick', canvasView.animateToCenter );
+
+		openFileView
+			.on( 'openfile', imageModel.loadFromFile )
+			.on( 'openfromlocalstorage', storageModel.loadItem )
+			.on( 'deletefromlocalstorage', storageModel.removeLocalData )
+			.on( 'deletefromimgur', shareModel.remove );
+
+		saveView
+			.on( 'savetolocalstorage', glitchModel.getImageGenerationFn( saveNewEntry ) )
+			.on( 'savetolocalstorage', updateDownloadLink )
+			.on( 'show', updateDownloadLink );
+
+		navView.on( 'toggleend', canvasView.resized );
+
+		imageModel
+			.on( 'load', glitchModel.setImageData )
+			.on( 'load', openFileView.dialog.hide )
+			.on( 'load', canvasView.animateToCenter )
+			.on( 'load', canvasView.show )
+			.on( 'update', canvasView.hide )
+			.on( 'error', indicatorView.showError )
+			.on( 'error', indicatorView.hideLoading )
+			.on( 'statusmessage', indicatorView.showMessage );
+
+		glitchModel
+			.on( 'glitch', canvasView.putImageData )
+			.on( 'glitch', canvasView.createImageUrl( shareModel.updateUrl ) )
+			.on( 'glitch', updateDownloadLink );
+
+		shareView
+			.on( 'share', shareModel.upload )
+			.on( 'deletefromimgur', shareModel.remove );
+
+		shareModel
+			.on( 'uploadstart', shareView.showUpload )
+			.on( 'uploadend', shareView.hideUpload )
+			.on( 'uploadcomplete', shareView.uploadComplete )
+			.on( 'uploadcomplete', glitchModel.getImageGenerationFn( saveNewEntry ) )
+			.on( 'removecomplete', storageModel.removeImgurData )
+			.on( 'removecomplete', shareView.hideShareLinks )
+			.on( 'error', indicatorView.showError )
+			.on( 'error', shareView.handleError )
+			.on( 'statusmessage', indicatorView.showMessage );
+
+		webcamView
+			.on( 'video', imageModel.loadFromVideo )
+			.on( 'error', indicatorView.showError );
+
+		dragAndDropView
+			.on( 'drop', imageModel.loadFromFile )
+			.on( 'drop', canvasView.hide );
+
+		welcomeView
+			.on( 'message', indicatorView.showWelcome );
+
+		workspaceView
+			.on( 'click', navView.closeSmallScreenNav );
+
+		settingsView
+			.on( 'settingchange', settingsModel.setValue );
+
+		storageModel
+			.on( 'update', openFileView.updateList )
+			.on( 'update', shareView.updateList )
+			.on( 'update', loadInitialItem )
+			.on( 'loaditem', loadEntry )
+			.on( 'statusmessage', indicatorView.showMessage )
+			.on( 'error', indicatorView.showError )
+			.on( 'firstvisit', welcomeView.show );
+
+		networkModel
+			.on( 'connect', shareView.showOnlineOptions )
+			.on( 'disconnect', shareView.hideOnlineOptions )
+			.on( 'connect', appView.showOnlineOptions )
+			.on( 'disconnect', appView.hideOnlineOptions );
+
+		settingsModel
+			.on( 'update', canvasView.panZoom.settingUpdated )
+			.on( 'update', imageModel.settingUpdated )
+			.on( 'update', settingsView.settingUpdated )
+			.on( 'update', localisationModel.settingUpdated )
+			.on( 'error', indicatorView.showError );
+
+		localisationModel
+			.on( 'error', indicatorView.showError );
+	}
+
+	function addCSSClasses () {
+		if ( browser.test( 'touch' ) ) {
+			document.documentElement.classList.add( 'has-touch' );
+		}
+	}
+
+	function setUpLocalForage ( callback ) {
+		if ( localforage ) {
+			localforage.config( config.localForage );
+
+			var driver = [
+				localforage.WEBSQL,
+				localforage.INDEXEDDB,
+				localforage.LOCALSTORAGE
+			];
+
+			if ( browser.test( 'safari' ) ) {
+				driver = localforage.LOCALSTORAGE;
+			}
+		
+			localforage
+				.setDriver( driver )
+				.then( callback );
+		} else {
+			if ( typeof callback === 'function' ) {
+				callback();
+			}
+		}
+	}
+
+	function loadInitialItem ( entries ) {
+		var lastItemUID = -1;
+
+		// load last saved item if possible,
+		// otherwise, load default image
+		if ( entries && Object.keys( entries ).length ) {
+			var now = Date.now();
+			var delta = Infinity;
+
+			for ( var uid in entries ) {
+				if ( entries[uid].timestamp ) {
+					if ( now - entries[uid].timestamp < delta ) {
+						delta = now - entries[uid].timestamp;
+						lastItemUID = uid;
+					}
+				}
+			}
+		}
+
+		storageModel.off( 'update', loadInitialItem );
+
+		if ( lastItemUID !== -1 ) {
+			storageModel.loadItem( lastItemUID );
+		} else {
+			imageModel.loadFromURL( config.defaultImage.path, config.defaultImage.name );
+			controlsView.loadInitialValues();
+		}
+	}
+
+	// saves new item to local storage
+	function saveNewEntry ( thumbnail, publicURL, imgurID, deleteHash ) {
+		var item = {
+			thumbnail: thumbnail,
+			src: imageModel.getLastImageSRC(),
+			values: controlsModel.getValues(),
+			name: imageModel.getLastFileName()
+		};
+
+		if ( publicURL ) {
+			item.publicUrl = publicURL;
+		}
+
+		if ( imgurID ) {
+			item.imgurID = imgurID;
+		}
+
+		if ( deleteHash ) {
+			item.deleteHash = deleteHash;
+		}
+
+		storageModel.add( item );
+	}
+
+	// loads item from localstorage
+	function loadEntry ( uid, entry ) {
+		for ( var key in entry.values ) {
+			controlsModel.setValue( key, entry.values[key] );
+		}
+		
+		imageModel.loadFromURL( entry.src, entry.name );
+	}
+
+	// updates the download link url every time the controls were updated.
+	// add a delay of 200 to we don't update the DOM too often
+	var downloadLinkTimeoutId = NaN;
+
+	function updateDownloadLink () {
+		if ( saveView.getActive() ) {
+			clearTimeout( downloadLinkTimeoutId );
+
+			downloadLinkTimeoutId = setTimeout( function () {
+				glitchModel.getImageGenerationFn( saveView.updateDownloadLink, 'original' )( imageModel.getLastFileName() )
+			}, 200 );				
+		}
+	}
+
+	init();
+} );
--- a/scripts/lib/almond-0.2.6.js
+++ b/scripts/lib/almond-0.2.6.js
@ -1,5 +1,5 @@
 /**
- * almond 0.2.6 Copyright (c) 2011-2012, The Dojo Foundation All Rights Reserved.
+ * @license almond 0.3.1 Copyright (c) 2011-2014, The Dojo Foundation All Rights Reserved.
 * Available via the MIT or new BSD license.
 * see: http://github.com/jrburke/almond for details
 */
@ -16,7 +16,8 @@ var requirejs, require, define;
        config = {},
        defining = {},
        hasOwn = Object.prototype.hasOwnProperty,
-        aps = [].slice;
+        aps = [].slice,
+        jsSuffixRegExp = /\.js$/;

    function hasProp(obj, prop) {
        return hasOwn.call(obj, prop);
@ -31,7 +32,7 @@ var requirejs, require, define;
     * @returns {String} normalized name
     */
    function normalize(name, baseName) {
-        var nameParts, nameSegment, mapValue, foundMap,
+        var nameParts, nameSegment, mapValue, foundMap, lastIndex,
            foundI, foundStarMap, starI, i, j, part,
            baseParts = baseName && baseName.split("/"),
            map = config.map,
@ -43,14 +44,19 @@ var requirejs, require, define;
            //otherwise, assume it is a top-level require that will
            //be relative to baseUrl in the end.
            if (baseName) {
-                //Convert baseName to array, and lop off the last part,
-                //so that . matches that "directory" and not name of the baseName's
-                //module. For instance, baseName of "one/two/three", maps to
-                //"one/two/three.js", but we want the directory, "one/two" for
-                //this normalization.
-                baseParts = baseParts.slice(0, baseParts.length - 1);
+                name = name.split('/');
+                lastIndex = name.length - 1;

-                name = baseParts.concat(name.split("/"));
+                // Node .js allowance:
+                if (config.nodeIdCompat && jsSuffixRegExp.test(name[lastIndex])) {
+                    name[lastIndex] = name[lastIndex].replace(jsSuffixRegExp, '');
+                }
+
+                //Lop off the last part of baseParts, so that . matches the
+                //"directory" and not name of the baseName's module. For instance,
+                //baseName of "one/two/three", maps to "one/two/three.js", but we
+                //want the directory, "one/two" for this normalization.
+                name = baseParts.slice(0, baseParts.length - 1).concat(name);

                //start trimDots
                for (i = 0; i < name.length; i += 1) {
@ -142,7 +148,15 @@ var requirejs, require, define;
            //A version of a require function that passes a moduleName
            //value for items that may need to
            //look up paths relative to the moduleName
-            return req.apply(undef, aps.call(arguments, 0).concat([relName, forceSync]));
+            var args = aps.call(arguments, 0);
+
+            //If first arg is not require('string'), and there is only
+            //one arg, it is the array form without a callback. Insert
+            //a null so that the following concat is correct.
+            if (typeof args[0] !== 'string' && args.length === 1) {
+                args.push(null);
+            }
+            return req.apply(undef, args.concat([relName, forceSync]));
        };
    }

@ -259,14 +273,14 @@ var requirejs, require, define;
    main = function (name, deps, callback, relName) {
        var cjsModule, depName, ret, map, i,
            args = [],
+            callbackType = typeof callback,
            usingExports;

        //Use name if no relName
        relName = relName || name;

        //Call the callback to define the module, if necessary.
-        if (typeof callback === 'function') {
-
+        if (callbackType === 'undefined' || callbackType === 'function') {
            //Pull out the defined dependencies and pass the ordered
            //values to the callback.
            //Default to [require, exports, module] if no deps
@ -297,7 +311,7 @@ var requirejs, require, define;
                }
            }

-            ret = callback.apply(defined[name], args);
+            ret = callback ? callback.apply(defined[name], args) : undefined;

            if (name) {
                //If setting exports via "module" is in play,
@ -332,6 +346,13 @@ var requirejs, require, define;
        } else if (!deps.splice) {
            //deps is a config object, not an array.
            config = deps;
+            if (config.deps) {
+                req(config.deps, config.callback);
+            }
+            if (!callback) {
+                return;
+            }
+
            if (callback.splice) {
                //callback is an array, which means it is a dependency list.
                //Adjust args if there are dependencies
@ -376,11 +397,7 @@ var requirejs, require, define;
     * the config return value is used.
     */
    req.config = function (cfg) {
-        config = cfg;
-        if (config.deps) {
-            req(config.deps, config.callback);
-        }
-        return req;
+        return req(cfg);
    };

    /**
@ -389,6 +406,9 @@ var requirejs, require, define;
    requirejs._defined = defined;

    define = function (name, deps, callback) {
+        if (typeof name !== 'string') {
+            throw new Error('See almond README: incorrect module build, no module name');
+        }

        //This module may not have dependencies
        if (!deps.splice) {
--- a/scripts/lib/getusermedia.js
+++ b/scripts/lib/getusermedia.js
@ -1,10 +0,0 @@
-;(function ()
-{
-	navigator.getUserMedia = (
-		navigator.getUserMedia ||
-		navigator.webkitGetUserMedia ||
-		navigator.mozGetUserMedia ||
-		navigator.msGetUserMedia ||
-		false
-	);
-})()
--- a/scripts/lib/glitch-canvas-with-worker.js
+++ b/scripts/lib/glitch-canvas-with-worker.js
@ -0,0 +1,292 @@
+//! glitch-canvas by snorpey, MIT License
+(function(window, factory) {
+    if (typeof define === "function" && define.amd) {
+        define(factory);
+    } else if (typeof exports === "object") {
+        module.exports = factory();
+    } else {
+        window.glitch = factory();
+    }
+})(this, function() {
+
+	function Glitcher ( webworkerPath ) {
+		if ( ! ( this instanceof Glitcher ) ) {
+			return new Glitcher( webworkerPath );
+		}
+
+		var self = this
+		var canvas1El = document.createElement( 'canvas' );
+		var canvas2El = document.createElement( 'canvas' );
+		var ctx1 = canvas1El.getContext( '2d' );
+		var ctx2 = canvas2El.getContext( '2d' );
+		var img = new Image();
+		var base64;
+		var img;
+		var newImageData;
+		var i;
+		var len;
+		var params;
+		var worker;
+		var base64Chars;
+		var base64Map;
+		var reversedBase64Map;
+		var byteArrayImageData;
+		var jpgHeaderLength;
+
+		function init () {
+			if ( webworkerPath && 'Worker' in window ) {
+				worker = new Worker( webworkerPath );
+				worker.addEventListener( 'message', workerResponded, false );
+			} else {
+				base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+				base64Map = base64Chars.split( '' );
+				reversedBase64Map = { };
+				
+				base64Map.forEach( function ( val, key ) {
+					reversedBase64Map[val] = key;
+				} );
+			}
+
+			return self;
+		}
+
+		function glitch ( imageData, parameters, callback ) {
+			if (
+				isValidImageData( imageData ) &&
+				isType( parameters, 'parameters', 'object' ) &&
+				isType( callback, 'callback', 'function' )
+			) {
+				resizeCanvas( canvas1El, imageData );
+				resizeCanvas( canvas2El, imageData );
+				params = getNormalizedParameters( parameters );
+				base64 = getBase64FromImageData( imageData, params.quality );
+							
+				img.onload = function () {
+					ctx1.drawImage( img, 0, 0 );
+					newImageData = ctx1.getImageData( 0, 0, imageData.width, imageData.height );
+					callback ( newImageData );
+					img.onload = null;
+				};
+
+				if ( worker ) {
+					worker.postMessage( { glitch: { base64: base64, parameters: params } } );
+				} else {
+					byteArrayImageData = base64ToByteArray( base64 );
+					jpgHeaderLength = getJpegHeaderSize( byteArrayImageData );
+					
+					for ( i = 0, len = params.iterations; i < len; i++ ) {
+						glitchJpegBytes( byteArrayImageData, jpgHeaderLength, params.seed, params.amount, i, params.iterations );
+					}
+
+					img.src = byteArrayToBase64( byteArrayImageData );
+				}
+			}
+
+			return self;
+		}
+
+		function workerResponded ( event ) {
+			if ( event && event.data && event.data.glitched ) {
+				glitched( event.data.glitched );
+			} else {
+				window.console && console.log( 'glitchworker response', event.data );
+			}
+		}
+
+		function workerFailed ( err ) {
+			window.console && console.log( err.message || err );
+		}
+
+		function glitched ( newBase64ImageData ) {
+			img.src = newBase64ImageData;
+		}
+
+		function resizeCanvas ( canvas, size ) {
+			if ( canvas.width !== size.width ) {
+				canvas.width = size.width;
+			}
+
+			if ( canvas.height !== size.height ) {
+				canvas.height = size.height;
+			}
+		}
+
+		function getNormalizedParameters ( parameters ) {
+			return {
+				seed: ( parameters.seed || 0 ) / 100,
+				quality: ( parameters.quality || 0 ) / 100,
+				amount: ( parameters.amount || 0 ) / 100,
+				iterations: parameters.iterations || 0
+			};
+		}
+
+		function getBase64FromImageData ( imageData, quality ) {
+			var q = typeof quality === 'number' && quality < 1 && quality > 0 ? quality : .1;
+			
+			ctx2.putImageData( imageData, 0, 0 );
+			
+			var base64 = canvas2El.toDataURL( 'image/jpeg', q );
+			
+			switch ( base64.length % 4 ) {
+				case 3:
+					base64 += '=';
+					break;
+
+				case 2:
+					base64 += '==';
+					break;
+
+				case 1:
+					base64 += '===';
+					break;
+			}
+
+			return base64;
+		}
+
+		function isValidImageData ( imageData ) {
+			if (
+				isType( imageData, 'imageData', 'object' ) &&
+				isType( imageData.width, 'imageData.width', 'number' ) &&
+				isType( imageData.height, 'imageData.height', 'number' ) &&
+				isType( imageData.data, 'imageData.data', 'object' ) &&
+				isType( imageData.data.length, 'imageData.data.length', 'number' ) &&
+				checkNumber( imageData.data.length, 'imageData.data.length', isPositive, '> 0' )
+			) {
+				return true;
+			} else {
+				return false;
+			}
+		}
+
+		function isType ( it, name, expectedType ) {
+			if ( typeof it === expectedType ) {
+				return true;
+			} else {
+				error( it, 'typeof ' + name, '"' + expectedType + '"', '"' + typeof it + '"' );
+				return false;
+			}
+		}
+
+		function checkNumber ( it, name, condition, conditionName ) {
+			if ( condition( it ) === true) {
+				return true;
+			} else {
+				error( it, name, conditionName, 'not' );
+			}
+		}
+
+		function isPositive ( nr ) {
+			return nr > 0;
+		}
+
+		function error ( it, name, expected, result ) {
+			throw new Error( 'glitch(): Expected ' + name + ' to be ' + expected + ', but it was ' + result + '.' );
+		}
+		
+		// all functions beyond this point are only used if no webworker is available
+
+		function glitchJpegBytes ( byteArray, jpgHeaderLength, seed, amount, i, len ) {
+			var maxIndex = byteArray.length - jpgHeaderLength - 4;
+			var pxMin = parseInt( maxIndex / len * i, 10 );
+			var pxMax = parseInt( maxIndex / len * ( i + 1 ), 10 );
+			var delta = pxMax - pxMin;
+			var pxIndex = parseInt( pxMin + delta * seed, 10 );
+			
+			if ( pxIndex > maxIndex ) {
+				pxIndex = maxIndex;
+			}
+
+			var index = Math.floor( jpgHeaderLength + pxIndex );
+			
+			byteArray[index] = Math.floor( amount * 256 );
+		}
+
+		function base64ToByteArray ( str ) {
+			var result = [ ];
+			var digitNum;
+			var cur;
+			var prev;
+			
+			for ( i = 23, len = str.length; i < len; i++ ) {
+				cur = reversedBase64Map[str.charAt( i )];
+				digitNum = ( i - 23 ) % 4;
+				
+				switch ( digitNum ) {
+					case 1:
+						result.push( prev << 2 | cur >> 4 );
+						break;
+
+					case 2:
+						result.push( ( prev & 15 ) << 4 | cur >> 2 );
+						break;
+
+					case 3:
+						result.push( ( prev & 3 ) << 6 | cur );
+						break;
+				}
+
+				prev = cur;
+			}
+
+			return result;
+		}
+
+		function byteArrayToBase64 ( arr ) {
+			var result = [ 'data:image/jpeg;base64,' ];
+			var byteNum;
+			var cur;
+			var prev;
+			
+			for ( i = 0, len = arr.length; i < len; i++ ) {
+				cur = arr[i];
+				byteNum = i % 3;
+				
+				switch (byteNum) {
+					case 0:
+						result.push( base64Map[cur >> 2] );
+						break;
+
+					case 1:
+						result.push( base64Map[( prev & 3 ) << 4 | cur >> 4] );
+						break;
+
+					case 2:
+						result.push( base64Map[( prev & 15 ) << 2 | cur >> 6] );
+						result.push( base64Map[cur & 63] );
+						break;
+				}
+
+				prev = cur;
+			}
+
+			if ( byteNum === 0 ) {
+				result.push( base64Map[( prev & 3 ) << 4] );
+				result.push( '==' );
+			} else if ( byteNum === 1 ) {
+				result.push( base64Map[( prev & 15 ) << 2] );
+				result.push( '=' );
+			}
+
+			return result.join( '' );
+		}
+
+		function getJpegHeaderSize ( data ) {
+			var result = 417;
+
+			for ( i = 0, len = data.length; i < len; i++ ) {
+				if ( data[i] === 255 && data[i + 1] === 218 ) {
+					result = i + 2;
+					break;
+				}
+			}
+
+			return result;
+		}
+
+		self.glitch = glitch;
+		self.init = init;
+	}
+
+	return Glitcher;
+});
--- a/scripts/lib/glitch-canvas.js
+++ b/scripts/lib/glitch-canvas.js
@ -1,198 +0,0 @@
-//! glitch-canvas by snorpey, MIT License
-(function(window, factory) {
-    if (typeof define === "function" && define.amd) {
-        define(factory);
-    } else if (typeof exports === "object") {
-        module.exports = factory();
-    } else {
-        window.glitch = factory();
-    }
-})(this, function() {
-    var canvas_1 = document.createElement("canvas");
-    var canvas_2 = document.createElement("canvas");
-    var ctx_1 = canvas_1.getContext("2d");
-    var ctx_2 = canvas_2.getContext("2d");
-    var base64_chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
-    var base64_map = base64_chars.split("");
-    var reversed_base64_map = {};
-    var params;
-    var base64;
-    var byte_array;
-    var jpg_header_length;
-    var img;
-    var new_image_data;
-    var i;
-    var len;
-    base64_map.forEach(function(val, key) {
-        reversed_base64_map[val] = key;
-    });
-    function glitchImageData(image_data, parameters, callback) {
-        if (isValidImageData(image_data) && checkType(parameters, "parameters", "object") && checkType(callback, "callback", "function")) {
-            params = getNormalizedParameters(parameters);
-            resizeCanvas(canvas_1, image_data);
-            resizeCanvas(canvas_2, image_data);
-            base64 = getBase64FromImageData(image_data, params.quality);
-            byte_array = base64ToByteArray(base64);
-            jpg_header_length = getJpegHeaderSize(byte_array);
-            for (i = 0, len = params.iterations; i < len; i++) {
-                glitchJpegBytes(byte_array, jpg_header_length, params.seed, params.amount, i, params.iterations);
-            }
-            img = new Image();
-            img.onload = function() {
-                ctx_1.drawImage(img, 0, 0);
-                new_image_data = ctx_1.getImageData(0, 0, image_data.width, image_data.height);
-                callback(new_image_data);
-            };
-            img.src = byteArrayToBase64(byte_array);
-        }
-    }
-    function resizeCanvas(canvas, size) {
-        if (canvas.width !== size.width) {
-            canvas.width = size.width;
-        }
-        if (canvas.height !== size.height) {
-            canvas.height = size.height;
-        }
-    }
-    function glitchJpegBytes(byte_array, jpg_header_length, seed, amount, i, len) {
-        var max_index = byte_array.length - jpg_header_length - 4;
-        var px_min = parseInt(max_index / len * i, 10);
-        var px_max = parseInt(max_index / len * (i + 1), 10);
-        var delta = px_max - px_min;
-        var px_i = parseInt(px_min + delta * seed, 10);
-        if (px_i > max_index) {
-            px_i = max_index;
-        }
-        var index = Math.floor(jpg_header_length + px_i);
-        byte_array[index] = Math.floor(amount * 256);
-    }
-    function getBase64FromImageData(image_data, quality) {
-        var q = typeof quality === "number" && quality < 1 && quality > 0 ? quality : .1;
-        ctx_2.putImageData(image_data, 0, 0);
-        var base64 = canvas_2.toDataURL("image/jpeg", q);
-        switch (base64.length % 4) {
-          case 3:
-            base64 += "=";
-            break;
-
-          case 2:
-            base64 += "==";
-            break;
-
-          case 1:
-            base64 += "===";
-            break;
-        }
-        return base64;
-    }
-    function getJpegHeaderSize(data) {
-        var result = 417;
-        for (i = 0, len = data.length; i < len; i++) {
-            if (data[i] === 255 && data[i + 1] === 218) {
-                result = i + 2;
-                break;
-            }
-        }
-        return result;
-    }
-    function base64ToByteArray(str) {
-        var result = [];
-        var digit_num;
-        var cur;
-        var prev;
-        for (i = 23, len = str.length; i < len; i++) {
-            cur = reversed_base64_map[str.charAt(i)];
-            digit_num = (i - 23) % 4;
-            switch (digit_num) {
-              case 1:
-                result.push(prev << 2 | cur >> 4);
-                break;
-
-              case 2:
-                result.push((prev & 15) << 4 | cur >> 2);
-                break;
-
-              case 3:
-                result.push((prev & 3) << 6 | cur);
-                break;
-            }
-            prev = cur;
-        }
-        return result;
-    }
-    function byteArrayToBase64(arr) {
-        var result = [ "data:image/jpeg;base64," ];
-        var byte_num;
-        var cur;
-        var prev;
-        for (i = 0, len = arr.length; i < len; i++) {
-            cur = arr[i];
-            byte_num = i % 3;
-            switch (byte_num) {
-              case 0:
-                result.push(base64_map[cur >> 2]);
-                break;
-
-              case 1:
-                result.push(base64_map[(prev & 3) << 4 | cur >> 4]);
-                break;
-
-              case 2:
-                result.push(base64_map[(prev & 15) << 2 | cur >> 6]);
-                result.push(base64_map[cur & 63]);
-                break;
-            }
-            prev = cur;
-        }
-        if (byte_num === 0) {
-            result.push(base64_map[(prev & 3) << 4]);
-            result.push("==");
-        } else if (byte_num === 1) {
-            result.push(base64_map[(prev & 15) << 2]);
-            result.push("=");
-        }
-        return result.join("");
-    }
-    function getImageDataCopy(image_data) {
-        var copy = ctx_2.createImageData(image_data.width, image_data.height);
-        copy.data.set(image_data.data);
-        return copy;
-    }
-    function getNormalizedParameters(parameters) {
-        return {
-            seed: (parameters.seed || 0) / 100,
-            quality: (parameters.quality || 0) / 100,
-            amount: (parameters.amount || 0) / 100,
-            iterations: parameters.iterations || 0
-        };
-    }
-    function isValidImageData(image_data) {
-        if (checkType(image_data, "image_data", "object") && checkType(image_data.width, "image_data.width", "number") && checkType(image_data.height, "image_data.height", "number") && checkType(image_data.data, "image_data.data", "object") && checkType(image_data.data.length, "image_data.data.length", "number") && checkNumber(image_data.data.length, "image_data.data.length", isPositive, "> 0")) {
-            return true;
-        } else {
-            return false;
-        }
-    }
-    function checkType(it, name, expected_type) {
-        if (typeof it === expected_type) {
-            return true;
-        } else {
-            error(it, "typeof " + name, '"' + expected_type + '"', '"' + typeof it + '"');
-            return false;
-        }
-    }
-    function checkNumber(it, name, condition, condition_name) {
-        if (condition(it) === true) {
-            return true;
-        } else {
-            error(it, name, condition_name, "not");
-        }
-    }
-    function isPositive(nr) {
-        return nr > 0;
-    }
-    function error(it, name, expected, result) {
-        throw new Error("glitch(): Expected " + name + " to be " + expected + ", but it was " + result + ".");
-    }
-    return glitchImageData;
-});
--- a/scripts/lib/localforage.nopromises.js
+++ b/scripts/lib/localforage.nopromises.js
--- a/scripts/lib/md5.js
+++ b/scripts/lib/md5.js
@ -0,0 +1,274 @@
+/*
+ * JavaScript MD5 1.0.1
+ * https://github.com/blueimp/JavaScript-MD5
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ * 
+ * Based on
+ * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
+ * Digest Algorithm, as defined in RFC 1321.
+ * Version 2.2 Copyright (C) Paul Johnston 1999 - 2009
+ * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
+ * Distributed under the BSD License
+ * See http://pajhome.org.uk/crypt/md5 for more info.
+ */
+
+/*jslint bitwise: true */
+/*global unescape, define */
+
+(function ($) {
+    'use strict';
+
+    /*
+    * Add integers, wrapping at 2^32. This uses 16-bit operations internally
+    * to work around bugs in some JS interpreters.
+    */
+    function safe_add(x, y) {
+        var lsw = (x & 0xFFFF) + (y & 0xFFFF),
+            msw = (x >> 16) + (y >> 16) + (lsw >> 16);
+        return (msw << 16) | (lsw & 0xFFFF);
+    }
+
+    /*
+    * Bitwise rotate a 32-bit number to the left.
+    */
+    function bit_rol(num, cnt) {
+        return (num << cnt) | (num >>> (32 - cnt));
+    }
+
+    /*
+    * These functions implement the four basic operations the algorithm uses.
+    */
+    function md5_cmn(q, a, b, x, s, t) {
+        return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b);
+    }
+    function md5_ff(a, b, c, d, x, s, t) {
+        return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
+    }
+    function md5_gg(a, b, c, d, x, s, t) {
+        return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
+    }
+    function md5_hh(a, b, c, d, x, s, t) {
+        return md5_cmn(b ^ c ^ d, a, b, x, s, t);
+    }
+    function md5_ii(a, b, c, d, x, s, t) {
+        return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
+    }
+
+    /*
+    * Calculate the MD5 of an array of little-endian words, and a bit length.
+    */
+    function binl_md5(x, len) {
+        /* append padding */
+        x[len >> 5] |= 0x80 << (len % 32);
+        x[(((len + 64) >>> 9) << 4) + 14] = len;
+
+        var i, olda, oldb, oldc, oldd,
+            a =  1732584193,
+            b = -271733879,
+            c = -1732584194,
+            d =  271733878;
+
+        for (i = 0; i < x.length; i += 16) {
+            olda = a;
+            oldb = b;
+            oldc = c;
+            oldd = d;
+
+            a = md5_ff(a, b, c, d, x[i],       7, -680876936);
+            d = md5_ff(d, a, b, c, x[i +  1], 12, -389564586);
+            c = md5_ff(c, d, a, b, x[i +  2], 17,  606105819);
+            b = md5_ff(b, c, d, a, x[i +  3], 22, -1044525330);
+            a = md5_ff(a, b, c, d, x[i +  4],  7, -176418897);
+            d = md5_ff(d, a, b, c, x[i +  5], 12,  1200080426);
+            c = md5_ff(c, d, a, b, x[i +  6], 17, -1473231341);
+            b = md5_ff(b, c, d, a, x[i +  7], 22, -45705983);
+            a = md5_ff(a, b, c, d, x[i +  8],  7,  1770035416);
+            d = md5_ff(d, a, b, c, x[i +  9], 12, -1958414417);
+            c = md5_ff(c, d, a, b, x[i + 10], 17, -42063);
+            b = md5_ff(b, c, d, a, x[i + 11], 22, -1990404162);
+            a = md5_ff(a, b, c, d, x[i + 12],  7,  1804603682);
+            d = md5_ff(d, a, b, c, x[i + 13], 12, -40341101);
+            c = md5_ff(c, d, a, b, x[i + 14], 17, -1502002290);
+            b = md5_ff(b, c, d, a, x[i + 15], 22,  1236535329);
+
+            a = md5_gg(a, b, c, d, x[i +  1],  5, -165796510);
+            d = md5_gg(d, a, b, c, x[i +  6],  9, -1069501632);
+            c = md5_gg(c, d, a, b, x[i + 11], 14,  643717713);
+            b = md5_gg(b, c, d, a, x[i],      20, -373897302);
+            a = md5_gg(a, b, c, d, x[i +  5],  5, -701558691);
+            d = md5_gg(d, a, b, c, x[i + 10],  9,  38016083);
+            c = md5_gg(c, d, a, b, x[i + 15], 14, -660478335);
+            b = md5_gg(b, c, d, a, x[i +  4], 20, -405537848);
+            a = md5_gg(a, b, c, d, x[i +  9],  5,  568446438);
+            d = md5_gg(d, a, b, c, x[i + 14],  9, -1019803690);
+            c = md5_gg(c, d, a, b, x[i +  3], 14, -187363961);
+            b = md5_gg(b, c, d, a, x[i +  8], 20,  1163531501);
+            a = md5_gg(a, b, c, d, x[i + 13],  5, -1444681467);
+            d = md5_gg(d, a, b, c, x[i +  2],  9, -51403784);
+            c = md5_gg(c, d, a, b, x[i +  7], 14,  1735328473);
+            b = md5_gg(b, c, d, a, x[i + 12], 20, -1926607734);
+
+            a = md5_hh(a, b, c, d, x[i +  5],  4, -378558);
+            d = md5_hh(d, a, b, c, x[i +  8], 11, -2022574463);
+            c = md5_hh(c, d, a, b, x[i + 11], 16,  1839030562);
+            b = md5_hh(b, c, d, a, x[i + 14], 23, -35309556);
+            a = md5_hh(a, b, c, d, x[i +  1],  4, -1530992060);
+            d = md5_hh(d, a, b, c, x[i +  4], 11,  1272893353);
+            c = md5_hh(c, d, a, b, x[i +  7], 16, -155497632);
+            b = md5_hh(b, c, d, a, x[i + 10], 23, -1094730640);
+            a = md5_hh(a, b, c, d, x[i + 13],  4,  681279174);
+            d = md5_hh(d, a, b, c, x[i],      11, -358537222);
+            c = md5_hh(c, d, a, b, x[i +  3], 16, -722521979);
+            b = md5_hh(b, c, d, a, x[i +  6], 23,  76029189);
+            a = md5_hh(a, b, c, d, x[i +  9],  4, -640364487);
+            d = md5_hh(d, a, b, c, x[i + 12], 11, -421815835);
+            c = md5_hh(c, d, a, b, x[i + 15], 16,  530742520);
+            b = md5_hh(b, c, d, a, x[i +  2], 23, -995338651);
+
+            a = md5_ii(a, b, c, d, x[i],       6, -198630844);
+            d = md5_ii(d, a, b, c, x[i +  7], 10,  1126891415);
+            c = md5_ii(c, d, a, b, x[i + 14], 15, -1416354905);
+            b = md5_ii(b, c, d, a, x[i +  5], 21, -57434055);
+            a = md5_ii(a, b, c, d, x[i + 12],  6,  1700485571);
+            d = md5_ii(d, a, b, c, x[i +  3], 10, -1894986606);
+            c = md5_ii(c, d, a, b, x[i + 10], 15, -1051523);
+            b = md5_ii(b, c, d, a, x[i +  1], 21, -2054922799);
+            a = md5_ii(a, b, c, d, x[i +  8],  6,  1873313359);
+            d = md5_ii(d, a, b, c, x[i + 15], 10, -30611744);
+            c = md5_ii(c, d, a, b, x[i +  6], 15, -1560198380);
+            b = md5_ii(b, c, d, a, x[i + 13], 21,  1309151649);
+            a = md5_ii(a, b, c, d, x[i +  4],  6, -145523070);
+            d = md5_ii(d, a, b, c, x[i + 11], 10, -1120210379);
+            c = md5_ii(c, d, a, b, x[i +  2], 15,  718787259);
+            b = md5_ii(b, c, d, a, x[i +  9], 21, -343485551);
+
+            a = safe_add(a, olda);
+            b = safe_add(b, oldb);
+            c = safe_add(c, oldc);
+            d = safe_add(d, oldd);
+        }
+        return [a, b, c, d];
+    }
+
+    /*
+    * Convert an array of little-endian words to a string
+    */
+    function binl2rstr(input) {
+        var i,
+            output = '';
+        for (i = 0; i < input.length * 32; i += 8) {
+            output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xFF);
+        }
+        return output;
+    }
+
+    /*
+    * Convert a raw string to an array of little-endian words
+    * Characters >255 have their high-byte silently ignored.
+    */
+    function rstr2binl(input) {
+        var i,
+            output = [];
+        output[(input.length >> 2) - 1] = undefined;
+        for (i = 0; i < output.length; i += 1) {
+            output[i] = 0;
+        }
+        for (i = 0; i < input.length * 8; i += 8) {
+            output[i >> 5] |= (input.charCodeAt(i / 8) & 0xFF) << (i % 32);
+        }
+        return output;
+    }
+
+    /*
+    * Calculate the MD5 of a raw string
+    */
+    function rstr_md5(s) {
+        return binl2rstr(binl_md5(rstr2binl(s), s.length * 8));
+    }
+
+    /*
+    * Calculate the HMAC-MD5, of a key and some data (raw strings)
+    */
+    function rstr_hmac_md5(key, data) {
+        var i,
+            bkey = rstr2binl(key),
+            ipad = [],
+            opad = [],
+            hash;
+        ipad[15] = opad[15] = undefined;
+        if (bkey.length > 16) {
+            bkey = binl_md5(bkey, key.length * 8);
+        }
+        for (i = 0; i < 16; i += 1) {
+            ipad[i] = bkey[i] ^ 0x36363636;
+            opad[i] = bkey[i] ^ 0x5C5C5C5C;
+        }
+        hash = binl_md5(ipad.concat(rstr2binl(data)), 512 + data.length * 8);
+        return binl2rstr(binl_md5(opad.concat(hash), 512 + 128));
+    }
+
+    /*
+    * Convert a raw string to a hex string
+    */
+    function rstr2hex(input) {
+        var hex_tab = '0123456789abcdef',
+            output = '',
+            x,
+            i;
+        for (i = 0; i < input.length; i += 1) {
+            x = input.charCodeAt(i);
+            output += hex_tab.charAt((x >>> 4) & 0x0F) +
+                hex_tab.charAt(x & 0x0F);
+        }
+        return output;
+    }
+
+    /*
+    * Encode a string as utf-8
+    */
+    function str2rstr_utf8(input) {
+        return unescape(encodeURIComponent(input));
+    }
+
+    /*
+    * Take string arguments and return either raw or hex encoded strings
+    */
+    function raw_md5(s) {
+        return rstr_md5(str2rstr_utf8(s));
+    }
+    function hex_md5(s) {
+        return rstr2hex(raw_md5(s));
+    }
+    function raw_hmac_md5(k, d) {
+        return rstr_hmac_md5(str2rstr_utf8(k), str2rstr_utf8(d));
+    }
+    function hex_hmac_md5(k, d) {
+        return rstr2hex(raw_hmac_md5(k, d));
+    }
+
+    function md5(string, key, raw) {
+        if (!key) {
+            if (!raw) {
+                return hex_md5(string);
+            }
+            return raw_md5(string);
+        }
+        if (!raw) {
+            return hex_hmac_md5(key, string);
+        }
+        return raw_hmac_md5(key, string);
+    }
+
+    if (typeof define === 'function' && define.amd) {
+        define(function () {
+            return md5;
+        });
+    } else {
+        $.md5 = md5;
+    }
+}(this));
--- a/scripts/lib/raf.js
+++ b/scripts/lib/raf.js
@ -1,31 +0,0 @@
-// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
-// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
- 
-// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
- 
-// MIT license
- 
-(function() {
-    var lastTime = 0;
-    var vendors = ['ms', 'moz', 'webkit', 'o'];
-    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
-        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
-        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
-                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
-    }
- 
-    if (!window.requestAnimationFrame)
-        window.requestAnimationFrame = function(callback, element) {
-            var currTime = new Date().getTime();
-            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
-            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
-              timeToCall);
-            lastTime = currTime + timeToCall;
-            return id;
-        };
- 
-    if (!window.cancelAnimationFrame)
-        window.cancelAnimationFrame = function(id) {
-            clearTimeout(id);
-        };
-}());
--- a/scripts/lib/require-2.1.4.js
+++ b/scripts/lib/require-2.1.4.js
@ -1,5 +1,5 @@
 /** vim: et:ts=4:sw=4:sts=4
- * @license RequireJS 2.1.4 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
+ * @license RequireJS 2.1.20 Copyright (c) 2010-2015, The Dojo Foundation All Rights Reserved.
 * Available via the MIT or new BSD license.
 * see: http://github.com/jrburke/requirejs for details
 */
@ -12,7 +12,7 @@ var requirejs, require, define;
 (function (global) {
    var req, s, head, baseElement, dataMain, src,
        interactiveScript, currentlyAddingScript, mainScript, subPath,
-        version = '2.1.4',
+        version = '2.1.20',
        commentRegExp = /(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,
        cjsRequireRegExp = /[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,
        jsSuffixRegExp = /\.js$/,
@ -21,8 +21,7 @@ var requirejs, require, define;
        ostring = op.toString,
        hasOwn = op.hasOwnProperty,
        ap = Array.prototype,
-        apsp = ap.splice,
-        isBrowser = !!(typeof window !== 'undefined' && navigator && document),
+        isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document),
        isWebWorker = !isBrowser && typeof importScripts !== 'undefined',
        //PS3 indicates loaded and complete, but need to wait for complete
        //specifically. Sequence is 'loading', 'loaded', execution,
@ -108,7 +107,10 @@ var requirejs, require, define;
        if (source) {
            eachProp(source, function (value, prop) {
                if (force || !hasProp(target, prop)) {
-                    if (deepStringMixin && typeof value !== 'string') {
+                    if (deepStringMixin && typeof value === 'object' && value &&
+                        !isArray(value) && !isFunction(value) &&
+                        !(value instanceof RegExp)) {
+
                        if (!target[prop]) {
                            target[prop] = {};
                        }
@ -134,7 +136,11 @@ var requirejs, require, define;
        return document.getElementsByTagName('script');
    }

-    //Allow getting a global that expressed in
+    function defaultOnError(err) {
+        throw err;
+    }
+
+    //Allow getting a global that is expressed in
    //dot notation, like 'a.b.c'.
    function getGlobal(value) {
        if (!value) {
@ -173,7 +179,7 @@ var requirejs, require, define;

    if (typeof requirejs !== 'undefined') {
        if (isFunction(requirejs)) {
-            //Do not overwrite and existing requirejs instance.
+            //Do not overwrite an existing requirejs instance.
            return;
        }
        cfg = requirejs;
@ -191,19 +197,27 @@ var requirejs, require, define;
        var inCheckLoaded, Module, context, handlers,
            checkLoadedTimeoutId,
            config = {
+                //Defaults. Do not set a default for map
+                //config to speed up normalize(), which
+                //will run faster if there is no default.
                waitSeconds: 7,
                baseUrl: './',
                paths: {},
+                bundles: {},
                pkgs: {},
                shim: {},
-                map: {},
                config: {}
            },
            registry = {},
+            //registry of just enabled modules, to speed
+            //cycle breaking code when lots of modules
+            //are registered, but not activated.
+            enabledRegistry = {},
            undefEvents = {},
            defQueue = [],
            defined = {},
            urlFetched = {},
+            bundlesMap = {},
            requireCounter = 1,
            unnormalizedCounter = 1;

@ -218,20 +232,19 @@ var requirejs, require, define;
         */
        function trimDots(ary) {
            var i, part;
-            for (i = 0; ary[i]; i += 1) {
+            for (i = 0; i < ary.length; i++) {
                part = ary[i];
                if (part === '.') {
                    ary.splice(i, 1);
                    i -= 1;
                } else if (part === '..') {
-                    if (i === 1 && (ary[2] === '..' || ary[0] === '..')) {
-                        //End of the line. Keep at least one non-dot
-                        //path segment at the front so it can be mapped
-                        //correctly to disk. Otherwise, there is likely
-                        //no path mapping for a path starting with '..'.
-                        //This can still fail, but catches the most reasonable
-                        //uses of ..
-                        break;
+                    // If at the start, or previous value is still ..,
+                    // keep them so that when converted to a path it may
+                    // still work when converted to a path, even though
+                    // as an ID it is less than ideal. In larger point
+                    // releases, may be better to just kick out an error.
+                    if (i === 0 || (i === 1 && ary[2] === '..') || ary[i - 1] === '..') {
+                        continue;
                    } else if (i > 0) {
                        ary.splice(i - 1, 2);
                        i -= 2;
@ -251,54 +264,45 @@ var requirejs, require, define;
         * @returns {String} normalized name
         */
        function normalize(name, baseName, applyMap) {
-            var pkgName, pkgConfig, mapValue, nameParts, i, j, nameSegment,
-                foundMap, foundI, foundStarMap, starI,
-                baseParts = baseName && baseName.split('/'),
-                normalizedBaseParts = baseParts,
+            var pkgMain, mapValue, nameParts, i, j, nameSegment, lastIndex,
+                foundMap, foundI, foundStarMap, starI, normalizedBaseParts,
+                baseParts = (baseName && baseName.split('/')),
                map = config.map,
                starMap = map && map['*'];

            //Adjust any relative paths.
-            if (name && name.charAt(0) === '.') {
-                //If have a base name, try to normalize against it,
-                //otherwise, assume it is a top-level require that will
-                //be relative to baseUrl in the end.
-                if (baseName) {
-                    if (getOwn(config.pkgs, baseName)) {
-                        //If the baseName is a package name, then just treat it as one
-                        //name to concat the name with.
-                        normalizedBaseParts = baseParts = [baseName];
-                    } else {
+            if (name) {
+                name = name.split('/');
+                lastIndex = name.length - 1;
+
+                // If wanting node ID compatibility, strip .js from end
+                // of IDs. Have to do this here, and not in nameToUrl
+                // because node allows either .js or non .js to map
+                // to same file.
+                if (config.nodeIdCompat && jsSuffixRegExp.test(name[lastIndex])) {
+                    name[lastIndex] = name[lastIndex].replace(jsSuffixRegExp, '');
+                }
+
+                // Starts with a '.' so need the baseName
+                if (name[0].charAt(0) === '.' && baseParts) {
                    //Convert baseName to array, and lop off the last part,
                    //so that . matches that 'directory' and not name of the baseName's
                    //module. For instance, baseName of 'one/two/three', maps to
                    //'one/two/three.js', but we want the directory, 'one/two' for
                    //this normalization.
                    normalizedBaseParts = baseParts.slice(0, baseParts.length - 1);
+                    name = normalizedBaseParts.concat(name);
                }

-                    name = normalizedBaseParts.concat(name.split('/'));
                trimDots(name);
-
-                    //Some use of packages may use a . path to reference the
-                    //'main' module name, so normalize for that.
-                    pkgConfig = getOwn(config.pkgs, (pkgName = name[0]));
                name = name.join('/');
-                    if (pkgConfig && name === pkgName + '/' + pkgConfig.main) {
-                        name = pkgName;
-                    }
-                } else if (name.indexOf('./') === 0) {
-                    // No baseName, so this is ID is resolved relative
-                    // to baseUrl, pull off the leading dot.
-                    name = name.substring(2);
-                }
            }

            //Apply map config if available.
-            if (applyMap && (baseParts || starMap) && map) {
+            if (applyMap && map && (baseParts || starMap)) {
                nameParts = name.split('/');

-                for (i = nameParts.length; i > 0; i -= 1) {
+                outerLoop: for (i = nameParts.length; i > 0; i -= 1) {
                    nameSegment = nameParts.slice(0, i).join('/');

                    if (baseParts) {
@ -315,16 +319,12 @@ var requirejs, require, define;
                                    //Match, update name to the new value.
                                    foundMap = mapValue;
                                    foundI = i;
-                                    break;
+                                    break outerLoop;
                                }
                            }
                        }
                    }

-                    if (foundMap) {
-                        break;
-                    }
-
                    //Check for a star map match, but just hold on to it,
                    //if there is a shorter segment match later in a matching
                    //config, then favor over this star map.
@ -345,7 +345,11 @@ var requirejs, require, define;
                }
            }

-            return name;
+            // If the name points to a package's name, use
+            // the package main instead.
+            pkgMain = getOwn(config.pkgs, name);
+
+            return pkgMain ? pkgMain : name;
        }

        function removeScript(name) {
@ -363,12 +367,17 @@ var requirejs, require, define;
        function hasPathFallback(id) {
            var pathConfig = getOwn(config.paths, id);
            if (pathConfig && isArray(pathConfig) && pathConfig.length > 1) {
-                removeScript(id);
                //Pop off the first array value, since it failed, and
                //retry
                pathConfig.shift();
                context.require.undef(id);
-                context.require([id]);
+
+                //Custom require that does not do map translation, since
+                //ID is "absolute", already mapped/resolved.
+                context.makeRequire(null, {
+                    skipMap: true
+                })([id]);
+
                return true;
            }
        }
@ -434,7 +443,16 @@ var requirejs, require, define;
                            return normalize(name, parentName, applyMap);
                        });
                    } else {
-                        normalizedName = normalize(name, parentName, applyMap);
+                        // If nested plugin references, then do not try to
+                        // normalize, as it will not normalize correctly. This
+                        // places a restriction on resourceIds, and the longer
+                        // term solution is not to normalize until plugins are
+                        // loaded and all normalizations to allow for async
+                        // loading of a loader plugin. But for now, fixes the
+                        // common uses. Details in #1131
+                        normalizedName = name.indexOf('!') === -1 ?
+                                         normalize(name, parentName, applyMap) :
+                                         name;
                    }
                } else {
                    //A regular module.
@ -494,7 +512,12 @@ var requirejs, require, define;
                    fn(defined[id]);
                }
            } else {
-                getModule(depMap).on(name, fn);
+                mod = getModule(depMap);
+                if (mod.error && name === 'error') {
+                    fn(mod.error);
+                } else {
+                    mod.on(name, fn);
+                }
            }
        }

@ -530,11 +553,13 @@ var requirejs, require, define;
        function takeGlobalQueue() {
            //Push all the globalDefQueue items into the context's defQueue
            if (globalDefQueue.length) {
-                //Array splice in the values since the context code has a
-                //local var ref to defQueue, so cannot just reassign the one
-                //on context.
-                apsp.apply(defQueue,
-                           [defQueue.length - 1, 0].concat(globalDefQueue));
+                each(globalDefQueue, function(queueItem) {
+                    var id = queueItem[0];
+                    if (typeof id === 'string') {
+                        context.defQueueMap[id] = true;
+                    }
+                    defQueue.push(queueItem);
+                });
                globalDefQueue = [];
            }
        }
@ -551,7 +576,7 @@ var requirejs, require, define;
                mod.usingExports = true;
                if (mod.map.isDefine) {
                    if (mod.exports) {
-                        return mod.exports;
+                        return (defined[mod.map.id] = mod.exports);
                    } else {
                        return (mod.exports = defined[mod.map.id] = {});
                    }
@ -565,9 +590,9 @@ var requirejs, require, define;
                        id: mod.map.id,
                        uri: mod.map.url,
                        config: function () {
-                            return (config.config && getOwn(config.config, mod.map.id)) || {};
+                            return getOwn(config.config, mod.map.id) || {};
                        },
-                        exports: defined[mod.map.id]
+                        exports: mod.exports || (mod.exports = {})
                    });
                }
            }
@ -576,6 +601,7 @@ var requirejs, require, define;
        function cleanRegistry(id) {
            //Clean up machinery used for waiting modules.
            delete registry[id];
+            delete enabledRegistry[id];
        }

        function breakCycle(mod, traced, processed) {
@ -607,7 +633,7 @@ var requirejs, require, define;
        }

        function checkLoaded() {
-            var map, modId, err, usingPathFallback,
+            var err, usingPathFallback,
                waitInterval = config.waitSeconds * 1000,
                //It is possible to disable the wait interval by using waitSeconds of 0.
                expired = waitInterval && (context.startTime + waitInterval) < new Date().getTime(),
@ -624,8 +650,8 @@ var requirejs, require, define;
            inCheckLoaded = true;

            //Figure out the state of all the modules.
-            eachProp(registry, function (mod) {
-                map = mod.map;
+            eachProp(enabledRegistry, function (mod) {
+                var map = mod.map,
                    modId = map.id;

                //Skip things that are not enabled or in error state.
@ -805,7 +831,7 @@ var requirejs, require, define;
            },

            /**
-             * Checks is the module is ready to define itself, and if so,
+             * Checks if the module is ready to define itself, and if so,
             * define it.
             */
            check: function () {
@ -820,7 +846,10 @@ var requirejs, require, define;
                    factory = this.factory;

                if (!this.inited) {
+                    // Only fetch if not already in the defQueue.
+                    if (!hasProp(context.defQueueMap, id)) {
                        this.fetch();
+                    }
                } else if (this.error) {
                    this.emit('error', this.error);
                } else if (!this.defining) {
@ -833,8 +862,13 @@ var requirejs, require, define;
                    if (this.depCount < 1 && !this.defined) {
                        if (isFunction(factory)) {
                            //If there is an error listener, favor passing
-                            //to that instead of throwing an error.
-                            if (this.events.error) {
+                            //to that instead of throwing an error. However,
+                            //only do it for define()'d  modules. require
+                            //errbacks should not be called for failures in
+                            //their callbacks (#699). However if a global
+                            //onError is set, use that.
+                            if ((this.events.error && this.map.isDefine) ||
+                                req.onError !== defaultOnError) {
                                try {
                                    exports = context.execCb(id, factory, depExports, exports);
                                } catch (e) {
@ -844,17 +878,14 @@ var requirejs, require, define;
                                exports = context.execCb(id, factory, depExports, exports);
                            }

-                            if (this.map.isDefine) {
-                                //If setting exports via 'module' is in play,
-                                //favor that over return value and exports. After that,
-                                //favor a non-undefined return value over exports use.
+                            // Favor return value over exports. If node/cjs in play,
+                            // then will not have a return value anyway. Favor
+                            // module.exports assignment over exports object.
+                            if (this.map.isDefine && exports === undefined) {
                                cjsModule = this.module;
-                                if (cjsModule &&
-                                        cjsModule.exports !== undefined &&
-                                        //Make sure it is not already the exports value
-                                        cjsModule.exports !== this.exports) {
+                                if (cjsModule) {
                                    exports = cjsModule.exports;
-                                } else if (exports === undefined && this.usingExports) {
+                                } else if (this.usingExports) {
                                    //exports already set the defined value.
                                    exports = this.exports;
                                }
@ -862,8 +893,8 @@ var requirejs, require, define;

                            if (err) {
                                err.requireMap = this.map;
-                                err.requireModules = [this.map.id];
-                                err.requireType = 'define';
+                                err.requireModules = this.map.isDefine ? [this.map.id] : null;
+                                err.requireType = this.map.isDefine ? 'define' : 'require';
                                return onError((this.error = err));
                            }

@ -883,7 +914,7 @@ var requirejs, require, define;
                        }

                        //Clean up
-                        delete registry[id];
+                        cleanRegistry(id);

                        this.defined = true;
                    }
@ -914,6 +945,7 @@ var requirejs, require, define;

                on(pluginMap, 'defined', bind(this, function (plugin) {
                    var load, normalizedMap, normalizedMod,
+                        bundleId = getOwn(bundlesMap, this.map.id),
                        name = this.map.name,
                        parentName = this.map.parentMap ? this.map.parentMap.name : null,
                        localRequire = context.makeRequire(map.parentMap, {
@ -959,6 +991,14 @@ var requirejs, require, define;
                        return;
                    }

+                    //If a paths config, then just load that file instead to
+                    //resolve the plugin, as it is built into that paths layer.
+                    if (bundleId) {
+                        this.map.url = context.nameToUrl(bundleId);
+                        this.load();
+                        return;
+                    }
+
                    load = bind(this, function (value) {
                        this.init([], function () { return value; }, null, {
                            enabled: true
@ -1049,6 +1089,7 @@ var requirejs, require, define;
            },

            enable: function () {
+                enabledRegistry[this.map.id] = this;
                this.enabled = true;

                //Set flag mentioning that the module is enabling,
@ -1080,12 +1121,22 @@ var requirejs, require, define;
                        this.depCount += 1;

                        on(depMap, 'defined', bind(this, function (depExports) {
+                            if (this.undefed) {
+                                return;
+                            }
                            this.defineDep(i, depExports);
                            this.check();
                        }));

                        if (this.errback) {
-                            on(depMap, 'error', this.errback);
+                            on(depMap, 'error', bind(this, this.errback));
+                        } else if (this.events.error) {
+                            // No direct errback on this module, but something
+                            // else is listening for errors, so be sure to
+                            // propagate the error correctly.
+                            on(depMap, 'error', bind(this, function(err) {
+                                this.emit('error', err);
+                            }));
                        }
                    }

@ -1189,13 +1240,15 @@ var requirejs, require, define;
            while (defQueue.length) {
                args = defQueue.shift();
                if (args[0] === null) {
-                    return onError(makeError('mismatch', 'Mismatched anonymous define() module: ' + args[args.length - 1]));
+                    return onError(makeError('mismatch', 'Mismatched anonymous define() module: ' +
+                        args[args.length - 1]));
                } else {
                    //args are id, deps, factory. Should be normalized by the
                    //define() function.
                    callGetModule(args);
                }
            }
+            context.defQueueMap = {};
        }

        context = {
@ -1205,9 +1258,11 @@ var requirejs, require, define;
            defined: defined,
            urlFetched: urlFetched,
            defQueue: defQueue,
+            defQueueMap: {},
            Module: Module,
            makeModuleMap: makeModuleMap,
            nextTick: req.nextTick,
+            onError: onError,

            /**
             * Set a configuration for the context.
@ -1221,28 +1276,38 @@ var requirejs, require, define;
                    }
                }

-                //Save off the paths and packages since they require special processing,
+                //Save off the paths since they require special processing,
                //they are additive.
-                var pkgs = config.pkgs,
-                    shim = config.shim,
+                var shim = config.shim,
                    objs = {
                        paths: true,
+                        bundles: true,
                        config: true,
                        map: true
                    };

                eachProp(cfg, function (value, prop) {
                    if (objs[prop]) {
-                        if (prop === 'map') {
-                            mixin(config[prop], value, true, true);
-                        } else {
-                            mixin(config[prop], value, true);
+                        if (!config[prop]) {
+                            config[prop] = {};
                        }
+                        mixin(config[prop], value, true, true);
                    } else {
                        config[prop] = value;
                    }
                });

+                //Reverse map the bundles
+                if (cfg.bundles) {
+                    eachProp(cfg.bundles, function (value, prop) {
+                        each(value, function (v) {
+                            if (v !== prop) {
+                                bundlesMap[v] = prop;
+                            }
+                        });
+                    });
+                }
+
                //Merge shim
                if (cfg.shim) {
                    eachProp(cfg.shim, function (value, id) {
@ -1263,29 +1328,25 @@ var requirejs, require, define;
                //Adjust packages if necessary.
                if (cfg.packages) {
                    each(cfg.packages, function (pkgObj) {
-                        var location;
+                        var location, name;

                        pkgObj = typeof pkgObj === 'string' ? {name: pkgObj} : pkgObj;
-                        location = pkgObj.location;

-                        //Create a brand new object on pkgs, since currentPackages can
-                        //be passed in again, and config.pkgs is the internal transformed
-                        //state for all package configs.
-                        pkgs[pkgObj.name] = {
-                            name: pkgObj.name,
-                            location: location || pkgObj.name,
+                        name = pkgObj.name;
+                        location = pkgObj.location;
+                        if (location) {
+                            config.paths[name] = pkgObj.location;
+                        }
+
+                        //Save pointer to main module ID for pkg name.
                        //Remove leading dot in main, so main paths are normalized,
                        //and remove any trailing .js, since different package
                        //envs have different conventions: some use a module name,
                        //some use a file name.
-                            main: (pkgObj.main || 'main')
+                        config.pkgs[name] = pkgObj.name + '/' + (pkgObj.main || 'main')
                                     .replace(currDirRegExp, '')
-                                  .replace(jsSuffixRegExp, '')
-                        };
+                                     .replace(jsSuffixRegExp, '');
                    });
-
-                    //Done with modifications, assing packages back to context config
-                    config.pkgs = pkgs;
                }

                //If there are any "waiting to execute" modules in the registry,
@ -1296,7 +1357,7 @@ var requirejs, require, define;
                    //late to modify them, and ignore unnormalized ones
                    //since they are transient.
                    if (!mod.inited && !mod.map.unnormalized) {
-                        mod.map = makeModuleMap(id);
+                        mod.map = makeModuleMap(id, null, true);
                    }
                });

@ -1345,7 +1406,7 @@ var requirejs, require, define;
                        //Synchronous access to one module. If require.get is
                        //available (as in the Node adapter), prefer that.
                        if (req.get) {
-                            return req.get(context, deps, relMap);
+                            return req.get(context, deps, relMap, localRequire);
                        }

                        //Normalize module name, if it contains . or ..
@ -1396,7 +1457,7 @@ var requirejs, require, define;
                     * plain URLs like nameToUrl.
                     */
                    toUrl: function (moduleNamePlusExt) {
-                        var ext, url,
+                        var ext,
                            index = moduleNamePlusExt.lastIndexOf('.'),
                            segment = moduleNamePlusExt.split('/')[0],
                            isRelative = segment === '.' || segment === '..';
@ -1408,9 +1469,8 @@ var requirejs, require, define;
                            moduleNamePlusExt = moduleNamePlusExt.substring(0, index);
                        }

-                        url = context.nameToUrl(normalize(moduleNamePlusExt,
-                                                relMap && relMap.id, true), ext || '.fake');
-                        return ext ? url : url.substring(0, url.length - 5);
+                        return context.nameToUrl(normalize(moduleNamePlusExt,
+                                                relMap && relMap.id, true), ext,  true);
                    },

                    defined: function (id) {
@ -1433,10 +1493,23 @@ var requirejs, require, define;
                        var map = makeModuleMap(id, relMap, true),
                            mod = getOwn(registry, id);

+                        mod.undefed = true;
+                        removeScript(id);
+
                        delete defined[id];
                        delete urlFetched[map.url];
                        delete undefEvents[id];

+                        //Clean queued defines too. Go backwards
+                        //in array so that the splices do not
+                        //mess up the iteration.
+                        eachReverse(defQueue, function(args, i) {
+                            if (args[0] === id) {
+                                defQueue.splice(i, 1);
+                            }
+                        });
+                        delete context.defQueueMap[id];
+
                        if (mod) {
                            //Hold on to listeners in case the
                            //module will be attempted to be reloaded
@ -1456,7 +1529,7 @@ var requirejs, require, define;
            /**
             * Called to enable a module if it is still in the registry
             * awaiting enablement. A second arg, parent, the parent module,
-             * is passed in for context, when this method is overriden by
+             * is passed in for context, when this method is overridden by
             * the optimizer. Not shown here to keep code compact.
             */
            enable: function (depMap) {
@ -1497,6 +1570,7 @@ var requirejs, require, define;

                    callGetModule(args);
                }
+                context.defQueueMap = {};

                //Do this after the cycle of callGetModule in case the result
                //of those calls/init calls changes the registry.
@ -1529,9 +1603,20 @@ var requirejs, require, define;
             * it is assumed to have already been normalized. This is an
             * internal API, not a public one. Use toUrl for the public API.
             */
-            nameToUrl: function (moduleName, ext) {
-                var paths, pkgs, pkg, pkgPath, syms, i, parentModule, url,
-                    parentPath;
+            nameToUrl: function (moduleName, ext, skipExt) {
+                var paths, syms, i, parentModule, url,
+                    parentPath, bundleId,
+                    pkgMain = getOwn(config.pkgs, moduleName);
+
+                if (pkgMain) {
+                    moduleName = pkgMain;
+                }
+
+                bundleId = getOwn(bundlesMap, moduleName);
+
+                if (bundleId) {
+                    return context.nameToUrl(bundleId, ext, skipExt);
+                }

                //If a colon is in the URL, it indicates a protocol is used and it is just
                //an URL to a file, or if it starts with a slash, contains a query arg (i.e. ?)
@ -1545,7 +1630,6 @@ var requirejs, require, define;
                } else {
                    //A module that needs to be converted to a path.
                    paths = config.paths;
-                    pkgs = config.pkgs;

                    syms = moduleName.split('/');
                    //For each module name segment, see if there is a path
@ -1553,7 +1637,7 @@ var requirejs, require, define;
                    //and work up from it.
                    for (i = syms.length; i > 0; i -= 1) {
                        parentModule = syms.slice(0, i).join('/');
-                        pkg = getOwn(pkgs, parentModule);
+
                        parentPath = getOwn(paths, parentModule);
                        if (parentPath) {
                            //If an array, it means there are a few choices,
@ -1563,22 +1647,12 @@ var requirejs, require, define;
                            }
                            syms.splice(0, i, parentPath);
                            break;
-                        } else if (pkg) {
-                            //If module name is just the package name, then looking
-                            //for the main module.
-                            if (moduleName === pkg.name) {
-                                pkgPath = pkg.location + '/' + pkg.main;
-                            } else {
-                                pkgPath = pkg.location;
-                            }
-                            syms.splice(0, i, pkgPath);
-                            break;
                        }
                    }

                    //Join the path parts together, then figure out if baseUrl is needed.
                    url = syms.join('/');
-                    url += (ext || (/\?/.test(url) ? '' : '.js'));
+                    url += (ext || (/^data\:|\?/.test(url) || skipExt ? '' : '.js'));
                    url = (url.charAt(0) === '/' || url.match(/^[\w\+\.\-]+:/) ? '' : config.baseUrl) + url;
                }

@ -1594,7 +1668,7 @@ var requirejs, require, define;
            },

            /**
-             * Executes a module callack function. Broken out as a separate function
+             * Executes a module callback function. Broken out as a separate function
             * solely to allow the build system to sequence the files in the built
             * layer in the right sequence.
             *
@ -1632,7 +1706,7 @@ var requirejs, require, define;
            onScriptError: function (evt) {
                var data = getScriptData(evt);
                if (!hasPathFallback(data.id)) {
-                    return onError(makeError('scripterror', 'Script error', evt, [data.id]));
+                    return onError(makeError('scripterror', 'Script error for: ' + data.id, evt, [data.id]));
                }
            }
        };
@ -1761,8 +1835,19 @@ var requirejs, require, define;
     * function. Intercept/override it if you want custom error handling.
     * @param {Error} err the error object.
     */
-    req.onError = function (err) {
-        throw err;
+    req.onError = defaultOnError;
+
+    /**
+     * Creates the node for the load command. Only used in browser envs.
+     */
+    req.createNode = function (config, moduleName, url) {
+        var node = config.xhtml ?
+                document.createElementNS('http://www.w3.org/1999/xhtml', 'html:script') :
+                document.createElement('script');
+        node.type = config.scriptType || 'text/javascript';
+        node.charset = 'utf-8';
+        node.async = true;
+        return node;
    };

    /**
@ -1779,12 +1864,10 @@ var requirejs, require, define;
            node;
        if (isBrowser) {
            //In the browser so use a script tag
-            node = config.xhtml ?
-                    document.createElementNS('http://www.w3.org/1999/xhtml', 'html:script') :
-                    document.createElement('script');
-            node.type = config.scriptType || 'text/javascript';
-            node.charset = 'utf-8';
-            node.async = true;
+            node = req.createNode(config, moduleName, url);
+            if (config.onNodeCreated) {
+                config.onNodeCreated(node, config, moduleName, url);
+            }

            node.setAttribute('data-requirecontext', context.contextName);
            node.setAttribute('data-requiremodule', moduleName);
@ -1817,7 +1900,7 @@ var requirejs, require, define;
                node.attachEvent('onreadystatechange', context.onScriptLoad);
                //It would be great to add an error handler here to catch
                //404s in IE9+. However, onreadystatechange will fire before
-                //the error handler, so that does not help. If addEvenListener
+                //the error handler, so that does not help. If addEventListener
                //is used, then IE will fire error before load, but we cannot
                //use that pathway given the connect.microsoft.com issue
                //mentioned above about not doing the 'script execute,
@ -1846,6 +1929,7 @@ var requirejs, require, define;

            return node;
        } else if (isWebWorker) {
+            try {
                //In a web worker, use importScripts. This is not a very
                //efficient use of importScripts, importScripts will block until
                //its script is downloaded and evaluated. However, if web workers
@ -1856,6 +1940,13 @@ var requirejs, require, define;

                //Account for anonymous modules
                context.completeLoad(moduleName);
+            } catch (e) {
+                context.onError(makeError('importscripts',
+                                'importScripts failed for ' +
+                                    moduleName + ' at ' + url,
+                                e,
+                                [moduleName]));
+            }
        }
    };

@ -1873,7 +1964,7 @@ var requirejs, require, define;
    }

    //Look for a data-main script attribute, which could also adjust the baseUrl.
-    if (isBrowser) {
+    if (isBrowser && !cfg.skipDataMain) {
        //Figure out baseUrl. Get it from the script tag with require.js in it.
        eachReverse(scripts(), function (script) {
            //Set the 'head' where we can append children by
@ -1887,24 +1978,31 @@ var requirejs, require, define;
            //baseUrl, if it is not already set.
            dataMain = script.getAttribute('data-main');
            if (dataMain) {
+                //Preserve dataMain in case it is a path (i.e. contains '?')
+                mainScript = dataMain;
+
                //Set final baseUrl if there is not already an explicit one.
                if (!cfg.baseUrl) {
                    //Pull off the directory of data-main for use as the
                    //baseUrl.
-                    src = dataMain.split('/');
+                    src = mainScript.split('/');
                    mainScript = src.pop();
                    subPath = src.length ? src.join('/')  + '/' : './';

                    cfg.baseUrl = subPath;
-                    dataMain = mainScript;
                }

-                //Strip off any trailing .js since dataMain is now
+                //Strip off any trailing .js since mainScript is now
                //like a module name.
-                dataMain = dataMain.replace(jsSuffixRegExp, '');
+                mainScript = mainScript.replace(jsSuffixRegExp, '');
+
+                //If mainScript is still a path, fall back to dataMain
+                if (req.jsExtRegExp.test(mainScript)) {
+                    mainScript = dataMain;
+                }

                //Put the data-main script in the files to load.
-                cfg.deps = cfg.deps ? cfg.deps.concat(dataMain) : [dataMain];
+                cfg.deps = cfg.deps ? cfg.deps.concat(mainScript) : [mainScript];

                return true;
            }
@ -1932,12 +2030,13 @@ var requirejs, require, define;
        //This module may not have dependencies
        if (!isArray(deps)) {
            callback = deps;
-            deps = [];
+            deps = null;
        }

        //If no name, and callback is a function, then figure out if it a
        //CommonJS thing with dependencies.
-        if (!deps.length && isFunction(callback)) {
+        if (!deps && isFunction(callback)) {
+            deps = [];
            //Remove comments from the callback string,
            //look for require calls, and pull them into the dependencies,
            //but only if there are function args.
@ -1976,14 +2075,18 @@ var requirejs, require, define;
        //where the module name is not known until the script onload event
        //occurs. If no context, use the global queue, and get it processed
        //in the onscript load callback.
-        (context ? context.defQueue : globalDefQueue).push([name, deps, callback]);
+        if (context) {
+            context.defQueue.push([name, deps, callback]);
+            context.defQueueMap[name] = true;
+        } else {
+            globalDefQueue.push([name, deps, callback]);
+        }
    };

    define.amd = {
        jQuery: true
    };

-
    /**
     * Executes the text. Normally just uses eval, but can be modified
     * to use a better, environment-specific call. Only used for transpiling
--- a/scripts/lib/require.min.js
+++ b/scripts/lib/require.min.js
--- a/scripts/lib/reqwest.js
+++ b/scripts/lib/reqwest.js
@ -1,17 +1,39 @@
+/*!
+  * Reqwest! A general purpose XHR connection manager
+  * license MIT (c) Dustin Diaz 2015
+  * https://github.com/ded/reqwest
+  */
+
 !function (name, context, definition) {
  if (typeof module != 'undefined' && module.exports) module.exports = definition()
  else if (typeof define == 'function' && define.amd) define(definition)
  else context[name] = definition()
 }('reqwest', this, function () {

-  var win = window
-    , doc = document
-    , twoHundo = /^20\d$/
+  var context = this
+
+  if ('window' in context) {
+    var doc = document
      , byTag = 'getElementsByTagName'
+      , head = doc[byTag]('head')[0]
+  } else {
+    var XHR2
+    try {
+      // prevent browserify including xhr2
+      var xhr2 = 'xhr2'
+      XHR2 = require(xhr2)
+    } catch (ex) {
+      throw new Error('Peer dependency `xhr2` required! Please npm install xhr2')
+    }
+  }
+
+
+  var httpsRe = /^http/
+    , protocolRe = /(^\w+):\/\//
+    , twoHundo = /^(20\d|1223)$/ //http://stackoverflow.com/questions/10046972/msie-returns-status-code-of-1223-for-ajax-request
    , readyState = 'readyState'
    , contentType = 'Content-Type'
    , requestedWith = 'X-Requested-With'
-    , head = doc[byTag]('head')[0]
    , uniqid = 0
    , callbackPrefix = 'reqwest_' + (+new Date())
    , lastValue // data stored by the most recent JSONP callback
@ -26,31 +48,33 @@
          }

    , defaultHeaders = {
-          contentType: 'application/x-www-form-urlencoded'
-        , requestedWith: xmlHttpRequest
-        , accept: {
+          'contentType': 'application/x-www-form-urlencoded'
+        , 'requestedWith': xmlHttpRequest
+        , 'accept': {
              '*':  'text/javascript, text/html, application/xml, text/xml, */*'
-            , xml:  'application/xml, text/xml'
-            , html: 'text/html'
-            , text: 'text/plain'
-            , json: 'application/json, text/javascript'
-            , js:   'application/javascript, text/javascript'
+            , 'xml':  'application/xml, text/xml'
+            , 'html': 'text/html'
+            , 'text': 'text/plain'
+            , 'json': 'application/json, text/javascript'
+            , 'js':   'application/javascript, text/javascript'
          }
      }

    , xhr = function(o) {
        // is it x-domain
-        if (o.crossOrigin === true) {
-          var xhr = win[xmlHttpRequest] ? new XMLHttpRequest() : null
+        if (o['crossOrigin'] === true) {
+          var xhr = context[xmlHttpRequest] ? new XMLHttpRequest() : null
          if (xhr && 'withCredentials' in xhr) {
            return xhr
-          } else if (win[xDomainRequest]) {
+          } else if (context[xDomainRequest]) {
            return new XDomainRequest()
          } else {
            throw new Error('Browser does not support cross-origin requests')
          }
-        } else if (win[xmlHttpRequest]) {
+        } else if (context[xmlHttpRequest]) {
          return new XMLHttpRequest()
+        } else if (XHR2) {
+          return new XHR2()
        } else {
          return new ActiveXObject('Microsoft.XMLHTTP')
        }
@ -61,15 +85,21 @@
        }
      }

+  function succeed(r) {
+    var protocol = protocolRe.exec(r.url)
+    protocol = (protocol && protocol[1]) || context.location.protocol
+    return httpsRe.test(protocol) ? twoHundo.test(r.request.status) : !!r.request.response
+  }
+
  function handleReadyState(r, success, error) {
    return function () {
      // use _aborted to mitigate against IE err c00c023f
      // (can't read props on aborted request objects)
      if (r._aborted) return error(r.request)
+      if (r._timedOut) return error(r.request, 'Request is aborted: timeout')
      if (r.request && r.request[readyState] == 4) {
        r.request.onreadystatechange = noop
-        if (twoHundo.test(r.request.status))
-          success(r.request)
+        if (succeed(r)) success(r.request)
        else
          error(r.request)
      }
@ -77,23 +107,24 @@
  }

  function setHeaders(http, o) {
-    var headers = o.headers || {}
+    var headers = o['headers'] || {}
      , h

-    headers.Accept = headers.Accept
-      || defaultHeaders.accept[o.type]
-      || defaultHeaders.accept['*']
+    headers['Accept'] = headers['Accept']
+      || defaultHeaders['accept'][o['type']]
+      || defaultHeaders['accept']['*']

+    var isAFormData = typeof FormData === 'function' && (o['data'] instanceof FormData);
    // breaks cross-origin requests with legacy browsers
-    if (!o.crossOrigin && !headers[requestedWith]) headers[requestedWith] = defaultHeaders.requestedWith
-    if (!headers[contentType]) headers[contentType] = o.contentType || defaultHeaders.contentType
+    if (!o['crossOrigin'] && !headers[requestedWith]) headers[requestedWith] = defaultHeaders['requestedWith']
+    if (!headers[contentType] && !isAFormData) headers[contentType] = o['contentType'] || defaultHeaders['contentType']
    for (h in headers)
      headers.hasOwnProperty(h) && 'setRequestHeader' in http && http.setRequestHeader(h, headers[h])
  }

  function setCredentials(http, o) {
-    if (typeof o.withCredentials !== 'undefined' && typeof http.withCredentials !== 'undefined') {
-      http.withCredentials = !!o.withCredentials
+    if (typeof o['withCredentials'] !== 'undefined' && typeof http.withCredentials !== 'undefined') {
+      http.withCredentials = !!o['withCredentials']
    }
  }

@ -107,9 +138,8 @@

  function handleJsonp(o, fn, err, url) {
    var reqId = uniqid++
-      , cbkey = o.jsonpCallback || 'callback' // the 'callback' key
-      , cbval = o.jsonpCallbackName || reqwest.getcallbackPrefix(reqId)
-      // , cbval = o.jsonpCallbackName || ('reqwest_' + reqId) // the 'callback' value
+      , cbkey = o['jsonpCallback'] || 'callback' // the 'callback' key
+      , cbval = o['jsonpCallbackName'] || reqwest.getcallbackPrefix(reqId)
      , cbreg = new RegExp('((^|\\?|&)' + cbkey + ')=([^&]+)')
      , match = url.match(cbreg)
      , script = doc.createElement('script')
@ -126,7 +156,7 @@
      url = urlappend(url, cbkey + '=' + cbval) // no callback details, add 'em
    }

-    win[cbval] = generalCallback
+    context[cbval] = generalCallback

    script.type = 'text/javascript'
    script.src = url
@ -135,9 +165,6 @@
      // need this for IE due to out-of-order onreadystatechange(), binding script
      // execution to an event listener gives us control over when the script
      // is executed. See http://jaubourg.net/2010/07/loading-script-as-onclick-handler-of.html
-      //
-      // if this hack is used in IE10 jsonp callback are never called
-      script.event = 'onclick'
      script.htmlFor = script.id = '_reqwest_' + reqId
    }

@ -171,29 +198,32 @@

  function getRequest(fn, err) {
    var o = this.o
-      , method = (o.method || 'GET').toUpperCase()
-      , url = typeof o === 'string' ? o : o.url
-      // convert non-string objects to query-string form unless o.processData is false
-      , data = (o.processData !== false && o.data && typeof o.data !== 'string')
-        ? reqwest.toQueryString(o.data)
-        : (o.data || null)
+      , method = (o['method'] || 'GET').toUpperCase()
+      , url = typeof o === 'string' ? o : o['url']
+      // convert non-string objects to query-string form unless o['processData'] is false
+      , data = (o['processData'] !== false && o['data'] && typeof o['data'] !== 'string')
+        ? reqwest.toQueryString(o['data'])
+        : (o['data'] || null)
      , http
      , sendWait = false

    // if we're working on a GET request and we have data then we should append
    // query string to end of URL and not post data
-    if ((o.type == 'jsonp' || method == 'GET') && data) {
+    if ((o['type'] == 'jsonp' || method == 'GET') && data) {
      url = urlappend(url, data)
      data = null
    }

-    if (o.type == 'jsonp') return handleJsonp(o, fn, err, url)
+    if (o['type'] == 'jsonp') return handleJsonp(o, fn, err, url)

-    http = xhr(o)
-    http.open(method, url, o.async === false ? false : true)
+    // get the xhr from the factory if passed
+    // if the factory returns null, fall-back to ours
+    http = (o.xhr && o.xhr(o)) || xhr(o)
+
+    http.open(method, url, o['async'] === false ? false : true)
    setHeaders(http, o)
    setCredentials(http, o)
-    if (win[xDomainRequest] && http instanceof win[xDomainRequest]) {
+    if (context[xDomainRequest] && http instanceof context[xDomainRequest]) {
        http.onload = fn
        http.onerror = err
        // NOTE: see
@ -203,7 +233,7 @@
    } else {
      http.onreadystatechange = handleReadyState(this, fn, err)
    }
-    o.before && o.before(http)
+    o['before'] && o['before'](http)
    if (sendWait) {
      setTimeout(function () {
        http.send(data)
@ -221,14 +251,18 @@
    init.apply(this, arguments)
  }

-  function setType(url) {
-    var m = url.match(/\.(json|jsonp|html|xml)(\?|$)/)
-    return m ? m[1] : 'js'
+  function setType(header) {
+    // json, javascript, text/plain, text/html, xml
+    if (header === null) return undefined; //In case of no content-type.
+    if (header.match('json')) return 'json'
+    if (header.match('javascript')) return 'js'
+    if (header.match('text')) return 'html'
+    if (header.match('xml')) return 'xml'
  }

  function init(o, fn) {

-    this.url = typeof o == 'string' ? o : o.url
+    this.url = typeof o == 'string' ? o : o['url']
    this.timeout = null

    // whether request has been fulfilled for purpose
@ -245,36 +279,35 @@
    this._responseArgs = {}

    var self = this
-      , type = o.type || setType(this.url)

    fn = fn || function () {}

-    if (o.timeout) {
+    if (o['timeout']) {
      this.timeout = setTimeout(function () {
-        self.abort()
-      }, o.timeout)
+        timedOut()
+      }, o['timeout'])
    }

-    if (o.success) {
+    if (o['success']) {
      this._successHandler = function () {
-        o.success.apply(o, arguments)
+        o['success'].apply(o, arguments)
      }
    }

-    if (o.error) {
+    if (o['error']) {
      this._errorHandlers.push(function () {
-        o.error.apply(o, arguments)
+        o['error'].apply(o, arguments)
      })
    }

-    if (o.complete) {
+    if (o['complete']) {
      this._completeHandlers.push(function () {
-        o.complete.apply(o, arguments)
+        o['complete'].apply(o, arguments)
      })
    }

    function complete (resp) {
-      o.timeout && clearTimeout(self.timeout)
+      o['timeout'] && clearTimeout(self.timeout)
      self.timeout = null
      while (self._completeHandlers.length > 0) {
        self._completeHandlers.shift()(resp)
@ -282,6 +315,7 @@
    }

    function success (resp) {
+      var type = o['type'] || resp && setType(resp.getResponseHeader('Content-Type')) // resp can be undefined in IE
      resp = (type !== 'jsonp') ? self.request : resp
      // use global data filter on response text
      var filteredResponse = globalSetupOptions.dataFilter(resp.responseText, type)
@ -295,7 +329,7 @@
        switch (type) {
        case 'json':
          try {
-            resp = win.JSON ? win.JSON.parse(r) : eval('(' + r + ')')
+            resp = context.JSON ? context.JSON.parse(r) : eval('(' + r + ')')
          } catch (err) {
            return error(resp, 'Could not parse JSON in response', err)
          }
@ -328,6 +362,11 @@
      complete(resp)
    }

+    function timedOut() {
+      self._timedOut = true
+      self.request.abort()
+    }
+
    function error(resp, msg, t) {
      resp = self.request
      self._responseArgs.resp = resp
@ -398,6 +437,9 @@
      }
      return this
    }
+  , 'catch': function (fn) {
+      return this.fail(fn)
+    }
  }

  function reqwest(o, fn) {
@ -415,8 +457,8 @@
      , optCb = function (o) {
          // IE gives value="" even where there is no value attribute
          // 'specified' ref: http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-862529273
-          if (o && !o.disabled)
-            cb(n, normalize(o.attributes.value && o.attributes.value.specified ? o.value : o.text))
+          if (o && !o['disabled'])
+            cb(n, normalize(o['attributes']['value'] && o['attributes']['value']['specified'] ? o['value'] : o['text']))
        }
      , ch, ra, val, i

@ -523,12 +565,12 @@
        }
    // If an array was passed in, assume that it is an array of form elements.
    if (isArray(o)) {
-      for (i = 0; o && i < o.length; i++) add(o[i].name, o[i].value)
+      for (i = 0; o && i < o.length; i++) add(o[i]['name'], o[i]['value'])
    } else {
      // If traditional, encode the "old" way (the way 1.3.2 or older
      // did it), otherwise encode params recursively.
      for (prefix in o) {
-        buildParams(prefix, o[prefix], traditional, add)
+        if (o.hasOwnProperty(prefix)) buildParams(prefix, o[prefix], traditional, add)
      }
    }

@ -569,22 +611,22 @@

  // jQuery and Zepto compatibility, differences can be remapped here so you can call
  // .ajax.compat(options, callback)
-  reqwest.compat = function (o, fn) {
-    if (o) {
-      o.type && (o.method = o.type) && delete o.type
-      o.dataType && (o.type = o.dataType)
-      o.jsonpCallback && (o.jsonpCallbackName = o.jsonpCallback) && delete o.jsonpCallback
-      o.jsonp && (o.jsonpCallback = o.jsonp)
-    }
-    return new Reqwest(o, fn)
-  }
+  // reqwest.compat = function (o, fn) {
+  //   if (o) {
+  //     o['type'] && (o['method'] = o['type']) && delete o['type']
+  //     o['dataType'] && (o['type'] = o['dataType'])
+  //     o['jsonpCallback'] && (o['jsonpCallbackName'] = o['jsonpCallback']) && delete o['jsonpCallback']
+  //     o['jsonp'] && (o['jsonpCallback'] = o['jsonp'])
+  //   }
+  //   return new Reqwest(o, fn)
+  // }

-  reqwest.ajaxSetup = function (options) {
-    options = options || {}
-    for (var k in options) {
-      globalSetupOptions[k] = options[k]
-    }
-  }
+  // reqwest.ajaxSetup = function (options) {
+  //   options = options || {}
+  //   for (var k in options) {
+  //     globalSetupOptions[k] = options[k]
+  //   }
+  // }

  return reqwest
 });
--- a/scripts/lib/signals-1.0.0.js
+++ b/scripts/lib/signals-1.0.0.js
@ -1,445 +0,0 @@
-/*jslint onevar:true, undef:true, newcap:true, regexp:true, bitwise:true, maxerr:50, indent:4, white:false, nomen:false, plusplus:false */
-/*global define:false, require:false, exports:false, module:false, signals:false */
-
-/** @license
- * JS Signals <http://millermedeiros.github.com/js-signals/>
- * Released under the MIT license
- * Author: Miller Medeiros
- * Version: 1.0.0 - Build: 268 (2012/11/29 05:48 PM)
- */
-
-(function(global){
-
-    // SignalBinding -------------------------------------------------
-    //================================================================
-
-    /**
-     * Object that represents a binding between a Signal and a listener function.
-     * <br />- <strong>This is an internal constructor and shouldn't be called by regular users.</strong>
-     * <br />- inspired by Joa Ebert AS3 SignalBinding and Robert Penner's Slot classes.
-     * @author Miller Medeiros
-     * @constructor
-     * @internal
-     * @name SignalBinding
-     * @param {Signal} signal Reference to Signal object that listener is currently bound to.
-     * @param {Function} listener Handler function bound to the signal.
-     * @param {boolean} isOnce If binding should be executed just once.
-     * @param {Object} [listenerContext] Context on which listener will be executed (object that should represent the `this` variable inside listener function).
-     * @param {Number} [priority] The priority level of the event listener. (default = 0).
-     */
-    function SignalBinding(signal, listener, isOnce, listenerContext, priority) {
-
-        /**
-         * Handler function bound to the signal.
-         * @type Function
-         * @private
-         */
-        this._listener = listener;
-
-        /**
-         * If binding should be executed just once.
-         * @type boolean
-         * @private
-         */
-        this._isOnce = isOnce;
-
-        /**
-         * Context on which listener will be executed (object that should represent the `this` variable inside listener function).
-         * @memberOf SignalBinding.prototype
-         * @name context
-         * @type Object|undefined|null
-         */
-        this.context = listenerContext;
-
-        /**
-         * Reference to Signal object that listener is currently bound to.
-         * @type Signal
-         * @private
-         */
-        this._signal = signal;
-
-        /**
-         * Listener priority
-         * @type Number
-         * @private
-         */
-        this._priority = priority || 0;
-    }
-
-    SignalBinding.prototype = {
-
-        /**
-         * If binding is active and should be executed.
-         * @type boolean
-         */
-        active : true,
-
-        /**
-         * Default parameters passed to listener during `Signal.dispatch` and `SignalBinding.execute`. (curried parameters)
-         * @type Array|null
-         */
-        params : null,
-
-        /**
-         * Call listener passing arbitrary parameters.
-         * <p>If binding was added using `Signal.addOnce()` it will be automatically removed from signal dispatch queue, this method is used internally for the signal dispatch.</p>
-         * @param {Array} [paramsArr] Array of parameters that should be passed to the listener
-         * @return {*} Value returned by the listener.
-         */
-        execute : function (paramsArr) {
-            var handlerReturn, params;
-            if (this.active && !!this._listener) {
-                params = this.params? this.params.concat(paramsArr) : paramsArr;
-                handlerReturn = this._listener.apply(this.context, params);
-                if (this._isOnce) {
-                    this.detach();
-                }
-            }
-            return handlerReturn;
-        },
-
-        /**
-         * Detach binding from signal.
-         * - alias to: mySignal.remove(myBinding.getListener());
-         * @return {Function|null} Handler function bound to the signal or `null` if binding was previously detached.
-         */
-        detach : function () {
-            return this.isBound()? this._signal.remove(this._listener, this.context) : null;
-        },
-
-        /**
-         * @return {Boolean} `true` if binding is still bound to the signal and have a listener.
-         */
-        isBound : function () {
-            return (!!this._signal && !!this._listener);
-        },
-
-        /**
-         * @return {boolean} If SignalBinding will only be executed once.
-         */
-        isOnce : function () {
-            return this._isOnce;
-        },
-
-        /**
-         * @return {Function} Handler function bound to the signal.
-         */
-        getListener : function () {
-            return this._listener;
-        },
-
-        /**
-         * @return {Signal} Signal that listener is currently bound to.
-         */
-        getSignal : function () {
-            return this._signal;
-        },
-
-        /**
-         * Delete instance properties
-         * @private
-         */
-        _destroy : function () {
-            delete this._signal;
-            delete this._listener;
-            delete this.context;
-        },
-
-        /**
-         * @return {string} String representation of the object.
-         */
-        toString : function () {
-            return '[SignalBinding isOnce:' + this._isOnce +', isBound:'+ this.isBound() +', active:' + this.active + ']';
-        }
-
-    };
-
-
-/*global SignalBinding:false*/
-
-    // Signal --------------------------------------------------------
-    //================================================================
-
-    function validateListener(listener, fnName) {
-        if (typeof listener !== 'function') {
-            throw new Error( 'listener is a required param of {fn}() and should be a Function.'.replace('{fn}', fnName) );
-        }
-    }
-
-    /**
-     * Custom event broadcaster
-     * <br />- inspired by Robert Penner's AS3 Signals.
-     * @name Signal
-     * @author Miller Medeiros
-     * @constructor
-     */
-    function Signal() {
-        /**
-         * @type Array.<SignalBinding>
-         * @private
-         */
-        this._bindings = [];
-        this._prevParams = null;
-
-        // enforce dispatch to aways work on same context (#47)
-        var self = this;
-        this.dispatch = function(){
-            Signal.prototype.dispatch.apply(self, arguments);
-        };
-    }
-
-    Signal.prototype = {
-
-        /**
-         * Signals Version Number
-         * @type String
-         * @const
-         */
-        VERSION : '1.0.0',
-
-        /**
-         * If Signal should keep record of previously dispatched parameters and
-         * automatically execute listener during `add()`/`addOnce()` if Signal was
-         * already dispatched before.
-         * @type boolean
-         */
-        memorize : false,
-
-        /**
-         * @type boolean
-         * @private
-         */
-        _shouldPropagate : true,
-
-        /**
-         * If Signal is active and should broadcast events.
-         * <p><strong>IMPORTANT:</strong> Setting this property during a dispatch will only affect the next dispatch, if you want to stop the propagation of a signal use `halt()` instead.</p>
-         * @type boolean
-         */
-        active : true,
-
-        /**
-         * @param {Function} listener
-         * @param {boolean} isOnce
-         * @param {Object} [listenerContext]
-         * @param {Number} [priority]
-         * @return {SignalBinding}
-         * @private
-         */
-        _registerListener : function (listener, isOnce, listenerContext, priority) {
-
-            var prevIndex = this._indexOfListener(listener, listenerContext),
-                binding;
-
-            if (prevIndex !== -1) {
-                binding = this._bindings[prevIndex];
-                if (binding.isOnce() !== isOnce) {
-                    throw new Error('You cannot add'+ (isOnce? '' : 'Once') +'() then add'+ (!isOnce? '' : 'Once') +'() the same listener without removing the relationship first.');
-                }
-            } else {
-                binding = new SignalBinding(this, listener, isOnce, listenerContext, priority);
-                this._addBinding(binding);
-            }
-
-            if(this.memorize && this._prevParams){
-                binding.execute(this._prevParams);
-            }
-
-            return binding;
-        },
-
-        /**
-         * @param {SignalBinding} binding
-         * @private
-         */
-        _addBinding : function (binding) {
-            //simplified insertion sort
-            var n = this._bindings.length;
-            do { --n; } while (this._bindings[n] && binding._priority <= this._bindings[n]._priority);
-            this._bindings.splice(n + 1, 0, binding);
-        },
-
-        /**
-         * @param {Function} listener
-         * @return {number}
-         * @private
-         */
-        _indexOfListener : function (listener, context) {
-            var n = this._bindings.length,
-                cur;
-            while (n--) {
-                cur = this._bindings[n];
-                if (cur._listener === listener && cur.context === context) {
-                    return n;
-                }
-            }
-            return -1;
-        },
-
-        /**
-         * Check if listener was attached to Signal.
-         * @param {Function} listener
-         * @param {Object} [context]
-         * @return {boolean} if Signal has the specified listener.
-         */
-        has : function (listener, context) {
-            return this._indexOfListener(listener, context) !== -1;
-        },
-
-        /**
-         * Add a listener to the signal.
-         * @param {Function} listener Signal handler function.
-         * @param {Object} [listenerContext] Context on which listener will be executed (object that should represent the `this` variable inside listener function).
-         * @param {Number} [priority] The priority level of the event listener. Listeners with higher priority will be executed before listeners with lower priority. Listeners with same priority level will be executed at the same order as they were added. (default = 0)
-         * @return {SignalBinding} An Object representing the binding between the Signal and listener.
-         */
-        add : function (listener, listenerContext, priority) {
-            validateListener(listener, 'add');
-            return this._registerListener(listener, false, listenerContext, priority);
-        },
-
-        /**
-         * Add listener to the signal that should be removed after first execution (will be executed only once).
-         * @param {Function} listener Signal handler function.
-         * @param {Object} [listenerContext] Context on which listener will be executed (object that should represent the `this` variable inside listener function).
-         * @param {Number} [priority] The priority level of the event listener. Listeners with higher priority will be executed before listeners with lower priority. Listeners with same priority level will be executed at the same order as they were added. (default = 0)
-         * @return {SignalBinding} An Object representing the binding between the Signal and listener.
-         */
-        addOnce : function (listener, listenerContext, priority) {
-            validateListener(listener, 'addOnce');
-            return this._registerListener(listener, true, listenerContext, priority);
-        },
-
-        /**
-         * Remove a single listener from the dispatch queue.
-         * @param {Function} listener Handler function that should be removed.
-         * @param {Object} [context] Execution context (since you can add the same handler multiple times if executing in a different context).
-         * @return {Function} Listener handler function.
-         */
-        remove : function (listener, context) {
-            validateListener(listener, 'remove');
-
-            var i = this._indexOfListener(listener, context);
-            if (i !== -1) {
-                this._bindings[i]._destroy(); //no reason to a SignalBinding exist if it isn't attached to a signal
-                this._bindings.splice(i, 1);
-            }
-            return listener;
-        },
-
-        /**
-         * Remove all listeners from the Signal.
-         */
-        removeAll : function () {
-            var n = this._bindings.length;
-            while (n--) {
-                this._bindings[n]._destroy();
-            }
-            this._bindings.length = 0;
-        },
-
-        /**
-         * @return {number} Number of listeners attached to the Signal.
-         */
-        getNumListeners : function () {
-            return this._bindings.length;
-        },
-
-        /**
-         * Stop propagation of the event, blocking the dispatch to next listeners on the queue.
-         * <p><strong>IMPORTANT:</strong> should be called only during signal dispatch, calling it before/after dispatch won't affect signal broadcast.</p>
-         * @see Signal.prototype.disable
-         */
-        halt : function () {
-            this._shouldPropagate = false;
-        },
-
-        /**
-         * Dispatch/Broadcast Signal to all listeners added to the queue.
-         * @param {...*} [params] Parameters that should be passed to each handler.
-         */
-        dispatch : function (params) {
-            if (! this.active) {
-                return;
-            }
-
-            var paramsArr = Array.prototype.slice.call(arguments),
-                n = this._bindings.length,
-                bindings;
-
-            if (this.memorize) {
-                this._prevParams = paramsArr;
-            }
-
-            if (! n) {
-                //should come after memorize
-                return;
-            }
-
-            bindings = this._bindings.slice(); //clone array in case add/remove items during dispatch
-            this._shouldPropagate = true; //in case `halt` was called before dispatch or during the previous dispatch.
-
-            //execute all callbacks until end of the list or until a callback returns `false` or stops propagation
-            //reverse loop since listeners with higher priority will be added at the end of the list
-            do { n--; } while (bindings[n] && this._shouldPropagate && bindings[n].execute(paramsArr) !== false);
-        },
-
-        /**
-         * Forget memorized arguments.
-         * @see Signal.memorize
-         */
-        forget : function(){
-            this._prevParams = null;
-        },
-
-        /**
-         * Remove all bindings from signal and destroy any reference to external objects (destroy Signal object).
-         * <p><strong>IMPORTANT:</strong> calling any method on the signal instance after calling dispose will throw errors.</p>
-         */
-        dispose : function () {
-            this.removeAll();
-            delete this._bindings;
-            delete this._prevParams;
-        },
-
-        /**
-         * @return {string} String representation of the object.
-         */
-        toString : function () {
-            return '[Signal active:'+ this.active +' numListeners:'+ this.getNumListeners() +']';
-        }
-
-    };
-
-
-    // Namespace -----------------------------------------------------
-    //================================================================
-
-    /**
-     * Signals namespace
-     * @namespace
-     * @name signals
-     */
-    var signals = Signal;
-
-    /**
-     * Custom event broadcaster
-     * @see Signal
-     */
-    // alias for backwards compatibility (see #gh-44)
-    signals.Signal = Signal;
-
-
-
-    //exports to multiple environments
-    if(typeof define === 'function' && define.amd){ //AMD
-        define(function () { return signals; });
-    } else if (typeof module !== 'undefined' && module.exports){ //node
-        module.exports = signals;
-    } else { //browser
-        //use string because of Google closure compiler ADVANCED_MODE
-        /*jslint sub:true */
-        global['signals'] = signals;
-    }
-
-}(this));
--- a/scripts/main.js
+++ b/scripts/main.js
@ -1,87 +0,0 @@
-/*global require, requirejs, define */
-// http://requirejs.org/docs/api.html#config 
-requirejs.config(
-	{
-		baseUrl: 'scripts/',
-		waitSeconds: 50,
-		urlArgs: 'bust=' +  ( new Date() ).getTime()
-	}
-);
-
-require(
-	[
-		'src/process',
-		'src/image',
-		'src/file',
-		'src/dragdrop',
-		'src/controls',
-		'src/export-button',
-		'src/import-button',
-		'src/random-button',
-		'src/upload-imgur',
-		'src/intro',
-		'src/cam',
-		'util/feature-test',
-		'lib/signals-1.0.0'
-	],
-	function(
-		process,
-		image,
-		file,
-		dragdrop,
-		controls,
-		export_button,
-		import_button,
-		random_button,
-		imgur,
-		intro,
-		cam,
-		testFeatures,
-		Signal
-	)
-	{
-		testFeatures( init, showError );
-
-		function init( supported_features )
-		{
-			var shared = {
-				feature: supported_features,
-				signals: {
-					'load-file'                : new Signal(),
-					'image-loaded'             : new Signal(),
-					'set-new-src'              : new Signal(),
-					'control-set'              : new Signal(),
-					'control-updated'          : new Signal(),
-					'close-intro'              : new Signal(),
-					'image-data-url-requested' : new Signal()
-				}
-			};
-
-			process.init( shared );
-			dragdrop.init( shared );
-			export_button.init( shared );
-			controls.init( shared );
-			import_button.init( shared );
-			random_button.init( shared );
-			image.init( shared );
-			file.init( shared );
-			imgur.init( shared );
-			intro.init( shared );
-			cam.init( shared );
-		}
-
-		function showError( required_features )
-		{
-			var message = document.createElement( 'div' );
-
-			var message_text = 'sorry. it looks like your browser is missing some of the features ';
-			message_text += '(' + required_features.join( ', ' ) + ') that are required to run this ';
-			message_text += 'experiment.';
-
-			message.innerText = message_text;
-			message.className = 'missing-feature';
-
-			document.getElementsByTagName( 'body' )[0].appendChild( message );
-		}
-	}
-);
--- a/scripts/models/controlsmodel.js
+++ b/scripts/models/controlsmodel.js
@ -0,0 +1,109 @@
+/*global define*/
+define(
+	[ 'util/object', 'util/addpublishers' ],
+	function ( objectHelper, addPublishers ) {
+		// the controlsmodel stores and manages all
+		// values of the input sliders
+		function ControlsModel ( initialValues ) {
+			if ( ! ( this instanceof ControlsModel ) ) {
+				return new ControlsModel( initialValues );
+			}
+
+			var self = this;
+			var publishers = addPublishers( self, [ 'update' ] );
+			var limits = getLimits( initialValues ) || { };
+			var values = getValues( initialValues ) || { };
+
+			function updateValues ( newValues ) {
+				if ( newValues ) {
+					newValues = objectHelper.getCopy( newValues );
+
+					var referenceValue;
+					var newValue;
+					
+					for ( var key in newValues ) {
+						limit = limits[key];
+						newValue = newValues[key];
+
+						if (
+							typeof limit !== 'undefined' &&
+							typeof newValue === 'number' &&
+							! isNaN( newValue ) &&
+							newValue >= limit.min &&
+							newValue <= limit.max &&
+							values[key] !== newValue
+						) {
+							values[key] = newValue;
+							publishers.update.dispatch( key, values[key] );
+						}
+					}
+				}
+
+				return self;
+			}
+
+			function setValue ( key, newValue ) {
+				if (
+					typeof values[key] === 'number' &&
+					typeof newValue === 'number' &&
+					! isNaN( newValue )
+				) {
+					values[key] = newValue;
+
+					publishers.update.dispatch( key, values[key] );
+				}
+
+				return self;
+			}
+
+			function randomizeValues () {
+				var randomValues = { };
+
+				for ( var key in limits ) {
+					randomValues[key] = parseInt(
+						Math.random() * ( limits[key].max - limits[key].min ) + limits[key].min,
+						10
+					);
+				}
+
+				updateValues( randomValues );
+
+				return self;
+			}
+
+			function getValues ( vals ) {
+				var result = { };
+				vals = vals || values;
+
+				for ( var key in vals ) {
+					if ( typeof vals[key].value === 'number' ) {
+						result[key] = vals[key].value;
+					} else {
+						result[key] = vals[key];
+					}
+				}
+
+				return objectHelper.getCopy( result );
+			}
+
+			function getLimits ( vals ) {
+				var result = { };
+				
+				for ( var key in vals ) {
+					result[key] = {
+						min: vals[key].min,
+						max: vals[key].max
+					};
+				}
+
+				return objectHelper.getCopy( result );
+			}
+
+			self.randomizeValues = randomizeValues;
+			self.setValue = setValue;
+			self.getValues = getValues;
+		}
+
+		return ControlsModel;
+	}
+);
--- a/scripts/models/glitchmodel.js
+++ b/scripts/models/glitchmodel.js
@ -0,0 +1,81 @@
+/*global define*/
+define(
+	[ 'config', 'lib/glitch-canvas-with-worker', 'util/addpublishers', 'util/canvas' ],
+	function ( config, canvasGlitcher, addPublishers, canvasHelper ) {
+		// the glitchModel takes care of glitching the image and passing it along as imageData
+		function GlitchModel () {
+			if ( ! ( this instanceof GlitchModel ) ) {
+				return new GlitchModel();
+			}
+
+			var self = this;
+			var publishers = addPublishers( self, 'glitch' );
+			var params = { };
+			var originalImageData;
+			var glitchedImageData;
+			var thumbnailCanvas = document.createElement( 'canvas' );
+			var thumbnailImg = new Image();
+			var glitchTimeoutId = NaN;
+
+			var glitcher = canvasGlitcher( config.workers.glitch ).init();
+			
+			function updateGlitch () {
+				if ( params && originalImageData ) {
+					glitcher.glitch( originalImageData, params, glitchComplete );
+				}
+			}
+
+			function glitchComplete ( glitchData ) {
+				glitchedImageData = glitchData;
+				publishers.glitch.dispatch( glitchData );
+			}
+
+			function setValue ( key, newValue ) {
+				if ( params[key] !== newValue ) {
+					params[key] = newValue;
+					glitchTimeoutId = setTimeout( updateGlitch, 10 );
+				}
+			}
+
+			function setImageData ( newImageData ) {
+				originalImageData = newImageData;
+				updateGlitch()
+			}
+
+			function generateImageURL ( callback, size, args ) {
+				if ( originalImageData ) {
+					size = size || { width: 50, height: 50 };
+
+					if ( typeof size === 'string' && size === 'original' ) {
+						size = {
+							width: glitchedImageData.width,
+							height: glitchedImageData.height
+						};
+					}
+
+					canvasHelper.resizeImage( glitchedImageData, size, function ( imageUrl ) {
+						args = Array.prototype.slice.call( args || [ ] );
+						args.unshift( imageUrl );
+						
+						callback.apply( callback, args );
+					}, 'asDataURL' );
+				}
+
+				return self;
+			}
+
+			function getImageGenerationFn ( callback, size ) {
+				return function () {
+					generateImageURL( callback, size, arguments )
+				};
+			}
+
+			self.setValue = setValue;
+			self.setImageData = setImageData;
+			self.generateImageURL = generateImageURL;
+			self.getImageGenerationFn = getImageGenerationFn;
+		}
+
+		return GlitchModel;
+	}
+)
--- a/scripts/models/imagemodel.js
+++ b/scripts/models/imagemodel.js
@ -0,0 +1,169 @@
+/*global define*/
+define(
+	[ 'util/browser', 'util/addpublishers', 'util/time', 'util/canvas', 'util/localizetext' ],
+	function ( browser, addPublishers , timeHelper, canvasHelper, loc ) {
+		// the imageModel loads and stores the latest open image file
+		// (the original, not the glitched version) and converts it into
+		// a imageData object
+		function ImageModel () {
+			if ( ! ( this instanceof ImageModel ) ) {
+				return new ImageModel();
+			}
+
+			var self = this;
+			var publishers = addPublishers( self, [ 'load', 'update', 'error', 'statusmessage' ] );
+			
+			var canvasEl = document.createElement( 'canvas' );
+			var ctx = canvasEl.getContext( '2d' );
+			var imageEl = new Image();
+
+			var fileReader;
+			var canHandleFileImport = false;
+			var lastImageSrc;
+			var lastFileName;
+
+			// max image import filesize in megabytes.
+			// because of not 100% clear base64 url size constraints
+			// if the uploaded image is bigger, resize
+			// var maxFileSize = Math.pow(1024, 2) * 1.5;
+			var maxFileSize = 0.8 * Math.pow( 1000, 2 );
+			var isScalingDown = true;
+
+			if ( fileReader = browser.getFeature( window, 'FileReader' ) ) {
+				fileReader = new fileReader();
+				canHandleFileImport = true;
+				fileReader.addEventListener( 'load', fileLoaded );
+				fileReader.addEventListener( 'error', fileLoadFailed );
+			}
+
+			imageEl.addEventListener( 'load', imageLoaded );
+			imageEl.addEventListener( 'error', imageLoadFailed );
+
+			function loadFromFile ( file ) {
+				if ( canHandleFileImport ) {
+					lastFileName = file.name;
+					fileReader.readAsDataURL( file );
+				}
+
+				return self;
+			}
+
+			function loadFromVideo ( videoEl ) {
+				clearCanvas();
+				canvasEl.width = videoEl.width || videoEl.videoWidth || videoEl.clientWidth;
+				canvasEl.height = videoEl.height || videoEl.videoHeight || videoEl.clientHeight;
+
+				ctx.translate( canvasEl.width, 0 );
+				ctx.scale( -1, 1 );
+				ctx.drawImage( videoEl, 0, 0 );
+
+				lastImageSrc = canvasEl.toDataURL( 'image/png' );
+				lastFileName = loc( 'webcam.picture', timeHelper.dateTimeToLocalStr( new Date() ) );
+												
+				checkImageData( ctx.getImageData( 0, 0, canvasEl.width, canvasEl.height ), publishers.load.dispatch );
+				
+				return self;
+			}
+
+			function loadFromURL ( url, fileName ) {
+				if ( fileName ) {
+					lastFileName = fileName;
+				}
+
+				url = decodeURIComponent( url );
+
+				publishers.update.dispatch( 'img', url, fileName );
+				
+				if ( url && imageEl.src !== url ) {
+					imageEl.src = '';
+					lastImageSrc = url;
+					imageEl.src = url;
+				} else {
+					imageLoaded();
+				}
+
+				return self;
+			}
+
+			function clearCanvas () {
+				ctx.clearRect( 0, 0, canvasEl.width, canvasEl.height );
+			}
+
+			function imageLoaded () {
+				var imageData = getImageData( imageEl );
+
+				checkImageData( imageData, publishers.load.dispatch );
+			}
+
+			function imageLoadFailed ( err ) {
+				publishers.error.dispatch( 'file.error.openimage', imageEl.src );
+			}
+
+			function fileLoaded ( event ) {
+				loadFromURL( event.target.result );
+			}
+
+			function fileLoadFailed ( error ) {
+				publishers.error.dispatch( 'file.error.openfile' );
+			}
+
+			function checkImageData ( imageData, callback ) {
+				if ( isScalingDown && imageData.data && imageData.data.length / 4 > maxFileSize ) {
+					var widthToHeightRatio = imageData.width / imageData.height;
+					var heightTiWidthRatio = imageData.height / imageData.width;
+
+					var newWidth = Math.round( Math.sqrt( maxFileSize / widthToHeightRatio ) );
+					var newHeight = Math.round( newWidth * heightTiWidthRatio );
+					var newSize = {
+						width: newWidth,
+						height: newHeight
+					};
+
+					publishers.statusmessage.dispatch( 'file.message.resize' );
+					
+					canvasHelper.resizeImage( imageData, newSize, function ( result ) {
+						callback( result.imageData );
+
+						if ( typeof result.dataURL === 'string' ) {
+							lastImageSrc = result.dataURL;
+						}
+					}, 'both' );
+				} else {
+					callback( imageData );
+				}
+			}
+
+			function settingUpdated ( key, value ) {
+				if ( key === 'resizeUploadedImages' && typeof value === 'boolean' ) {
+					isScalingDown = value;
+				}
+			}
+
+			function getImageData ( img ) {
+				clearCanvas();
+				canvasEl.width = img.naturalWidth;
+				canvasEl.height = img.naturalHeight;
+				ctx.drawImage( img, 0, 0, img.naturalWidth, img.naturalHeight );
+
+				return ctx.getImageData( 0, 0, img.naturalWidth, img.naturalHeight );
+			}
+
+			function getLastImageSRC ( img ) {
+				return lastImageSrc;
+			}
+
+			function getLastFileName ( img ) {
+				return lastFileName;
+			}
+
+			self.loadFromFile = loadFromFile;
+			self.loadFromVideo = loadFromVideo;
+			self.getLastImageSRC = getLastImageSRC;
+			self.getLastFileName = getLastFileName;
+			self.loadFromURL = loadFromURL;
+			self.settingUpdated = settingUpdated;
+		}
+
+		return ImageModel;
+	}
+);
--- a/scripts/models/localisationmodel.js
+++ b/scripts/models/localisationmodel.js
@ -0,0 +1,159 @@
+/*global define*/
+define(
+	[ 'config', 'util/dom', 'util/object', 'util/string', 'util/addpublishers', 'lib/reqwest' ],
+	function ( config, domHelper, objectHelper, stringHelper, addPublishers, reqwest ) {
+		function LocalisationModel () {
+			if ( ! ( this instanceof LocalisationModel ) ) {
+				return new LocalisationModel();
+			}
+
+			var self = this;
+
+			var publishers = addPublishers( self, 'error' );
+			
+			var textElData = [ ];
+			var texts = '';
+			var currentLanguage = '';
+
+			var animationFrameId = NaN;
+			var languageWasLoaded = false;
+			
+			var linkOptions = { links: { newTab: true } };
+
+			function setLanguage ( newLanguage ) {
+				if ( newLanguage !== currentLanguage && newLanguage in config.availableLanguages ) {
+					loadLanguage( newLanguage );
+				}
+			}
+
+			function loadLanguage ( languageName ) {
+				languageWasLoaded = false;
+
+				reqwest( {
+					url: config.language.dir + '/' + languageName + '.json',
+					type: 'json',
+					method: 'get',
+					error: function ( err, one, two ) {
+						// if this is the first language to load, that's really bad.
+						languageWasLoaded = true;
+						publishers.error.dispatch( 'I\'m really sorry. I failed to load the language file for ' + languageName + '. This is a serious error that makes the app very hard to use. Maybe you can try reloading?' );
+
+					},
+					success: function ( res ) {
+						languageLoaded( languageName, res );
+					}
+				} );
+			}
+
+			function languageLoaded ( newLanguageName, newTexts ) {
+				currentLanguage = newLanguageName;
+				languageWasLoaded = true;
+				texts = newTexts;
+				resetAllTexts();
+				updateAllTexts();
+			}
+
+			function updateAllTexts () {
+				if ( languageWasLoaded ) {
+					cancelAnimationFrame( animationFrameId );
+
+					animationFrameId = requestAnimationFrame( function () {
+						var item;
+						var args;
+
+						for ( var i = textElData.length - 1; i >= 0; i-- ) {
+							item = textElData[i];
+							
+							if ( domHelper.isElement( item.el ) ) {
+								if ( ! item.wasUpdated ) {
+									if ( item.attribute === 'innerHTML' ) {
+										item.el.innerHTML = stringHelper.markdownToHtml( getTextForKey( item.key, item.args ), linkOptions );
+									} else {
+										item.el[item.attribute] = getTextForKey( item.key, item.args );
+									}
+									
+									item.wasUpdated = true;
+								}
+							}
+							else {
+								textElData.splice( i, 1 );
+							}
+						}
+					} );
+				}
+			}
+
+			function resetAllTexts () {
+				textElData.forEach( function ( item ) {
+					item.wasUpdated = false;
+				} );
+			}
+
+			function getTextForKey ( key, args ) {
+				var result = '';
+
+				try {
+					result = objectHelper.getObjectByString( key, texts );
+				} catch ( e ) {
+					if ( languageWasLoaded ) {
+						result = key
+					}
+				};
+
+				if ( args && args.length ) {
+					var regex;
+
+					args.forEach( function ( arg, index ) {
+						regex = new RegExp( '{\\$' + ( index + 1 ) + '}' );
+						result = result.replace( regex, arg );
+					} );
+				}
+
+				return result;
+			}
+
+			// http://mzl.la/1RDxjVO
+			function getArgs ( args, firstIndex ) {
+				firstIndex = firstIndex || 3;
+				var result;
+
+				if ( args.length > firstIndex ) {
+					result = [ ];
+				}
+
+				for ( var i = firstIndex, len = args.length; i < len; i++ ) {
+					result[result.length] = args[i];
+				}
+
+				return result;
+			}
+
+			function settingUpdated ( name, value ) {
+				if ( name === 'language' && value !== currentLanguage ) {
+					loadLanguage( value );
+				}
+			}
+
+			function localizeText ( el, attribute, key ) {
+				if ( el && attribute && key ) {
+					textElData.push( { el: el, attribute: attribute, key: key, wasUpdated: false, args: getArgs( arguments ) } );
+				} else {
+					if ( typeof el === 'string' ) {
+						return getTextForKey( el, getArgs( arguments, 1 ) );
+					}
+				}
+
+				updateAllTexts();
+			}
+
+			self.setLanguage = setLanguage;
+			self.localizeText = localizeText;
+			self.settingUpdated = settingUpdated;
+			self.randomNumber = ~~( Math.random() * 1000 );
+		}
+
+		LocalisationModel.sharedInstance = LocalisationModel();
+
+		return LocalisationModel;
+	}
+);
--- a/scripts/models/networkmodel.js
+++ b/scripts/models/networkmodel.js
@ -0,0 +1,39 @@
+/*global define*/
+define(
+	[ 'util/addpublishers' ],
+	function ( addPublishers ) {
+		// the NetworkModel updates the app if the device connectivity changed
+		function NetworkModel () {
+			if ( ! ( this instanceof NetworkModel ) ) {
+				return new NetworkModel();
+			}
+
+			var self = this;
+			var publishers = addPublishers( self, 'connectivitychange', 'disconnect', 'connect' );
+			var isConnected;
+
+			window.addEventListener( 'online', checkConnectivity );
+			window.addEventListener( 'offline', checkConnectivity );
+
+			function checkConnectivity () {
+				if ( navigator.onLine !== isConnected ) {
+					isConnected = navigator.onLine;
+					
+					publishers.connectivitychange.dispatch( isConnected );
+
+					if ( isConnected ) {
+						publishers.connect.dispatch();
+					} else {
+						publishers.disconnect.dispatch();
+					}
+				}
+
+				return self;
+			}
+
+			self.checkConnectivity = checkConnectivity;
+		}
+
+		return NetworkModel;
+	}
+);
--- a/scripts/models/settingsmodel.js
+++ b/scripts/models/settingsmodel.js
@ -0,0 +1,178 @@
+/*global define*/
+define(
+	[ 'config', 'util/browser', 'util/object', 'util/addpublishers', 'lib/localforage.nopromises' ],
+	function ( config, browser, objectHelper, addPublishers, localforage ) {
+		function SettingsModel ( storageKey ) {
+			if ( ! ( this instanceof SettingsModel ) ) {
+				return new SettingsModel( storageKey );
+			}
+
+			var self = this;
+			var publisherNames = [ 'update', 'error' ];
+			var publishers = addPublishers( self, publisherNames );
+			var useLocalForage = browser.test( 'localforage' ) && localforage;
+			var worker;
+			var defaultSettings = config.settings;
+			var userLanguage = ( navigator.language || navigator.userLanguage || '' ).toLowerCase();
+
+			if ( userLanguage !== '' && defaultSettings.language.options.indexOf( userLanguage ) > -1 ) {
+				defaultSettings.language.value = userLanguage;
+			}
+
+			var settings = { };
+
+			storageKey = storageKey || 'settings';
+
+			if ( useLocalForage && browser.test( 'webworker' ) && browser.test( 'browserdb' ) && ! browser.test( 'safari' ) ) {
+				worker = new Worker( config.workers.settings );
+				worker.addEventListener( 'message', workerResponded, false );
+				sendMessageToWorker( 'setStorageKey', storageKey );
+				sendMessageToWorker( 'setDefaultSettings', defaultSettings );
+			} else {
+				settingsUpdated( defaultSettings );
+			}
+
+			function getSetting ( key ) {
+				return settings[key];
+			}
+
+			function getSettingValue ( key ) {
+				var setting = getSetting( key );
+				
+				if ( setting ) {
+					return setting.value;
+				} else {
+					return;
+				}
+			}
+
+			function getSettings () {
+				return objectHelper.getCopy( settings );
+			}
+
+			function setValue ( key, value ) {
+				var wasUpdated = false;
+
+				if (
+					typeof key === 'string' &&
+					typeof settings[key] !== 'undefined' &&
+					typeof value === typeof settings[key].value &&
+					value !== settings[key].value
+				) {
+					settings[key].value = value;
+					wasUpdated = true;
+				}
+
+				if ( wasUpdated ) {
+					if ( useLocalForage ) {
+						save( settings );
+					} else {
+						settingsUpdated( settings );
+					}
+				}
+
+				return self;
+			}
+
+			function save ( newSettings ) {
+				if ( useLocalForage ) {
+					if ( worker ) {
+						sendMessageToWorker( 'save', newSettings );
+					} else {
+						localforage.setItem( storageKey, newSettings, function ( err, savedSettings ) {
+							if ( err ) {
+								sendError( 'settings.error.save' );
+								console && console.log( 'localforage error', err );
+							} else {
+								if ( savedSettings ) {
+									settingsUpdated( savedSettings );
+								} else {
+									console && console.log( 'no data was saved', savedSettings );
+								}
+							}
+						} );
+					}
+				}
+			}
+
+			function load () {
+				if ( useLocalForage ) {
+					if ( worker ) {
+						sendMessageToWorker( 'load' );
+					} else {
+						localforage.getItem( storageKey, function ( err, loadedSettings ) {
+							if ( err ) {
+								sendError( 'settings.error.load' );
+								console && console.log( 'localforage error', err );
+							} else {
+								settingsUpdated( loadedSettings );
+							}
+						} );
+					}
+				} else {
+					settingsUpdated( settings || defaultSettings );
+				}
+			}
+
+			function sendMessageToWorker ( type, data ) {
+				if ( typeof type === 'string' ) {
+					if ( typeof data === 'undefined' ) {
+						data = type;
+					}
+
+					var message = { };
+					message[type] = data;
+					worker.postMessage( message );
+				}
+			}
+
+			function workerResponded ( event ) {
+				if ( event && event.data ) {
+					publisherNames.forEach( function ( type ) {
+						if ( typeof event.data[type] !== 'undefined' ) {
+							if ( type === 'update' ) {
+								settingsUpdated( event.data[type] );
+							} else {
+								if ( publishers[type] === type ) {
+									publishers[type].dispatch()
+								} else {
+									publishers[type].dispatch( event.data[type] )
+								}
+							}
+						}
+					} );
+				}
+			}
+
+			function settingsUpdated ( newSettings ) {
+				if ( newSettings ) {
+					settings = newSettings || defaultSettings;
+
+					if ( settings !== defaultSettings ) {
+						for ( var name in defaultSettings ) {
+							if ( ! settings[name] ) {
+								settings[name] = defaultSettings[name];
+							}
+						}
+					}
+
+					for ( var name in settings ) {
+						publishers.update.dispatch( name, settings[name].value, settings[name].options );
+					}
+
+				} else {
+					settings = defaultSettings;
+					save( settings );
+				}
+			}
+
+			self.getSetting = getSetting;
+			self.getSettingValue = getSettingValue;
+			self.getSettings = getSettings;
+			self.setValue = setValue;
+			self.load = load;
+		}
+
+		return SettingsModel;
+	}
+);
--- a/scripts/models/sharemodel.js
+++ b/scripts/models/sharemodel.js
@ -0,0 +1,107 @@
+/*global define*/
+define(
+	[ 'config', 'lib/reqwest', 'util/addpublishers' ],
+	function ( config, reqwest, addPublishers ) {
+		// the ShareModel uploads and removes images from Imgur
+		function ShareModel () {
+			if ( ! ( this instanceof ShareModel ) ) {
+				return new ShareModel();
+			}
+
+			var self = this;
+			var base64Url;
+			var publishers = addPublishers( self,
+				'uploadstart', 'uploadend', 'uploadcomplete',
+				'removestart', 'removeend', 'removecomplete',
+				'error', 'statusmessage'
+			);
+
+			// http://stackoverflow.com/questions/17805456/upload-a-canvas-image-to-imgur-api-v3-with-javascript
+			function upload () {
+				if ( base64Url ) {
+					publishers.uploadstart.dispatch();
+
+					reqwest( {
+						url: 'https://api.imgur.com/3/image.json',
+						method: 'POST',
+						headers: {
+							Authorization: 'Client-ID ' + config.keys.imgur
+						},
+						data: {
+							image: base64Url.split( ',' )[1],
+							type: 'base64'
+						},
+						type: 'json',
+						crossOrigin: true,
+						success: uploadSuceeded,
+						error: uploadFailed
+					} );
+				} else {
+					uploadFailed( new Error( 'share.error.base64' ) );
+				}
+
+				return self;
+			}
+
+			function uploadSuceeded ( res ) {
+				publishers.uploadend.dispatch();
+
+				if ( res.status === 200 && res.data && res.data.link ) {
+					var link = res.data.link.replace( 'http://', 'https://' );
+
+					publishers.uploadcomplete.dispatch( link, res.data.id, res.data.deletehash );
+					publishers.statusmessage.dispatch( 'share.message.upload', { innerHTML: true, args: [ link ] } );
+				}
+			}
+
+			function uploadFailed ( err ) {
+				publishers.uploadend.dispatch();
+				publishers.error.dispatch( 'share.error.upload', { type: 'imguruploadfail' } );
+				console && console.log( err.message || err );
+			}
+
+			function updateUrl ( url ) {
+				base64Url = url;
+				
+				return self;
+			}
+
+			function remove ( uid, deleteHash ) {
+				if ( deleteHash ) {
+					publishers.removestart.dispatch( uid );
+
+					reqwest( {
+						url: 'https://api.imgur.com/3/image/' + deleteHash,
+						method: 'DELETE',
+						headers: {
+							Authorization: 'Client-ID ' + config.keys.imgur
+						},
+						crossOrigin: true,
+						success: function () { removeSucceeded( uid ); },
+						error: function ( err ) { removeFailed( uid, err ); }
+					} );
+				}
+
+				return self;
+			}
+
+			function removeSucceeded ( uid ) {
+				publishers.removeend.dispatch( uid );
+				publishers.removecomplete.dispatch( uid );
+				publishers.statusmessage.dispatch( 'share.message.del' );
+			}
+
+			function removeFailed ( uid, err ) {
+				publishers.removeend.dispatch( uid );
+				publishers.error.dispatch( 'share.error.del', { type: 'imgurremovefail', uid: uid } );
+				console && console.log( err.message || err );
+			}
+
+			self.upload = upload;
+			self.updateUrl = updateUrl;
+			self.remove = remove
+		}
+
+		return ShareModel;
+	}
+);
--- a/scripts/models/storagemodel.js
+++ b/scripts/models/storagemodel.js
@ -0,0 +1,300 @@
+/*global define*/
+define(
+	[ 'config', 'util/browser', 'util/addpublishers', 'lib/md5', 'lib/localforage.nopromises', 'models/localisationmodel' ],
+	function ( config, browser, addPublishers, md5, localforage, LocalisationModel ) {
+		// the StorageModel takes care of loading and saving data to localStorage.
+		// It stores the used glitch values as well as the imgur address if the
+		// image was shared.
+		// It generares a UID for each image to avoid having to save the 
+		// same image multiple times.
+		// If an image was updated (shared/deleted), it updates the corresponding
+		// object in localstorage
+		function StorageModel () {
+			if ( ! ( this instanceof StorageModel ) ) {
+				return new StorageModel();
+			}
+
+			var self = this;
+			var isFirstVisit = false;
+			var entries = { };
+			var useLocalForage = browser.test( 'localforage' ) && localforage;
+			var worker;
+
+			var publisherNames = [
+				'update', 'save', 'loaditem',
+				'removeall', 'removelocaldata', 'removeimgurdata',
+				'firstvisit', 'error', 'statusmessage'
+			];
+
+			var publishers = addPublishers( self, publisherNames );
+
+			storageKey = config.keys.storage;
+
+			if ( useLocalForage && browser.test( 'webworker' ) && browser.test( 'browserdb' ) && ! browser.test( 'safari' ) ) {
+				worker = new Worker( config.workers.storage );
+				worker.addEventListener( 'message', workerResponded, false );
+				sendMessageToWorker( 'setStorageKey', storageKey );
+			}
+
+			function add ( item ) {
+				if ( useLocalForage && item ) {
+					if ( worker ) {
+						sendMessageToWorker( 'add', item );
+					} else {
+						var uid = createUID( item );
+
+						if (
+							entries[uid] &&
+							entries[uid].deleteHash === item.deleteHash &&
+							entries[uid].publicUrl === item.publicUrl &&
+							entries[uid].imgurID === item.imgurID
+						) {
+							publishers.statusmessage.dispatch( 'file.message.before' );
+						} else {
+							item.timestamp = Date.now();
+							entries[uid] = item;
+							
+							save( function () {
+								publishers.statusmessage.dispatch( 'file.message.save' );
+							} );
+						}
+					}
+				}
+
+				return self;
+			}
+
+			function removeCompletely ( uid ) {
+				if ( useLocalForage && uid ) {
+					if ( worker ) {
+						sendMessageToWorker( 'removeCompletely', uid );
+					} else {
+						if (
+							entries[uid] &&
+							(
+								entries[uid].deleteHash ||
+								entries[uid].publicUrl ||
+								entries[uid].imgurID ||
+								entries[uid].values ||
+								entries[uid].src
+							)
+						) {
+							console && console.log( 'cant delete storage item because theres still some data left', entries[uid] );
+						} else {
+							publishers.removeall.dispatch( entries[uid] );
+							delete entries[uid];
+							
+							save( function () {
+								publishers.statusmessage.dispatch( 'file.message.del' );
+							} );
+						}
+					}
+				}
+			}
+
+			function removeLocalData ( uid ) {
+				if ( useLocalForage && uid ) {
+					if ( worker ) {
+						sendMessageToWorker( 'removeLocalData', uid );
+					} else {
+						if ( entries[uid] ) {
+							if ( entries[uid].src ) {
+								delete entries[uid].src;
+
+								publishers.removelocaldata.dispatch( entries[uid] );
+							}
+
+							if ( entries[uid].values ) {
+								delete entries[uid].values;	
+							}
+
+							if ( ! ( entries[uid].deleteHash || entries[uid].publicUrl || entries[uid].imgurID ) ) {
+								removeCompletely( uid );
+							}
+
+							save();
+						}
+					}
+				}
+
+				return self;
+			}
+
+			function removeImgurData ( uid ) {
+				if ( useLocalForage && uid ) {
+					if ( worker ) {
+						sendMessageToWorker( 'removeImgurData', uid );
+					} else {
+						if ( entries[uid] ) {
+							if ( entries[uid].deleteHash ) {
+								publishers.removeimgurdata.dispatch( entries[uid] );
+								delete entries[uid].deleteHash;
+							}
+							
+							if ( entries[uid].publicUrl ) {
+								delete entries[uid].publicUrl;
+							}
+
+							if ( entries[uid].imgurID ) {
+								delete entries[uid].imgurID;
+							}
+
+							if ( ! ( entries[uid].src || entries[uid].values ) ) {
+								removeCompletely( uid );
+							}
+
+							save();
+						}
+					}
+				}
+
+				return self;
+			}
+
+			function load ( callback ) {
+				if ( useLocalForage ) {
+					if ( worker ) {
+						sendMessageToWorker( 'load' );
+					} else {
+						localforage.getItem( storageKey, function ( err, loadedData ) {							
+							if ( err ) {
+								publishers.error.dispatch( 'file.error.load' );
+								console && console.log( 'localforage error', err );
+							} else {
+								entries = loadedData && loadedData.entries ? loadedData.entries : { };
+								publishers.update.dispatch( entries );
+
+								isFirstVisit = ( loadedData && loadedData.lastVisit ) ? false : true;
+								
+								if ( isFirstVisit ) {
+									publishers.firstvisit.dispatch();
+									save();
+								}
+
+								if ( typeof callback === 'function' ) {
+									callback();
+								}
+							}
+						} );
+					}
+				}
+
+				return self;
+			}
+
+			function save ( callback ) {
+				if ( useLocalForage ) {
+					if ( worker ) {
+						sendMessageToWorker( 'save' );
+					} else {
+						localforage.setItem( storageKey, { entries: entries, lastVisit: Date.now() }, function ( err, savedData ) {
+							if ( err ) {
+								publishers.error.dispatch( 'file.error.save' );
+								console && console.log( 'localforage error', err );
+							} else {
+								if ( savedData ) {
+									entries = savedData.entries;
+									publishers.update.dispatch( entries );
+									publishers.save.dispatch();
+
+									if ( typeof callback === 'function' ) {
+										callback();
+									}
+								} else {
+									console && console.log( 'no data was saved', savedData );
+								}
+							}
+						} );
+					}
+				}
+
+				return self;
+			}
+
+			function loadItem ( uid ) {
+				if ( useLocalForage ) {
+					if ( worker ) {
+						sendMessageToWorker( 'loadItem', uid );
+					} else {
+						if ( entries[uid] ) {
+							publishers.loaditem.dispatch( uid, entries[uid] );
+						}
+					}
+				}
+
+				return self;
+			}
+
+			function workerResponded ( event ) {
+				if ( event && event.data ) {
+					publisherNames.forEach( function ( type ) {
+						if ( typeof event.data[type] !== 'undefined' ) {
+							if ( type === 'loaditem' ) {
+								publishers[type].dispatch( event.data[type].uid, event.data[type].entries );
+							} else {
+								if ( publishers[type] === type ) {
+									// if message is empty, the worker sends the type as data.
+									publishers[type].dispatch()
+								} else {
+									publishers[type].dispatch( event.data[type] )
+								}
+							}
+						}
+					} );
+				}
+			}
+
+			function sendMessageToWorker ( type, data ) {
+				if ( typeof type === 'string' ) {
+					if ( typeof data === 'undefined' ) {
+						data = type;
+					}
+
+					var message = { };
+					message[type] = data;
+					worker.postMessage( message );
+				}
+			}
+
+			function createUID ( item ) {
+				var inputStr = 'N' + item.name + 'S' + item.src + 'L' + item.thumbnail.length || 0 + 'V';
+
+				for ( var key in item.values ) {
+					inputStr += key.substr( 0, 2 );
+					inputStr += item.values[key];
+				}
+
+				return md5( inputStr );
+			}
+
+			function getLatestUID () {
+				var latestUid;
+				var latestTimestamp;
+				var timestamp;
+				
+				for ( var uid in entries ) {
+					timestamp = entries[uid].timestamp;
+
+					if ( timestamp ) {
+						if ( ! latestUid || timestamp > latestTimestamp ) {
+							latestUid = uid;
+							latestTimestamp = timestamp;
+						}
+					}
+				}
+
+				return latestUid;
+			}
+
+			self.add = add;
+			self.removeImgurData = removeImgurData;
+			self.removeLocalData = removeLocalData;
+			self.load = load;
+			self.loadItem = loadItem;
+			self.removeImgurData = removeImgurData;
+			self.getLatestUID = getLatestUID;
+		}
+
+		return StorageModel;
+	}
+);
--- a/scripts/src/cam.js
+++ b/scripts/src/cam.js
@ -1,113 +0,0 @@
-/*global define*/
-define(
-	[ 'lib/getusermedia' ],
-	function ()
-	{
-		var cam_button_el = document.getElementById( 'cam-button' );
-		var video_wrapper_el;
-		var video_el;
-		var stream;
-
-		var canvas_el;
-		var ctx;
-
-		var signals;
-
-		function init ( shared ) {
-
-			signals = shared.signals;
-
-			if ( navigator.getUserMedia ) {
-				cam_button_el.classList.add( 'is-supported' );
-				cam_button_el.addEventListener( 'click', camButtonClicked );
-
-				video_wrapper_el = document.createElement( 'div' );
-				video_wrapper_el.classList.add( 'cam-wrapper' );
-
-				var take_picture_el = document.createElement( 'div' );
-				take_picture_el.textContent = 'Take Picture';
-				take_picture_el.classList.add( 'take-picture' );
-				take_picture_el.classList.add( 'button' );
-				take_picture_el.addEventListener( 'click', videoClicked );
-
-				video_wrapper_el.appendChild( take_picture_el );
-
-				video_el = document.createElement( 'video' );
-				video_el.classList.add( 'cam' );
-
-				video_el.addEventListener( 'click', videoClicked );
-				video_wrapper_el.appendChild( video_el );
-
-				document.body.appendChild( video_wrapper_el );
-				
-				canvas_el = document.createElement( 'canvas' );
-			}
-		}
-
-		function camButtonClicked ( event ) {
-			var cam_options = { video: true };
-
-			navigator.getUserMedia( cam_options, gotCamData, failed );
-		}
-
-		function gotCamData ( media_stream ) {
-			var source;
-
-			if ( window.webkitURL )
-			{
-				source = window.URL.createObjectURL( media_stream );
-			}
-
-			else
-			{
-				source = media_stream;
-			}
-
-			if ( video_el.mozSrcObject !== undefined )
-			{
-				video_el.mozSrcObject = source;
-			}
-
-			else
-			{
-				video_el.src = source;
-			}
-
-			stream = media_stream;
-
-			video_el.play();
-			video_el.style.display = 'block';
-
-			video_wrapper_el.classList.add( 'is-active' );
-
-			
-
-			canvas_el.width = 640;
-			canvas_el.height = 480;
-			ctx = canvas_el.getContext( '2d' );
-		}
-
-		function failed () {
-			console.log( 'sorry, but there was an error accessing you camera...' );
-		}
-
-		function videoClicked ( event ) {
-			ctx.translate( canvas_el.width, 0 );
-			ctx.scale( -1, 1 );
-			ctx.drawImage( video_el, 0, 0 );
-
-			var data = ctx.getImageData( 0, 0, canvas_el.width, canvas_el.height );
-			var image_src = canvas_el.toDataURL( 'image/png' );
-
-			video_wrapper_el.classList.remove( 'is-active' );
-
-			signals['set-new-src'].dispatch( image_src );
-
-			setTimeout( function() { stream.stop(); }, 500 );
-		}
-
-		return {
-			init: init
-		};
-	}
-);
--- a/scripts/src/controls.js
+++ b/scripts/src/controls.js
@ -1,120 +0,0 @@
-/*global define*/
-define(
-	function()
-	{
-		var values = { };
-		var is_initialized = false;
-		var signals;
-		var controls;
-		var is_ie = document.querySelector( 'html' ).classList.contains( 'somewhatokie' );
-
-		function init( shared )
-		{
-			signals = shared.signals;
-
-			if ( shared.feature['query-selector-all'] )
-			{
-				var wrapper = document.getElementById( 'controls' );
-				controls = wrapper.querySelectorAll( '.control-input' );
-
-				wrapper.className += ' is-active';
-
-				for ( var i = 0; i < controls.length; i++ )
-				{
-					var control = controls[i];
-
-					control.addEventListener( 'input', controlUpdated, false );
-
-					if ( is_ie )
-					{
-						control.addEventListener( 'change', controlUpdated, false );
-					}
-
-					updateValue( getInputKey( control.id ), control.value );
-					updateInput( getCorrespondingInput( control.id ), control.value );
-				}
-
-				is_initialized = true;
-
-				signals['control-set'].add( setControlValues );
-				signals['control-updated'].dispatch( values );
-			}
-		}
-
-		function controlUpdated( element )
-		{
-			if ( element.target )
-			{
-				element = element.target;
-			}
-
-			updateValue( getInputKey( element.id ), element.value );
-			updateInput( getCorrespondingInput( element.id ), element.value );
-		}
-
-		function setControlValues( new_values )
-		{
-			var control;
-			var updated_values = { };
-
-			for ( var id in new_values )
-			{
-				control = getCorrespondingInput( id );
-				control.value = new_values[id];
-				controlUpdated( control );
-				updated_values[ getInputKey( id ) ] = new_values[id];
-			}
-
-			values = updated_values;
-			signals['control-updated'].dispatch( values );
-		}
-
-		function updateValue( key, value )
-		{
-			values[key] = value;
-
-			if ( is_initialized )
-			{
-				signals['control-updated'].dispatch( values );
-			}
-		}
-
-		function updateInput( input, value )
-		{
-			if ( input.value !== value )
-			{
-				input.value = value;
-			}
-		}
-
-		function getCorrespondingInput( id )
-		{
-			var result;
-			var key = getInputKey( id );
-			var element_id;
-
-			for ( var i = 0, len = controls.length; i < len; i++ )
-			{
-				element_id = controls[i].id;
-
-				if (
-					element_id !== id &&
-					element_id.indexOf( key ) !== -1
-				)
-				{
-					result = controls[i];
-					break;
-				}
-			}
-
-			return result;
-		}
-
-		function getInputKey( id )
-		{
-			return id.replace( '-slider', '' ).replace( '-number', '' );
-		}
-
-		return { init: init };
-	}
-);
--- a/scripts/src/dragdrop.js
+++ b/scripts/src/dragdrop.js
@ -1,43 +0,0 @@
-/*global define*/
-define(
-	function()
-	{
-		var signals;
-		var feature;
-
-		function init( shared )
-		{
-			feature = shared.feature;
-			signals = shared.signals;
-
-			if ( feature['drag-drop' ] )
-			{
-				document.addEventListener( 'drop', dropped, false );
-				document.addEventListener( 'dragover', preventDefault, false );
-				document.addEventListener( 'dragleave', preventDefault, false );
-			}
-		}
-
-		function preventDefault( event )
-		{
-			event.preventDefault();
-		}
-
-		function dropped( event )
-		{
-			event.preventDefault();
-
-			if (
-				event.dataTransfer &&
-				event.dataTransfer.files &&
-				event.dataTransfer.files[0]
-			)
-			{
-				signals['load-file'].dispatch( event.dataTransfer.files[0] );
-				signals['close-intro'].dispatch();
-			}
-		}
-
-		return { init: init };
-	}
-);
--- a/scripts/src/export-button.js
+++ b/scripts/src/export-button.js
@ -1,87 +0,0 @@
-/*global define*/
-define(
-	function()
-	{
-		var signals;
-		var export_button;
-		var png_link;
-		var default_file_name;
-		var file_name;
-		var download_file_name;
-		var file_suffix = '.png';
-		var file_suffix_regex = /(\.)(jpg|jpeg|png|gif|bmp)/ig;
-		var parameters;
-
-		function init( shared )
-		{
-			signals = shared.signals;
-			export_button = document.getElementById( 'export-button' );
-			png_link = document.getElementById( 'png-button' );
-			default_file_name = png_link.getAttribute( 'download' ).replace( file_suffix_regex, '' );
-			file_name = default_file_name;
-			download_file_name = default_file_name;
-
-			export_button.addEventListener( 'click', exportButtonClicked, false );
-			png_link.addEventListener( 'click', hidePNGLink, false );
-
-			signals['load-file'].add( updateFileName );
-			signals['load-file'].add( updateDownloadFileName );
-			signals['control-updated'].add( updateParameters );
-			signals['control-updated'].add( updateDownloadFileName );
-		}
-
-		function exportButtonClicked( event )
-		{
-			event.preventDefault();
-
-			signals['image-data-url-requested'].dispatch( updatePNGLinkAddress );
-		}
-
-		function updateFileName( file )
-		{
-			if (
-				file &&
-				typeof file.name === 'string'
-			)
-			{
-				file_name = file.name.replace( file_suffix_regex, '' );
-			}
-		}
-
-		function updateParameters( new_parameters )
-		{
-			parameters = new_parameters || parameters;
-		}
-
-		function updateDownloadFileName()
-		{
-			download_file_name = file_name + '-glitched-' + objToString( parameters ) + file_suffix;
-		}
-
-		function updatePNGLinkAddress( data_url )
-		{
-			png_link.href = data_url;
-			png_link.setAttribute( 'download', download_file_name );
-			png_link.classList.add( 'is-active' );
-		}
-
-		function hidePNGLink()
-		{
-			png_link.classList.remove( 'is-active' );
-		}
-
-		function objToString( obj )
-		{
-			var result = [ ];
-
-			for ( var key in obj )
-			{
-				result.push( key[0] + '' + obj[key] );
-			}
-
-			return result.join( '-' );
-		}
-
-		return { init: init };
-	}
-);
--- a/scripts/src/file.js
+++ b/scripts/src/file.js
@ -1,42 +0,0 @@
-/*global define*/
-define(
-	function()
-	{
-		var signals;
-		var reader;
-		var feature;
-		var allowed_file_types = [ 'image/png', 'image/jpg', 'image/jpeg' ];
-
-		function init( shared )
-		{
-			signals = shared.signals;
-			feature = shared.feature;
-
-			if ( feature['file-api' ] )
-			{
-				signals['load-file'].add( loadFile );
-				reader = new FileReader();
-				reader.addEventListener( 'load', fileLoaded, false );
-			}
-		}
-
-		function loadFile( file )
-		{
-			if (
-				file &&
-				file.type &&
-				allowed_file_types.indexOf( file.type ) !== -1
-			)
-			{
-				reader.readAsDataURL( file );
-			}
-		}
-
-		function fileLoaded( event )
-		{
-			signals['set-new-src'].dispatch( event.target.result );
-		}
-
-		return { init: init };
-	}
-);
--- a/scripts/src/image.js
+++ b/scripts/src/image.js
@ -1,51 +0,0 @@
-/*global define*/
-define(
-	function()
-	{
-		var signals;
-		var image;
-		var initialized = false;
-		var defaultimage = document.body.getAttribute( 'data-defaultimage' );
-
-		function init( shared )
-		{
-			signals = shared.signals;
-			image = new Image();
-
-			signals['set-new-src'].add( setSrc );
-
-			image.addEventListener( 'load', imageLoaded, false );
-
-			// the image "Abraham Lincoln November 1863" is public domain:
-			// https://en.wikipedia.org/wiki/File:Abraham_Lincoln_November_1863.jpg
-			setSrc( defaultimage );
-		}
-
-		function imageLoaded()
-		{
-			signals['image-loaded'].dispatch( image );
-
-			if ( initialized ) {
-				signals['close-intro'].dispatch();
-			}
-
-			initialized = true;
-		}
-
-		function setSrc( src )
-		{
-			image.src = src;
-
-			if (
-				initialized &&
-				image.naturalWidth !== undefined &&
-				image.naturalWidth !== 0
-			)
-			{
-				setTimeout( imageLoaded, 10 );
-			}
-		}
-
-		return { init: init };
-	}
-);
--- a/scripts/src/import-button.js
+++ b/scripts/src/import-button.js
@ -1,59 +0,0 @@
-/*global define*/
-define(
-	[ 'util/trigger-event' ],
-	function( triggerEvent )
-	{
-		var feature;
-		var signals;
-		var import_button;
-		var import_input;
-		var file_reader;
-		var image;
-		var file_loading = false;
-
-		function init( shared )
-		{
-			signals = shared.signals;
-			feature = shared.feature;
-
-			// http://www.html5rocks.com/en/tutorials/file/dndfiles/
-			if ( feature['file-api' ] )
-			{
-				file_reader = new FileReader();
-
-				import_button = document.getElementById( 'import-button' );
-				import_input = document.getElementById( 'import-input' );
-
-				import_button.addEventListener( 'click', buttonClicked, false );
-				import_input.addEventListener( 'change', fileSelected, false );
-			}
-		}
-
-		function buttonClicked( event )
-		{
-			event.preventDefault();
-
-			if ( ! file_loading )
-			{
-				triggerEvent( import_input, 'click' );
-			}
-		}
-
-		function fileSelected( event )
-		{
-			var files = event.target.files;
-
-			if (
-				event.target &&
-				event.target.files &&
-				event.target.files[0]
-			)
-			{
-				signals['load-file'].dispatch( event.target.files[0] );
-				signals['close-intro'].dispatch();
-			}
-		}
-
-		return { init: init };
-	}
-);
--- a/scripts/src/intro.js
+++ b/scripts/src/intro.js
@ -1,55 +0,0 @@
-/*global define*/
-define(
-	function()
-	{
-		var signals;
-		var is_open = true;
-		var element = document.querySelectorAll( '.intro' )[0];
-		var button = document.querySelectorAll( '.intro-button' )[0];
-		var close_button = element.querySelectorAll( '.close' )[0];
-
-		function init( shared )
-		{
-			signals = shared.signals;
-			button.addEventListener( 'click', buttonClicked );
-			close_button.addEventListener( 'click', close );
-			signals['close-intro'].add( close );
-		}
-
-		function buttonClicked( event )
-		{
-			if ( is_open )
-			{
-				close();
-			}
-
-			else
-			{
-				open();
-			}
-		}
-
-		function open()
-		{
-			button.classList.add( 'is-active' );
-			element.classList.add( 'is-active' );
-			element.style.top = '0';
-			is_open = true;
-		}
-
-		function close()
-		{
-			button.classList.remove( 'is-active' );
-			element.classList.remove( 'is-active' );
-			element.style.top = -getHeight() + 'px';
-			is_open = false;
-		}
-
-		function getHeight()
-		{
-			return element.clientHeight;
-		}
-
-		return { init: init };
-	}
-);
--- a/scripts/src/process.js
+++ b/scripts/src/process.js
@ -1,123 +0,0 @@
-/*global define, requestAnimationFrame*/
-define(
-	[ 'lib/glitch-canvas', 'util/canvas', 'lib/raf' ],
-	function( glitch, canvas_helper )
-	{
-		var tmp_canvas = document.createElement( 'canvas' );
-		var tmp_ctx = tmp_canvas.getContext( '2d' );
-
-		var canvas = document.getElementById( 'canvas' );
-		var ctx = canvas.getContext( '2d' );
-
-		var is_processing = false;
-		var values;
-		var image;
-		var signals;
-		var image_data;
-		var canvas_size;
-
-		function init( shared )
-		{
-			signals = shared.signals;
-
-			signals['image-loaded'].add( generate );
-			signals['control-updated'].add( controlsUpdated );
-			signals['image-data-url-requested'].add( exportData );
-		}
-
-		function controlsUpdated( new_values )
-		{
-			values = getAdjustedValues( new_values );
-
-			update();
-		}
-
-		function generate( img )
-		{
-			if ( ! is_processing )
-			{
-				image = img;
-				resetCanvas( image );
-				updateImageData( image );
-				processImage( image );
-			}
-		}
-
-		function requestTick()
-		{
-			if ( ! is_processing )
-			{
-				requestAnimationFrame( update );
-			}
-
-			is_processing = true;
-		}
-
-		function update()
-		{
-			if ( image )
-			{
-				processImage( image );
-			}
-
-			else
-			{
-				is_processing = false;
-			}
-		}
-
-		function updateImageData( img )
-		{
-			tmp_ctx.drawImage( img, 0, 0 );
-
-			image_data = tmp_ctx.getImageData( 0, 0, tmp_canvas.width, tmp_canvas.height );
-		}
-
-		function resetCanvas( img )
-		{
-			canvas_helper.clear( tmp_canvas, tmp_ctx );
-			canvas_helper.resize( tmp_canvas, img );
-			canvas_helper.clear( canvas, ctx );
-			canvas_helper.resize( canvas, img );
-		}
-
-		function processImage( img )
-		{
-			is_processing = true;
-
-			glitch( image_data, values, draw );
-		}
-
-		function draw( glitched_image_data )
-		{
-			ctx.putImageData( glitched_image_data, 0, 0 );
-
-			is_processing = false;
-			glitched_image_data = null;
-		}
-
-		function exportData( callback )
-		{
-			if ( typeof callback === 'function' )
-			{
-				callback( canvas.toDataURL( 'image/png' ) );
-			}
-		}
-
-		function getAdjustedValues( new_values )
-		{
-			var result = { };
-
-			for ( var key in new_values )
-			{
-				result[key] = parseInt( new_values[key], 10 );
-			}
-
-			key = null;
-
-			return result;
-		}
-
-		return { init: init };
-	}
-);
--- a/scripts/src/random-button.js
+++ b/scripts/src/random-button.js
@ -1,66 +0,0 @@
-/*global define*/
-define(
-	function()
-	{
-		var signals;
-		var controls;
-		var random_button;
-		var constraints = { };
-
-		function init( shared )
-		{
-			signals = shared.signals;
-
-			if ( shared.feature['query-selector-all'] )
-			{
-				controls = document.querySelectorAll( '.control-slider' );
-				constraints = getConstraints( controls );
-				random_button = document.getElementById( 'random-button' );
-
-				random_button.addEventListener( 'click', buttonClicked, false );
-				random_button.classList.remove( 'is-hidden' );
-			}
-		}
-
-		function buttonClicked( event )
-		{
-			event.preventDefault();
-			randomize();
-		}
-
-		function randomize()
-		{
-			var new_values = { };
-			var constraint;
-
-			for ( var id in constraints )
-			{
-				constraint = constraints[id];
-				new_values[id] = getRandomInt( constraint.min, constraint.max );
-			}
-
-			signals['control-set'].dispatch( new_values );
-		}
-
-		function getConstraints( controls )
-		{
-			var result = { };
-			var control;
-
-			for ( var i = 0, len = controls.length; i < len; i++ )
-			{
-				control = controls[i];
-				result[control.id] = { min: parseInt( control.min, 10 ), max: parseInt( control.max, 10 ) };
-			}
-
-			return result;
-		}
-
-		function getRandomInt( min, max )
-		{
-			return Math.floor( Math.random() * ( max - min + 1 ) ) + min;
-		}
-
-		return { init: init };
-	}
-);
--- a/scripts/src/upload-imgur.js
+++ b/scripts/src/upload-imgur.js
@ -1,139 +0,0 @@
-/*global define*/
-define(
-	[ 'lib/reqwest' ],
-	function( reqwest, $ )
-	{
-		var signals;
-		var imgur_button;
-		var imgur_url_container;
-		var imgur_url_input;
-		var imgur_url_link;
-		var imgur_url_error;
-		var twitter_link;
-		var facebook_link;
-		var reddit_link;
-		var is_uploading = false;
-		var is_showing_links = false;
-
-		function init( shared )
-		{
-			signals = shared.signals;
-			imgur_button = document.getElementById( 'imgur-button' );
-			imgur_url_container = document.getElementById( 'imgur-url-container' );
-			imgur_url_input = document.getElementById( 'imgur-url-input' );
-			imgur_url_link = document.getElementById( 'imgur-url-link' );
-			imgur_url_error = document.getElementById( 'imgur-url-error' );
-			twitter_link = document.getElementById( 'twitter-link' );
-			facebook_link = document.getElementById( 'facebook-link' );
-			reddit_link = document.getElementById( 'reddit-link' );
-
-			imgur_button.addEventListener( 'click', buttonClicked, false );
-			imgur_url_input.addEventListener( 'click', selectInput, false );
-
-			signals['control-updated'].add( controlsUpdated );
-		}
-
-		function buttonClicked( event )
-		{
-			event.preventDefault();
-
-			if ( ! is_uploading )
-			{
-				signals['image-data-url-requested'].dispatch( upload );
-
-				imgur_url_container.classList.remove( 'is-active', 'upload-failed', 'upload-successful' );
-			}
-		}
-
-		function selectInput()
-		{
-			imgur_url_input.select();
-		}
-
-		//http://stackoverflow.com/questions/17805456/upload-a-canvas-image-to-imgur-api-v3-with-javascript
-		function upload( data_url )
-		{
-			if ( ! is_uploading )
-			{
-				imgur_button.classList.add( 'is-uploading' );
-
-				is_uploading = true;
-				
-				reqwest(
-					{
-						url: 'https://api.imgur.com/3/image.json',
-						method: 'POST',
-						headers: {
-							Authorization: 'Client-ID a4c24380d884932'
-						},
-						data: {
-							image: data_url.split( ',' )[1],
-							type: 'base64'
-						},
-						type: 'json',
-						crossOrigin: true,
-						success: imageUploaded,
-						error: uploadFailed
-					}
-				);
-			}
-		}
-
-		function imageUploaded( response )
-		{
-			is_uploading = false;
-			
-			if ( response && response.data && response.data.link )
-			{
-				var twitter_share_url_text = "Check out what I made with @snorpey’s glitch tool: ";
-				twitter_share_url_text += response.data.link;
-				twitter_share_url_text += ' http://snorpey.github.io/jpg-glitch';
-
-				//http://ar.zu.my/how-to-really-customize-the-deprecated-facebook-sharer-dot-php/
-				var facebook_share_url = 'https://www.facebook.com/sharer/sharer.php?s=100';
-				facebook_share_url += '&p[url]=' + response.data.link;
-				facebook_share_url += '&p[title]=Glitch!';
-				facebook_share_url += '&p[images][0]=' + response.data.link;
-				facebook_share_url += '&p[summary]=' + encodeURIComponent( 'Check out what I made with this glitch tool: http://snorpey.github.io/jpg-glitch' );
-
-				imgur_button.classList.remove( 'is-uploading' );
-				imgur_url_input.setAttribute( 'value', response.data.link );
-				imgur_url_link.href = response.data.link;
-				imgur_url_container.classList.add( 'is-active', 'upload-successful' );
-
-				twitter_link.href = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent( twitter_share_url_text );
-				facebook_link.href = facebook_share_url;
-				reddit_link.href = 'https://www.reddit.com/submit?url=' + encodeURIComponent( response.data.link ) + '&title=Glitch!';
-
-				is_showing_links = true;
-			}
-			
-			else
-			{
-				uploadFailed();
-			}
-		}
-
-		function uploadFailed( response )
-		{
-			is_uploading = false;
-			imgur_button.classList.remove( 'is-uploading' );
-			imgur_url_container.classList.add( 'is-active', 'upload-failed' );
-		}
-
-		function controlsUpdated()
-		{
-			if ( is_showing_links )
-			{
-				imgur_url_container.classList.remove( 'is-active' );
-				imgur_url_container.classList.remove( 'upload-failed' );
-				imgur_url_container.classList.remove( 'upload-successful' );
-				imgur_button.classList.remove( 'is-uploading' );
-
-				is_showing_links = false;
-			}
-		}
-
-		return { init: init };
-	}
-);
--- a/scripts/util/addpublishers.js
+++ b/scripts/util/addpublishers.js
@ -0,0 +1,128 @@
+/*global define*/
+define(
+	[ 'util/object' ],
+	function ( objectHelper ) {
+		// adds publishers to an object that
+		// other objects can subscribe to.
+		// only the trigger object can
+		// publish new messages
+		// eg: trigger = addPublushers( obj1, 'test' );
+		// obj1.on( 'test', obj2.doStuff );
+		// trigger.test.dispatch( 'YOLO' );
+		
+		function addPublishers () {
+			var publishers = { };
+			var allowedKeys = [ ];
+			var args = Array.prototype.slice.call( arguments );
+			var obj = args.shift();
+
+			if ( obj && args.length ) {
+				args.forEach( addKey );
+			}
+
+			allowedKeys.forEach( function ( key ) {
+				if ( ! obj[key] ) {
+					obj[key] = { };
+				}
+
+				obj[key].dispatch = function () {
+					dispatch.apply( dispatch, [ key ].concat( Array.prototype.slice.call( arguments ) ) );
+				};
+
+				if ( ! publishers[key] ) {
+					publishers[key] = [ ];
+				}
+
+				publishers[key].dispatch = function () {
+					dispatch.apply( dispatch, [ key ].concat( Array.prototype.slice.call( arguments ) ) );
+				};
+			} );
+
+			function addKey ( newItem ) {
+				var newKeys = [ ];
+				var existingKeys = Object.keys( obj );
+
+				if ( typeof newItem === 'string' ) {
+					newKeys = newKeys.concat( newItem.split( ' ' ) );
+				}
+
+				if ( Array.isArray( newItem ) ) {
+					newKeys = newKeys.concat( newItem );
+				}
+
+				newKeys = newKeys.filter( function ( key ) {
+					if (
+						existingKeys.indexOf( key ) === -1 &&
+						allowedKeys.indexOf( key ) === -1
+					) {
+						return true;
+					} else {
+						return false;
+					}
+				} );
+
+				allowedKeys = allowedKeys.concat( newKeys );
+			}
+
+			function on ( key, fn ) {
+				// on( 'my.sub.ev' ) -> obj.my.sub.on( 'ev' );
+				if ( typeof key === 'string' && key.indexOf( '.' ) !== -1 ) {
+					var keyArr = key.split( '.' );
+					var key = keyArr.pop();
+					var subObj = objectHelper.getObjectByString( keyArr.join( '.' ), obj );
+
+					if ( subObj && typeof subObj.on === 'function' ) {
+						subObj.on( key, fn );
+					}
+				} else {
+					if ( isKeyAllowed( key ) && typeof fn === 'function' ) {
+						publishers[key].push( fn );
+					}
+				}
+
+				return obj;
+			}
+
+			function off ( key, fn ) {
+				if (
+					typeof key === 'string' &&
+					typeof fn === 'function' &&
+					publishers[key]
+				) {
+					for ( var i = publishers[key].length; i >= 0; i-- ) {
+						if ( publishers[key][i] === fn ) {
+							publishers[key].splice( i, 1 );
+						}
+					}
+				}
+
+				return obj;
+			}
+
+			function dispatch ( key ) {
+				// http://debuggable.com/posts/turning-javascript-s-arguments-object-into-an-array:4ac50ef8-3bd0-4a2d-8c2e-535ccbdd56cb
+				var args = Array.prototype.slice.call( arguments ).slice( 1 );
+
+				if ( Array.isArray( publishers[key] ) ) {
+					publishers[key].forEach( function ( fn ) {
+						fn.apply( fn, args );
+					} );
+				}
+
+				return obj;
+			}
+
+			function isKeyAllowed ( key ) {
+				return allowedKeys ? allowedKeys.indexOf( key ) > -1 : true;
+			}
+
+			publishers.dispatch = dispatch;
+			obj.on = on;
+			obj.off = off;
+
+			return publishers;
+		}
+
+		return addPublishers;
+	}
+);
--- a/scripts/util/browser.js
+++ b/scripts/util/browser.js
@ -0,0 +1,80 @@
+/*global define*/
+define(
+	[ 'util/string' ],
+	function ( strUtil ) {
+
+		var prefixes = [ 'webkit', 'moz', 'ms', 'o' ];
+		var results = { };
+
+		var tests = {
+			getusermedia: function () {
+				return navigator.getUserMedia = (
+					navigator.getUserMedia ||
+					navigator.webkitGetUserMedia ||
+					navigator.mozGetUserMedia ||
+					navigator.msGetUserMedia
+				);
+			},
+			fullscreen: function () {
+				return !! (
+					getFeature( document, 'fullScreenEnabled' ) ||
+					getFeature( document, 'fullscreenEnabled' )
+				);
+			},
+			browserdb: function() {
+				return (
+					getFeature( window, 'indexedDB' ) ||
+					getFeature( window, 'openDatabase' )
+				);
+			},
+			browserstorage: function() {
+				return (
+					test( 'browserdb' ) ||
+					getFeature( window, 'localStorage' )
+				);
+			},
+			draganddrop: function () { return 'draggable' in document.createElement( 'span' ); },
+			touch: function () { return !!( 'ontouchstart' in window ); },
+			webworker: function () { return !! ( 'Worker' in window ); },
+			promise: function () { return !! ( 'Promise' in window ); },
+			localforage: function () { 
+				return ( test( 'promise' ) && test( 'browserstorage' ) );
+			},
+			safari: function () { return /^((?!chrome|android).)*safari/i.test( navigator.userAgent ); }
+		};
+
+		function test ( featureName ) {
+			if ( typeof results[featureName] !== 'undefined' ) {
+				return results[featureName];
+			} else {
+				results[featureName] = tests[featureName] ? tests[featureName]() : false;
+				return results[featureName];
+			}
+		}
+
+		function getFeature ( obj, propertyName ) {
+			var result = testProperty( obj, propertyName );
+
+			if ( ! result ) {
+				for ( var i = 0, len = prefixes.length; i < len; i++ ) {
+					if ( ! result ) {
+						result = testProperty( obj, strUtil.toCamelCase( prefixes[i] + '-' + propertyName ) );
+					} else {
+						break;
+					}
+				}
+			}
+
+			return result;
+		}
+
+		function testProperty ( obj, propertyName ) {
+			return obj[propertyName];
+		}
+
+		return {
+			getFeature: getFeature,
+			test: test
+		};
+	}
+);
--- a/scripts/util/canvas.js
+++ b/scripts/util/canvas.js
@ -1,38 +1,85 @@
 /*global define*/
 define(
-	function()
-	{
-		var update = false;
+	function () {
+		var canvas = document.createElement( 'canvas' );
+		var ctx = canvas.getContext( '2d' );

-		function resize( canvas, size )
-		{
+		function resizeImage ( content, size, callback, returnType ) {
+			var image = new Image();
+			var scale = 1;
+			var isImageData = false;
+			var isString = false;

-			if ( canvas.width !== size.width )
-			{
-				canvas.width = size.width;
-				update = true;
+			image.addEventListener( 'load', imageLoaded );
+
+			// url
+			if ( typeof content === 'string' ) {
+				isString = true;
+				image.src = content;
 			}

-			if ( canvas.height !== size.height )
-			{
-				canvas.height = size.height;
-				update = true;
+			// imagedata
+			if ( content.width && content.height && content.data && content.data.length ) {
+				isImageData = true;
+				canvas.width = content.width;
+				canvas.height = content.height;
+
+				scale = Math.min(
+					size.width / content.width,
+					size.height / content.height
+				);
+
+				ctx.putImageData( content, 0, 0 );
+				image.src = canvas.toDataURL( 'image/png', 1 );
 			}

-			if ( update )
-			{
+			if ( ! isString && ! isImageData ) {
+				callback( false );
+			}
+
+			function imageLoaded () {
+				if ( isString && image.src === content ) {
+					// src loaded
+					canvas.width = image.naturalWidth;
+					canvas.height = image.naturalHeight;
+						
+					scale = Math.min(
+						size.width / image.naturalWidth,
+						size.height / image.naturalHeight
+					);
+
+					ctx.drawImage( image, 0, 0 );
+					image.src = canvas.toDataURL( 'image/png', 1 );
+				} else {
+					// imageData loaded
 					canvas.width = size.width;
 					canvas.height = size.height;
+
+					ctx.scale( scale, scale );
+					ctx.drawImage( image, 0, 0 );
+
+					if ( returnType === 'both' ) {
+						callback( {
+							dataURL: canvas.toDataURL( 'image/png', 1 ),
+							imageData: ctx.getImageData( 0, 0, canvas.width, canvas.height )
+						} );
+					} else {
+						if ( isString || returnType === 'asDataURL' ) {
+							callback( canvas.toDataURL( 'image/png', 1 ) );
+						} else {
+							if ( isImageData || returnType === 'asImageData' ) {
+								callback( ctx.getImageData( 0, 0, canvas.width, canvas.height ) );
+							} else {
+								callback();
+							}
+						}
+					}
+				}
+			}
 		}

-			update = false;
-		}
-
-		function clear( canvas, ctx )
-		{
-			ctx.clearRect( ctx, 0, 0, canvas.width, canvas.height );
-		}
-
-		return { resize: resize, clear: clear };
+		return {
+			resizeImage: resizeImage
+		};
 	}
 );
--- a/scripts/util/css.js
+++ b/scripts/util/css.js
@ -0,0 +1,43 @@
+/*global define*/
+define(
+	function () {
+		function getCSSMatrix ( el ) {
+			var style = window.getComputedStyle( el );
+
+			return style.getPropertyValue( '-webkit-transform' ) ||
+				   style.getPropertyValue( '-moz-transform' ) ||
+				   style.getPropertyValue( '-ms-transform' ) ||
+				   style.getPropertyValue( '-o-transform' ) ||
+				   style.getPropertyValue( 'transform' );
+		}
+
+		function cssMatrixToTransformObj ( matrix ) {
+			// this happens when there was no rotation yet in CSS
+			if ( matrix === 'none' ) {
+				matrix = 'matrix(0,0,0,0,0)';
+			}
+			
+			var obj = { };
+			var values = matrix.match( /([-+]?[\d\.]+)/g );
+
+			obj.rotate = ( Math.round(
+				Math.atan2(
+					parseFloat( values[1] ), 
+					parseFloat( values[0] ) ) * ( 180 / Math.PI )
+				) || 0
+			).toString() + 'deg';
+			
+			obj.translateStr = values[5] ? values[4] + 'px, ' + values[5] + 'px' : ( values[4] ? values[4] + 'px' : '' );
+			
+			obj.translateX = parseFloat( values[4] );
+			obj.translateY = values[5] ? parseFloat( values[5] ) : 0;	
+			
+			return obj;
+		}
+
+		return {
+			getCSSMatrix: getCSSMatrix,
+			cssMatrixToTransformObj: cssMatrixToTransformObj
+		}
+	}
+);
--- a/scripts/util/dom.js
+++ b/scripts/util/dom.js
@ -0,0 +1,37 @@
+/*global define*/
+define(
+	function () {
+		function setTransform ( el, transformStr ) {
+			el.style.transform = el.style.webkitTransform = el.style.msTransform = transformStr;
+		}
+		
+		// http://stackoverflow.com/a/2234986/229189
+		function isDescendant ( parent, child ) {
+			var node = child.parentNode;
+			
+			while ( node != null ) {
+				if ( node == parent ) {
+					return true;
+				}
+				
+				node = node.parentNode;
+			}
+			
+			return false;
+		}
+
+		// http://stackoverflow.com/a/384380/229189    
+		function isElement ( obj ) {
+			return (
+		    	typeof HTMLElement === 'object' ? obj instanceof HTMLElement :
+				obj && typeof obj === 'object' && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === 'string'
+			);
+		}
+
+		return {
+			setTransform: setTransform,
+			isDescendant: isDescendant,
+			isElement: isElement
+		};
+	}
+);
--- a/scripts/util/el.js
+++ b/scripts/util/el.js
@ -0,0 +1,107 @@
+/*global define*/
+define(
+	[ 'util/dom', 'util/localizeText' ],
+	function ( domHelper, loc ) {
+		var svgEls = [ 'g', 'svg', 'rect' ];
+		var svgNameSpace = 'http://www.w3.org/2000/svg';
+
+		function createEl ( elementStr, cssClasses, parentEl ) {
+			var hasNameSpace = svgEls.indexOf( elementStr ) !== -1;
+			var el = hasNameSpace ? document.createElementNS( svgNameSpace, elementStr ) : document.createElement( elementStr );
+
+			if ( hasNameSpace ) {
+				document.createElementNS( 'http://www.w3.org/2000/svg', 'rect' );
+			}
+
+			cssClasses = typeof cssClasses === 'string' ? [ ].concat( cssClasses.split( ' ' ) ) : cssClasses;
+
+			if ( Array.isArray( cssClasses ) ) {
+				cssClasses.forEach( function ( cssClass ) {
+					el.classList.add( cssClass );
+				} );
+			}
+
+			if ( parentEl && parentEl.appendChild ) {
+				parentEl.appendChild( el );
+			}
+
+			return el;
+		}
+
+		function createButton ( content, title, cssClasses, parentEl, onClick ) {
+			var btnEl = createEl( 'button', cssClasses, parentEl );
+
+			if ( typeof content === 'string' ) {
+				// btnEl.textContent = content;
+				loc( btnEl, 'textContent', content );
+			} else {
+				if ( domHelper.isElement( content ) ) {
+					btnEl.appendChild( content );
+				}
+			}
+
+			// btnEl.title = title;
+			loc( btnEl, 'title', title );
+
+			if ( typeof onClick === 'function' ) {
+				btnEl.addEventListener( 'click', onClick );
+			}
+
+			return btnEl;
+		}
+
+		function createLink ( content, title, href, target, cssClasses, parentEl ) {
+			var linkEl = createEl( 'a', cssClasses, parentEl );
+
+			if ( typeof content === 'string' ) {
+				// linkEl.textContent = content;
+				loc( linkEl, 'textContent', content );
+			} else {
+				if ( domHelper.isElement( content ) ) {
+					linkEl.appendChild( content );
+				}
+			}
+
+			if ( title ) {
+				// linkEl.title = title;
+				loc( linkEl, 'title', title );
+			}
+			
+			if ( href ) {
+				linkEl.href = href;
+			}
+
+			if ( target ) {
+				linkEl.target = target;
+			}
+
+			return linkEl;
+		}
+
+		function createLabel ( content, forId, cssClasses, parentEl ) {
+			var labelEl = createEl( 'label', cssClasses, parentEl );
+
+			if ( typeof content === 'string' ) {
+				// labelEl.textContent = content;
+				loc( labelEl, 'textContent', content );
+			} else {
+				if ( domHelper.isElement( content ) ) {
+					labelEl.appendChild( content );
+				}
+			}
+
+			if ( forId ) {
+				labelEl.setAttribute( 'for', forId );
+			}
+
+			return labelEl;
+		}
+
+		return {
+			createEl: createEl,
+			createButton: createButton,
+			createLink: createLink,
+			createLabel: createLabel
+		}
+	}
+);
--- a/scripts/util/feature-test.js
+++ b/scripts/util/feature-test.js
@ -1,48 +0,0 @@
-/*global define*/
-define(
-	function()
-	{
-		var tests = {
-			'canvas': { required: true, test: function(){ return !! document.createElement('canvas').getContext; } },
-			'query-selector-all': { required: false, test: function(){ return !! document.querySelectorAll; } },
-			'drag-drop': { required: false, test: function(){ return 'draggable' in document.createElement('span'); } },
-			'file-api': { required: false, test: function(){ return typeof FileReader !== 'undefined'; } }
-		};
-
-		function test( success, error )
-		{
-			var required_supported = true;
-			var results = { };
-			var required_features_missing = [ ];
-
-			for ( var key in tests )
-			{
-				var result = tests[key].test();
-
-				if ( ! result )
-				{
-					if ( tests[key].required )
-					{
-						required_supported = false;
-
-						required_features_missing.push( key );
-					}
-				}
-
-				results[key] = result;
-			}
-
-			if ( required_supported )
-			{
-				success( results );
-			}
-
-			else
-			{
-				error( required_features_missing, results );
-			}
-		}
-
-		return test;
-	}
-);
--- a/scripts/util/localizetext.js
+++ b/scripts/util/localizetext.js
@ -0,0 +1,11 @@
+/*global define*/
+define(
+	[ 'models/localisationmodel' ],
+	function ( LocalisationModel ) {
+		function loc () {
+			return LocalisationModel.sharedInstance.localizeText.apply( LocalisationModel.sharedInstance, arguments );
+		}
+
+		return loc;
+	}
+);
--- a/scripts/util/math.js
+++ b/scripts/util/math.js
@ -0,0 +1,22 @@
+/*global define*/
+define(
+	function () {
+		function mapRange ( value, inMin, inMax, outMin, outMax, clampResult ) {
+			var result = ( ( value - inMin ) / ( inMax - inMin ) * ( outMax - outMin ) + outMin );
+
+			if ( clampResult ) {
+				if ( outMin > outMax ) {
+					result = Math.min( Math.max( result, outMax ), outMin );
+				} else {
+					result = Math.min( Math.max( result, outMin ), outMax );
+				}
+			}
+
+			return result;
+		}
+
+		return {
+			mapRange: mapRange
+		};
+	}
+);
--- a/scripts/util/mediastream.js
+++ b/scripts/util/mediastream.js
@ -0,0 +1,24 @@
+/*global define*/
+define(
+	function () {
+		// http://stackoverflow.com/a/11646945
+		var MediaStream = window.MediaStream;
+
+		if ( typeof MediaStream === 'undefined' && typeof webkitMediaStream !== 'undefined' ) {
+			MediaStream = webkitMediaStream;
+		}
+
+		/*global MediaStream:true */
+		if ( typeof MediaStream !== 'undefined' && !( 'stop' in MediaStream.prototype ) ) {
+			MediaStream.prototype.stop = function () {
+				this.getAudioTracks().forEach( function ( track ) {
+					track.stop();
+				} );
+
+				this.getVideoTracks().forEach( function ( track ) {
+					track.stop();
+				} );
+			};
+		}
+	}
+)
--- a/scripts/util/object.js
+++ b/scripts/util/object.js
@ -0,0 +1,35 @@
+/*global define*/
+define(
+	function () {
+		// http://stackoverflow.com/a/6491621/229189
+		function getObjectByString ( str, obj ) {
+			if ( typeof str === 'string' ) {
+				str = str.replace( /\[(\w+)\]/g, '.$1' ); // convert indexes to properties
+				str = str.replace( /^\./, '' );           // strip a leading dot
+
+				var keys = str.split( '.' );
+
+				for ( var i = 0, len = keys.length; i < len; ++i ) {
+					var key = keys[i];
+					
+					if ( key in obj ) {
+						obj = obj[key];
+					} else {
+						return;
+					}
+				}
+			}
+
+			return obj;
+		}
+
+		function getCopy ( obj ) {
+			return JSON.parse( JSON.stringify( obj ) );
+		}
+
+		return {
+			getObjectByString: getObjectByString,
+			getCopy: getCopy
+		};
+	}
+);
--- a/scripts/util/string.js
+++ b/scripts/util/string.js
@ -0,0 +1,79 @@
+/*global define*/
+define(
+	function () {
+		function toCamelCase ( str ) {
+			// if array was passed
+			if ( str && Array.isArray( str ) ) {
+				str = str.join( ' ' );
+			}
+
+			var parts = str.split( /(-|\s|_)/gmi );
+			var result = '';
+
+			parts.forEach( function ( item, index ) {
+				if ( ! item.match( /(-|\s|_)/gmi ) ) {
+					if ( index > 0 && item.length > 1 ) {
+						result += item.charAt( 0 ).toUpperCase() + item.slice( 1 );
+					} else {
+						result += item;
+					}
+				}
+			} );
+
+			return result;
+		}
+
+		function markdownToHtml ( str, options ) {
+			return autop(
+				markdownLinksToHtml( str, options.links ),
+				options.autop
+			);
+		}
+
+		function markdownLinksToHtml ( str, options ) {
+			var attributes = [ ];
+			var attributeStr = '';
+
+			if ( options ) {
+				if ( options.newTab ) {
+					attributes.push( 'target="_blank"' );
+				}
+
+				if ( options.cssClasses ) {
+					attributes.push( 'class="' + cssClasses + '"' );
+				}
+			}
+
+			attributeStr = attributes.length ? ' ' + attributes.join( ' ' ) : '';
+									
+			var linkHTML = '<a href="$2"' + attributeStr + '>$1</a>';
+
+			return str
+				.replace( /\\n/gm, '\n')
+				.replace( /\[(.*?)\]\((.+?)\)/g, linkHTML );
+		}
+
+		function autop ( str, options ) {
+			var tag = ( options && options.tag ) ? options.tag : 'p';
+			var lineBreakTag = ( options && options.linebreak ) ? '<' + options.linebreak + '>' : '<br />';
+			var startTag = '<' + tag + '>';
+			var endTag = '</' + tag + '>';
+
+			if ( options && options.cssClasses && typeof options.cssClasses === 'string' ) {
+				startTag = '<' + tag + ' class="' + options.cssClasses + '">';
+			}
+
+			return startTag + str
+				.replace( /\n{2}/g, '&nbsp;' + endTag + startTag )
+				.replace(/\n/g, '&nbsp;' + lineBreakTag ) +
+			endTag;
+		}
+
+		return {
+			toCamelCase: toCamelCase,
+			autop: autop,
+			markdownToHtml: markdownToHtml,
+			markdownLinksToHtml: markdownLinksToHtml
+		};
+	}
+)
--- a/scripts/util/time.js
+++ b/scripts/util/time.js
@ -0,0 +1,82 @@
+/*global define*/
+define(
+	function () {
+		var lang = navigator.language || navigator.userLanguage || 'en-us';
+		var intlIsSupported = !! window.Intl;
+
+		function dateToStr ( date ) {
+			return date.toISOString();
+		}
+
+		function timestampToDate ( str ) {
+			return new Date( parseInt( str, 10 ) );
+		}
+
+		function dateTimeToLocalStr ( date ) {
+			if (
+				intlIsSupported &&
+				Intl.DateTimeFormat.supportedLocalesOf( [ lang ] ).length &&
+				date.toLocaleDateString &&
+				date.toLocaleTimeString
+			) {
+				return date.toLocaleDateString( lang ) + ' ' + date.toLocaleTimeString( lang );
+			} else {
+				return dateToLocalStr( date ) + ' ' + timeToLocalStr( date );
+			}
+		}
+
+		function dateToLocalStr ( date ) {
+			if (
+				intlIsSupported &&
+				Intl.DateTimeFormat.supportedLocalesOf( [ lang ] ).length &&
+				date.toLocaleDateString
+			) {
+				return date.toLocaleDateString( lang );
+			} else {
+				if ( navigator.language.toLowerCase() === 'en-us' ) {
+					return ( date.getMonth() + 1 ) + '/' + date.getDate() + '/' + date.getFullYear();
+				} else {
+					return ( date.getDate() + '.' + date.getMonth() + 1 ) + '.' + date.getFullYear();
+				}
+			}
+		}
+
+		function timeToLocalStr ( date ) {
+			if (
+				intlIsSupported &&
+				Intl.DateTimeFormat.supportedLocalesOf( [ lang ] ).length &&
+				date.toLocaleTimeString
+			) {
+				return date.toLocaleTimeString( lang );
+			} else {
+				var hours = date.getHours();
+				var minutes = date.getMinutes();
+
+				if ( hours < 10 ) {	hours = '0' + hours; }
+				if ( minutes < 10 ) { minutes = '0' + minutes; }
+
+				if ( navigator.language.toLowerCase().indexOf( 'en' ) >= 0 ) {
+					var amPm = 'AM';
+
+					if ( hours > 12 ) {
+						hours -= 12;
+						amPm = 'PM';
+					}
+
+					return hours + ':' + minutes + ' ' + amPm;
+
+				} else {
+					return hours + ':' + minutes;
+				}
+			}
+		}
+
+		return {
+			dateToStr: dateToStr,
+			dateToLocalStr: dateToLocalStr,
+			timeToLocalStr: timeToLocalStr,
+			dateTimeToLocalStr: dateTimeToLocalStr,
+			timestampToDate: timestampToDate
+		};
+	}
+);
--- a/scripts/util/trigger-event.js
+++ b/scripts/util/trigger-event.js
@ -1,71 +0,0 @@
-/*global define*/
-define(
-	function()
-	{
-		// http://stackoverflow.com/a/2381862/229189
-		function triggerEvent( node, event_name )
-		{
-			var doc;
-
-			if ( node.ownerDocument )
-			{
-				doc = node.ownerDocument;
-			}
-
-			else if ( node.nodeType === 9 )
-			{
-				doc = node;
-			}
-
-			else
-			{
-				throw new Error('Invalid node passed to fireEvent: ' + node.id);
-			}
-
-			if ( node.fireEvent )
-			{
-				// IE-style
-				var event = doc.createEventObject();
-
-				event.synthetic = true;
-
-				node.fireEvent( 'on' + event_name, event );
-			}
-
-			else if ( node.dispatchEvent )
-			{
-				var event_class = '';
-
-				switch ( event_name )
-				{
-					case 'click':
-					case 'mousedown':
-					case 'mouseup':
-						event_class = 'MouseEvents';
-						break;
-
-					case 'focus':
-					case 'change':
-					case 'blur':
-					case 'select':
-						event_class = 'HTMLEvents';
-						break;
-
-					default:
-						throw 'triggerEvent: Couldn’t find an event class for event ' + event_name + '.';
-						break;
-				}
-
-				var event = doc.createEvent( event_class );
-				var bubbles = event_name == 'change' ? false : true;  
-				
-				event.initEvent( event_name, bubbles, true );
-
-				event.synthetic = true;
-				node.dispatchEvent( event );
-			}
-		}
-
-		return triggerEvent;
-	}
-);
--- a/scripts/views/aboutview.js
+++ b/scripts/views/aboutview.js
@ -0,0 +1,25 @@
+/*global define*/
+define(
+	[ 'util/el', 'views/dialog', 'models/localisationmodel', 'util/localizetext' ],
+	function ( elHelper, Dialog, Localisationmodel, loc ) {
+		function AboutView ( parentEl ) {
+			if ( ! ( this instanceof AboutView ) ) {
+				return new AboutView ( parentEl );
+			}
+
+			var self = this;
+			var buttonEl = elHelper.createButton( 'about.info', 'about.infotitle', 'nav-button info-button', parentEl );
+			var dialog = Dialog( 'about-dialog', parentEl, buttonEl );
+			var aboutEl = elHelper.createEl( 'div', 'about-content' );
+			var textEl = document.querySelector( '.description' );
+
+			loc( textEl, 'innerHTML', 'index.description' );
+			
+			aboutEl.appendChild( textEl );
+
+			dialog.add( aboutEl );
+		}
+
+		return AboutView;
+	}
+);
--- a/scripts/views/appview.js
+++ b/scripts/views/appview.js
@ -0,0 +1,34 @@
+/*global define*/
+define(
+	[ 'util/el' ],
+	function ( elHelper ) {
+		// the app view, wrapping element of the app
+		// also updates the html element classes
+		function AppView ( parentEl ) {
+			if ( ! ( this instanceof AppView ) ) {
+				return new AppView( parentEl );
+			}
+
+			var self = this;
+			var el = elHelper.createEl( 'div', 'app', parentEl );
+
+			function showOnlineOptions () {
+				document.documentElement.classList.add( 'is-online' );
+
+				return self;
+			}
+
+			function hideOnlineOptions () {
+				document.documentElement.classList.remove( 'is-online' );
+
+				return self;
+			}
+			
+			self.el = el;
+			self.showOnlineOptions = showOnlineOptions;
+			self.hideOnlineOptions = hideOnlineOptions;
+		}
+
+		return AppView;
+	}
+);
--- a/scripts/views/canvascontrolsview.js
+++ b/scripts/views/canvascontrolsview.js
@ -0,0 +1,71 @@
+/*global define*/
+define(
+	[ 'util/addpublishers', 'util/el' ],
+	function ( addPublishers, elHelper ) {
+		// the controls for the workspace at the bottom of the screen
+		// zoom range and center buttons
+		function CanvasControlsView ( parentEl ) {
+			if ( ! ( this instanceof CanvasControlsView ) ) {
+				return new CanvasControlsView( parentEl );
+			}
+
+			var self = this;
+			var publishers = addPublishers( self, 'update', 'center', 'scale' );
+			var isIgnoringInput = false;
+			var el = elHelper.createEl( 'div', 'workspace-controls clear', parentEl );
+
+			elHelper.createButton( 'controls.center', 'controls.centertitle', 'center-button button', el, centerButtonClicked );
+			elHelper.createButton( 'controls.original', 'controls.originaltitle', 'scale-to-original-button button', el, scaleToOriginalButtonClicked );
+			elHelper.createLabel( 'controls.zoom', 'control.zoomtitle', 'scale-label', el );
+
+			var scaleSliderEl = elHelper.createEl( 'input', 'scale-slider', el );
+			scaleSliderEl.id = 'zoom'
+			scaleSliderEl.type = 'range'
+			scaleSliderEl.min = 0.01;
+			scaleSliderEl.max = 5;
+			scaleSliderEl.step = 0.001;
+			scaleSliderEl.addEventListener( 'input', scaleSliderChanged );
+			scaleSliderEl.addEventListener( 'change', scaleSliderChanged );
+
+			function centerButtonClicked ( event ) {
+				publishers.center.dispatch();
+			}
+
+			function scaleSliderChanged ( event ) {
+				if ( ! isIgnoringInput ) {		
+					publishers.scale.dispatch( parseFloat( scaleSliderEl.value ) );
+					publishers.update.dispatch( 'scale', parseFloat( scaleSliderEl.value ) );
+				}
+			}
+
+			function scaleToOriginalButtonClicked ( event ) {
+				publishers.scale.dispatch( 1.00 );
+				publishers.update.dispatch( 'scale', 1.00 );
+			}
+
+			// when setting scale, prevent infinite
+			// loop by ignoring input element
+			function setScale ( scale ) {
+				isIgnoringInput = true;
+				scaleSliderEl.value = scale;
+				isIgnoringInput = false;
+
+				return self;
+			}
+
+			function setValue ( key, value ) {
+				if ( key === 'scale' ) {
+					setScale( value );
+				}
+
+				return self;
+			}
+
+			self.setScale = setScale;
+			self.setValue = setValue;
+			self.el = el;
+		}
+
+		return CanvasControlsView;
+	}
+)
--- a/scripts/views/canvasview.js
+++ b/scripts/views/canvasview.js
@ -0,0 +1,86 @@
+/*global define*/
+define(
+	[ 'util/addpublishers', 'util/el', 'views/panzoom' ],
+	function ( addPublishers, elHelper, PanZoom ) {
+		// canvasview: a wrapper for the PanZoom workspace element
+		function CanvasView ( parentEl, buttonParentEl ) {
+			if ( ! ( this instanceof CanvasView ) ) {
+				return new CanvasView( parentEl, buttonParentEl );
+			}
+
+			var self = this;
+			var publishers = addPublishers( self, 'update', 'imagesizechange', 'scale', 'dblclick' );
+			var imageSize = { width: 0, height: 0 };
+			
+			var workspaceEl = elHelper.createEl( 'div', 'panzoom', parentEl );
+			var canvasWrapperEl = elHelper.createEl( 'div', 'canvas-wrapper', workspaceEl );
+			var canvasEl = elHelper.createEl( 'canvas', 'glitch-canvas', canvasWrapperEl );
+
+			var ctx = canvasEl.getContext( '2d' );
+
+			var panZoom = PanZoom( canvasWrapperEl, workspaceEl )
+				.on( 'scale', function ( scale ) {
+					publishers.scale.dispatch( scale );
+					publishers.update.dispatch( 'scale', scale );
+				} );
+
+			var hideShowTimeoutId = NaN;
+			var lastClickTime = Date.now();
+
+			workspaceEl.addEventListener( 'dblclick', workspaceDoubleClicked );
+
+			function workspaceDoubleClicked ( event ) {
+				publishers.dblclick.dispatch();
+			}
+
+			function putImageData ( imageData ) {
+				canvasWrapperEl.style.width = imageData.width + 'px';
+				canvasWrapperEl.style.height = imageData.height + 'px';
+				
+				if ( imageSize.width !== imageData.width || imageSize.height !== imageData.height ) {
+					canvasEl.width = imageData.width;
+					canvasEl.height = imageData.height;
+					imageSize.width = imageData.width;
+					imageSize.height = imageData.height;
+					panZoom.animateToCenter();
+					publishers.imagesizechange.dispatch();
+				}
+
+				ctx.putImageData( imageData, 0, 0 );
+				panZoom.updateContainerBounds();
+			}
+
+			function createImageUrl ( callback ) {
+				return function () {
+					callback( canvasEl.toDataURL( 'image/jpeg', 100 ) );
+				}
+			}
+			
+			function hide () {
+				clearTimeout( hideShowTimeoutId );
+				workspaceEl.classList.remove( 'is-visible' );
+			}
+
+			function show () {
+				clearTimeout( hideShowTimeoutId );
+				
+				hideShowTimeoutId = setTimeout( function () {
+					workspaceEl.classList.add( 'is-visible' );
+				}, 400 );
+			}
+
+			self.putImageData = putImageData;
+			self.moveToCenter = panZoom.moveToCenter;
+			self.animateToCenter = panZoom.animateToCenter;
+			self.setScale = panZoom.setScale;
+			self.createImageUrl = createImageUrl;
+			self.hide = hide;
+			self.show = show;
+			self.resized = panZoom.resized;
+			self.el = workspaceEl;
+			self.panZoom = panZoom;
+		}
+
+		return CanvasView;
+	}
+);
--- a/scripts/views/controlsview.js
+++ b/scripts/views/controlsview.js
@ -0,0 +1,156 @@
+/*global define*/
+define(
+	[ 'util/addpublishers', 'util/el' ],
+	function ( addPublishers, elHelper ) {
+		// the control elements are used to change the appearance of the image
+		function ControlsView ( parentEl, buttonParentEl, params ) {
+			if ( ! ( this instanceof ControlsView ) ) {
+				return new ControlsView( parentEl, buttonParentEl, params );
+			}
+
+			params = params || { };
+
+			var self = this;
+			var publishers = addPublishers( self, 'update', 'random' );
+
+			var isIgnoringInput = false;
+			var isActive = true;
+			var activeTimeoutId = 0;
+
+			var inputEls = { };
+			var valueEls = { };
+
+			var controlsEl = elHelper.createEl( 'div', 'controls', parentEl );
+			var controlsWrapperEl = elHelper.createEl( 'div', 'controls-wrapper', controlsEl );
+			var buttonEl = elHelper.createButton( 'controls.controls', 'controls.controlstitle', 'controls-toggle-button button is-active', buttonParentEl, toggleControls );
+			
+			for ( var key in params ) {
+				addControl( key, params[key] );
+			}
+
+			show();
+			
+			elHelper.createButton( 'controls.randomize', 'controls.randomizetitle', 'random-button button', controlsWrapperEl, randomButtonClicked );
+
+			function loadInitialValues () {
+				// dispatch initial values when model is listening
+				var controlValues = getInputValues();
+				
+				for ( var key in controlValues ) {
+					publishers.update.dispatch( key, controlValues[key] );
+				}
+			}
+
+			function addControl ( key, params ) {
+				var controlEl = elHelper.createEl( 'div', 'control', controlsWrapperEl );
+				
+				elHelper.createLabel( 'controls.' + key, 'input-' + key, 'control-label', controlEl );
+				
+				var inputEl = elHelper.createEl( 'input', 'control-input', controlEl );
+				inputEl.setAttribute( 'data-key', key );
+				inputEl.setAttribute( 'id', 'input-' + key );
+				inputEl.type = 'range';
+				inputEl.value = params.value || 0;
+				inputEl.min = params.min || 0;
+				inputEl.max = params.max || 100;
+				inputEl.addEventListener( 'input', inputUpdated );
+				inputEl.addEventListener( 'change', inputUpdated );
+				
+				inputEls[key] = inputEl;
+
+				var valueEl = elHelper.createEl( 'input', 'control-value', controlEl );
+				valueEl.setAttribute( 'data-key', key );
+				valueEl.type = 'number';
+				valueEl.value = params.value || 0;
+				valueEl.min = params.min || 0;
+				valueEl.max = params.max || 100;
+				valueEl.addEventListener( 'input', inputUpdated );
+				valueEl.addEventListener( 'change', inputUpdated );
+
+				valueEls[key] = valueEl;
+
+				inputUpdated( { target: inputEl } );
+			}
+	
+			function inputUpdated ( event ) {
+				if ( isActive && ! isIgnoringInput ) {
+					var key = event.target.getAttribute( 'data-key' );
+					var controlValues = getInputValues();
+
+					if ( controlValues[key] !== event.target.value ) {
+						controlValues[key] = parseInt( event.target.value, 10 );
+						
+						publishers.update.dispatch( key, controlValues[key] );
+					}
+				}
+			}
+
+			function randomButtonClicked ( event ) {
+				if ( isActive ) {
+					publishers.random.dispatch();
+				}
+			}
+
+			function toggleControls () {
+				if ( isActive ) {
+					hide();
+				} else {
+					show();
+				}
+			}
+
+			function hide () {
+				controlsEl.classList.remove( 'is-active' );
+				buttonEl.classList.remove( 'is-active' );
+				buttonParentEl.classList.remove( 'controls-enabled' );
+				isActive = false;
+
+				clearTimeout( activeTimeoutId );
+
+				activeTimeoutId = setTimeout( function () {
+					controlsEl.classList.remove( 'is-visible' );
+				}, 500 );
+			}
+
+			function show () {
+				controlsEl.classList.add( 'is-visible' );
+				isActive = true;
+				
+				clearTimeout( activeTimeoutId );
+
+				activeTimeoutId = setTimeout( function () {
+					controlsEl.classList.add( 'is-active' );
+					buttonEl.classList.add( 'is-active' );
+					buttonParentEl.classList.add( 'controls-enabled' );
+				}, 10 );
+			}
+
+			function getInputValues () {
+				var result = { };
+
+				for ( var key in inputEls ) {
+					result[key] = parseInt( inputEls[key].value, 10 );
+				}
+
+				return result;
+			}
+
+			// when setting a value, prevent dispatching
+			// of elements to avoid an infinite loop of
+			// input events
+			function setValue ( key, newValue ) {
+				isIgnoringInput = true;
+
+				inputEls[key].value = newValue;
+				valueEls[key].value = newValue;
+
+				isIgnoringInput = false;
+			}
+			
+			self.loadInitialValues = loadInitialValues;
+			self.setValue = setValue;
+		}
+
+		return ControlsView;
+	}
+);
--- a/scripts/views/dialog.js
+++ b/scripts/views/dialog.js
@ -0,0 +1,121 @@
+/*global define*/
+define(
+	[ 'util/el', 'util/dom', 'util/addpublishers' ],
+	function ( elHelper, domHelper, addPublishers ) {
+
+		var dialogInstances = [ ];
+
+		function closeOpenDialogInstances () {
+			dialogInstances.forEach( function ( instance ) {
+				instance.hide();
+			} );
+		}
+
+		function Dialog ( cssClassName, parentEl, toggleEl ) {
+			if ( ! ( this instanceof Dialog ) ) {
+				return new Dialog( cssClassName, parentEl, toggleEl );
+			}
+
+			var self = this;
+			var publishers = addPublishers( self, 'hide show' );
+			var isActive = false;
+			var animationTimeoutId = NaN;
+			var hasToggleEl = false;
+
+			var dialogEl = elHelper.createEl( 'div', 'dialog color-bg-light ' + cssClassName, parentEl );
+
+			if ( toggleEl && domHelper.isElement( toggleEl ) ) {
+				hasToggleEl = true;
+				toggleEl.addEventListener( 'click', toggle );
+			}
+									
+			function show () {
+				if ( ! isActive ) {
+					closeOpenDialogInstances();
+					dialogEl.classList.add( 'is-visible' );
+					isActive = true;
+					publishers.show.dispatch();
+
+					clearTimeout( animationTimeoutId );
+					
+					animationTimeoutId = setTimeout( function () {
+						dialogEl.classList.add( 'is-active' );
+
+						if ( hasToggleEl ) {
+							toggleEl.classList.add( 'is-active' );
+						}
+					}, 10 );
+				}
+
+				return self;
+			}
+
+			function hide () {
+				if ( isActive ) {
+					dialogEl.classList.remove( 'is-active' );
+					isActive = false;
+					publishers.hide.dispatch();
+
+					if ( hasToggleEl ) {
+						toggleEl.classList.remove( 'is-active' );
+					}
+
+					clearTimeout( animationTimeoutId );
+
+					animationTimeoutId = setTimeout( function () {
+						dialogEl.classList.remove( 'is-visible' );
+					}, 500 );
+				}
+
+				return self;
+			}
+
+			function toggle () {
+				if ( isActive ) {
+					hide();
+				} else {
+					show();
+				}
+
+				return self;
+			}
+
+			function add () {
+				var wrapperEl = document.createElement( 'div' );
+				wrapperEl.classList.add( 'dialog-item' );
+				dialogEl.appendChild( wrapperEl );
+
+				for ( var i = 0, len = arguments.length; i < len; i++ ) {
+					if ( typeof arguments[i] === 'string' ) {
+						arguments[i].split( ' ' ).forEach( function ( cssClassName ) {
+							wrapperEl.classList.add( cssClassName );
+						} );
+					} else {
+						arguments[i].wrapperEl = wrapperEl;
+						wrapperEl.appendChild( arguments[i] );
+					}
+				}
+
+				return self;
+			}
+
+			function remove ( el ) {
+				el.parentNode.parentNode.removeChild( el.parentNode );
+				return self;
+			}
+
+			self.add = add;
+			self.remove = remove;
+			self.show = show;
+			self.hide = hide;
+			self.toggle = toggle;
+			self.el = dialogEl;
+
+			dialogInstances.push( self );
+		}
+		
+		Dialog.closeAll = closeOpenDialogInstances;
+
+		return Dialog;
+	}
+);
--- a/scripts/views/draganddropview.js
+++ b/scripts/views/draganddropview.js
@ -0,0 +1,61 @@
+/*global define*/
+define(
+	[ 'util/browser', 'util/addpublishers' ],
+	function ( browser, addPublishers ) {
+		// the DragAndDropView handles the drag + drop events
+		// over the workspace and passes the uploaded file
+		function DragAndDropView ( el ) {
+			if ( ! ( this instanceof DragAndDropView ) ) {
+				return new DragAndDropView( el );
+			}
+
+			var self = this;
+			var publishers = addPublishers( self, 'drop' );
+			var isOver = false;
+
+			if ( browser.test( 'draganddrop' ) ) {
+				document.addEventListener( 'drop', dropped, false );
+				document.addEventListener( 'dragover', dragHovered, false );
+				document.addEventListener( 'dragleave', dragLeft, false );
+			}
+
+			function preventDefault ( event ) {
+				event.preventDefault();
+			}
+
+			function dragHovered ( event ) {
+				if ( ! isOver ) {
+					el.classList.add( 'drag-over' );
+					isOver = true;
+				}
+
+				preventDefault( event );
+			}
+
+			function dragLeft ( event ) {
+				if ( isOver ) {
+					el.classList.remove( 'drag-over' );
+					isOver = false;
+				}
+
+				preventDefault( event );
+			}
+
+			function dropped ( event ) {
+				preventDefault( event );
+				
+				if (
+					event.dataTransfer &&
+					event.dataTransfer.files &&
+					event.dataTransfer.files[0]
+				) {
+					publishers.drop.dispatch( event.dataTransfer.files[0] );
+				}
+				
+				el.classList.remove( 'drag-over' );
+			}
+		}
+
+		return DragAndDropView;
+	}
+);
--- a/scripts/views/fullscreenview.js
+++ b/scripts/views/fullscreenview.js
@ -0,0 +1,68 @@
+/*global define*/
+define(
+	[ 'util/browser', 'util/el' ],
+	function ( browser, elHelper ) {
+		// the fullscreen button
+		// includes a lot of code to account for the different browser implementations
+		function FullscreenView ( parentEl ) {
+			if ( ! ( this instanceof FullscreenView ) ) {
+				return new FullscreenView( parentEl );
+			}
+
+			var self = this;
+			var isInFullScreen = false;
+			var fullscreenButtonEl;
+			
+			if ( browser.test( 'fullscreen' ) ) {
+				fullscreenButtonEl = elHelper.createButton( 'controls.fullscreen', 'controls.fullscreentitle', 'fullscreen-button', parentEl, toggleFullscreen );
+
+				document.addEventListener( 'webkitfullscreenchange', fullscreenChanged, false );
+				document.addEventListener( 'mozfullscreenchange', fullscreenChanged, false );
+				document.addEventListener( 'fullscreenchange', fullscreenChanged, false );
+				document.addEventListener( 'MSFullscreenChange', fullscreenChanged, false );
+			}
+
+			function fullscreenChanged ( event ) {
+				isInFullScreen = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen;
+				
+				if ( isInFullScreen ) {
+					document.documentElement.classList.add( 'is-fullscreen' );
+				} else {
+					document.documentElement.classList.remove( 'is-fullscreen' );
+				}
+			}
+
+			function toggleFullscreen () {
+				if ( isInFullScreen ) {
+					exitFullscreen();
+				} else {
+					requestFullScreen( document.documentElement );
+				}
+			}
+
+			function requestFullScreen ( el ) {
+				if ( el.requestFullscreen ) {
+					el.requestFullscreen();
+				} else if ( el.mozRequestFullScreen ) {
+					el.mozRequestFullScreen();
+				} else if ( el.webkitRequestFullscreen ) {
+					el.webkitRequestFullscreen();
+				} else if ( el.msRequestFullscreen ) {
+					el.msRequestFullscreen();
+				}
+			}
+
+			function exitFullscreen () {
+				if ( document.exitFullscreen ) {
+					document.exitFullscreen();
+				} else if ( document.mozCancelFullScreen ) {
+					document.mozCancelFullScreen();
+				} else if ( document.webkitExitFullscreen ) {
+					document.webkitExitFullscreen();
+				}
+			}
+		}
+
+		return FullscreenView;
+	}
+);
--- a/scripts/views/indicatorview.js
+++ b/scripts/views/indicatorview.js
@ -0,0 +1,128 @@
+/*global define*/
+define(
+	[ 'util/el', 'util/localizetext' ],
+	function ( elHelper, loc ) {
+		// the indiecator view diesplays errors and warnings in the top right
+		// corner. they disappear after a while. the user can also click
+		// on them to make them go away
+		function IndicatorView ( parentEl ) {
+			if ( ! ( this instanceof IndicatorView ) ) {
+				return new IndicatorView( parentEl );
+			}
+
+			var self = this;
+			var addQueue = [ ];
+			var removeQueue = [ ];
+			var visibleNotificationCount = 0;
+			var isAdding = false;
+
+			var timeToFadeOut = {
+				message: 3500,
+				error: 6000,
+				welcome: 7000
+			};
+
+			var notificationsEl = elHelper.createEl( 'div', 'notifications', parentEl );
+
+			function showWelcome ( message, data, fadeOutDelay ) {
+				showNotification( 'welcome', message, data, fadeOutDelay );
+			}
+
+			function showMessage ( message, data ) {
+				showNotification( 'message', message, data );
+			}
+
+			function showError ( message, data ) {
+				showNotification( 'error', message, data );
+			}
+
+			function showNotification ( type, message, data, fadeOutDelay ) {
+				fadeOutDelay = fadeOutDelay || timeToFadeOut[type] || 7000;
+
+				if ( isAdding ) {
+					addQueue.push( { type: type, message: message, data: data, fadeOutDelay: fadeOutDelay } );
+				} else {
+					addNotification( type, { message: message, data: data, fadeOutDelay: fadeOutDelay } );
+				}	
+			}
+
+			function addNotification ( type, params ) {
+				var notificationEl = elHelper.createEl( 'div', 'notification notification-' + type, notificationsEl );
+				
+				if ( params.data && params.data.innerHTML && params.data.args && params.data.args.length ) {
+					loc.apply( null, [ notificationEl, 'innerHTML', params.message ].concat( params.data.args ) );
+				} else {
+					loc( notificationEl, 'textContent', params.message );
+				}
+
+				notificationEl.id = 'notification-' + Date.now();
+				notificationEl.addEventListener( 'click', notificationClicked );
+				
+				notificationsEl.classList.add( 'is-active' );
+				
+				isAdding = true;
+
+				requestAnimationFrame( function () {
+					notificationEl.classList.add( 'is-active' );
+					notificationEl.classList.add( 'is-visible' );
+					visibleNotificationCount++;
+				} );
+
+				setTimeout( function () {
+					isAdding = false;
+					addMessagesFromQueue();
+				}, 400 );
+
+				setTimeout( function () {
+					removeNotification( notificationEl );
+				}, params.fadeOutDelay );
+			}
+
+			function addMessagesFromQueue () {
+				if ( addQueue.length && visibleNotificationCount < 4 ) {
+					var nextMessage = addQueue.shift();
+					addNotification( nextMessage.type, { message: nextMessage.message, data: nextMessage.data } );
+				}
+			}
+
+			function removeNotification ( notificationEl ) {
+				if ( removeQueue.indexOf( notificationEl.id ) === -1 ) {
+					removeQueue.push( notificationEl.id );
+
+					requestAnimationFrame( function () {
+						notificationEl.classList.remove( 'is-active' );
+					} );
+
+					setTimeout( function () {
+						requestAnimationFrame( function () {
+							removeQueue.splice( removeQueue.indexOf( notificationEl.id ), 1 );
+							
+							notificationsEl.removeChild( notificationEl );
+							visibleNotificationCount--;
+							addMessagesFromQueue();
+
+							if ( ! notificationsEl.children.length ) {
+								notificationsEl.classList.remove( 'is-active' );
+							}
+						} );
+					}, 500 );
+				}
+			}
+
+			function notificationClicked ( event ) {
+				if (
+					event.target.classList.contains( 'notification' ) &&
+					! event.target.classList.contains( 'notification-error' )
+				) {
+					removeNotification( event.target );
+				}
+			}
+
+			self.showMessage = showMessage;
+			self.showError = showError;
+			self.showWelcome = showWelcome;
+		}
+
+		return IndicatorView;
+	}
+);
--- a/scripts/views/navview.js
+++ b/scripts/views/navview.js
@ -0,0 +1,277 @@
+/*global define*/
+define(
+	[ 'util/el', 'util/dom', 'views/dialog', 'util/addpublishers', 'util/math', 'util/localizetext' ],
+	function ( elHelper, domHelper, Dialog, addPublishers, mathHelpers, loc ) {
+		function NavView ( parentEl ) {
+			if ( ! ( this instanceof NavView ) ) {
+				return new NavView( parentEl );
+			}
+
+			var isActive = false;
+			var self = this;
+			var el = elHelper.createEl( 'nav', 'nav color-bg', parentEl );
+			var publishers = addPublishers( self, 'togglestart', 'toggleend' );
+
+			var buttonTextEl = elHelper.createEl( 'span', 'nav-toggle-button-text' )
+			loc( buttonTextEl, 'textContent', 'nav.menu' );
+			loc( buttonTextEl, 'title', 'nav.menutitle' );
+
+			var buttonSVGWrapperEl = document.createElement( 'div' );
+			buttonSVGWrapperEl.classList.add( 'svg-wrapper' );
+
+			var svgEl = document.getElementById( 'svg' );
+			svgEl.setAttribute( 'viewBox', '0 0 24 24' );
+
+			buttonSVGWrapperEl.appendChild( svgEl );
+
+			var svgGroupEl = document.createElementNS( 'http://www.w3.org/2000/svg', 'g' );
+			svgGroupEl.setAttribute( 'id', 'menu' );
+			svgGroupEl.setAttributeNS( null, 'fill', '#000' );
+			svgEl.appendChild( svgGroupEl );
+
+			var svgRect1El = elHelper.createEl( 'rect', null, svgGroupEl );
+			svgRect1El.setAttribute( 'id', 'rect-1' );
+			svgRect1El.setAttributeNS( null, 'x', '3' );
+			svgRect1El.setAttributeNS( null, 'y', '6' );
+			svgRect1El.setAttributeNS( null, 'width', '18' );
+			svgRect1El.setAttributeNS( null, 'height', '2' );
+
+			var svgRect2El = elHelper.createEl( 'rect', null, svgGroupEl );
+			svgRect2El.setAttributeNS( null, 'id', 'rect-2' );
+			svgRect2El.setAttributeNS( null, 'x', '3' );
+			svgRect2El.setAttributeNS( null, 'y', '11' );
+			svgRect2El.setAttributeNS( null, 'width', '18' );
+			svgRect2El.setAttributeNS( null, 'height', '2' );
+
+			var svgRect3El = elHelper.createEl( 'rect', null, svgGroupEl );
+			svgRect3El.setAttributeNS( null, 'id', 'rect-3' );
+			svgRect3El.setAttributeNS( null, 'x', '3' );
+			svgRect3El.setAttributeNS( null, 'y', '16' );
+			svgRect3El.setAttributeNS( null, 'width', '18' );
+			svgRect3El.setAttributeNS( null, 'height', '2' );
+			
+			buttonSVGWrapperEl.appendChild( svgEl );
+
+			var buttonEl = elHelper.createButton( buttonTextEl, 'nav.menutitle', 'nav-toggle-button', parentEl );
+			buttonEl.appendChild( buttonSVGWrapperEl );
+			buttonEl.addEventListener( 'click', toggle, false );
+
+			var headlineEl = elHelper.createEl( 'h1', 'nav-headline', el );
+			headlineEl.textContent = document.title;
+
+			var navBreakPoint = 600;
+			var navWidth = 300;
+			var navTouchPadding = 60;
+			var isSwiping = false;
+			var touchStartPos = { x: 0, y: 0 };
+			var touchPos = { x: 0, y: 0 };
+			var touchId = 0;
+			var translateX = -navWidth;
+			var i = 0, len = 0;
+			var touch;
+
+			parentEl.addEventListener( 'touchstart', touchStarted );
+
+			function toggle () {
+				if ( ! isActive ) {
+					activate()
+				} else {
+					deactivate()
+				}
+			}
+
+			function activate () {
+				isActive = true;
+				
+				requestAnimationFrame( function () {
+					el.classList.add( 'is-active' );
+					buttonEl.classList.add( 'is-active' );
+				} );
+
+				publishers.togglestart.dispatch( true );
+				
+				setTimeout( function () {
+					publishers.toggleend.dispatch( true );
+				}, 300 );
+			}
+
+			function deactivate () {
+				isActive = false;
+				Dialog.closeAll();
+
+				requestAnimationFrame( function () {
+					el.classList.remove( 'is-active' );
+					buttonEl.classList.remove( 'is-active' );
+				} );
+				
+				publishers.togglestart.dispatch( false );
+				
+				setTimeout( function () {
+					publishers.toggleend.dispatch( false );
+				}, 300 );
+			}
+
+			function closeSmallScreenNav () {
+				if ( window.innerWidth <= navBreakPoint ) {
+					deactivate();
+				}
+			}
+
+			function swipeStarted ( x, y, identifier ) {
+				if ( ! isSwiping ) {
+					parentEl.addEventListener( 'touchmove', touchMoved );
+					parentEl.addEventListener( 'touchend', touchEnded );
+
+					isSwiping = true;
+					touchIdentifier = identifier;
+					touchStartPos.x = x;
+					touchStartPos.y = y;
+					touchPos.x = x;
+					touchPos.y = y;
+
+					requestAnimationFrame( function () {
+						el.classList.add( 'is-swiping' );
+						buttonEl.classList.add( 'is-swiping' );
+					} );
+				}
+			}
+
+			function swipeStopped () {
+				if ( isSwiping ) {
+					parentEl.removeEventListener( 'touchmove', touchMoved );
+					parentEl.addEventListener( 'touchend', touchEnded );
+					isSwiping = false;
+
+					requestAnimationFrame( function () {
+						el.classList.remove( 'is-swiping' );
+						buttonEl.classList.remove( 'is-swiping' );
+
+						// remove inline style, so that item can move to
+						// transform values from css file
+						domHelper.setTransform( el, '' );
+						domHelper.setTransform( buttonEl, '' );
+						domHelper.setTransform( svgRect1El, '' );
+						domHelper.setTransform( svgRect2El, '' );
+						domHelper.setTransform( svgRect3El, '' );
+						domHelper.setTransform( svgGroupEl, '' );
+						svgGroupEl.style.fill = '';
+						buttonTextEl.style.width = '';
+						buttonTextEl.style.opacity = '';
+					} );
+					
+					var dx = touchPos.x - touchStartPos.x;
+
+					if ( translateX > -navWidth && translateX < 0 && Math.abs( dx ) > 0 ) {
+						if ( translateX < -navWidth / 2 ) {
+							deactivate();
+						} else {
+							activate();
+						}
+					}
+				}
+			}
+
+			function swiped ( x, y, identifier ) {
+				touchPos.x = x;
+				touchPos.y = y;
+
+				var dx = touchPos.x - touchStartPos.x;
+				var wasTranslateUpdated = false;
+
+				if ( isActive ) {
+					if ( dx < 0 && dx >= -navWidth ) {
+						wasTranslateUpdated = true;
+						translateX = Math.round( Math.max( dx, -navWidth ) );
+					} else {
+						swipeStopped();
+					}
+				} else {
+					if ( dx > 0 && dx <= navWidth ) {
+						wasTranslateUpdated = true;
+						translateX = -navWidth + Math.round( Math.min( dx, navWidth ) );
+					} else {
+						swipeStopped();
+					}
+				}
+
+				if ( wasTranslateUpdated ) {
+					requestAnimationFrame( function () {
+						domHelper.setTransform( el, 'translateX(' + translateX + 'px)' );
+
+						var buttonTransform = 'translateX(' + mathHelpers.mapRange( translateX, -navWidth, 0, 0, 242 ) + 'px)';
+						domHelper.setTransform( buttonEl, buttonTransform );
+						
+						var rect1Transform = [
+							'rotateZ(' + mathHelpers.mapRange( translateX, -navWidth, 0, 0, 45 ) + 'deg)',
+							'translateY(' + mathHelpers.mapRange( translateX, -navWidth, 0, 0, 5.1 ) + 'px)'
+						].join( ' ' );
+												
+						domHelper.setTransform( svgRect1El, rect1Transform );
+
+						domHelper.setTransform( svgRect2El, 'scaleX(' + mathHelpers.mapRange( translateX, -navWidth, 0, 1, 0 ) + ')' );
+						
+						var rect3Transform = [
+							'rotateZ(' + mathHelpers.mapRange( translateX, -navWidth, 0, 0, -45 ) + 'deg)',
+							'translateY(' + mathHelpers.mapRange( translateX, -navWidth, 0, 0, -5.1 ) + 'px)'
+						].join( ' ' );
+
+						domHelper.setTransform( svgRect3El, rect3Transform );
+
+						domHelper.setTransform( svgGroupEl, 'rotateZ(' + mathHelpers.mapRange( translateX, -navWidth, 0, 0, -90 ) + 'deg)' ); 
+						svgGroupEl.style.fill = 'hsl(0, 0%, ' + mathHelpers.mapRange( translateX, -navWidth, 0, 0, 100 ) + '%)';
+
+						buttonTextEl.style.width = mathHelpers.mapRange( translateX, -navWidth, 0, 50, 0 ) + 'px';
+						buttonTextEl.style.opacity = mathHelpers.mapRange( translateX, -navWidth, 0, 1.5, 0, true ).toFixed( 2 );
+					} );
+				}
+			}
+
+			function touchStarted ( event ) {
+				if ( window.innerWidth <= navBreakPoint && ! isSwiping ) {					
+					for ( i = 0, len = event.touches.length; i < len; i++ ) {
+						touch = event.touches[i];
+
+						if (
+							( ! isActive && touch.clientX <= navTouchPadding ) ||
+							( isActive && touch.clientX <= navTouchPadding + navWidth )
+						) {
+							swipeStarted( touch.clientX, touch.clientY, touch.identifier );
+							break;
+						}
+					}
+				}
+			}
+
+			function touchMoved ( event ) {
+				if ( event.changedTouches ) {
+					var hasTouch = false;
+
+					for ( i = 0, len = event.touches.length; i < len; i++ ) {
+						touch = event.touches[i];
+
+						if ( touch.identifier === touchIdentifier ) {
+							swiped( touch.clientX, touch.clientY, touch.identifier );
+							hasTouch = true;
+							break;
+						}
+					}
+
+					if ( ! hasTouch ) {
+						swipeStopped();
+					}
+				} else {
+					swipeStopped();
+				}
+			}
+
+			function touchEnded ( event ) {
+				swipeStopped();
+			}
+
+			self.el = el;
+			self.closeSmallScreenNav = closeSmallScreenNav;
+		}
+
+		return NavView;
+	}
+)
--- a/scripts/views/openfileview.js
+++ b/scripts/views/openfileview.js
@ -0,0 +1,234 @@
+/*global define*/
+define(
+	[ 'util/browser', 'util/addpublishers', 'util/el', 'util/time', 'util/localizetext', 'views/dialog' ],
+	function ( browser, addPublishers, elHelper, timeHelper, loc, Dialog ) {
+		function OpenFileView ( parentEl ) {
+			if ( ! ( this instanceof OpenFileView ) ) {
+				return new OpenFileView( parentEl );
+			}
+
+			var self = this;
+			var fileOpenEl;
+			var storageListEl;
+			var emptyListEl;
+			var navButtonEl;
+			var dialog;
+
+			var publishers = addPublishers( self, 'openfile', 'deletefromlocalstorage', 'openfromlocalstorage', 'deletefromimgur' );
+
+			// check if the browser supports the filereader API
+			// before displaying upload button
+			if ( browser.getFeature( window, 'FileReader' ) ) {
+				navButtonEl = elHelper.createButton( 'file.open', 'file.opentitle', 'open-button nav-button', parentEl );
+				dialog = Dialog( 'open-file-dialog', parentEl, navButtonEl );
+
+				var fileLabelEl = elHelper.createLabel( 'file.importtitle', 'input-file', 'file-label label' );
+
+				fileInputEl = document.createElement( 'input' );
+				fileInputEl.classList.add( 'file-input' );
+				fileInputEl.type = 'file';
+				fileInputEl.id = 'input-file';
+				fileInputEl.accept = 'image/*';
+
+				fileInputEl.addEventListener( 'change', fileSelected );
+
+				var fileLabelButtonEl = elHelper.createLabel( 'file.import', 'input-file', 'file-button button' );
+				
+				dialog.add( fileLabelEl, fileInputEl, fileLabelButtonEl );
+
+				self.fileinput = fileInputEl;				
+			}
+
+			if ( browser.test( 'localforage' ) ) {
+				storageListEl = elHelper.createEl( 'ul', 'storage-list dialog-list' );
+
+				var storageLabelEl = elHelper.createLabel( 'file.recent', 'file.recenttitle', 'load-label label' );
+
+				dialog.add( storageLabelEl, storageListEl );
+			}
+			
+			function fileSelected ( event ) {
+				if (
+					event.target &&
+					event.target.files &&
+					event.target.files[0]
+				) {
+					publishers.openfile.dispatch( event.target.files[0] );
+				}
+			}
+
+			// compare all items in the list with what's in localstorage
+			// and add, remove and edit them accordingly,
+			// including images shared on imgur
+			function updateList ( entries ) {
+				if ( storageListEl ) {
+					if ( entries && Object.keys( entries ).length ) {
+						if ( emptyListEl ) {
+							removeListItem( emptyListEl );
+							emptyListEl = null;
+						}
+
+						var storageListItemEl;
+						var offlineLinkEl;
+
+						for ( var uid in entries ) {
+							storageListItemEl = storageListEl.querySelector( '[data-uid="' + uid + '"]' );
+							
+							updateListItem( storageListItemEl, uid, entries[uid] );
+						}
+
+						var storageListItemEls = storageListEl.querySelectorAll( '[data-uid]' );
+
+						for ( var i = 0, len = storageListItemEls.length; i < len; i++ ) {
+							var itemUid = storageListItemEls[i].getAttribute( 'data-uid' );
+
+							if ( itemUid && ! entries[itemUid] ) {
+								removeListItem( storageListItemEls[i] );
+							}
+						}
+
+					} else {
+						// no entries but there are still elements in dom
+						if ( entries && Object.keys( entries ).length === 0 ) {
+							var storageListItemEls = storageListEl.querySelectorAll( '[data-uid]' );
+
+							for ( var i = 0, len = storageListItemEls.length; i < len; i++ ) {
+								removeListItem( storageListItemEls[i] );
+							}
+						}
+
+						if ( ! emptyListEl ) {
+							emptyListEl = elHelper.createEl( 'li', 'no-items' );
+							loc( emptyListEl, 'textContent', 'file.norecent' );
+							storageListEl.appendChild( emptyListEl );
+						}
+					}
+				}
+
+				return self;
+			}
+
+			function updateListItem ( listItemEl, uid, entry ) {
+				if ( entry.src && entry.values && ! listItemEl ) {
+					addListItem( uid, entry );
+				} else {
+					if ( listItemEl ) {
+						if ( ! entry.src && ! entry.values ) {
+							removeListItem( listItemEl );
+						} else {
+							var offlineLinkEl = listItemEl.querySelector( '.entry-shared-button-wrapper' );
+							
+							if ( ! entry.deleteHash && offlineLinkEl ) {
+								offlineLinkEl.parentNode.removeChild( offlineLinkEl );
+								listItemEl.classList.remove( 'has-offline-button' );
+							}
+
+							// add link el to open item online instead
+							if ( entry.deleteHash && ! offlineLinkEl ) {
+								addOnlineButtons( listItemEl, entry.deleteHash, entry.publicUrl, uid );
+							}
+						}
+					}
+				}
+			}
+
+			function addListItem ( uid, entry ) {
+				if ( entry ) {
+					var date = timeHelper.timestampToDate( entry.timestamp );
+					
+					var listItemEl = elHelper.createEl( 'li', 'entry clear dialog-list-item', storageListEl );
+					listItemEl.setAttribute( 'data-uid', uid );
+					
+					var listItemThumbnailEl = elHelper.createEl( 'img', 'entry-thumb', listItemEl );
+					listItemThumbnailEl.src = entry.thumbnail;
+					listItemThumbnailEl.addEventListener( 'click', loadItemFn( uid ) );
+
+					var textWrapperEl = elHelper.createEl( 'p', 'entry-text', listItemEl );
+
+					var listItemNameEl = elHelper.createEl( 'p', 'entry-name', textWrapperEl );
+					
+					if ( entry.name ) {
+						listItemNameEl.textContent = entry.name;
+					} else {
+						loc( listItemNameEl, 'textContent', 'file.untitled' );
+					}
+
+					var listItemDateEl = elHelper.createEl( 'time', 'entry-datetime', textWrapperEl );
+					listItemDateEl.setAttribute( 'datetime', date.toISOString() );
+
+					var dateEl = elHelper.createEl( 'span', 'entry-date', listItemDateEl );
+					dateEl.textContent = timeHelper.dateToLocalStr( date );
+
+					var timeEl = elHelper.createEl( 'span', 'entry-time', listItemDateEl );
+					timeEl.textContent = timeHelper.timeToLocalStr( date );
+
+					var buttonWrapperEl = elHelper.createEl( 'div', 'entry-button-wrapper', listItemEl );
+
+					elHelper.createButton( 'file.del', 'file.deltitle', 'item-delete-button button', buttonWrapperEl, removeItemFn( uid ) );
+					elHelper.createButton( 'file.openimage', 'file.openimagetitle', 'item-load-button button', buttonWrapperEl, loadItemFn( uid ) );
+
+					if ( entry.deleteHash && entry.publicUrl ) {
+						addOnlineButtons( listItemEl, entry.deleteHash, entry.publicUrl, uid );
+					}
+				}
+			}
+
+			function addOnlineButtons ( listEl, deleteHash, publicUrl, uid ) {
+				var sharedButtonWrapperEl = elHelper.createEl( 'div', 'entry-shared-button-wrapper is-online-only', listEl );
+				
+				listEl.classList.add( 'has-offline-button' );
+
+				elHelper.createButton(
+					'file.offline',
+					'file.offlinetitle',
+					'item-offline-button button',
+					sharedButtonWrapperEl,
+					removeItemFromImgurFn( uid, deleteHash )
+				);
+
+				elHelper.createLink(
+					'file.openlink',
+					'file.openlinktitle',
+					publicUrl,
+					'_blank',
+					'entry-shared-link button',
+					sharedButtonWrapperEl
+				);
+			}
+
+			function removeListItem ( itemEl ) {
+				itemEl.parentNode.removeChild( itemEl );
+			}
+
+			function removeItemFn ( uid ) {
+				return function () {
+					publishers.deletefromlocalstorage.dispatch( uid );
+				}
+			}
+
+			function removeItemFromImgurFn ( uid, deleteHash ) {
+				return function () {
+					var buttonEl = storageListEl.querySelector( '[data-uid="' + uid + '"] .item-offline-button' );
+					
+					if ( buttonEl ) {
+						buttonEl.setAttribute( 'disabled', 'disabled' );
+					}
+
+					publishers.deletefromimgur.dispatch( uid, deleteHash );
+				}
+			}
+
+			function loadItemFn ( uid ) {
+				return function () {
+					dialog.hide();
+					publishers.openfromlocalstorage.dispatch( uid );
+				}
+			}
+
+			self.updateList = updateList;
+			self.dialog = dialog;
+		}
+
+		return OpenFileView;
+	}	
+);
--- a/scripts/views/panzoom.js
+++ b/scripts/views/panzoom.js
@ -0,0 +1,371 @@
+/*global define*/
+// most of this was shamelessly taken from @jakearchibald's svgomg ui:
+// https://github.com/jakearchibald/svgomg/blob/master/src/js/page/ui/pan-zoom.js
+define(
+	[ 'util/css', 'util/dom', 'util/addpublishers' ],
+	function ( cssHelper, domHelper, addPublishers ) {
+		function getXY ( obj ) {
+			return {
+				x: obj.pageX,
+				y: obj.pageY
+			};
+		}
+
+		function touchDistance ( touch1, touch2 ) {
+			var x = Math.abs( touch2.x - touch1.x );
+			var y = Math.abs( touch2.y - touch1.y );
+			return Math.sqrt( x * x + y * y );
+		}
+
+		function getMidpoint ( point1, point2 ) {
+			return {
+				x: ( point1.x + point2.x ) / 2,
+				y: ( point1.y + point2.y ) / 2
+			};
+		}
+
+		function getPoints ( event ) {
+			if ( event.touches ) {
+				return Array.prototype.map.call( event.touches, getXY );
+			} else {
+				return [ getXY( event ) ];
+			}
+		}
+
+		function PanZoom ( containerEl, targetEl, opts ) {
+			if ( ! ( this instanceof PanZoom ) ) {
+				return new PanZoom ( targetEl, containerEl, opts );
+			}
+
+			var self = this;
+			var canZoomWithPonter = true;
+			var publishers = addPublishers( self, 'scale' );
+			opts = opts || { }
+
+			var shouldCaptureFn = opts.shouldCaptureFn || function ( el ) { return true; };
+			var limitToContainer = typeof opts.limitToContainer === 'boolean' ? opts.limitToContainer : true;
+			var limitPadding = opts.limitPadding || 50;
+
+			var matrix = cssHelper.getCSSMatrix( targetEl );
+			var transform = cssHelper.cssMatrixToTransformObj( matrix );
+
+			var x = transform.translateX || 0;
+			var y = transform.translateY || 0;
+			var scale = 1;
+			var active = 0;
+			var lastPoints = [ ];
+			var containerBounds;
+			var updateAnimationFrameId = NaN;
+			var scaleAnimationFrameId = NaN;
+			var centerAnimationFrameId = NaN;
+			var resizeTimeoutId = NaN;
+			var targetElSize = { width: 100, height: 100 };
+			var containerElSize = { width: 100, height: 100 };
+			var centerScale = 1;
+			
+			containerEl.addEventListener( 'mousedown', pointerPressed );
+			containerEl.addEventListener( 'touchstart', pointerPressed );
+			containerEl.addEventListener( 'wheel', wheelTurned );
+
+			window.addEventListener( 'resize', resized );
+						
+			targetEl.style.WebkitTransformOrigin = targetEl.style.transformOrigin = '0 0';
+
+			updateContainerBounds();
+
+			function reset () {
+				// x = transform.translateX || 0;
+				// y = transform.translateY || 0;
+												
+				updateValues ( transform.translateX || 0, transform.translateY || 0, 1 );
+			}
+
+			function updateValues ( newX, newY, newScale, targetBounds ) {
+				cancelAnimationFrame( updateAnimationFrameId );
+
+				if ( limitToContainer && targetEl !== containerEl && containerBounds ) {
+					targetBounds = targetBounds || targetEl.getBoundingClientRect();
+										
+					if ( newX !== x || newY !== y || newScale !== scale ) {
+						var scaleDelta = 1 / ( scale / newScale );
+					
+						if ( newX + targetBounds.width * scaleDelta < limitPadding ) {
+							newX = limitPadding - targetBounds.width * scaleDelta;
+						}
+
+						if ( newX > containerBounds.width - limitPadding ) {
+							newX = containerBounds.width - limitPadding;
+						}
+					
+						if ( newY + targetBounds.height * scaleDelta < limitPadding ) {
+							newY = limitPadding - targetBounds.height * scaleDelta;
+						}
+
+						if ( newY > containerBounds.height - limitPadding ) {
+							newY = containerBounds.height - limitPadding;
+						}
+					}
+				}
+
+				newScale = Math.min( 5, Math.max( 0.01, newScale ) );
+				
+				if ( scale === newScale && newScale === 5 ) {
+					return;
+				}
+
+				x = newX;
+				y = newY;
+				scale = newScale
+				
+				publishers.scale.dispatch( scale );
+
+				updateAnimationFrameId = requestAnimationFrame( update );
+			}
+
+			function update () {
+				targetEl.style.WebkitTransform = targetEl.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(' + scale + ')';
+			}
+
+			function wheelTurned ( event ) {
+				if ( ! shouldCaptureFn( event.target ) ) { return; }
+				if ( ! canZoomWithPonter ) { return; }
+				event.preventDefault();
+
+				var targetBounds = targetEl.getBoundingClientRect();
+				var delta = event.deltaY;
+
+				if ( event.deltaMode === 1 ) { // 1 is "lines", 0 is "pixels"
+					// Firefox uses "lines" when mouse is connected
+					delta *= 15;
+				}
+
+				// stop mouse wheel producing huge values
+				delta = Math.max( Math.min( delta, 60 ), -60 );
+
+				var scaleDiff = ( delta / 300 ) + 1;
+
+				// avoid to-small values
+				if ( scale * scaleDiff < 0.05 ) { return; }
+
+				updateValues(
+					x - ( event.pageX - targetBounds.left ) * ( scaleDiff - 1 ),
+					y - ( event.pageY - targetBounds.top ) * ( scaleDiff - 1 ),
+					scale * scaleDiff,
+					targetBounds
+				);
+			}
+	
+			function firstPointerPressed ( event ) {
+				document.addEventListener( 'mousemove', pointerMoved );
+				document.addEventListener( 'mouseup', pointerReleased );
+				document.addEventListener( 'touchmove', pointerMoved );
+				document.addEventListener( 'touchend', pointerReleased );
+			}
+
+			function pointerPressed ( event ) {
+				if ( event.type == 'mousedown' && event.which != 1 ) {
+					return;
+				}
+				
+				if ( ! shouldCaptureFn( event.target ) ) {
+					return;
+				}
+
+				if ( domHelper.isDescendant( containerEl, event.target ) ) {
+					event.preventDefault();
+					
+					lastPoints = getPoints( event );
+					active++;
+			
+					if ( active === 1 ) {
+						firstPointerPressed( event );
+					}
+				}
+			}
+
+			function pointerMoved ( event ) {
+				if ( event && event.target && domHelper.isDescendant( containerEl, event.target ) ) {
+					event.preventDefault();
+
+					var points = getPoints( event );
+					var averagePoint = points.reduce( getMidpoint );
+					var averageLastPoint = lastPoints.reduce( getMidpoint );
+					var targetBounds = targetEl.getBoundingClientRect();
+
+					var tmpX = x + averagePoint.x - averageLastPoint.x;
+					var tmpY = y + averagePoint.y - averageLastPoint.y;
+					
+					if ( points[1] ) {
+						if ( ! canZoomWithPonter ) { return; }
+						var scaleDiff = touchDistance( points[0], points[1] ) / touchDistance( lastPoints[0], lastPoints[1] );
+						
+						updateValues(
+							tmpX - ( averagePoint.x - targetBounds.left ) * ( scaleDiff - 1 ),
+							tmpY - ( averagePoint.y - targetBounds.top ) * ( scaleDiff - 1 ),
+							scale * scaleDiff,
+							targetBounds
+						);
+					} else {
+						updateValues( tmpX, tmpY, scale );
+					}
+
+					lastPoints = points;
+				}
+			}
+
+			function pointerReleased ( event ) {
+				event.preventDefault();
+				active--;
+				lastPoints.pop();
+
+				if ( active ) {
+					lastPoints = getPoints( event );
+					return;
+				}
+
+				document.removeEventListener( 'mousemove', pointerMoved );
+				document.removeEventListener( 'mouseup', pointerReleased );
+				document.removeEventListener( 'touchmove', pointerMoved );
+				document.removeEventListener( 'touchend', pointerReleased );
+			}
+
+			function updateContainerBounds () {
+				containerElSize = {
+					width: containerEl.clientWidth,
+					height: containerEl.clientHeight
+				}
+				
+				targetElSize = {
+					width: targetEl.clientWidth,
+					height: targetEl.clientHeight
+				};
+
+				containerBounds = containerEl.getBoundingClientRect();
+				updateValues( x, y, scale );
+			}
+
+			function resized () {
+				clearTimeout( resizeTimeoutId );
+
+				resizeTimeoutId = setTimeout( function () {
+					updateContainerBounds();
+
+					if ( Math.abs( scale - centerScale ) <= 0.01 ) {
+						animateToCenter();
+					}
+				}, 100 );
+			}
+
+			function setToCenter () {
+				var centerValues = getCenterValues();
+				updateValues ( centerValues.x, centerValues.y, centerValues.scale );
+							
+				return self;
+			}
+
+			function animateToCenter () {
+				var deltaX = 0;
+				var deltaY = 0;
+				var deltaScale = 0;
+				var easing = 0.1;
+				var centerValues = getCenterValues();
+
+				centerScale = centerValues.scale;
+
+				cancelAnimationFrame( scaleAnimationFrameId );
+				cancelAnimationFrame( centerAnimationFrameId );
+					
+				function centerAnimationStep () {
+					deltaX = centerValues.x - x;
+					deltaY = centerValues.y - y;
+					deltaScale = centerValues.scale - scale;
+
+					if (
+						Math.abs( deltaX ) > 1 ||
+						Math.abs( deltaY ) > 1 ||
+						Math.abs( deltaScale ) > 0.01
+					) {
+						updateValues( x + deltaX * easing, y + deltaY * easing, scale + deltaScale * easing );
+
+						centerAnimationFrameId = requestAnimationFrame( centerAnimationStep );
+					} else {
+						updateValues( centerValues.x, centerValues.y, centerValues.scale );
+					}
+				}
+
+				centerAnimationFrameId = requestAnimationFrame( centerAnimationStep );
+
+				return self;
+			}
+
+			function settingUpdated ( key, value ) {
+				if ( key === 'canZoomWithPointer' && typeof value === 'boolean' ){
+					canZoomWithPonter = value;
+				}
+			}
+
+			function setScale ( newScale ) {
+				var targetX = ( containerElSize.width - targetElSize.width * newScale ) / 2;
+				var targetY = ( containerElSize.height - targetElSize.height * newScale ) / 2;
+				var deltaX = 0;
+				var deltaY = 0;
+				var deltaScale = 0;
+				var easing = 0.2;
+
+				cancelAnimationFrame( scaleAnimationFrameId );
+				cancelAnimationFrame( centerAnimationFrameId );
+					
+				function scaleAnimationStep () {
+					deltaX = targetX - x;
+					deltaY = targetY - y;
+					deltaScale = newScale - scale;
+
+					if (
+						Math.abs( deltaX ) > 1 ||
+						Math.abs( deltaY ) > 1 ||
+						Math.abs( deltaScale ) > 0.01
+					) {
+						updateValues( x + deltaX * easing, y + deltaY * easing, scale + deltaScale * easing );
+												
+						scaleAnimationFrameId = requestAnimationFrame( scaleAnimationStep );
+					} else {
+						updateValues( targetX, targetY, newScale );
+					}
+				}
+
+				scaleAnimationStep();
+
+				return self;
+			}
+
+			function getCenterValues () {
+				updateContainerBounds();
+
+				var targetScale = 1;
+
+				if ( targetElSize.width > containerElSize.width || targetElSize.height > containerElSize.height ) {
+					targetScale = Math.min(
+						containerElSize.width / targetElSize.width,
+						( containerElSize.height - 80 ) / targetElSize.height
+					);
+				}
+
+				return {
+					x: ( containerElSize.width - targetElSize.width * targetScale ) / 2,
+					y: ( containerElSize.height - targetElSize.height * targetScale ) / 2,
+					scale: targetScale
+				};
+			}
+
+			this.updateContainerBounds = updateContainerBounds;
+			this.reset = reset;
+			this.setToCenter = setToCenter;
+			this.animateToCenter = animateToCenter;
+			this.setScale = setScale;
+			this.settingUpdated = settingUpdated;
+			this.resized = resized;
+		}
+
+		return PanZoom;
+	}
+);
--- a/scripts/views/saveview.js
+++ b/scripts/views/saveview.js
@ -0,0 +1,87 @@
+/*global define*/
+define(
+	[ 'util/el', 'util/addpublishers', 'util/browser', 'views/dialog', 'util/time' ],
+	function ( elHelper, addPublishers, browser, Dialog, timeHelper ) {
+		function SaveView ( parentEl ) {
+			if ( ! ( this instanceof SaveView ) ) {
+				return new SaveView( parentEl );
+			}
+
+			var self = this;
+			var publishers = addPublishers( self, 'savetolocalstorage', 'show' );
+
+			var saveButtonEl;
+			var navButtonEl;
+			var dialog;
+			var downloadLinkEl;
+			var date;
+			var fileId;
+			var isActive = false;
+
+			if ( browser.test( 'localforage' ) ) {
+				navButtonEl = elHelper.createButton( 'file.saveinbrowser', 'file.saveinbrowsertitle', 'nav-button save-view-button', parentEl );
+
+				dialog = Dialog( 'save-dialog', parentEl, navButtonEl );
+				
+				downloadLinkEl = elHelper.createLink(
+					'file.download',
+					'file.downloadtitle',
+					null, null,
+					'download-link button'
+				);
+
+				downloadLinkEl.target = '_blank';
+				
+				saveButtonEl = elHelper.createButton( 'file.save', 'file.savetitle', 'save-button button', null, saveButtonClicked )
+
+				dialog
+					.on( 'show', activate )
+					.on( 'hide', deactivate )
+					.add( saveButtonEl, downloadLinkEl );
+			}
+
+			function saveButtonClicked ( event ) {
+				dialog.toggle();
+				publishers.savetolocalstorage.dispatch();
+			}
+
+			// the href attribute of the download link is updated every time
+			// we change a parameter
+			function updateDownloadLink ( newUrl, fileName ) {
+				fileName = fileName || 'glitched';
+				
+				var newNameParts = fileName.split( '/' );
+				var newName = newNameParts.length > 1 ? newNameParts.pop() : newNameParts[0];
+				newName = newName.split( '.' ).shift();
+
+				date = new Date();
+				fileId = timeHelper.dateTimeToLocalStr( date );
+				var newFileName = ( newName + '-glitched-' + fileId + '.png' )
+				newFileName = newFileName.replace( /(\s|\/|:)/gmi, '-' );
+				
+				// setting the download attribute makes the browser
+				// download the link target instead of opening it
+				downloadLinkEl.setAttribute( 'download', newFileName );
+				downloadLinkEl.href = newUrl;
+			}
+
+			function activate () {
+				isActive = true;
+				publishers.show.dispatch();
+			}
+
+			function deactivate () {
+				isActive = false;
+			}
+
+			function getActive () {
+				return isActive;
+			}
+
+			self.updateDownloadLink = updateDownloadLink;
+			self.getActive = getActive;
+		}
+
+		return SaveView;
+	}
+);
--- a/scripts/views/settingsview.js
+++ b/scripts/views/settingsview.js
@ -0,0 +1,130 @@
+/*global define*/
+define(
+	[ 'util/el', 'views/dialog', 'util/addpublishers', 'util/localizetext' ],
+	function ( elHelper, Dialog, addPublishers, loc ) {
+		function SettingsView ( parentEl ) {
+			if ( ! ( this instanceof SettingsView ) ) {
+				return new SettingsView ( parentEl );
+			}
+
+			var self = this;
+			var publishers = addPublishers( self, 'settingchange' );
+			
+			var buttonEl = elHelper.createButton( 'settings.settings', 'settings.settingstitle', 'nav-button settings-button', parentEl );
+			var dialog = Dialog( 'settings-dialog', parentEl, buttonEl );
+			var animationFrameIds = { };
+
+			function addSetting ( name, value, options ) {
+				if ( ! dialog.el.querySelector( '#setting-' + name ) ) {
+					if ( name === 'language' ) {
+						dialog.add( 'is-online-only', makeSettingEl( name, value, options ) );
+					} else {
+						dialog.add( makeSettingEl( name, value, options ) );
+					}
+				}
+			}
+
+			function makeSettingEl ( name, value, options ) {
+				var wrapperEl = elHelper.createEl( 'div', 'setting' );
+				var labelEl = elHelper.createLabel( 'settings.' + name.toLowerCase(), 'setting-' + name, 'setting-label', wrapperEl );
+				var inputEl;
+
+				if ( options ) {
+					if ( Array.isArray( options ) ) {
+						inputEl = elHelper.createEl( 'select', 'setting-input setting-select', wrapperEl );
+
+						var optionEl;
+
+						options.forEach( function ( option ) {
+							optionEl = elHelper.createEl( 'option', null, inputEl );
+							optionEl.value = option;
+							
+							loc( optionEl, 'textContent', 'settings.' + name + 'options.' + option );
+
+							if ( option === value ) {
+								optionEl.selected = true
+							}
+						} );
+					}
+				} else {
+					if ( typeof value === 'boolean' ) {
+						inputEl = elHelper.createEl( 'input', 'setting-input setting-checkbox', wrapperEl );
+						inputEl.type = 'checkbox';
+
+						if ( value === true ) {
+							inputEl.checked = true;
+						}
+					}
+				}
+
+				if ( inputEl ) {
+					inputEl.id = 'setting-' + name;
+					inputEl.setAttribute( 'data-setting', name );
+					inputEl.addEventListener( 'change', settingInputChanged );
+				}
+
+				return wrapperEl;
+			}
+
+			function settingInputChanged ( event ) {
+				var target = event.target;
+
+				if ( event.target.classList.contains( 'setting-input' ) ) {
+					var inputEl = event.target;
+					var settingName = inputEl.getAttribute( 'data-setting' );
+					var inputValue;
+
+					if ( inputEl.classList.contains( 'setting-checkbox' ) ) {
+						inputValue = inputEl.checked;
+					} else {
+						if ( inputEl.classList.contains( 'setting-select' ) ) {
+							inputValue = inputEl.value;
+						}
+					}
+
+					if ( typeof inputValue !== 'undefined' ) {						
+						publishers.settingchange.dispatch( settingName, inputValue );
+					}
+ 				}
+			}
+
+			function settingUpdated ( name, value, options ) {
+				cancelAnimationFrame( animationFrameIds[name] );
+				animationFrameIds[name] = requestAnimationFrame( function () {
+					addSetting( name, value, options );
+
+					var inputEl = dialog.el.querySelector( '.setting-checkbox[data-setting="' + name + '"]' );
+
+					if ( inputEl ) {
+						if ( inputEl.classList.contains( 'setting-checkbox' ) && inputEl.checked !== value ) {
+							inputEl.checked = value;
+						}
+
+						if ( inputEl.classList.contains( 'setting-select' ) && inputEl.value !== value ) {
+							var optionsEls = inputEl.querySelector( 'option' );
+							var optionEl;
+							var optionValue;
+							
+							for ( var i = 0, len = optionsEls.length; i < len; i++ ) {
+								optionEl = optionsEls[i];
+								optionValue = optionEl.value;
+
+								if ( optionValue === value && ! optionEl.selected ) {
+									optionEl.selected = true;
+								}
+
+								if ( optionValue !== value && optionEl.selected ) {
+									optionEl.selected = false;
+								}
+							}
+						}
+					}
+				} );
+			}
+
+			self.settingUpdated = settingUpdated;
+		}
+
+		return SettingsView;
+	}
+);
--- a/scripts/views/shareview.js
+++ b/scripts/views/shareview.js
@ -0,0 +1,337 @@
+/*global define*/
+define(
+	[ 'util/addpublishers', 'views/dialog', 'util/el', 'util/browser', 'util/time', 'util/localizetext' ],
+	function ( addPublishers, Dialog, elHelper, browser, timeHelper, loc ) {
+		// shareview lets users upload their glitched image to imgur and
+		// share links on social media
+		function ShareView ( parentEl ) {
+			if ( ! ( this instanceof ShareView ) ) {
+				return new ShareView( parentEl );
+			}
+
+			var self = this;
+			var publishers = addPublishers( self, 'share', 'deletefromimgur' );
+			var clearTimeoutId = NaN;
+			var dialog;
+			var canUpload = true;
+
+			// storing some of the UI strings that we'll need a multiple times
+			// later on.
+			var isOnlineCssClass = 'is-online-only';
+			var wasLoadedCssClass = 'was-loaded';
+			var isLoadingCssClass = 'is-loading';
+			var isEmptyCssClass = 'is-empty';
+			var blankTargetStr = '_blank';
+			var disabledAttr = 'disabled';
+
+			var navButtonEl = elHelper.createButton( 'share.share', 'share.sharetitle', 'nav-button share-toggle-button ' + isOnlineCssClass, parentEl );
+
+			var statusEl = elHelper.createEl( 'span', 'upload-status' );
+			loc( statusEl, 'textContent', 'share.uploading' );
+
+			var uploadInfoEl = elHelper.createEl( 'p', 'share-info' );
+			loc( uploadInfoEl, 'innerHTML', 'share.info' );
+
+			var uploadButtonEl = elHelper.createButton( 'share.upload', 'share.uploadtitle', 'upload-button button ' + isOnlineCssClass, null, uploadClicked );
+
+			var imgLinkLabel = elHelper.createLabel( 'share.imagelink', 'img-link-input', 'img-link-label label' );
+			var imgLinkEl = elHelper.createLink( null, 'share.opennewtabtitle', null, blankTargetStr, 'img-link' );
+			imgLinkEl.id = 'img-link-input';
+
+			var imgurLinkEl = elHelper.createLink( null, null, null, blankTargetStr, 'imgur-link button' );
+			loc( imgurLinkEl, 'textContent', 'share.openon', 'Imgur' );
+			loc( imgurLinkEl, 'title', 'share.openontitle', 'Imgur' );
+
+			var redditShareLinkEl = elHelper.createLink( null, null, null, blankTargetStr, 'reddit-link button' );
+			loc( redditShareLinkEl, 'textContent', 'share.shareon', 'Reddit' );
+			loc( redditShareLinkEl, 'title', 'share.shareontitle', 'Reddit' );
+
+			var twitterShareLinkEl = elHelper.createLink( null, null, null, blankTargetStr, 'twitter-link button' );
+			loc( twitterShareLinkEl, 'textContent', 'share.shareon', 'Twitter' );
+			loc( twitterShareLinkEl, 'title', 'share.shareontitle', 'Twitter' );
+
+			var facebookShareLinkEl = elHelper.createLink( null, null, null, blankTargetStr, 'facebook-link button' );
+			loc( facebookShareLinkEl, 'textContent', 'share.shareon', 'Facebook' );
+			loc( facebookShareLinkEl, 'title', 'share.shareontitle', 'Facebook' );
+
+			var pinterestShareLinkEl = elHelper.createLink( null, null, null, blankTargetStr, 'pinterest-link button' );
+			loc( pinterestShareLinkEl, 'textContent', 'share.shareon', 'Pinterest' );
+			loc( pinterestShareLinkEl, 'title', 'share.shareontitle', 'Pinterest' );
+
+			var sharedListEl;
+
+			dialog = Dialog( 'share-dialog', parentEl, navButtonEl )
+				.add( isOnlineCssClass, uploadInfoEl )
+				.add( isOnlineCssClass, uploadButtonEl )
+				.add( isOnlineCssClass, 'loader', statusEl )
+				.add( isOnlineCssClass, imgLinkLabel, imgLinkEl )
+				.add( isOnlineCssClass, imgurLinkEl )
+				.add( isOnlineCssClass, redditShareLinkEl )
+				.add( isOnlineCssClass, twitterShareLinkEl )
+				.add( isOnlineCssClass, facebookShareLinkEl )
+				.add( isOnlineCssClass, pinterestShareLinkEl );
+
+			if ( browser.test( 'localforage' ) ) {
+				sharedListEl = elHelper.createEl( 'ul', 'shared-list dialog-list' );
+
+				var storageLabelEl = elHelper.createLabel( 'share.recentlyshared', null, 'load-label label' );
+
+				dialog.add( 'has-list shared-list', storageLabelEl, sharedListEl );
+			}
+
+			function uploadClicked () {
+				if ( canUpload ) {
+					publishers.share.dispatch();
+					hideShareLinks();
+				}
+			}
+
+			function updateShareUrl ( imgUrl, imgId ) {
+				clearTimeout( clearTimeoutId );
+
+				dialog.el.classList.add( 'has-links' );
+				imgLinkEl.textContent = imgUrl;
+				imgLinkEl.href = imgUrl;
+				imgLinkEl.setAttribute( 'data-imgurid', imgId );
+				imgurLinkEl.href = 'https://imgur.com/' + imgId;
+
+				redditShareLinkEl.href = getRedditShareUrl( imgUrl );
+				twitterShareLinkEl.href = getTwitterShareUrl( imgUrl );
+				facebookShareLinkEl.href = getFacebookShareUrl( imgUrl );
+				pinterestShareLinkEl.href = getPinterestShareUrl( imgUrl );
+			}
+
+			function clearShareUrl () {
+				dialog.el.classList.remove( 'has-links' );
+				imgLinkEl.textContent = '';
+				imgLinkEl.href = 'about:blank';
+				redditShareLinkEl.href = 'about:blank';
+				twitterShareLinkEl.href = 'about:blank';
+				facebookShareLinkEl.href = 'about:blank';
+			}
+
+			function showUpload () {
+				dialog.el.classList.add( isLoadingCssClass );
+			}
+
+			function hideUpload () {
+				dialog.el.classList.remove( isLoadingCssClass );
+			}
+
+			function uploadComplete ( imgUrl, imgId, imgDeleteHash ) {
+				updateShareUrl( imgUrl, imgId );
+				showShareLinks();				
+			}
+
+			function hideShareLinks ( uid ) {
+				dialog.el.classList.remove( wasLoadedCssClass );
+				
+				clearTimeout( clearTimeoutId );
+				clearTimeoutId = setTimeout( clearShareUrl, 400 );
+				
+				return self;
+			}
+
+			function showShareLinks () {
+				dialog.el.classList.add( wasLoadedCssClass );
+
+				return self;
+			}
+
+			function showOnlineOptions () {
+				canUpload = true;
+				uploadButtonEl.removeAttribute( disabledAttr );
+
+				return self;
+			}
+
+			function hideOnlineOptions () {
+				canUpload = false;
+				uploadButtonEl.setAttribute( disabledAttr, disabledAttr );
+
+				return self;
+			}
+
+			function updateList ( entries ) {
+				if ( sharedListEl ) {
+					if ( entries && Object.keys( entries ).length ) {
+						var sharedListItemEl;
+
+						for ( var uid in entries ) {
+							sharedListItemEl = sharedListEl.querySelector( '[data-uid="' + uid + '"]' );
+							
+							if ( entries[uid].deleteHash && ! sharedListItemEl ) {
+								addListItem( uid, entries[uid] );
+							} else {
+								if ( ! entries[uid].deleteHash && sharedListItemEl ) {
+									removeListItem( sharedListItemEl );
+								}
+							}
+						}
+
+						var sharedListItemEls = sharedListEl.querySelectorAll( '[data-uid]' );
+
+						for ( var i = 0, len = sharedListItemEls.length; i < len; i++ ) {
+							var itemUid = sharedListItemEls[i].getAttribute( 'data-uid' );
+
+							if ( itemUid && ! entries[itemUid] ) {
+								removeListItem( sharedListItemEls[i] );
+							}
+						}
+					}
+
+					if ( hasSharedEntries( entries ) ) {
+						sharedListEl.wrapperEl.classList.remove( isEmptyCssClass );
+					} else {
+						sharedListEl.wrapperEl.classList.add( isEmptyCssClass );
+					}
+				}
+
+				return self;
+			}
+
+			function addListItem ( uid, entry ) {
+				if ( entry ) {
+					var date = timeHelper.timestampToDate( entry.timestamp );
+					
+					var listItemEl = elHelper.createEl( 'li', 'entry clear dialog-list-item', sharedListEl );
+					listItemEl.setAttribute( 'data-uid', uid );
+					
+					var listItemThumbnailEl = elHelper.createEl( 'img', 'entry-thumb', listItemEl );
+					listItemThumbnailEl.src = entry.thumbnail;
+					listItemThumbnailEl.addEventListener( 'click', loadItemFn( uid ) );
+
+					var textWrapperEl = elHelper.createEl( 'p', 'entry-text', listItemEl );
+
+					var listItemNameEl = elHelper.createEl( 'p', 'entry-name', textWrapperEl );
+					
+					if ( entry.name ) {
+						listItemNameEl.textContent = entry.name;;
+					} else {
+						loc( listItemNameEl, 'textContent', 'file.untitled' );
+					}
+
+					var listItemDateEl = elHelper.createEl( 'time', 'entry-datetime', textWrapperEl );
+					listItemDateEl.setAttribute( 'datetime', date.toISOString() );
+
+					var dateEl = elHelper.createEl( 'span', 'entry-date', listItemDateEl );
+					dateEl.textContent = timeHelper.dateToLocalStr( date );
+
+					var timeEl = elHelper.createEl( 'span', 'entry-time', listItemDateEl );
+					timeEl.textContent = timeHelper.timeToLocalStr( date );
+
+					var buttonWrapperEl = elHelper.createEl( 'div', 'entry-button-wrapper', listItemEl );
+
+					elHelper.createLink(
+						'file.openlink',
+						'file.openlinktitle',
+						entry.publicUrl,
+						blankTargetStr,
+						'open-link-button button ' + isOnlineCssClass,
+						buttonWrapperEl
+					);
+
+					elHelper.createButton(
+						'file.offline',
+						'file.offlinetitle',
+						'item-offline-button button ' + isOnlineCssClass,
+						buttonWrapperEl,
+						removeItemFromImgurFn( uid, entry.deleteHash )
+					);
+				}
+			}
+
+			function removeListItem ( itemEl ) {
+				itemEl.parentNode.removeChild( itemEl );
+			}
+
+			function removeItemFromImgurFn ( uid, deleteHash ) {
+				return function () {
+					var buttonEl = sharedListEl.querySelector( '[data-uid="' + uid + '"] .item-offline-button' );
+					
+					if ( buttonEl ) {
+						buttonEl.setAttribute( disabledAttr, disabledAttr );
+					}
+
+					publishers.deletefromimgur.dispatch( uid, deleteHash );
+				}
+			}
+
+			function loadItemFn ( uid ) {
+				return function () {
+					dialog.hide();
+					publishers.openfromlocalstorage.dispatch( uid );
+				}
+			}
+
+			function hasSharedEntries ( entries ) {
+				var result = false;
+
+				for ( var uid in entries ) {
+					if ( entries[uid].deleteHash ) {
+						result = true;
+						break;
+					}
+				}
+				return result;
+			}
+
+			function handleError ( message, data ) {
+				if ( data.type === 'imgurremovefail' && data.uid ) {
+					var buttonEl = sharedListEl.querySelector( '[data-uid="' + data.uid + '"] .item-offline-button' );
+					
+					if ( buttonEl ) {
+						buttonEl.removeAttribute( disabledAttr );
+					}
+				}
+			}
+
+			function getShareDescription ( imgUrl ) {
+				return 'Check out what I made with @snorpey’s glitch tool: ' + imgUrl + ' https://snorpey.github.io/jpg-glitch';
+			}
+
+			function getTwitterShareUrl ( imgUrl ) {
+				return 'https://twitter.com/intent/tweet?text=' + encodeURIComponent( getShareDescription( imgUrl ) );
+			}
+
+			function getRedditShareUrl ( imgUrl ) {
+				return 'https://www.reddit.com/submit?url=' + encodeURIComponent( imgUrl ) + '&title=Glitch!';
+			}
+
+			// http://ar.zu.my/how-to-really-customize-the-deprecated-facebook-sharer-dot-php/
+			function getFacebookShareUrl ( imgUrl ) {
+				var text = 'Check out what I made with this glitch tool: https://snorpey.github.io/jpg-glitch';
+				var shareUrl = 'https://www.facebook.com/sharer/sharer.php?s=100';
+				shareUrl += '&p[url]=' + imgUrl;
+				shareUrl += '&p[title]=Glitch!';
+				shareUrl += '&p[images][0]=' + imgUrl;
+				shareUrl += '&p[summary]=' + encodeURIComponent( text );
+
+				return shareUrl;
+			}
+
+			function getPinterestShareUrl ( imgUrl ) {
+				var text = 'I made this with snorpey\'s glitch tool: https://snorpey.github.io/jpg-glitch';
+				var link = 'https://snorpey.github.io/jpg-glitch';
+				var shareUrl = 'https://pinterest.com/pin/create/button/';
+				shareUrl += '?url=' + encodeURIComponent( link );
+				shareUrl += '&media=' + encodeURIComponent( imgUrl );
+				shareUrl += '&description=' + encodeURIComponent( text );
+
+				return shareUrl;
+			}
+
+			self.showUpload = showUpload;
+			self.hideUpload = hideUpload;
+			self.showShareLinks = showShareLinks;
+			self.hideShareLinks = hideShareLinks;
+			self.uploadComplete = uploadComplete;
+			self.updateList = updateList;
+			self.showOnlineOptions = showOnlineOptions;
+			self.hideOnlineOptions = hideOnlineOptions;
+			self.handleError = handleError;
+		}
+
+		return ShareView;
+	}
+);
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>`
				`@ -0,0 +1 @@`
				<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#fff" d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" /></svg>