diff --git a/src/core/init.js b/src/core/init.js
index 6193924..cbfe0d4 100644
--- a/src/core/init.js
+++ b/src/core/init.js
@@ -1,216 +1,218 @@
 /**
  * Javelin core; installs Javelin and Stratcom event delegation.
  *
  * @provides javelin-magical-init
  *
  * @javelin-installs JX.__rawEventQueue
  * @javelin-installs JX.__simulate
+ * @javelin-installs JX.__allowedEvents
  * @javelin-installs JX.enableDispatch
  * @javelin-installs JX.onload
+ * @javelin-installs JX.flushHoldingQueue
  *
  * @javelin
  */
 (function() {
 
   if (window.JX) {
     return;
   }
 
   window.JX = {};
 
   // The holding queues hold calls to functions (JX.install() and JX.behavior())
   // before they load, so if you're async-loading them later in the document
   // the page will execute correctly regardless of the order resources arrive
   // in.
 
   var holding_queues = {};
 
   function makeHoldingQueue(name) {
     if (JX[name]) {
       return;
     }
     holding_queues[name] = [];
     JX[name] = function() { holding_queues[name].push(arguments); }
   }
 
   JX.flushHoldingQueue = function(name, fn) {
     for (var ii = 0; ii < holding_queues[name].length; ii++) {
       fn.apply(null, holding_queues[name][ii]);
     }
     holding_queues[name] = {};
   }
 
   makeHoldingQueue('install');
   makeHoldingQueue('behavior');
   makeHoldingQueue('install-init');
 
   window['__DEV__'] = window['__DEV__'] || 0;
 
   var loaded = false;
   var onload = [];
   var master_event_queue = [];
   var root = document.documentElement;
   var has_add_event_listener = !!root.addEventListener;
 
   JX.__rawEventQueue = function(what) {
     master_event_queue.push(what);
 
     // Evade static analysis - JX.Stratcom
     var Stratcom = JX['Stratcom'];
     if (Stratcom && Stratcom.ready) {
       //  Empty the queue now so that exceptions don't cause us to repeatedly
       //  try to handle events.
       var local_queue = master_event_queue;
       master_event_queue = [];
       for (var ii = 0; ii < local_queue.length; ++ii) {
         var evt = local_queue[ii];
 
         //  Sometimes IE gives us events which throw when ".type" is accessed;
         //  just ignore them since we can't meaningfully dispatch them. TODO:
         //  figure out where these are coming from.
         try { var test = evt.type; } catch (x) { continue; }
 
         if (!loaded && evt.type == 'domready') {
           document.body && (document.body.id = null);
           loaded = true;
           for (var ii = 0; ii < onload.length; ii++) {
             onload[ii]();
           }
         }
 
         Stratcom.dispatch(evt);
       }
     } else {
       var target = what.srcElement || what.target;
       if (target &&
           (what.type in {click: 1, submit: 1}) &&
           target.getAttribute &&
           target.getAttribute('data-mustcapture') === '1') {
         what.returnValue = false;
         what.preventDefault && what.preventDefault();
         document.body.id = 'event_capture';
 
         // For versions of IE that use attachEvent, the event object is somehow
         // stored globally by reference, and all the references we push to the
         // master_event_queue will always refer to the most recent event. We
         // work around this by popping the useless global event off the queue,
         // and pushing a clone of the event that was just fired using the IE's
         // proprietary createEventObject function.
         // see: http://msdn.microsoft.com/en-us/library/ms536390(v=vs.85).aspx
         if (!add_event_listener && document.createEventObject) {
           master_event_queue.pop();
           master_event_queue.push(document.createEventObject(what));
         }
 
         return false;
       }
     }
   }
 
   JX.enableDispatch = function(target, type) {
     if (__DEV__) {
       JX.__allowedEvents[type] = true;
     }
 
     if (target.addEventListener) {
       target.addEventListener(type, JX.__rawEventQueue, true);
     } else if (target.attachEvent) {
       target.attachEvent('on' + type, JX.__rawEventQueue);
     }
   };
 
   var document_events = [
     'click',
     'change',
     'submit',
     'keypress',
     'mousedown',
     'mouseover',
     'mouseout',
     'mouseup',
     'keyup',
     'keydown',
     'drop',
     'dragenter',
     'dragleave',
     'dragover',
     'touchstart',
     'touchmove',
     'touchend',
     'touchcancel'
   ];
 
   //  Simulate focus and blur in old versions of IE using focusin and focusout
   //  TODO: Document the gigantic IE mess here with focus/blur.
   //  TODO: beforeactivate/beforedeactivate?
   //  http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html
   if (!has_add_event_listener) {
     document_events.push('focusin', 'focusout');
   }
 
   //  Opera is multilol: it propagates focus / blur oddly
   if (window.opera) {
     document_events.push('focus', 'blur');
   }
 
   if (__DEV__) {
     JX.__allowedEvents = {};
     if ('onpagehide' in window) {
       JX.__allowedEvents.unload = true;
     }
   }
 
   for (var ii = 0; ii < document_events.length; ++ii) {
     JX.enableDispatch(root, document_events[ii]);
   }
 
   //  In particular, we're interested in capturing window focus/blur here so
   //  long polls can abort when the window is not focused.
   var window_events = [
     ('onpagehide' in window) ? 'pagehide' : 'unload',
     'resize',
     'focus',
     'blur'
   ];
 
 
   for (var ii = 0; ii < window_events.length; ++ii) {
     JX.enableDispatch(window, window_events[ii]);
   }
 
   JX.__simulate = function(node, event) {
     if (!has_add_event_listener) {
       var e = {target: node, type: event};
       JX.__rawEventQueue(e);
       if (e.returnValue === false) {
         return false;
       }
     }
   };
 
   if (has_add_event_listener) {
     document.addEventListener('DOMContentLoaded', function() {
       JX.__rawEventQueue({type: 'domready'});
     }, true);
   } else {
     var ready =
       "if (this.readyState == 'complete') {" +
         "JX.__rawEventQueue({type: 'domready'});" +
       "}";
 
     document.write(
       '<script' +
       ' defer="defer"' +
       ' src="javascript:void(0)"' +
       ' onreadystatechange="' + ready + '"' +
       '><\/sc' + 'ript\>');
   }
 
   JX.onload = function(func) {
     if (loaded) {
       func();
     } else {
       onload.push(func);
     }
   }
 })();
diff --git a/src/core/install.js b/src/core/install.js
index 9988633..8c1dbaa 100644
--- a/src/core/install.js
+++ b/src/core/install.js
@@ -1,436 +1,440 @@
 /**
  * @requires javelin-util
+ *           javelin-magical-init
  * @provides javelin-install
+ *
  * @javelin-installs JX.install
+ * @javelin-installs JX.createClass
+ *
  * @javelin
  */
 
 /**
  * Install a class into the Javelin ("JX") namespace. The first argument is the
  * name of the class you want to install, and the second is a map of these
  * attributes (all of which are optional):
  *
  *   - ##construct## //(function)// Class constructor. If you don't provide one,
  *       one will be created for you (but it will be very boring).
  *   - ##extend## //(string)// The name of another JX-namespaced class to extend
  *       via prototypal inheritance.
  *   - ##members## //(map)// A map of instance methods and properties.
  *   - ##statics## //(map)// A map of static methods and properties.
  *   - ##initialize## //(function)// A function which will be run once, after
  *       this class has been installed.
  *   - ##properties## //(map)// A map of properties that should have instance
  *       getters and setters automatically generated for them. The key is the
  *       property name and the value is its default value. For instance, if you
  *       provide the property "size", the installed class will have the methods
  *       "getSize()" and "setSize()". It will **NOT** have a property ".size"
  *       and no guarantees are made about where install is actually chosing to
  *       store the data. The motivation here is to let you cheaply define a
  *       stable interface and refine it later as necessary.
  *   - ##events## //(list)// List of event types this class is capable of
  *       emitting.
  *
  * For example:
  *
  *   JX.install('Dog', {
  *     construct : function(name) {
  *       this.setName(name);
  *     },
  *     members : {
  *       bark : function() {
  *         // ...
  *       }
  *     },
  *     properites : {
  *       name : null,
  *     }
  *   });
  *
  * This creates a new ##Dog## class in the ##JX## namespace:
  *
  *   var d = new JX.Dog();
  *   d.bark();
  *
  * Javelin classes are normal Javascript functions and generally behave in
  * the expected way. Some properties and methods are automatically added to
  * all classes:
  *
  *   - ##instance.__id__## Globally unique identifier attached to each instance.
  *   - ##prototype.__class__## Reference to the class constructor.
  *   - ##constructor.__path__## List of path tokens used emit events. It is
  *       probably never useful to access this directly.
  *   - ##constructor.__readable__## Readable class name. You could use this
  *       for introspection.
  *   - ##constructor.__events__## //DEV ONLY!// List of events supported by
  *       this class.
  *   - ##constructor.listen()## Listen to all instances of this class. See
  *       @{JX.Base}.
  *   - ##instance.listen()## Listen to one instance of this class. See
  *       @{JX.Base}.
  *   - ##instance.invoke()## Invoke an event from an instance. See @{JX.Base}.
  *
  *
  * @param  string  Name of the class to install. It will appear in the JX
  *                 "namespace" (e.g., JX.Pancake).
  * @param  map     Map of properties, see method documentation.
  * @return void
  *
  * @author epriestley
  */
 JX.install = function(new_name, new_junk) {
 
   if (typeof JX.install._nextObjectID == 'undefined') {
     JX.install._nextObjectID = 0;
   }
 
   // If we've already installed this, something is up.
   if (new_name in JX) {
     if (__DEV__) {
       throw new Error(
         'JX.install("' + new_name + '", ...): ' +
         'trying to reinstall something that has already been installed.');
     }
     return;
   }
 
   if (__DEV__) {
     if ('name' in new_junk) {
       throw new Error(
         'JX.install("' + new_name + '", {"name": ...}): ' +
         'trying to install with "name" property.' +
         'Either remove it or call JX.createClass directly.');
     }
   }
 
   // Since we may end up loading things out of order (e.g., Dog extends Animal
   // but we load Dog first) we need to keep a list of things that we've been
   // asked to install but haven't yet been able to install around.
   if (!JX.install._queue) {
     JX.install._queue = [];
   }
   JX.install._queue.push([new_name, new_junk]);
   do {
     var junk;
     var name = null;
     var initialize;
     for (var ii = 0; ii < JX.install._queue.length; ++ii) {
       junk = JX.install._queue[ii][1];
       if (junk.extend && !JX[junk.extend]) {
         // We need to extend something that we haven't been able to install
         // yet, so just keep this in queue.
         continue;
       }
 
       // Install time! First, get this out of the queue.
       name = JX.install._queue.splice(ii, 1)[0][0];
       --ii;
 
       if (junk.extend) {
         junk.extend = JX[junk.extend];
       }
 
       initialize = junk.initialize;
       delete junk.initialize;
       junk.name = 'JX.' + name;
 
       JX[name] = JX.createClass(junk);
 
       if (initialize) {
-        if (JX.Stratcom && JX.Stratcom.ready) {
+        if (JX['Stratcom'] && JX['Stratcom'].ready) {
           initialize.apply(null);
         } else {
           // This is a holding queue, defined in init.js.
           JX['install-init'](initialize);
         }
       }
     }
 
     // In effect, this exits the loop as soon as we didn't make any progress
     // installing things, which means we've installed everything we have the
     // dependencies for.
   } while (name);
 };
 
 
 /**
  * Creates a class from a map of attributes. Requires ##extend## property to
  * be an actual Class object and not a "String". Supports ##name## property
  * to give the created Class a readable name.
  *
  * @see JX.install for description of supported attributes.
  *
  * @param  junk     Map of properties, see method documentation.
  * @return function Constructor of a class created
  */
 JX.createClass = function(junk) {
   if (typeof JX.install._nextObjectID == 'undefined') {
     JX.install._nextObjectID = 0;
   }
   var name = junk.name || '';
 
   if (__DEV__) {
     var valid = {
       construct : 1,
       statics : 1,
       members : 1,
       extend : 1,
       properties : 1,
       events : 1,
       name : 1
     };
     for (var k in junk) {
       if (!(k in valid)) {
         throw new Error(
           'JX.createClass("' + name + '", {"' + k + '": ...}): ' +
           'trying to create unknown property `' + k + '`.');
       }
     }
     if (junk.constructor !== {}.constructor) {
       throw new Error(
         'JX.createClass("' + name + '", {"constructor": ...}): ' +
         'property `constructor` should be called `construct`.');
     }
   }
 
   // First, build the constructor. If construct is just a function, this
   // won't change its behavior (unless you have provided a really awesome
   // function, in which case it will correctly punish you for your attempt
   // at creativity).
   var Class = (function(name, junk) {
     var result = function() {
       this.__id__ = '__obj__' + (++JX.install._nextObjectID);
       return (junk.construct || junk.extend || JX.bag).apply(this, arguments);
       // TODO: Allow mixins to initialize here?
       // TODO: Also, build mixins?
     };
 
     if (__DEV__) {
       var inner = result;
       result = function() {
         if (this == window || this == JX) {
           throw new Error(
             '<' + Class.__readable__ + '>: ' +
             'Tried to construct an instance without the "new" operator.');
         }
         return inner.apply(this, arguments);
       };
     }
     return result;
   })(name, junk);
 
   Class.__readable__ = name;
 
   // Copy in all the static methods and properties.
   for (var k in junk.statics) {
     // Can't use JX.copy() here yet since it may not have loaded.
     Class[k] = junk.statics[k];
   }
 
   var proto;
   if (junk.extend) {
     var Inheritance = function() {};
     Inheritance.prototype = junk.extend.prototype;
     proto = Class.prototype = new Inheritance();
   } else {
     proto = Class.prototype = {};
   }
 
   proto.__class__ = Class;
 
   // Build getters and setters from the `prop' map.
   for (var k in (junk.properties || {})) {
     var base = k.charAt(0).toUpperCase()+k.substr(1);
     var prop = '__auto__' + k;
     proto[prop] = junk.properties[k];
     proto['set' + base] = (function(prop) {
       return function(v) {
         this[prop] = v;
         return this;
       };
     })(prop);
 
     proto['get' + base] = (function(prop) {
       return function() {
         return this[prop];
       };
     })(prop);
   }
 
   if (__DEV__) {
 
     // Check for aliasing in default values of members. If we don't do this,
     // you can run into a problem like this:
     //
     //  JX.install('List', { members : { stuff : [] }});
     //
     //  var i_love = new JX.List();
     //  var i_hate = new JX.List();
     //
     //  i_love.stuff.push('Psyduck');  // I love psyduck!
     //  JX.log(i_hate.stuff);          // Show stuff I hate.
     //
     // This logs ["Psyduck"] because the push operation modifies
     // JX.List.prototype.stuff, which is what both i_love.stuff and
     // i_hate.stuff resolve to. To avoid this, set the default value to
     // null (or any other scalar) and do "this.stuff = [];" in the
     // constructor.
 
     for (var member_name in junk.members) {
       if (junk.extend && member_name[0] == '_') {
         throw new Error(
           'JX.createClass("' + name + '", ...): ' +
           'installed member "' + member_name + '" must not be named with ' +
           'a leading underscore because it is in a subclass. Variables ' +
           'are analyzed and crushed one file at a time, and crushed ' +
           'member variables in subclasses alias crushed member variables ' +
           'in superclasses. Remove the underscore, refactor the class so ' +
           'it does not extend anything, or fix the minifier to be ' +
           'capable of safely crushing subclasses.');
       }
       var member_value = junk.members[member_name];
       if (typeof member_value == 'object' && member_value !== null) {
         throw new Error(
           'JX.createClass("' + name + '", ...): ' +
           'installed member "' + member_name + '" is not a scalar or ' +
           'function. Prototypal inheritance in Javascript aliases object ' +
           'references across instances so all instances are initialized ' +
           'to point at the exact same object. This is almost certainly ' +
           'not what you intended. Make this member static to share it ' +
           'across instances, or initialize it in the constructor to ' +
           'prevent reference aliasing and give each instance its own ' +
           'copy of the value.');
       }
     }
   }
 
 
   // This execution order intentionally allows you to override methods
   // generated from the "properties" initializer.
   for (var k in junk.members) {
     proto[k] = junk.members[k];
   }
 
 
   // Build this ridiculous event model thing. Basically, this defines
   // two instance methods, invoke() and listen(), and one static method,
   // listen(). If you listen to an instance you get events for that
   // instance; if you listen to a class you get events for all instances
   // of that class (including instances of classes which extend it).
   //
   // This is rigged up through Stratcom. Each class has a path component
   // like "class:Dog", and each object has a path component like
   // "obj:23". When you invoke on an object, it emits an event with
   // a path that includes its class, all parent classes, and its object
   // ID.
   //
   // Calling listen() on an instance listens for just the object ID.
   // Calling listen() on a class listens for that class's name. This
   // has the effect of working properly, but installing them is pretty
   // messy.
 
   var parent = junk.extend || {};
   var old_events = parent.__events__;
   var new_events = junk.events || [];
   var has_events = old_events || new_events.length;
 
   if (has_events) {
     var valid_events = {};
 
     // If we're in dev, we build up a list of valid events (for this class
     // and our parent class), and then check them on listen and invoke.
     if (__DEV__) {
       for (var key in old_events || {}) {
         valid_events[key] = true;
       }
       for (var ii = 0; ii < new_events.length; ++ii) {
         valid_events[junk.events[ii]] = true;
       }
     }
 
     Class.__events__ = valid_events;
 
     // Build the class name chain.
     Class.__name__ = 'class:' + name;
     var ancestry = parent.__path__ || [];
     Class.__path__ = ancestry.concat([Class.__name__]);
 
     proto.invoke = function(type) {
       if (__DEV__) {
         if (!(type in this.__class__.__events__)) {
           throw new Error(
             this.__class__.__readable__ + '.invoke("' + type + '", ...): ' +
             'invalid event type. Valid event types are: ' +
             JX.keys(this.__class__.__events__).join(', ') + '.');
         }
       }
       // Here and below, this nonstandard access notation is used to mask
       // these callsites from the static analyzer. JX.Stratcom is always
       // available by the time we hit these execution points.
       return JX['Stratcom'].invoke(
         'obj:' + type,
         this.__class__.__path__.concat([this.__id__]),
         {args : JX.$A(arguments).slice(1)});
     };
 
     proto.listen = function(type, callback) {
       if (__DEV__) {
         if (!(type in this.__class__.__events__)) {
           throw new Error(
             this.__class__.__readable__ + '.listen("' + type + '", ...): ' +
             'invalid event type. Valid event types are: ' +
             JX.keys(this.__class__.__events__).join(', ') + '.');
         }
       }
       return JX['Stratcom'].listen(
         'obj:' + type,
         this.__id__,
         JX.bind(this, function(e) {
           return callback.apply(this, e.getData().args);
         }));
     };
 
     Class.listen = function(type, callback) {
       if (__DEV__) {
         if (!(type in this.__events__)) {
           throw new Error(
             this.__readable__ + '.listen("' + type + '", ...): ' +
             'invalid event type. Valid event types are: ' +
             JX.keys(this.__events__).join(', ') + '.');
         }
       }
       return JX['Stratcom'].listen(
         'obj:' + type,
         this.__name__,
         JX.bind(this, function(e) {
           return callback.apply(this, e.getData().args);
         }));
     };
   } else if (__DEV__) {
     var error_message =
       'class does not define any events. Pass an "events" property to ' +
       'JX.createClass() to define events.';
     Class.listen = Class.listen || function() {
       throw new Error(
         this.__readable__ + '.listen(...): ' +
         error_message);
     };
     Class.invoke = Class.invoke || function() {
       throw new Error(
         this.__readable__ + '.invoke(...): ' +
         error_message);
     };
     proto.listen = proto.listen || function() {
       throw new Error(
         this.__class__.__readable__ + '.listen(...): ' +
         error_message);
     };
     proto.invoke = proto.invoke || function() {
       throw new Error(
         this.__class__.__readable__ + '.invoke(...): ' +
         error_message);
     };
   }
 
   return Class;
 };
 
 JX.flushHoldingQueue('install', JX.install);
diff --git a/src/core/util.js b/src/core/util.js
index d65d652..29358fd 100644
--- a/src/core/util.js
+++ b/src/core/util.js
@@ -1,307 +1,307 @@
 /**
  * Javelin utility functions.
  *
- * @requires javelin-magical-init
  * @provides javelin-util
  *
  * @javelin-installs JX.$A
  * @javelin-installs JX.$AX
  * @javelin-installs JX.copy
  * @javelin-installs JX.bind
  * @javelin-installs JX.bag
  * @javelin-installs JX.keys
  * @javelin-installs JX.defer
  * @javelin-installs JX.log
+ * @javelin-installs JX.id
  *
  * @javelin
  */
 
 /**
  * Convert an array-like object (usually ##arguments##) into a real Array. An
  * "array-like object" is something with a ##length## property and numerical
  * keys. The most common use for this is to let you call Array functions on the
  * magical ##arguments## object.
  *
  *   JX.$A(arguments).slice(1);
  *
  * @param  obj     Array, or array-like object.
  * @return Array   Actual array.
  */
 JX.$A = function(mysterious_arraylike_object) {
   // NOTE: This avoids the Array.slice() trick because some bizarre COM object
   // I dug up somewhere was freaking out when I tried to do it and it made me
   // very upset, so do not replace this with Array.slice() cleverness.
   var r = [];
   for (var ii = 0; ii < mysterious_arraylike_object.length; ii++) {
     r.push(mysterious_arraylike_object[ii]);
   }
   return r;
 };
 
 
 /**
  * Cast a value into an array, by wrapping scalars into singletons. If the
  * argument is an array, it is returned unmodified. If it is a scalar, an array
  * with a single element is returned. For example:
  *
  *   JX.$AX([3]); // Returns [3].
  *   JX.$AX(3);   // Returns [3].
  *
  * Note that this function uses an "instanceof Array" check so you may need to
  * convert array-like objects (such as ##arguments## and Array instances from
  * iframes) into real arrays with @{JX.$A()}.
  *
  * @param  wild    Scalar or Array.
  * @return Array   If the argument was a scalar, an Array with the argument as
  *                 its only element. Otherwise, the original Array.
  *
  */
 JX.$AX = function(maybe_scalar) {
   return (maybe_scalar instanceof Array) ? maybe_scalar : [maybe_scalar];
 };
 
 
 /**
  * Copy properties from one object to another. Note: does not copy the
  * ##toString## property or anything else which isn't enumerable or is somehow
  * magic or just doesn't work. But it's usually what you want. If properties
  * already exist, they are overwritten.
  *
  *   var cat  = {
  *     ears: 'clean',
  *     paws: 'clean',
  *     nose: 'DIRTY OH NOES'
  *   };
  *   var more = {
  *     nose: 'clean',
  *     tail: 'clean'
  *   };
  *
  *   JX.copy(cat, more);
  *
  *   // cat is now:
  *   //  {
  *   //    ears: 'clean',
  *   //    paws: 'clean',
  *   //    nose: 'clean',
  *   //    tail: 'clean'
  *   //  }
  *
  * @param  obj Destination object, which properties should be copied to.
  * @param  obj Source object, which properties should be copied from.
  * @return obj Destination object.
  */
 JX.copy = function(copy_dst, copy_src) {
   for (var k in copy_src) {
     copy_dst[k] = copy_src[k];
   }
   return copy_dst;
 };
 
 
 /**
  * Create a function which invokes another function with a bound context and
  * arguments (i.e., partial function application) when called; king of all
  * functions.
  *
  * Bind performs context binding (letting you select what the value of ##this##
  * will be when a function is invoked) and partial function application (letting
  * you create some function which calls another one with bound arguments).
  *
  * = Context Binding =
  *
  * Normally, when you call ##obj.method()##, the magic ##this## object will be
  * the ##obj## you invoked the method from. This can be undesirable when you
  * need to pass a callback to another function. For instance:
  *
  *   COUNTEREXAMPLE
  *   var dog = new JX.Dog();
  *   dog.barkNow(); // Makes the dog bark.
  *
  *   JX.Stratcom.listen('click', 'bark', dog.barkNow); // Does not work!
  *
  * This doesn't work because ##this## is ##window## when the function is
  * later invoked; @{JX.Stratcom.listen()} does not know about the context
  * object ##dog##. The solution is to pass a function with a bound context
  * object:
  *
  *   var dog = new JX.Dog();
  *   var bound_function = JX.bind(dog, dog.barkNow);
  *
  *   JX.Stratcom.listen('click', 'bark', bound_function);
  *
  * ##bound_function## is a function with ##dog## bound as ##this##; ##this##
  * will always be ##dog## when the function is called, no matter what
  * property chain it is invoked from.
  *
  * You can also pass ##null## as the context argument to implicitly bind
  * ##window##.
  *
  * = Partial Function Application =
  *
  * @{JX.bind()} also performs partial function application, which allows you
  * to bind one or more arguments to a function. For instance, if we have a
  * simple function which adds two numbers:
  *
  *   function add(a, b) { return a + b; }
  *   add(3, 4); // 7
  *
  * Suppose we want a new function, like this:
  *
  *   function add3(b) { return 3 + b; }
  *   add3(4); // 7
  *
  * Instead of doing this, we can define ##add3()## in terms of ##add()## by
  * binding the value ##3## to the ##a## argument:
  *
  *   var add3_bound = JX.bind(null, add, 3);
  *   add3_bound(4); // 7
  *
  * Zero or more arguments may be bound in this way. This is particularly useful
  * when using closures in a loop:
  *
  *   COUNTEREXAMPLE
  *   for (var ii = 0; ii < button_list.length; ii++) {
  *     button_list[ii].onclick = function() {
  *       JX.log('You clicked button number '+ii+'!'); // Fails!
  *     };
  *   }
  *
  * This doesn't work; all the buttons report the highest number when clicked.
  * This is because the local ##ii## is captured by the closure. Instead, bind
  * the current value of ##ii##:
  *
  *   var func = function(button_num) {
  *     JX.log('You clicked button number '+button_num+'!');
  *   }
  *   for (var ii = 0; ii < button_list.length; ii++) {
  *     button_list[ii].onclick = JX.bind(null, func, ii);
  *   }
  *
  * @param  obj|null  Context object to bind as ##this##.
  * @param  function  Function to bind context and arguments to.
  * @param  ...       Zero or more arguments to bind.
  * @return function  New function which invokes the original function with
  *                   bound context and arguments when called.
  */
 JX.bind = function(context, func, more) {
 
   if (__DEV__) {
     if (typeof func != 'function') {
       throw new Error(
         'JX.bind(context, <yuck>, ...): '+
         'Attempting to bind something that is not a function.');
     }
   }
 
   var bound = JX.$A(arguments).slice(2);
   return function() {
     return func.apply(context || window, bound.concat(JX.$A(arguments)));
   }
 };
 
 
 /**
  * "Bag of holding"; function that does nothing. Primarily, it's used as a
  * placeholder when you want something to be callable but don't want it to
  * actually have an effect.
  *
  * @return void
  */
 JX.bag = function() {
   // \o\ \o/ /o/ woo dance party
 };
 
 
 /**
  * Convert an object's keys into a list. For example:
  *
  *   JX.keys({sun: 1, moon: 1, stars: 1}); // Returns: ['sun', 'moon', 'stars']
  *
  * @param  obj    Object to retrieve keys from.
  * @return list   List of keys.
  */
 JX.keys = function(obj) {
   var r = [];
   for (var k in obj) {
     r.push(k);
   }
   return r;
 };
 
 
 /**
  * Defer a function for later execution, similar to ##setTimeout()##. Returns
  * an object with a ##stop()## method, which cancels the deferred call.
  *
  *   var ref = JX.defer(yell, 3000); // Yell in 3 seconds.
  *   // ...
  *   ref.stop(); // Cancel the yell.
  *
  * @param function Function to invoke after the timeout.
  * @param int?     Timeout, in milliseconds. If this value is omitted, the
  *                 function will be invoked once control returns to the browser
  *                 event loop, as with ##setTimeout(func, 0)##.
  * @return obj     An object with a ##stop()## method, which cancels function
  *                 execution.
  */
 JX.defer = function(func, timeout) {
   var t = setTimeout(func, timeout || 0);
   return {stop : function() { clearTimeout(t); }}
 };
 
 JX.id = function(any) {
   return any;
 };
 
 if (__DEV__) {
   if (!window.console || !window.console.log) {
     if (window.opera && window.opera.postError) {
       window.console = {log: function(m) { window.opera.postError(m); }};
     } else {
       window.console = {log: function(m) { }};
     }
   }
 
   /**
    * Print a message to the browser debugging console (like Firebug). This
    * method exists only in ##__DEV__##.
    *
    * @param  string Message to print to the browser debugging console.
    * @return void
    */
   JX.log = function(message) {
     window.console.log(message);
   }
 
   window.alert = (function(native_alert) {
     var recent_alerts = [];
     var in_alert = false;
     return function(msg) {
       if (in_alert) {
         JX.log(
           'alert(...): '+
           'discarded reentrant alert.');
         return;
       }
       in_alert = true;
       recent_alerts.push(new Date().getTime());
 
       if (recent_alerts.length > 3) {
         recent_alerts.splice(0, recent_alerts.length - 3);
       }
 
       if (recent_alerts.length >= 3 &&
           (recent_alerts[recent_alerts.length - 1] - recent_alerts[0]) < 5000) {
         if (confirm(msg + "\n\nLots of alert()s recently. Kill them?")) {
           window.alert = JX.bag;
         }
       } else {
         //  Note that we can't .apply() the IE6 version of this "function".
         native_alert(msg);
       }
       in_alert = false;
     }
   })(window.alert);
 
 }
diff --git a/src/lib/DOM.js b/src/lib/DOM.js
index 2730488..6fe8f24 100644
--- a/src/lib/DOM.js
+++ b/src/lib/DOM.js
@@ -1,776 +1,780 @@
 /**
- * @requires javelin-install javelin-util javelin-vector javelin-stratcom
+ * @requires javelin-magical-init
+ *           javelin-install
+ *           javelin-util
+ *           javelin-vector
+ *           javelin-stratcom
  * @provides javelin-dom
  *
  * @javelin-installs JX.$
  * @javelin-installs JX.$N
  * @javelin-installs JX.$H
  *
  * @javelin
  */
 
 
 /**
  * Select an element by its "id" attribute, like ##document.getElementById()##.
  * For example:
  *
  *   var node = JX.$('some_id');
  *
  * This will select the node with the specified "id" attribute:
  *
  *   LANG=HTML
  *   <div id="some_id">...</div>
  *
  * If the specified node does not exist, @{JX.$()} will throw ##JX.$.NotFound##.
  * For other ways to select nodes from the document, see @{JX.DOM.scry()} and
  * @{JX.DOM.find()}.
  *
  * @param  string  "id" attribute to select from the document.
  * @return Node    Node with the specified "id" attribute.
  */
 JX.$ = function(id) {
 
   if (__DEV__) {
     if (!id) {
       throw new Error('Empty ID passed to JX.$()!');
     }
   }
 
   var node = document.getElementById(id);
   if (!node || (node.id != id)) {
     if (__DEV__) {
       if (node && (node.id != id)) {
         throw new Error(
           'JX.$("'+id+'"): '+
           'document.getElementById() returned an element without the '+
           'correct ID. This usually means that the element you are trying '+
           'to select is being masked by a form with the same value in its '+
           '"name" attribute.');
       }
     }
     throw JX.$.NotFound;
   }
 
   return node;
 };
 
 JX.$.NotFound = {};
 if (__DEV__) {
   //  If we're in dev, upgrade this object into an Error so that it will
   //  print something useful if it escapes the stack after being thrown.
   JX.$.NotFound = new Error(
     'JX.$() or JX.DOM.find() call matched no nodes.');
 }
 
 
 /**
  * Upcast a string into an HTML object so it is treated as markup instead of
  * plain text. See @{JX.$N} for discussion of Javelin's security model. Every
  * time you call this function you potentially open up a security hole. Avoid
  * its use wherever possible.
  *
  * This class intentionally supports only a subset of HTML because many browsers
  * named "Internet Explorer" have awkward restrictions around what they'll
  * accept for conversion to document fragments. Alter your datasource to emit
  * valid HTML within this subset if you run into an unsupported edge case. All
  * the edge cases are crazy and you should always be reasonably able to emit
  * a cohesive tag instead of an unappendable fragment.
  *
  * You may use @{JX.$H} as a shortcut for creating new JX.HTML instances.
  *
  * @task build String into HTML
  * @task nodes HTML into Nodes
  */
 JX.install('HTML', {
 
   construct : function(str) {
     if (__DEV__) {
       var tags = ['legend', 'thead', 'tbody', 'tfoot', 'column', 'colgroup',
                   'caption', 'tr', 'th', 'td', 'option'];
       var evil_stuff = new RegExp('^\\s*<(' + tags.join('|') + ')\\b', 'i');
       var match = null;
       if (match = str.match(evil_stuff)) {
         throw new Error(
           'new JX.HTML("<' + match[1] + '>..."): ' +
           'call initializes an HTML object with an invalid partial fragment ' +
           'and can not be converted into DOM nodes. The enclosing tag of an ' +
           'HTML content string must be appendable to a document fragment. ' +
           'For example, <table> is allowed but <tr> or <tfoot> are not.');
       }
 
       var really_evil = /<script\b/;
       if (str.match(really_evil)) {
         throw new Error(
           'new JX.HTML("...<script>..."): ' +
           'call initializes an HTML object with an embedded script tag! ' +
           'Are you crazy?! Do NOT do this!!!');
       }
 
       var wont_work = /<object\b/;
       if (str.match(wont_work)) {
         throw new Error(
           'new JX.HTML("...<object>..."): ' +
           'call initializes an HTML object with an embedded <object> tag. IE ' +
           'will not do the right thing with this.');
       }
 
       //  TODO(epriestley): May need to deny <option> more broadly, see
       //  http://support.microsoft.com/kb/829907 and the whole mess in the
       //  heavy stack. But I seem to have gotten away without cloning into the
       //  documentFragment below, so this may be a nonissue.
     }
 
     this._content = str;
   },
 
   members : {
     _content : null,
     /**
      * Convert the raw HTML string into a DOM node tree.
      *
      * @task  nodes
      * @return DocumentFragment A document fragment which contains the nodes
      *                          corresponding to the HTML string you provided.
      */
     getFragment : function() {
       var wrapper = JX.$N('div');
       wrapper.innerHTML = this._content;
       var fragment = document.createDocumentFragment();
       while (wrapper.firstChild) {
         //  TODO(epriestley): Do we need to do a bunch of cloning junk here?
         //  See heavy stack. I'm disconnecting the nodes instead; this seems
         //  to work but maybe my test case just isn't extensive enough.
         fragment.appendChild(wrapper.removeChild(wrapper.firstChild));
       }
       return fragment;
     }
   }
 });
 
 
 /**
  * Build a new HTML object from a trustworthy string. JX.$H is a shortcut for
  * creating new JX.HTML instances.
  *
  * @task build
  * @param string A string which you want to be treated as HTML, because you
  *               know it is from a trusted source and any data in it has been
  *               properly escaped.
  * @return JX.HTML HTML object, suitable for use with @{JX.$N}.
  */
 JX.$H = function(str) {
   return new JX.HTML(str);
 };
 
 
 /**
  * Create a new DOM node with attributes and content.
  *
  *   var link = JX.$N('a');
  *
  * This creates a new, empty anchor tag without any attributes. The equivalent
  * markup would be:
  *
  *   LANG=HTML
  *   <a />
  *
  * You can also specify attributes by passing a dictionary:
  *
  *   JX.$N('a', {name: 'anchor'});
  *
  * This is equivalent to:
  *
  *   LANG=HTML
  *   <a name="anchor" />
  *
  * Additionally, you can specify content:
  *
  *   JX.$N(
  *     'a',
  *     {href: 'http://www.javelinjs.com'},
  *     'Visit the Javelin Homepage');
  *
  * This is equivalent to:
  *
  *   LANG=HTML
  *   <a href="http://www.javelinjs.com">Visit the Javelin Homepage</a>
  *
  * If you only want to specify content, you can omit the attribute parameter.
  * That is, these calls are equivalent:
  *
  *   JX.$N('div', {}, 'Lorem ipsum...'); // No attributes.
  *   JX.$N('div', 'Lorem ipsum...')      // Same as above.
  *
  * Both are equivalent to:
  *
  *   LANG=HTML
  *   <div>Lorem ipsum...</div>
  *
  * Note that the content is treated as plain text, not HTML. This means it is
  * safe to use untrusted strings:
  *
  *   JX.$N('div', '<script src="evil.com" />');
  *
  * This is equivalent to:
  *
  *   LANG=HTML
  *   <div>&lt;script src="evil.com" /&gt;</div>
  *
  * That is, the content will be properly escaped and will not create a
  * vulnerability. If you want to set HTML content, you can use @{JX.HTML}:
  *
  *   JX.$N('div', JX.$H(some_html));
  *
  * **This is potentially unsafe**, so make sure you understand what you're
  * doing. You should usually avoid passing HTML around in string form. See
  * @{JX.HTML} for discussion.
  *
  * You can create new nodes with a Javelin sigil (and, optionally, metadata) by
  * providing "sigil" and "metadata" keys in the attribute dictionary.
  *
  * @param string                  Tag name, like 'a' or 'div'.
  * @param dict|string|@{JX.HTML}? Property dictionary, or content if you don't
  *                                want to specify any properties.
  * @param string|@{JX.HTML}?      Content string (interpreted as plain text)
  *                                or @{JX.HTML} object (interpreted as HTML,
  *                                which may be dangerous).
  * @return Node                   New node with whatever attributes and
  *                                content were specified.
  */
 JX.$N = function(tag, attr, content) {
   if (typeof content == 'undefined' &&
       (typeof attr != 'object' || attr instanceof JX.HTML)) {
     content = attr;
     attr = {};
   }
 
   if (__DEV__) {
     if (tag.toLowerCase() != tag) {
       throw new Error(
         '$N("'+tag+'", ...): '+
         'tag name must be in lower case; '+
         'use "'+tag.toLowerCase()+'", not "'+tag+'".');
     }
   }
 
   var node = document.createElement(tag);
 
   if (attr.style) {
     JX.copy(node.style, attr.style);
     delete attr.style;
   }
 
   if (attr.sigil) {
     JX.Stratcom.addSigil(node, attr.sigil);
     delete attr.sigil;
   }
 
   if (attr.meta) {
     JX.Stratcom.addData(node, attr.meta);
     delete attr.meta;
   }
 
   if (__DEV__) {
     if (('metadata' in attr) || ('data' in attr)) {
       throw new Error(
         '$N(' + tag + ', ...): ' +
         'use the key "meta" to specify metadata, not "data" or "metadata".');
     }
   }
 
   JX.copy(node, attr);
   if (content) {
     JX.DOM.setContent(node, content);
   }
   return node;
 };
 
 
 /**
  * Query and update the DOM. Everything here is static, this is essentially
  * a collection of common utility functions.
  *
  * @task stratcom Attaching Event Listeners
  * @task content Changing DOM Content
  * @task nodes Updating Nodes
  * @task test Testing DOM Properties
  * @task convenience Convenience Methods
  * @task query Finding Nodes in the DOM
  * @task view Changing View State
  */
 JX.install('DOM', {
   statics : {
     _autoid : 0,
     _metrics : {},
 
     /**
      * @task content
      */
     setContent : function(node, content) {
       if (__DEV__) {
         if (!JX.DOM.isNode(node)) {
           throw new Error(
             'JX.DOM.setContent(<yuck>, ...): '+
             'first argument must be a DOM node.');
         }
       }
 
       while (node.firstChild) {
         JX.DOM.remove(node.firstChild);
       }
       JX.DOM.appendContent(node, content);
     },
 
 
     /**
      * @task content
      */
     prependContent : function(node, content) {
       if (__DEV__) {
         if (!JX.DOM.isNode(node)) {
           throw new Error(
             'JX.DOM.prependContent(<junk>, ...): '+
             'first argument must be a DOM node.');
         }
       }
 
       this._insertContent(node, content, this._mechanismPrepend);
     },
 
 
     /**
      * @task content
      */
     appendContent : function(node, content) {
       if (__DEV__) {
         if (!JX.DOM.isNode(node)) {
           throw new Error(
             'JX.DOM.appendContent(<bleh>, ...): '+
             'first argument must be a DOM node.');
         }
       }
 
       this._insertContent(node, content, this._mechanismAppend);
     },
 
 
     /**
      * @task content
      */
     _mechanismPrepend : function(node, content) {
       node.insertBefore(content, node.firstChild);
     },
 
 
     /**
      * @task content
      */
     _mechanismAppend : function(node, content) {
       node.appendChild(content);
     },
 
 
     /**
      * @task content
      */
     _insertContent : function(parent, content, mechanism) {
       if (content === null || typeof content == 'undefined') {
         return;
       }
       if (content instanceof JX.HTML) {
         content = content.getFragment();
       }
       if (content instanceof Array) {
         for (var ii = 0; ii < content.length; ii++) {
           var child = (typeof content[ii] == 'string')
             ? document.createTextNode(content[ii])
             : content[ii];
           mechanism(parent, child);
         }
       } else if (content.nodeType) {
         mechanism(parent, content);
       } else {
         mechanism(parent, document.createTextNode(content));
       }
     },
 
 
     /**
      * @task nodes
      */
     remove : function(node) {
       node.parentNode && JX.DOM.replace(node, null);
       return node;
     },
 
 
     /**
      * @task nodes
      */
     replace : function(node, replacement) {
       if (__DEV__) {
         if (!node.parentNode) {
           throw new Error(
             'JX.DOM.replace(<node>, ...): '+
             'node has no parent node, so it can not be replaced.');
         }
       }
 
       var mechanism;
       if (node.nextSibling) {
         mechanism = JX.bind(node.nextSibling, function(parent, content) {
           parent.insertBefore(content, this);
         });
       } else {
         mechanism = this._mechanismAppend;
       }
       var parent = node.parentNode;
       node.parentNode.removeChild(node);
       this._insertContent(parent, replacement, mechanism);
 
       return node;
     },
 
 
     /**
      * Retrieve the nearest parent node matching the desired sigil.
      * @param  Node The child element to search from
      * @return  The matching parent or null if no parent could be found
      * @author jgabbard
      */
     nearest : function(node, sigil) {
       while (node && node.getAttribute && !JX.Stratcom.hasSigil(node, sigil)) {
         node = node.parentNode;
       }
       return node;
     },
 
 
     /**
      * Converts a form into a list of <name, value> pairs.
      *
      * Note: This function explicity does not match for submit inputs as there
      * could be multiple in a form. It's the caller's obligation to add the
      * submit input value if desired.
      *
      * @param   Node  The form element to convert into a list of pairs.
      * @return  List  A list of <name, value> pairs.
      */
     convertFormToListOfPairs : function(form) {
       var elements = form.getElementsByTagName('*');
       var data = [];
       for (var ii = 0; ii < elements.length; ++ii) {
         if (!elements[ii].name) {
           continue;
         }
         if (elements[ii].disabled) {
           continue;
         }
         var type = elements[ii].type;
         var tag  = elements[ii].tagName;
         if ((type in {radio: 1, checkbox: 1} && elements[ii].checked) ||
              type in {text: 1, hidden: 1, password: 1, email: 1} ||
              tag in {TEXTAREA: 1, SELECT: 1}) {
           data.push([elements[ii].name, elements[ii].value]);
         }
       }
       return data;
     },
 
 
     /**
      * Converts a form into a dictionary mapping input names to values. This
      * will overwrite duplicate inputs in an undefined way.
      *
      * @param   Node  The form element to convert into a dictionary.
      * @return  Dict  A dictionary of form values.
      */
     convertFormToDictionary : function(form) {
       var data = {};
       var pairs = JX.DOM.convertFormToListOfPairs(form);
       for (var ii = 0; ii < pairs.length; ii++) {
         data[pairs[ii][0]] = data[pairs[ii][1]];
       }
       return data;
     },
 
 
     /**
      * Test if an object is a valid Node.
      *
      * @task test
      * @param wild Something which might be a Node.
      * @return bool True if the parameter is a DOM node.
      */
     isNode : function(node) {
       return !!(node && node.nodeName && (node !== window));
     },
 
 
     /**
      * Test if an object is a node of some specific (or one of several) types.
      * For example, this tests if the node is an ##<input />##, ##<select />##,
      * or ##<textarea />##.
      *
      *   JX.DOM.isType(node, ['input', 'select', 'textarea']);
      *
      * @task    test
      * @param   wild        Something which might be a Node.
      * @param   string|list One or more tags which you want to test for.
      * @return  bool        True if the object is a node, and it's a node of one
      *                      of the provided types.
      */
     isType : function(node, of_type) {
       node = ('' + (node.nodeName || '')).toUpperCase();
       of_type = JX.$AX(of_type);
       for (var ii = 0; ii < of_type.length; ++ii) {
         if (of_type[ii].toUpperCase() == node) {
           return true;
         }
       }
       return false;
     },
 
     /**
      * Listen for events occuring beneath a specific node in the DOM. This is
      * similar to @{JX.Stratcom.listen()}, but allows you to specify some node
      * which serves as a scope instead of the default scope (the whole document)
      * which you get if you install using @{JX.Stratcom.listen()} directly. For
      * example, to listen for clicks on nodes with the sigil 'menu-item' below
      * the root menu node:
      *
      *   var the_menu = getReferenceToTheMenuNodeSomehow();
      *   JX.DOM.listen(the_menu, 'click', 'menu-item', function(e) { ... });
      *
      * @task stratcom
      * @param Node        The node to listen for events underneath.
      * @param string|list One or more event types to listen for.
      * @param list?       A path to listen on, or a list of paths.
      * @param function    Callback to invoke when a matching event occurs.
      * @return object     A reference to the installed listener. You can later
      *                    remove the listener by calling this object's remove()
      *                    method.
      */
     listen : function(node, type, path, callback) {
       if (__DEV__) {
         var types = JX.$AX(type);
         for (var ix = 0; ix < types.length; ix++) {
           var t = types[ix];
 
           if (!(t in JX.__allowedEvents)) {
             throw new Error(
               'JX.DOM.listen(...): ' +
               'can only listen to events registered in init.js. "' +
                t + '" not found.');
           }
         }
       }
 
       var id = ['id:' + JX.DOM.uniqID(node)];
       path = JX.$AX(path || []);
       if (!path.length) {
         path = id;
       } else {
         for (var ii = 0; ii < path.length; ii++) {
           path[ii] = id.concat(JX.$AX(path[ii]));
         }
       }
       return JX.Stratcom.listen(type, path, callback);
     },
 
     uniqID : function(node) {
       if (!node.id) {
         node.id = 'autoid_'+(++JX.DOM._autoid);
       }
       return node.id;
     },
 
     alterClass : function(node, className, add) {
       var has = ((' '+node.className+' ').indexOf(' '+className+' ') > -1);
       if (add && !has) {
         node.className += ' '+className;
       } else if (has && !add) {
         node.className = node.className.replace(
           new RegExp('(^|\\s)' + className + '(?:\\s|$)', 'g'), ' ');
       }
     },
 
     htmlize : function(str) {
       return (''+str)
         .replace(/&/g, '&amp;')
         .replace(/"/g, '&quot;')
         .replace(/</g, '&lt;')
         .replace(/>/g, '&gt;');
     },
 
 
     /**
      * Show one or more elements, by removing their "display" style. This
      * assumes you have hidden them with hide(), or explicitly set the style
      * to "display: none;".
      *
      * @task convenience
      * @param ... One or more nodes to remove "display" styles from.
      * @return void
      */
     show : function() {
       if (__DEV__) {
         for (var ii = 0; ii < arguments.length; ++ii) {
           if (!arguments[ii]) {
             throw new Error(
               'JX.DOM.show(...): ' +
               'one or more arguments were null or empty.');
           }
         }
       }
 
       for (var ii = 0; ii < arguments.length; ++ii) {
         arguments[ii].style.display = '';
       }
     },
 
 
     /**
      * Hide one or more elements, by setting "display: none;" on them. This is
      * a convenience method. See also show().
      *
      * @task convenience
      * @param ... One or more nodes to set "display: none" on.
      * @return void
      */
     hide : function() {
       if (__DEV__) {
         for (var ii = 0; ii < arguments.length; ++ii) {
           if (!arguments[ii]) {
             throw new Error(
               'JX.DOM.hide(...): ' +
               'one or more arguments were null or empty.');
           }
         }
       }
 
       for (var ii = 0; ii < arguments.length; ++ii) {
         arguments[ii].style.display = 'none';
       }
     },
 
     textMetrics : function(node, pseudoclass, x) {
       if (!this._metrics[pseudoclass]) {
         var n = JX.$N(
           'var',
           {className: pseudoclass});
         this._metrics[pseudoclass] = n;
       }
       var proxy = this._metrics[pseudoclass];
       document.body.appendChild(proxy);
         proxy.style.width = x ? (x+'px') : '';
         JX.DOM.setContent(
           proxy,
           JX.$H(JX.DOM.htmlize(node.value).replace(/\n/g, '<br />')));
         var metrics = JX.Vector.getDim(proxy);
       document.body.removeChild(proxy);
       return metrics;
     },
 
 
     /**
      * Search the document for DOM nodes by providing a root node to look
      * beneath, a tag name, and (optionally) a sigil. Nodes which match all
      * specified conditions are returned.
      *
      * @task query
      *
      * @param  Node    Root node to search beneath.
      * @param  string  Tag name, like 'a' or 'textarea'.
      * @param  string  Optionally, a sigil which nodes are required to have.
      *
      * @return list    List of matching nodes, which may be empty.
      */
     scry : function(root, tagname, sigil) {
       if (__DEV__) {
         if (!JX.DOM.isNode(root)) {
           throw new Error(
             'JX.DOM.scry(<yuck>, ...): '+
             'first argument must be a DOM node.');
         }
       }
 
       var nodes = root.getElementsByTagName(tagname);
       if (!sigil) {
         return JX.$A(nodes);
       }
       var result = [];
       for (var ii = 0; ii < nodes.length; ii++) {
         if (JX.Stratcom.hasSigil(nodes[ii], sigil)) {
           result.push(nodes[ii]);
         }
       }
       return result;
     },
 
 
     /**
      * Select a node uniquely identified by a root, tagname and sigil. This
      * is similar to JX.DOM.scry() but expects exactly one result. It will
      * throw JX.$.NotFound if it matches no results.
      *
      * @task query
      *
      * @param  Node    Root node to search beneath.
      * @param  string  Tag name, like 'a' or 'textarea'.
      * @param  string  Optionally, sigil which selected node must have.
      *
      * @return Node    Node uniquely identified by the criteria.
      */
     find : function(root, tagname, sigil) {
       if (__DEV__) {
         if (!JX.DOM.isNode(root)) {
           throw new Error(
             'JX.DOM.find(<glop>, "'+tagname+'", "'+sigil+'"): '+
             'first argument must be a DOM node.');
         }
       }
 
       var result = JX.DOM.scry(root, tagname, sigil);
 
       if (__DEV__) {
         if (result.length > 1) {
           throw new Error(
             'JX.DOM.find(<node>, "'+tagname+'", "'+sigil+'"): '+
             'matched more than one node.');
         }
       }
 
       if (!result.length) {
         throw JX.$.NotFound;
       }
 
       return result[0];
     },
 
 
     /**
      * Focus a node safely. This is just a convenience wrapper that allows you
      * to avoid IE's habit of throwing when nearly any focus operation is
      * invoked.
      *
      * @task convenience
      * @param Node Node to move cursor focus to, if possible.
      * @return void
      */
     focus : function(node) {
       try { node.focus(); } catch (lol_ie) {}
     },
 
     /**
      * Scroll to the position of an element in the document.
      * @task view
      * @param Node Node to move document scroll position to, if possible.
      * @return void
      */
      scrollTo : function(node) {
        window.scrollTo(0, JX.$V(node).y);
      }
   }
 });
 
diff --git a/src/lib/URI.js b/src/lib/URI.js
index 4e903d7..7857ff9 100644
--- a/src/lib/URI.js
+++ b/src/lib/URI.js
@@ -1,189 +1,193 @@
 /**
  * @provides javelin-uri
  * @requires javelin-install
  *           javelin-util
+ *           javelin-stratcom
+ *
+ * @javelin-installs JX.$U
+ *
  * @javelin
  */
 
 /**
  * Handy convenience function that returns a JX.URI instance so you can
  * concisely write something like:
  *
  *   JX.$U(http://zombo.com/).getDomain();
  */
 JX.$U = function(uri) {
   return new JX.URI(uri);
 };
 
 /**
  * Convert a string URI into a maleable object
  *
  *   var uri = new JX.URI(http://www.facebook.com/asdf.php?a=b&c=d#anchor123);
  *   uri.getProtocol();    // http
  *   uri.getDomain();      // www.facebook.com
  *   uri.getPath();        // /asdf.php
  *   uri.getQueryParams(); // {a: 'b', c: 'd'}
  *   uri.getFragment();    // anchor123
  *
  * And back into a string
  *
  *   uri.setFragment('clowntown');
  *   uri.toString() // http://www.facebook.com/asdf.php?a=b&c=d#clowntown
  *
  */
 JX.install('URI', {
   statics : {
     _uriPattern : /(?:([^:\/?#]+):)?(?:\/\/([^:\/?#]*)(?::(\d*))?)?([^?#]*)(?:\?([^#]*))?(?:#(.*))?/,
     _queryPattern : /(?:^|&)([^&=]*)=?([^&]*)/g,
 
     /**
      *  Convert a Javascript object into an HTTP query string.
      *
      *  @param  Object  Map of query keys to values.
      *  @return String  HTTP query string, like 'cow=quack&duck=moo'.
      */
     _defaultQuerySerializer : function(obj) {
       var kv_pairs = [];
       for (var key in obj) {
         if (obj[key] != null) {
           var value = encodeURIComponent(obj[key]);
           kv_pairs.push(encodeURIComponent(key) + (value ? '=' + value : ''));
         }
       }
 
       return kv_pairs.join('&');
     }
 
   },
 
   /**
    * Construct a URI
    *
    * Accepts either absolute or relative URIs. Relative URIs may have protocol
    * and domain properties set to undefined
    *
    * @param string    absolute or relative URI
    */
   construct : function(uri) {
     // need to set the default value here rather than in the properties map,
     // or else we get some crazy global state breakage
     this.setQueryParams({});
 
     if (uri) {
       // parse the url
       var result = JX.URI._uriPattern.exec(uri);
 
       this.setProtocol(result[1]);
       this.setDomain(result[2]);
       this.setPort(result[3]);
       var path = result[4];
       var query = result[5];
       this.setFragment(result[6]);
 
       // parse the path
       this.setPath(path.charAt(0) == '/' ? path : '/' + path);
 
       // parse the query data
       if (query) {
         var queryData = {};
         var data;
         while ((data = JX.URI._queryPattern.exec(query)) != null) {
           queryData[decodeURIComponent(data[1])] = decodeURIComponent(data[2]);
         }
         this.setQueryParams(queryData);
       }
     }
   },
 
   properties : {
     protocol: undefined,
     domain: undefined,
     port: undefined,
     path: undefined,
     queryParams: undefined,
     fragment: undefined,
     querySerializer: undefined
   },
 
   members : {
 
     /**
      * Append and override query data values
      * Remove a query key by setting it undefined
      *
      * @param map
      * @return @{JX.URI} self
      */
     addQueryParams : function(map) {
       JX.copy(this.getQueryParams(), map);
       return this;
     },
 
     /**
      * Set a specific query parameter
      * Remove a query key by setting it undefined
      *
      * @param string
      * @param wild
      * @return @{JX.URI} self
      */
     setQueryParam : function(key, value) {
       var map = {};
       map[key] = value;
       return this.addQueryParams(map);
     },
 
     toString : function() {
       if (__DEV__) {
         if (this.getPath() && this.getPath().charAt(0) != '/') {
           throw new Error(
             'JX.URI.toString(): ' +
             'Path does not begin with a "/" which means this URI will likely' +
             'be malformed. Ensure any string passed to .setPath() leads "/"');
         }
       }
       var str = '';
       if (this.getProtocol()) {
         str += this.getProtocol() + '://';
       }
       str += this.getDomain() || '';
 
       // If there is a domain or a protocol, we need to provide '/' for the
       // path. If we don't have either and also don't have a path, we can omit
       // it to produce a partial URI without path information which begins
       // with "?", "#", or is empty.
       str += this.getPath() || (str ? '/' : '');
 
       str += this._getQueryString();
       if (this.getFragment()) {
         str += '#' + this.getFragment();
       }
       return str;
     },
 
     _getQueryString : function() {
       var str = (
         this.getQuerySerializer() || JX.URI._defaultQuerySerializer
       )(this.getQueryParams());
       return str ? '?' + str : '';
     },
 
     /**
      * Redirect the browser to another page by changing the window location. If
      * the URI is empty, reloads the current page.
      *
      * You can install a Stratcom listener for the 'go' event if you need to log
      * or prevent redirects.
      *
      * @return void
      */
     go : function() {
       var uri = this.toString();
       if (JX.Stratcom.invoke('go', null, {uri: uri}).getPrevented()) {
         return;
       }
       (uri && (window.location = uri)) || window.location.reload(true);
     }
 
   }
 });
diff --git a/src/lib/Vector.js b/src/lib/Vector.js
index 4014f00..62e6273 100644
--- a/src/lib/Vector.js
+++ b/src/lib/Vector.js
@@ -1,333 +1,334 @@
 /**
- * @requires javelin-install javelin-event
+ * @requires javelin-install
+ *           javelin-event
  * @provides javelin-vector
  *
  * @javelin-installs JX.$V
  *
  * @javelin
  */
 
 /**
  * Handy convenience function that returns a JX.Vector instance so you can
  * concisely write something like:
  *
  *  JX.$V(x, y).add(10, 10);
  * or
  *  JX.$V(node).add(50, 50).setDim(node);
  */
 JX.$V = function(x, y) {
   return new JX.Vector(x, y);
 };
 
 /**
  * Query and update positions and dimensions of nodes (and other things) within
  * within a document. Each vector has two elements, 'x' and 'y', which usually
  * represent width/height ('dimension vector') or left/top ('position vector').
  *
  * Vectors are used to manage the sizes and positions of elements, events,
  * the document, and the viewport (the visible section of the document, i.e.
  * how much of the page the user can actually see in their browser window).
  * Unlike most Javelin classes, @{JX.Vector} exposes two bare properties,
  * 'x' and 'y'. You can read and manipulate these directly:
  *
  *   // Give the user information about elements when they click on them.
  *   JX.Stratcom.listen(
  *     'click',
  *     null,
  *     function(e) {
  *       var p = new JX.Vector(e);
  *       var d = JX.Vector.getDim(e.getTarget());
  *
  *       alert('You clicked at <' + p.x + ',' + p.y + '> and the element ' +
  *             'you clicked is ' + d.x + 'px wide and ' + d.y + 'px high.');
  *     });
  *
  * You can also update positions and dimensions using vectors:
  *
  *   // When the user clicks on something, make it 10px wider and 10px taller.
  *   JX.Stratcom.listen(
  *     'click',
  *     null,
  *     function(e) {
  *       var target = e.getTarget();
  *       JX.$V(target).add(10, 10).setDim(target);
  *     });
  *
  * Additionally, vectors can be used to query document and viewport information:
  *
  *   var v = JX.Vector.getViewport(); // Viewport (window) width and height.
  *   var d = JX.Vector.getDocument(); // Document width and height.
  *   var visible_area = parseInt(100 * (v.x * v.y) / (d.x * d.y), 10);
  *   alert('You can currently see ' + visible_area + ' % of the document.');
  *
  * @author epriestley
  *
  * @task query  Querying Positions and Dimensions
  * @task update Changing Positions and Dimensions
  * @task manip  Manipulating Vectors
  */
 JX.install('Vector', {
 
   /**
    * Construct a vector, either from explicit coordinates or from a node
    * or event. You can pass two Numbers to construct an explicit vector:
    *
    *   var p = new JX.Vector(35, 42);
    *
    * Otherwise, you can pass a @{JX.Event} or a Node to implicitly construct a
    * vector:
    *
    *   var q = new JX.Vector(some_event);
    *   var r = new JX.Vector(some_node);
    *
    * These are just like calling JX.Vector.getPos() on the @{JX.Event} or Node.
    *
    * For convenience, @{JX.$V()} constructs a new vector so you don't need to
    * use the 'new' keyword. That is, these are equivalent:
    *
    *   var s = new JX.Vector(x, y);
    *   var t = JX.$V(x, y);
    *
    * Methods like getScroll(), getViewport() and getDocument() also create
    * new vectors.
    *
    * Once you have a vector, you can manipulate it with add():
    *
    *   var u = JX.$V(35, 42);
    *   var v = u.add(5, -12); // v = <40, 30>
    *
    * @param wild      'x' component of the vector, or a @{JX.Event}, or a Node.
    * @param Number?   If providing an 'x' component, the 'y' component of the
    *                  vector.
    * @return @{JX.Vector} Specified vector.
    * @task query
    */
   construct : function(x, y) {
     if (typeof y == 'undefined') {
       return JX.Vector.getPos(x);
     }
 
     this.x = parseFloat(x);
     this.y = parseFloat(y);
   },
 
   members : {
     x : null,
     y : null,
 
     /**
      * Move a node around by setting the position of a Node to the vector's
      * coordinates. For instance, if you want to move an element to the top left
      * corner of the document, you could do this (assuming it has 'position:
      * absolute'):
      *
      *   JX.$V(0, 0).setPos(node);
      *
      * @param Node Node to move.
      * @return this
      * @task update
      */
     setPos : function(node) {
       node.style.left = (this.x === null) ? '' : (parseInt(this.x, 10) + 'px');
       node.style.top  = (this.y === null) ? '' : (parseInt(this.y, 10) + 'px');
       return this;
     },
 
     /**
      * Change the size of a node by setting its dimensions to the vector's
      * coordinates. For instance, if you want to change an element to be 100px
      * by 100px:
      *
      *   JX.$V(100, 100).setDim(node);
      *
      * Or if you want to expand a node's dimensions by 50px:
      *
      *   JX.$V(node).add(50, 50).setDim(node);
      *
      * @param Node Node to resize.
      * @return this
      * @task update
      */
     setDim : function(node) {
       node.style.width =
         (this.x === null)
           ? ''
           : (parseInt(this.x, 10) + 'px');
       node.style.height =
         (this.y === null)
           ? ''
           : (parseInt(this.y, 10) + 'px');
       return this;
     },
 
     /**
      * Change a vector's x and y coordinates by adding numbers to them, or
      * adding the coordinates of another vector. For example:
      *
      *   var u = JX.$V(3, 4).add(100, 200); // u = <103, 204>
      *
      * You can also add another vector:
      *
      *   var q = JX.$V(777, 999);
      *   var r = JX.$V(1000, 2000);
      *   var s = q.add(r); // s = <1777, 2999>
      *
      * Note that this method returns a new vector. It does not modify the
      * 'this' vector.
      *
      * @param wild      Value to add to the vector's x component, or another
      *                  vector.
      * @param Number?   Value to add to the vector's y component.
      * @return @{JX.Vector} New vector, with summed components.
      * @task manip
      */
     add : function(x, y) {
       if (x instanceof JX.Vector) {
         return this.add(x.x, x.y);
       }
       return new JX.Vector(this.x + parseFloat(x), this.y + parseFloat(y));
     }
   },
 
   statics : {
     _viewport: null,
 
     /**
      * Determine where in a document an element is (or where an event, like
      * a click, occurred) by building a new vector containing the position of a
      * Node or @{JX.Event}. The 'x' component of the vector will correspond to
      * the pixel offset of the argument relative to the left edge of the
      * document, and the 'y' component will correspond to the pixel offset of
      * the argument relative to the top edge of the document. Note that all
      * vectors are generated in document coordinates, so the scroll position
      * does not affect them.
      *
      * See also getDim(), used to determine an element's dimensions.
      *
      * @param  Node|@{JX.Event}  Node or event to determine the position of.
      * @return @{JX.Vector}      New vector with the argument's position.
      * @task query
      */
     getPos : function(node) {
       JX.Event && (node instanceof JX.Event) && (node = node.getRawEvent());
 
       if (('pageX' in node) || ('clientX' in node)) {
         var c = JX.Vector._viewport;
         return new JX.Vector(
           node.pageX || (node.clientX + c.scrollLeft),
           node.pageY || (node.clientY + c.scrollTop));
       }
 
       var x = node.offsetLeft;
       var y = node.offsetTop;
       while (node.offsetParent && (node.offsetParent != document.body)) {
         node = node.offsetParent;
         x += node.offsetLeft;
         y += node.offsetTop;
       }
 
       return new JX.Vector(x, y);
     },
 
     /**
      * Determine the width and height of a node by building a new vector with
      * dimension information. The 'x' component of the vector will correspond
      * to the element's width in pixels, and the 'y' component will correspond
      * to its height in pixels.
      *
      * See also getPos(), used to determine an element's position.
      *
      * @param  Node      Node to determine the display size of.
      * @return @{JX.$V}  New vector with the node's dimensions.
      * @task query
      */
     getDim : function(node) {
       return new JX.Vector(node.offsetWidth, node.offsetHeight);
     },
 
     /**
      * Determine the current scroll position by building a new vector where
      * the 'x' component corresponds to how many pixels the user has scrolled
      * from the left edge of the document, and the 'y' component corresponds to
      * how many pixels the user has scrolled from the top edge of the document.
      *
      * See also getViewport(), used to determine the size of the viewport.
      *
      * @return @{JX.$V}  New vector with the document scroll position.
      * @task query
      */
     getScroll : function() {
       // We can't use JX.Vector._viewport here because there's diversity between
       // browsers with respect to where position/dimension and scroll position
       // information is stored.
       var b = document.body;
       var e = document.documentElement;
       var w = window;
       return new JX.Vector(
         w.pageXOffset || b.scrollLeft || e.scrollLeft,
         w.pageYOffset || b.scrollTop || e.scrollTop
       );
     },
 
     /**
      * Determine the size of the viewport (basically, the browser window) by
      * building a new vector where the 'x' component corresponds to the width
      * of the viewport in pixels and the 'y' component corresponds to the height
      * of the viewport in pixels.
      *
      * See also getScroll(), used to determine the position of the viewport, and
      * getDocument(), used to determine the size of the entire document.
      *
      * @return @{JX.$V}  New vector with the viewport dimensions.
      * @task query
      */
     getViewport : function() {
       var c = JX.Vector._viewport;
       var w = window;
 
       return new JX.Vector(
         w.innerWidth || c.clientWidth || 0,
         w.innerHeight || c.clientHeight || 0
       );
     },
 
     /**
      * Determine the size of the document, including any area outside the
      * current viewport which the user would need to scroll in order to see, by
      * building a new vector where the 'x' component corresponds to the document
      * width in pixels and the 'y' component corresponds to the document height
      * in pixels.
      *
      * @return @{JX.$V} New vector with the document dimensions.
      * @task query
      */
     getDocument : function() {
       var c = JX.Vector._viewport;
       return new JX.Vector(c.scrollWidth || 0, c.scrollHeight || 0);
     }
   },
 
   /**
    * On initialization, the browser-dependent viewport root is determined and
    * stored.
    *
    * In ##__DEV__##, @{JX.$V} installs a toString() method so vectors print in a
    * debuggable way:
    *
    *   <23, 92>
    *
    * @return void
    */
   initialize : function() {
     var c = ((c = document) && (c = c.documentElement)) ||
             ((c = document) && (c = c.body))
     JX.Vector._viewport = c;
 
     if (__DEV__) {
       JX.Vector.prototype.toString = function() {
         return '<' + this.x + ', ' + this.y + '>';
       }
     }
   }
 
 });
diff --git a/src/lib/behavior.js b/src/lib/behavior.js
index 2b6ecd8..33c0b22 100644
--- a/src/lib/behavior.js
+++ b/src/lib/behavior.js
@@ -1,60 +1,61 @@
 /**
  * @provides javelin-behavior
+ * @requires javelin-magical-init
  *
  * @javelin-installs JX.behavior
  * @javelin-installs JX.initBehaviors
  *
  * @javelin
  */
 
 JX.behavior = function(name, control_function) {
   if (__DEV__) {
     if (JX.behavior._behaviors.hasOwnProperty(name)) {
       throw new Error(
         'JX.behavior("'+name+'", ...): '+
         'behavior is already registered.');
     }
     if (!control_function) {
       throw new Error(
         'JX.behavior("'+name+'", <nothing>): '+
         'initialization function is required.');
     }
     if (typeof control_function != 'function') {
       throw new Error(
         'JX.behavior("'+name+'", <garbage>): '+
         'initialization function is not a function.');
     }
   }
   JX.behavior._behaviors[name] = control_function;
 };
 
 
 JX.initBehaviors = function(map) {
   for (var name in map) {
     if (__DEV__) {
       if (!(name in JX.behavior._behaviors)) {
         throw new Error(
           'JX.initBehavior("'+name+'", ...): '+
           'behavior is not registered.');
       }
     }
     var configs = map[name];
     if (!configs.length) {
       if (JX.behavior._initialized.hasOwnProperty(name)) {
         continue;
       } else {
         configs = [null];
       }
     }
     for (var ii = 0; ii < configs.length; ii++) {
       JX.behavior._behaviors[name](configs[ii]);
     }
     JX.behavior._initialized[name] = true;
   }
 };
 
 !function(JX) {
   JX.behavior._behaviors = {};
   JX.behavior._initialized = {};
   JX.flushHoldingQueue('behavior', JX.behavior);
 }(JX);
diff --git a/src/lib/control/tokenizer/Tokenizer.js b/src/lib/control/tokenizer/Tokenizer.js
index 56b0464..fb30323 100644
--- a/src/lib/control/tokenizer/Tokenizer.js
+++ b/src/lib/control/tokenizer/Tokenizer.js
@@ -1,347 +1,348 @@
 /**
- * @requires javelin-typeahead javelin-dom javelin-util
- *           javelin-stratcom javelin-vector javelin-install
- *           javelin-typeahead-preloaded-source
+ * @requires javelin-dom
+ *           javelin-util
+ *           javelin-stratcom
+ *           javelin-install
  * @provides javelin-tokenizer
  * @javelin
  */
 
 /**
  * A tokenizer is a UI component similar to a text input, except that it
  * allows the user to input a list of items ("tokens"), generally from a fixed
  * set of results. A familiar example of this UI is the "To:" field of most
  * email clients, where the control autocompletes addresses from the user's
  * address book.
  *
  * @{JX.Tokenizer} is built on top of @{JX.Typeahead}, and primarily adds the
  * ability to choose multiple items.
  *
  * To build a @{JX.Tokenizer}, you need to do four things:
  *
  *  1. Construct it, padding a DOM node for it to attach to. See the constructor
  *     for more information.
  *  2. Build a {@JX.Typeahead} and configure it with setTypeahead().
  *  3. Configure any special options you want.
  *  4. Call start().
  *
  * If you do this correctly, the input should suggest items and enter them as
  * tokens as the user types.
  */
 JX.install('Tokenizer', {
   construct : function(containerNode) {
     this._containerNode = containerNode;
   },
 
   properties : {
     limit : null,
     nextInput : null
   },
 
   members : {
     _containerNode : null,
     _root : null,
     _focus : null,
     _orig : null,
     _typeahead : null,
     _tokenid : 0,
     _tokens : null,
     _tokenMap : null,
     _initialValue : null,
     _seq : 0,
     _lastvalue : null,
 
     start : function() {
       if (__DEV__) {
         if (!this._typeahead) {
           throw new Error(
             'JX.Tokenizer.start(): ' +
             'No typeahead configured! Use setTypeahead() to provide a ' +
             'typeahead.');
         }
       }
 
       this._orig = JX.DOM.find(this._containerNode, 'input', 'tokenizer-input');
       this._tokens = [];
       this._tokenMap = {};
 
       var focus = this.buildInput(this._orig.value);
       this._focus = focus;
 
       var input_container = JX.DOM.scry(
         this._containerNode,
         'div',
         'tokenizer-input-container'
       );
       input_container = input_container[0] || this._containerNode;
 
       JX.DOM.listen(
         focus,
         ['click', 'focus', 'blur', 'keydown', 'keypress'],
         null,
         JX.bind(this, this.handleEvent));
 
       JX.DOM.listen(
         input_container,
         'click',
         null,
         JX.bind(
           this,
           function(e) {
             if (e.getNode('remove')) {
               this._remove(e.getNodeData('token').key);
             } else if (e.getTarget() == this._root) {
               this.focus();
             }
           }));
 
       var root = JX.$N('div');
       root.id = this._orig.id;
       JX.DOM.alterClass(root, 'jx-tokenizer', true);
       root.style.cursor = 'text';
       this._root = root;
 
       root.appendChild(focus);
 
       var typeahead = this._typeahead;
       typeahead.setInputNode(this._focus);
       typeahead.start();
 
       JX.defer(
         JX.bind(
           this,
           function() {
             var container = this._orig.parentNode;
             JX.DOM.setContent(container, root);
             var map = this._initialValue || {};
             for (var k in map) {
               this.addToken(k, map[k]);
             }
             JX.DOM.appendContent(
               root,
               JX.$N('div', {style: {clear: 'both'}})
             );
             this._redraw();
           }));
     },
 
     setInitialValue : function(map) {
       this._initialValue = map;
       return this;
     },
 
     setTypeahead : function(typeahead) {
 
       typeahead.setAllowNullSelection(false);
       typeahead.removeListener();
 
       typeahead.listen(
         'choose',
         JX.bind(this, function(result) {
           JX.Stratcom.context().prevent();
           if (this.addToken(result.rel, result.name)) {
             if (this.shouldHideResultsOnChoose()) {
               this._typeahead.hide();
             }
             this._focus.value = '';
             this._redraw();
             this.focus();
           }
         })
       );
 
       typeahead.listen(
         'query',
         JX.bind(
           this,
           function(query) {
 
           // TODO: We should emit a 'query' event here to allow the caller to
           // generate tokens on the fly, e.g. email addresses or other freeform
           // or algorithmic tokens.
 
           // Then do this if something handles the event.
           // this._focus.value = '';
           // this._redraw();
           // this.focus();
 
           if (query.length) {
             // Prevent this event if there's any text, so that we don't submit
             // the form (either we created a token or we failed to create a
             // token; in either case we shouldn't submit). If the query is
             // empty, allow the event so that the form submission takes place.
             JX.Stratcom.context().prevent();
           }
         }));
 
       this._typeahead = typeahead;
 
       return this;
     },
 
     shouldHideResultsOnChoose : function() {
       return true;
     },
 
     handleEvent : function(e) {
 
       this._typeahead.handleEvent(e);
       if (e.getPrevented()) {
         return;
       }
 
       if (e.getType() == 'click') {
         if (e.getTarget() == this._root) {
           this.focus();
           e.prevent();
           return;
         }
       } else if (e.getType() == 'keydown') {
         this._onkeydown(e);
       } else if (e.getType() == 'blur') {
         this._redraw();
       }
     },
 
     refresh : function() {
       this._redraw(true);
       return this;
     },
 
     _redraw : function(force) {
       var focus = this._focus;
 
       if (focus.value === this._lastvalue && !force) {
         return;
       }
       this._lastvalue = focus.value;
 
       var root  = this._root;
       var metrics = JX.DOM.textMetrics(
         this._focus,
         'jx-tokenizer-metrics');
       metrics.y = null;
       metrics.x += 24;
       metrics.setDim(focus);
 
       // This is a pretty ugly hack to force a redraw after copy/paste in
       // Firefox. If we don't do this, it doesn't redraw the input so pasting
       // in an email address doesn't give you a very good behavior.
       focus.value = focus.value;
     },
 
     addToken : function(key, value) {
       if (key in this._tokenMap) {
         return false;
       }
 
       var focus = this._focus;
       var root = this._root;
       var token = this.buildToken(key, value);
 
       this._tokenMap[key] = {
         value : value,
         key : key,
         node : token
       };
       this._tokens.push(key);
 
       root.insertBefore(token, focus);
 
       return true;
     },
 
     buildInput: function(value) {
       return JX.$N('input', {
         className: 'jx-tokenizer-input',
         type: 'text',
         value: value
       });
     },
 
     /**
      * Generate a token based on a key and value. The "token" and "remove"
      * sigils are observed by a listener in start().
      */
     buildToken: function(key, value) {
       var input = JX.$N('input', {
         type: 'hidden',
         value: key,
         name: this._orig.name + '[' + (this._seq++) + ']'
       });
 
       var remove = JX.$N('a', {
         className: 'jx-tokenizer-x',
         sigil: 'remove'
       }, JX.$H('&times;'));
 
       return JX.$N('a', {
         className: 'jx-tokenizer-token',
         sigil: 'token',
         meta: {key: key}
       }, [value, input, remove]);
     },
 
     getTokens : function() {
       var result = {};
       for (var key in this._tokenMap) {
         result[key] = this._tokenMap[key].value;
       }
       return result;
     },
 
     _onkeydown : function(e) {
       var focus = this._focus;
       var root = this._root;
       switch (e.getSpecialKey()) {
         case 'tab':
           var completed = this._typeahead.submit();
           if (this.getNextInput()) {
             if (!completed) {
               this._focus.value = '';
             }
             JX.defer(JX.bind(this, function() {
               this.getNextInput().focus();
             }));
           }
           break;
         case 'delete':
           if (!this._focus.value.length) {
             var tok;
             while (tok = this._tokens.pop()) {
               if (this._remove(tok)) {
                 break;
               }
             }
           }
           break;
         case 'return':
           // Don't subject this to token limits.
           break;
         default:
           if (this.getLimit() &&
               JX.keys(this._tokenMap).length == this.getLimit()) {
             e.prevent();
           }
           JX.defer(JX.bind(this, this._redraw));
           break;
       }
     },
 
     _remove : function(index) {
       if (!this._tokenMap[index]) {
         return false;
       }
       JX.DOM.remove(this._tokenMap[index].node);
       delete this._tokenMap[index];
       this._redraw(true);
       this.focus();
       return true;
     },
 
     focus : function() {
       var focus = this._focus;
       JX.DOM.show(focus);
       JX.defer(function() { JX.DOM.focus(focus); });
     }
   }
 });