luca 0.8.599 → 0.9.0

data/vendor/assets/javascripts/luca-ui.js

@@ -1,28 +1,69 @@
 (function() {
-  var DefineProxy;
+  var UnderscoreExtensions,
+    __slice = Array.prototype.slice;
+
+  (window || global).Luca = function() {
+    var args, definition, fallback, inheritsFrom, payload, result;
+    payload = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
+    if (_.isString(payload) && (result = Luca.cache(payload))) return result;
+    if (_.isString(payload) && (result = Luca.find(payload))) return result;
+    if (_.isObject(payload) && (payload.ctype != null)) {
+      return Luca.util.lazyComponent(payload);
+    }
+    if (_.isObject(payload) && payload.defines && payload["extends"]) {
+      definition = payload.defines;
+      inheritsFrom = payload["extends"];
+    }
+    if (_.isFunction(fallback = _(args).last())) return fallback();
+  };
 
-  window.Luca = {
-    VERSION: "0.8.599",
+  _.extend(Luca, {
+    VERSION: "0.9.0",
     core: {},
     containers: {},
     components: {},
     modules: {},
     util: {},
     fields: {},
-    component_cache: {
-      cid_index: {},
-      name_index: {}
-    },
-    registry: {
-      classes: {},
-      namespaces: ["Luca.containers", "Luca.components"]
-    }
-  };
+    registry: {}
+  });
+
+  _.extend(Luca, Backbone.Events);
+
+  Luca.developmentMode = false;
 
   Luca.enableGlobalObserver = false;
 
   Luca.enableBootstrap = true;
 
+  Luca.keys = {
+    ENTER: 13,
+    ESCAPE: 27,
+    KEYLEFT: 37,
+    KEYUP: 38,
+    KEYRIGHT: 39,
+    KEYDOWN: 40,
+    SPACEBAR: 32,
+    FORWARDSLASH: 191
+  };
+
+  Luca.keyMap = _(Luca.keys).inject(function(memo, value, symbol) {
+    memo[value] = symbol.toLowerCase();
+    return memo;
+  }, {});
+
+  Luca.find = function() {
+    return;
+  };
+
+  Luca.supportsEvents = Luca.supportsBackboneEvents = function(obj) {
+    return Luca.isComponent(obj) || (_.isFunction(obj != null ? obj.trigger : void 0) || _.isFunction(obj != null ? obj.bind : void 0));
+  };
+
+  Luca.isComponent = function(obj) {
+    return Luca.isBackboneModel(obj) || Luca.isBackboneView(obj) || Luca.isBackboneCollection(obj);
+  };
+
   Luca.isBackboneModel = function(obj) {
     return _.isFunction(obj != null ? obj.set : void 0) && _.isFunction(obj != null ? obj.get : void 0) && _.isObject(obj != null ? obj.attributes : void 0);
   };
@@ -35,26 +76,103 @@
     return _.isFunction(obj != null ? obj.fetch : void 0) && _.isFunction(obj != null ? obj.reset : void 0);
   };
 
-  Luca.registry.addNamespace = function(identifier) {
-    Luca.registry.namespaces.push(identifier);
-    return Luca.registry.namespaces = _(Luca.registry.namespaces).uniq();
+  Luca.template = function(template_name, variables) {
+    var jst, luca, needle, template, _ref;
+    window.JST || (window.JST = {});
+    if (_.isFunction(template_name)) return template_name(variables);
+    luca = (_ref = Luca.templates) != null ? _ref[template_name] : void 0;
+    jst = typeof JST !== "undefined" && JST !== null ? JST[template_name] : void 0;
+    if (!((luca != null) || (jst != null))) {
+      needle = new RegExp("" + template_name + "$");
+      luca = _(Luca.templates).detect(function(fn, template_id) {
+        return needle.exec(template_id);
+      });
+      jst = _(JST).detect(function(fn, template_id) {
+        return needle.exec(template_id);
+      });
+    }
+    if (!(luca || jst)) throw "Could not find template named " + template_name;
+    template = luca || jst;
+    if (variables != null) return template(variables);
+    return template;
   };
 
-  Luca.cache = function(needle, component) {
-    var lookup_id;
-    if (component != null) Luca.component_cache.cid_index[needle] = component;
-    component = Luca.component_cache.cid_index[needle];
-    if ((component != null ? component.component_name : void 0) != null) {
-      Luca.component_cache.name_index[component.component_name] = component.cid;
-    } else if ((component != null ? component.name : void 0) != null) {
-      Luca.component_cache.name_index[component.name] = component.cid;
+  Luca.available_templates = function(filter) {
+    var available;
+    if (filter == null) filter = "";
+    available = _(Luca.templates).keys();
+    if (filter.length > 0) {
+      return _(available).select(function(tmpl) {
+        return tmpl.match(filter);
+      });
+    } else {
+      return available;
     }
-    if (component != null) return component;
-    lookup_id = Luca.component_cache.name_index[needle];
-    return Luca.component_cache.cid_index[lookup_id];
   };
 
+  UnderscoreExtensions = {
+    module: function(base, module) {
+      _.extend(base, module);
+      if (base.included && _(base.included).isFunction()) {
+        return base.included.apply(base);
+      }
+    },
+    "delete": function(object, key) {
+      var value;
+      value = object[key];
+      delete object[key];
+      return value;
+    },
+    idle: function(code, delay) {
+      var handle;
+      if (delay == null) delay = 1000;
+      if (window.DISABLE_IDLE) delay = 0;
+      handle = void 0;
+      return function() {
+        if (handle) window.clearTimeout(handle);
+        return handle = window.setTimeout(_.bind(code, this), delay);
+      };
+    },
+    idleShort: function(code, delay) {
+      var handle;
+      if (delay == null) delay = 100;
+      if (window.DISABLE_IDLE) delay = 0;
+      handle = void 0;
+      return function() {
+        if (handle) window.clearTimeout(handle);
+        return handle = window.setTimeout(_.bind(code, this), delay);
+      };
+    },
+    idleMedium: function(code, delay) {
+      var handle;
+      if (delay == null) delay = 2000;
+      if (window.DISABLE_IDLE) delay = 0;
+      handle = void 0;
+      return function() {
+        if (handle) window.clearTimeout(handle);
+        return handle = window.setTimeout(_.bind(code, this), delay);
+      };
+    },
+    idleLong: function(code, delay) {
+      var handle;
+      if (delay == null) delay = 5000;
+      if (window.DISABLE_IDLE) delay = 0;
+      handle = void 0;
+      return function() {
+        if (handle) window.clearTimeout(handle);
+        return handle = window.setTimeout(_.bind(code, this), delay);
+      };
+    }
+  };
+
+  _.mixin(UnderscoreExtensions);
+
+}).call(this);
+(function() {
+  var currentNamespace;
+
   Luca.util.resolve = function(accessor, source_object) {
+    source_object || (source_object = window || global);
     return _(accessor.split(/\./)).inject(function(obj, key) {
       return obj = obj != null ? obj[key] : void 0;
     }, source_object);
@@ -67,22 +185,39 @@
     return _.string.camelize(_.string.capitalize(string));
   };
 
-  Luca.registry.lookup = function(ctype) {
-    var c, className, parents, _ref;
-    c = Luca.registry.classes[ctype];
-    if (c != null) return c;
-    className = Luca.util.classify(ctype);
-    parents = _(Luca.registry.namespaces).map(function(namespace) {
-      return Luca.util.nestedValue(namespace, window || global);
+  Luca.util.hook = function(eventId) {
+    var fn, parts, prefix;
+    if (eventId == null) eventId = "";
+    parts = eventId.split(':');
+    prefix = parts.shift();
+    parts = _(parts).map(function(p) {
+      return _.string.capitalize(p);
     });
-    return (_ref = _(parents).chain().map(function(parent) {
-      return parent[className];
-    }).compact().value()) != null ? _ref[0] : void 0;
+    return fn = prefix + parts.join('');
+  };
+
+  Luca.util.isIE = function() {
+    try {
+      Object.defineProperty({}, '', {});
+      return false;
+    } catch (e) {
+      return true;
+    }
+  };
+
+  currentNamespace = window || global;
+
+  Luca.util.namespace = function(namespace) {
+    if (namespace == null) return currentNamespace;
+    currentNamespace = _.isString(namespace) ? Luca.util.resolve(namespace, window || global) : namespace;
+    if (currentNamespace != null) return currentNamespace;
+    return currentNamespace = eval("(window||global)." + namespace + " = {}");
   };
 
   Luca.util.lazyComponent = function(config) {
     var componentClass, constructor, ctype;
-    ctype = config.ctype || config.type;
+    if (_.isObject(config)) ctype = config.ctype || config.type;
+    if (_.isString(config)) ctype = config;
     componentClass = Luca.registry.lookup(ctype);
     if (!componentClass) {
       throw "Invalid Component Type: " + ctype + ".  Did you forget to register it?";
@@ -91,63 +226,47 @@
     return new constructor(config);
   };
 
-  Luca.register = function(component, constructor_class) {
-    var exists;
-    exists = Luca.registry.classes[component];
-    if ((exists != null) && !(window.TestRun != null)) {
-      return console.log("Attempting to register component with the signature " + component + ". Already exists");
-    } else {
-      return Luca.registry.classes[component] = constructor_class;
-    }
+  Luca.util.selectProperties = function(iterator, object, context) {
+    var values;
+    values = _(object).values();
+    return _(values).select(iterator);
   };
 
-  Luca.available_templates = function(filter) {
-    var available;
-    if (filter == null) filter = "";
-    available = _(Luca.templates).keys();
-    if (filter.length > 0) {
-      return _(available).select(function(tmpl) {
-        return tmpl.match(filter);
-      });
-    } else {
-      return available;
+  Luca.util.loadScript = function(url, callback) {
+    var script;
+    script = document.createElement("script");
+    script.type = "text/javascript";
+    if (script.readyState) {
+      script.onreadystatechange = function() {
+        if (script.readyState === "loaded" || script.readyState === "complete") {
+          script.onreadystatechange = null;
+          return callback();
+        } else {
+          return script.onload = function() {
+            return callback();
+          };
+        }
+      };
     }
+    script.src = url;
+    return document.body.appendChild(script);
   };
 
-  Luca.util.isIE = function() {
-    try {
-      Object.defineProperty({}, '', {});
-      return false;
-    } catch (e) {
-      return true;
-    }
-  };
+}).call(this);
+(function() {
+  var DeferredBindingProxy, DefineProxy;
 
-  Luca.template = function(template_name, variables) {
-    var jst, luca, needle, template, _ref;
-    window.JST || (window.JST = {});
-    luca = (_ref = Luca.templates) != null ? _ref[template_name] : void 0;
-    jst = typeof JST !== "undefined" && JST !== null ? JST[template_name] : void 0;
-    if (!((luca != null) || (jst != null))) {
-      needle = new RegExp("" + template_name + "$");
-      luca = _(Luca.templates).detect(function(fn, template_id) {
-        return needle.exec(template_id);
-      });
-      jst = _(JST).detect(function(fn, template_id) {
-        return needle.exec(template_id);
-      });
-    }
-    if (!(luca || jst)) throw "Could not find template with " + template_name;
-    template = luca || jst;
-    if (variables != null) return template(variables);
-    return template;
+  Luca.define = function(componentName) {
+    return new DefineProxy(componentName);
   };
 
+  Luca.component = Luca.define;
+
   DefineProxy = (function() {
 
     function DefineProxy(componentName) {
       var parts;
-      this.namespace = window || global;
+      this.namespace = Luca.util.namespace();
       this.componentId = this.componentName = componentName;
       if (componentName.match(/\./)) {
         this.namespaced = true;
@@ -178,11 +297,16 @@
       return this;
     };
 
+    DefineProxy.prototype.enhance = function(properties) {
+      if (properties != null) return this["with"](properties);
+      return this;
+    };
+
     DefineProxy.prototype["with"] = function(properties) {
       var at;
       at = this.namespaced ? Luca.util.resolve(this.namespace, window || global) : window || global;
-      if (this.namespaced && _.isUndefined(at)) {
-        eval("window." + this.namespace + " = {}");
+      if (this.namespaced && !(at != null)) {
+        eval("(window||global)." + this.namespace + " = {}");
         at = Luca.util.resolve(this.namespace, window || global);
       }
       at[this.componentId] = Luca.extend(this.superClassName, this.componentName, properties);
@@ -194,12 +318,6 @@
 
   })();
 
-  Luca.define = function(componentName) {
-    return new DefineProxy(componentName);
-  };
-
-  Luca.component = Luca.define;
-
   Luca.extend = function(superClassName, childName, properties) {
     var superClass;
     if (properties == null) properties = {};
@@ -207,307 +325,230 @@
     if (!_.isFunction(superClass != null ? superClass.extend : void 0)) {
       throw "" + superClassName + " is not a valid component to extend from";
     }
-    properties._className = childName;
+    properties.displayName = childName;
     properties._superClass = function() {
-      superClass._className || (superClass._className = superClassName);
+      superClass.displayName || (superClass.displayName = superClassName);
       return superClass;
     };
+    properties._super = function(method, context, args) {
+      var _ref;
+      return (_ref = this._superClass().prototype[method]) != null ? _ref.apply(context, args) : void 0;
+    };
     return superClass.extend(properties);
   };
 
   _.mixin({
-    component: Luca.define
+    def: Luca.define
   });
 
-  $((function() {
-    return $('body').addClass('luca-ui-enabled');
-  })());
-
-}).call(this);
-(function() {
+  DeferredBindingProxy = (function() {
 
-  Luca.modules.Deferrable = {
-    configure_collection: function(setAsDeferrable) {
-      var collectionManager, _ref, _ref2;
-      if (setAsDeferrable == null) setAsDeferrable = true;
-      if (!this.collection) return;
-      if (_.isString(this.collection) && (collectionManager = (_ref = Luca.CollectionManager) != null ? _ref.get() : void 0)) {
-        this.collection = collectionManager.getOrCreate(this.collection);
-      }
-      if (!(this.collection && _.isFunction(this.collection.fetch) && _.isFunction(this.collection.reset))) {
-        this.collection = new Luca.Collection(this.collection.initial_set, this.collection);
-      }
-      if ((_ref2 = this.collection) != null ? _ref2.deferrable_trigger : void 0) {
-        this.deferrable_trigger = this.collection.deferrable_trigger;
+    function DeferredBindingProxy(object, operation, wrapWithUnderscore) {
+      var fn,
+        _this = this;
+      this.object = object;
+      if (wrapWithUnderscore == null) wrapWithUnderscore = true;
+      if (_.isFunction(operation)) {
+        fn = operation;
+      } else if (_.isString(operation) && _.isFunction(this.object[operation])) {
+        fn = this.object[operation];
+      }
+      if (!_.isFunction(fn)) {
+        throw "Must pass a function or a string representing one";
+      }
+      if (wrapWithUnderscore === true) {
+        this.fn = function() {
+          return _.defer(fn);
+        };
+      } else {
+        this.fn = fn;
       }
-      if (setAsDeferrable) return this.deferrable = this.collection;
+      this;
     }
-  };
 
-}).call(this);
-(function() {
+    DeferredBindingProxy.prototype.until = function(watch, trigger) {
+      if ((watch != null) && !(trigger != null)) {
+        trigger = watch;
+        watch = this.object;
+      }
+      watch.once(trigger, this.fn);
+      return this.object;
+    };
 
-  Luca.LocalStore = (function() {
+    return DeferredBindingProxy;
 
-    function LocalStore(name) {
-      var store;
-      this.name = name;
-      store = localStorage.getItem(this.name);
-      this.data = (store && JSON.parse(store)) || {};
-    }
+  })();
 
-    LocalStore.prototype.guid = function() {
-      var S4;
-      S4 = function() {
-        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+  Luca.Events = {
+    defer: function(operation, wrapWithUnderscore) {
+      if (wrapWithUnderscore == null) wrapWithUnderscore = true;
+      return new DeferredBindingProxy(this, operation, wrapWithUnderscore);
+    },
+    once: function(trigger, callback, context) {
+      var onceFn;
+      context || (context = this);
+      onceFn = function() {
+        callback.apply(context, arguments);
+        return this.unbind(trigger, onceFn);
       };
-      return S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4();
-    };
+      return this.bind(trigger, onceFn);
+    }
+  };
 
-    LocalStore.prototype.save = function() {
-      return localStorage.setItem(this.name, JSON.stringify(this.data));
-    };
+  Luca.ScriptLoader = (function() {
 
-    LocalStore.prototype.create = function(model) {
-      if (!model.id) model.id = model.attribtues.id = this.guid();
-      this.data[model.id] = model;
-      this.save();
-      return model;
-    };
+    ScriptLoader.loaded = {};
 
-    LocalStore.prototype.update = function(model) {
-      this.data[model.id] = model;
-      this.save();
-      return model;
+    function ScriptLoader(options) {
+      var ready;
+      if (options == null) options = {};
+      _.extend(this, Backbone.Events, Luca.Events);
+      this.autoStart = options.autoStart === true;
+      this.scripts = options.scripts;
+      ready = function() {
+        return this.trigger("ready");
+      };
+      this.ready = _.after(this.scripts.length, ready);
+      _.bindAll(this, "load", "ready");
+      this.defer("load").until(this, "start");
+      if (this.autoStart === true) this.trigger("start");
+      this.bind("ready", this.onReady);
+    }
+
+    ScriptLoader.prototype.applyPrefix = function(script) {
+      return script;
     };
 
-    LocalStore.prototype.find = function(model) {
-      return this.data[model.id];
+    ScriptLoader.prototype.onReady = function() {
+      return console.log("All dependencies loaded");
     };
 
-    LocalStore.prototype.findAll = function() {
-      return _.values(this.data);
+    ScriptLoader.prototype.start = function() {
+      return this.trigger("start");
     };
 
-    LocalStore.prototype.destroy = function(model) {
-      delete this.data[model.id];
-      this.save();
-      return model;
+    ScriptLoader.prototype.load = function() {
+      var script, _i, _len, _ref, _results;
+      _ref = this.scripts;
+      _results = [];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        script = _ref[_i];
+        _results.push(Luca.util.loadScript(this.applyPrefix(script), this.ready));
+      }
+      return _results;
     };
 
-    return LocalStore;
+    return ScriptLoader;
 
   })();
 
-  Backbone.LocalSync = function(method, model, options) {
-    var resp, store;
-    store = model.localStorage || model.collection.localStorage;
-    resp = (function() {
-      switch (method) {
-        case "read":
-          if (model.id) {
-            return store.find(model);
-          } else {
-            return store.findAll();
-          }
-        case "create":
-          return store.create(model);
-        case "update":
-          return store.update(model);
-        case "delete":
-          return store.destroy(model);
-      }
-    })();
-    if (resp) {
-      return options.success(resp);
-    } else {
-      return options.error("Record not found");
-    }
-  };
-
 }).call(this);
 (function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["components/bootstrap_form_controls"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'form-actions\'>\n  <a class=\'btn btn-primary submit-button\'>\n    <i class=\'icon-ok icon-white\'></i>\n    Save Changes\n  </a>\n  <a class=\'btn reset-button cancel-button\'>\n    <i class=\'icon-remove\'></i>\n    Cancel\n  </a>\n</div>\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["components/collection_loader_view"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'modal\' id=\'progress-model\' stype=\'display: none;\'>\n  <div class=\'progress progress-info progress-striped active\'>\n    <div class=\'bar\' style=\'width: 0%;\'></div>\n  </div>\n  <div class=\'message\'>\n    Initializing...\n  </div>\n</div>\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["components/form_view"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'luca-ui-form-view-wrapper\' id=\'', cid ,'-wrapper\'>\n  <div class=\'form-view-header\'>\n    <div class=\'toolbar-container top\' id=\'', cid ,'-top-toolbar-container\'></div>\n  </div>\n  '); if(legend){ __p.push('\n  <fieldset>\n    <legend>\n      ', legend ,'\n    </legend>\n    <div class=\'form-view-flash-container\'></div>\n    <div class=\'form-view-body\'></div>\n  </fieldset>\n  '); } else { __p.push('\n  <ul class=\'form-view-flash-container\'></ul>\n  <div class=\'form-view-body\'></div>\n  '); } __p.push('\n  <div class=\'form-view-footer\'>\n    <div class=\'toolbar-container bottom\' id=\'', cid ,'-bottom-toolbar-container\'></div>\n  </div>\n</div>\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["components/grid_view"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'luca-ui-g-view-wrapper\'>\n  <div class=\'g-view-header\'>\n    <div class=\'toolbar-container top\'></div>\n  </div>\n  <div class=\'luca-ui-g-view-body\'>\n    <table cellpadding=\'0\' cellspacing=\'0\' class=\'luca-ui-g-view scrollable-table\' width=\'100%\'>\n      <thead class=\'fixed\'></thead>\n      <tbody class=\'scrollable\'></tbody>\n    </table>\n  </div>\n  <div class=\'luca-ui-g-view-footer\'>\n    <div class=\'toolbar-container bottom\'></div>\n  </div>\n</div>\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["components/grid_view_empty_text"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'empty-text-wrapper\'>\n  <p>\n    ', text ,'\n  </p>\n</div>\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["containers/basic"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'', classes ,'\' id=\'', id ,'\' style=\'', style ,'\'></div>\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["containers/tab_selector_container"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'tab-selector-container\' id=\'', cid ,'-tab-selector\'>\n  <ul class=\'nav nav-tabs\' id=\'', cid ,'-tabs-nav\'>\n    '); for(var i = 0; i < components.length; i++ ) { __p.push('\n    '); var component = components[i];__p.push('\n    <li class=\'tab-selector\' data-target=\'', i ,'\'>\n      <a data-target=\'', i ,'\'>\n        ', component.title ,'\n      </a>\n    </li>\n    '); } __p.push('\n  </ul>\n</div>\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["containers/tab_view"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'tab-content\' id=\'', cid ,'-tab-view-content\'></div>\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["containers/toolbar_wrapper"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'luca-ui-toolbar-wrapper\' id=\'', id ,'\'></div>\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["fields/button_field"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<label>&nbsp</label>\n<input class=\'btn ', input_class ,'\' id=\'', input_id ,'\' style=\'', inputStyles ,'\' type=\'', input_type ,'\' value=\'', input_value ,'\' />\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["fields/button_field_link"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<a class=\'btn ', input_class ,'\'>\n  '); if(icon_class.length) { __p.push('\n  <i class=\'', icon_class ,'\'></i>\n  '); } __p.push('\n  ', input_value ,'\n</a>\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["fields/checkbox_array"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'form-horizontal\'>\n  <div class=\'control-group\'>\n    <label for=\'', input_id ,'\'>\n      ', label ,'\n    </label>\n    <div class=\'controls\'></div>\n  </div>\n</div>\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["fields/checkbox_array_item"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<label for=\'', input_id ,'\'>\n  <input id=\'', input_id ,'\' name=\'', input_name ,'\' type=\'checkbox\' value=\'', value ,'\' />\n  ', label ,'\n</label>\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["fields/checkbox_field"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<label for=\'', input_id ,'\'>\n  ', label ,'\n  <input name=\'', input_name ,'\' style=\'', inputStyles ,'\' type=\'checkbox\' value=\'', input_value ,'\' />\n</label>\n'); if(helperText) { __p.push('\n<p class=\'helper-text help-block\'>\n  ', helperText ,'\n</p>\n'); } __p.push('\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["fields/file_upload_field"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<label for=\'', input_id ,'\'>\n  ', label ,'\n</label>\n<input id=\'', input_id ,'\' name=\'', input_name ,'\' style=\'', inputStyles ,'\' type=\'file\' />\n'); if(helperText) { __p.push('\n<p class=\'helper-text help-block\'>\n  ', helperText ,'\n</p>\n'); } __p.push('\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["fields/hidden_field"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<input id=\'', input_id ,'\' name=\'', input_name ,'\' type=\'hidden\' value=\'', input_value ,'\' />\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["fields/select_field"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<label for=\'', input_id ,'\'>\n  ', label ,'\n</label>\n<select id=\'', input_id ,'\' name=\'', input_name ,'\' style=\'', inputStyles ,'\'></select>\n'); if(helperText) { __p.push('\n<p class=\'helper-text help-block\'>\n  ', helperText ,'\n</p>\n'); } __p.push('\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["fields/text_area_field"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<label for=\'', input_id ,'\'>\n  ', label ,'\n</label>\n<textarea class=\'', input_class ,'\' id=\'', input_id ,'\' name=\'', input_name ,'\' style=\'', inputStyles ,'\'></textarea>\n'); if(helperText) { __p.push('\n<p class=\'helper-text help-block\'>\n  ', helperText ,'\n</p>\n'); } __p.push('\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["fields/text_field"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<label class=\'control-label\' for=\'', input_id ,'\'>\n  ', label ,'\n</label>\n'); if( typeof(addOn) !== "undefined" ) { __p.push('\n<span class=\'add-on\'>\n  ', addOn ,'\n</span>\n'); } __p.push('\n<input class=\'', input_class ,'\' id=\'', input_id ,'\' name=\'', input_name ,'\' placeholder=\'', placeHolder ,'\' style=\'', inputStyles ,'\' type=\'text\' />\n'); if(helperText) { __p.push('\n<p class=\'helper-text help-block\'>\n  ', helperText ,'\n</p>\n'); } __p.push('\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["sample/contents"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<p>Sample Contents</p>\n');}return __p.join('');};
-}).call(this);
-(function() {
-  Luca.templates || (Luca.templates = {});
-  Luca.templates["sample/welcome"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('welcome.luca\n');}return __p.join('');};
-}).call(this);
-(function() {
-  var __slice = Array.prototype.slice;
-
-  Luca.Observer = (function() {
+  var component_cache, registry;
 
-    function Observer(options) {
-      var _this = this;
-      this.options = options != null ? options : {};
-      _.extend(this, Backbone.Events);
-      this.type = this.options.type;
-      if (this.options.debugAll) {
-        this.bind("event", function() {
-          var args, t;
-          t = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
-          return console.log("Observed " + _this.type + " " + (t.name || t.id || t.cid), t, _(args).flatten());
-        });
-      }
-    }
+  registry = {
+    classes: {},
+    namespaces: ['Luca.containers', 'Luca.components']
+  };
 
-    Observer.prototype.relay = function() {
-      var args, triggerer;
-      triggerer = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
-      this.trigger("event", triggerer, args);
-      return this.trigger("event:" + args[0], triggerer, args.slice(1));
-    };
+  component_cache = {
+    cid_index: {},
+    name_index: {}
+  };
 
-    return Observer;
+  Luca.defaultComponentType = 'view';
 
-  })();
+  Luca.register = function(component, prototypeName) {
+    Luca.trigger("component:registered", component, prototypeName);
+    return registry.classes[component] = prototypeName;
+  };
 
-  Luca.Observer.enableObservers = function(options) {
-    if (options == null) options = {};
-    Luca.enableGlobalObserver = true;
-    Luca.ViewObserver = new Luca.Observer(_.extend(options, {
-      type: "view"
-    }));
-    return Luca.CollectionObserver = new Luca.Observer(_.extend(options, {
-      type: "collection"
-    }));
+  Luca.development_mode_register = function(component, prototypeName) {
+    var existing, liveInstances, prototypeDefinition;
+    existing = registry.classes[component];
+    if (Luca.enableDevelopmentTools === true && (existing != null)) {
+      prototypeDefinition = Luca.util.resolve(existing, window);
+      liveInstances = Luca.registry.findInstancesByClassName(prototypeName);
+      _(liveInstances).each(function(instance) {
+        var _ref;
+        return instance != null ? (_ref = instance.refreshCode) != null ? _ref.call(instance, prototypeDefinition) : void 0 : void 0;
+      });
+    }
+    return Luca.register(component, prototypeName);
   };
 
-}).call(this);
-(function() {
+  Luca.registry.addNamespace = function(identifier) {
+    registry.namespaces.push(identifier);
+    return registry.namespaces = _(registry.namespaces).uniq();
+  };
 
-  Luca.View = Backbone.View.extend({
-    base: 'Luca.View'
-  });
+  Luca.registry.namespaces = function(resolve) {
+    if (resolve == null) resolve = true;
+    return _(registry.namespaces).map(function(namespace) {
+      if (resolve) {
+        return Luca.util.resolve(namespace);
+      } else {
+        return namespace;
+      }
+    });
+  };
 
-  Luca.View.originalExtend = Backbone.View.extend;
+  Luca.registry.lookup = function(ctype) {
+    var c, className, fullPath, parents, _ref;
+    c = registry.classes[ctype];
+    if (c != null) return c;
+    className = Luca.util.classify(ctype);
+    parents = Luca.registry.namespaces();
+    return fullPath = (_ref = _(parents).chain().map(function(parent) {
+      return parent[className];
+    }).compact().value()) != null ? _ref[0] : void 0;
+  };
 
-  Luca.View.extend = function(definition) {
-    var _base;
-    _base = definition.render;
-    _base || (_base = function() {
-      var container;
-      container = _.isFunction(this.container) ? this.container() : this.container;
-      if (!($(container) && this.$el)) return this;
-      $(container).append(this.$el);
-      return this;
+  Luca.registry.findInstancesByClassName = function(className) {
+    var instances;
+    instances = _(component_cache.cid_index).values();
+    return _(instances).select(function(instance) {
+      var _ref;
+      return instance.displayName === className || (typeof instance._superClass === "function" ? (_ref = instance._superClass()) != null ? _ref.displayName : void 0 : void 0) === className;
     });
-    definition.render = function() {
-      var _this = this;
-      if (this.layoutTemplate != null) this.$el.html();
-      if (this.deferrable) {
-        this.trigger("before:render", this);
-        this.deferrable.bind(this.deferrable_event, _.once(function() {
-          _base.apply(_this, arguments);
-          return _this.trigger("after:render", _this);
-        }));
-        if (!this.deferrable_trigger) this.immediate_trigger = true;
-        if (this.immediate_trigger === true) {
-          this.deferrable.fetch();
-        } else {
-          this.bind(this.deferrable_trigger, _.once(function() {
-            return _this.deferrable.fetch();
-          }));
-        }
-        return this;
+  };
+
+  Luca.registry.classes = function(toString) {
+    if (toString == null) toString = false;
+    return _(registry.classes).map(function(className, ctype) {
+      if (toString) {
+        return className;
       } else {
-        this.trigger("before:render", this);
-        _base.apply(this, arguments);
-        this.trigger("after:render", this);
-        return this;
+        return {
+          className: className,
+          ctype: ctype
+        };
       }
-    };
-    return Luca.View.originalExtend.call(this, definition);
+    });
   };
 
-  _.extend(Luca.View.prototype, {
-    applyStyles: function(styles) {
-      var setting, value;
-      if (styles == null) styles = {};
-      for (setting in styles) {
-        value = styles[setting];
-        this.$el.css(setting, value);
-      }
-      return this;
-    },
+  Luca.cache = function(needle, component) {
+    var lookup_id;
+    if (component != null) component_cache.cid_index[needle] = component;
+    component = component_cache.cid_index[needle];
+    if ((component != null ? component.component_name : void 0) != null) {
+      Luca.trigger("component:created:" + component.component_name, component);
+      component_cache.name_index[component.component_name] = component.cid;
+    } else if ((component != null ? component.name : void 0) != null) {
+      Luca.trigger("component:created:" + component.component_name, component);
+      component_cache.name_index[component.name] = component.cid;
+    }
+    if (component != null) return component;
+    lookup_id = component_cache.name_index[needle];
+    return component_cache.cid_index[lookup_id];
+  };
+
+}).call(this);
+(function() {
+  var customizeRender, originalExtend;
+
+  _.def("Luca.View")["extends"]("Backbone.View")["with"]({
+    additionalClassNames: [],
     debug: function() {
       var message, _i, _len, _results;
       if (!(this.debugMode || (window.LucaDebugMode != null))) return;
@@ -519,34 +560,65 @@
       return _results;
     },
     trigger: function() {
-      if (Luca.enableGlobalObserver && this.observeEvents === true) {
-        Luca.ViewObserver || (Luca.ViewObserver = new Luca.Observer({
-          type: "view"
-        }));
-        Luca.ViewObserver.relay(this, arguments);
+      if (Luca.enableGlobalObserver) {
+        if (Luca.developmentMode === true || this.observeEvents === true) {
+          Luca.ViewObserver || (Luca.ViewObserver = new Luca.Observer({
+            type: "view"
+          }));
+          Luca.ViewObserver.relay(this, arguments);
+        }
       }
       return Backbone.View.prototype.trigger.apply(this, arguments);
     },
     hooks: ["after:initialize", "before:render", "after:render", "first:activation", "activation", "deactivation"],
-    deferrable_event: "reset",
     initialize: function(options) {
-      var unique,
-        _this = this;
+      var additional, template, unique, _i, _len, _ref;
       this.options = options != null ? options : {};
       _.extend(this, this.options);
       if (this.name != null) this.cid = _.uniqueId(this.name);
+      if (template = this.bodyTemplate) {
+        this.$el.empty();
+        Luca.View.prototype.$html.call(this, Luca.template(template, this));
+      }
       Luca.cache(this.cid, this);
       unique = _(Luca.View.prototype.hooks.concat(this.hooks)).uniq();
       this.setupHooks(unique);
-      if (this.autoBindEventHandlers === true) {
-        _(this.events).each(function(handler, event) {
-          if (_.isString(handler)) return _.bindAll(_this, handler);
-        });
+      if (this.autoBindEventHandlers === true) this.bindAllEventHandlers();
+      if (this.additionalClassNames) {
+        if (_.isString(this.additionalClassNames)) {
+          this.additionalClassNames = this.additionalClassNames.split(" ");
+        }
+        _ref = this.additionalClassNames;
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          additional = _ref[_i];
+          this.$el.addClass(additional);
+        }
       }
       this.trigger("after:initialize", this);
       this.registerCollectionEvents();
       return this.delegateEvents();
     },
+    $wrap: function(wrapper) {
+      if (!wrapper.match(/[<>]/)) {
+        wrapper = this.make("div", {
+          "class": wrapper
+        });
+      }
+      return this.$el.wrap(wrapper);
+    },
+    $template: function(template, variables) {
+      if (variables == null) variables = {};
+      return this.$el.html(Luca.template(template, variables));
+    },
+    $html: function(content) {
+      return this.$el.html(content);
+    },
+    $append: function(content) {
+      return this.$el.append(content);
+    },
+    $attach: function() {
+      return this.$container().append(this.el);
+    },
     $container: function() {
       return $(this.container);
     },
@@ -554,16 +626,16 @@
       var _this = this;
       set || (set = this.hooks);
       return _(set).each(function(eventId) {
-        var fn, parts, prefix;
-        parts = eventId.split(':');
-        prefix = parts.shift();
-        parts = _(parts).map(function(p) {
-          return _.string.capitalize(p);
-        });
-        fn = prefix + parts.join('');
-        return _this.bind(eventId, function() {
-          if (_this[fn]) return _this[fn].apply(_this, arguments);
-        });
+        var callback, fn;
+        fn = Luca.util.hook(eventId);
+        callback = function() {
+          var _ref;
+          return (_ref = _this[fn]) != null ? _ref.apply(_this, arguments) : void 0;
+        };
+        if (eventId != null ? eventId.match(/once:/) : void 0) {
+          callback = _.once(callback);
+        }
+        return _this.bind(eventId, callback);
       });
     },
     getCollectionManager: function() {
@@ -593,13 +665,108 @@
       this.events || (this.events = {});
       this.events[selector] = handler;
       return this.delegateEvents();
+    },
+    bindAllEventHandlers: function() {
+      var _this = this;
+      return _(this.events).each(function(handler, event) {
+        if (_.isString(handler)) return _.bindAll(_this, handler);
+      });
+    },
+    definitionClass: function() {
+      var _ref;
+      return (_ref = Luca.util.resolve(this.displayName, window)) != null ? _ref.prototype : void 0;
+    },
+    refreshCode: function() {
+      var view;
+      view = this;
+      _(this.eventHandlerProperties()).each(function(prop) {
+        return view[prop] = view.definitionClass()[prop];
+      });
+      if (this.autoBindEventHandlers === true) this.bindAllEventHandlers();
+      return this.delegateEvents();
+    },
+    eventHandlerProperties: function() {
+      var handlerIds;
+      handlerIds = _(this.events).values();
+      return _(handlerIds).select(function(v) {
+        return _.isString(v);
+      });
+    },
+    eventHandlerFunctions: function() {
+      var handlerIds,
+        _this = this;
+      handlerIds = _(this.events).values();
+      return _(handlerIds).map(function(handlerId) {
+        if (_.isFunction(handlerId)) {
+          return handlerId;
+        } else {
+          return _this[handlerId];
+        }
+      });
+    },
+    collections: function() {
+      return Luca.util.selectProperties(Luca.isBackboneCollection, this);
+    },
+    models: function() {
+      return Luca.util.selectProperties(Luca.isBackboneModel, this);
+    },
+    views: function() {
+      return Luca.util.selectProperties(Luca.isBackboneView, this);
     }
   });
 
+  originalExtend = Backbone.View.extend;
+
+  customizeRender = function(definition) {
+    var _base;
+    _base = definition.render;
+    _base || (_base = Luca.View.prototype.$attach);
+    definition.render = function() {
+      var autoTrigger, fn, target, trigger, view,
+        _this = this;
+      view = this;
+      if (this.deferrable) {
+        target = this.deferrable_target;
+        if (!Luca.isBackboneCollection(this.deferrable)) {
+          this.deferrable = this.collection;
+        }
+        target || (target = this.deferrable);
+        trigger = this.deferrable_event ? this.deferrable_event : "reset";
+        view.defer(function() {
+          _base.call(view);
+          return view.trigger("after:render", view);
+        }).until(target, trigger);
+        view.trigger("before:render", this);
+        autoTrigger = this.deferrable_trigger || this.deferUntil;
+        if (!(autoTrigger != null)) {
+          target[this.deferrable_method || "fetch"].call(target);
+        } else {
+          fn = _.once(function() {
+            var _base2, _name;
+            return typeof (_base2 = _this.deferrable)[_name = _this.deferrable_method || "fetch"] === "function" ? _base2[_name]() : void 0;
+          });
+          (this.deferrable_target || this).bind(this.deferrable_trigger, fn);
+        }
+        return this;
+      } else {
+        this.trigger("before:render", this);
+        _base.apply(this, arguments);
+        this.trigger("after:render", this);
+        return this;
+      }
+    };
+    return definition;
+  };
+
+  Luca.View.extend = function(definition) {
+    definition = customizeRender(definition);
+    return originalExtend.call(this, definition);
+  };
+
 }).call(this);
 (function() {
 
-  _.component('Luca.Model')["extends"]('Backbone.Model')["with"]({
+  _.def('Luca.Model')["extends"]('Backbone.Model')["with"]({
     initialize: function() {
       var attr, dependencies, _ref, _results,
         _this = this;
@@ -634,17 +801,93 @@
 
 }).call(this);
 (function() {
+  var source;
+
+  source = 'Backbone.Collection';
+
+  if (Backbone.QueryCollection != null) source = 'Backbone.QueryCollection';
 
-  Luca.Collection = (Backbone.QueryCollection || Backbone.Collection).extend({
+  _.def("Luca.Collection")["extends"](source)["with"]({
+    cachedMethods: [],
+    restoreMethodCache: function() {
+      var config, name, _ref, _results;
+      _ref = this._methodCache;
+      _results = [];
+      for (name in _ref) {
+        config = _ref[name];
+        if (config.original != null) {
+          config.args = void 0;
+          _results.push(this[name] = config.original);
+        } else {
+          _results.push(void 0);
+        }
+      }
+      return _results;
+    },
+    clearMethodCache: function(method) {
+      return this._methodCache[method].value = void 0;
+    },
+    clearAllMethodsCache: function() {
+      var config, name, _ref, _results;
+      _ref = this._methodCache;
+      _results = [];
+      for (name in _ref) {
+        config = _ref[name];
+        _results.push(this.clearMethodCache(name));
+      }
+      return _results;
+    },
+    setupMethodCaching: function() {
+      var cache, collection, membershipEvents;
+      collection = this;
+      membershipEvents = ["reset", "add", "remove"];
+      cache = this._methodCache = {};
+      return _(this.cachedMethods).each(function(method) {
+        var dependencies, dependency, membershipEvent, _i, _j, _len, _len2, _ref, _results;
+        cache[method] = {
+          name: method,
+          original: collection[method],
+          value: void 0
+        };
+        collection[method] = function() {
+          var _base;
+          return (_base = cache[method]).value || (_base.value = cache[method].original.apply(collection, arguments));
+        };
+        for (_i = 0, _len = membershipEvents.length; _i < _len; _i++) {
+          membershipEvent = membershipEvents[_i];
+          collection.bind(membershipEvent, function() {
+            return collection.clearAllMethodsCache();
+          });
+        }
+        dependencies = method.split(':')[1];
+        if (dependencies) {
+          _ref = dependencies.split(",");
+          _results = [];
+          for (_j = 0, _len2 = _ref.length; _j < _len2; _j++) {
+            dependency = _ref[_j];
+            _results.push(collection.bind("change:" + dependency, function() {
+              return collection.clearMethodCache({
+                method: method
+              });
+            }));
+          }
+          return _results;
+        }
+      });
+    },
     initialize: function(models, options) {
       var table,
         _this = this;
       if (models == null) models = [];
       this.options = options;
       _.extend(this, this.options);
+      this.setupMethodCaching();
       this._reset();
       if (this.cached) {
-        this.bootstrap_cache_key = _.isFunction(this.cached) ? this.cached() : this.cached;
+        console.log('The @cached property of Luca.Collection is being deprecated.  Please change to cache_key');
+      }
+      if (this.cache_key || (this.cache_key = this.cached)) {
+        this.bootstrap_cache_key = _.isFunction(this.cache_key) ? this.cache_key() : this.cache_key;
       }
       if (this.registerAs || this.registerWith) {
         console.log("This configuration API is deprecated.  use @name and @manager properties instead");
@@ -653,7 +896,7 @@
       this.manager || (this.manager = this.registerWith);
       if (this.name && !this.manager) this.manager = Luca.CollectionManager.get();
       if (this.manager) {
-        this.name || (this.name = this.cached());
+        this.name || (this.name = this.cache_key());
         this.name = _.isFunction(this.name) ? this.name() : this.name;
         if (!(this.private || this.anonymous)) {
           this.bind("after:initialize", function() {
@@ -717,13 +960,18 @@
       this.base_params = Luca.Collection.baseParams();
       return this;
     },
+    remoteFilter: true,
     applyFilter: function(filter, options) {
       if (filter == null) filter = {};
       if (options == null) options = {};
-      this.applyParams(filter);
-      return this.fetch(_.extend(options, {
-        refresh: true
-      }));
+      if ((options.remote != null) === true) {
+        this.applyParams(filter);
+        return this.fetch(_.extend(options, {
+          refresh: true
+        }));
+      } else {
+        return this.reset(this.query(filter));
+      }
     },
     applyParams: function(params) {
       this.base_params || (this.base_params = _(Luca.Collection.baseParams()).clone());
@@ -825,47 +1073,442 @@
       if (this.bootstrap_cache_key) {
         Luca.Collection.cache(this.bootstrap_cache_key, models);
       }
-      return models;
+      return models;
+    }
+  });
+
+  _.extend(Luca.Collection.prototype, {
+    trigger: function() {
+      if (Luca.enableGlobalObserver) {
+        Luca.CollectionObserver || (Luca.CollectionObserver = new Luca.Observer({
+          type: "collection"
+        }));
+        Luca.CollectionObserver.relay(this, arguments);
+      }
+      return Backbone.View.prototype.trigger.apply(this, arguments);
+    }
+  });
+
+  Luca.Collection.baseParams = function(obj) {
+    if (obj) return Luca.Collection._baseParams = obj;
+    if (_.isFunction(Luca.Collection._baseParams)) {
+      return Luca.Collection._baseParams.call();
+    }
+    if (_.isObject(Luca.Collection._baseParams)) {
+      return Luca.Collection._baseParams;
+    }
+  };
+
+  Luca.Collection._bootstrapped_models = {};
+
+  Luca.Collection.bootstrap = function(obj) {
+    return _.extend(Luca.Collection._bootstrapped_models, obj);
+  };
+
+  Luca.Collection.cache = function(key, models) {
+    if (models) return Luca.Collection._bootstrapped_models[key] = models;
+    return Luca.Collection._bootstrapped_models[key] || [];
+  };
+
+}).call(this);
+(function() {
+  var attachToolbar;
+
+  attachToolbar = function(config) {
+    var action, container, hasBody, id, toolbar;
+    if (config == null) config = {};
+    config.orientation || (config.orientation = "top");
+    config.ctype || (config.ctype = this.toolbarType || "panel_toolbar");
+    id = "" + this.cid + "-tbc-" + config.orientation;
+    toolbar = Luca.util.lazyComponent(config);
+    container = this.make("div", {
+      "class": "toolbar-container " + config.orientation,
+      id: id
+    }, toolbar.render().el);
+    hasBody = this.bodyClassName || this.bodyTagName;
+    action = (function() {
+      switch (config.orientation) {
+        case "top":
+        case "left":
+          if (hasBody) {
+            return "before";
+          } else {
+            return "prepend";
+          }
+          break;
+        case "bottom":
+        case "right":
+          if (hasBody) {
+            return "after";
+          } else {
+            return "append";
+          }
+      }
+    })();
+    return this.$bodyEl()[action](container);
+  };
+
+  _.def("Luca.components.Panel")["extends"]("Luca.View")["with"]({
+    topToolbar: void 0,
+    bottomToolbar: void 0,
+    loadMask: false,
+    loadMaskTemplate: ["components/load_mask"],
+    initialize: function(options) {
+      var _this = this;
+      this.options = options != null ? options : {};
+      Luca.View.prototype.initialize.apply(this, arguments);
+      if (this.loadMask === true) {
+        this.defer(function() {
+          _this.$el.addClass('with-mask');
+          if (_this.$('.load-mask').length === 0) {
+            _this.loadMaskTarget().prepend(Luca.template(_this.loadMaskTemplate, _this));
+            return _this.$('.load-mask').hide();
+          }
+        }).until("after:render");
+        this.on("enable:loadmask", this.applyLoadMask);
+        return this.on("disable:loadmask", this.applyLoadMask);
+      }
+    },
+    loadMaskTarget: function() {
+      if (this.loadMaskEl != null) {
+        return this.$(this.loadMaskEl);
+      } else {
+        return this.$bodyEl();
+      }
+    },
+    applyLoadMask: function() {
+      var maxWidth,
+        _this = this;
+      if (this.$('.load-mask').is(":visible")) {
+        this.$('.load-mask .bar').css("width", "100%");
+        this.$('.load-mask').hide();
+        return clearInterval(this.loadMaskInterval);
+      } else {
+        this.$('.load-mask').show().find('.bar').css("width", "0%");
+        maxWidth = this.$('.load-mask .progress').width();
+        if (maxWidth < 20 && (maxWidth = this.$el.width()) < 20) {
+          maxWidth = this.$el.parent().width();
+        }
+        return this.loadMaskInterval = setInterval(function() {
+          var currentWidth, newWidth;
+          currentWidth = _this.$('.load-mask .bar').width();
+          newWidth = currentWidth + 12;
+          return _this.$('.load-mask .bar').css('width', newWidth);
+        }, 200);
+      }
+    },
+    applyStyles: function(styles, body) {
+      var setting, target, value;
+      if (styles == null) styles = {};
+      if (body == null) body = false;
+      target = body ? this.$bodyEl() : this.$el;
+      for (setting in styles) {
+        value = styles[setting];
+        target.css(setting, value);
+      }
+      return this;
+    },
+    beforeRender: function() {
+      var _ref;
+      if ((_ref = Luca.View.prototype.beforeRender) != null) {
+        _ref.apply(this, arguments);
+      }
+      if (this.styles != null) this.applyStyles(this.styles);
+      if (this.bodyStyles != null) this.applyStyles(this.bodyStyles, true);
+      return typeof this.renderToolbars === "function" ? this.renderToolbars() : void 0;
+    },
+    $bodyEl: function() {
+      var bodyEl, className, element, newElement;
+      element = this.bodyTagName || "div";
+      className = this.bodyClassName || "view-body";
+      this.bodyEl || (this.bodyEl = "" + element + "." + className);
+      bodyEl = this.$(this.bodyEl);
+      if (bodyEl.length > 0) return bodyEl;
+      if (bodyEl.length === 0 && ((this.bodyClassName != null) || (this.bodyTagName != null))) {
+        newElement = this.make(element, {
+          "class": className,
+          "data-auto-appended": true
+        });
+        $(this.el).append(newElement);
+        return this.$(this.bodyEl);
+      }
+      return $(this.el);
+    },
+    $wrap: function(wrapper) {
+      if (!wrapper.match(/[<>]/)) {
+        wrapper = this.make("div", {
+          "class": wrapper
+        });
+      }
+      return this.$el.wrap(wrapper);
+    },
+    $template: function(template, variables) {
+      if (variables == null) variables = {};
+      return this.$html(Luca.template(template, variables));
+    },
+    $html: function(content) {
+      return this.$bodyEl().html(content);
+    },
+    $append: function(content) {
+      return this.$bodyEl().append(content);
+    },
+    renderToolbars: function() {
+      var _this = this;
+      return _(["top", "left", "right", "bottom"]).each(function(orientation) {
+        var config;
+        if (config = _this["" + orientation + "Toolbar"]) {
+          return _this.renderToolbar(orientation, config);
+        }
+      });
+    },
+    renderToolbar: function(orientation, config) {
+      if (orientation == null) orientation = "top";
+      if (config == null) config = {};
+      config.parent = this;
+      config.orientation = orientation;
+      return attachToolbar.call(this, config);
+    }
+  });
+
+}).call(this);
+(function() {
+
+  Luca.modules.Deferrable = {
+    configure_collection: function(setAsDeferrable) {
+      var collectionManager, _ref, _ref2;
+      if (setAsDeferrable == null) setAsDeferrable = true;
+      if (!this.collection) return;
+      if (_.isString(this.collection) && (collectionManager = (_ref = Luca.CollectionManager) != null ? _ref.get() : void 0)) {
+        this.collection = collectionManager.getOrCreate(this.collection);
+      }
+      if (!(this.collection && _.isFunction(this.collection.fetch) && _.isFunction(this.collection.reset))) {
+        this.collection = new Luca.Collection(this.collection.initial_set, this.collection);
+      }
+      if ((_ref2 = this.collection) != null ? _ref2.deferrable_trigger : void 0) {
+        this.deferrable_trigger = this.collection.deferrable_trigger;
+      }
+      if (setAsDeferrable) return this.deferrable = this.collection;
+    }
+  };
+
+}).call(this);
+(function() {
+
+  Luca.LocalStore = (function() {
+
+    function LocalStore(name) {
+      var store;
+      this.name = name;
+      store = localStorage.getItem(this.name);
+      this.data = (store && JSON.parse(store)) || {};
+    }
+
+    LocalStore.prototype.guid = function() {
+      var S4;
+      S4 = function() {
+        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+      };
+      return S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4();
+    };
+
+    LocalStore.prototype.save = function() {
+      return localStorage.setItem(this.name, JSON.stringify(this.data));
+    };
+
+    LocalStore.prototype.create = function(model) {
+      if (!model.id) model.id = model.attribtues.id = this.guid();
+      this.data[model.id] = model;
+      this.save();
+      return model;
+    };
+
+    LocalStore.prototype.update = function(model) {
+      this.data[model.id] = model;
+      this.save();
+      return model;
+    };
+
+    LocalStore.prototype.find = function(model) {
+      return this.data[model.id];
+    };
+
+    LocalStore.prototype.findAll = function() {
+      return _.values(this.data);
+    };
+
+    LocalStore.prototype.destroy = function(model) {
+      delete this.data[model.id];
+      this.save();
+      return model;
+    };
+
+    return LocalStore;
+
+  })();
+
+  Backbone.LocalSync = function(method, model, options) {
+    var resp, store;
+    store = model.localStorage || model.collection.localStorage;
+    resp = (function() {
+      switch (method) {
+        case "read":
+          if (model.id) {
+            return store.find(model);
+          } else {
+            return store.findAll();
+          }
+        case "create":
+          return store.create(model);
+        case "update":
+          return store.update(model);
+        case "delete":
+          return store.destroy(model);
+      }
+    })();
+    if (resp) {
+      return options.success(resp);
+    } else {
+      return options.error("Record not found");
     }
-  });
+  };
 
-  _.extend(Luca.Collection.prototype, {
-    trigger: function() {
-      if (Luca.enableGlobalObserver) {
-        Luca.CollectionObserver || (Luca.CollectionObserver = new Luca.Observer({
-          type: "collection"
-        }));
-        Luca.CollectionObserver.relay(this, arguments);
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["components/bootstrap_form_controls"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'form-actions\'>\n  <a class=\'btn btn-primary submit-button\'>\n    <i class=\'icon-ok icon-white\'></i>\n    Save Changes\n  </a>\n  <a class=\'btn reset-button cancel-button\'>\n    <i class=\'icon-remove\'></i>\n    Cancel\n  </a>\n</div>\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["components/collection_loader_view"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'modal\' id=\'progress-model\' style=\'display: none;\'>\n  <div class=\'progress progress-info progress-striped active\'>\n    <div class=\'bar\' style=\'width: 0%;\'></div>\n  </div>\n  <div class=\'message\'>\n    Initializing...\n  </div>\n</div>\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["components/form_view"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'form-view-panel\'>\n  <ul class=\'form-view-flash-container\'></ul>\n  <div class=\'form-view-body\'></div>\n</div>\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["components/grid_view"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'luca-ui-g-view-wrapper\'>\n  <div class=\'g-view-header\'></div>\n  <div class=\'luca-ui-g-view-body\'>\n    <table cellpadding=\'0\' cellspacing=\'0\' class=\'luca-ui-g-view scrollable-table\' width=\'100%\'>\n      <thead class=\'fixed\'></thead>\n      <tbody class=\'scrollable\'></tbody>\n    </table>\n  </div>\n  <div class=\'luca-ui-g-view-footer\'></div>\n</div>\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["components/grid_view_empty_text"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'empty-text-wrapper\'>\n  <p>\n    ', text ,'\n  </p>\n</div>\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["components/load_mask"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'load-mask\'>\n  <div class=\'progress progress-striped active\'>\n    <div class=\'bar\' style=\'width:1%\'></div>\n  </div>\n</div>\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["components/nav_bar"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'navbar-inner\'>\n  <div class=\'luca-ui-navbar-body container\'></div>\n</div>\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["containers/basic"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'', classes ,'\' id=\'', id ,'\' style=\'', style ,'\'></div>\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["containers/tab_selector_container"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'tab-selector-container\' id=\'', cid ,'-tab-selector\'>\n  <ul class=\'nav nav-tabs\' id=\'', cid ,'-tabs-nav\'>\n    '); for(var i = 0; i < components.length; i++ ) { __p.push('\n    '); var component = components[i];__p.push('\n    <li class=\'tab-selector\' data-target=\'', i ,'\'>\n      <a data-target=\'', i ,'\'>\n        ', component.title ,'\n      </a>\n    </li>\n    '); } __p.push('\n  </ul>\n</div>\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["containers/tab_view"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<ul class=\'nav nav-tabs\' id=\'', cid ,'-tabs-selector\'></ul>\n<div class=\'tab-content\' id=\'', cid ,'-tab-view-content\'></div>\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["containers/toolbar_wrapper"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'luca-ui-toolbar-wrapper\' id=\'', id ,'\'></div>\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["fields/button_field"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<label>&nbsp</label>\n<input class=\'btn ', input_class ,'\' id=\'', input_id ,'\' style=\'', inputStyles ,'\' type=\'', input_type ,'\' value=\'', input_value ,'\' />\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["fields/button_field_link"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<a class=\'btn ', input_class ,'\'>\n  '); if(icon_class.length) { __p.push('\n  <i class=\'', icon_class ,'\'></i>\n  '); } __p.push('\n  ', input_value ,'\n</a>\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["fields/checkbox_array"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<div class=\'form-horizontal\'>\n  <div class=\'control-group\'>\n    <label for=\'', input_id ,'\'>\n      ', label ,'\n    </label>\n    <div class=\'controls\'></div>\n  </div>\n</div>\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["fields/checkbox_array_item"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<label for=\'', input_id ,'\'>\n  <input id=\'', input_id ,'\' name=\'', input_name ,'\' type=\'checkbox\' value=\'', value ,'\' />\n  ', label ,'\n</label>\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["fields/checkbox_field"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<label for=\'', input_id ,'\'>\n  ', label ,'\n  <input name=\'', input_name ,'\' style=\'', inputStyles ,'\' type=\'checkbox\' value=\'', input_value ,'\' />\n</label>\n'); if(helperText) { __p.push('\n<p class=\'helper-text help-block\'>\n  ', helperText ,'\n</p>\n'); } __p.push('\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["fields/file_upload_field"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<label for=\'', input_id ,'\'>\n  ', label ,'\n</label>\n<input id=\'', input_id ,'\' name=\'', input_name ,'\' style=\'', inputStyles ,'\' type=\'file\' />\n'); if(helperText) { __p.push('\n<p class=\'helper-text help-block\'>\n  ', helperText ,'\n</p>\n'); } __p.push('\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["fields/hidden_field"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<input id=\'', input_id ,'\' name=\'', input_name ,'\' type=\'hidden\' value=\'', input_value ,'\' />\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["fields/select_field"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<label for=\'', input_id ,'\'>\n  ', label ,'\n</label>\n<select id=\'', input_id ,'\' name=\'', input_name ,'\' style=\'', inputStyles ,'\'></select>\n'); if(helperText) { __p.push('\n<p class=\'helper-text help-block\'>\n  ', helperText ,'\n</p>\n'); } __p.push('\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["fields/text_area_field"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<label for=\'', input_id ,'\'>\n  ', label ,'\n</label>\n<textarea class=\'', input_class ,'\' id=\'', input_id ,'\' name=\'', input_name ,'\' style=\'', inputStyles ,'\'></textarea>\n'); if(helperText) { __p.push('\n<p class=\'helper-text help-block\'>\n  ', helperText ,'\n</p>\n'); } __p.push('\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["fields/text_field"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push(''); if(typeof(label)!=="undefined" && (typeof(hideLabel) !== "undefined" && !hideLabel) || (typeof(hideLabel)==="undefined")) {__p.push('\n<label class=\'control-label\' for=\'', input_id ,'\'>\n  ', label ,'\n</label>\n'); } __p.push('\n'); if( typeof(addOn) !== "undefined" ) { __p.push('\n<span class=\'add-on\'>\n  ', addOn ,'\n</span>\n'); } __p.push('\n<input class=\'', input_class ,'\' id=\'', input_id ,'\' name=\'', input_name ,'\' placeholder=\'', placeHolder ,'\' style=\'', inputStyles ,'\' type=\'text\' />\n'); if(helperText) { __p.push('\n<p class=\'helper-text help-block\'>\n  ', helperText ,'\n</p>\n'); } __p.push('\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["sample/contents"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('<p>Sample Contents</p>\n');}return __p.join('');};
+}).call(this);
+(function() {
+  Luca.templates || (Luca.templates = {});
+  Luca.templates["sample/welcome"] = function(obj){var __p=[],print=function(){__p.push.apply(__p,arguments);};with(obj||{}){__p.push('welcome.luca\n');}return __p.join('');};
+}).call(this);
+(function() {
+  var __slice = Array.prototype.slice;
+
+  Luca.Observer = (function() {
+
+    function Observer(options) {
+      var _this = this;
+      this.options = options != null ? options : {};
+      _.extend(this, Backbone.Events);
+      this.type = this.options.type;
+      if (this.options.debugAll) {
+        this.bind("all", function(trigger, one, two) {
+          return console.log("ALL", trigger, one, two);
+        });
       }
-      return Backbone.View.prototype.trigger.apply(this, arguments);
     }
-  });
 
-  Luca.Collection.baseParams = function(obj) {
-    if (obj) return Luca.Collection._baseParams = obj;
-    if (_.isFunction(Luca.Collection._baseParams)) {
-      return Luca.Collection._baseParams.call();
-    }
-    if (_.isObject(Luca.Collection._baseParams)) {
-      return Luca.Collection._baseParams;
-    }
-  };
+    Observer.prototype.relay = function() {
+      var args, triggerer;
+      triggerer = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
+      console.log("Relaying", trigger, args);
+      this.trigger("event", triggerer, args);
+      return this.trigger("event:" + args[0], triggerer, args.slice(1));
+    };
 
-  Luca.Collection._bootstrapped_models = {};
+    return Observer;
 
-  Luca.Collection.bootstrap = function(obj) {
-    return _.extend(Luca.Collection._bootstrapped_models, obj);
-  };
+  })();
 
-  Luca.Collection.cache = function(key, models) {
-    if (models) return Luca.Collection._bootstrapped_models[key] = models;
-    return Luca.Collection._bootstrapped_models[key] || [];
+  Luca.Observer.enableObservers = function(options) {
+    if (options == null) options = {};
+    Luca.enableGlobalObserver = true;
+    Luca.ViewObserver = new Luca.Observer(_.extend(options, {
+      type: "view"
+    }));
+    return Luca.CollectionObserver = new Luca.Observer(_.extend(options, {
+      type: "collection"
+    }));
   };
 
 }).call(this);
 (function() {
 
-  _.component('Luca.core.Field')["extends"]('Luca.View')["with"]({
+  _.def('Luca.core.Field')["extends"]('Luca.View')["with"]({
     className: 'luca-ui-text-field luca-ui-field',
     isField: true,
     template: 'fields/text_field',
@@ -876,9 +1519,9 @@
       var _ref;
       this.options = options != null ? options : {};
       _.extend(this, this.options);
-      Luca.View.prototype.initialize.apply(this, arguments);
       this.input_id || (this.input_id = _.uniqueId('field'));
       this.input_name || (this.input_name = this.name);
+      this.input_class || (this.input_class = "");
       this.helperText || (this.helperText = "");
       if (this.required && !((_ref = this.label) != null ? _ref.match(/^\*/) : void 0)) {
         this.label || (this.label = "*" + this.label);
@@ -886,7 +1529,8 @@
       this.inputStyles || (this.inputStyles = "");
       if (this.disabled) this.disable();
       this.updateState(this.state);
-      return this.placeHolder || (this.placeHolder = "");
+      this.placeHolder || (this.placeHolder = "");
+      return Luca.View.prototype.initialize.apply(this, arguments);
     },
     beforeRender: function() {
       if (Luca.enableBootstrap) this.$el.addClass('control-group');
@@ -923,9 +1567,48 @@
 
 }).call(this);
 (function() {
+  var applyDOMConfig, doComponents, doLayout;
+
+  doLayout = function() {
+    this.trigger("before:layout", this);
+    this.prepareLayout();
+    return this.trigger("after:layout", this);
+  };
+
+  applyDOMConfig = function(panel, panelIndex) {
+    var config, style_declarations;
+    style_declarations = [];
+    if (panel.height != null) {
+      style_declarations.push("height: " + (_.isNumber(panel.height) ? panel.height + 'px' : panel.height));
+    }
+    if (panel.width != null) {
+      style_declarations.push("width: " + (_.isNumber(panel.width) ? panel.width + 'px' : panel.width));
+    }
+    if (panel.float) style_declarations.push("float: " + panel.float);
+    config = {
+      "class": (panel != null ? panel.classes : void 0) || this.componentClass,
+      id: "" + this.cid + "-" + panelIndex,
+      style: style_declarations.join(';'),
+      "data-luca-owner": this.name || this.cid
+    };
+    if (this.customizeContainerEl != null) {
+      config = this.customizeContainerEl(config, panel, panelIndex);
+    }
+    return config;
+  };
+
+  doComponents = function() {
+    this.trigger("before:components", this, this.components);
+    this.prepareComponents();
+    this.createComponents();
+    this.trigger("before:render:components", this, this.components);
+    this.renderComponents();
+    return this.trigger("after:components", this, this.components);
+  };
 
-  _.component('Luca.core.Container')["extends"]('Luca.View')["with"]({
+  _.def('Luca.core.Container')["extends"]('Luca.components.Panel')["with"]({
     className: 'luca-ui-container',
+    componentTag: 'div',
     componentClass: 'luca-ui-panel',
     isContainer: true,
     hooks: ["before:components", "before:render:components", "before:layout", "after:components", "after:layout", "first:activation"],
@@ -934,68 +1617,49 @@
     initialize: function(options) {
       this.options = options != null ? options : {};
       _.extend(this, this.options);
-      this.setupHooks(Luca.core.Container.prototype.hooks);
+      this.setupHooks(["before:components", "before:render:components", "before:layout", "after:components", "after:layout", "first:activation"]);
       return Luca.View.prototype.initialize.apply(this, arguments);
     },
     beforeRender: function() {
-      this.debug("container before render");
-      this.doLayout();
-      return this.doComponents();
-    },
-    doLayout: function() {
-      this.debug("container do layout");
-      this.trigger("before:layout", this);
-      this.prepareLayout();
-      return this.trigger("after:layout", this);
-    },
-    doComponents: function() {
-      this.debug("container do components");
-      this.trigger("before:components", this, this.components);
-      this.prepareComponents();
-      this.createComponents();
-      this.trigger("before:render:components", this, this.components);
-      this.renderComponents();
-      return this.trigger("after:components", this, this.components);
-    },
-    applyPanelConfig: function(panel, panelIndex) {
-      var config, style_declarations;
-      style_declarations = [];
-      if (panel.height) {
-        style_declarations.push("height: " + (_.isNumber(panel.height) ? panel.height + 'px' : panel.height));
-      }
-      if (panel.width) {
-        style_declarations.push("width: " + (_.isNumber(panel.width) ? panel.width + 'px' : panel.width));
-      }
-      if (panel.float) style_declarations.push("float: " + panel.float);
-      return config = {
-        classes: (panel != null ? panel.classes : void 0) || this.componentClass,
-        id: "" + this.cid + "-" + panelIndex,
-        style: style_declarations.join(';')
-      };
+      var _ref;
+      doLayout.call(this);
+      doComponents.call(this);
+      return (_ref = Luca.components.Panel.prototype.beforeRender) != null ? _ref.apply(this, arguments) : void 0;
+    },
+    customizeContainerEl: function(containerEl, panel, panelIndex) {
+      return containerEl;
     },
     prepareLayout: function() {
-      var _this = this;
-      this.debug("container prepare layout");
-      this.componentContainers = _(this.components).map(function(component, index) {
-        return _this.applyPanelConfig.apply(_this, [component, index]);
-      });
-      if (this.appendContainers) {
-        return _(this.componentContainers).each(function(container) {
-          if (container.appended == null) {
-            _this.$el.append(Luca.templates["containers/basic"](container));
-          }
-          return container.appended = true;
-        });
-      }
+      var container;
+      container = this;
+      return this.componentContainers = _(this.components).map(function(component, index) {
+        return applyDOMConfig.call(container, component, index);
+      });
     },
     prepareComponents: function() {
-      var _this = this;
-      this.debug("container prepare components");
-      return this.components = _(this.components).map(function(object, index) {
-        var panel;
-        panel = _this.componentContainers[index];
-        object.container = _this.appendContainers ? "#" + panel.id : _this.el;
-        return object;
+      var component, _i, _len, _ref,
+        _this = this;
+      _ref = this.components;
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        component = _ref[_i];
+        if (_.isString(component)) {
+          component = {
+            type: component
+          };
+        }
+      }
+      return _(this.components).each(function(component, index) {
+        var container, panel, _ref2;
+        container = (_ref2 = _this.componentContainers) != null ? _ref2[index] : void 0;
+        container["class"] = container["class"] || container.className || container.classes;
+        if (_this.appendContainers) {
+          panel = _this.make(_this.componentTag, container, '');
+          _this.$append(panel);
+        }
+        if (component.container == null) {
+          if (_this.appendContainers) component.container = "#" + container.id;
+          return component.container || (component.container = _this.$bodyEl());
+        }
       });
     },
     createComponents: function() {
@@ -1008,7 +1672,7 @@
       };
       this.components = _(this.components).map(function(object, index) {
         var component;
-        component = _.isObject(object) && object.render && object.trigger ? object : (object.ctype || (object.ctype = Luca.defaultComponentType || "template"), Luca.util.lazyComponent(object));
+        component = Luca.isBackboneView(object) ? object : (object.type || (object.type = object.ctype), !(object.type != null) ? object.components != null ? object.type = object.ctype = 'container' : object.type = object.ctype = Luca.defaultComponentType : void 0, Luca.util.lazyComponent(object));
         if (!component.container && component.options.container) {
           component.container = component.options.container;
         }
@@ -1019,6 +1683,7 @@
         return component;
       });
       this.componentsCreated = true;
+      if (!_.isEmpty(this.componentEvents)) this.registerComponentEvents();
       return map;
     },
     renderComponents: function(debugMode) {
@@ -1034,21 +1699,23 @@
           return component.render();
         } catch (e) {
           console.log("Error Rendering Component " + (component.name || component.cid), component);
-          console.log(e.message);
-          console.log(e.stack);
+          if (_.isObject(e)) {
+            console.log(e.message);
+            console.log(e.stack);
+          }
           if ((Luca.silenceRenderErrors != null) !== true) throw e;
         }
       });
     },
     firstActivation: function() {
-      var _this = this;
-      return _(this.components).each(function(component) {
-        var activator, _ref;
-        activator = _this;
+      var activator;
+      activator = this;
+      return this.each(function(component, index) {
+        var _ref;
         if ((component != null ? component.previously_activated : void 0) !== true) {
           if (component != null) {
             if ((_ref = component.trigger) != null) {
-              _ref.apply(component, ["first:activation", [component, activator]]);
+              _ref.call(component, "first:activation", component, activator);
             }
           }
           return component.previously_activated = true;
@@ -1070,6 +1737,19 @@
       });
       return _.flatten(components);
     },
+    componentEvents: {},
+    registerComponentEvents: function() {
+      var component, componentName, handler, listener, trigger, _ref, _ref2, _results;
+      _ref = this.componentEvents;
+      _results = [];
+      for (listener in _ref) {
+        handler = _ref[listener];
+        _ref2 = listener.split(' '), componentName = _ref2[0], trigger = _ref2[1];
+        component = this.findComponentByName(componentName);
+        _results.push(component != null ? component.bind(trigger, this[handler]) : void 0);
+      }
+      return _results;
+    },
     findComponentByName: function(name, deep) {
       if (deep == null) deep = false;
       return this.findComponent(name, "name_index", deep);
@@ -1093,12 +1773,15 @@
         return sub_container != null ? typeof sub_container.findComponent === "function" ? sub_container.findComponent(needle, haystack, true) : void 0 : void 0;
       }
     },
+    each: function(fn) {
+      return this.eachComponent(fn, false);
+    },
     eachComponent: function(fn, deep) {
       var _this = this;
       if (deep == null) deep = true;
-      return _(this.components).each(function(component) {
+      return _(this.components).each(function(component, index) {
         var _ref;
-        fn.apply(component, [component]);
+        fn.call(component, component, index);
         if (deep) {
           return component != null ? (_ref = component.eachComponent) != null ? _ref.apply(component, [fn, deep]) : void 0 : void 0;
         }
@@ -1114,7 +1797,7 @@
       return this.components[this.activeItem];
     },
     componentElements: function() {
-      return $("." + this.componentClass, this.el);
+      return $(">." + this.componentClass, this.el);
     },
     getComponent: function(needle) {
       return this.components[needle];
@@ -1330,8 +2013,7 @@
 }).call(this);
 (function() {
 
-  _.component('Luca.containers.SplitView')["extends"]('Luca.core.Container')["with"]({
-    layout: '100',
+  _.def('Luca.containers.SplitView')["extends"]('Luca.core.Container')["with"]({
     componentType: 'split_view',
     containerTemplate: 'containers/basic',
     className: 'luca-ui-split-view',
@@ -1341,7 +2023,7 @@
 }).call(this);
 (function() {
 
-  _.component('Luca.containers.ColumnView')["extends"]('Luca.core.Container')["with"]({
+  _.def('Luca.containers.ColumnView')["extends"]('Luca.core.Container')["with"]({
     componentType: 'column_view',
     className: 'luca-ui-column-view',
     components: [],
@@ -1370,12 +2052,6 @@
         return "" + val + "%";
       });
     },
-    beforeComponents: function() {
-      this.debug("column_view before components");
-      return _(this.components).each(function(component) {
-        return component.ctype || (component.ctype = "panel_view");
-      });
-    },
     beforeLayout: function() {
       var _ref,
         _this = this;
@@ -1391,47 +2067,43 @@
 }).call(this);
 (function() {
 
-  _.component("Luca.containers.CardView")["extends"]("Luca.core.Container")["with"]({
+  _.def("Luca.containers.CardView")["extends"]("Luca.core.Container")["with"]({
     componentType: 'card_view',
     className: 'luca-ui-card-view-wrapper',
     activeCard: 0,
     components: [],
     hooks: ['before:card:switch', 'after:card:switch'],
+    componentClass: 'luca-ui-card',
+    appendContainers: true,
     initialize: function(options) {
       this.options = options;
       Luca.core.Container.prototype.initialize.apply(this, arguments);
       return this.setupHooks(this.hooks);
     },
-    componentClass: 'luca-ui-card',
-    beforeLayout: function() {
-      var _this = this;
-      return this.cards = _(this.components).map(function(card, cardIndex) {
-        return {
-          classes: _this.componentClass,
-          style: "display:" + (cardIndex === _this.activeCard ? 'block' : 'none'),
-          id: "" + _this.cid + "-" + cardIndex
-        };
-      });
-    },
-    prepareLayout: function() {
-      var _this = this;
-      return this.card_containers = _(this.cards).map(function(card, index) {
-        _this.$el.append(Luca.templates["containers/basic"](card));
-        return $("#" + card.id);
-      });
-    },
     prepareComponents: function() {
-      var _this = this;
-      return this.components = _(this.components).map(function(object, index) {
-        var card;
-        card = _this.cards[index];
-        object.container = "#" + card.id;
-        return object;
+      var _ref,
+        _this = this;
+      if ((_ref = Luca.core.Container.prototype.prepareComponents) != null) {
+        _ref.apply(this, arguments);
+      }
+      return _(this.components).each(function(component, index) {
+        if (index === _this.activeCard) {
+          return $(component.container).show();
+        } else {
+          return $(component.container).hide();
+        }
       });
     },
+    activeComponentElement: function() {
+      return this.componentElements().eq(this.activeCard);
+    },
     activeComponent: function() {
       return this.getComponent(this.activeCard);
     },
+    customizeContainerEl: function(containerEl, panel, panelIndex) {
+      containerEl.style += panelIndex === this.activeCard ? "display:block;" : "display:none;";
+      return containerEl;
+    },
     cycle: function() {
       var nextIndex;
       nextIndex = this.activeCard < this.components.length - 1 ? this.activeCard + 1 : 0;
@@ -1471,15 +2143,13 @@
           }
         }
       }
-      _(this.card_containers).each(function(container) {
-        return container.hide();
-      });
+      this.componentElements().hide();
       if (!current.previously_activated) {
         current.trigger("first:activation");
         current.previously_activated = true;
       }
-      $(current.container).show();
       this.activeCard = index;
+      this.activeComponentElement().show();
       if (!silent) {
         this.trigger("after:card:switch", previous, current);
         if ((_ref3 = previous.trigger) != null) {
@@ -1498,92 +2168,171 @@
 }).call(this);
 (function() {
 
-  _.component('Luca.containers.ModalView')["extends"]('Luca.core.Container')["with"]({
-    componentType: 'modal_view',
-    className: 'luca-ui-modal-view',
-    components: [],
-    renderOnInitialize: true,
-    showOnRender: false,
-    hooks: ['before:show', 'before:hide'],
-    defaultModalOptions: {
-      minWidth: 375,
-      maxWidth: 375,
-      minHeight: 550,
-      maxHeight: 550,
-      opacity: 80,
-      onOpen: function(modal) {
-        this.onOpen.apply(this);
-        return this.onModalOpen.apply(modal, [modal, this]);
-      },
-      onClose: function(modal) {
-        this.onClose.apply(this);
-        return this.onModalClose.apply(modal, [modal, this]);
-      }
-    },
-    modalOptions: {},
-    initialize: function(options) {
-      var _this = this;
-      this.options = options != null ? options : {};
-      Luca.core.Container.prototype.initialize.apply(this, arguments);
-      this.setupHooks(this.hooks);
-      _(this.defaultModalOptions).each(function(value, setting) {
-        var _base;
-        return (_base = _this.modalOptions)[setting] || (_base[setting] = value);
-      });
-      this.modalOptions.onOpen = _.bind(this.modalOptions.onOpen, this);
-      return this.modalOptions.onClose = _.bind(this.modalOptions.onClose, this);
-    },
-    onOpen: function() {
-      return true;
+  _.def("Luca.ModalView")["extends"]("Luca.View")["with"]({
+    closeOnEscape: true,
+    showOnInitialize: false,
+    backdrop: false,
+    container: function() {
+      return $('body');
     },
-    onClose: function() {
-      return true;
+    toggle: function() {
+      return this.$el.modal('toggle');
     },
-    getModal: function() {
-      return this.modal;
+    show: function() {
+      return this.$el.modal('show');
     },
-    onModalOpen: function(modal, view) {
-      view.modal = modal;
-      modal.overlay.show();
-      modal.container.show();
-      return modal.data.show();
+    hide: function() {
+      return this.$el.modal('hide');
     },
-    onModalClose: function(modal, view) {
-      return $.modal.close();
+    render: function() {
+      this.$el.addClass('modal');
+      if (this.fade === true) this.$el.addClass('fade');
+      $('body').append(this.$el);
+      return this.$el.modal({
+        backdrop: this.backdrop === true,
+        keyboard: this.closeOnEscape === true,
+        show: this.showOnInitialize === true
+      });
+    }
+  });
+
+  _.def("Luca.containers.ModalView")["extends"]("Luca.ModalView")["with"]();
+
+}).call(this);
+(function() {
+  var buildButton, make, prepareButtons;
+
+  make = Backbone.View.prototype.make;
+
+  buildButton = function(config, wrap) {
+    var autoWrapClass, buttonAttributes, buttonEl, buttons, dropdownEl, dropdownItems, label, object, white, wrapper,
+      _this = this;
+    if (wrap == null) wrap = true;
+    if (config.ctype != null) {
+      config.className || (config.className = "");
+      config.className += 'toolbar-component';
+      object = Luca(config).render();
+      if (Luca.isBackboneView(object)) {
+        console.log("Adding toolbar component", object);
+        return object.el;
+      }
+    }
+    if (config.spacer) {
+      return make("div", {
+        "class": "spacer " + config.spacer
+      });
+    }
+    if (config.text) {
+      return make("div", {
+        "class": "toolbar-text"
+      }, config.text);
+    }
+    wrapper = 'btn-group';
+    if (config.wrapper != null) wrapper += " " + config.wrapper;
+    if (config.align != null) wrapper += " align-" + config.align;
+    if ((config.group != null) && (config.buttons != null)) {
+      buttons = prepareButtons(config.buttons, false);
+      return make("div", {
+        "class": wrapper
+      }, buttons);
+    } else {
+      label = config.label || (config.label = "");
+      config.eventId || (config.eventId = _.string.dasherize(config.label.toLowerCase()));
+      if (config.icon) {
+        if (_.string.isBlank(label)) label = " ";
+        if (config.white) white = "icon-white";
+        label = "<i class='" + (white || "") + " icon-" + config.icon + "' /> " + label;
+      }
+      buttonAttributes = {
+        "class": _.compact(["btn", config.classes, config.className]).join(" "),
+        "data-eventId": config.eventId,
+        title: config.title || config.description
+      };
+      if (config.color != null) {
+        buttonAttributes["class"] += " btn-" + config.color;
+      }
+      if (config.dropdown) {
+        label = "" + label + " <span class='caret'></span>";
+        buttonAttributes["class"] += " dropdown-toggle";
+        buttonAttributes["data-toggle"] = "dropdown";
+        dropdownItems = _(config.dropdown).map(function(dropdownItem) {
+          var link;
+          link = make("a", {}, dropdownItem[1]);
+          return make("li", {
+            "data-eventId": dropdownItem[0]
+          }, link);
+        });
+        dropdownEl = make("ul", {
+          "class": "dropdown-menu"
+        }, dropdownItems);
+      }
+      buttonEl = make("a", buttonAttributes, label);
+      autoWrapClass = "btn-group";
+      if (config.align != null) autoWrapClass += " align-" + config.align;
+      if (wrap === true) {
+        return make("div", {
+          "class": autoWrapClass
+        }, [buttonEl, dropdownEl]);
+      } else {
+        return buttonEl;
+      }
+    }
+  };
+
+  prepareButtons = function(buttons, wrap) {
+    if (wrap == null) wrap = true;
+    return _(buttons).map(function(button) {
+      return buildButton(button, wrap);
+    });
+  };
+
+  _.def("Luca.containers.PanelToolbar")["extends"]("Luca.View")["with"]({
+    className: "luca-ui-toolbar btn-toolbar",
+    buttons: [],
+    well: true,
+    orientation: 'top',
+    autoBindEventHandlers: true,
+    events: {
+      "click a.btn, click .dropdown-menu li": "clickHandler"
+    },
+    clickHandler: function(e) {
+      var eventId, hook, me, my, source;
+      me = my = $(e.target);
+      if (me.is('i')) me = my = $(e.target).parent();
+      eventId = my.data('eventid');
+      if (eventId == null) return;
+      hook = Luca.util.hook(eventId);
+      source = this.parent || this;
+      if (_.isFunction(source[hook])) {
+        return source[hook].call(this, me, e);
+      } else {
+        return source.trigger(eventId, me, e);
+      }
     },
-    prepareLayout: function() {
-      return $('body').append(this.$el);
+    beforeRender: function() {
+      this._super("beforeRender", this, arguments);
+      if (this.well === true) this.$el.addClass('well');
+      this.$el.addClass("toolbar-" + this.orientation);
+      if (this.styles != null) return this.applyStyles(this.styles);
     },
-    prepareComponents: function() {
-      var _this = this;
-      return this.components = _(this.components).map(function(object, index) {
-        object.container = _this.el;
-        return object;
+    render: function() {
+      var elements,
+        _this = this;
+      this.$el.empty();
+      elements = prepareButtons(this.buttons);
+      return _(elements).each(function(element) {
+        return _this.$el.append(element);
       });
     },
-    afterInitialize: function() {
-      this.$el.hide();
-      if (this.renderOnInitialize) return this.render();
-    },
     afterRender: function() {
-      if (this.showOnRender) return this.show();
-    },
-    wrapper: function() {
-      return $(this.$el.parent());
-    },
-    show: function() {
-      this.trigger("before:show", this);
-      return this.$el.modal(this.modalOptions);
-    },
-    hide: function() {
-      return this.trigger("before:hide", this);
+      return this._super("afterRender", this, arguments);
     }
   });
 
 }).call(this);
 (function() {
 
-  _.component('Luca.containers.PanelView')["extends"]('Luca.core.Container')["with"]({
+  _.def('Luca.containers.PanelView')["extends"]('Luca.core.Container')["with"]({
     className: 'luca-ui-panel',
     initialize: function(options) {
       this.options = options != null ? options : {};
@@ -1616,15 +2365,14 @@
 }).call(this);
 (function() {
 
-  _.component('Luca.containers.TabView')["extends"]('Luca.containers.CardView')["with"]({
-    events: {
-      "click ul.nav-tabs li": "select"
-    },
+  _.def('Luca.containers.TabView')["extends"]('Luca.containers.CardView')["with"]({
     hooks: ["before:select", "after:select"],
     componentType: 'tab_view',
     className: 'luca-ui-tab-view tabbable',
     tab_position: 'top',
     tabVerticalOffset: '50px',
+    bodyTemplate: "containers/tab_view",
+    bodyEl: "div.tab-content",
     initialize: function(options) {
       this.options = options != null ? options : {};
       Luca.containers.CardView.prototype.initialize.apply(this, arguments);
@@ -1635,50 +2383,50 @@
     activeTabSelector: function() {
       return this.tabSelectors().eq(this.activeCard || this.activeTab || this.activeItem);
     },
-    prepareLayout: function() {
-      var _this = this;
-      return this.card_containers = _(this.cards).map(function(card, index) {
-        _this.$('.tab-content').append(Luca.templates["containers/basic"](card));
-        return $("#" + card.id);
-      });
-    },
     beforeLayout: function() {
+      var _ref;
       this.$el.addClass("tabs-" + this.tab_position);
-      if (this.tab_position === "below") {
-        this.$el.append(Luca.templates["containers/tab_view"](this));
-        this.$el.append(Luca.templates["containers/tab_selector_container"](this));
-      } else {
-        this.$el.append(Luca.templates["containers/tab_selector_container"](this));
-        this.$el.append(Luca.templates["containers/tab_view"](this));
-      }
-      return Luca.containers.CardView.prototype.beforeLayout.apply(this, arguments);
+      this.activeTabSelector().addClass('active');
+      this.createTabSelectors();
+      return (_ref = Luca.containers.CardView.prototype.beforeLayout) != null ? _ref.apply(this, arguments) : void 0;
     },
-    beforeRender: function() {
+    afterRender: function() {
       var _ref;
-      if ((_ref = Luca.containers.CardView.prototype.beforeRender) != null) {
+      if ((_ref = Luca.containers.CardView.prototype.afterRender) != null) {
         _ref.apply(this, arguments);
       }
-      this.activeTabSelector().addClass('active');
-      if (Luca.enableBootstrap && this.tab_position === "left" || this.tab_position === "right") {
-        this.$el.addClass('grid-12');
-        this.tabContainerWrapper().addClass('grid-3');
-        this.tabContentWrapper().addClass('grid-9');
-        if (this.tabVerticalOffset) {
-          return this.tabContainerWrapper().css('padding-top', this.tabVerticalOffset);
-        }
+      this.registerEvent("click #" + this.cid + "-tabs-selector li a", "select");
+      if (Luca.enableBootstrap && (this.tab_position === "left" || this.tab_position === "right")) {
+        this.tabContainerWrapper().addClass("span2");
+        return this.tabContentWrapper().addClass("span9");
       }
     },
+    createTabSelectors: function() {
+      var tabView;
+      tabView = this;
+      return this.each(function(component, index) {
+        var selector;
+        selector = tabView.make("li", {
+          "class": "tab-selector",
+          "data-target": index
+        }, "<a>" + component.title + "</a>");
+        return tabView.tabContainer().append(selector);
+      });
+    },
     highlightSelectedTab: function() {
       this.tabSelectors().removeClass('active');
       return this.activeTabSelector().addClass('active');
     },
     select: function(e) {
       var me, my;
-      me = my = $(e.currentTarget);
+      me = my = $(e.target);
       this.trigger("before:select", this);
-      this.activate(my.data('target'));
+      this.activate(my.parent().data('target'));
       return this.trigger("after:select", this);
     },
+    componentElements: function() {
+      return this.$(">.tab-content >." + this.componentClass);
+    },
     tabContentWrapper: function() {
       return $("#" + this.cid + "-tab-view-content");
     },
@@ -1686,28 +2434,58 @@
       return $("#" + this.cid + "-tabs-selector");
     },
     tabContainer: function() {
-      return $("ul#" + this.cid + "-tabs-nav");
+      return this.$('ul.nav-tabs', this.tabContainerWrapper());
     },
     tabSelectors: function() {
-      return $('li.tab-selector', this.tabContainer());
+      return this.$('li.tab-selector', this.tabContainer());
     }
   });
 
 }).call(this);
 (function() {
 
-  _.component('Luca.containers.Viewport').extend('Luca.containers.CardView')["with"]({
+  _.def('Luca.containers.Viewport').extend('Luca.containers.CardView')["with"]({
     activeItem: 0,
     className: 'luca-ui-viewport',
     fullscreen: true,
+    fluid: false,
+    wrapperClass: 'row',
     initialize: function(options) {
       this.options = options != null ? options : {};
       Luca.core.Container.prototype.initialize.apply(this, arguments);
+      if (Luca.enableBootstrap === true) {
+        if (this.fluid === true) this.wrapperClass = "row-fluid";
+        this.$el.wrap("<div class='" + this.wrapperClass + "' />").addClass('span12');
+      }
       if (this.fullscreen) return $('html,body').addClass('luca-ui-fullscreen');
     },
-    render: function() {
-      return this.$el.addClass('luca-ui-viewport');
-    }
+    beforeRender: function() {
+      var _ref;
+      if ((_ref = Luca.containers.CardView.prototype.beforeRender) != null) {
+        _ref.apply(this, arguments);
+      }
+      if (Luca.enableBootstrap && this.topNav && this.fullscreen) {
+        $('body').css('padding', '40px');
+      }
+      if (this.topNav != null) this.renderTopNavigation();
+      if (this.bottomNav != null) return this.renderBottomNavigation();
+    },
+    renderTopNavigation: function() {
+      var _base;
+      if (this.topNav == null) return;
+      if (_.isString(this.topNav)) {
+        this.topNav = Luca.util.lazyComponent(this.topNav);
+      }
+      if (_.isObject(this.topNav)) {
+        (_base = this.topNav).ctype || (_base.ctype = this.topNav.type || "nav_bar");
+        if (!Luca.isBackboneView(this.topNav)) {
+          this.topNav = Luca.util.lazyComponent(this.topNav);
+        }
+      }
+      this.topNav.app = this;
+      return $('body').prepend(this.topNav.render().el);
+    },
+    renderBottomNavigation: function() {}
   });
 
 }).call(this);
@@ -1718,56 +2496,59 @@
 }).call(this);
 (function() {
 
-  _.component('Luca.components.Template')["extends"]('Luca.View')["with"]({
-    templateContainer: "Luca.templates",
+  _.def('Luca.components.Template')["extends"]('Luca.View')["with"]({
     initialize: function(options) {
       this.options = options != null ? options : {};
-      Luca.View.prototype.initialize.apply(this, arguments);
-      if (!(this.template || this.markup)) {
-        throw "Templates must specify which template / markup to use";
-      }
-      if (_.isString(this.templateContainer)) {
-        return this.templateContainer = eval("(window || global)." + this.templateContainer);
-      }
-    },
-    beforeRender: function() {
-      if (_.isUndefined(this.templateContainer)) this.templateContainer = JST;
-      return this.$el.html(this.markup || this.templateContainer[this.template](this.options));
-    },
-    render: function() {
-      return $(this.container).append(this.$el);
+      console.log("The Use of Luca.components.Template directly is being DEPRECATED");
+      return Luca.View.prototype.initialize.apply(this, arguments);
     }
   });
 
 }).call(this);
 (function() {
 
-  _.component('Luca.Application')["extends"]('Luca.containers.Viewport')["with"]({
+  _.def('Luca.Application')["extends"]('Luca.containers.Viewport')["with"]({
+    autoStartHistory: true,
+    useCollectionManager: true,
+    plugin: false,
+    useController: true,
     components: [
       {
-        ctype: 'controller',
-        name: 'main_controller',
-        defaultCard: 'welcome',
-        components: [
-          {
-            ctype: 'template',
-            name: 'welcome',
-            template: 'sample/welcome',
-            templateContainer: "Luca.templates"
-          }
-        ]
+        ctype: 'template',
+        name: 'welcome',
+        template: 'sample/welcome',
+        templateContainer: "Luca.templates"
       }
     ],
     initialize: function(options) {
-      var _base,
+      var definedComponents, _base,
         _this = this;
       this.options = options != null ? options : {};
       Luca.containers.Viewport.prototype.initialize.apply(this, arguments);
-      this.collectionManager || (this.collectionManager = (typeof (_base = Luca.CollectionManager).get === "function" ? _base.get() : void 0) || new Luca.CollectionManager());
+      if (this.useController === true) definedComponents = this.components || [];
+      this.components = [
+        {
+          ctype: 'controller',
+          name: "main_controller",
+          components: definedComponents
+        }
+      ];
+      if (this.useCollectionManager === true) {
+        this.collectionManager || (this.collectionManager = typeof (_base = Luca.CollectionManager).get === "function" ? _base.get() : void 0);
+        this.collectionManager || (this.collectionManager = new Luca.CollectionManager(this.collectionManagerOptions || (this.collectionManagerOptions = {})));
+      }
       this.state = new Backbone.Model(this.defaultState);
-      return this.bind("ready", function() {
+      this.bind("ready", function() {
         return _this.render();
       });
+      if (this.useKeyRouter === true && (this.keyEvents != null)) {
+        this.setupKeyRouter();
+      }
+      if (this.plugin !== true) {
+        return Luca.getApplication = function() {
+          return _this;
+        };
+      }
     },
     activeView: function() {
       var active;
@@ -1783,6 +2564,22 @@
     activeSection: function() {
       return this.get("active_section");
     },
+    beforeRender: function() {
+      var routerStartEvent, _ref;
+      if ((_ref = Luca.containers.Viewport.prototype.beforeRender) != null) {
+        _ref.apply(this, arguments);
+      }
+      if ((this.router != null) && this.autoStartHistory === true) {
+        routerStartEvent = this.startRouterOn || "after:render";
+        if (routerStartEvent === "before:render") {
+          return Backbone.history.start();
+        } else {
+          return this.bind(routerStartEvent, function() {
+            return Backbone.history.start();
+          });
+        }
+      }
+    },
     afterComponents: function() {
       var _ref, _ref2, _ref3,
         _this = this;
@@ -1806,10 +2603,6 @@
         }
       }) : void 0;
     },
-    beforeRender: function() {
-      var _ref;
-      return (_ref = Luca.containers.Viewport.prototype.beforeRender) != null ? _ref.apply(this, arguments) : void 0;
-    },
     boot: function() {
       return this.trigger("ready");
     },
@@ -1820,20 +2613,55 @@
       return this.state.get(attribute);
     },
     getMainController: function() {
-      return this.view("main_controler");
+      if (this.useController === true) return this.components[0];
+      return Luca.cache('main_controller');
     },
     set: function(attributes) {
       return this.state.set(attributes);
     },
     view: function(name) {
       return Luca.cache(name);
+    },
+    navigate_to: function(component_name, callback) {
+      return this.getMainController().navigate_to(component_name, callback);
+    },
+    setupKeyRouter: function() {
+      var router, _base;
+      if (!this.keyEvents) return;
+      (_base = this.keyEvents).control_meta || (_base.control_meta = {});
+      if (this.keyEvents.meta_control) {
+        _.extend(this.keyEvents.control_meta, this.keyEvents.meta_control);
+      }
+      router = _.bind(this.keyRouter, this);
+      return $(document).keydown(router);
+    },
+    keyRouter: function(e) {
+      var control, isInputEvent, keyEvent, keyname, meta, source, _ref;
+      if (!(e && this.keyEvents)) return;
+      isInputEvent = $(e.target).is('input') || $(e.target).is('textarea');
+      if (isInputEvent) return;
+      keyname = Luca.keyMap[e.keyCode];
+      if (!keyname) return;
+      meta = (e != null ? e.metaKey : void 0) === true;
+      control = (e != null ? e.ctrlKey : void 0) === true;
+      source = this.keyEvents;
+      source = meta ? this.keyEvents.meta : source;
+      source = control ? this.keyEvents.control : source;
+      source = meta && control ? this.keyEvents.meta_control : source;
+      if (keyEvent = source != null ? source[keyname] : void 0) {
+        if (this[keyEvent] != null) {
+          return (_ref = this[keyEvent]) != null ? _ref.call(this) : void 0;
+        } else {
+          return this.trigger(keyEvent);
+        }
+      }
     }
   });
 
 }).call(this);
 (function() {
 
-  _.component('Luca.components.Toolbar')["extends"]('Luca.core.Container')["with"]({
+  _.def('Luca.components.Toolbar')["extends"]('Luca.core.Container')["with"]({
     className: 'luca-ui-toolbar',
     position: 'bottom',
     initialize: function(options) {
@@ -1843,7 +2671,7 @@
     prepareComponents: function() {
       var _this = this;
       return _(this.components).each(function(component) {
-        return component.container = _this.el;
+        return component.container = _this.$el;
       });
     },
     render: function() {
@@ -1854,14 +2682,7 @@
 }).call(this);
 (function() {
 
-  _.component('Luca.components.CollectionInspector')["extends"]('Luca.View')["with"]({
-    name: "collection_inspector"
-  });
-
-}).call(this);
-(function() {
-
-  _.component('Luca.components.CollectionLoaderView')["extends"]('Luca.components.Template')["with"]({
+  _.def('Luca.components.CollectionLoaderView')["extends"]('Luca.components.Template')["with"]({
     className: 'luca-ui-collection-loader-view',
     template: "components/collection_loader_view",
     initialize: function(options) {
@@ -1894,10 +2715,94 @@
     }
   });
 
+}).call(this);
+(function() {
+  var make;
+
+  make = Luca.View.prototype.make;
+
+  _.def("Luca.components.CollectionView")["extends"]("Luca.components.Panel")["with"]({
+    tagName: "div",
+    className: "luca-ui-collection-view",
+    bodyClassName: "collection-ui-panel",
+    itemTemplate: void 0,
+    itemRenderer: void 0,
+    itemTagName: 'li',
+    itemClassName: 'collection-item',
+    initialize: function(options) {
+      this.options = options != null ? options : {};
+      _.extend(this, this.options);
+      _.bindAll(this, "refresh");
+      if (this.collection == null) {
+        throw "Collection Views must specify a collection";
+      }
+      if (!((this.itemTemplate != null) || (this.itemRenderer != null))) {
+        throw "Collection Views must specify an item template or item renderer function";
+      }
+      Luca.components.Panel.prototype.initialize.apply(this, arguments);
+      if (Luca.isBackboneCollection(this.collection)) {
+        this.collection.bind("reset", this.refresh);
+        this.collection.bind("add", this.refresh);
+        return this.collection.bind("remove", this.refresh);
+      }
+    },
+    attributesForItem: function(item) {
+      return _.extend({}, {
+        "class": this.itemClassName,
+        "data-index": item.index
+      });
+    },
+    contentForItem: function(item) {
+      var content, templateFn;
+      if (item == null) item = {};
+      if ((this.itemTemplate != null) && (templateFn = Luca.template(this.itemTemplate))) {
+        content = templateFn.call(this, item);
+      }
+      if ((this.itemRenderer != null) && _.isFunction(this.itemRenderer)) {
+        content = this.itemRenderer.call(this, item);
+      }
+      return content || "";
+    },
+    makeItem: function(model, index) {
+      var item;
+      item = this.prepareItem != null ? this.prepareItem.call(this, model, index) : {
+        model: model,
+        index: index
+      };
+      return make(this.itemTagName, this.attributesForItem(item), this.contentForItem(item));
+    },
+    getModels: function() {
+      return this.collection.models;
+    },
+    refresh: function() {
+      var panel;
+      panel = this;
+      this.$bodyEl().empty();
+      return _(this.getModels()).each(function(model, index) {
+        return panel.$append(panel.makeItem(model, index));
+      });
+    },
+    registerEvent: function(domEvent, selector, handler) {
+      var eventTrigger;
+      if (!(handler != null) && _.isFunction(selector)) {
+        handler = selector;
+        selector = void 0;
+      }
+      eventTrigger = _([domEvent, "" + this.itemTagName + "." + this.itemClassName, selector]).compact().join(" ");
+      return Luca.View.prototype.registerEvent(eventTrigger, handler);
+    },
+    render: function() {
+      this.refresh();
+      if (this.$el.parent().length > 0 && (this.container != null)) {
+        return this.$attach();
+      }
+    }
+  });
+
 }).call(this);
 (function() {
 
-  _.component('Luca.components.Controller')["extends"]('Luca.containers.CardView')["with"]({
+  _.def('Luca.components.Controller')["extends"]('Luca.containers.CardView')["with"]({
     initialize: function(options) {
       var _ref;
       this.options = options;
@@ -1935,70 +2840,7 @@
 }).call(this);
 (function() {
 
-  _.component('Luca.components.DevelopmentConsole')["extends"]('Luca.View')["with"]({
-    name: "development_console",
-    className: 'luca-ui-development-console',
-    initialize: function(options) {
-      this.options = options != null ? options : {};
-      Luca.View.prototype.initialize.apply(this, arguments);
-      if (this.modal) return this.$el.addClass('luca-ui-modal');
-    },
-    beforeRender: function() {
-      this.$el.append(this.make("div", {
-        "class": "console-inner"
-      }));
-      this.console_el = this.$('.console-inner');
-      return this.console = this.console_el.console({
-        promptLabel: "Coffee> ",
-        animateScroll: true,
-        promptHistory: true,
-        autoFocus: true,
-        commandValidate: function(line) {
-          var valid;
-          valid = true;
-          if (line === "") valid = false;
-          try {
-            if (CoffeeScript.compile(line)) {
-              valid = true;
-            } else {
-              valid = false;
-            }
-          } catch (error) {
-            valid = false;
-          }
-          return valid;
-        },
-        returnValue: function(val) {
-          if (val == null) return "undefined";
-          return (val != null ? val.toString() : void 0) || "";
-        },
-        parseLine: function(line) {
-          line = _.string.strip(line);
-          line = line.replace(/^return/, ' ');
-          return "return " + line;
-        },
-        commandHandle: function(line) {
-          var compiled, ret;
-          if (line === "") return;
-          compiled = CoffeeScript.compile(this.parseLine(line));
-          try {
-            ret = eval(compiled);
-            return this.returnValue(ret);
-          } catch (error) {
-            if (error.message.match(/circular structure to JSON/)) {
-              return ret.toString();
-            }
-            return error.toString();
-          }
-        }
-      });
-    }
-  });
-
-}).call(this);
-(function() {
-
-  _.component('Luca.fields.ButtonField')["extends"]('Luca.core.Field')["with"]({
+  _.def('Luca.fields.ButtonField')["extends"]('Luca.core.Field')["with"]({
     readOnly: true,
     events: {
       "click input": "click_handler"
@@ -2041,7 +2883,7 @@
 }).call(this);
 (function() {
 
-  _.component('Luca.fields.CheckboxArray')["extends"]('Luca.core.Field')["with"]({
+  _.def('Luca.fields.CheckboxArray')["extends"]('Luca.core.Field')["with"]({
     template: "fields/checkbox_array",
     events: {
       "click input": "clickHandler"
@@ -2069,8 +2911,8 @@
       return this.collection.bind("reset", this.populateCheckboxes);
     },
     afterRender: function() {
-      var _ref, _ref2;
-      if (((_ref = this.collection) != null ? (_ref2 = _ref.models) != null ? _ref2.length : void 0 : void 0) > 0) {
+      var _ref;
+      if (((_ref = this.collection) != null ? _ref.length : void 0) > 0) {
         return this.populateCheckboxes();
       } else {
         return this.collection.trigger("reset");
@@ -2124,7 +2966,7 @@
 }).call(this);
 (function() {
 
-  _.component('Luca.fields.CheckboxField')["extends"]('Luca.core.Field')["with"]({
+  _.def('Luca.fields.CheckboxField')["extends"]('Luca.core.Field')["with"]({
     events: {
       "change input": "change_handler"
     },
@@ -2141,6 +2983,7 @@
     className: 'luca-ui-checkbox-field luca-ui-field',
     template: 'fields/checkbox_field',
     hooks: ["checked", "unchecked"],
+    send_blanks: true,
     initialize: function(options) {
       this.options = options != null ? options : {};
       _.extend(this, this.options);
@@ -2164,7 +3007,7 @@
 }).call(this);
 (function() {
 
-  _.component('Luca.fields.FileUploadField')["extends"]('Luca.core.Field')["with"]({
+  _.def('Luca.fields.FileUploadField')["extends"]('Luca.core.Field')["with"]({
     template: 'fields/file_upload_field',
     initialize: function(options) {
       this.options = options != null ? options : {};
@@ -2181,7 +3024,7 @@
 }).call(this);
 (function() {
 
-  _.component('Luca.fields.HiddenField')["extends"]('Luca.core.Field')["with"]({
+  _.def('Luca.fields.HiddenField')["extends"]('Luca.core.Field')["with"]({
     template: 'fields/hidden_field',
     initialize: function(options) {
       this.options = options != null ? options : {};
@@ -2198,7 +3041,7 @@
 }).call(this);
 (function() {
 
-  _.component('Luca.fields.SelectField')["extends"]('Luca.core.Field')["with"]({
+  _.def('Luca.fields.SelectField')["extends"]('Luca.core.Field')["with"]({
     events: {
       "change select": "change_handler"
     },
@@ -2292,7 +3135,7 @@
 }).call(this);
 (function() {
 
-  _.component('Luca.fields.TextAreaField')["extends"]('Luca.core.Field')["with"]({
+  _.def('Luca.fields.TextAreaField')["extends"]('Luca.core.Field')["with"]({
     events: {
       "keydown input": "keydown_handler",
       "blur input": "blur_handler",
@@ -2336,18 +3179,23 @@
 
 }).call(this);
 (function() {
+  var change_handler;
+
+  change_handler = function(e) {
+    return this.trigger("on:change", this, e);
+  };
 
-  _.component('Luca.fields.TextField')["extends"]('Luca.core.Field')["with"]({
+  _.def('Luca.fields.TextField')["extends"]('Luca.core.Field')["with"]({
     events: {
-      "keydown input": "keydown_handler",
       "blur input": "blur_handler",
       "focus input": "focus_handler",
       "change input": "change_handler"
     },
     template: 'fields/text_field',
+    autoBindEventHandlers: true,
+    send_blanks: true,
     initialize: function(options) {
       this.options = options != null ? options : {};
-      _.bindAll(this, "keydown_handler", "blur_handler", "focus_handler");
       Luca.core.Field.prototype.initialize.apply(this, arguments);
       this.input_id || (this.input_id = _.uniqueId('field'));
       this.input_name || (this.input_name = this.name);
@@ -2359,12 +3207,12 @@
       }
       if (this.append) {
         this.$el.addClass('input-append');
-        return this.addOn = this.append;
+        this.addOn = this.append;
+      }
+      if (this.enableKeyEvents) {
+        return this.registerEvent("keydown input", "keydown_handler");
       }
     },
-    keydown_handler: _.throttle((function(e) {
-      return this.change_handler.apply(this, arguments);
-    }), 300),
     blur_handler: function(e) {
       var me, my;
       return me = my = $(e.currentTarget);
@@ -2373,27 +3221,40 @@
       var me, my;
       return me = my = $(e.currentTarget);
     },
-    change_handler: function(e) {
-      return this.trigger("on:change", this, e);
-    }
+    change_handler: change_handler,
+    keydown_handler: _.throttle((function(e) {
+      return change_handler.apply(this, arguments);
+    }), 300)
   });
 
 }).call(this);
 (function() {
 
-  _.component('Luca.fields.TypeAheadField')["extends"]('Luca.fields.TextField')["with"]({
+  _.def('Luca.fields.TypeAheadField')["extends"]('Luca.fields.TextField')["with"]({
     className: 'luca-ui-field',
-    afterInitialize: function() {
-      this.input_id || (this.input_id = _.uniqueId('field'));
-      this.input_name || (this.input_name = this.name);
-      return this.label || (this.label = this.name);
+    getSource: function() {
+      return this.source || [];
+    },
+    matcher: function(item) {
+      return true;
+    },
+    beforeRender: function() {
+      this._super("beforeRender", this, arguments);
+      return this.$('input').attr('data-provide', 'typeahead');
+    },
+    afterRender: function() {
+      this._super("afterRender", this, arguments);
+      return this.$('input').typeahead({
+        matcher: this.matcher,
+        source: this.getSource()
+      });
     }
   });
 
 }).call(this);
 (function() {
 
-  _.component('Luca.components.FormButtonToolbar')["extends"]('Luca.components.Toolbar')["with"]({
+  _.def('Luca.components.FormButtonToolbar')["extends"]('Luca.components.Toolbar')["with"]({
     className: 'luca-ui-form-toolbar form-actions',
     position: 'bottom',
     includeReset: false,
@@ -2423,7 +3284,7 @@
 }).call(this);
 (function() {
 
-  _.component("Luca.components.FormView")["extends"]('Luca.core.Container')["with"]({
+  _.def("Luca.components.FormView")["extends"]('Luca.core.Container')["with"]({
     tagName: 'form',
     className: 'luca-ui-form-view',
     hooks: ["before:submit", "before:reset", "before:load", "before:load:new", "before:load:existing", "after:submit", "after:reset", "after:load", "after:load:new", "after:load:existing", "after:submit:success", "after:submit:fatal_error", "after:submit:error"],
@@ -2432,54 +3293,51 @@
       "click .reset-button": "resetHandler"
     },
     toolbar: true,
+    legend: "",
+    bodyClassName: "form-view-body",
+    bodyTemplate: ["components/form_view"],
     initialize: function(options) {
       this.options = options != null ? options : {};
+      if (this.loadMask == null) this.loadMask = Luca.enableBootstrap;
       Luca.core.Container.prototype.initialize.apply(this, arguments);
-      _.bindAll(this, "submitHandler", "resetHandler", "renderToolbars");
+      _.bindAll(this, "submitHandler", "resetHandler", "renderToolbars", "applyLoadMask");
       this.state || (this.state = new Backbone.Model);
       this.setupHooks(this.hooks);
-      this.legend || (this.legend = "");
-      this.configureToolbars();
-      return this.applyStyles();
-    },
-    addBootstrapFormControls: function() {
-      var _this = this;
-      return this.bind("after:render", function() {
-        var el;
-        el = _this.$('.toolbar-container.bottom');
-        el.addClass('form-controls');
-        return el.html(_this.formControlsTemplate || Luca.templates["components/bootstrap_form_controls"](_this));
-      });
+      this.applyStyleClasses();
+      if (this.toolbar === true && !((this.bottomToolbar != null) || (this.topToolbar != null))) {
+        return this.bottomToolbar = {
+          buttons: [
+            {
+              icon: "remove-sign",
+              label: "Reset",
+              eventId: "click:reset",
+              className: "reset-button",
+              align: 'right'
+            }, {
+              icon: "ok-sign",
+              white: true,
+              label: "Save Changes",
+              eventId: "click:submit",
+              color: "success",
+              className: 'submit-button',
+              align: 'right'
+            }
+          ]
+        };
+      }
     },
-    applyStyles: function() {
-      if (Luca.enableBootstrap) this.applyBootstrapStyles();
+    applyStyleClasses: function() {
+      if (Luca.enableBootstrap) this.applyBootstrapStyleClasses();
       if (this.labelAlign) this.$el.addClass("label-align-" + this.labelAlign);
       if (this.fieldLayoutClass) return this.$el.addClass(this.fieldLayoutClass);
     },
-    applyBootstrapStyles: function() {
+    applyBootstrapStyleClasses: function() {
       if (this.labelAlign === "left") this.inlineForm = true;
       if (this.well) this.$el.addClass('well');
       if (this.searchForm) this.$el.addClass('form-search');
       if (this.horizontalForm) this.$el.addClass('form-horizontal');
       if (this.inlineForm) return this.$el.addClass('form-inline');
     },
-    configureToolbars: function() {
-      if (Luca.enableBootstrap && this.toolbar === true) {
-        return this.addBootstrapFormControls();
-      }
-      if (this.toolbar === true) {
-        this.toolbars = [
-          {
-            ctype: 'form_button_toolbar',
-            includeReset: true,
-            position: 'bottom'
-          }
-        ];
-      }
-      if (this.toolbars && this.toolbars.length) {
-        return this.bind("after:render", _.once(this.renderToolbars));
-      }
-    },
     resetHandler: function(e) {
       var me, my;
       me = my = $(e.currentTarget);
@@ -2491,21 +3349,8 @@
       var me, my;
       me = my = $(e.currentTarget);
       this.trigger("before:submit", this);
-      return this.submit();
-    },
-    beforeLayout: function() {
-      var _ref;
-      if ((_ref = Luca.core.Container.prototype.beforeLayout) != null) {
-        _ref.apply(this, arguments);
-      }
-      return this.$el.html(Luca.templates["components/form_view"](this));
-    },
-    prepareComponents: function() {
-      var container;
-      container = $('.form-view-body', this.el);
-      return _(this.components).each(function(component) {
-        return component.container = container;
-      });
+      if (this.loadMask === true) this.trigger("enable:loadmask", this);
+      if (this.hasModel()) return this.submit();
     },
     afterComponents: function() {
       var _ref,
@@ -2522,25 +3367,6 @@
         };
       });
     },
-    render: function() {
-      $(this.container).append(this.$el);
-      return this;
-    },
-    wrapper: function() {
-      return this.$el.parents('.luca-ui-form-view-wrapper');
-    },
-    toolbarContainers: function(position) {
-      if (position == null) position = "bottom";
-      return $(".toolbar-container." + position, this.wrapper()).first();
-    },
-    renderToolbars: function() {
-      var _this = this;
-      return _(this.toolbars).each(function(toolbar) {
-        toolbar.container = $("#" + _this.cid + "-" + toolbar.position + "-toolbar-container");
-        toolbar = Luca.util.lazyComponent(toolbar);
-        return toolbar.render();
-      });
-    },
     eachField: function(iterator) {
       return _(this.getFields()).map(iterator);
     },
@@ -2550,15 +3376,12 @@
     getFields: function(attr, value) {
       var fields;
       fields = this.select("isField", true, true);
-      if (fields.length > 0 && attr && value) {
-        fields = _(fields).select(function(field) {
-          var property, propvalue;
-          property = field[attr];
-          if (property == null) return false;
-          propvalue = _.isFunction(property) ? property() : property;
-          return value === propvalue;
-        });
-      }
+      if (!(attr && value)) return fields;
+      _(fields).select(function(field) {
+        var property;
+        property = field[attr];
+        return (property != null) && value === (_.isFunction(property) ? property() : property);
+      });
       return fields;
     },
     loadModel: function(current_model) {
@@ -2633,6 +3456,7 @@
     },
     submit_success_handler: function(model, response, xhr) {
       this.trigger("after:submit", this, model, response);
+      if (this.loadMask === true) this.trigger("disable:loadmask", this);
       if (response && (response != null ? response.success : void 0) === true) {
         return this.trigger("after:submit:success", this, model, response);
       } else {
@@ -2653,6 +3477,9 @@
       if (!save) return;
       return this.current_model.save(this.current_model.toJSON(), saveOptions);
     },
+    hasModel: function() {
+      return this.current_model != null;
+    },
     currentModel: function(options) {
       if (options == null) options = {};
       if (options === true || (options != null ? options.refresh : void 0) === true) {
@@ -2673,7 +3500,8 @@
 }).call(this);
 (function() {
 
-  _.component('Luca.components.GridView').extend('Luca.View')["with"]({
+  _.def('Luca.components.GridView').extend('Luca.components.Panel')["with"]({
+    bodyTemplate: "components/grid_view",
     autoBindEventHandlers: true,
     events: {
       "dblclick table tbody tr": "double_click_handler",
@@ -2696,14 +3524,25 @@
       this.options = options != null ? options : {};
       _.extend(this, this.options);
       _.extend(this, Luca.modules.Deferrable);
-      Luca.View.prototype.initialize.apply(this, arguments);
-      this.configure_collection();
+      if (this.loadMask == null) this.loadMask = Luca.enableBootstrap;
+      if (this.loadMask === true) {
+        this.loadMaskEl || (this.loadMaskEl = ".luca-ui-g-view-body");
+      }
+      Luca.components.Panel.prototype.initialize.apply(this, arguments);
+      this.configure_collection(true);
+      this.collection.bind("before:fetch", function() {
+        console.log("Triggering Enable Load Mask");
+        if (_this.loadMask === true) return _this.trigger("enable:loadmask");
+      });
       this.collection.bind("reset", function(collection) {
         _this.refresh();
+        console.log("Triggering Disable LoadMask");
+        if (_this.loadMask === true) _this.trigger("disable:loadmask");
         return _this.trigger("after:collection:load", collection);
       });
       return this.collection.bind("change", function(model) {
         var cells, rowEl;
+        if (_this.rendered !== true) return;
         try {
           rowEl = _this.getRowEl(model.id || model.get('id') || model.cid);
           cells = _this.render_row(model, _this.collection.indexOf(model), {
@@ -2711,13 +3550,16 @@
           });
           return $(rowEl).html(cells);
         } catch (error) {
-          return console.log("Error in change handler for GridView.collection", error, _this);
+          return console.log("Error in change handler for GridView.collection", error, _this, model, rowEl, cells);
         }
       });
     },
     beforeRender: function() {
+      var _ref;
+      if ((_ref = Luca.components.Panel.prototype.beforeRender) != null) {
+        _ref.apply(this, arguments);
+      }
       this.trigger("before:grid:render", this);
-      this.$el.html(Luca.templates["components/grid_view"]());
       this.table = this.$('table.luca-ui-g-view');
       this.header = this.$("thead");
       this.body = this.$("tbody");
@@ -2727,9 +3569,17 @@
       if (this.scrollable) this.setDimensions();
       this.renderHeader();
       this.emptyMessage();
-      this.renderToolbars();
       return $(this.container).append(this.$el);
     },
+    afterRender: function() {
+      var _ref;
+      if ((_ref = Luca.components.Panel.prototype.afterRender) != null) {
+        _ref.apply(this, arguments);
+      }
+      this.rendered = true;
+      this.refresh();
+      return this.trigger("after:grid:render", this);
+    },
     applyCssClasses: function() {
       var _ref,
         _this = this;
@@ -2743,18 +3593,6 @@
         return _this.table.addClass("table-" + style);
       });
     },
-    toolbarContainers: function(position) {
-      if (position == null) position = "bottom";
-      return $(".toolbar-container." + position, this.el);
-    },
-    renderToolbars: function() {
-      var _this = this;
-      return _(this.toolbars).each(function(toolbar) {
-        toolbar = Luca.util.lazyComponent(toolbar);
-        toolbar.container = _this.toolbarContainers(toolbar.position);
-        return toolbar.render();
-      });
-    },
     setDimensions: function(offset) {
       var _this = this;
       this.height || (this.height = this.defaultHeight);
@@ -2804,10 +3642,6 @@
     lastColumn: function() {
       return this.columns[this.columns.length - 1];
     },
-    afterRender: function() {
-      this.refresh();
-      return this.trigger("after:grid:render", this);
-    },
     emptyMessage: function(text) {
       if (text == null) text = "";
       text || (text = this.emptyText);
@@ -2910,7 +3744,43 @@
 }).call(this);
 (function() {
 
-  _.component('Luca.components.RecordManager').extend('Luca.containers.CardView')["with"]({
+  _.def("Luca.components.LoadMask")["extends"]("Luca.View")["with"]({
+    className: "luca-ui-load-mask",
+    bodyTemplate: "components/load_mask"
+  });
+
+}).call(this);
+(function() {
+
+  _.def("Luca.components.NavBar")["extends"]("Luca.View")["with"]({
+    fixed: true,
+    position: 'top',
+    className: 'navbar',
+    initialize: function(options) {
+      this.options = options != null ? options : {};
+      return Luca.View.prototype.initialize.apply(this, arguments);
+    },
+    brand: "Luca.js",
+    bodyTemplate: 'nav_bar',
+    bodyClassName: 'luca-ui-navbar-body',
+    beforeRender: function() {
+      if (this.fixed) this.$el.addClass("navbar-fixed-" + this.position);
+      if (this.brand != null) {
+        return this.content().append("<a class='brand' href='#'>" + this.brand + "</a>");
+      }
+    },
+    render: function() {
+      return this;
+    },
+    content: function() {
+      return this.$('.container').eq(0);
+    }
+  });
+
+}).call(this);
+(function() {
+
+  _.def('Luca.components.RecordManager')["extends"]('Luca.containers.CardView')["with"]({
     events: {
       "click .record-manager-grid .edit-link": "edit_handler",
       "click .record-manager-filter .filter-button": "filter_handler",
@@ -3117,7 +3987,7 @@
 }).call(this);
 (function() {
 
-  Luca.Router = Backbone.Router.extend({
+  _.def("Luca.Router")["extends"]("Backbone.Router")["with"]({
     routes: {
       "": "default"
     },
@@ -3153,6 +4023,43 @@
 }).call(this);
 (function() {
 
+  _.def("Luca.components.ToolbarDialog")["extends"]("Luca.View")["with"]({
+    className: "luca-ui-toolbar-dialog span well",
+    styles: {
+      "position": "absolute",
+      "z-Index": "3000",
+      "float": "left"
+    },
+    initialize: function(options) {
+      this.options = options != null ? options : {};
+      return this._super("initialize", this, arguments);
+    },
+    createWrapper: function() {
+      return this.make("div", {
+        "class": "component-picker span4 well",
+        style: "position: absolute; z-index:12000"
+      });
+    },
+    show: function() {
+      return this.$el.parent().show();
+    },
+    hide: function() {
+      return this.$el.parent().hide();
+    },
+    toggle: function() {
+      return this.$el.parent().toggle();
+    }
+  });
+
+}).call(this);
+(function() {
+
+  _.extend(Luca, Luca.Events);
+
+  _.extend(Luca.View.prototype, Luca.Events);
+
+  _.extend(Luca.Collection.prototype, Luca.Events);
 
+  _.extend(Luca.Model.prototype, Luca.Events);
 
 }).call(this);