25 files changed, 3440 insertions, 0 deletions
diff --git a/.bowerrc b/.bowerrc
new file mode 100644
index 0000000..1f5fb9e
--- /dev/null
+++ b/.bowerrc
@@ -0,0 +1,3 @@
+{
+	"directory": "js/vendor/"
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..1787d3b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,7 @@
+*~
+v1
+.DS_Store
+*.orig
+.sass-cache/
+.#*
+*.swp
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 0000000..bb6dfbd
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,52 @@
+module.exports = function(grunt) {
+
+	// Project configuration.
+	grunt.initConfig({
+		pkg: grunt.file.readJSON('package.json'),
+		concat: {
+      options: {
+        separator: ';'
+      },
+			dist: {
+				src: [
+					'js/vendor/FileSaver/FileSaver.js',
+					'js/vendor/dataUriToBlob.js',
+          'js/gif-encode/client.js',
+					'js/record.js'
+				],
+				dest: 'js/record.concat.js',
+			},
+      worker: {
+        src: [
+          'js/gif-encode/GIFEncoder.js',
+          'js/gif-encode/LZWEncoder.js',
+          'js/gif-encode/NeuQuant.js',
+          'js/gif-encode/worker.js'
+        ],
+        dest: 'js/gif-encode/worker.concat.js'
+      }
+		},
+		uglify: {
+			options: {
+				banner: '/* asdf.us/dither */\n'
+			},
+			build: {
+				src: 'js/record.concat.js',
+				dest: 'js/record.min.js'
+			}
+		},
+		watch: {
+			files: ['js/!(live.min|live.concat).js','js/vendor/*'],
+			tasks: ['default']
+		}
+	});
+
+	// Load tasks that we'll be using
+	grunt.loadNpmTasks('grunt-contrib-concat');
+	grunt.loadNpmTasks('grunt-contrib-uglify');
+	grunt.loadNpmTasks('grunt-contrib-watch');
+
+
+	// Default task(s).
+	grunt.registerTask('default', ['concat', 'uglify']);
+};
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..f7e1850
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,13 @@
+{
+	"name": "gif-record",
+	"version": "1.0.0",
+	"homepage": "http://asdf.us/dither/",
+	"authors": [
+		"julie lala"
+	],
+	"description": "record a gif from a canvas tag",
+	"private": true,
+	"dependencies": {
+		"FileSaver": "*"
+	}
+}
diff --git a/js/gif-encode/GIFEncoder.js b/js/gif-encode/GIFEncoder.js
new file mode 100755
index 0000000..01d3618
--- /dev/null
+++ b/js/gif-encode/GIFEncoder.js
@@ -0,0 +1,513 @@
+/**
+* This class lets you encode animated GIF files
+* Base class :  http://www.java2s.com/Code/Java/2D-Graphics-GUI/AnimatedGifEncoder.htm
+* @author Kevin Weiner (original Java version - kweiner@fmsware.com)
+* @author Thibault Imbert (AS3 version - bytearray.org)
+* @version 0.1 AS3 implementation
+*/
+
+//import flash.utils.ByteArray;
+//import flash.display.BitmapData;
+//import flash.display.Bitmap;
+//import org.bytearray.gif.encoder.NeuQuant
+//import flash.net.URLRequestHeader;
+//import flash.net.URLRequestMethod;
+//import flash.net.URLRequest;
+//import flash.net.navigateToURL;
+
+GIFEncoder = function() {
+	for(var i = 0, chr = {}; i < 256; i++) {
+		chr[i] = String.fromCharCode(i);
+  }
+			
+	function ByteArray(){
+		this.bin = [];
+	}
+
+	ByteArray.prototype.getData = function(){
+		for(var v = '', l = this.bin.length, i = 0; i < l; i++) {
+			v += chr[this.bin[i]];
+		}
+		return v;
+	}
+	ByteArray.prototype.writeByte = function(val){
+		this.bin.push(val);
+	}
+	ByteArray.prototype.writeUTFBytes = function(string) {
+		for(var l = string.length, i = 0; i < l; i++) {
+			this.writeByte(string.charCodeAt(i));
+		}
+	}
+	ByteArray.prototype.writeBytes = function(array, offset, length) {
+		for(var l = length || array.length, i = offset||0; i < l; i++) {
+			this.writeByte(array[i]);
+		}
+	}
+
+	var exports = {};
+	var width/*int*/ // image size
+	var height/*int*/;
+	var transparent/***/ = null; // transparent color if given
+	var transIndex/*int*/; // transparent index in color table
+	var repeat/*int*/ = -1; // no repeat
+	var delay/*int*/ = 0; // frame delay (hundredths)
+	var started/*Boolean*/ = false; // ready to output frames
+	var out/*ByteArray*/;
+	var image/*Bitmap*/; // current frame
+	var pixels/*ByteArray*/; // BGR byte array from frame
+	var indexedPixels/*ByteArray*/ // converted frame indexed to palette
+	var colorDepth/*int*/; // number of bit planes
+	var colorTab/*ByteArray*/; // RGB palette
+	var usedEntry/*Array*/ = new Array; // active palette entries
+	var palSize/*int*/ = 7; // color table size (bits-1)
+	var dispose/*int*/ = -1; // disposal code (-1 = use default)
+	var closeStream/*Boolean*/ = false; // close stream when finished
+	var firstFrame/*Boolean*/ = true;
+	var sizeSet/*Boolean*/ = false; // if false, get size from first frame
+	var sample/*int*/ = 1; // default sample interval for quantizer
+	var neuquantBrain = null;  // allow loading in a prefab neural net
+
+	/**
+	* Sets the delay time between each frame, or changes it for subsequent frames
+	* (applies to last frame added)
+	* int delay time in milliseconds
+	* @param ms
+	*/
+	
+	var setDelay = exports.setDelay = function setDelay(ms/*int*/) {
+		delay = Math.round(ms / 10);
+	}
+	
+	/**
+	* Sets the GIF frame disposal code for the last added frame and any
+	* 
+	* subsequent frames. Default is 0 if no transparent color has been set,
+	* otherwise 2.
+	* @param code
+	* int disposal code.
+	*/
+	
+	var setDispose = exports.setDispose = function setDispose(code/*int*/) {
+		if (code >= 0) dispose = code;
+	}
+	
+	/**
+	* Sets the number of times the set of GIF frames should be played. Default is
+	* 1; 0 means play indefinitely. Must be invoked before the first image is
+	* added.
+	* 
+	* @param iter
+	* int number of iterations.
+	* @return
+	*/
+	
+	var setRepeat = exports.setRepeat = function setRepeat(iter/*int*/) {
+		if (iter >= 0) repeat = iter;
+	}
+	
+	/**
+	* Sets the transparent color for the last added frame and any subsequent
+	* frames. Since all colors are subject to modification in the quantization
+	* process, the color in the final palette for each frame closest to the given
+	* color becomes the transparent color for that frame. May be set to null to
+	* indicate no transparent color.
+	* @param
+	* Color to be treated as transparent on display.
+	*/
+	
+	var setTransparent = exports.setTransparent = function setTransparent(c/*Number*/) {
+		transparent = c;
+	}
+	
+	/**
+	* The addFrame method takes an incoming BitmapData object to create each frames
+	* @param
+	* BitmapData object to be treated as a GIF's frame
+	*/
+	
+	/*Boolean*/
+	var addFrame = exports.addFrame = function addFrame(im/*BitmapData*/, is_imageData) {
+		if ((im == null) || ! started || out == null) {
+			throw new Error ("Please call start method before calling addFrame");
+			return false;
+		}
+		
+		var ok/*Boolean*/ = true;
+
+		try {
+			if ( ! is_imageData) {
+				image = im.getImageData(0,0, im.canvas.width, im.canvas.height).data;
+				if ( ! sizeSet) {
+					setSize(im.canvas.width, im.canvas.height);
+				}
+			}
+			else {
+				image = im;
+			}
+			getImagePixels(); // convert to correct format if necessary
+			analyzePixels(); // build color table & map pixels
+			
+			if (firstFrame) {
+				writeLSD(); // logical screen descriptior
+				writePalette(); // global color table
+				if (repeat >= 0) {
+					// use NS app extension to indicate reps
+					writeNetscapeExt();
+				}
+			}
+			
+			writeGraphicCtrlExt(); // write graphic control extension
+			writeImageDesc(); // image descriptor
+			if (!firstFrame) {
+				writePalette(); // local color table
+			}
+			writePixels(); // encode and write pixel data
+			firstFrame = false;
+		}
+		catch (e/*Error*/) {
+			ok = false;
+		}
+		return ok;
+	}
+	
+	/**
+	* Adds final trailer to the GIF stream, if you don't call the finish method
+	* the GIF stream will not be valid.
+	*/
+	
+	/*Boolean*/
+	var finish = exports.finish = function finish() {
+		if ( ! started) {
+			return false;
+		}
+
+		var ok/*Boolean*/ = true;
+		started = false;
+		try {
+			out.writeByte(0x3b); // gif trailer
+		}
+		catch (e/*Error*/) {
+			ok = false;
+		}
+		return ok;
+	}
+	
+	/**
+	* Resets some members so that a new stream can be started.
+	* This method is actually called by the start method
+	*/
+	
+	var reset = function reset () {
+		// reset for subsequent use
+		transIndex = 0;
+		image = null;
+		pixels = null;
+		indexedPixels = null;
+		colorTab = null;
+		closeStream = false;
+		firstFrame = true;
+	}
+
+	/**
+	* * Sets frame rate in frames per second. Equivalent to
+	* <code>setDelay(1000/fps)</code>.
+	* @param fps
+	* float frame rate (frames per second)         
+	*/
+	
+	var setFrameRate = exports.setFrameRate = function setFrameRate(fps/*Number*/) {
+		if (fps != 0xf) {
+			delay = Math.round(100/fps);
+		}
+	}
+	
+	/**
+	* Sets quality of color quantization (conversion of images to the maximum 256
+	* colors allowed by the GIF specification). Lower values (minimum = 1)
+	* produce better colors, but slow processing significantly. 10 is the
+	* default, and produces good color mapping at reasonable speeds. Values
+	* greater than 20 do not yield significant improvements in speed.
+	* @param quality
+	* int greater than 0.
+	* @return
+	*/
+	
+	var setQuality = exports.setQuality = function setQuality(quality/*int*/) {
+		sample = Math.max(1, quality);
+	}
+	
+	/**
+	* Sets the GIF frame size. The default size is the size of the first frame
+	* added if this method is not invoked.
+	* @param w
+	* int frame width.
+	* @param h
+	* int frame width.
+	*/
+	
+	var setSize = exports.setSize = function setSize(w/*int*/, h/*int*/) {
+		if (started && !firstFrame) {
+			return;
+		}
+		width = w;
+		height = h;
+		if (width < 1) width = 320;
+		if (height < 1) height = 240;
+		sizeSet = true;
+	}
+	
+	/**
+	*	After running the Neuquant on some test frames, it can be exported and then loaded
+	* into an uninitialized NQ instance on another worker and used accordingly.
+	*/
+	var setNeuquant = exports.setNeuquant = function setNeuquant(neuquant, colors){
+		neuquantBrain = neuquant;
+		colorTab = colors;
+	}
+	
+	/**
+	* Initiates GIF file creation on the given stream.
+	* @param os
+	* OutputStream on which GIF images are written.
+	* @return false if initial write failed.
+	*/
+	
+	var start = exports.start = function start() {
+		reset(); 
+		var ok/*Boolean*/ = true;
+		closeStream = false;
+		out = new ByteArray;
+		try {
+			out.writeUTFBytes("GIF89a"); // header
+		} catch (e/*Error*/) {
+			ok = false;
+		}
+		
+		return started = ok;
+	}
+	
+	var cont = exports.cont = function cont() {
+		reset(); 
+		var ok = true;
+		closeStream = false;
+		out = new ByteArray ();
+		return started = ok;
+	}
+	
+	/**
+	* Analyzes image colors and creates color map.
+	*/
+	
+	var analyzePixels = function analyzePixels() {
+		var len = pixels.length;
+		var nPix = len / 3;
+		indexedPixels = [];
+		// initialize quantizer
+		
+		var nq;
+		if (neuquantBrain && colorTab) {
+			nq = new NeuQuant();
+			nq.load(neuquantBrain);
+		}
+		else {
+			nq = new NeuQuant (pixels, len, sample);
+			colorTab = nq.process(); // create reduced palette
+		}
+		
+		// map image pixels to new palette
+		var k = 0;
+		for (var j = 0; j < nPix; j++) {
+			var index = nq.map(pixels[k++] & 0xff, pixels[k++] & 0xff, pixels[k++] & 0xff);
+			usedEntry[index] = true;
+			indexedPixels[j] = index;
+		}
+		pixels = null;
+		colorDepth = 8;
+		palSize = 7;
+		
+		// get closest match to transparent color if specified
+		if (transparent != null) {
+			transIndex = findClosest(transparent);
+		}
+	}
+	
+	/**
+	* Returns index of palette color closest to c
+	*/
+	
+	var findClosest = function findClosest(c/*Number*/) {
+		if (colorTab == null) return -1;
+		var r = (c & 0xFF0000) >> 16;
+		var g = (c & 0x00FF00) >> 8;
+		var b = (c & 0x0000FF);
+		var minpos = 0;
+		var dmin = 256 * 256 * 256;
+		var len = colorTab.length;
+		
+		for (var i = 0; i < len;) {
+			var dr = r - (colorTab[i++] & 0xff);
+			var dg = g - (colorTab[i++] & 0xff);
+			var db = b - (colorTab[i] & 0xff);
+			var d = dr * dr + dg * dg + db * db;
+			var index = i / 3;
+			if (usedEntry[index] && (d < dmin)) {
+				dmin = d;
+				minpos = index;
+			}
+			i++;
+		}
+		return minpos;
+	}
+	
+	/**
+	* Extracts image pixels into byte array "pixels
+	*/
+	
+	var getImagePixels = function getImagePixels() {
+		var w = width;
+		var h = height;
+		pixels = [];
+		var data = image;
+		var count/*int*/ = 0;
+			
+		for ( var i/*int*/ = 0; i < h; i++ ) {
+			for (var j/*int*/ = 0; j < w; j++ ) {
+				var b = (i*w*4)+j*4;
+				pixels[count++] = data[b];
+				pixels[count++] = data[b+1];
+				pixels[count++] = data[b+2];
+			}
+		}
+	}
+	
+	/**
+	* Writes Graphic Control Extension
+	*/
+	
+	var writeGraphicCtrlExt = function writeGraphicCtrlExt() {
+		out.writeByte(0x21); // extension introducer
+		out.writeByte(0xf9); // GCE label
+		out.writeByte(4); // data block size
+		var transp/*int*/
+		var disp/*int*/;
+		if (transparent == null) {
+			transp = 0;
+			disp = 0; // dispose = no action
+		}
+		else {
+			transp = 1;
+			disp = 2; // force clear if using transparent color
+		}
+		if (dispose >= 0) {
+			disp = dispose & 7; // user override
+		}
+		disp <<= 2;
+		// packed fields
+		out.writeByte(0 | // 1:3 reserved
+				disp | // 4:6 disposal
+				0 | // 7 user input - 0 = none
+				transp); // 8 transparency flag
+	
+		WriteShort(delay); // delay x 1/100 sec
+		out.writeByte(transIndex); // transparent color index
+		out.writeByte(0); // block terminator
+	}
+
+	/**
+	* Writes Image Descriptor
+	*/
+	
+	var writeImageDesc = function writeImageDesc() {
+		out.writeByte(0x2c); // image separator
+		WriteShort(0); // image position x,y = 0,0
+		WriteShort(0);
+		WriteShort(width); // image size
+		WriteShort(height);
+
+		// packed fields
+		if (firstFrame) {
+			// no LCT - GCT is used for first (or only) frame
+			out.writeByte(0);
+		}
+		else {
+			// specify normal LCT
+			out.writeByte(0x80 | // 1 local color table 1=yes
+					0 | // 2 interlace - 0=no
+					0 | // 3 sorted - 0=no
+					0 | // 4-5 reserved
+					palSize); // 6-8 size of color table
+		}
+	}
+	
+	/**
+	* Writes Logical Screen Descriptor
+	*/
+	
+	var writeLSD = function writeLSD() {
+		// logical screen size
+		WriteShort(width);
+		WriteShort(height);
+		// packed fields
+		out.writeByte((0x80 | // 1 : global color table flag = 1 (gct used)
+				0x70 | // 2-4 : color resolution = 7
+				0x00 | // 5 : gct sort flag = 0
+				palSize)); // 6-8 : gct size
+
+		out.writeByte(0); // background color index
+		out.writeByte(0); // pixel aspect ratio - assume 1:1
+	}
+	
+	/**
+	* Writes Netscape application extension to define repeat count.
+	*/
+	
+	var writeNetscapeExt = function writeNetscapeExt() {
+		out.writeByte(0x21); // extension introducer
+		out.writeByte(0xff); // app extension label
+		out.writeByte(11); // block size
+		out.writeUTFBytes("NETSCAPE" + "2.0"); // app id + auth code
+		out.writeByte(3); // sub-block size
+		out.writeByte(1); // loop sub-block id
+		WriteShort(repeat); // loop count (extra iterations, 0=repeat forever)
+		out.writeByte(0); // block terminator
+	}
+	
+	/**
+	* Writes color table
+	*/
+	var writePalette = function writePalette() {
+		out.writeBytes(colorTab);
+		var n/*int*/ = (3 * 256) - colorTab.length;
+		for (var i/*int*/ = 0; i < n; i++) {
+			out.writeByte(0);
+		}
+	}
+	
+	var WriteShort = function WriteShort (pValue/*int*/) { 
+		out.writeByte( pValue & 0xFF );
+		out.writeByte( (pValue >> 8) & 0xFF);
+	}
+	
+	/**
+	* Encodes and writes pixel data
+	*/
+	var writePixels = function writePixels() {
+		var myencoder = new LZWEncoder(width, height, indexedPixels, colorDepth);
+		myencoder.encode(out);
+	}
+	
+	/**
+	* retrieves the GIF stream
+	*/
+	var stream = exports.stream = function stream () {
+		return out; 
+	}
+	
+	var setProperties = exports.setProperties = function setProperties(has_start, is_first) {
+		started = has_start;
+		firstFrame = is_first;
+	}
+	
+	return exports;
+}
+
diff --git a/js/gif-encode/LZWEncoder.js b/js/gif-encode/LZWEncoder.js
new file mode 100644
index 0000000..e3c512a
--- /dev/null
+++ b/js/gif-encode/LZWEncoder.js
@@ -0,0 +1,328 @@
+/**
+* This class handles LZW encoding
+* Adapted from Jef Poskanzer's Java port by way of J. M. G. Elliott.
+* @author Kevin Weiner (original Java version - kweiner@fmsware.com)
+* @author Thibault Imbert (AS3 version - bytearray.org)
+* @version 0.1 AS3 implementation
+*/
+
+//import flash.utils.ByteArray;
+
+LZWEncoder = function()
+{
+		var exports = {};
+	/*private_static*/ var EOF/*int*/ = -1;
+	/*private*/ var imgW/*int*/;
+	/*private*/ var imgH/*int*/
+	/*private*/ var pixAry/*ByteArray*/;
+	/*private*/ var initCodeSize/*int*/;
+	/*private*/ var remaining/*int*/;
+	/*private*/ var curPixel/*int*/;
+	
+	// GIFCOMPR.C - GIF Image compression routines
+	// Lempel-Ziv compression based on 'compress'. GIF modifications by
+	// David Rowley (mgardi@watdcsu.waterloo.edu)
+	// General DEFINEs
+	
+	/*private_static*/ var BITS/*int*/ = 12;
+	/*private_static*/ var HSIZE/*int*/ = 5003; // 80% occupancy
+	
+	// GIF Image compression - modified 'compress'
+	// Based on: compress.c - File compression ala IEEE Computer, June 1984.
+	// By Authors: Spencer W. Thomas (decvax!harpo!utah-cs!utah-gr!thomas)
+	// Jim McKie (decvax!mcvax!jim)
+	// Steve Davies (decvax!vax135!petsd!peora!srd)
+	// Ken Turkowski (decvax!decwrl!turtlevax!ken)
+	// James A. Woods (decvax!ihnp4!ames!jaw)
+	// Joe Orost (decvax!vax135!petsd!joe)
+	
+	/*private*/ var n_bits/*int*/ // number of bits/code
+	/*private*/ var maxbits/*int*/ = BITS; // user settable max # bits/code
+	/*private*/ var maxcode/*int*/ // maximum code, given n_bits
+	/*private*/ var maxmaxcode/*int*/ = 1 << BITS; // should NEVER generate this code
+	/*private*/ var htab/*Array*/ = new Array;
+	/*private*/ var codetab/*Array*/ = new Array;
+	/*private*/ var hsize/*int*/ = HSIZE; // for dynamic table sizing
+	/*private*/ var free_ent/*int*/ = 0; // first unused entry
+	
+	// block compression parameters -- after all codes are used up,
+	// and compression rate changes, start over.
+	
+	/*private*/ var clear_flg/*Boolean*/ = false;
+	
+	// Algorithm: use open addressing double hashing (no chaining) on the
+	// prefix code / next character combination. We do a variant of Knuth's
+	// algorithm D (vol. 3, sec. 6.4) along with G. Knott's relatively-prime
+	// secondary probe. Here, the modular division first probe is gives way
+	// to a faster exclusive-or manipulation. Also do block compression with
+	// an adaptive reset, whereby the code table is cleared when the compression
+	// ratio decreases, but after the table fills. The variable-length output
+	// codes are re-sized at this point, and a special CLEAR code is generated
+	// for the decompressor. Late addition: construct the table according to
+	// file size for noticeable speed improvement on small files. Please direct
+	// questions about this implementation to ames!jaw.
+	
+	/*private*/ var g_init_bits/*int*/;
+	/*private*/ var ClearCode/*int*/;
+	/*private*/ var EOFCode/*int*/;
+	
+	// output
+	// Output the given code.
+	// Inputs:
+	// code: A n_bits-bit integer. If == -1, then EOF. This assumes
+	// that n_bits =< wordsize - 1.
+	// Outputs:
+	// Outputs code to the file.
+	// Assumptions:
+	// Chars are 8 bits long.
+	// Algorithm:
+	// Maintain a BITS character long buffer (so that 8 codes will
+	// fit in it exactly). Use the VAX insv instruction to insert each
+	// code in turn. When the buffer fills up empty it and start over.
+	
+	/*private*/ var cur_accum/*int*/ = 0;
+	/*private*/ var cur_bits/*int*/ = 0;
+	/*private*/ var masks/*Array*/ = [ 0x0000, 0x0001, 0x0003, 0x0007, 0x000F, 0x001F, 0x003F, 0x007F, 0x00FF, 0x01FF, 0x03FF, 0x07FF, 0x0FFF, 0x1FFF, 0x3FFF, 0x7FFF, 0xFFFF ];
+	
+	// Number of characters so far in this 'packet'
+	/*private*/ var a_count/*int*/;
+	
+	// Define the storage for the packet accumulator
+	/*private*/ var accum/*ByteArray*/ = [];
+	
+	var LZWEncoder = exports.LZWEncoder = function LZWEncoder (width/*int*/, height/*int*/, pixels/*ByteArray*/, color_depth/*int*/)
+	{
+		
+		imgW = width;
+		imgH = height;
+		pixAry = pixels;
+		initCodeSize = Math.max(2, color_depth);
+		
+	}
+	
+	// Add a character to the end of the current packet, and if it is 254
+	// characters, flush the packet to disk.
+	var char_out = function char_out(c/*Number*/, outs/*ByteArray*/)/*void*/
+	{
+		accum[a_count++] = c;
+		if (a_count >= 254) flush_char(outs);
+		
+	}
+	
+	// Clear out the hash table
+	// table clear for block compress
+	
+	var cl_block = function cl_block(outs/*ByteArray*/)/*void*/
+	{
+		
+		cl_hash(hsize);
+		free_ent = ClearCode + 2;
+		clear_flg = true;
+		output(ClearCode, outs);
+		
+	}
+	
+	// reset code table
+	var cl_hash = function cl_hash(hsize/*int*/)/*void*/
+	{
+		
+		for (var i/*int*/ = 0; i < hsize; ++i) htab[i] = -1;
+		
+	}
+	
+	var compress = exports.compress = function compress(init_bits/*int*/, outs/*ByteArray*/)/*void*/
+	
+	{
+		var fcode/*int*/;
+		var i/*int*/ /* = 0 */;
+		var c/*int*/;
+		var ent/*int*/;
+		var disp/*int*/;
+		var hsize_reg/*int*/;
+		var hshift/*int*/;
+		
+		// Set up the globals: g_init_bits - initial number of bits
+		g_init_bits = init_bits;
+		
+		// Set up the necessary values
+		clear_flg = false;
+		n_bits = g_init_bits;
+		maxcode = MAXCODE(n_bits);
+
+		ClearCode = 1 << (init_bits - 1);
+		EOFCode = ClearCode + 1;
+		free_ent = ClearCode + 2;
+
+		a_count = 0; // clear packet
+	
+		ent = nextPixel();
+
+		hshift = 0;
+		for (fcode = hsize; fcode < 65536; fcode *= 2)
+			++hshift;
+		hshift = 8 - hshift; // set hash code range bound
+
+		hsize_reg = hsize;
+		cl_hash(hsize_reg); // clear hash table
+	
+		output(ClearCode, outs);
+	
+		outer_loop: while ((c = nextPixel()) != EOF)
+		
+		{
+			
+			fcode = (c << maxbits) + ent;
+			i = (c << hshift) ^ ent; // xor hashing
+
+			if (htab[i] == fcode)
+			{
+			ent = codetab[i];
+			continue;
+			} else if (htab[i] >= 0) // non-empty slot
+			{
+				disp = hsize_reg - i; // secondary hash (after G. Knott)
+				if (i == 0)
+				disp = 1;
+				do 
+				{
+					
+					if ((i -= disp) < 0) i += hsize_reg;
+
+					if (htab[i] == fcode)
+					{
+					ent = codetab[i];
+					continue outer_loop;
+					}
+				} while (htab[i] >= 0);
+			}
+			
+			output(ent, outs);
+			ent = c;
+			if (free_ent < maxmaxcode)
+			{
+				codetab[i] = free_ent++; // code -> hashtable
+				htab[i] = fcode;
+			} else cl_block(outs);
+		}
+		
+		// Put out the final code.
+		output(ent, outs);
+		output(EOFCode, outs);
+		
+	}
+	
+	// ----------------------------------------------------------------------------
+	var encode = exports.encode = function encode(os/*ByteArray*/)/*void*/
+	{
+		os.writeByte(initCodeSize); // write "initial code size" byte
+		remaining = imgW * imgH; // reset navigation variables
+		curPixel = 0;
+		compress(initCodeSize + 1, os); // compress and write the pixel data
+		os.writeByte(0); // write block terminator
+		
+	}
+	
+	// Flush the packet to disk, and reset the accumulator
+	var flush_char = function flush_char(outs/*ByteArray*/)/*void*/
+	{
+		
+		if (a_count > 0)
+		{
+			outs.writeByte(a_count);
+			outs.writeBytes(accum, 0, a_count);
+			a_count = 0;
+		}
+		
+	}
+	
+	var MAXCODE = function MAXCODE(n_bits/*int*/)/*int*/
+	{
+		
+		return (1 << n_bits) - 1;
+		
+	}
+	
+	// ----------------------------------------------------------------------------
+	// Return the next pixel from the image
+	// ----------------------------------------------------------------------------
+	
+	var nextPixel = function nextPixel()/*int*/
+	{
+		
+		if (remaining == 0) return EOF;
+		
+		--remaining;
+		
+		var pix/*Number*/ = pixAry[curPixel++];
+		
+		return pix & 0xff;
+		
+	}
+	
+	var output = function output(code/*int*/, outs/*ByteArray*/)/*void*/
+	
+	{
+		cur_accum &= masks[cur_bits];
+		
+		if (cur_bits > 0) cur_accum |= (code << cur_bits);
+		else cur_accum = code;
+		
+		cur_bits += n_bits;
+		
+		while (cur_bits >= 8)
+		
+		{
+			
+			char_out((cur_accum & 0xff), outs);
+			cur_accum >>= 8;
+			cur_bits -= 8;
+			
+		}
+		
+		// If the next entry is going to be too big for the code size,
+		// then increase it, if possible.
+		
+		if (free_ent > maxcode || clear_flg)
+		{
+			
+			if (clear_flg)
+			{
+				
+				maxcode = MAXCODE(n_bits = g_init_bits);
+				clear_flg = false;
+				
+			} else
+			{
+				
+				++n_bits;
+				
+				if (n_bits == maxbits) maxcode = maxmaxcode;
+				
+				else maxcode = MAXCODE(n_bits);
+				
+			}
+			
+		}
+		
+		if (code == EOFCode) 
+		{
+			
+			// At EOF, write the rest of the buffer.
+			while (cur_bits > 0) 
+			{
+				
+				char_out((cur_accum & 0xff), outs);
+				cur_accum >>= 8;
+				cur_bits -= 8;
+			}
+			
+			
+			flush_char(outs);
+			
+		}
+		
+	}
+	LZWEncoder.apply(this, arguments);
+	 return exports;
+}
+
diff --git a/js/gif-encode/NeuQuant.js b/js/gif-encode/NeuQuant.js
new file mode 100644
index 0000000..91424ba
--- /dev/null
+++ b/js/gif-encode/NeuQuant.js
@@ -0,0 +1,538 @@
+/*
+* NeuQuant Neural-Net Quantization Algorithm
+* ------------------------------------------
+* 
+* Copyright (c) 1994 Anthony Dekker
+* 
+* NEUQUANT Neural-Net quantization algorithm by Anthony Dekker, 1994. See
+* "Kohonen neural networks for optimal colour quantization" in "Network:
+* Computation in Neural Systems" Vol. 5 (1994) pp 351-367. for a discussion of
+* the algorithm.
+* 
+* Any party obtaining a copy of these files from the author, directly or
+* indirectly, is granted, free of charge, a full and unrestricted irrevocable,
+* world-wide, paid up, royalty-free, nonexclusive right and license to deal in
+* this software and documentation files (the "Software"), including without
+* limitation the rights to use, copy, modify, merge, publish, distribute,
+* sublicense, and/or sell copies of the Software, and to permit persons who
+* receive copies from any such party to do so, with the only requirement being
+* that this copyright notice remain intact.
+*/
+
+/*
+* This class handles Neural-Net quantization algorithm
+* @author Kevin Weiner (original Java version - kweiner@fmsware.com)
+* @author Thibault Imbert (AS3 version - bytearray.org)
+* @version 0.1 AS3 implementation
+*/
+
+//import flash.utils.ByteArray;
+
+NeuQuant = function() {
+	var exports = {};
+	var netsize = 128; /* number of colours used */
+	
+	/* four primes near 500 - assume no image has a length so large */
+	/* that it is divisible by all four primes */
+	
+	var prime1 = 499;
+	var prime2 = 491;
+	var prime3 = 487;
+	var prime4 = 503;
+	var minpicturebytes = (3 * prime4);
+	
+	/* minimum size for input image */
+	/*
+	* Program Skeleton ---------------- [select samplefac in range 1..30] [read
+	* image from input file] pic = (unsigned char*) malloc(3*width*height);
+	* initnet(pic,3*width*height,samplefac); learn(); unbiasnet(); [write output
+	* image header, using writecolourmap(f)] inxbuild(); write output image using
+	* inxsearch(b,g,r)
+	*/
+
+	/*
+	* Network Definitions -------------------
+	*/
+	
+	var maxnetpos = (netsize - 1);
+	var netbiasshift = 4; /* bias for colour values */
+	var ncycles = 100; /* no. of learning cycles */
+	
+	/* defs for freq and bias */
+	var intbiasshift = 16; /* bias for fractions */
+	var intbias = (1 << intbiasshift);
+	var gammashift = 10; /* gamma = 1024 */
+	var gamma = (1 << gammashift);
+	var betashift = 10;
+	var beta = (intbias >> betashift); /* beta = 1/1024 */
+	var betagamma = (intbias << (gammashift - betashift));
+	
+	/* defs for decreasing radius factor */
+	var initrad = (netsize >> 3); /* for 256 cols, radius starts */
+	var radiusbiasshift = 6; /* at 32.0 biased by 6 bits */
+	var radiusbias = (1 << radiusbiasshift);
+	var initradius = (initrad * radiusbias); /* and decreases by a */
+	var radiusdec = 30; /* factor of 1/30 each cycle */
+	
+	/* defs for decreasing alpha factor */
+	var alphabiasshift = 10; /* alpha starts at 1.0 */
+	var initalpha = (1 << alphabiasshift);
+	var alphadec /* biased by 10 bits */
+	
+	/* radbias and alpharadbias used for radpower calculation */
+	var radbiasshift = 8;
+	var radbias = (1 << radbiasshift);
+	var alpharadbshift = (alphabiasshift + radbiasshift);
+	
+	var alpharadbias = (1 << alpharadbshift);
+	
+	/*
+	* Types and Global Variables --------------------------
+	*/
+	
+	var thepicture/*ByteArray*//* the input image itself */
+	var lengthcount; /* lengthcount = H*W*3 */
+	var samplefac; /* sampling factor 1..30 */
+	
+	// typedef int pixel[4]; /* BGRc */
+	var network; /* the network itself - [netsize][4] */
+	var netindex = new Array();
+	
+	/* for network lookup - really 256 */
+	var bias = new Array();
+	
+	/* bias and freq arrays for learning */
+	var freq = new Array();
+	var radpower = new Array();
+	
+	var NeuQuant = exports.NeuQuant = function NeuQuant(thepic, len, sample) {
+
+		// with no input, assume we'll load in a lobotomized neuquant later.
+		// otherwise, initialize the neural net stuff
+
+		if (thepic && len && sample) {
+			var i;
+			var p;
+			
+			thepicture = thepic;
+			lengthcount = len;
+			samplefac = sample;
+			
+			network = new Array(netsize);
+			
+			for (i = 0; i < netsize; i++) {
+				network[i] = new Array(4);
+				p = network[i];
+				p[0] = p[1] = p[2] = (i << (netbiasshift + 8)) / netsize;
+				freq[i] = intbias / netsize; /* 1/netsize */
+				bias[i] = 0;
+			}
+		}
+	}
+	
+	var colorMap = function colorMap() {
+		var map/*ByteArray*/ = [];
+		var index = new Array(netsize);
+		for (var i = 0; i < netsize; i++) {
+			index[network[i][3]] = i;
+		}
+		var k = 0;
+		for (var l = 0; l < netsize; l++) {
+			var j = index[l];
+			map[k++] = (network[j][0]);
+			map[k++] = (network[j][1]);
+			map[k++] = (network[j][2]);
+		}
+		return map;
+	}
+	
+	/*
+	 * Insertion sort of network and building of netindex[0..255] (to do after
+	 * unbias)
+	 * -------------------------------------------------------------------------------
+	 */
+	 
+	 var inxbuild = function inxbuild() {
+		var i;
+		var j;
+		var smallpos;
+		var smallval;
+		var p;
+		var q;
+		var previouscol
+		var startpos
+		
+		previouscol = 0;
+		startpos = 0;
+		for (i = 0; i < netsize; i++) {
+			p = network[i];
+			smallpos = i;
+			smallval = p[1]; /* index on g */
+			/* find smallest in i..netsize-1 */
+			for (j = i + 1; j < netsize; j++) {
+				q = network[j];
+				if (q[1] < smallval) { /* index on g */
+					smallpos = j;
+					smallval = q[1]; /* index on g */
+				}
+			}
+			
+			q = network[smallpos];
+			/* swap p (i) and q (smallpos) entries */
+			
+			if (i != smallpos) {
+				j = q[0];
+				q[0] = p[0];
+				p[0] = j;
+				j = q[1];
+				q[1] = p[1];
+				p[1] = j;
+				j = q[2];
+				q[2] = p[2];
+				p[2] = j;
+				j = q[3];
+				q[3] = p[3];
+				p[3] = j;
+			}
+			
+			/* smallval entry is now in position i */
+			
+			if (smallval != previouscol) {
+				netindex[previouscol] = (startpos + i) >> 1;
+				
+				for (j = previouscol + 1; j < smallval; j++) netindex[j] = i;
+				
+				previouscol = smallval;
+				startpos = i;
+			}
+		}
+		
+		netindex[previouscol] = (startpos + maxnetpos) >> 1;
+		for (j = previouscol + 1; j < 256; j++) netindex[j] = maxnetpos; /* really 256 */
+	 }
+	 
+	 /*
+	 * Main Learning Loop ------------------
+	 */
+	 
+	 var learn = function learn() {
+		 var i;
+		 var j;
+		 var b;
+		 var g
+		 var r;
+		 var radius;
+		 var rad;
+		 var alpha;
+		 var step;
+		 var delta;
+		 var samplepixels;
+		 var p/*ByteArray*/;
+		 var pix;
+		 var lim;
+		 
+		 if (lengthcount < minpicturebytes) samplefac = 1;
+		 
+		 alphadec = 30 + ((samplefac - 1) / 3);
+		 p = thepicture;
+		 pix = 0;
+		 lim = lengthcount;
+		 samplepixels = lengthcount / (3 * samplefac);
+		 delta = samplepixels / ncycles;
+		 alpha = initalpha;
+		 radius = initradius;
+		 
+		 rad = radius >> radiusbiasshift;
+		 if (rad <= 1) rad = 0;
+		 
+		 for (i = 0; i < rad; i++) radpower[i] = alpha * (((rad * rad - i * i) * radbias) / (rad * rad));
+		 
+		 if (lengthcount < minpicturebytes) step = 3;
+		 else if ((lengthcount % prime1) != 0) step = 3 * prime1;
+		 else if ((lengthcount % prime2) != 0) step = 3 * prime2;
+		 else if ((lengthcount % prime3) != 0) step = 3 * prime3;
+		 else step = 3 * prime4;
+		 
+		 i = 0;
+		 
+		 while (i < samplepixels) {
+			 b = (p[pix + 0] & 0xff) << netbiasshift;
+			 g = (p[pix + 1] & 0xff) << netbiasshift;
+			 r = (p[pix + 2] & 0xff) << netbiasshift;
+			 j = contest(b, g, r);
+			 
+			 altersingle(alpha, j, b, g, r);
+			 
+			 if (rad != 0) alterneigh(rad, j, b, g, r); /* alter neighbours */
+			 
+			 pix += step;
+			 
+			 if (pix >= lim) pix -= lengthcount;
+			 
+			 i++;
+			 
+			 if (delta == 0) delta = 1;
+			 
+			 if (i % delta == 0) {
+				 alpha -= alpha / alphadec;
+				 radius -= radius / radiusdec;
+				 rad = radius >> radiusbiasshift;
+				 
+				 if (rad <= 1) rad = 0;
+				 
+				 for (j = 0; j < rad; j++) radpower[j] = alpha * (((rad * rad - j * j) * radbias) / (rad * rad));
+			 }
+		 }
+	 }
+
+
+	/* Save the neural network so we can load it back in on another worker.
+	*/
+	var save = exports.save = function(){
+		var data = {
+			netindex: netindex,
+			netsize: netsize,
+			network: network
+		};
+		return data;
+	}
+	var load = exports.load = function(data){
+		netindex = data.netindex;
+		netsize = data.netsize;
+		network = data.network;
+	}
+	
+	
+	 /*
+	 ** Search for BGR values 0..255 (after net is unbiased) and return colour
+	 * index
+	 * ----------------------------------------------------------------------------
+	 */
+	
+	var map = exports.map = function map(b, g, r) {
+		var i;
+		var j;
+		var dist
+		var a;
+		var bestd;
+		var p;
+		var best;
+		 
+		bestd = 1000; /* biggest possible dist is 256*3 */
+		best = -1;
+		i = netindex[g]; /* index on g */
+		j = i - 1; /* start at netindex[g] and work outwards */
+
+		while ((i < netsize) || (j >= 0)) {
+			if (i < netsize) {
+				p = network[i];
+				dist = p[1] - g; /* inx key */
+				if (dist >= bestd) i = netsize; /* stop iter */
+				else {
+					i++;
+
+					if (dist < 0) dist = -dist;
+
+					a = p[0] - b;
+
+					if (a < 0) a = -a;
+
+					dist += a;
+
+					if (dist < bestd) {
+						a = p[2] - r;
+					
+						if (a < 0) a = -a;
+					
+						dist += a;
+					
+						if (dist < bestd) {
+							bestd = dist;
+							best = p[3];
+						}
+					}
+				}
+			}
+			if (j >= 0) {
+				p = network[j];
+			
+				dist = g - p[1]; /* inx key - reverse dif */
+			
+				if (dist >= bestd) j = -1; /* stop iter */
+				else { 
+					j--;
+					if (dist < 0) dist = -dist;
+					a = p[0] - b;
+					if (a < 0) a = -a;
+					dist += a;
+				
+					if (dist < bestd) {
+						a = p[2] - r;
+						if (a < 0)a = -a;
+						dist += a;
+						if (dist < bestd) {
+							bestd = dist;
+							best = p[3];
+						}
+					}
+				}
+			}
+		}
+		return best;
+	}
+	
+	var process = exports.process = function process() {
+		learn();
+		unbiasnet();
+		inxbuild();
+		return colorMap();
+	}
+	
+	/*
+	* Unbias network to give byte values 0..255 and record position i to prepare
+	* for sort
+	* -----------------------------------------------------------------------------------
+	*/
+	
+	var unbiasnet = function unbiasnet() {
+		var i;
+		var j;
+		for (i = 0; i < netsize; i++) {
+			network[i][0] >>= netbiasshift;
+			network[i][1] >>= netbiasshift;
+			network[i][2] >>= netbiasshift;
+			network[i][3] = i; /* record colour no */
+		}
+	}
+	
+	/*
+	* Move adjacent neurons by precomputed alpha*(1-((i-j)^2/[r]^2)) in
+	* radpower[|i-j|]
+	* ---------------------------------------------------------------------------------
+	*/
+	
+	var alterneigh = function alterneigh(rad, i, b, g, r) {
+		var j;
+		var k;
+		var lo;
+		var hi;
+		var a;
+		var m;
+		var p;
+
+		lo = i - rad;
+		if (lo < -1) lo = -1;
+		
+		hi = i + rad;
+		
+		if (hi > netsize) hi = netsize;
+		
+		j = i + 1;
+		k = i - 1;
+		m = 1;
+		
+		while ((j < hi) || (k > lo)) {
+			a = radpower[m++];
+			if (j < hi) {
+				p = network[j++];
+
+				try {
+					p[0] -= (a * (p[0] - b)) / alpharadbias;
+					p[1] -= (a * (p[1] - g)) / alpharadbias;
+					p[2] -= (a * (p[2] - r)) / alpharadbias;
+				} catch (e/*Error*/) {} // prevents 1.3 miscompilation
+			}
+			
+			if (k > lo) {
+				p = network[k--];
+				try { 
+					p[0] -= (a * (p[0] - b)) / alpharadbias;
+					p[1] -= (a * (p[1] - g)) / alpharadbias;
+					p[2] -= (a * (p[2] - r)) / alpharadbias;
+				} catch (e/*Error*/) {}
+			}
+		}
+	}
+	
+	/*
+	* Move neuron i towards biased (b,g,r) by factor alpha
+	* ----------------------------------------------------
+	*/
+	
+	var altersingle = function altersingle(alpha, i, b, g, r) {
+		/* alter hit neuron */
+		var n = network[i];
+		n[0] -= (alpha * (n[0] - b)) / initalpha;
+		n[1] -= (alpha * (n[1] - g)) / initalpha;
+		n[2] -= (alpha * (n[2] - r)) / initalpha;
+	}
+	
+	/*
+	* Search for biased BGR values ----------------------------
+	*/
+	
+	var contest = function contest(b, g, r) {
+		/* finds closest neuron (min dist) and updates freq */
+		/* finds best neuron (min dist-bias) and returns position */
+		/* for frequently chosen neurons, freq[i] is high and bias[i] is negative */
+		/* bias[i] = gamma*((1/netsize)-freq[i]) */
+		
+		var i;
+		var dist;
+		var a;
+		var biasdist;
+		var betafreq;
+		var bestpos;
+		var bestbiaspos;
+		var bestd;
+		var bestbiasd;
+		var n;
+		
+		bestd = ~(1 << 31);
+		bestbiasd = bestd;
+		bestpos = -1;
+		bestbiaspos = bestpos;
+		
+		for (i = 0; i < netsize; i++) {
+			n = network[i];
+			dist = n[0] - b;
+			
+			if (dist < 0) dist = -dist;
+			
+			a = n[1] - g;
+			
+			if (a < 0) a = -a;
+			
+			dist += a;
+			
+			a = n[2] - r;
+			
+			if (a < 0) a = -a;
+			
+			dist += a;
+			
+			if (dist < bestd) {
+				bestd = dist;
+				bestpos = i;
+			}
+			
+			biasdist = dist - ((bias[i]) >> (intbiasshift - netbiasshift));
+			
+			if (biasdist < bestbiasd) {
+				bestbiasd = biasdist;
+				bestbiaspos = i;
+			}
+			
+			betafreq = (freq[i] >> betashift);
+			freq[i] -= betafreq;
+			bias[i] += (betafreq << gammashift);
+		}
+		
+		freq[bestpos] += beta;
+		bias[bestpos] -= betagamma;
+		return (bestbiaspos);
+	}
+	
+	NeuQuant.apply(this, arguments);
+	return exports;
+}
diff --git a/js/gif-encode/client.js b/js/gif-encode/client.js
new file mode 100644
index 0000000..271cbb0
--- /dev/null
+++ b/js/gif-encode/client.js
@@ -0,0 +1,279 @@
+// Total frames to record
+var FRAMES_PER_GIF = 36;
+
+// Frames per second to read from the video
+var FPS = 12;
+
+// Per-frame delay in milliseconds
+var DELAY = Math.floor( 1000 / FPS );
+
+// Number of WebWorkers to create
+var WORKERS = 4;
+
+// Number of frames to use to build the gif palette (takes longest)
+var FRAMES_TO_QUANTIZE = 4;
+
+// Upload these gifs when finished??
+var DO_UPLOAD = true;
+
+function GifEncoder(){
+	var base = this;
+  this.working = false;
+  var canvases = [];
+  var contexts = [];
+  var frames = [];
+  var delays = [];
+  var width = 0;
+  var height = 0;
+  var frames_done = 0;
+
+	var initted = Date.now();
+	var started = Date.now();
+	var tube = base.tube = new Tube ()
+	
+	var workers = new Factory ();
+
+  var width, height;
+  var neuquant, colortab;
+
+	workers.hire("message", receiveMessage);
+	workers.hire("quantize", receiveQuantize);
+	workers.hire("encode", receiveEncode);
+
+	var reset = this.reset = function(){
+    resetFrames()
+		neuquant = null;
+		colortab = null;
+		base.quantized = false
+	}
+	var resetFrames = this.resetFrames = function(){
+		canvases = [];
+		contexts = [];
+		frames = [];
+    delays = [];
+    width = 0;
+    height = 0;
+    frames_done = 0;
+	}
+
+	this.on = function(){
+    base.tube.on.apply(base.tube, arguments)
+  };
+
+  this.off = function(){
+    base.tube.off.apply(base.tube, arguments)
+  };
+
+  var addFrame = this.addFrame = function(canvas, delay) {
+    var ctx = canvas.getContext('2d');
+		canvases.push(canvas);
+    contexts.push(ctx);
+    delays.push(delay);
+
+    if (canvases.length == 1) {
+      width = canvas.width;
+      height = canvas.height;
+    }
+  }
+  
+  var addFrames = this.addFrames = function(canvas_array, delay){
+    for (var i = 0; i < canvas_array.length; i++) {
+      var canvas = canvas_array[i]
+      var ctx = canvas.getContext('2d');
+      canvases.push(canvas);
+      contexts.push(ctx);
+      delays.push(delay);
+    }
+
+    if (canvases.length == canvas_array.length) {
+      width = canvas_array[0].width;
+      height = canvas_array[0].height;
+    }
+  }
+
+  var copyFrame = this.copyFrame = function(canvas, delay) {
+    var newCanvas = document.createElement("canvas");
+    var ctx = newCanvas.getContext('2d');
+    
+    ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height);
+    
+		canvases.push(newCanvas);
+    contexts.push(ctx);
+    delays.push(delay);
+    
+    if (canvases.length == 1) {
+      width = canvas.width;
+      height = canvas.height;
+    }
+  }
+  
+	function Factory () {
+		var base = this;
+		var w = 0; // which worker to work next
+    var ww = [];
+		base.init = function(){
+			for (var i = 0; i < WORKERS; i++) {
+				var worker = new Worker('js/vendor/gif-encode/worker.js');
+				worker.onmessage = base.receiveWork;
+				ww.push(worker);
+			}
+		}
+		var tasks = {};
+		base.hire = function(task, cb){
+			tasks[task] = cb;
+		}
+		base.work = function(job){
+			ww[++w % ww.length].postMessage(job);
+		}
+		base.receiveWork = function(e){
+			e.data.task in tasks && tasks[e.data.task](e);
+		}
+		base.init();
+	}
+
+	function receiveMessage(e){
+		console.log("[WORKER]", e.data.message);
+	}
+	
+  var neuquant, colortab;
+	var quantize = this.quantize = function () {
+		initted = Date.now();
+		started = Date.now();
+		var spritedata = spriteSheet(FRAMES_TO_QUANTIZE);
+		
+		workers.work({
+			task: 'quantize',
+			imageData: spritedata
+		});
+	}
+
+	function receiveQuantize(e) {
+		console.log(Date.now() - started, "quantization done");
+		neuquant = e.data.neuquant;
+		colortab = e.data.colortab;
+		base.quantized = true
+		base.tube("quantized")
+	}
+
+	var encode = this.encode = function (nq, ct) {
+    if (! canvases.length) {
+      throw Error ("No frames to encode")
+    }
+	  nq = nq || neuquant
+	  ct = ct || colortab
+
+		started = Date.now();
+    frames_done = 0;
+
+		console.log('working .... ');
+		var i = 0;
+
+		function sendWork () {
+			if (i == canvases.length) return doneSending();
+
+			var ctx = contexts[i];
+			var imdata = ctx.getImageData(0, 0, width, height).data;
+			var delay = delays[i];
+
+			workers.work({
+				task: 'encode',
+				frame_index: i,
+				frame_length: contexts.length-1,
+				height: height,
+				width: width,
+				delay: delay,
+				imageData: imdata,
+				neuquant: neuquant,
+				colortab: colortab
+			});
+
+			i++;
+			setTimeout(sendWork, 16);
+		}
+		function doneSending(){
+		  base.tube("done_sending")
+		}
+		sendWork();
+	}
+
+	function receiveEncode(e){
+		var frame_index = e.data["frame_index"];
+		var frame_data = e.data["frame_data"];
+
+		frames[frame_index] = frame_data;
+
+    base.tube("encoded-frame", frames.length, canvases.length)
+		for (var j = 0; j < canvases.length; j++) {
+			if (frames[j] == null) {
+				return;
+			}
+		}
+		console.log("FINISHED " + canvases.length);
+		var binary_gif = frames.join('');
+		var base64_gif = window.btoa(binary_gif);
+		var data_url = 'data:image/gif;base64,'+base64_gif;
+
+		base.working = false;
+
+		// photo.setAttribute('src', data_url);
+		// ui.doneEncodingPicture();
+    base.tube("rendered", binary_gif)
+    base.tube("rendered-url", data_url)
+// 		if (DO_UPLOAD) upload( base64_gif );
+
+		console.log((Date.now() - started), "processed frames");
+		console.log((Date.now() - initted), "done");
+	}
+	
+// 	function upload (base64_gif) {
+// 	  $("#working").html("UPLOADING")
+// 	  	
+//     console.log("starting upload")
+// 		var params = {
+// 			url: base64_gif
+// 		}
+//     $.ajax({
+//       'url': "/photos.json",
+//       'type': 'post',
+//       'data': csrf(params),
+//       'success': function(data){
+// 
+// //         $("#share").data("href", "/photos/" + data.hash)
+// //         $("#share, #make-another").fadeIn(400);
+// 				console.log(data);
+// 				console.log((Date.now() - started), "uploaded");
+// //         $("#photo").attr("src", data.url);
+// //         window.location.href = "/photos/" + data.hash
+//         localStorage.setItem('hash', data.hash)
+//         window.location.href = "/"
+//         // data.hash
+//       }
+//     });
+// 		console.log("ok");
+// 	}
+
+	function spriteSheet (frameCount) {
+		var start = Date.now();
+		frameCount = Math.min(contexts.length, frameCount);
+		var sprites = document.createElement("canvas");
+		var spriteContext = sprites.getContext('2d');
+		sprites.width = width;
+		sprites.height = height * frameCount;
+		var spritedata = spriteContext.getImageData(0, 0, sprites.width, sprites.height)
+		var spritedatadata = spritedata.data
+		var j = 0;
+		var ctxz = sample(contexts, 4);
+		while (frameCount--) {
+			var ctx = ctxz[frameCount];
+			var imdata = ctx.getImageData(0, 0, width, height).data;
+			for (var n = 0; n < imdata.length; j++, n++) {
+				spritedatadata[j] = imdata[n];
+			}
+		}
+		// spriteContext.putImageData(spritedata, 0, 0, 0, 0, sprites.width, sprites.height);
+		// upload( sprites.toDataURL("image/png").split(",")[1]
+		console.log(Date.now() - start, "built spritesheet");
+		return spritedata;
+	}
+ 
+}
diff --git a/js/gif-encode/tube.js b/js/gif-encode/tube.js
new file mode 100644
index 0000000..17d3bfd
--- /dev/null
+++ b/js/gif-encode/tube.js
@@ -0,0 +1,323 @@
+var nextTick = (function(){
+  // postMessage behaves badly on IE8
+  if (window.ActiveXObject || !window.postMessage) {
+    var nextTick = function(fn) {
+      setTimeout(fn, 0);
+    }
+  } else {
+    // based on setZeroTimeout by David Baron
+    // - http://dbaron.org/log/20100309-faster-timeouts
+    var timeouts = []
+      , name = 'next-tick-zero-timeout'
+
+    window.addEventListener('message', function(e){
+      if (e.source == window && e.data == name) {
+        if (e.stopPropagation) e.stopPropagation();
+        if (timeouts.length) timeouts.shift()();
+      }
+    }, true);
+
+    var nextTick = function(fn){
+      timeouts.push(fn);
+      window.postMessage(name, '*');
+    }
+  }
+
+  return nextTick;
+})()
+
+var Uid = (function(){
+  var id = 0
+  return function(){ return id++ + "" }
+})()
+
+
+var tokenize = (function(){
+  var tokenize = function(str, splitOn){
+    return str
+             .trim()
+             .split(splitOn || tokenize.default);
+  };
+
+  tokenize.default = /\s+/g;
+
+  return tokenize;
+})()
+
+// globber("*".split(":"), "a:b:c".split(":")) => true
+// globber("*:c".split(":"), "a:b:c".split(":")) => true
+// globber("a:*".split(":"), "a:b:c".split(":")) => true
+// globber("a:*:c".split(":"), "a:b:c".split(":")) => true
+
+// based on codegolf.stackexchange.com/questions/467/implement-glob-matcher
+var globber = function(patterns, strings) {
+  // console.log("globber called with: " + patterns.join(":"), strings.join(":"))
+  var first = patterns[0],
+      rest = patterns.slice(1),
+      len = strings.length,
+      matchFound;
+
+  if(first === '*') { 
+    for(var i = 0; i <= len; ++i) {
+      // console.log("* " + i + " trying " + rest.join(":") + " with " + strings.slice(i).join(":"))
+      if(globber(rest, strings.slice(i))) return true;
+    }
+    return false;
+  } else { 
+    matchFound = (first === strings[0]);
+    // console.log ("literal matching " + first + " " + strings[0] + " " + !!matched)
+  }
+
+  return matchFound && ((!rest.length && !len) || globber(rest, strings.slice(1)));
+};
+
+var setproto = function(obj, proto){
+  if (obj.__proto__)
+    obj.__proto__ = proto;
+  else
+    for (var key in proto)
+      obj[key] = proto[key];
+};
+
+
+var Tube = (function(){
+  var globcache = {};
+  var Tube = function(opts){
+    opts = opts || {};
+    if (opts.queue){
+      var c = function(){
+        var args = arguments;
+        // queueOrNextTick (function(){ c.send.apply(c, args) });
+        nextTick (function(){ c.send.apply(c, args) });
+        return c;
+      };
+    } else {
+      var c = function(){
+        c.send.apply(c, arguments);
+        return c;
+      };
+    }
+
+    setproto(c, Tube.proto);
+    c.listeners = {};
+    c.globListeners = {};
+
+    return c;
+  };
+
+  Tube.total = {};
+  Tube.proto = {};
+
+  /*
+  adds fns as listeners to a channel
+
+  on("msg", fn, {opts})
+  on("msg", [fn, fn2], {opts})
+  on("msg msg2 msg3", fn, {opts})
+  on({"msg": fn, "msg2": fn2}, {opts})
+  */
+
+  Tube.proto.on = function(){
+    var chan = this;
+    if (typeof arguments[0] === "string") { 
+    //if (arguments.length > 1) {           // on("msg", f)
+      var msgMap = {};
+      msgMap[arguments[0]] = arguments[1];
+      var opts = arguments[2] || {};
+    } else {                              // on({"msg": f, ...})
+      var msgMap = arguments[0];
+      var opts = arguments[1] || {};
+    }
+
+    for (var string in msgMap){
+      var msgs = string.split(" ");
+      var fs = msgMap[string];
+      if (!Array.isArray(fs)) fs = [fs];
+
+      for(var i=0, f; f=fs[i]; i++){
+        if (!f.uid) f.uid = Uid();
+      }
+
+      for(var i=0, msg; msg=msgs[i]; i++){
+        var listeners = (msg.indexOf("*") === -1) ?
+                          chan.listeners :
+                          chan.globListeners;
+
+        // todo: this probably wastes a lot of memory?
+        // make a copy of the listener, add to it, and replace the listener
+        // why not just push directly?
+        // send might be iterating over it... and that will fuck up the iteration
+
+        listeners[msg] = (msg in listeners) ?
+                           listeners[msg].concat(fs) :
+                           fs.concat();
+      }
+    }
+
+    return chan;
+  };
+
+  /*
+  off()
+  off("a:b:c")
+  off(f)
+  off("a:b:c", f)
+  off("a:b:c d:e:f")
+  off([f, f2])
+  off({"a": f, "b": f2})
+  */
+
+  Tube.proto.off = function(){ var chan = this;
+
+    var listeners, i, msgs, msg;
+
+    // off() : delete all listeners. but replace, instead of delete
+    if (arguments.length === 0) { 
+      chan.listeners = {};
+      chan.globListeners = {};
+      return chan;
+    }
+
+    // off("a:b:c d:e:f")
+    // remove all matching listeners
+    if (arguments.length === 1 && typeof arguments[0] === "string"){
+      // question... will this fuck up send if we delete in the middle of it dispatching?
+      msgs = arguments[0].split(" ");
+
+      for (i=0; msg=msgs[i]; i++){
+        delete chan.listeners[msg];
+        delete chan.globListeners[msg];
+      }
+      return chan;
+    }
+
+    // off(f) or off([f, f2])
+    // remove all matching functions
+    if (typeof arguments[0] === "function" || Array.isArray(arguments[0])) {
+      var fs = (typeof arguments[0] === "function") ? 
+                 [arguments[0]] :
+                 arguments[0];
+      // TODO
+      return chan;
+    }
+
+    // off("a:b:c", f) or off({"a": f, "b": f2})
+    if (arguments.length > 1) {           // off("msg", f)
+      var msgMap = {};
+      msgMap[arguments[0]] = arguments[1];
+    } else {                              // off({"msg": f, ...})
+      var msgMap = arguments[0];
+    }
+
+    for (var string in msgMap){
+      msgs = string.split(" ");
+
+      var fs = msgMap[string];
+      if (typeof fs === "function") fs = [fs];
+
+      for(var i=0; msg=msgs[i]; i++){
+        if (msg in chan.listeners)
+          listeners = chan.listeners;
+        else if (msg in chan.globListeners)
+          listeners = chan.globListeners;
+        else
+          continue;
+
+        // gotta do this carefully in case we are still iterating through the listener in send
+        // build a new array and assign it to the property, instead of mutating it.
+
+        // console.log(" length of listeners[" + msg + "]: " + listeners[msg].length)
+        // console.log(listeners[msg].join(","));
+        // console.log(fs.join(","));
+
+        listeners[msg] = listeners[msg].filter(
+                           function(f){ return fs.indexOf(f) === -1 }
+                         );
+
+        // console.log(" length of listeners[" + msg + "]: " + listeners[msg].length)
+
+      }
+    }
+
+    return chan;
+
+  };
+
+  /*
+  c = Tube()
+  c.on("foo", fn)
+  c("foo", "bar", [])
+
+  will call fn("bar", [], "foo")
+  */
+
+  Tube.proto.send = function(msgString /*, data... */){
+    // todo: don't do this?
+    if (!Tube.total[msgString]) Tube.total[msgString] = 0
+    Tube.total[msgString]+=1;
+
+    var listener,
+        listeners = this.listeners,
+        globListeners = this.globListeners,
+        //args = Array.prototype.splice.call(arguments, 1),
+        msgs = tokenize(msgString),
+        msg, f;
+
+    if (arguments.length) {
+      var args = Array.prototype.splice.call(arguments, 1);
+      args.push(msgString);
+
+    } else {
+      var args = [];
+    }
+
+    for (var m=0; msg=msgs[m]; m++){
+
+      var fsToRun = [];
+      var uidKeyFnValue = {};
+      var uidKeyMsgStringValue = {};
+
+      // note this will die on errors
+      // todo: implement http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/
+      // exact matches
+      if (listener = listeners[msg]) {
+        for (var i=0; f=listener[i]; i++){
+            // fsToRun.push([f, msg]);
+          uidKeyFnValue[f.uid] = f;
+          uidKeyMsgStringValue[f.uid] = msg;
+        }
+      }
+
+      // glob matches
+      var msgSplit = msg.split(":");
+
+      for (var pattern in globListeners){
+
+        if (pattern !== "*") { // * always matches
+          var patternSplit = globcache[pattern] || (globcache[pattern] = pattern.split(":"));
+          if (!globber(patternSplit, msgSplit)) continue;
+        }
+
+        listener = globListeners[pattern];
+
+        for (var i=0; f=listener[i]; i++){
+          //f.apply(window, args); // hm possibly pass the actual message to the func
+          // fsToRun.push([f, msg]);
+          uidKeyFnValue[f.uid] = f;
+          uidKeyMsgStringValue[f.uid] = msg;
+        }
+      }
+
+      var fns = [];
+      for (var f in uidKeyFnValue) fns.push(uidKeyFnValue[f]);
+
+      for (var i=0, f; f=fns[i]; i++)
+        f.apply(f, args);
+
+    }
+    return this;
+  };
+
+  return Tube;
+})()
+
diff --git a/js/gif-encode/util.js b/js/gif-encode/util.js
new file mode 100644
index 0000000..92d8129
--- /dev/null
+++ b/js/gif-encode/util.js
@@ -0,0 +1,15 @@
+function shuffle(a){
+	var aa = new Array(a.length);
+	aa[0] = a[0];
+
+	for (var i = 1; i < a.length; i++) {
+		var j = Math.floor( Math.random() * i );
+		aa[i] = aa[j];
+		aa[j] = a[i];
+	}
+	return aa;
+}
+function sample(a, n) {
+	var aa = shuffle(a);
+	return aa.slice(0,n);
+}
diff --git a/js/gif-encode/worker.js b/js/gif-encode/worker.js
new file mode 100644
index 0000000..b2f32d4
--- /dev/null
+++ b/js/gif-encode/worker.js
@@ -0,0 +1,88 @@
+importScripts('LZWEncoder.js', 'NeuQuant.js', 'GIFEncoder.js');
+
+self.onmessage = function(event) {
+	var data = event.data;
+	var task = data['task'];
+	switch (task) {
+		case 'encode':
+			encode (data);
+			break;
+		case 'quantize':
+			quantize(data);
+			break;
+	}
+}
+
+function log(msg) {
+  self.postMessage({
+  	task: 'message',
+		message: msg
+	});
+}
+
+function quantize (data) {
+  var imageData = data["imageData"];
+	var pixels = discardAlphaChannel( imageData.data );
+
+	var nq = new NeuQuant (pixels, pixels.length, 1);
+	var colortab = nq.process();
+
+  self.postMessage({
+  	task: 'quantize',
+		neuquant: nq.save(),
+		colortab: colortab
+	});
+}
+
+function discardAlphaChannel( imageData ) {
+	var pixels = [];
+
+	for ( var i = 0, b = 0, _len = imageData.length; i < _len; b += 4 ) {
+		pixels[i++] = imageData[b];
+		pixels[i++] = imageData[b+1];
+		pixels[i++] = imageData[b+2];
+	}
+	return pixels;
+}
+
+function encode (data) {
+  var frame_index = data["frame_index"];
+  var frame_length = data["frame_length"];
+  var height = data["height"];
+  var width = data["width"];
+  var imageData = data["imageData"];
+  var delay = data["delay"];
+  var neuquant = data["neuquant"];
+  var colortab = data["colortab"];
+
+  // Create a new GIFEncoder for every new worker
+  var encoder = new GIFEncoder();
+  encoder.setRepeat(0); 	// loop forever
+  encoder.setQuality(1);
+  encoder.setSize(width, height);
+  encoder.setDelay(delay);
+
+  if (frame_index == 0) {
+    encoder.start();
+  }
+  else {
+    encoder.cont();
+    encoder.setProperties(true, false); //started, firstFrame
+  }
+
+	// Load the neural net here because the color table gets clobbered by encoder.start();
+  encoder.setNeuquant(neuquant, colortab);
+  encoder.addFrame(imageData, true);
+
+  if(frame_length == frame_index) {
+    encoder.finish();
+  }
+
+  self.postMessage({
+  	task: 'encode',
+		frame_index: frame_index,
+		frame_data: encoder.stream().getData()
+	});
+	// on the page, search for the GIF89a to see the frame_index
+};
+
diff --git a/js/record.js b/js/record.js
new file mode 100644
index 0000000..fe8d0a1
--- /dev/null
+++ b/js/record.js
@@ -0,0 +1,162 @@
+(function(){
+  var canvases = document.getElementsByTagName("canvas")
+  if (canvases.length == 0) { alert("no canvas found"); return; }
+
+  var source = canvases[0]
+
+  var encoder = new GifEncoder()
+  encoder.on("encoded-frame", encoded_frame)
+  encoder.on("rendered", rendered_bytes)
+  encoder.on("rendered-url", rendered_url)
+
+  var w, h, x, y;
+  var last_t, frame_t, count, delay, done;
+  var frames = []
+  var curtain, outline
+  var dragging = false
+  var lastGif
+
+  init()
+  function init(){
+    document.body.style.width = "100%"
+    document.body.style.height = "100%"
+    document.body.parentNode.style.width = "100%"
+    document.body.parentNode.style.height = "100%"
+    var template = document.getElementById("template").innerHTML
+    var el = document.createElement("div")
+    el.innerHTML = template
+    document.body.appendChild(el)
+    bind()
+  }
+  function bind(){
+    curtain = document.getElementById("curtain")
+    outline = document.getElementById("outline")
+    controls = document.getElementById("outline")
+    document.getElementById("record").addEventListener("click", record, false)
+    document.getElementById("save").addEventListener("click", save, false)
+    curtain.addEventListener("mousedown", box_start, false)
+    curtain.addEventListener("mousemove", box_size, false)
+    curtain.addEventListener("mouseup", box_end, false)
+    outline.style.display = "none"
+    controls.style.display = "none"
+  }
+  function box_start(e){
+    x = e.pageX
+    y = e.pageY
+    w = 1
+    h = 1
+    dragging = true
+    outline.style.left = px(x-1)
+    outline.style.top = px(y-1)
+    outline.style.width = px(w)
+    outline.style.height = px(h)
+    outline.style.display = "block"
+  }
+  function box_size(e){
+    if (! dragging) return
+    w = e.pageX - x
+    h = e.pageY - y
+    outline.style.width = px(w)
+    outline.style.height = px(h)
+  }
+  function box_end(e){
+    dragging = false
+    controls.style.display = "block"
+    enable("record")
+    document.getElementById("record").focus()
+  }
+  function enable(id){ document.getElementById(id).removeAttribute("disabled") }
+  function disable(id){ document.getElementById(id).setAttribute("disabled","disabled") }
+  function px(n){ return n + "px" }
+  function record(){
+    count = parseInt(document.getElementById("framecount").value)
+    delay = parseFloat(document.getElementById("framedelay").value) * 1000
+    done = 0
+    frame_t = 0
+    build()
+    capture()
+    last_t = +new Date()
+    requestAnimationFrame(recordloop)
+    status("recording")
+    disable("record")
+  }
+  function recordloop(){
+    var canvas = document.createElement("canvas")
+    var t = +new Date()
+    frame_t += t - last_t
+    last_t = t
+    if (frame_t > delay) {
+      frame_t -= delay
+      capture()
+    }
+    if (done == count) {
+      render()
+    }
+    else {
+      requestAnimationFrame(recordloop)
+    }
+  }
+  function build(){
+    frames = new Array(count)
+    for (var i = 0; i < count; i++){
+      frames[i] = document.createElement("canvas")
+      frames[i].height = h
+      frames[i].width = w
+    }
+  }
+  function capture(){
+    var frame = frames[done++]
+    var ctx = frame.getContext('2d')
+    ctx.fillStyle = document.body.backgroundColor
+    ctx.fillRect(0,0,w,h)
+    ctx.drawImage(source, x, y, w, h, 0, 0, w, h)
+  }
+  function render(){
+    encoder.reset()
+    encoder.addFrames(frames, delay)
+    status("encoding")
+    try {
+      encoder.encode()
+    }
+    catch (e) {
+      rendering = false
+      status(e)
+      throw e
+    }
+  }
+  function status(s){
+    document.getElementById("status").innerHTML = s
+  }
+  function encoded_frame(done,count){
+    status("encoded " + done + " / " + count)
+  }
+  function rendered_bytes(bytes){
+    status(filesize(bytes.length))
+  }
+  function rendered_url(url){
+    var image = new Image ()
+    lastGif = image.src = url
+    document.getElementById("preview").innerHTML = ""
+    document.getElementById("preview").appendChild(image)
+    rendering = false
+    enable("record")
+    enable("save")
+  }
+  function save (){
+    if (! lastGif) return;
+    var filename = (window.location.host + window.location.pathname).replace(/[^a-zA-Z0-9]/g,"-").replace(/-+/,"-")
+    var blob = dataUriToBlob(lastGif)
+    saveAs(blob, filename + "-" + (+new Date()) + ".gif");
+  }
+  function filesize(n) {
+    if (n < 1e3) return n + " bytes"
+    if (n < 1e6) return decimalString(n/1e3) + " kb"
+    if (n < 1e9) return decimalString(n/1e6) + " mb"
+    return "WAY TOO BIG DUDE"
+  }
+  function decimalString(n){
+    var m = Math.floor(n);
+    return m + "." + Math.round((n-m)*10)
+  }
+})()
+
diff --git a/js/vendor/FileSaver/.bower.json b/js/vendor/FileSaver/.bower.json
new file mode 100644
index 0000000..586a935
--- /dev/null
+++ b/js/vendor/FileSaver/.bower.json
@@ -0,0 +1,15 @@
+{
+  "name": "FileSaver",
+  "main": "./FileSaver.js",
+  "dependencies": {},
+  "homepage": "https://github.com/eligrey/FileSaver.js",
+  "_release": "1f4b2f1724",
+  "_resolution": {
+    "type": "branch",
+    "branch": "master",
+    "commit": "1f4b2f1724b19ddaf5eae3d1523f7a8ae9cbf812"
+  },
+  "_source": "git://github.com/eligrey/FileSaver.js.git",
+  "_target": "*",
+  "_originalSource": "FileSaver"
+}
+\ No newline at end of file
diff --git a/js/vendor/FileSaver/FileSaver.js b/js/vendor/FileSaver/FileSaver.js
new file mode 100644
index 0000000..378a9dc
--- /dev/null
+++ b/js/vendor/FileSaver/FileSaver.js
@@ -0,0 +1,232 @@
+/* FileSaver.js
+ * A saveAs() FileSaver implementation.
+ * 2013-10-21
+ *
+ * By Eli Grey, http://eligrey.com
+ * License: X11/MIT
+ *   See LICENSE.md
+ */
+
+/*global self */
+/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
+  plusplus: true */
+
+/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
+
+var saveAs = saveAs
+  || (typeof navigator !== 'undefined' && navigator.msSaveOrOpenBlob && navigator.msSaveOrOpenBlob.bind(navigator))
+  || (function(view) {
+	"use strict";
+	var
+		  doc = view.document
+		  // only get URL when necessary in case BlobBuilder.js hasn't overridden it yet
+		, get_URL = function() {
+			return view.URL || view.webkitURL || view;
+		}
+		, URL = view.URL || view.webkitURL || view
+		, save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
+		, can_use_save_link =  !view.externalHost && "download" in save_link
+		, click = function(node) {
+			var event = doc.createEvent("MouseEvents");
+			event.initMouseEvent(
+				"click", true, false, view, 0, 0, 0, 0, 0
+				, false, false, false, false, 0, null
+			);
+			node.dispatchEvent(event);
+		}
+		, webkit_req_fs = view.webkitRequestFileSystem
+		, req_fs = view.requestFileSystem || webkit_req_fs || view.mozRequestFileSystem
+		, throw_outside = function (ex) {
+			(view.setImmediate || view.setTimeout)(function() {
+				throw ex;
+			}, 0);
+		}
+		, force_saveable_type = "application/octet-stream"
+		, fs_min_size = 0
+		, deletion_queue = []
+		, process_deletion_queue = function() {
+			var i = deletion_queue.length;
+			while (i--) {
+				var file = deletion_queue[i];
+				if (typeof file === "string") { // file is an object URL
+					URL.revokeObjectURL(file);
+				} else { // file is a File
+					file.remove();
+				}
+			}
+			deletion_queue.length = 0; // clear queue
+		}
+		, dispatch = function(filesaver, event_types, event) {
+			event_types = [].concat(event_types);
+			var i = event_types.length;
+			while (i--) {
+				var listener = filesaver["on" + event_types[i]];
+				if (typeof listener === "function") {
+					try {
+						listener.call(filesaver, event || filesaver);
+					} catch (ex) {
+						throw_outside(ex);
+					}
+				}
+			}
+		}
+		, FileSaver = function(blob, name) {
+			// First try a.download, then web filesystem, then object URLs
+			var
+				  filesaver = this
+				, type = blob.type
+				, blob_changed = false
+				, object_url
+				, target_view
+				, get_object_url = function() {
+					var object_url = get_URL().createObjectURL(blob);
+					deletion_queue.push(object_url);
+					return object_url;
+				}
+				, dispatch_all = function() {
+					dispatch(filesaver, "writestart progress write writeend".split(" "));
+				}
+				// on any filesys errors revert to saving with object URLs
+				, fs_error = function() {
+					// don't create more object URLs than needed
+					if (blob_changed || !object_url) {
+						object_url = get_object_url(blob);
+					}
+					if (target_view) {
+						target_view.location.href = object_url;
+					} else {
+                        window.open(object_url, "_blank");
+                    }
+					filesaver.readyState = filesaver.DONE;
+					dispatch_all();
+				}
+				, abortable = function(func) {
+					return function() {
+						if (filesaver.readyState !== filesaver.DONE) {
+							return func.apply(this, arguments);
+						}
+					};
+				}
+				, create_if_not_found = {create: true, exclusive: false}
+				, slice
+			;
+			filesaver.readyState = filesaver.INIT;
+			if (!name) {
+				name = "download";
+			}
+			if (can_use_save_link) {
+				object_url = get_object_url(blob);
+				// FF for Android has a nasty garbage collection mechanism
+				// that turns all objects that are not pure javascript into 'deadObject'
+				// this means `doc` and `save_link` are unusable and need to be recreated
+				// `view` is usable though:
+				doc = view.document;
+				save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a");
+				save_link.href = object_url;
+				save_link.download = name;
+				var event = doc.createEvent("MouseEvents");
+				event.initMouseEvent(
+					"click", true, false, view, 0, 0, 0, 0, 0
+					, false, false, false, false, 0, null
+				);
+				save_link.dispatchEvent(event);
+				filesaver.readyState = filesaver.DONE;
+				dispatch_all();
+				return;
+			}
+			// Object and web filesystem URLs have a problem saving in Google Chrome when
+			// viewed in a tab, so I force save with application/octet-stream
+			// http://code.google.com/p/chromium/issues/detail?id=91158
+			if (view.chrome && type && type !== force_saveable_type) {
+				slice = blob.slice || blob.webkitSlice;
+				blob = slice.call(blob, 0, blob.size, force_saveable_type);
+				blob_changed = true;
+			}
+			// Since I can't be sure that the guessed media type will trigger a download
+			// in WebKit, I append .download to the filename.
+			// https://bugs.webkit.org/show_bug.cgi?id=65440
+			if (webkit_req_fs && name !== "download") {
+				name += ".download";
+			}
+			if (type === force_saveable_type || webkit_req_fs) {
+				target_view = view;
+			}
+			if (!req_fs) {
+				fs_error();
+				return;
+			}
+			fs_min_size += blob.size;
+			req_fs(view.TEMPORARY, fs_min_size, abortable(function(fs) {
+				fs.root.getDirectory("saved", create_if_not_found, abortable(function(dir) {
+					var save = function() {
+						dir.getFile(name, create_if_not_found, abortable(function(file) {
+							file.createWriter(abortable(function(writer) {
+								writer.onwriteend = function(event) {
+									target_view.location.href = file.toURL();
+									deletion_queue.push(file);
+									filesaver.readyState = filesaver.DONE;
+									dispatch(filesaver, "writeend", event);
+								};
+								writer.onerror = function() {
+									var error = writer.error;
+									if (error.code !== error.ABORT_ERR) {
+										fs_error();
+									}
+								};
+								"writestart progress write abort".split(" ").forEach(function(event) {
+									writer["on" + event] = filesaver["on" + event];
+								});
+								writer.write(blob);
+								filesaver.abort = function() {
+									writer.abort();
+									filesaver.readyState = filesaver.DONE;
+								};
+								filesaver.readyState = filesaver.WRITING;
+							}), fs_error);
+						}), fs_error);
+					};
+					dir.getFile(name, {create: false}, abortable(function(file) {
+						// delete file if it already exists
+						file.remove();
+						save();
+					}), abortable(function(ex) {
+						if (ex.code === ex.NOT_FOUND_ERR) {
+							save();
+						} else {
+							fs_error();
+						}
+					}));
+				}), fs_error);
+			}), fs_error);
+		}
+		, FS_proto = FileSaver.prototype
+		, saveAs = function(blob, name) {
+			return new FileSaver(blob, name);
+		}
+	;
+	FS_proto.abort = function() {
+		var filesaver = this;
+		filesaver.readyState = filesaver.DONE;
+		dispatch(filesaver, "abort");
+	};
+	FS_proto.readyState = FS_proto.INIT = 0;
+	FS_proto.WRITING = 1;
+	FS_proto.DONE = 2;
+
+	FS_proto.error =
+	FS_proto.onwritestart =
+	FS_proto.onprogress =
+	FS_proto.onwrite =
+	FS_proto.onabort =
+	FS_proto.onerror =
+	FS_proto.onwriteend =
+		null;
+
+	view.addEventListener("unload", process_deletion_queue, false);
+	return saveAs;
+}(this.self || this.window || this.content));
+// `self` is undefined in Firefox for Android content script context
+// while `this` is nsIContentFrameMessageManager
+// with an attribute `content` that corresponds to the window
+
+if (typeof module !== 'undefined') module.exports = saveAs;
diff --git a/js/vendor/FileSaver/LICENSE.md b/js/vendor/FileSaver/LICENSE.md
new file mode 100644
index 0000000..7eb56b9
--- /dev/null
+++ b/js/vendor/FileSaver/LICENSE.md
@@ -0,0 +1,30 @@
+This software is licensed under the MIT/X11 license.
+
+MIT/X11 license
+---------------
+
+Copyright &copy; 2011 [Eli Grey][1].
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+
+  [1]: http://eligrey.com
+\ No newline at end of file
diff --git a/js/vendor/FileSaver/README.md b/js/vendor/FileSaver/README.md
new file mode 100644
index 0000000..49aff62
--- /dev/null
+++ b/js/vendor/FileSaver/README.md
@@ -0,0 +1,78 @@
+FileSaver.js
+============
+
+FileSaver.js implements the HTML5 W3C `saveAs()` [FileSaver][1] interface in browsers that do
+not natively support it. There is a [FileSaver.js demo][2] that demonstrates saving
+various media types.
+
+FileSaver.js is the solution to saving files on the client-side, and is perfect for
+webapps that need to generate files, or for saving sensitive information that shouldn't be
+sent to an external server.
+
+Looking for `canvas.toBlob()` for saving canvases? Check out
+[canvas-toBlob.js](https://github.com/eligrey/canvas-toBlob.js) for a cross-browser implementation.
+
+Supported Browsers
+------------------
+
+| Browser        | Constructs as | Filenames    | Max Blob Size | Dependencies |
+| -------------- | ------------- | ------------ | ------------- | ------------ |
+| Firefox 20+    | Blob          | Yes          | 800MiB        | None         |
+| Firefox ≤ 19   | data: URI     | No           | n/a           | [Blob.js](https://github.com/eligrey/Blob.js) |
+| Chrome         | Blob          | Yes          | 345MiB        | None         |
+| Chrome for Android | Blob      | Yes          | ?             | None         |
+| IE 10+         | Blob          | Yes          | 600MiB        | None         |
+| Opera Next     | Blob          | Yes          | ?             | None         |
+| Opera < 15     | data: URI     | No           | n/a           | [Blob.js](https://github.com/eligrey/Blob.js) |
+| Safari 6.1+    | Blob          | No           | ?             | None         |
+| Safari < 6     | data: URI     | No           | n/a           | [Blob.js](https://github.com/eligrey/Blob.js) |
+
+Feature detection is possible:
+
+    try { var isFileSaverSupported = !!new Blob(); } catch(e){}
+
+Syntax
+------
+
+    FileSaver saveAs(in Blob data, in DOMString filename)
+
+Examples
+--------
+
+### Saving text
+
+    var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
+    saveAs(blob, "hello world.txt");
+
+The standard W3C File API [`Blob`][3] interface is not available in all browsers.
+[Blob.js][4] is a cross-browser `Blob` implementation that solves this.
+
+### Saving a canvas
+
+    var canvas = document.getElementById("my-canvas"), ctx = canvas.getContext("2d");
+	// draw to canvas...
+    canvas.toBlob(function(blob) {
+        saveAs(blob, "pretty image.png");
+    });
+
+Note: The standard HTML5 `canvas.toBlob()` method is not available in all browsers.
+[canvas-toBlob.js][5] is a cross-browser `canvas.toBlob()` that polyfills this.
+
+### Aborting a save
+
+    var filesaver = saveAs(blob, "whatever");
+    cancel_button.addEventListener("click", function() {
+        if (filesaver.abort) {
+            filesaver.abort();
+        }
+    }, false);
+
+This isn't that useful unless you're saving very large files (e.g. generated video).
+
+![Tracking image](https://in.getclicky.com/212712ns.gif)
+
+  [1]: http://www.w3.org/TR/file-writer-api/#the-filesaver-interface
+  [2]: http://eligrey.com/demos/FileSaver.js/
+  [3]: https://developer.mozilla.org/en-US/docs/DOM/Blob
+  [4]: https://github.com/eligrey/Blob.js
+  [5]: https://github.com/eligrey/canvas-toBlob.js
diff --git a/js/vendor/FileSaver/bower.json b/js/vendor/FileSaver/bower.json
new file mode 100644
index 0000000..0e0d7e0
--- /dev/null
+++ b/js/vendor/FileSaver/bower.json
@@ -0,0 +1,7 @@
+{
+    "name": "FileSaver",
+    "version": "1.0.0",
+    "main": "./FileSaver.js",
+    "dependencies": {
+    }
+}
diff --git a/js/vendor/FileSaver/demo/demo.css b/js/vendor/FileSaver/demo/demo.css
new file mode 100644
index 0000000..fe03ca5
--- /dev/null
+++ b/js/vendor/FileSaver/demo/demo.css
@@ -0,0 +1,55 @@
+html {
+	background-color: #DDD;
+}
+body {
+	width: 900px;
+	margin: 0 auto;
+	font-family: Verdana, Helvetica, Arial, sans-serif;
+	box-shadow: 0 0 5px #000;
+	box-shadow: 0 0 10px 2px rgba(0, 0, 0, .5);
+	padding: 7px 25px 70px;
+	background-color: #FFF;
+}
+h1, h2, h3, h4, h5, h6 {
+	font-family: Georgia, "Times New Roman", serif;
+}
+h2, form {
+	text-align: center;
+}
+form {
+	margin-top: 5px;
+}
+.input {
+	width: 500px;
+	height: 300px;
+	margin: 0 auto;
+	display: block;
+}
+section {
+	margin-top: 40px;
+}
+dt {
+	font-weight: bold;
+	font-size: larger;
+}
+#canvas {
+	cursor: crosshair;
+}
+#canvas, #html {
+	border: 1px solid black;
+}
+.filename {
+	text-align: right;
+}
+#html {
+	box-sizing: border-box;
+	ms-box-sizing: border-box;
+	webkit-box-sizing: border-box;
+	moz-box-sizing: border-box;
+	overflow: auto;
+	padding: 1em;
+}
+dt:target {
+	background-color: Highlight;
+	color: HighlightText;
+}
diff --git a/js/vendor/FileSaver/demo/demo.js b/js/vendor/FileSaver/demo/demo.js
new file mode 100644
index 0000000..e08497b
--- /dev/null
+++ b/js/vendor/FileSaver/demo/demo.js
@@ -0,0 +1,213 @@
+/* FileSaver.js demo script
+ * 2012-01-23
+ * 
+ * By Eli Grey, http://eligrey.com
+ * License: X11/MIT
+ *   See LICENSE.md
+ */
+
+/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/demo/demo.js */
+
+(function(view) {
+"use strict";
+// The canvas drawing portion of the demo is based off the demo at
+// http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
+var
+	  document = view.document
+	, $ = function(id) {
+		return document.getElementById(id);
+	}
+	, session = view.sessionStorage
+	// only get URL when necessary in case Blob.js hasn't defined it yet
+	, get_blob = function() {
+		return view.Blob;
+	}
+
+	, canvas = $("canvas")
+	, canvas_options_form = $("canvas-options")
+	, canvas_filename = $("canvas-filename")
+	, canvas_clear_button = $("canvas-clear")
+	
+	, text = $("text")
+	, text_options_form = $("text-options")
+	, text_filename = $("text-filename")
+	
+	, html = $("html")
+	, html_options_form = $("html-options")
+	, html_filename = $("html-filename")
+	
+	, ctx = canvas.getContext("2d")
+	, drawing = false
+	, x_points = session.x_points || []
+	, y_points = session.y_points || []
+	, drag_points = session.drag_points || []
+	, add_point = function(x, y, dragging) {
+		x_points.push(x);
+		y_points.push(y);
+		drag_points.push(dragging);
+	}
+	, draw = function(){
+		canvas.width = canvas.width;
+		ctx.lineWidth = 6;
+		ctx.lineJoin = "round";
+		ctx.strokeStyle = "#000000";
+		var
+			  i = 0
+			, len = x_points.length
+		;
+		for(; i < len; i++) {
+			ctx.beginPath();
+			if (i && drag_points[i]) {
+				ctx.moveTo(x_points[i-1], y_points[i-1]);
+			} else {
+				ctx.moveTo(x_points[i]-1, y_points[i]);
+			}
+			ctx.lineTo(x_points[i], y_points[i]);
+			ctx.closePath();
+			ctx.stroke();
+		}
+	}
+	, stop_drawing = function() {
+		drawing = false;
+	}
+	
+	// Title guesser and document creator available at https://gist.github.com/1059648
+	, guess_title = function(doc) {
+		var
+			  h = "h6 h5 h4 h3 h2 h1".split(" ")
+			, i = h.length
+			, headers
+			, header_text
+		;
+		while (i--) {
+			headers = doc.getElementsByTagName(h[i]);
+			for (var j = 0, len = headers.length; j < len; j++) {
+				header_text = headers[j].textContent.trim();
+				if (header_text) {
+					return header_text;
+				}
+			}
+		}
+	}
+	, doc_impl = document.implementation
+	, create_html_doc = function(html) {
+		var
+			  dt = doc_impl.createDocumentType('html', null, null)
+			, doc = doc_impl.createDocument("http://www.w3.org/1999/xhtml", "html", dt)
+			, doc_el = doc.documentElement
+			, head = doc_el.appendChild(doc.createElement("head"))
+			, charset_meta = head.appendChild(doc.createElement("meta"))
+			, title = head.appendChild(doc.createElement("title"))
+			, body = doc_el.appendChild(doc.createElement("body"))
+			, i = 0
+			, len = html.childNodes.length
+		;
+		charset_meta.setAttribute("charset", html.ownerDocument.characterSet);
+		for (; i < len; i++) {
+			body.appendChild(doc.importNode(html.childNodes.item(i), true));
+		}
+		var title_text = guess_title(doc);
+		if (title_text) {
+			title.appendChild(doc.createTextNode(title_text));
+		}
+		return doc;
+	}
+;
+canvas.width = 500;
+canvas.height = 300;
+
+  if (typeof x_points === "string") {
+	x_points = JSON.parse(x_points);
+} if (typeof y_points === "string") {
+	y_points = JSON.parse(y_points);
+} if (typeof drag_points === "string") {
+	drag_points = JSON.parse(drag_points);
+} if (session.canvas_filename) {
+	canvas_filename.value = session.canvas_filename;
+} if (session.text) {
+	text.value = session.text;
+} if (session.text_filename) {
+	text_filename.value = session.text_filename;
+} if (session.html) {
+	html.innerHTML = session.html;
+} if (session.html_filename) {
+	html_filename.value = session.html_filename;
+}
+
+drawing = true;
+draw();
+drawing = false;
+
+canvas_clear_button.addEventListener("click", function() {
+	canvas.width = canvas.width;
+	x_points.length =
+	y_points.length =
+	drag_points.length =
+		0;
+}, false);
+canvas.addEventListener("mousedown", function(event) {
+	event.preventDefault();
+	drawing = true;
+	add_point(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop, false);
+	draw();
+}, false);
+canvas.addEventListener("mousemove", function(event) {
+	if (drawing) {
+		add_point(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop, true);
+		draw();
+	}
+}, false);
+canvas.addEventListener("mouseup", stop_drawing, false);
+canvas.addEventListener("mouseout", stop_drawing, false);
+
+canvas_options_form.addEventListener("submit", function(event) {
+	event.preventDefault();
+	canvas.toBlob(function(blob) {
+		saveAs(
+			  blob
+			, (canvas_filename.value || canvas_filename.placeholder) + ".png"
+		);
+	}, "image/png");
+}, false);
+
+text_options_form.addEventListener("submit", function(event) {
+	event.preventDefault();
+	var BB = get_blob();
+	saveAs(
+		  new BB(
+			  [text.value || text.placeholder]
+			, {type: "text/plain;charset=" + document.characterSet}
+		)
+		, (text_filename.value || text_filename.placeholder) + ".txt"
+	);
+}, false);
+
+html_options_form.addEventListener("submit", function(event) {
+	event.preventDefault();
+	var
+		  BB = get_blob()
+		, xml_serializer = new XMLSerializer
+		, doc = create_html_doc(html)
+	;
+	saveAs(
+		  new BB(
+			  [xml_serializer.serializeToString(doc)]
+			, {type: "application/xhtml+xml;charset=" + document.characterSet}
+		)
+		, (html_filename.value || html_filename.placeholder) + ".xhtml"
+	);
+}, false);
+
+view.addEventListener("unload", function() {
+	session.x_points = JSON.stringify(x_points);
+	session.y_points = JSON.stringify(y_points);
+	session.drag_points = JSON.stringify(drag_points);
+	session.canvas_filename = canvas_filename.value;
+	
+	session.text = text.value;
+	session.text_filename = text_filename.value;
+	
+	session.html = html.innerHTML;
+	session.html_filename = html_filename.value;
+}, false);
+}(self));
diff --git a/js/vendor/FileSaver/demo/demo.min.js b/js/vendor/FileSaver/demo/demo.min.js
new file mode 100644
index 0000000..77f9ed1
--- /dev/null
+++ b/js/vendor/FileSaver/demo/demo.min.js
@@ -0,0 +1,2 @@
+/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/demo/demo.js */
+(function(n){"use strict";var s=n.document,g=function(A){return s.getElementById(A)},b=n.sessionStorage,x=function(){return n.Blob},f=g("canvas"),r=g("canvas-options"),y=g("canvas-filename"),p=g("canvas-clear"),q=g("text"),t=g("text-options"),h=g("text-filename"),m=g("html"),e=g("html-options"),i=g("html-filename"),u=f.getContext("2d"),z=false,a=b.x_points||[],o=b.y_points||[],d=b.drag_points||[],j=function(A,C,B){a.push(A);o.push(C);d.push(B)},l=function(){f.width=f.width;u.lineWidth=6;u.lineJoin="round";u.strokeStyle="#000000";var B=0,A=a.length;for(;B<A;B++){u.beginPath();if(B&&d[B]){u.moveTo(a[B-1],o[B-1])}else{u.moveTo(a[B]-1,o[B])}u.lineTo(a[B],o[B]);u.closePath();u.stroke()}},c=function(){z=false},w=function(E){var D="h6 h5 h4 h3 h2 h1".split(" "),C=D.length,F,G;while(C--){F=E.getElementsByTagName(D[C]);for(var B=0,A=F.length;B<A;B++){G=F[B].textContent.trim();if(G){return G}}}},v=s.implementation,k=function(D){var B=v.createDocumentType("html",null,null),J=v.createDocument("http://www.w3.org/1999/xhtml","html",B),A=J.documentElement,H=A.appendChild(J.createElement("head")),K=H.appendChild(J.createElement("meta")),I=H.appendChild(J.createElement("title")),E=A.appendChild(J.createElement("body")),C=0,G=D.childNodes.length;K.setAttribute("charset",D.ownerDocument.characterSet);for(;C<G;C++){E.appendChild(J.importNode(D.childNodes.item(C),true))}var F=w(J);if(F){I.appendChild(J.createTextNode(F))}return J};f.width=500;f.height=300;if(typeof a==="string"){a=JSON.parse(a)}if(typeof o==="string"){o=JSON.parse(o)}if(typeof d==="string"){d=JSON.parse(d)}if(b.canvas_filename){y.value=b.canvas_filename}if(b.text){q.value=b.text}if(b.text_filename){h.value=b.text_filename}if(b.html){m.innerHTML=b.html}if(b.html_filename){i.value=b.html_filename}z=true;l();z=false;p.addEventListener("click",function(){f.width=f.width;a.length=o.length=d.length=0},false);f.addEventListener("mousedown",function(A){A.preventDefault();z=true;j(A.pageX-f.offsetLeft,A.pageY-f.offsetTop,false);l()},false);f.addEventListener("mousemove",function(A){if(z){j(A.pageX-f.offsetLeft,A.pageY-f.offsetTop,true);l()}},false);f.addEventListener("mouseup",c,false);f.addEventListener("mouseout",c,false);r.addEventListener("submit",function(A){A.preventDefault();f.toBlob(function(B){saveAs(B,(y.value||y.placeholder)+".png")},"image/png")},false);t.addEventListener("submit",function(A){A.preventDefault();var B=x();saveAs(new B([q.value||q.placeholder],{type:"text/plain;charset="+s.characterSet}),(h.value||h.placeholder)+".txt")},false);e.addEventListener("submit",function(B){B.preventDefault();var D=x(),A=new XMLSerializer,C=k(m);saveAs(new D([A.serializeToString(C)],{type:"application/xhtml+xml;charset="+s.characterSet}),(i.value||i.placeholder)+".xhtml")},false);n.addEventListener("unload",function(){b.x_points=JSON.stringify(a);b.y_points=JSON.stringify(o);b.drag_points=JSON.stringify(d);b.canvas_filename=y.value;b.text=q.value;b.text_filename=h.value;b.html=m.innerHTML;b.html_filename=i.value},false)}(self));
+\ No newline at end of file
diff --git a/js/vendor/FileSaver/demo/index.xhtml b/js/vendor/FileSaver/demo/index.xhtml
new file mode 100644
index 0000000..abc8813
--- /dev/null
+++ b/js/vendor/FileSaver/demo/index.xhtml
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US-x-Hixie">
+<head>
+<meta charset="utf-8"/>
+<title>FileSaver.js demo</title>
+<link rel="stylesheet" type="text/css" href="demo.css"/>
+</head>
+<body>
+<h1><a href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a> demo</h1>
+<p>
+The following examples demonstrate how it is possible to generate and save any type of data right in the browser using the W3C <code>saveAs()</code> <a href="http://www.w3.org/TR/file-writer-api/#the-filesaver-interface">FileSaver</a> interface, without contacting any servers.
+</p>
+<section id="image-demo">
+	<h2>Saving an image</h2>
+	<canvas class="input" id="canvas" width="500" height="300"/>
+	<form id="canvas-options">
+		<label>Filename: <input type="text" class="filename" id="canvas-filename" placeholder="doodle"/>.png</label>
+		<input type="submit" value="Save"/>
+		<input type="button" id="canvas-clear" value="Clear"/>
+	</form>
+</section>
+<section id="text-demo">
+	<h2>Saving text</h2>
+	<textarea class="input" id="text" placeholder="Once upon a time..."/>
+	<form id="text-options">
+		<label>Filename: <input type="text" class="filename" id="text-filename" placeholder="a plain document"/>.txt</label>
+		<input type="submit" value="Save"/>
+	</form>
+</section>
+<section id="html-demo">
+	<h2>Saving rich text</h2>
+	<div class="input" id="html" contenteditable="">
+		<h3>Some example rich text</h3>
+		<ul>
+			<li><del>Plain</del> <ins>Boring</ins> text.</li>
+			<li><em>Emphasized text!</em></li>
+			<li><strong>Strong text!</strong></li>
+			<li>
+				<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="70" height="70">
+					<circle cx="35" cy="35" r="35" fill="red"/>
+					<text x="10" y="40">image</text>
+				</svg>
+			</li>
+			<li><a href="https://github.com/eligrey/FileSaver.js">A link.</a></li>
+		</ul>
+	</div>
+	<form id="html-options">
+		<label>Filename: <input type="text" class="filename" id="html-filename" placeholder="a rich document"/>.xhtml</label>
+		<input type="submit" value="Save"/>
+	</form>
+</section>
+<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/Blob.js/master/Blob.min.js"/>
+<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"/>
+<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/FileSaver.js/master/FileSaver.js"/>
+<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/FileSaver.js/master/demo/demo.js"/>
+</body>
+</html>
diff --git a/js/vendor/FileSaver/package.json b/js/vendor/FileSaver/package.json
new file mode 100644
index 0000000..3ddf184
--- /dev/null
+++ b/js/vendor/FileSaver/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "filesaver.js",
+  "version": "2013.1.23",
+  "description": "A saveAs() FileSaver implementation",
+  "main": "FileSaver.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eligrey/FileSaver.js.git"
+  },
+  "keywords": [
+    "filesaver",
+    "saveas",
+    "blob"
+  ],
+  "author": "Eli Grey",
+  "license": "MIT/X11",
+  "bugs": {
+    "url": "https://github.com/eligrey/FileSaver.js/issues"
+  }
+}
diff --git a/js/vendor/dataUriToBlob.js b/js/vendor/dataUriToBlob.js
new file mode 100644
index 0000000..582aecb
--- /dev/null
+++ b/js/vendor/dataUriToBlob.js
@@ -0,0 +1,47 @@
+window.dataUriToBlob = (function(){
+/**
+ * Blob constructor.
+ */
+
+var Blob = window.Blob;
+
+/**
+ * ArrayBufferView support.
+ */
+
+var hasArrayBufferView = new Blob([new Uint8Array(100)]).size == 100;
+
+/**
+ * Return a `Blob` for the given data `uri`.
+ *
+ * @param {String} uri
+ * @return {Blob}
+ * @api public
+ */
+
+var dataUriToBlob = function(uri){
+  var data = uri.split(',')[1];
+  var bytes = atob(data);
+  var buf = new ArrayBuffer(bytes.length);
+  var arr = new Uint8Array(buf);
+  for (var i = 0; i < bytes.length; i++) {
+    arr[i] = bytes.charCodeAt(i);
+  }
+
+  if (!hasArrayBufferView) arr = buf;
+  var blob = new Blob([arr], { type: mime(uri) });
+  blob.slice = blob.slice || blob.webkitSlice;
+  return blob;
+};
+
+/**
+ * Return data uri mime type.
+ */
+
+function mime(uri) {
+  return uri.split(';')[0].slice(5);
+}
+
+return dataUriToBlob;
+
+})()
diff --git a/noisia.html b/noisia.html
new file mode 100644
index 0000000..146ac08
--- /dev/null
+++ b/noisia.html
@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8 />
+<title>JS Bin</title>
+
+<style id="jsbin-css">
+body, canvas{
+  margin: 0;
+  padding: 0;
+  border: 0;
+  position: fixed;
+  cursor:none;
+  background: hsla(0,9%,11%,1);
+}
+</style>
+</head>
+<body>
+  <canvas id='canvas'></canvas>
+<script>
+var Mouse, PI, animloop, canvas, cos, ctx, decay, degToRad, distance, hypotenuse, now, pegs, radToDeg, rotateTo, sin, start;
+
+Mouse = {
+  x: window.innerWidth / 2,
+  y: window.innerHeight / 2,
+  down: false,
+  events: {
+    move: function(e) {
+      e.preventDefault();
+      if ('touches' in e) {
+        e = e.touches[0];
+      }
+      Mouse.x = (Mouse.x + e.pageX) * 0.5;
+      return Mouse.y = (Mouse.y + e.pageY) * 0.5;
+    },
+    down: function(e) {
+      e.preventDefault();
+      return Mouse.down = !Mouse.down;
+    },
+    up: function() {
+      return Mouse.down = !Mouse.down;
+    }
+  }
+};
+
+window.addEventListener('mousemove', Mouse.events.move, false);
+window.addEventListener('mousedown', Mouse.events.down, false);
+window.addEventListener('mouseup', Mouse.events.up, false);
+window.addEventListener('touchmove', Mouse.events.move, false);
+window.addEventListener('touchstart', Mouse.events.move, false);
+window.addEventListener('touchstart', Mouse.events.down, false);
+window.addEventListener('touchend', Mouse.events.up, false);
+
+start = Date.now();
+
+now = 0;
+
+PI = Math.PI;
+
+sin = function(a) {
+  return Math.sin(a);
+};
+
+cos = function(a) {
+  return Math.cos(a);
+};
+
+hypotenuse = function(a, b) {
+  if (a == null) {
+    a = 0;
+  }
+  if (b == null) {
+    b = 0;
+  }
+  return Math.sqrt(a * a + b * b);
+};
+
+distance = function(x1, y1, x2, y2) {
+  return hypotenuse(x2 - x1, y2 - y1);
+};
+
+radToDeg = function(rad) {
+  return rad / (Math.PI / 180);
+};
+
+degToRad = function(deg) {
+  return deg * (Math.PI / 180);
+};
+
+rotateTo = function(rise, run) {
+  var rotation, slope, tangent;
+
+  if (rise == null) {
+    rise = 0;
+  }
+  if (run == null) {
+    run = 0;
+  }
+  if (run === 0) {
+    run = 1;
+  }
+  slope = rise / run;
+  tangent = radToDeg(Math.atan(slope));
+  if (run < 0) {
+    rotation = degToRad(tangent - 180);
+  } else {
+    rotation = degToRad(tangent);
+  }
+  return rotation;
+};
+
+canvas = document.getElementById('canvas');
+
+ctx = canvas.getContext('2d');
+
+(canvas.sizeToWindow = function() {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  return canvas.hyp = hypotenuse(canvas.width, canvas.height);
+})();
+
+window.addEventListener('resize', canvas.sizeToWindow, false);
+
+pegs = function() {
+  var clockwise, dist, endAngle, i, interval, j, radius, rot, startAngle, xo, yo, _i, _j, _ref, _ref1;
+
+  interval = hypotenuse(canvas.height, canvas.width) / 31;
+  radius = interval / 2 - 1;
+  ctx.lineWidth = 1;
+  ctx.lineCap = 'round';
+  ctx.strokeStyle = 'black';
+  ctx.fillStyle = "hsla(0,60%,60%,1)";
+  for (i = _i = -interval, _ref = canvas.width + interval; interval > 0 ? _i < _ref : _i > _ref; i = _i += interval) {
+    for (j = _j = -interval, _ref1 = canvas.height + interval; interval > 0 ? _j < _ref1 : _j > _ref1; j = _j += interval) {
+      rot = now / 111 + rotateTo(Mouse.x - i, j - Mouse.y);
+      dist = distance(i, j, Mouse.x, Mouse.y);
+      xo = sin(j / canvas.height * PI * 22 + now / 55) * radius / 4;
+      yo = cos(i / canvas.width * PI * 22 + now / 77) * radius / 4;
+      ctx.beginPath();
+      startAngle = rot + sin(dist / canvas.hyp * PI * (cos(now / 444) * 4) + now / 99 * PI);
+      endAngle = (rot + 0.1) + sin(dist / canvas.hyp * PI * (cos(now / 333) * 4) - now / 111) * PI / 6;
+      clockwise = startAngle > endAngle ? true : false;
+      ctx.arc(i + xo, j + yo, radius, startAngle, endAngle, clockwise);
+      ctx.closePath();
+      ctx.fillStyle = "hsla(" + ((endAngle - startAngle) / PI * 90 + 240 - now / 3 % 360) + ",100%,50%,1)";
+      ctx.fill();
+    }
+  }
+  return true;
+};
+
+decay = function(context, x, y, w, h, r) {
+  context.save();
+  context.translate(context.canvas.width / 2 + x - w / 2, context.canvas.height / 2 + y - h / 2);
+  context.rotate(r);
+  context.drawImage(context.canvas, -context.canvas.width / 2, -context.canvas.height / 2, context.canvas.width + w, context.canvas.height + h);
+  return context.restore();
+};
+
+(animloop = function() {
+  animloop.id = requestAnimationFrame(animloop);
+  now = (Date.now() - start) / 32;
+  ctx.fillStyle = 'hsla(0,0%,0%,0.1)';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  return pegs();
+})();
+</script>
+<script type="text/html" id="template">
+<div id="curtain" style="opacity:0;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0;background:rgba(255,255,255,0.1);"></div>
+<div id="outline" style="border:1px solid white;background:rgba(0,255,255,0.5);opacity:0.5; position: absolute;pointer-events:none"></div>
+<div id="controls" style="position: absolute;top:50px;right:50px;background:rgba(0,0,0,0.8);color:#fff;font-size:14px;min-width:300px; padding: 4px;cursor:default;">
+  frames <input type="text" id="framecount" value="30" style="width:30px;">
+  delay <input type="text" id="framedelay" value="0.06s" style="width:30px;">
+  <button id="record" disabled>record</button>
+  <button id="save" disabled>save</button>
+  <span id="status"></span>
+  <div id="preview"></div>
+</div>
+</script>
+<script type="text/javascript" src="js/vendor/gif-encode/util.js"></script>
+<script type="text/javascript" src="js/vendor/gif-encode/tube.js"></script>
+<script type="text/javascript" src="js/vendor/gif-encode/client.js"></script>
+<script type="text/javascript" src="js/vendor/FileSaver/FileSaver.js"></script>
+<script type="text/javascript" src="js/vendor/dataUriToBlob.js"></script>
+<script type="text/javascript">
+(function(){
+  var canvases = document.getElementsByTagName("canvas")
+  if (canvases.length == 0) { alert("no canvas found"); return; }
+
+  var source = canvases[0]
+
+  var encoder = new GifEncoder()
+  encoder.on("encoded-frame", encoded_frame)
+  encoder.on("rendered", rendered_bytes)
+  encoder.on("rendered-url", rendered_url)
+
+  var w, h, x, y;
+  var last_t, frame_t, count, delay, done;
+  var frames = []
+  var curtain, outline
+  var dragging = false
+  var lastGif
+
+  init()
+  function init(){
+    document.body.style.width = "100%"
+    document.body.style.height = "100%"
+    document.body.parentNode.style.width = "100%"
+    document.body.parentNode.style.height = "100%"
+    var template = document.getElementById("template").innerHTML
+    var el = document.createElement("div")
+    el.innerHTML = template
+    document.body.appendChild(el)
+    bind()
+  }
+  function bind(){
+    curtain = document.getElementById("curtain")
+    outline = document.getElementById("outline")
+    controls = document.getElementById("outline")
+    document.getElementById("record").addEventListener("click", record, false)
+    document.getElementById("save").addEventListener("click", save, false)
+    curtain.addEventListener("mousedown", box_start, false)
+    curtain.addEventListener("mousemove", box_size, false)
+    curtain.addEventListener("mouseup", box_end, false)
+    outline.style.display = "none"
+    controls.style.display = "none"
+  }
+  function box_start(e){
+    x = e.pageX
+    y = e.pageY
+    w = 1
+    h = 1
+    dragging = true
+    outline.style.left = px(x-1)
+    outline.style.top = px(y-1)
+    outline.style.width = px(w)
+    outline.style.height = px(h)
+    outline.style.display = "block"
+  }
+  function box_size(e){
+    if (! dragging) return
+    w = e.pageX - x
+    h = e.pageY - y
+    outline.style.width = px(w)
+    outline.style.height = px(h)
+  }
+  function box_end(e){
+    dragging = false
+    controls.style.display = "block"
+    enable("record")
+    document.getElementById("record").focus()
+  }
+  function enable(id){ document.getElementById(id).removeAttribute("disabled") }
+  function disable(id){ document.getElementById(id).setAttribute("disabled","disabled") }
+  function px(n){ return n + "px" }
+  function record(){
+    count = parseInt(document.getElementById("framecount").value)
+    delay = parseFloat(document.getElementById("framedelay").value) * 1000
+    done = 0
+    frame_t = 0
+    build()
+    capture()
+    last_t = +new Date()
+    requestAnimationFrame(recordloop)
+    status("recording")
+    disable("record")
+  }
+  function recordloop(){
+    var canvas = document.createElement("canvas")
+    var t = +new Date()
+    frame_t += t - last_t
+    last_t = t
+    if (frame_t > delay) {
+      frame_t -= delay
+      capture()
+    }
+    if (done == count) {
+      render()
+    }
+    else {
+      requestAnimationFrame(recordloop)
+    }
+  }
+  function build(){
+    frames = new Array(count)
+    for (var i = 0; i < count; i++){
+      frames[i] = document.createElement("canvas")
+      frames[i].height = h
+      frames[i].width = w
+    }
+  }
+  function capture(){
+    var frame = frames[done++]
+    var ctx = frame.getContext('2d')
+    ctx.fillStyle = document.body.backgroundColor
+    ctx.fillRect(0,0,w,h)
+    ctx.drawImage(source, x, y, w, h, 0, 0, w, h)
+  }
+  function render(){
+    encoder.reset()
+    encoder.addFrames(frames, delay)
+    status("encoding")
+    try {
+      encoder.encode()
+    }
+    catch (e) {
+      rendering = false
+      status(e)
+      throw e
+    }
+  }
+  function status(s){
+    document.getElementById("status").innerHTML = s
+  }
+  function encoded_frame(done,count){
+    status("encoded " + done + " / " + count)
+  }
+  function rendered_bytes(bytes){
+    status(filesize(bytes.length))
+  }
+  function rendered_url(url){
+    var image = new Image ()
+    lastGif = image.src = url
+    document.getElementById("preview").innerHTML = ""
+    document.getElementById("preview").appendChild(image)
+    rendering = false
+    enable("record")
+    enable("save")
+  }
+  function save (){
+    if (! lastGif) return;
+    var filename = (window.location.host + window.location.pathname).replace(/[^a-zA-Z0-9]/g,"-").replace(/-+/,"-")
+    var blob = dataUriToBlob(lastGif)
+    saveAs(blob, filename + "-" + (+new Date()) + ".gif");
+  }
+  function filesize(n) {
+    if (n < 1e3) return n + " bytes"
+    if (n < 1e6) return decimalString(n/1e3) + " kb"
+    if (n < 1e9) return decimalString(n/1e6) + " mb"
+    return "WAY TOO BIG DUDE"
+  }
+  function decimalString(n){
+    var m = Math.floor(n);
+    return m + "." + Math.round((n-m)*10)
+  }
+})()
+</script>
+</body>
+</html>
+
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..8aa641a
--- /dev/null
+++ b/package.json
@@ -0,0 +1,10 @@
+{
+	"name": "dither",
+	"version": "0.0.4",
+	"devDependencies": {
+		"grunt": "~0.4.1",
+		"grunt-contrib-concat": "~0.3.0",
+		"grunt-contrib-uglify": "~0.2.5",
+		"grunt-contrib-watch": "~0.5.3"
+	}
+}