gistfile1.js

/*
 * Usage:
 *  Code:
 *    var Widget = Class.create({
 *      initialize: function(){
 *          this.overlay = new Element('div',  {className: 'overlay'});
 *          this.frame   = new Element('div',  {className: 'frame'});
 *          this.header  = new Element('header');
 *          this.title   = new Element('h2');
 *          this.section = new Element('section');
 *          this.footer  = new Element('footer');
 *          
 *          document.body.appendChild($b(this, {
 *            overlay: {
 *              frame: [
 *                {header: ['title', new Element('button')]},
 *                'section',
 *                'footer'
 *              ]
 *            }
 *          }));
 *
 *          // Alias for:
 *          //
 *          //  document.body.appendChild(this.overlay
 *          //    .insert(this.frame
 *          //      .insert(this.header
 *          //        .insert(this.title)
 *          //        .insert(new Element('button'))
 *          //      )
 *          //      .insert(this.section)
 *          //      .insert(this.footer)
 *          //    )
 *          //  );
 *
 *          // ... code ... code
 *        }
 *        // ... other methods ...
 *      }));
 *
 *    new Widget();
 *    
 *  HTML output:
 *    <div class="overlay">
 *      <div class="frame">
 *        <header>
 *          <h1 />
 *          <button />
 *        </header>
 *        <section />
 *        <footer />
 *      </div>
 *    </div>
 *
 * Advanced usage:
 *
 *     var Builder = {
 *       build: function(root, options){
 *         if (arguments.length == 1){
 *           options = root;
 *           root    = document.body
 *         }
 *         $(document.body).appendChild($b(this, options));
 *       }
 *     };
 *
 *     var Widget = Class.create(Builder, {
 *       initialize: function(){
 *         this.overlay = new Element('div',  {className: 'overlay'});
 *         this.frame   = new Element('div',  {className: 'frame'});
 *         this.header  = new Element('header');
 *         this.title   = new Element('h2');
 *         this.section = new Element('section');
 *         this.footer  = new Element('footer');
 *   
 *         this.build({
 *           overlay: {
 *             frame: [ {header: ['title', new Element('button')]},
 *               'section',
 *               'footer'
 *             ]
 *           }
 *         });
 *       }
 *     });
 *
 */
var $b = function(scope, options){
  return (function(parent, options){
    if (Object.isArray(options))   return options.inject(parent, arguments.callee);
    if (Object.isString(options))  return parent.insert(scope[options]);
    if (Object.isElement(options)) return parent.insert(options);

    for(var option in options){
      parent.appendChild( arguments.callee(scope[option], options[option]) );
    }

    return parent;
  })(document.createDocumentFragment(), options);
};