initial commit...

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"
+	}
+}