first commit

README.md

@@ -0,0 +1,5 @@
+**dat.gui** is a lightweight controller library for JavaScript. It allows you to easily manipulate variables and fire functions on the fly.
+
+Check the [index page](http://dataarts.github.com/dat.gui/) for usage.
+
+Initiated by [George Michael Brower](http://georgemichaelbrower.com/) and [Jono Brandel](http://jonobr1.com/) of the Data Arts Team, Google Creative Lab.

docs/RequestAnimationFrame.js

@@ -0,0 +1,22 @@
+/**
+ * Provides requestAnimationFrame in a cross browser way.
+ * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+ */
+
+if ( !window.requestAnimationFrame ) {
+
+	window.requestAnimationFrame = ( function() {
+
+		return window.webkitRequestAnimationFrame ||
+		window.mozRequestAnimationFrame ||
+		window.oRequestAnimationFrame ||
+		window.msRequestAnimationFrame ||
+		function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
+
+			window.setTimeout( callback, 1000 / 60 );
+
+		};
+
+	} )();
+
+}

docs/demo.js

@@ -0,0 +1,231 @@
+function FizzyText(message) {
+
+  var that = this;
+
+  // These are the variables that we manipulate with gui-dat.
+  // Notice they're all defined with "this". That makes them public.
+  // Otherwise, gui-dat can't see them.
+
+  this.growthSpeed = 0.2;       // how fast do particles change size?
+  this.maxSize = 5.59;          // how big can they get?
+  this.noiseStrength = 10;      // how turbulent is the flow?
+  this.speed = 0.4;             // how fast do particles move?
+  this.displayOutline = false;  // should we draw the message as a stroke?
+  this.framesRendered = 0;
+
+  // __defineGetter__ and __defineSetter__ makes JavaScript believe that
+  // we've defined a variable 'this.message'. This way, whenever we
+  // change the message variable, we can call some more functions.
+
+  this.__defineGetter__("message", function () {
+    return message;
+  });
+
+  this.__defineSetter__("message", function (m) {
+    message = m;
+    createBitmap(message);
+  });
+
+  // We can even add functions to the DAT.GUI! As long as they have
+  // 0 arguments, we can call them from the dat-gui panel.
+
+  this.explode = function() {
+    var mag = Math.random() * 30 + 30;
+    for (var i in particles) {
+      var angle = Math.random() * Math.PI * 2;
+      particles[i].vx = Math.cos(angle) * mag;
+      particles[i].vy = Math.sin(angle) * mag;
+    }
+  };
+
+  ////////////////////////////////////////////////////////////////
+
+  var _this = this;
+
+  var width = 550;
+  var height = 200;
+  var textAscent = 101;
+  var textOffsetLeft = 80;
+  var noiseScale = 300;
+  var frameTime = 30;
+
+  var colors = ["#00aeff", "#0fa954", "#54396e", "#e61d5f"];
+
+  // This is the context we use to get a bitmap of text using
+  // the getImageData function.
+  var r = document.createElement('canvas');
+  var s = r.getContext('2d');
+
+  // This is the context we actually use to draw.
+  var c = document.createElement('canvas');
+  var g = c.getContext('2d');
+
+  r.setAttribute('width', width);
+  c.setAttribute('width', width);
+  r.setAttribute('height', height);
+  c.setAttribute('height', height);
+
+  // Add our demo to the HTML
+  document.getElementById('helvetica-demo').appendChild(c);
+
+  // Stores bitmap image
+  var pixels = [];
+
+  // Stores a list of particles
+  var particles = [];
+
+  // Set g.font to the same font as the bitmap canvas, incase we
+  // want to draw some outlines.
+  s.font = g.font = "800 82px helvetica, arial, sans-serif";
+
+  // Instantiate some particles
+  for (var i = 0; i < 1000; i++) {
+    particles.push(new Particle(Math.random() * width, Math.random() * height));
+  }
+
+  // This function creates a bitmap of pixels based on your message
+  // It's called every time we change the message property.
+  var createBitmap = function (msg) {
+
+    s.fillStyle = "#fff";
+    s.fillRect(0, 0, width, height);
+
+    s.fillStyle = "#222";
+    s.fillText(msg, textOffsetLeft, textAscent);
+
+    // Pull reference
+    var imageData = s.getImageData(0, 0, width, height);
+    pixels = imageData.data;
+
+  };
+
+  // Called once per frame, updates the animation.
+  var render = function () {
+
+    that.framesRendered ++;
+
+    g.clearRect(0, 0, width, height);
+
+    if (_this.displayOutline) {
+      g.globalCompositeOperation = "source-over";
+      g.strokeStyle = "#000";
+      g.lineWidth = .5;
+      g.strokeText(message, textOffsetLeft, textAscent);
+    }
+
+    g.globalCompositeOperation = "darker";
+
+    for (var i = 0; i < particles.length; i++) {
+      g.fillStyle = colors[i % colors.length];
+      particles[i].render();
+    }
+
+  };
+
+  // Returns x, y coordinates for a given index in the pixel array.
+  var getPosition = function (i) {
+    return {
+      x: (i - (width * 4) * Math.floor(i / (width * 4))) / 4,
+      y: Math.floor(i / (width * 4))
+    };
+  };
+
+  // Returns a color for a given pixel in the pixel array.
+  var getColor = function (x, y) {
+    var base = (Math.floor(y) * width + Math.floor(x)) * 4;
+    var c = {
+      r: pixels[base + 0],
+      g: pixels[base + 1],
+      b: pixels[base + 2],
+      a: pixels[base + 3]
+    };
+
+    return "rgb(" + c.r + "," + c.g + "," + c.b + ")";
+  };
+
+  // This calls the setter we've defined above, so it also calls
+  // the createBitmap function.
+  this.message = message;
+
+  var loop = function() {
+
+    requestAnimationFrame(loop);
+
+    // Don't render if we don't see it.
+    // Would be cleaner if I dynamically acquired the top of the canvas.
+    if (document.body.scrollTop < height + 20) {
+      render();
+    }
+
+  }
+
+  // This calls the render function every 30 milliseconds.
+  loop();
+
+  // This class is responsible for drawing and moving those little
+  // colored dots.
+  function Particle(x, y, c) {
+
+    // Position
+    this.x = x;
+    this.y = y;
+
+    // Size of particle
+    this.r = 0;
+
+    // This velocity is used by the explode function.
+    this.vx = 0;
+    this.vy = 0;
+
+    // Called every frame
+    this.render = function () {
+
+      // What color is the pixel we're sitting on top of?
+      var c = getColor(this.x, this.y);
+
+      // Where should we move?
+      var angle = noise(this.x / noiseScale, this.y / noiseScale) * _this.noiseStrength;
+
+      // Are we within the boundaries of the image?
+      var onScreen = this.x > 0 && this.x < width &&
+          this.y > 0 && this.y < height;
+
+      var isBlack = c != "rgb(255,255,255)" && onScreen;
+
+      // If we're on top of a black pixel, grow.
+      // If not, shrink.
+      if (isBlack) {
+        this.r += _this.growthSpeed;
+      } else {
+        this.r -= _this.growthSpeed;
+      }
+
+      // This velocity is used by the explode function.
+      this.vx *= 0.5;
+      this.vy *= 0.5;
+
+      // Change our position based on the flow field and our
+      // explode velocity.
+      this.x += Math.cos(angle) * _this.speed + this.vx;
+      this.y += -Math.sin(angle) * _this.speed + this.vy;
+
+      this.r = DAT.GUI.constrain(this.r, 0, _this.maxSize);
+
+      // If we're tiny, keep moving around until we find a black
+      // pixel.
+      if (this.r <= 0) {
+        this.x = Math.random() * width;
+        this.y = Math.random() * height;
+        return; // Don't draw!
+      }
+
+      // Draw the circle.
+      g.beginPath();
+      g.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
+      g.fill();
+
+    }
+
+  }
+
+}

docs/docs.css

@@ -0,0 +1,265 @@
+* {
+  padding: 0px;
+  margin: 0px;
+}
+
+body {
+  font: 9.5px/13px Lucida Grande, sans-serif;
+  padding: 0 20px 20px 20px;
+}
+
+#container {
+  max-width: 530px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
+  color: #222;
+}
+
+hr {
+  border: 0;
+  height: 0;
+  border-top: 1px dotted #ccc;
+}
+
+h1 {
+  font-size: 80px;
+  font-weight: 800;
+  text-transform: lowercase;
+  line-height: 80px;
+  margin: 39px 0 20px 0;
+}
+
+h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
+  text-decoration: none;
+  margin-right: 7px;
+}
+
+h1 img {
+  width: 45px;
+  height: 45px;
+  margin-bottom: 8px;
+}
+
+h2 {
+  margin-top: 30px;
+  font-size: 18px;
+  margin-bottom: 24px;
+}
+
+h2.section {
+  margin: 0;
+  padding: 20px 0px 20px 0px;
+  cursor: pointer;
+  border-top: 1px dotted #ccc;
+  -webkit-transition: color 0.15s linear;
+}
+
+h2.section:hover {
+  color: #00aeff;
+}
+
+div.collapsed h2, div.expanded h2 {
+
+  float: left;
+  clear: both;
+  width: 100%;
+  cursor: pointer;
+}
+
+.last {
+  margin-bottom: 0px !important;
+}
+
+.first {
+  margin-top: 0px;
+}
+
+div.trans {
+  border-top: 1px dotted #ccc;
+  margin: 0px 0px 20px 0px;
+}
+
+ol#secrets {
+  padding: 0px;
+  margin: 0px;
+}
+
+div.expanded h2:before {
+  content: '-';
+}
+
+div.collapsed h2:before {
+  content: '+';
+}
+
+div.expanded h2:before, div.collapsed h2:before {
+  font-weight: normal;
+  line-height: 2px;
+  float: left;
+  margin-top: 6px;
+  margin-right: 6px;
+  font-size: 9px;
+  font-family: Monaco, monospace;
+}
+
+div.collapsable>div {
+  padding-bottom: 10px;
+}
+
+div.collapsable {
+  overflow: hidden;
+  clear: both;
+  -moz-transition: height .2s ease-out;
+  -webkit-transition: height .2s ease-out;
+  transition: height .2s ease-out;
+}
+
+div.collapsable div {
+  padding-bottom: 20px;
+  margin-bottom: -20px;
+  height: auto;
+}
+
+div.collapsed .collapsable {
+  overflow: hidden;
+  clear: both;
+  height: 0;
+}
+
+div.expanded {
+  cursor: pointer;
+}
+
+#helvetica-demo {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 800;
+  height: 300;
+  z-index: -1;
+}
+
+#notifier {
+  position: fixed;
+  right: 0;
+  top: 230px;
+  width: 271px;
+  height: 142px;
+  background: url("assets/itgivesyouthis.jpg") center 0 no-repeat;
+  z-index: -2;
+  margin: 30px 22px 0 0;
+}
+
+pre {
+  margin: 20px 0 20px 0;
+  padding: 15px;
+  background-color: #222;
+  max-width: 500px;
+  font: 10px Monaco, monospace;
+  clear: both;
+}
+
+p, ul, ol {
+  font-size: 125%;
+  clear: both;
+  line-height: 18px;
+  margin-bottom: 24px;
+}
+
+li {
+  margin-left: 22px;
+}
+
+ul#desc {
+  list-style: circle;
+  font-size: 100%;
+  max-width: 380px;
+}
+
+a:link {
+  color: #00aeff;
+}
+
+a:visited {
+  color: #0fa954;
+}
+
+a:hover {
+  color: #e61d5f;
+}
+
+a:active {
+  color: #54396e;
+}
+
+footer {
+  margin-top: 20px;
+  background-color: #eee;
+  width: 510px;
+  padding: 10px;
+  clear: both;
+  color: #444;
+
+}
+
+pre a:link,
+pre a:visited,
+pre a:active,
+pre a:hover {
+  color: #ccc;
+}
+
+code {
+  font: 10px Monaco, monospace;
+}
+
+code strong {
+  font-weight: normal;
+  color: #e61d5f;
+}
+
+.str {
+  color: #0fa954;
+}
+
+.kwd {
+  color: #e61d5f;
+}
+
+.com {
+  color: #555;
+}
+
+.typ {
+  color: #ccc;
+}
+
+.lit {
+  color: #00aeff;
+}
+
+.pun, .opn, .clo {
+  color: #777;
+}
+
+.pln {
+  color: #ccc;
+}
+
+.tag {
+  color: #555;
+}
+
+.atn {
+  color: #555;
+}
+
+.atv {
+  color: #777;
+}
+
+.dec {
+  color: #606;
+}

docs/improvedNoise.js

@@ -0,0 +1,181 @@
+// http://mrl.nyu.edu/~perlin/noise/
+
+var ImprovedNoise = function () {
+
+    var p = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
+         23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,
+         174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,
+         133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,
+         89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,
+         202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,
+         248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,
+         178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,
+         14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,
+         93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];
+
+    for ( var i = 0; i < 256 ; i++ ) {
+
+        p[ 256 + i ] = p[ i ];
+
+    }
+
+    function fade( t ) {
+
+        return t * t * t * ( t * ( t * 6 - 15 ) + 10 );
+
+    }
+
+    function lerp( t, a, b ) {
+
+        return a + t * ( b - a );
+
+    }
+
+    function grad( hash, x, y, z ) {
+
+        var h = hash & 15;
+        var u = h < 8 ? x : y, v = h < 4 ? y : h == 12 || h == 14 ? x : z;
+        return ( ( h & 1 ) == 0 ? u : -u ) + ( ( h & 2 ) == 0 ? v : -v );
+
+    }
+
+    return {
+
+        noise: function ( x, y, z ) {
+
+            var floorX = Math.floor( x ), floorY = Math.floor( y ), floorZ = Math.floor( z );
+
+            var X = floorX & 255, Y = floorY & 255, Z = floorZ & 255;
+
+            x -= floorX;
+            y -= floorY;
+            z -= floorZ;
+
+            var xMinus1 = x -1, yMinus1 = y - 1, zMinus1 = z - 1;
+
+            var u = fade( x ), v = fade( y ), w = fade( z );
+
+            var A = p[ X ] + Y, AA = p[ A ] + Z, AB = p[ A + 1 ] + Z, B = p[ X + 1 ] + Y, BA = p[ B ] + Z, BB = p[ B + 1 ] + Z;
+
+            return lerp( w, lerp( v, lerp( u, grad( p[ AA ], x, y, z ),
+                               grad( p[ BA ], xMinus1, y, z ) ),
+                          lerp( u, grad( p[ AB ], x, yMinus1, z ),
+                               grad( p[ BB ], xMinus1, yMinus1, z ) ) ),
+                     lerp( v, lerp( u, grad( p[ AA + 1 ], x, y, zMinus1 ),
+                               grad( p[ BA + 1 ], xMinus1, y, z - 1 ) ),
+                          lerp( u, grad( p[ AB + 1 ], x, yMinus1, zMinus1 ),
+                               grad( p[ BB + 1 ], xMinus1, yMinus1, zMinus1 ) ) ) );
+
+        }
+    }
+}
+
+var currentRandom = Math.random;
+
+// Pseudo-random generator
+function Marsaglia(i1, i2) {
+  // from http://www.math.uni-bielefeld.de/~sillke/ALGORITHMS/random/marsaglia-c
+  var z=i1 || 362436069, w= i2 || 521288629;
+  var nextInt = function() {
+    z=(36969*(z&65535)+(z>>>16)) & 0xFFFFFFFF;
+    w=(18000*(w&65535)+(w>>>16)) & 0xFFFFFFFF;
+    return (((z&0xFFFF)<<16) | (w&0xFFFF)) & 0xFFFFFFFF;
+  };
+ 
+  this.nextDouble = function() {
+    var i = nextInt() / 4294967296;
+    return i < 0 ? 1 + i : i;
+  };
+  this.nextInt = nextInt;
+}
+Marsaglia.createRandomized = function() {
+  var now = new Date();
+  return new Marsaglia((now / 60000) & 0xFFFFFFFF, now & 0xFFFFFFFF);
+};      
+
+// Noise functions and helpers
+function PerlinNoise(seed) {
+  var rnd = seed !== undefined ? new Marsaglia(seed) : Marsaglia.createRandomized();
+  var i, j;
+  // http://www.noisemachine.com/talk1/17b.html
+  // http://mrl.nyu.edu/~perlin/noise/
+  // generate permutation
+  var p = new Array(512); 
+  for(i=0;i<256;++i) { p[i] = i; }
+  for(i=0;i<256;++i) { var t = p[j = rnd.nextInt() & 0xFF]; p[j] = p[i]; p[i] = t; }
+  // copy to avoid taking mod in p[0];
+  for(i=0;i<256;++i) { p[i + 256] = p[i]; } 
+  
+  function grad3d(i,x,y,z) {        
+    var h = i & 15; // convert into 12 gradient directions
+    var u = h<8 ? x : y,                 
+        v = h<4 ? y : h===12||h===14 ? x : z;
+    return ((h&1) === 0 ? u : -u) + ((h&2) === 0 ? v : -v);
+  }
+
+  function grad2d(i,x,y) { 
+    var v = (i & 1) === 0 ? x : y;
+    return (i&2) === 0 ? -v : v;
+  }
+  
+  function grad1d(i,x) { 
+    return (i&1) === 0 ? -x : x;
+  }
+  
+  function lerp(t,a,b) { return a + t * (b - a); }
+    
+  this.noise3d = function(x, y, z) {
+    var X = Math.floor(x)&255, Y = Math.floor(y)&255, Z = Math.floor(z)&255;
+    x -= Math.floor(x); y -= Math.floor(y); z -= Math.floor(z);
+    var fx = (3-2*x)*x*x, fy = (3-2*y)*y*y, fz = (3-2*z)*z*z;
+    var p0 = p[X]+Y, p00 = p[p0] + Z, p01 = p[p0 + 1] + Z, p1  = p[X + 1] + Y, p10 = p[p1] + Z, p11 = p[p1 + 1] + Z;
+    return lerp(fz, 
+      lerp(fy, lerp(fx, grad3d(p[p00], x, y, z), grad3d(p[p10], x-1, y, z)),
+               lerp(fx, grad3d(p[p01], x, y-1, z), grad3d(p[p11], x-1, y-1,z))),
+      lerp(fy, lerp(fx, grad3d(p[p00 + 1], x, y, z-1), grad3d(p[p10 + 1], x-1, y, z-1)),
+               lerp(fx, grad3d(p[p01 + 1], x, y-1, z-1), grad3d(p[p11 + 1], x-1, y-1,z-1))));
+  };
+  
+  this.noise2d = function(x, y) {
+    var X = Math.floor(x)&255, Y = Math.floor(y)&255;
+    x -= Math.floor(x); y -= Math.floor(y);
+    var fx = (3-2*x)*x*x, fy = (3-2*y)*y*y;
+    var p0 = p[X]+Y, p1  = p[X + 1] + Y;
+    return lerp(fy, 
+      lerp(fx, grad2d(p[p0], x, y), grad2d(p[p1], x-1, y)),
+      lerp(fx, grad2d(p[p0 + 1], x, y-1), grad2d(p[p1 + 1], x-1, y-1)));
+  };
+
+  this.noise1d = function(x) {
+    var X = Math.floor(x)&255;
+    x -= Math.floor(x);
+    var fx = (3-2*x)*x*x;
+    return lerp(fx, grad1d(p[X], x), grad1d(p[X+1], x-1));
+  };
+}
+
+//  these are lifted from Processing.js
+// processing defaults
+var noiseProfile = { generator: undefined, octaves: 4, fallout: 0.5, seed: undefined};
+
+function noise(x, y, z) {
+  if(noiseProfile.generator === undefined) {
+    // caching
+    noiseProfile.generator = new PerlinNoise(noiseProfile.seed);
+  }
+  var generator = noiseProfile.generator;
+  var effect = 1, k = 1, sum = 0;
+  for(var i=0; i<noiseProfile.octaves; ++i) {
+    effect *= noiseProfile.fallout;        
+    switch (arguments.length) {
+    case 1:
+      sum += effect * (1 + generator.noise1d(k*x))/2; break;
+    case 2:
+      sum += effect * (1 + generator.noise2d(k*x, k*y))/2; break;
+    case 3:
+      sum += effect * (1 + generator.noise3d(k*x, k*y, k*z))/2; break;
+    }
+    k *= 2;
+  }
+  return sum;
+};

index.html

@@ -0,0 +1,402 @@
+<!doctype html>
+<html>
+<head>
+
+  <title>dat.gui</title>
+
+  <link rel='icon' type='image/png' href='docs/assets/favicon.png'/>
+
+  <!--Minified build-->
+  <!--<script type='text/javascript' src='build/DAT.GUI.min.js'></script>-->
+
+  <!--Build--->
+  <!--<script type='text/javascript' src='build/DAT.GUI.js'></script>-->
+
+  <!--All source-->
+  <link href='src/DAT/GUI/GUI.css' media='screen' rel='stylesheet' type='text/css'/>
+  <script type='text/javascript' src='src/DAT/GUI/GUI.js'></script>
+  <script type='text/javascript' src='src/DAT/GUI/ControllerNumberSlider.js'></script>
+  <script type='text/javascript' src='src/DAT/GUI/Controller.js'></script>
+  <script type='text/javascript' src='src/DAT/GUI/ControllerBoolean.js'></script>
+  <script type='text/javascript' src='src/DAT/GUI/ControllerString.js'></script>
+  <script type='text/javascript' src='src/DAT/GUI/ControllerFunction.js'></script>
+  <script type='text/javascript' src='src/DAT/GUI/ControllerNumber.js'></script>
+
+  <!--Demo-->
+  <link href='docs/docs.css' media='screen' rel='stylesheet' type='text/css'/>
+  <script type='text/javascript' src='docs/RequestAnimationFrame.js'></script>
+  <script type='text/javascript' src='docs/improvedNoise.js'></script>
+  <script type='text/javascript' src='docs/prettify.js'></script>
+  <script type='text/javascript' src='docs/demo.js'></script>
+
+  <script type='text/javascript'>
+    //<![CDATA[
+
+    window.onload = function() {
+
+      prettyPrint();
+
+      var fizzyText = new FizzyText('dat.gui');
+      var gui = new DAT.GUI();
+
+      // Text field
+      gui.add(fizzyText, 'message');
+
+      // Sliders with min + max
+      gui.add(fizzyText, 'maxSize').min(0.5).max(7);
+      gui.add(fizzyText, 'growthSpeed').min(0.01).max(1).step(0.05);
+      gui.add(fizzyText, 'speed', 0.1, 2, 0.05); // shorthand for min/max/step
+
+      // Sliders with min, max and increment.
+      gui.add(fizzyText, 'noiseStrength', 10, 100, 5);
+
+      // Boolean checkbox
+      gui.add(fizzyText, 'displayOutline');
+
+      // Fires a function called 'explode'
+      gui.add(fizzyText, 'explode').name('Explode!'); // Specify a custom name.
+
+      // Javascript for documentation
+      getCollapsables();
+      handleListening();
+    };
+
+    function toggle(e) {
+
+      var collapsable = this.childNodes[3],
+          wrapper = collapsable.childNodes[1];
+
+      if (this.className === 'collapsed') {
+        this.className = 'expanded';
+        collapsable.style.height = wrapper.clientHeight + 'px';
+      } else {
+        this.className = 'collapsed';
+        collapsable.style.height = '0px';
+      }
+    }
+
+    function getCollapsables() {
+
+      if (document.getElementsByClassName == undefined) {
+        document.getElementsByClassName = function(className) {
+          var hasClassName = new RegExp('(?:^|\\s)' + className + '(?:$|\\s)');
+          var allElements = document.getElementsByTagName('*');
+          var results = [];
+
+          var element;
+          for (var i = 0; (element = allElements[i]) != null; i++) {
+            var elementClass = element.className;
+            if (elementClass && elementClass.indexOf(className) != -1 &&
+                hasClassName.test(elementClass))
+              results.push(element);
+          }
+
+          return results;
+        };
+      }
+
+      collapsed = document.getElementsByClassName('collapsed');
+      expanded = document.getElementsByClassName('expanded');
+    }
+
+    function handleListening() {
+
+      for (var i = 0; i < collapsed.length; i++) {
+        collapsed[i].addEventListener('click', toggle, false);
+      }
+
+      for (var j = 0; j < expanded.length; j++) {
+        expanded[i].addEventListener('click', toggle, false);
+      }
+    }
+
+    //]]>
+  </script>
+</head>
+
+<body>
+<div id='container'>
+
+<!-- GUIDAT logo -->
+<div id='helvetica-demo'></div>
+
+<!-- It gives you this! -->
+<div id='notifier'></div>
+
+<h1><a href='http://twitter.com/guidat'><img src='docs/assets/profile.png'
+                                             border='0' alt='dat.gui flag'/></a>
+</h1>
+
+<p><strong>dat.gui</strong> is a lightweight controller library for JavaScript.
+  It allows you to easily manipulate variables and fire functions on the fly.
+</p>
+
+<ul>
+  <li>
+  	<a href='https://github.com/dataarts/dat.gui/raw/build/DAT.GUI.min.js'><strong>Download the minified source</strong></a>
+    <small id='buildsizemin'>[19.6kb]
+    </small>
+  </li>
+  <li>
+  	<a href='https://github.com/dataarts/dat.gui/raw/build/DAT.GUI.js'><strong>Download the uncompressed source</strong></a>
+    <small id='buildsize'>[33.9kb]
+    </small>
+  </li>
+
+  <li><a href='http://github.com/dataarts/dat.gui'>Contribute on GitHub!</a></li>
+</ul>
+
+<h2>Basic Usage</h2>
+    <pre id='demo-pre' class='prettyprint'>
+&lt;script type='text/javascript' src='DAT.GUI.min.js'&gt;&lt;/script&gt;
+&lt;script type='text/javascript'&gt;
+
+window.onload = function() {
+
+   var fizzyText = new <a href='docs/demo.js'>FizzyText</a>('dat.gui');
+
+   var gui = new DAT.GUI();
+
+   // Text field
+   gui.add(fizzyText, 'message');
+
+   // Sliders with min + max
+   gui.add(fizzyText, 'maxSize').min(0.5).max(7);
+   gui.add(fizzyText, 'growthSpeed').min(0.01).max(1).step(0.05);
+   gui.add(fizzyText, 'speed', 0.1, 2, 0.05); // shorthand for min/max/step
+
+   gui.add(fizzyText, 'noiseStrength', 10, 100, 5);
+
+   // Boolean checkbox
+   gui.add(fizzyText, 'displayOutline');
+
+   // Fires a function called 'explode'
+   gui.add(fizzyText, 'explode').name('Explode!'); // Specify a custom name.
+
+};
+
+&lt;/script&gt;
+</pre>
+
+<ul id='desc'>
+  <li><code>DAT.GUI</code> will infer the type of the property you're trying
+    to add<br/>
+    (based on its initial value) and create the corresponding control.
+  </li>
+
+  <li>The properties must be public, i.e. defined by <code><strong>this</strong>.prop
+    = value</code>.
+  </li>
+</ul>
+
+<!--
+        <h2 class='collapsed'>Fire a function when someone uses a control</h2>
+        <pre class='prettyprint'>gui.add(obj, 'propName').onChange(function(n) {
+        alert('You changed me to ' + n);
+});</pre>-->
+
+<!--<div class='collapsed'>-->
+  <!---->
+  <!--<h2 class='section'>Saving your parameters</h2>-->
+
+  <!--<div class='collapsable'>-->
+    <!--<div>-->
+      <!--<p>The simplest way to save your parameters is via-->
+        <!--<code>DAT.GUI.saveURL()</code>. This method directs your browser to a-->
+        <!--URL containing the current GUI settings.</p>-->
+                <!--<pre class='prettyprint last'>-->
+<!--// Make a button for the url function-->
+<!--gui.add(DAT.GUI, 'saveURL');</pre>-->
+    <!--</div>-->
+  <!--</div>-->
+<!--</div>-->
+<!--<div class='collapsed'>-->
+  <!--<h2 class='section'>Advanced saving</h2>-->
+
+  <!--<div class='collapsable'>-->
+    <!--<div>-->
+      <!--<p>Let's say you'd like to share your settings with someone. Instead of-->
+        <!--sending a long link with lots of parameters stored in it, you can make-->
+        <!--your saved settings the defaults.</p>-->
+
+      <!--<p>First, add the method <code>DAT.GUI.showSaveString()</code> to a gui-->
+        <!--object:</p>-->
+                <!--<pre class='prettyprint'>var gui = new DAT.GUI();-->
+
+<!--// Add some stuff (and pretend I change their values);-->
+<!--gui.add(someObject, 'someProperty');-->
+<!--gui.add(someObject, 'someOtherProperty');-->
+
+<!--// Make a save button.-->
+<!--gui.add(DAT.GUI, 'showSaveString');</pre>-->
+
+      <!--<p>Clicking the 'showSaveString' button bring up an alert with a string.-->
+        <!--Copy and paste that string into the method <code>DAT.GUI.load()</code>-->
+        <!--before you instantiate any gui objects.</p>-->
+            <!--<pre class='prettyprint'>-->
+<!--// Replace COPIED STRING with the value you got from showSaveString()-->
+<!--DAT.GUI.load('COPIED STRING');-->
+
+<!--var gui = new DAT.GUI();-->
+
+<!--// Now these properties will be set to the values you just saved.-->
+<!--gui.add(someObject, 'someProperty');-->
+<!--gui.add(someObject, 'someOtherProperty');</pre>-->
+
+      <!--<p class='last'><strong>Save strings won't work if you change the order in-->
+        <!--which you've added properties to your gui objects, or the order of the-->
+        <!--gui objects themselves.</strong>. If you want to add more parameters to-->
+        <!--your gui and use an old save string, make sure they're added after the-->
+        <!--properties whose values you've saved.</p>-->
+    <!--</div>-->
+  <!--</div>-->
+<!--</div>-->
+
+
+<div class='collapsed'>
+  <h2 class='section'>Choosing from a list of values</h2>
+
+  <div class='collapsable'>
+    <div>
+<pre class='prettyprint first last'>gui.add(obj, 'propertyName').options(1, 2, 3, 5, 8);
+
+// Alternatively, you can specify custom labels using object syntax
+gui.add(obj, 'propertyName').options({'Small': 1, 'Medium': 2, 'Large': 3});
+</pre>
+    </div>
+  </div>
+</div>
+
+<div class='collapsed'>
+  <h2 class='section'>Listen for variable changes inside the GUI</h2>
+
+  <div class='collapsable'>
+    <div>
+      <p>To fire a function whenever a user changes a variable via the GUI, use
+        the following syntax:</p>
+                <pre class='prettyprint'>gui.add(obj, 'propertyName').onChange(function(newValue) {
+   alert('You changed me to ' + newValue);
+});</pre>
+      <p>This can be slightly annoying for types like number or string. You may
+        not want to fire a function while the user is sliding, or while they're
+        typing. To fire a function when the user has <em>finished</em> making
+        changes, use the following:</p>
+                <pre class='prettyprint'>gui.add(obj, 'propertyName').onFinishChange(function(newValue) {
+   alert('You just finished changing me to ' + newValue);
+});</pre>
+      <p>Finally, if you'd like to do a little something extra when a function
+        is called, use the following:</p>
+                <pre class='prettyprint last'>gui.add(obj, 'functionName').onFire(function() {
+   alert('You called a function with dat.gui');
+});</pre>
+    </div>
+  </div>
+</div>
+<div class='collapsed'>
+  <h2 class='section'>Listen for variable changes outside of the GUI</h2>
+
+  <div class='collapsable'>
+    <div>
+      <p>Let's say you have a variable that changes by itself from time to time.
+        If you'd like the GUI to reflect those changes, use the <code>listen()</code>
+        method.</p>
+      <pre
+          class='prettyprint last'>gui.add(obj, 'changingProperty').listen();</pre>
+    </div>
+  </div>
+</div>
+
+<div class='collapsed'>
+  <h2 class='section'>Advanced listening</h2>
+
+  <div class='collapsable'>
+    <div>
+      <p>By default, <code>DAT.GUI</code> will create an internal interval
+        that checks for changes in the values you've marked with
+        <code>listen()</code>. If you'd like to check for these changes in an
+        interval of your own definition, use the following:</p>
+                <pre class='prettyprint'>
+gui.autoListen = false; // disables internal interval
+gui.add(obj, 'changingProperty').listen();
+
+// Make your own loop
+setInterval(function() {
+    gui.listen(); // updates values you've marked with listen()
+}, 1000 / 60);</pre>
+
+      <p>Alternatively, you can forego calling <code>listen()</code> on
+        individual controllers, and instead choose to monitor changes in
+        <em>all</em> values controlled by your gui.</p>
+                <pre class='prettyprint last'>
+gui.autoListen = false; // disables internal interval
+gui.add(obj, 'add');
+gui.add(obj, 'lotsa');
+gui.add(obj, 'properties');
+
+// Make your own loop
+setInterval(function() {
+    gui.listenAll(); // updates ALL values managed by this gui
+}, 1000 / 60);</pre>
+    </div>
+  </div>
+</div>
+
+<div class='collapsed'>
+  <h2 class='section'>Multiple panels and custom placement</h2>
+
+  <div class='collapsable'>
+    <div>
+      <p>You can instantiate multiple <code>DAT.GUI</code> objects and name them
+        however you'd like.</p>
+                <pre class='prettyprint'>var gui1 = new DAT.GUI();
+var gui2 = new DAT.GUI();
+
+// The name function overwrites the 'Show Controls' text.
+gui1.name('Utilities');
+gui2.name('Camera Placement');</pre>
+
+      <p>By default, <code>DAT.GUI</code> panels will be automatically added
+        to the HTML document and fixed to the top of the screen from right to
+        left. You can disable this behavior and append the gui DOM element to
+        a container of your choosing.</p>
+                <pre class='prettyprint last'>
+// Notice this belongs to the DAT.GUI class (uppercase)
+// and not an instance thereof.
+DAT.GUI.autoPlace = false;
+
+var gui = new DAT.GUI();
+
+// Do some custom styles ...
+gui.domElement.style.position = 'absolute';
+gui.domElement.style.top = '20px';
+gui.domElement.style.left = '20px';
+
+document.getElementById('my-gui-container').appendChild( gui.domElement );</pre>
+    </div>
+  </div>
+</div>
+
+<div class='collapsed'>
+  <h2 class='section'>Pro tips.</h2>
+
+  <div class='collapsable'>
+    <div>
+      <ol id='secrets'>
+        <li><code>DAT.GUI</code> panels are resizeable. Drag the open/close
+          button.
+        </li>
+
+        <li>Press 'H' to show/hide GUI&apos;s.</li>
+      </ol>
+    </div>
+  </div>
+</div>
+
+<div class='trans'>&nbsp;</div>
+
+<footer class='trans'>Initiated by <a href='http://georgemichaelbrower.com/'>George
+  Michael Brower</a> and <a href='http://jonobr1.com/'>Jono Brandel</a> of the
+  Data Arts Team, Google Creative Lab.
+</footer>
+</body>
+</html>

src/DAT/GUI/Controller.js

@@ -0,0 +1,114 @@
+DAT.GUI.Controller = function() {
+
+  this.parent = arguments[0];
+  this.object = arguments[1];
+  this.propertyName = arguments[2];
+
+  //if (arguments.length > 0) this.initialValue = this.propertyName[this.object];
+  if (arguments.length > 0) this.initialValue = this.object[this.propertyName];
+
+  this.domElement = document.createElement('div');
+  this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
+
+  this.propertyNameElement = document.createElement('span');
+  this.propertyNameElement.setAttribute('class', 'guidat-propertyname');
+  this.name(this.propertyName);
+  this.domElement.appendChild(this.propertyNameElement);
+
+  DAT.GUI.makeUnselectable(this.domElement);
+
+};
+
+DAT.GUI.Controller.prototype.changeFunction = null;
+DAT.GUI.Controller.prototype.finishChangeFunction = null;
+
+DAT.GUI.Controller.prototype.name = function(n) {
+  this.propertyNameElement.innerHTML = n;
+  return this;
+};
+
+DAT.GUI.Controller.prototype.reset = function() {
+  this.setValue(this.initialValue);
+  return this;
+};
+
+DAT.GUI.Controller.prototype.listen = function() {
+  this.parent.listenTo(this);
+  return this;
+};
+
+DAT.GUI.Controller.prototype.unlisten = function() {
+  this.parent.unlistenTo(this); // <--- hasn't been tested yet
+  return this;
+};
+
+DAT.GUI.Controller.prototype.setValue = function(n) {
+	if(this.object[this.propertyName] != undefined){
+		this.object[this.propertyName] = n;
+	}else{
+		var o = new Object();
+		o[this.propertyName] = n;
+		this.object.set(o);
+	}
+  if (this.changeFunction != null) {
+    this.changeFunction.call(this, n);
+  }
+  this.updateDisplay();
+  return this;
+};
+
+DAT.GUI.Controller.prototype.getValue = function() {
+	var val = this.object[this.propertyName];
+	if(val == undefined) val = this.object.get(this.propertyName);
+  return val;
+};
+
+DAT.GUI.Controller.prototype.updateDisplay = function() {
+  
+};
+
+DAT.GUI.Controller.prototype.onChange = function(fnc) {
+  this.changeFunction = fnc;
+  return this;
+};
+
+DAT.GUI.Controller.prototype.onFinishChange = function(fnc) {
+  this.finishChangeFunction = fnc;
+  return this;
+};
+
+DAT.GUI.Controller.prototype.options = function() {
+  var _this = this;
+  var select = document.createElement('select');
+  if (arguments.length == 1) {
+    var arr = arguments[0];
+    for (var i in arr) {
+      var opt = document.createElement('option');
+      opt.innerHTML = i;
+      opt.setAttribute('value', arr[i]);
+      if (arguments[i] == this.getValue()) {
+        opt.selected = true;
+      }
+      select.appendChild(opt);
+    }
+  } else {
+    for (var i = 0; i < arguments.length; i++) {
+      var opt = document.createElement('option');
+      opt.innerHTML = arguments[i];
+      opt.setAttribute('value', arguments[i]);
+      if (arguments[i] == this.getValue()) {
+        opt.selected = true;
+      }
+      select.appendChild(opt);
+    }
+  }
+
+  select.addEventListener('change', function() {
+    _this.setValue(this.value);
+    if (_this.finishChangeFunction != null) {
+      _this.finishChangeFunction.call(this, _this.getValue());
+    }
+  }, false);
+  _this.domElement.appendChild(select);
+  return this;
+};

src/DAT/GUI/ControllerBoolean.js

@@ -0,0 +1,43 @@
+DAT.GUI.ControllerBoolean = function() {
+
+  this.type = "boolean";
+  DAT.GUI.Controller.apply(this, arguments);
+
+  var _this = this;
+  var input = document.createElement('input');
+  input.setAttribute('type', 'checkbox');
+
+  input.checked = this.getValue();
+  this.setValue(this.getValue());
+
+  this.domElement.addEventListener('click', function(e) {
+    input.checked = !input.checked;
+    e.preventDefault();
+    _this.setValue(input.checked);
+  }, false);
+
+  input.addEventListener('mouseup', function(e) {
+    input.checked = !input.checked; // counteracts default.
+  }, false);
+
+  this.domElement.style.cursor = "pointer";
+  this.propertyNameElement.style.cursor = "pointer";
+  this.domElement.appendChild(input);
+
+  this.updateDisplay = function() {
+    input.checked = _this.getValue();
+  };
+
+
+  this.setValue = function(val) {
+    if (typeof val != "boolean") {
+      try {
+        val = eval(val);
+      } catch (e) {
+      }
+    }
+    return DAT.GUI.Controller.prototype.setValue.call(this, val);
+  };
+
+};
+DAT.GUI.extendController(DAT.GUI.ControllerBoolean);

src/DAT/GUI/ControllerFunction.js

@@ -0,0 +1,30 @@
+DAT.GUI.ControllerFunction = function() {
+
+  this.type = "function";
+
+  var _this = this;
+
+  DAT.GUI.Controller.apply(this, arguments);
+
+  this.domElement.addEventListener('click', function() {
+    _this.fire();
+  }, false);
+
+  this.domElement.style.cursor = "pointer";
+  this.propertyNameElement.style.cursor = "pointer";
+
+  var fireFunction = null;
+  this.onFire = function(fnc) {
+    fireFunction = fnc;
+    return this;
+  }
+
+  this.fire = function() {
+    if (fireFunction != null) {
+      fireFunction.call(this);
+    }
+    _this.object[_this.propertyName].call(_this.object);
+  };
+
+};
+DAT.GUI.extendController(DAT.GUI.ControllerFunction);

src/DAT/GUI/ControllerNumber.js

@@ -0,0 +1,243 @@
+DAT.GUI.ControllerNumber = function() {
+
+  this.type = "number";
+
+  DAT.GUI.Controller.apply(this, arguments);
+
+  var _this = this;
+
+  // If we simply click and release a number field, we want to highlight it.
+  // This variable keeps track of whether or not we've dragged
+  var draggedNumberField = false;
+  
+  var clickedNumberField = false;
+  var draggingHorizontal = false;
+  var draggingVertical = false;
+
+  var y = 0, py = 0;
+
+  var min = arguments[3];
+  var max = arguments[4];
+  var step = arguments[5];
+
+  var defaultStep = function() {
+      step = (max - min) * 0.01;
+  };
+
+  this.min = function() {
+    var needsSlider = false;
+    if (min == undefined && max != undefined) {
+      needsSlider = true;
+    }
+    if (arguments.length == 0) {
+      return min;
+    } else {
+      min = arguments[0];
+    }
+    if (needsSlider) {
+      addSlider();
+      if (step == undefined) {
+        defaultStep();
+      }
+    }
+    return _this;
+  };
+
+  this.max = function() {
+    var needsSlider = false;
+    if (min != undefined && max == undefined) {
+      needsSlider = true;
+    }
+    if (arguments.length == 0) {
+      return max;
+    } else {
+      max = arguments[0];
+    }
+    if (needsSlider) {
+      addSlider();
+      if (step == undefined) { 
+        defaultStep();
+      }
+    }
+    return _this;
+  };
+
+  this.step = function() {
+    if (arguments.length == 0) {
+      return step;
+    } else {
+      step = arguments[0];
+    }
+    return _this;
+  };
+
+  this.getMin = function() {
+    return min;
+  };
+
+  this.getMax = function() {
+    return max;
+  };
+  
+  this.getStep = function() {
+    if (step == undefined) {
+      if (max != undefined && min != undefined) {
+        return (max-min)/100;
+      } else {
+        return 1;
+      }
+    } else {
+      return step;
+    }
+  }
+
+  var numberField = document.createElement('input');
+  numberField.setAttribute('id', this.propertyName);
+  numberField.setAttribute('type', 'text');
+  numberField.setAttribute('value', this.getValue());
+
+  if (step) numberField.setAttribute('step', step);
+
+  this.domElement.appendChild(numberField);
+
+  var slider;
+
+  var addSlider = function() {
+    slider = new DAT.GUI.ControllerNumberSlider(_this, min, max, step, _this.getValue());
+    _this.domElement.appendChild(slider.domElement);
+  };
+
+  if (min != undefined && max != undefined) {
+    addSlider();
+  }
+
+  numberField.addEventListener('blur', function() {
+    var val = parseFloat(this.value);
+    if (slider) {
+      DAT.GUI.removeClass(_this.domElement, 'active');
+    }
+    if (!isNaN(val)) {
+      _this.setValue(val);
+    }
+  }, false);
+
+
+  numberField.addEventListener('mousewheel', function(e) {
+    e.preventDefault();
+    _this.setValue(_this.getValue() + Math.abs(e.wheelDeltaY) / e.wheelDeltaY * _this.getStep());
+    return false;
+  }, false);
+
+  numberField.addEventListener('mousedown', function(e) {
+    py = y = e.pageY;
+    clickedNumberField = true;
+    DAT.GUI.makeSelectable(numberField);
+    document.addEventListener('mousemove', dragNumberField, false);
+    document.addEventListener('mouseup', mouseup, false);
+  }, false);
+
+  // Handle up arrow and down arrow
+  numberField.addEventListener('keydown', function(e) {
+    var newVal;
+    switch (e.keyCode) {
+      case 13:    // enter
+        newVal = parseFloat(this.value);
+        _this.setValue(newVal);
+        break;
+      case 38:    // up
+        newVal = _this.getValue() + _this.getStep();
+        _this.setValue(newVal);
+        break;
+      case 40:    // down
+        newVal = _this.getValue() - _this.getStep();
+        _this.setValue(newVal);
+        break;
+    }
+  }, false);
+
+  var mouseup = function(e) {
+    document.removeEventListener('mousemove', dragNumberField, false);
+    
+    DAT.GUI.makeSelectable(numberField);
+    if (clickedNumberField && !draggedNumberField) {
+      //numberField.focus();
+      //numberField.select();
+    }
+    draggedNumberField = false;
+    clickedNumberField = false;
+    if (_this.finishChangeFunction != null) {
+      _this.finishChangeFunction.call(this, _this.getValue());
+    }
+    draggingHorizontal = false;
+    draggingVertical = false;
+    document.removeEventListener('mouseup', mouseup, false);
+  };
+
+  var dragNumberField = function(e) {
+
+    py = y;
+    y = e.pageY;
+    var dy = py - y;
+
+    
+
+    if (!draggingHorizontal && !draggingVertical) {
+      if (dy == 0) {
+        draggingHorizontal = true;
+      } else {
+        draggingVertical = true;
+      }
+    }
+
+    if (draggingHorizontal) {
+      return true;
+    }
+
+    DAT.GUI.addClass(_this.domElement, 'active');
+
+    DAT.GUI.makeUnselectable(_this.parent.domElement);
+    DAT.GUI.makeUnselectable(numberField);
+
+    draggedNumberField = true;
+    e.preventDefault();
+
+    var newVal = _this.getValue() + dy * _this.getStep();
+    _this.setValue(newVal);
+    return false;
+
+  };
+
+  this.options = function() {
+    _this.noSlider();
+    _this.domElement.removeChild(numberField);
+    return DAT.GUI.Controller.prototype.options.apply(this, arguments);
+  };
+
+  this.noSlider = function() {
+    if (slider) {
+      _this.domElement.removeChild(slider.domElement);
+    }
+    return this;
+  };
+
+  this.setValue = function(val) {
+
+    val = parseFloat(val);
+
+    if (min != undefined && val <= min) {
+      val = min;
+    } else if (max != undefined && val >= max) {
+      val = max;
+    }
+
+    return DAT.GUI.Controller.prototype.setValue.call(this, val);
+
+  };
+
+  this.updateDisplay = function() {
+    numberField.value = DAT.GUI.roundToDecimal(_this.getValue(), 4);
+    if (slider) slider.value = _this.getValue();
+  };
+};
+
+DAT.GUI.extendController(DAT.GUI.ControllerNumber);

src/DAT/GUI/ControllerNumberSlider.js

@@ -0,0 +1,64 @@
+DAT.GUI.ControllerNumberSlider = function(numberController, min, max, step, initValue) {
+
+  var clicked = false;
+  var _this = this;
+
+  var x, px;
+
+  this.domElement = document.createElement('div');
+  this.domElement.setAttribute('class', 'guidat-slider-bg');
+
+  this.fg = document.createElement('div');
+  this.fg.setAttribute('class', 'guidat-slider-fg');
+
+  this.domElement.appendChild(this.fg);
+
+  var onDrag = function(e) {
+    if (!clicked) return;
+    var pos = findPos(_this.domElement);
+    var val = DAT.GUI.map(e.pageX, pos[0], pos[0] + _this.domElement
+        .offsetWidth, numberController.getMin(), numberController.getMax());
+    val = Math.round(val / numberController.getStep()) * numberController
+        .getStep();
+    numberController.setValue(val);
+  };
+
+  this.domElement.addEventListener('mousedown', function(e) {
+    clicked = true;
+    x = px = e.pageX;
+    DAT.GUI.addClass(numberController.domElement, 'active');
+    onDrag(e);
+    document.addEventListener('mouseup', mouseup, false);
+  }, false);
+
+  var mouseup = function(e) {
+    DAT.GUI.removeClass(numberController.domElement, 'active');
+    clicked = false;
+    if (numberController.finishChangeFunction != null) {
+      numberController.finishChangeFunction.call(this,
+          numberController.getValue());
+    }
+    document.removeEventListener('mouseup', mouseup, false);
+  };
+
+  var findPos = function(obj) {
+    var curleft = 0, curtop = 0;
+    if (obj.offsetParent) {
+      do {
+        curleft += obj.offsetLeft;
+        curtop += obj.offsetTop;
+      } while ((obj = obj.offsetParent));
+      return [curleft,curtop];
+    }
+  };
+
+  this.__defineSetter__('value', function(e) {
+    this.fg.style.width = DAT.GUI.map(e, numberController.getMin(),
+        numberController.getMax(), 0, 100) + "%";
+  });
+
+  document.addEventListener('mousemove', onDrag, false);
+
+  this.value = initValue;
+
+};

src/DAT/GUI/ControllerString.js

@@ -0,0 +1,57 @@
+DAT.GUI.ControllerString = function() {
+
+  this.type = "string";
+
+  var _this = this;
+  DAT.GUI.Controller.apply(this, arguments);
+
+  var input = document.createElement('input');
+
+  var initialValue = this.getValue();
+
+  input.setAttribute('value', initialValue);
+  input.setAttribute('spellcheck', 'false');
+
+  this.domElement.addEventListener('mouseup', function() {
+    input.focus();
+    input.select();
+  }, false);
+
+  // TODO: getting messed up on ctrl a
+  input.addEventListener('keyup', function(e) {
+    if (e.keyCode == 13 && _this.finishChangeFunction != null) {
+      _this.finishChangeFunction.call(this, _this.getValue());
+      input.blur();
+    }
+    _this.setValue(input.value);
+  }, false);
+
+  input.addEventListener('mousedown', function(e) {
+    DAT.GUI.makeSelectable(input);
+  }, false);
+
+  input.addEventListener('blur', function() {
+    DAT.GUI.supressHotKeys = false;
+    if (_this.finishChangeFunction != null) {
+      _this.finishChangeFunction.call(this, _this.getValue());
+    }
+  }, false);
+
+  input.addEventListener('focus', function() {
+    DAT.GUI.supressHotKeys = true;
+  }, false);
+
+  this.updateDisplay = function() {
+    input.value = _this.getValue();
+  };
+
+  this.options = function() {
+    _this.domElement.removeChild(input);
+    return DAT.GUI.Controller.prototype.options.apply(this, arguments);
+  };
+
+  this.domElement.appendChild(input);
+
+};
+
+DAT.GUI.extendController(DAT.GUI.ControllerString);

src/DAT/GUI/GUI.css

@@ -0,0 +1,168 @@
+#guidat {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: auto;
+  z-index: 1001;
+  text-align: right;
+}
+
+.guidat {
+  color: #fff;
+  opacity: 0.97;
+  text-align: left;
+  float: right;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  background-color: #fff;
+}
+
+.guidat,
+.guidat input {
+  font: 9.5px Lucida Grande, sans-serif;
+}
+
+.guidat-controllers {
+  height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+a.guidat-toggle:link,
+a.guidat-toggle:visited,
+a.guidat-toggle:active {
+  text-decoration: none;
+  cursor: pointer;
+  color: #fff;
+  background-color: #222;
+  text-align: center;
+  display: block;
+  padding: 5px;
+
+}
+
+a.guidat-toggle:hover {
+  background-color: #000;
+}
+
+.guidat-controller {
+  padding: 3px;
+  height: 25px;
+  clear: left;
+  border-bottom: 1px solid #222;
+  background-color: #111;
+}
+
+.guidat-controller,
+.guidat-controller input,
+.guidat-slider-bg,
+.guidat-slider-fg {
+  -moz-transition: background-color 0.15s linear;
+  -webkit-transition: background-color 0.15s linear;
+  transition: background-color 0.15s linear;
+}
+
+.guidat-controller.boolean:hover,
+.guidat-controller.function:hover {
+  background-color: #000;
+}
+
+.guidat-controller input {
+  float: right;
+  outline: none;
+  border: 0;
+  padding: 4px;
+  margin-top: 2px;
+  background-color: #222;
+}
+
+.guidat-controller select {
+  margin-top: 4px;
+  float: right;
+}
+
+.guidat-controller input:hover {
+  background-color: #444;
+}
+
+.guidat-controller input:focus,
+.guidat-controller.active input {
+  background-color: #555;
+  color: #fff;
+}
+
+.guidat-controller.number {
+  border-left: 5px solid #00aeff;
+}
+
+.guidat-controller.string {
+  border-left: 5px solid #1ed36f;
+}
+
+.guidat-controller.string input {
+  border: 0;
+  color: #1ed36f;
+  margin-right: 2px;
+  width: 148px;
+}
+
+.guidat-controller.boolean {
+  border-left: 5px solid #54396e;
+}
+
+.guidat-controller.function {
+  border-left: 5px solid #e61d5f;
+}
+
+.guidat-controller.number input[type=text] {
+  width: 35px;
+  margin-left: 5px;
+  margin-right: 2px;
+  color: #00aeff;
+}
+
+.guidat .guidat-controller.boolean input {
+  margin-top: 6px;
+  margin-right: 2px;
+  font-size: 20px;
+}
+
+.guidat-controller:last-child {
+  border-bottom: none;
+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.guidat-propertyname {
+  padding: 5px;
+  padding-top: 7px;
+  cursor: default;
+  display: inline-block;
+}
+
+.guidat-controller .guidat-slider-bg:hover,
+.guidat-controller.active .guidat-slider-bg {
+  background-color: #444;
+}
+
+.guidat-controller .guidat-slider-bg .guidat-slider-fg:hover,
+.guidat-controller.active .guidat-slider-bg .guidat-slider-fg {
+  background-color: #52c8ff;
+}
+
+.guidat-slider-bg {
+  background-color: #222;
+  cursor: ew-resize;
+  width: 40%;
+  margin-top: 2px;
+  float: right;
+  height: 21px;
+}
+
+.guidat-slider-fg {
+  cursor: ew-resize;
+  background-color: #00aeff;
+  height: 21px;
+}

src/DAT/GUI/GUI.js

@@ -0,0 +1,740 @@
+var DAT = DAT || {};
+
+DAT.GUI = function(parameters) {
+
+  if (parameters == undefined) {
+    parameters = {};
+  }
+
+
+  var paramsExplicitHeight = false;
+  if (parameters.height == undefined) {
+    parameters.height = 300;
+  } else {
+    paramsExplicitHeight = true;
+  }
+
+  var MIN_WIDTH = 240;
+  var MAX_WIDTH = 500;
+
+  var controllers = [];
+  var listening = [];
+
+  var autoListen = true;
+
+  var listenInterval;
+
+  // Sum total of heights of controllers in this gui
+  var controllerHeight;
+
+  var _this = this;
+
+  var open = true;
+  
+  var width = 280;
+  if (parameters.width != undefined) {
+  	width = parameters.width;
+  }
+
+  // Prevents checkForOverflow bug in which loaded gui appearance
+  // settings are not respected by presence of scrollbar.
+  var explicitOpenHeight = false;
+
+  // How big we get when we open
+  var openHeight;
+
+  var closeString = 'Close Controls';
+  var openString = 'Open Controls';
+
+  var name;
+
+  var resizeTo = 0;
+  var resizeTimeout;
+
+  this.domElement = document.createElement('div');
+  this.domElement.setAttribute('class', 'guidat');
+  this.domElement.style.width = width + 'px';
+
+  var curControllerContainerHeight = parameters.height;
+  var controllerContainer = document.createElement('div');
+  controllerContainer.setAttribute('class', 'guidat-controllers');
+  controllerContainer.style.height = curControllerContainerHeight + 'px';
+
+  // Firefox hack to prevent horizontal scrolling
+  controllerContainer.addEventListener('DOMMouseScroll', function(e) {
+
+    var scrollAmount = this.scrollTop;
+
+    if (e.wheelDelta) {
+      scrollAmount += e.wheelDelta;
+    } else if (e.detail) {
+      scrollAmount += e.detail;
+    }
+
+    if (e.preventDefault) {
+      e.preventDefault();
+    }
+
+    e.returnValue = false;
+
+    controllerContainer.scrollTop = scrollAmount;
+
+  }, false);
+
+
+  var toggleButton = document.createElement('a');
+  toggleButton.setAttribute('class', 'guidat-toggle');
+  toggleButton.setAttribute('href', '#');
+  toggleButton.innerHTML = open ? closeString : openString;
+
+  var toggleDragged = false;
+  var dragDisplacementY = 0;
+  var dragDisplacementX = 0;
+  var togglePressed = false;
+
+  var my, pmy, mx, pmx;
+
+  var resize = function(e) {
+    pmy = my;
+    pmx = mx;
+    my = e.pageY;
+    mx = e.pageX;
+
+    var dmy = my - pmy;
+
+    if (!open) {
+      if (dmy > 0) {
+        open = true;
+        curControllerContainerHeight = openHeight = 1;
+        toggleButton.innerHTML = name || closeString;
+      } else {
+        return;
+      }
+    }
+
+    // TODO: Flip this if you want to resize to the left.
+    var dmx = pmx - mx;
+
+    if (dmy > 0 &&
+        curControllerContainerHeight > controllerHeight) {
+      var d = DAT.GUI.map(curControllerContainerHeight, controllerHeight,
+          controllerHeight + 100, 1, 0);
+      dmy *= d;
+    }
+
+    toggleDragged = true;
+
+    dragDisplacementY += dmy;
+    openHeight += dmy;
+    curControllerContainerHeight += dmy;
+    controllerContainer.style.height = openHeight + 'px';
+
+    dragDisplacementX += dmx;
+    width += dmx;
+    width = DAT.GUI.constrain(width, MIN_WIDTH, MAX_WIDTH);
+    _this.domElement.style.width = width + 'px';
+
+    checkForOverflow();
+
+  };
+
+  toggleButton.addEventListener('mousedown', function(e) {
+    pmy = my = e.pageY;
+    pmx = mx = e.pageX;
+    togglePressed = true;
+    e.preventDefault();
+    dragDisplacementX = 0;
+    dragDisplacementY = 0;
+    document.addEventListener('mousemove', resize, false);
+    return false;
+
+  }, false);
+
+  toggleButton.addEventListener('click', function(e) {
+    e.preventDefault();
+    return false;
+  }, false);
+
+  document.addEventListener('mouseup', function(e) {
+
+    if (togglePressed && !toggleDragged) {
+      _this.toggle();
+    }
+
+    if (togglePressed && toggleDragged) {
+
+      if (dragDisplacementX == 0) {
+        adaptToScrollbar();
+      }
+
+      if (openHeight > controllerHeight) {
+
+        clearTimeout(resizeTimeout);
+        openHeight = resizeTo = controllerHeight;
+        beginResize();
+
+      } else if (controllerContainer.children.length >= 1) {
+
+        var singleControllerHeight = controllerContainer.children[0].
+            offsetHeight;
+        clearTimeout(resizeTimeout);
+        var target = Math.round(curControllerContainerHeight /
+            singleControllerHeight) * singleControllerHeight - 1;
+        resizeTo = target;
+        if (resizeTo <= 0) {
+          _this.close();
+          openHeight = singleControllerHeight * 2;
+        } else {
+          openHeight = resizeTo;
+          beginResize();
+        }
+      }
+    }
+
+    document.removeEventListener('mousemove', resize, false);
+    e.preventDefault();
+    toggleDragged = false;
+    togglePressed = false;
+
+    return false;
+
+  }, false);
+
+  this.domElement.appendChild(controllerContainer);
+  this.domElement.appendChild(toggleButton);
+
+  if (parameters.domElement) {
+    parameters.domElement.appendChild(this.domElement);
+  } else if (DAT.GUI.autoPlace) {
+    if (DAT.GUI.autoPlaceContainer == null) {
+      DAT.GUI.autoPlaceContainer = document.createElement('div');
+      DAT.GUI.autoPlaceContainer.setAttribute('id', 'guidat');
+
+      document.body.appendChild(DAT.GUI.autoPlaceContainer);
+    }
+    DAT.GUI.autoPlaceContainer.appendChild(this.domElement);
+  }
+
+  this.autoListenIntervalTime = 1000 / 60;
+
+  var createListenInterval = function() {
+    listenInterval = setInterval(function() {
+      _this.listen();
+    }, this.autoListenIntervalTime);
+  };
+
+  this.__defineSetter__('autoListen', function(v) {
+    autoListen = v;
+    if (!autoListen) {
+      clearInterval(listenInterval);
+    } else {
+      if (listening.length > 0) createListenInterval();
+    }
+  });
+
+  this.__defineGetter__('autoListen', function(v) {
+    return autoListen;
+  });
+
+  this.listenTo = function(controller) {
+    // TODO: check for duplicates
+    if (listening.length == 0) {
+      createListenInterval();
+    }
+    listening.push(controller);
+  };
+
+  this.unlistenTo = function(controller) {
+    // TODO: test this
+    for (var i = 0; i < listening.length; i++) {
+      if (listening[i] == controller) listening.splice(i, 1);
+    }
+    if (listening.length <= 0) {
+      clearInterval(listenInterval);
+    }
+  };
+
+  this.listen = function(whoToListenTo) {
+    var arr = whoToListenTo || listening;
+    for (var i in arr) {
+      arr[i].updateDisplay();
+    }
+  };
+
+  this.listenAll = function() {
+    this.listen(controllers);
+  }
+
+  this.autoListen = true;
+
+  var alreadyControlled = function(object, propertyName) {
+    for (var i in controllers) {
+      if (controllers[i].object == object &&
+          controllers[i].propertyName == propertyName) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  var construct = function(constructor, args) {
+    function C() {
+      return constructor.apply(this, args);
+    }
+
+    C.prototype = constructor.prototype;
+    return new C();
+  };
+
+  this.add = function() {
+
+
+    if (arguments.length == 1) {
+      var toReturn = [];
+      for (var i in arguments[0]) {
+        toReturn.push(_this.add(arguments[0], i));
+      }
+      return toReturn;
+    }
+
+    var object = arguments[0];
+    var propertyName = arguments[1];
+
+    // Have we already added this?
+    if (alreadyControlled(object, propertyName)) {
+      //  DAT.GUI.error('Controller for \'' + propertyName+'\' already added.');
+      //  return;
+    }
+
+    var value = object[propertyName];
+    if(value == undefined && object.get) value = object.get(propertyName);
+
+    // Does this value exist? Is it accessible?
+    if (value == undefined) {
+      DAT.GUI.error(object + ' either has no property \'' + propertyName +
+          '\', or the property is inaccessible.');
+      return;
+    }
+
+    var type = typeof value;
+    var handler = handlerTypes[type];
+
+    // Do we know how to deal with this data type?
+    if (handler == undefined) {
+      DAT.GUI.error('Cannot create controller for data type \'' + type + '\'');
+      return;
+    }
+
+    var args = [this]; // Set first arg (parent) to this 
+    for (var j = 0; j < arguments.length; j++) {
+      args.push(arguments[j]);
+    }
+
+    var controllerObject = construct(handler, args);
+
+    // Were we able to make the controller?
+    if (!controllerObject) {
+      DAT.GUI.error('Error creating controller for \'' + propertyName + '\'.');
+      return;
+    }
+
+    // Success.
+    controllerContainer.appendChild(controllerObject.domElement);
+    controllers.push(controllerObject);
+    DAT.GUI.allControllers.push(controllerObject);
+
+    // Do we have a saved value for this controller?
+    if (type != 'function' &&
+        DAT.GUI.saveIndex < DAT.GUI.savedValues.length) {
+      controllerObject.setValue(DAT.GUI.savedValues[DAT.GUI.saveIndex]);
+      DAT.GUI.saveIndex++;
+    }
+
+    // Compute sum height of controllers.
+    checkForOverflow();
+
+    // Prevents checkForOverflow bug in which loaded gui appearance
+    // settings are not respected by presence of scrollbar.
+    if (!explicitOpenHeight) {
+      openHeight = controllerHeight;
+    }
+
+    // Let's see if we're doing this on onload and lets *try* to guess how
+    // big you want the damned box.
+    if (!paramsExplicitHeight) {
+      try {
+
+        // Probably a better way to do this
+        var caller = arguments.callee.caller;
+
+        if (caller == window['onload']) {
+          curControllerContainerHeight = resizeTo = openHeight =
+              controllerHeight;
+          controllerContainer.style.height = curControllerContainerHeight + 'px';
+        }
+
+      } catch (e) {}
+    }
+
+
+    return controllerObject;
+
+  }
+
+  var checkForOverflow = function() {
+    controllerHeight = 0;
+    for (var i in controllers) {
+      controllerHeight += controllers[i].domElement.offsetHeight;
+    }
+    if (controllerHeight - 1 > openHeight) {
+      controllerContainer.style.overflowY = 'auto';
+    } else {
+      controllerContainer.style.overflowY = 'hidden';
+    }
+  };
+
+  var handlerTypes = {
+    'number': DAT.GUI.ControllerNumber,
+    'string': DAT.GUI.ControllerString,
+    'boolean': DAT.GUI.ControllerBoolean,
+    'function': DAT.GUI.ControllerFunction
+  };
+
+  this.reset = function() {
+    // TODO ... Set all values back to their initials.
+    for (var i = 0, l = DAT.GUI.allControllers.length; i < l; i++) {
+        // apply to each controller
+        DAT.GUI.allControllers[i].reset();
+    }
+  }
+
+  this.toggle = function() {
+    open ? this.close() : this.open();
+  };
+
+  this.open = function() {
+    toggleButton.innerHTML = name || closeString;
+    resizeTo = openHeight;
+    clearTimeout(resizeTimeout);
+    beginResize();
+    adaptToScrollbar();
+    open = true;
+  }
+
+  this.close = function() {
+    toggleButton.innerHTML = name || openString;
+    resizeTo = 0;
+    clearTimeout(resizeTimeout);
+    beginResize();
+    adaptToScrollbar();
+    open = false;
+  }
+
+  this.name = function(n) {
+    name = n;
+    toggleButton.innerHTML = n;
+  }
+
+  // used in saveURL
+  this.appearanceVars = function() {
+    return [open, width, openHeight, controllerContainer.scrollTop]
+  }
+
+  var beginResize = function() {
+
+    curControllerContainerHeight = controllerContainer.offsetHeight;
+    curControllerContainerHeight += (resizeTo - curControllerContainerHeight)
+        * 0.6;
+
+    if (Math.abs(curControllerContainerHeight - resizeTo) < 1) {
+      curControllerContainerHeight = resizeTo;
+    } else {
+      resizeTimeout = setTimeout(beginResize, 1000 / 30);
+    }
+    controllerContainer.style.height = Math.round(curControllerContainerHeight)
+        + 'px';
+    checkForOverflow();
+
+  }
+
+  var adaptToScrollbar = function() {
+    // Clears lingering scrollbar column
+    _this.domElement.style.width = (width - 1) + 'px';
+    setTimeout(function() {
+      _this.domElement.style.width = width + 'px';
+    }, 1);
+  };
+
+
+  // Load saved appearance:
+
+  if (DAT.GUI.guiIndex < DAT.GUI.savedAppearanceVars.length) {
+
+    width = parseInt(DAT.GUI.savedAppearanceVars[DAT.GUI.guiIndex][1]);
+    _this.domElement.style.width = width + 'px';
+
+    openHeight = parseInt(DAT.GUI.savedAppearanceVars[DAT.GUI.guiIndex][2]);
+    explicitOpenHeight = true;
+    if (eval(DAT.GUI.savedAppearanceVars[DAT.GUI.guiIndex][0]) == true) {
+      curControllerContainerHeight = openHeight;
+      var t = DAT.GUI.savedAppearanceVars[DAT.GUI.guiIndex][3]
+
+      // Hack.
+      setTimeout(function() {
+        controllerContainer.scrollTop = t;
+      }, 0);
+
+      if (DAT.GUI.scrollTop > -1) {
+        document.body.scrollTop = DAT.GUI.scrollTop;
+      }
+      resizeTo = openHeight;
+      this.open();
+    }
+
+    DAT.GUI.guiIndex++;
+  }
+
+  DAT.GUI.allGuis.push(this);
+
+  // Add hide listener if this is the first DAT.GUI.
+
+  if (DAT.GUI.allGuis.length == 1) {
+
+    window.addEventListener('keyup', function(e) {
+      // Hide on 'H'
+      if (!DAT.GUI.supressHotKeys && e.keyCode == 72) {
+        DAT.GUI.toggleHide();
+      }
+    }, false);
+
+    if (DAT.GUI.inlineCSS) {
+      var styleSheet = document.createElement('style');
+      styleSheet.setAttribute('type', 'text/css');
+      styleSheet.innerHTML = DAT.GUI.inlineCSS;
+      document.head.insertBefore(styleSheet, document.head.firstChild);
+    }
+
+  }
+
+};
+
+// Do not set this directly.
+DAT.GUI.hidden = false;
+
+// Static members
+
+DAT.GUI.autoPlace = true;
+DAT.GUI.autoPlaceContainer = null;
+DAT.GUI.allControllers = [];
+DAT.GUI.allGuis = [];
+
+DAT.GUI.supressHotKeys = false;
+
+DAT.GUI.toggleHide = function() {
+  if (DAT.GUI.hidden) {
+    DAT.GUI.open();
+  } else {
+    DAT.GUI.close();
+  }
+}
+
+DAT.GUI.open = function() {
+  DAT.GUI.hidden = false;
+  for (var i in DAT.GUI.allGuis) {
+    DAT.GUI.allGuis[i].domElement.style.display = 'block';
+  }
+}
+
+DAT.GUI.close = function() {
+  DAT.GUI.hidden = true;
+  for (var i in DAT.GUI.allGuis) {
+    DAT.GUI.allGuis[i].domElement.style.display = 'none';
+  }
+}
+
+DAT.GUI.saveURL = function() {
+  var url = DAT.GUI.replaceGetVar('saveString', DAT.GUI.getSaveString());
+  window.location = url;
+};
+
+DAT.GUI.scrollTop = -1;
+
+DAT.GUI.load = function(saveString) {
+
+  //DAT.GUI.savedAppearanceVars = [];
+  var vals = saveString.split(',');
+  var numGuis = parseInt(vals[0]);
+  DAT.GUI.scrollTop = parseInt(vals[1]);
+  for (var i = 0; i < numGuis; i++) {
+    var appr = vals.splice(2, 4);
+    DAT.GUI.savedAppearanceVars.push(appr);
+  }
+
+  DAT.GUI.savedValues = vals.splice(2, vals.length);
+
+};
+
+DAT.GUI.savedValues = [];
+DAT.GUI.savedAppearanceVars = [];
+
+DAT.GUI.getSaveString = function() {
+
+  var vals = [], i;
+
+  vals.push(DAT.GUI.allGuis.length);
+  vals.push(document.body.scrollTop);
+
+
+  for (i in DAT.GUI.allGuis) {
+    var av = DAT.GUI.allGuis[i].appearanceVars();
+    for (var j = 0; j < av.length; j++) {
+      vals.push(av[j]);
+    }
+  }
+
+  for (i in DAT.GUI.allControllers) {
+
+    // We don't save values for functions.
+    if (DAT.GUI.allControllers[i].type == 'function') {
+      continue;
+    }
+
+    var v = DAT.GUI.allControllers[i].getValue();
+
+    // Round numbers so they don't get enormous
+    if (DAT.GUI.allControllers[i].type == 'number') {
+      v = DAT.GUI.roundToDecimal(v, 4);
+    }
+
+    vals.push(v);
+
+  }
+
+  return vals.join(',');
+
+};
+
+DAT.GUI.getVarFromURL = function(v) {
+
+  var vars = [], hash;
+  var hashes = window.location.href.slice(
+      window.location.href.indexOf('?') + 1).split('&');
+
+  for (var i = 0; i < hashes.length; i++) {
+    hash = hashes[i].split('=');
+    if (hash == undefined) continue;
+    if (hash[0] == v) {
+      return hash[1];
+    }
+  }
+
+  return null;
+
+};
+
+DAT.GUI.replaceGetVar = function(varName, val) {
+
+  var vars = [], hash;
+  var loc = window.location.href;
+  var hashes = window.location.href.slice(
+      window.location.href.indexOf('?') + 1).split('&');
+
+  for (var i = 0; i < hashes.length; i++) {
+    hash = hashes[i].split('=');
+    if (hash == undefined) continue;
+    if (hash[0] == varName) {
+      return loc.replace(hash[1], val);
+    }
+  }
+
+  if (window.location.href.indexOf('?') != -1) {
+    return loc + '&' + varName + '=' + val;
+  }
+
+  return loc + '?' + varName + '=' + val;
+
+};
+
+DAT.GUI.saveIndex = 0;
+DAT.GUI.guiIndex = 0;
+
+DAT.GUI.showSaveString = function() {
+  alert(DAT.GUI.getSaveString());
+};
+
+// Util functions
+
+DAT.GUI.makeUnselectable = function(elem) {
+  if (elem == undefined || elem.style == undefined) return;
+  elem.onselectstart = function() {
+    return false;
+  };
+  elem.style.MozUserSelect = 'none';
+  elem.style.KhtmlUserSelect = 'none';
+  elem.unselectable = 'on';
+
+  var kids = elem.childNodes;
+  for (var i = 0; i < kids.length; i++) {
+    DAT.GUI.makeUnselectable(kids[i]);
+  }
+
+};
+
+DAT.GUI.makeSelectable = function(elem) {
+  if (elem == undefined || elem.style == undefined) return;
+  elem.onselectstart = function() {
+  };
+  elem.style.MozUserSelect = 'auto';
+  elem.style.KhtmlUserSelect = 'auto';
+  elem.unselectable = 'off';
+
+  var kids = elem.childNodes;
+  for (var i = 0; i < kids.length; i++) {
+    DAT.GUI.makeSelectable(kids[i]);
+  }
+
+};
+
+DAT.GUI.map = function(v, i1, i2, o1, o2) {
+  return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
+};
+
+DAT.GUI.constrain = function (v, o1, o2) {
+  if (v < o1) v = o1;
+  else if (v > o2) v = o2;
+  return v;
+};
+
+DAT.GUI.error = function(str) {
+  if (typeof console.error == 'function') {
+    console.error('[DAT.GUI ERROR] ' + str);
+  }
+};
+
+DAT.GUI.roundToDecimal = function(n, decimals) {
+  var t = Math.pow(10, decimals);
+  return Math.round(n * t) / t;
+};
+
+DAT.GUI.extendController = function(clazz) {
+  clazz.prototype = new DAT.GUI.Controller();
+  clazz.prototype.constructor = clazz;
+};
+
+DAT.GUI.addClass = function(domElement, className) {
+  if (DAT.GUI.hasClass(domElement, className)) return;
+  domElement.className += ' ' + className;
+}
+
+DAT.GUI.hasClass = function(domElement, className) {
+  return domElement.className.indexOf(className) != -1;
+}
+
+DAT.GUI.removeClass = function(domElement, className) {
+  var reg = new RegExp(' ' + className, 'g');
+  domElement.className = domElement.className.replace(reg, '');
+}
+
+if (DAT.GUI.getVarFromURL('saveString') != null) {
+  DAT.GUI.load(DAT.GUI.getVarFromURL('saveString'));
+}

utils/build.py

@@ -0,0 +1,186 @@
+#/usr/bin/env python
+
+from optparse import OptionParser
+import httplib, urllib
+import os, fnmatch, shutil, re
+
+usage = """usage: %prog [options] command
+
+Commands:
+  build                 build the script
+  debug                 print the header to include js files
+  clean                 remove any built files
+"""
+parser = OptionParser(usage=usage)
+parser.add_option('-l', '--level', dest='level', default='SIMPLE_OPTIMIZATIONS',
+                  help='Closure compilation level [WHITESPACE_ONLY, SIMPLE_OPTIMIZATIONS, \
+                  ADVANCED_OPTIMIZATIONS]')
+
+UTILS = os.path.dirname(os.path.relpath(__file__))
+PREFIX = os.path.join(UTILS,'..')
+SRC_ROOT= os.path.join(PREFIX,'src')
+BUILD_ROOT = os.path.join(PREFIX,'build')
+INDEX = os.path.join(PREFIX,'index.html')
+BUILD_NAME = 'DAT.GUI'
+ALL_JS = ['DAT.GUI.js','DAT.GUI']
+
+LICENSE = """/**
+ * dat.gui Javascript Controller Library
+ * http://dataarts.github.com/dat.gui
+ *
+ * Copyright 2011 Data Arts Team, Google Creative Lab
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+"""
+
+def flatten(l, ltypes=(list, tuple)):
+    ltype = type(l)
+    l = list(l)
+    i = 0
+    while i < len(l):
+        while isinstance(l[i], ltypes):
+            if not l[i]:
+                l.pop(i)
+                i -= 1
+                break
+            else:
+                l[i:i + 1] = l[i]
+        i += 1
+    return ltype(l)
+
+def expand(path, globby):
+  matches = []
+  path = path.split('.')
+  path.insert(0,SRC_ROOT)
+  filename = "%s.%s"%(path[-2],path[-1])
+  if fnmatch.fnmatch(filename, globby):
+    tmppath = os.path.join(*(path[:-1]+[filename]))
+    if os.path.exists(tmppath):
+      path[-1] = filename
+    else:
+      path = path[:-2]+[filename]
+  path = os.path.join(*path)
+  if os.path.isdir(path):
+    for root, dirnames, filenames in os.walk(path):
+      for filename in fnmatch.filter(filenames, globby):
+        matches.append(os.path.join(root, filename))
+  else:
+    matches.append(path)
+  return matches
+
+def unique(seq, idfun=None):
+  """Ordered uniquify function
+  if in 2.7 use:
+   OrderedDict.fromkeys(seq).keys()
+  """
+  if idfun is None:
+    def idfun(x): return x
+  seen = {}
+  result = []
+  for item in seq:
+    marker = idfun(item)
+    if marker in seen: continue
+    seen[marker] = 1
+    result.append(item)
+  return result
+
+def source_list(src, globby='*.js'):
+  def expander(f):
+    return expand(f,globby)
+  return unique(flatten(map(expander, src)))
+
+def compile(code):
+  params = urllib.urlencode([
+      ('js_code', code),
+      ('compilation_level', options.level),
+      ('output_format', 'text'),
+      ('output_info', 'compiled_code'),
+    ])
+  headers = { 'Content-type': 'application/x-www-form-urlencoded' }
+  conn = httplib.HTTPConnection('closure-compiler.appspot.com')
+  conn.request('POST', '/compile', params, headers)
+  response = conn.getresponse()
+  data = response.read()
+  conn.close()
+  return data
+
+def bytes_to_kb(b,digits=1):
+  return round(0.0009765625 * b, digits)
+
+def clean():
+  if os.path.exists(BUILD_ROOT):
+    shutil.rmtree(BUILD_ROOT)
+    print('DONE. Removed %s'%(BUILD_ROOT,))
+  else:
+    print('DONE. Nothing to clean')
+
+def build(jssrc, csssrc=list([''])):
+  if not os.path.exists(BUILD_ROOT):
+    os.makedirs(BUILD_ROOT)
+
+  if csssrc:
+    cssfiles = source_list(csssrc, '*.css')
+    print('CSS files being compiled: ', cssfiles)
+    css = '\n'.join([open(f).read() for f in cssfiles])
+    css = re.sub(r'[ \t\n\r]+',' ',css)
+
+  jsfiles = source_list(jssrc, '*.js')
+  print('JS files being compiled: ', jsfiles)
+  code = '\n'.join([open(f).read() for f in jsfiles])
+  if csssrc:
+    code += """DAT.GUI.inlineCSS = '%s';\n"""%(css,)
+
+  outpath = os.path.join(BUILD_ROOT, BUILD_NAME+'.js')
+  with open(outpath,'w') as f:
+    f.write(LICENSE)
+    f.write(code)
+
+  compiled = compile(code)
+  outpathmin = os.path.join(BUILD_ROOT, BUILD_NAME+'.min.js')
+  with open(outpathmin,'w') as f:
+    f.write(LICENSE)
+    f.write(compiled)
+
+  size = bytes_to_kb(os.path.getsize(outpath))
+  sizemin = bytes_to_kb(os.path.getsize(outpathmin))
+  with open(INDEX,'r') as f:
+    index = f.read()
+  with open(INDEX,'w') as f:
+    index = re.sub(r'<small id=\'buildsize\'>\[[0-9.]+kb\]','<small id=\'buildsize\'>[%skb]'%(size,),index)
+    index = re.sub(r'<small id=\'buildsizemin\'>\[[0-9.]+kb\]','<small id=\'buildsizemin\'>[%skb]'%(sizemin,),index)
+    f.write(index)
+
+  print('DONE. Built files in %s.'%(BUILD_ROOT,))
+
+def debug(jssrc, csssrc=list([''])):
+  head = ""
+  files = source_list(csssrc, '*.css')
+  for f in files:
+    f = f.replace(PREFIX+'/','')
+    head += '<link href="%s" media="screen" rel="stylesheet" type="text/css"/>\n'%(f,)
+  files = source_list(jssrc, '*.js')
+  for f in files:
+    f = f.replace(PREFIX+'/','')
+    head += '<script type="text/javascript" src="%s"></script>\n'%(f,)
+  print(head)
+
+if __name__ == '__main__':
+  global options
+  (options, args) = parser.parse_args()
+  if len(args) != 1:
+    print(parser.usage)
+    exit(0)
+  command = args[0]
+  if command == 'build':
+    build(ALL_JS)
+  elif command == 'clean':
+    clean()
+  elif command == 'debug':
+    debug(ALL_JS)
+
+