stormfront-rails 0.2.3 → 0.10.3

data/vendor/assets/javascripts/src/stormfront.js

@@ -1,5 +1,5 @@
 var stormfront = { };
-var Stormfront = { Mixin: { } };
+var Stormfront = { };
 
 Stormfront.VERSION = '1.0.0';
 
@@ -8,36 +8,49 @@ Stormfront.Class = function(options) {
         this.initialize.apply(this, arguments);
 };
 
-Stormfront.Class.extend = function(protoProps, staticProps) {
-    var parent = this;
-    var child;
-
-    if (protoProps && _.has(protoProps, 'constructor'))
-        child = protoProps.constructor;
-    else
-        child = function(){ return parent.apply(this, arguments); };
-
-    _.extend(child, parent, staticProps);
-
-    var Surrogate = function(){ this.constructor = child; };
-    Surrogate.prototype = parent.prototype;
-    child.prototype = new Surrogate;
-
-    if (protoProps) _.extend(child.prototype, protoProps);
-    child.__super__ = parent.prototype;
+Stormfront.Class.extend = function(protoProps) {
+    function copyConstructor(base){
+        return function(){ return base.apply(this, arguments); };
+    }
+    function copyBaseProperties(child, parent){
+        _.extend(child, parent);
+    }
+    function carryPrototypeChain(child, parent){
+        var Surrogate = function(){ this.constructor = child; };
+        Surrogate.prototype = parent.prototype;
+        child.prototype = new Surrogate;
+    }
+    function copyNewProperties(protoProps){
+        _.extend(child.prototype, protoProps);
+    }
+    function enableAccessToBaseClass(){
+        child.__super__ = parent.prototype;
+    }
 
+    var parent = this;
+    var child = copyConstructor(parent);
+    copyBaseProperties(child, parent);
+    carryPrototypeChain(child, parent);
+    copyNewProperties(protoProps);
+    enableAccessToBaseClass(child, parent);
     return child;
 };
 
-
 stormfront.arguments = function(args){
     return new Stormfront.Arguments(args);
 };
 
 Stormfront.Arguments = Stormfront.Class.extend({
     initialize: function(array){
+        function copy(array) {
+            var copy = new Array(array.length);
+            for(var i = 0; i < array.length; ++i) {
+                copy[i] = array[i];
+            }
+            return copy;
+        }
         if (array)
-            this.array = [].slice.call(array);
+            this.array = copy(array);
         else
             this.array = [];
     },
@@ -57,11 +70,14 @@ Stormfront.Arguments = Stormfront.Class.extend({
         return this.array;
     }
 });
-
 stormfront.hash = function(hash){
     return new Stormfront.Hash(hash);
 };
 
+Stormfront.Unchanged = {
+    unchanged: 'true'
+};
+
 Stormfront.Hash = Stormfront.Class.extend({
     initialize: function(hash){
         this.hash = hash;
@@ -79,9 +95,68 @@ Stormfront.Hash = Stormfront.Class.extend({
     },
     subtract: function(values){
         return _.omit(this.hash, _.keys(values));
+    },
+    diff: function(newProperties){
+        function getProperties(oldProperties, newProperties){
+            var candidates = _.keys(newProperties).concat(_.keys(oldProperties));
+            var position = candidates.length;
+            var keys = [];
+
+            while (position--) {
+                var candidate = candidates[position];
+                if (keys.indexOf(candidate) === -1)
+                    keys.unshift(candidate);
+            }
+            return keys;
+        }
+        function evaluateArray(previous, current) {
+            if (current.length !== previous.length)
+                return current;
+
+            var difference = _.any(previous, function(value, index){
+                return evaluateObject(value, current[index]);
+            });
+            return difference ? current : Stormfront.Unchanged;
+        }
+
+        function evaluateValue(previous, current){
+            if (_.isArray(current))
+                return evaluateArray(previous, current);
+            else if (_.isObject(current))
+                return evaluateObject(previous, current);
+            else if (previous !== current)
+                return current;
+            return Stormfront.Unchanged;
+        }
+
+        function evaluateObject(oldProperties, newProperties) {
+            var changes = { };
+            function addEntry(property, value) {
+                if (value)
+                    changes[property] = value;
+            }
+
+            var properties = getProperties(oldProperties, newProperties);
+            _.each(properties, function(property){
+                var previous = oldProperties[property];
+                var current = newProperties[property];
+                if (previous && current)
+                    addEntry(property, evaluateValue(previous, current));
+                else if (previous)
+                    addEntry(property, previous);
+                else
+                    addEntry(property, current);
+            });
+            return _.isEmpty(changes) ? Stormfront.Unchanged : changes;
+        }
+        if (!this.hash)
+            return newProperties;
+        if (!newProperties)
+            return this.hash;
+
+        return evaluateObject(this.hash, newProperties);
     }
 });
-
 stormfront.number = function(number){
     return new Stormfront.Number(number);
 };
@@ -97,7 +172,6 @@ Stormfront.Number = Stormfront.Class.extend({
         return this.number < value ? -1 : this.number > value ? 1 : 0;
     }
 });
-
 Stormfront.Response = Stormfront.Class.extend({
     initialize: function(xhr){
         this.xhr = xhr;
@@ -129,7 +203,6 @@ Stormfront.Response = Stormfront.Class.extend({
         }
     }
 });
-
 stormfront.string = function(text){
     return new Stormfront.String(text);
 };
@@ -138,23 +211,6 @@ Stormfront.String = Stormfront.Class.extend({
     initialize: function(text){
         this.text = text;
     },
-    title: function(){
-        var sentence = _.str.capitalize(_.str.camelize(this.text)).split(/(?=[A-Z\d])/);
-        var displaySentence = "";
-        function processCharacter(character, i){
-            function whenPreviousWordIsNotAnAcronym() {
-                return i > 0 && sentence[i - 1].length > 1;
-            }
-            function whenPreviousWordISAnAcronymAndCurrentWordIsNotAnAcronym() {
-                return i > 0 && sentence[i - 1].length == 1 && sentence[i].length > 1;
-            }
-            if (whenPreviousWordIsNotAnAcronym() || whenPreviousWordISAnAcronymAndCurrentWordIsNotAnAcronym())
-                displaySentence += " ";
-            displaySentence += character;
-        }
-        _.each(sentence, processCharacter);
-        return displaySentence;
-    },
     decimal: function(places, placeholder){
         placeholder = placeholder || '';
         places = places || 3;
@@ -164,17 +220,22 @@ Stormfront.String = Stormfront.Class.extend({
     scientific: function(){
         return this.text === null || $.trim(this.text) === '' ? '' : parseFloat(this.text).toExponential(3);
     },
-    decimal_format: function(){
-        return this.decimal(this.text);
-    },
-    scientific_notation: function(){
-        return this.scientific(this.text);
-    },
     firstWord: function(){
         return this.text ? this.text.split(' ')[0] : '';
+    },
+    title: function(){
+        return this.camelCase(' ', ' ');
+    },
+    camelCase: function(delimiter, alimiter){
+        delimiter = delimiter || ' ';
+        alimiter = alimiter || '';
+        function capitalize(word){
+            return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase();
+        }
+        var words = this.text.split(delimiter);
+        return _.map(words, capitalize).join(alimiter)
     }
 });
-
 stormfront.time = function(datetime){
     return new Stormfront.Time(datetime);
 };
@@ -205,201 +266,456 @@ Stormfront.Time = Stormfront.Class.extend({
 
 
 
+stormfront.type = function(name){
+    return (new Stormfront.Type(name)).get();
+};
+Stormfront.Type = Stormfront.Class.extend({
+    initialize: function (name) {
+        this.name = name;
+    },
+    get: function () {
+        var name = this.name.split('.');
+        return stormfront.hash(window).findNestedValue(name);
+    }
+});
 
-
-Stormfront.Chaperone = Stormfront.Class.extend({
-    initialize: function(){
-        this.children = {};
-        _.extend(this, Backbone.Events);
-        this.throttle('create',  'created',  Stormfront.Errors.INITIALIZING);
-        this.throttle('render',  'rendered', Stormfront.Errors.RENDERING);
-        this.throttle('attach', 'attached', Stormfront.Errors.ATTACHING);
-        this.wrap('add',     'added',    Stormfront.Errors.ADDING);
-        this.wrap('remove',  'removed',  Stormfront.Errors.CLOSING);
-    },
-
-    create: function(childClass, options, context){
-        return new window[childClass](options.call(context));
-    },
-    find: function(identity){
-        return this.children[identity];
-    },
-    add: function(child){
-        var identity = child.getIdentity();
-        this.remove(this.find(identity));
-        this.children[identity] = child;
-        return child;
-    },
-    remove: function(child){
-        if (child)
-            this.children = _.omit(this.children, child.getIdentity());
-        return child;
-    },
-    render: function(child){
-        return child.render();
-    },
-    attach: function(child, location, method){
-        if (location.size() === 0)
-            throw Stormfront.Errors.NO_LOCATION(child);
-        else if (location.size() > 1)
-            throw Stormfront.Errors.MULTIPLE_LOCATIONS(child);
-
-        location[method](child.$el);
-        return child;
-    },
-
-    wrap: function(field, event, error){
-        var implementation = this[field];
-        this[field] = function(){
-            try {
-                var result = implementation.apply(this, arguments);
-                result && this.trigger(event, result);
-            } catch (e) {
-                this.trigger('error', error(arguments[0].toString()), e);
-            }
+Stormfront.Patterns = {
+    Dispatcher: function (subject, dispatcher) {
+        if (dispatcher) {
+            subject.dispatch = function (event) {
+                dispatcher.dispatch(event);
+            };
+            subject.getDispatcher = function(){
+                return dispatcher;
+            };
         }
     },
-    throttle: function(field, event, error){
-        this.wrap(field, event, error);
-        var implementation = this[field];
-        this[field] = function(){
-            var self = this;
-            var capturedArguments = arguments;
-            function func(){
-                implementation.apply(self, capturedArguments);
+    Events: function (subject) {
+        if (!subject.listenTo)
+            $.extend(subject, Backbone.Events);
+        $.extend(subject, {
+            forward: function (other, type) {
+                function propagate(){
+                    subject.trigger.apply(subject, arguments);
+                }
+                subject.listenTo(other, type || 'all', propagate);
             }
-            setTimeout(func, 5);
-        }
+        })
+    }
+};
+Stormfront.Errors = {
+    FEEDBACK: 'An unexpected error was encountered'
+};
+
+Stormfront.Dispatches = {
+    RECEIVED: 'Dispatcher:Action:Received',
+    QUEUED: 'Dispatcher:Action:Queued',
+    READY: 'Dispatcher:Action:Ready',
+    EXECUTING: 'Store:Action:Executing',
+    EXECUTED: 'Store:Action:Executed',
+    MISSING: 'Store:Action:Missing',
+    ERROR: 'Store:Action:Error',
+    CHANGE: 'Store:Changed',
+    UNCHANGED: 'Store:Unchanged',
+    NO_RETURN: 'Store:NoReturnValue'
+};
+
+Stormfront.NO_CHANGE = 'Store:Nothing_Changed';
+Stormfront.Reducer = Stormfront.Class.extend({
+    type: 'NOT:IMPLEMENTED',
+    dependencies: [],
+    initialize: function(dispatcher){
+        Stormfront.Patterns.Dispatcher(this, dispatcher);
     },
+    execute: function(store, event){
+        throw 'The reducer does not implement a function body'
+    }
+});
+Stormfront.Ajax = {
+    START: 'AJAX:START',
+    SUCCESS: 'AJAX:SUCCESS',
+    ERROR: 'AJAX:ERROR',
+    ABORTED: 'AJAX:ABORTED',
+    PENDING: 'AJAX:PENDING',
+    Support: {
+        generateKey: function (event) {
+            return event.type;
+        },
+        createGenericRequest: function (type) {
+            return function (info) {
+                return _.extend(info, {type: type});
+            }
+        },
+        createGenericReducer: function (type) {
+            return Stormfront.Ajax.RequestReducer.extend({
+                type: type,
+                execute: function (store, event) {
+                    try {
+                        event.callbacks[type].call(event.callbacks.context, store, event);
+                    } catch (e) {
+                        console.warn('Ajax Handler encountered an error', e);
+                    }
+                    return this.updateEntry(store, event, type);
+                }
+            });
+        }
+    }
+};
 
-    close: function(){
-        _.each(this.children, this.remove, this);
+Stormfront.Ajax.RequestReducer = Stormfront.Reducer.extend({
+    getKey: function(event){
+        return Stormfront.Ajax.Support.generateKey(event);
+    },
+    getEntries: function(store){
+        return store.ajax || (store.ajax = { });
+    },
+    getEntry: function(store, event){
+        var key = this.getKey(event);
+        var entries = this.getEntries(store);
+        return entries[key] || (entries[key] = { });
+    },
+    updateEntry: function(store, event, state){
+        var ajax = this.getEntry(store, event);
+        ajax.state = state;
+        ajax.request = event.xhr;
+        ajax.exception = event.exception;
+        return store;
+    },
+    dropEntry: function(store, event){
+        var key = this.getKey(event);
+        var entries = this.getEntries(store);
+        delete entries[key];
     }
 });
 
-Stormfront.Template = Stormfront.Class.extend({
-    initialize: function(view){
-        this.view = view;
-    },
-    render: function(){
-        function renderTemplate(view){
-            function getTemplate(view){
-                var selector = view.getIdentity();
-                return $('#' + selector + '_template');
-            }
-            function compileTemplate(selection){
-                return Handlebars.compile(selection.html());
-            }
-            function expandTemplate(template){
-                return template(view.getViewModel());
-            }
-            return expandTemplate(compileTemplate(getTemplate(view)))
-        }
-        function findError(view){
-            function getTemplate(view){
-                if (!view.className)
-                    throw Stormfront.Errors.NO_SELECTOR();
-                var selector = view.getIdentity();
-                return $('#' + selector + '_template');
-            }
-            function compileTemplate(template){
-                if (template.size() === 1)
-                    return template;
-                if (template.size() === 0)
-                    throw Stormfront.Errors.NO_TEMPLATE(view.getIdentity());
+Stormfront.Ajax.Request = Stormfront.Ajax.RequestReducer.extend({
+    type: 'NOT:IMPLEMENTED',
+    execute: function(store, event){
+        event.callbacks = { };
+        event.callbacks.context = this;
+        event.callbacks[Stormfront.Ajax.START] = this.onStart;
+        event.callbacks[Stormfront.Ajax.SUCCESS] = this.onSuccess;
+        event.callbacks[Stormfront.Ajax.ERROR] = this.onError;
 
-                return Handlebars.compile(template.html());
-            }
-            function expandTemplate(template, vm){
-                try {
-                    return template(vm);
-                }
-                catch(e) {
-                    throw Stormfront.Errors.INCOMPATIBLE_TEMPLATE(view.getIdentity());
-                }
-            }
-            function getViewModel(view){
-                try {
-                    return view.getViewModel();
-                }
-                catch (e){
-                    throw Stormfront.Errors.VIEW_MODEL(view.getIdentity());
-                }
-            }
-            try {
-                return expandTemplate(compileTemplate(getTemplate(view)), getViewModel(view));
-            }
-            catch(e) {
-                return e;
-            }
+        var self = this;
+        function onStart(xhr, settings){
+            _.extend(event, { xhr: xhr });
+            self.dispatch(new Stormfront.Ajax.StartRequest(event));
         }
-        try {
-            return renderTemplate(this.view);
+        function onSuccess(data, status, xhr){
+            _.extend(event, {
+                data: data,
+                status: status,
+                xhr: xhr
+            });
+            self.dispatch(new Stormfront.Ajax.SuccessRequest(event));
         }
-        catch(e) {
-            throw new TemplateError(findError(this.view), e.message);
+        function onError(xhr, status, exception){
+            _.extend(event, {
+                status: status,
+                xhr: xhr,
+                exception: exception
+            });
+            self.dispatch(new Stormfront.Ajax.ErrorRequest(event));
         }
-    }
+        var request = this.getParameters(store, event);
+        var settings = _.extend(request, {
+            beforeSend: onStart,
+            error: onError,
+            success: onSuccess
+        });
+        this.updateEntry(store, event, Stormfront.Ajax.PENDING);
+        this.send(settings);
+        return store;
+    },
+    send: function(settings){
+        // TODO: Remaining Concerns AJAX:
+        // TODO:    Aborting similar request
+        // TODO:    Avoiding equal request
+        $.ajax(settings);
+    },
+    getParameters: function(store, event){
+        return { url: '', method: 'get', data: {} }
+    },
+    onStart: function(store, event) { },
+    onSuccess: function(store, event) { },
+    onError: function(store, event) { }
 });
 
-function TemplateError(message, innerException) {
-    var error = Error.call(this, message);
-    this.name = 'TemplateError';
-    this.message = error.message;
-    this.stack = error.stack;
-    this.innerException = innerException;
-}
+Stormfront.Ajax.StartRequest = Stormfront.Ajax.Support.createGenericRequest(Stormfront.Ajax.START);
+Stormfront.Ajax.Start = Stormfront.Ajax.Support.createGenericReducer(Stormfront.Ajax.START);
 
-TemplateError.prototype = Object.create(Error.prototype);
-TemplateError.prototype.constructor = TemplateError;
+Stormfront.Ajax.SuccessRequest = Stormfront.Ajax.Support.createGenericRequest(Stormfront.Ajax.SUCCESS);
+Stormfront.Ajax.Success = Stormfront.Ajax.Support.createGenericReducer(Stormfront.Ajax.SUCCESS);
 
+Stormfront.Ajax.ErrorRequest = Stormfront.Ajax.Support.createGenericRequest(Stormfront.Ajax.ERROR);
+Stormfront.Ajax.Error = Stormfront.Ajax.Support.createGenericReducer(Stormfront.Ajax.ERROR);
 
-Stormfront.Mixin.Dispatch = {
-    hasEvents: function(){
-        return this.trigger;
-    },
-    addEvents: function(){
+Stormfront.Ajax.Reducers = [
+    Stormfront.Ajax.Start,
+    Stormfront.Ajax.Success,
+    Stormfront.Ajax.Error
+];
+Stormfront.Store = Stormfront.Class.extend({
+    initialize: function (options) {
         $.extend(this, Backbone.Events);
+
+        this._state = new Stormfront.Store.State();
+        this._reducers = new Stormfront.Store.Reducers(options);
     },
-    streamlineDispatch: function(event){
-        this.dispatch = function(){
-            this.trigger('dispatch', event)
-        };
-        this.dispatch(event);
+    executeAction: function (action) {
+        var reducer = this._reducers.find(action);
+        if (reducer)
+            this.executeDispatch(action, reducer);
+        else
+            this.trigger(Stormfront.Dispatches.MISSING, action, reducer);
+    },
+    executeDispatch: function (action, reducer) {
+        try {
+            this.executeExternalCode(action, reducer);
+        } catch (e) {
+            this.trigger(Stormfront.Dispatches.ERROR, action, reducer);
+        }
     },
-    dispatch: function(event){
-        if (!this.hasEvents())
-            this.addEvents();
-        this.streamlineDispatch(event);
+    executeExternalCode: function(action, reducer){
+        var current = this._state.getState();
+        this.trigger(Stormfront.Dispatches.EXECUTING, action, reducer, current);
+
+        var updated = reducer.execute(current, action);
+        this.trigger(Stormfront.Dispatches.EXECUTED, action, reducer, updated);
+
+        if (updated === Stormfront.NO_CHANGE)
+            this.trigger(Stormfront.Dispatches.UNCHANGED, action, reducer);
+        if (this._state.setState(updated))
+            this.trigger(Stormfront.Dispatches.CHANGE, action, reducer, updated, current);
+        else
+            this.trigger(Stormfront.Dispatches.NO_RETURN, action, reducer);
     }
-};
+});
 
-Stormfront.Mixin.Other = {
-    unauthorized: function(entity){
-        function propagateUnauthorized(source, response, options){
-            if (response.status === 403)
-                this.trigger('unauthorized', source, response, options);
-        }
-        entity.on('error', propagateUnauthorized);
+Stormfront.Store.State = Stormfront.Class.extend({
+    setState: function (state) {
+        return state ? this.updateState(state) : false;
+    },
+    updateState: function (state) {
+        this._state = this.copyState(state);
+        return true;
+    },
+    getState: function () {
+        return this.copyState(this._state);
     },
-    invalid: function(entity){
-        function propagateInvalid(source, response, options){
-            if (response.status === 400)
-                this.trigger('invalid', source, response, options);
+    copyState: function (state) {
+        return $.extend(true, {}, state);
+    }
+});
+
+Stormfront.Store.Reducers = Stormfront.Class.extend({
+    reducers: { },
+    initialize: function (options) {
+        function createReducer(type) {
+            var reducer = new type(options.dispatcher);
+            this.reducers[reducer.type] = reducer;
+            _.each(reducer.dependencies, createReducer, this);
         }
-        entity.on('error', propagateInvalid);
+
+        _.each(options.reducers, createReducer, this);
+        _.each(Stormfront.Ajax.Reducers, createReducer, this);
+        _.each(Stormfront.Store.Operations, createReducer, this);
     },
-    empty: function(collection){
-        function determineEmpty(collection, response, options){
-            if (collection.isEmpty())
-                this.trigger('empty', collection, response, options);
+    find: function(event){
+        return this.reducers[event.type];
+    }
+});
+
+SetStateAction = function(state){
+    return {
+        type: 'Stormfront:Store:State:Set',
+        state: state
+    }
+};
+
+SetState = Stormfront.Reducer.extend({
+    type: 'Stormfront:Store:State:Set',
+    execute: function (store, action) {
+        return action.state;
+    }
+});
+
+Stormfront.Store.Operations = [SetState];
+Stormfront.Dispatcher = Stormfront.Class.extend({
+    initialize: function () {
+        $.extend(this, Backbone.Events);
+        var queue = [];
+        var root = this;
+
+        this.dispatch = function (event) {
+            this.trigger(Stormfront.Dispatches.RECEIVED, event);
+            if (_.isEmpty(queue))
+                process(event);
             else
-                this.trigger('populated', collection, response, options);
+                enqueue(event);
+        };
+
+        function process(event) {
+            enqueue(event);
+            processQueue();
+        }
+
+        function enqueue(event) {
+            queue.push(event);
+            root.trigger(Stormfront.Dispatches.QUEUED, event);
+        }
+
+
+        function processQueue() {
+            if (_.isEmpty(queue))
+                return;
+            processNext();
+            processQueue();
+        }
+
+        function processNext() {
+            root.trigger(Stormfront.Dispatches.READY, queue[0]);
+            queue.shift();
+        }
+    }
+});
+Stormfront.Container = Stormfront.Class.extend({
+    page: null,
+    initial: null,
+    reducers: [],
+    initialize: function(location) {
+        Stormfront.Patterns.Events(this);
+        var dispatcher = new Stormfront.Dispatcher();
+        var page = new this.page(dispatcher);
+        var store = new Stormfront.Store({
+            reducers: this.reducers,
+            dispatcher: dispatcher
+        });
+
+        function executeAction(action){
+            store.executeAction(action);
+        }
+        function updateView(action, reducer, newProperties, oldProperties){
+            page.updateProperties(newProperties, oldProperties, action, reducer);
         }
-        collection.on('sync', determineEmpty);
+        this.listenTo(dispatcher, Stormfront.Dispatches.READY, executeAction);
+        this.listenTo(store, Stormfront.Dispatches.CHANGE, updateView);
+
+        Stormfront.Patterns.Dispatcher(this, dispatcher);
+        Stormfront.Patterns.Events(this);
+
+        this.forward(dispatcher);
+        this.forward(store);
+
+        dispatcher.dispatch(SetStateAction(this.initial));
+
+        location.html(page.render().$el);
+
+        page.transition('attached');
     }
+});
+
+var homefront = { };
+var Homefront = {
+    Patterns: {}
 };
 
+Homefront.Template = Stormfront.Class.extend({
+    initialize: function (selector) {
+        this.selector = selector;
+    },
+    render: function (vm) {
+        function getTemplate(selector) {
+            return $('#' + selector + '_template');
+        }
+        function compileTemplate(selection) {
+            return Handlebars.compile(selection.html());
+        }
+        function expandTemplate(template, vm) {
+            return template(vm);
+        }
+
+        var template = getTemplate(this.selector);
+        var compiled = compileTemplate(template);
+        return expandTemplate(compiled, vm)
+    }
+});
+
+Homefront.Entity = Stormfront.Class.extend({
+    defaults: null,
+    initialize: function (properties) {
+        this.properties = _.extend(this, this.defaults, properties);
+    },
+    state: function(){
+        return this.getEntity().state;
+    },
+    getEntity: function(){
+        return this.properties;
+    },
+    isBusy: function(){
+        var state = this.state();
+        return state === Stormfront.Ajax.START ||
+            state === Stormfront.Ajax.PENDING;
+    }
+});
+Homefront.Collection = Homefront.Entity.extend({
+    entity: null,
+    state: '',
+    initialize: function (items, state) {
+        state = state || this.state;
+        var entity = this.entity;
+        this.properties = {
+            state: state,
+            data: _.map(items, function (option) {
+                return new entity(option);
+            })
+        };
+        this.state = state;
+    },
+    list: function () {
+        return this.getEntity().data;
+    },
+    isEmpty: function () {
+        return this.list().length === 0;
+    },
+    find: function (parameters) {
+        return _.findWhere(this.list(), parameters);
+    },
+    groupBy: function (field) {
+        return _.groupBy(this.list(), field);
+    },
+    pluck: function (field) {
+        return _.pluck(this.list(), field);
+    },
+    first: function () {
+        return this.list()[0];
+    },
+    onlyOne: function () {
+        return this.list().length === 1;
+    }
+});
+Homefront.Request = Stormfront.Ajax.Request.extend({
+    getEntity: function (store, action) {
+        return {};
+    },
+    onStart: function (store, action) {
+        this.getEntity(store, action).state = Stormfront.Ajax.START;
+        return store;
+    },
+    onSuccess: function (store, action) {
+        var entity = this.getEntity(store, action);
+        entity.state = Stormfront.Ajax.SUCCESS;
+        entity.data = action.data;
+        return store;
+    },
+    onError: function (store, action) {
+        var entity = this.getEntity(store);
+        entity.state = Stormfront.Ajax.ERROR;
+        entity.error = action.error;
+        return store;
+    }
+});
 
 Keys = {
     Enter: 13,
@@ -453,7 +769,6 @@ KeyboardEvents = Stormfront.Class.extend({
         this.off('all');
     }
 });
-
 MouseEvents = Stormfront.Class.extend({
     initialize: function(options){
         options = _.extend({delay: 175}, options);
@@ -600,123 +915,7 @@ MouseEvents = Stormfront.Class.extend({
         this.$el.global && this.$el.global.off('.me');
     }
 });
-
-
-Stormfront.ViewBase = Backbone.View.extend({
-    initialize: function(){
-        this.errors = [];
-    },
-    render: function(){
-        try {
-            this.$el.html(new Stormfront.Template(this).render());
-        }
-        catch(e) {
-            this.handleException(e);
-        }
-        return this;
-    },
-    getViewModel: function(){
-        return this.model ? this.model.toJSON ? this.model.toJSON() : this.model : {};
-    },
-    handleException: function(exception){
-        if (exception.innerException)
-            console.warn(exception.message, exception.innerException);
-        else
-            console.warn(exception.message);
-
-        this.handleError(exception.message);
-    },
-    handleError: function(message){
-        if (_.contains(this.errors, message))
-            return;
-        this.notifyUser(message);
-    },
-    notifyUser: function(message){
-        this.alert && this.alert.close();
-
-        this.errors.push(message);
-        this.alert = new Stormfront.Alert({
-            model: {
-                summary: Stormfront.Errors.FEEDBACK,
-                details: this.errors.join(', ')
-            }
-        });
-
-        this.listenTo(this.alert, 'closing', this.removeNotification);
-        this.$el.append(this.alert.render().$el);
-    },
-    removeNotification: function(){
-        this.errors = [];
-        this.stopListening(this.alert);
-    },
-    getIdentity: function(){
-        return stormfront.string(this.className).firstWord();
-    },
-    toString: function(){
-        return this.getIdentity();
-    },
-    close: function(){
-        this.remove();
-    }
-});
-
-Stormfront.View = Stormfront.ViewBase.extend({
-    initialize: function(options){
-        Stormfront.ViewBase.prototype.initialize.call(this, options);
-        this.when = this.when || { };
-        this.addPublisher(this);
-        this.addSubscriber(this.when);
-        this.transition.apply(this, stormfront.arguments(arguments).prepend('initializing').get());
-    },
-    render: function(){
-        Stormfront.ViewBase.prototype.render.call(this);
-        this.transition.apply(this, stormfront.arguments(arguments).prepend('rendering').get());
-        return this;
-    },
-    addPublisher: function(publisher, identity){
-        function notify(event){
-            var args = stormfront.arguments(arguments).skip(1).get();
-            function executeHandler(subscriber){
-                var handler = stormfront.hash(subscriber).findNestedValue(event.split(':'));
-                if (_.isFunction(handler))
-                    handler.apply(this, args);
-            }
-            _.each(this._subscribers, executeHandler, this);
-        }
-        function prepend(identity){
-            return function(event){
-                var newEvent = identity + ':' + event;
-                var args = stormfront.arguments(arguments).skip(1).prepend(newEvent).get();
-                notify.apply(this, args);
-            }
-        }
-        if (publisher === this)
-            this.listenTo(publisher, 'transition', notify);
-        else if (this.model && publisher === this.model)
-            this.listenTo(publisher, 'all', prepend('model'));
-        else if (this.collection && publisher === this.collection)
-            this.listenTo(publisher, 'all', prepend('collection'));
-        else if (publisher.className)
-            this.listenTo(publisher, 'transition', prepend(publisher.getIdentity()));
-        else
-            this.listenTo(publisher, 'all', prepend(identity));
-    },
-    addSubscriber: function(whenBlock){
-        this._subscribers = this._subscribers || [];
-        if (whenBlock)
-            this._subscribers.push(whenBlock);
-    },
-    transition: function(){
-        var args = stormfront.arguments(arguments).prepend('transition').get();
-        this.trigger.apply(this, args);
-    },
-    close: function(){
-        this.transition.apply(this, stormfront.arguments(arguments).prepend('closing').get());
-        Stormfront.ViewBase.prototype.close.call(this);
-    }
-});
-
-Stormfront.Errors = {
+Homefront.Errors = {
     FEEDBACK: 'An unexpected error was encountered',
     /** @return {string} */
     NO_SELECTOR: function() { return 'A template selector was not provided for your view' },
@@ -725,7 +924,7 @@ Stormfront.Errors = {
     /** @return {string} */
     INCOMPATIBLE_TEMPLATE: function(name) { return name +'\'s template and view model for your view are not compatible'; },
     /** @return {string} */
-    VIEW_MODEL: function(name) { return name + '\'s view model for the child generated an error'; },
+    VIEW_MODEL: function(name) { return name + '\'s context generated an error'; },
     /** @return {string} */
     NO_LOCATION: function(name) { return name + ' has no locations available to render'; },
     /** @return {string} */
@@ -742,181 +941,167 @@ Stormfront.Errors = {
     ADDING: function(name) { return name + ' failed to add'; }
 };
 
-//TODO: This whole class depends on Bootstrap
-Stormfront.Alert = Stormfront.View.extend({
-    className: 'alert',
-    when: {
-        rendering: function(){
-            this.$el.attr('role', 'alert').
-                addClass('alert-warning').
-                addClass('alert-dismissible');
-
-            var self = this;
-            this.$el.on('closed.bs.alert', function(){
-                self.trigger('closing');
-                self.close();
-            });
-        }
-    }
-});
-
-Stormfront.Container = Stormfront.View.extend({
-    reducers: [],
-    store: null,
-    root: null,
-    when: {
-        initializing: function(){
-            this._reducers = _.map(this.reducers, this.createReducer, this);
-        },
-        rendering: function(){
-            this.store = new this.store();
-            this.root = new this.root({model: this.store});
-            this.listenToDispatches(this.root);
-            this.$el.append(this.root.render().$el);
+Homefront.ViewBase = Backbone.View.extend({
+    location: null,
+    template: null,
+    render: function () {
+        try {
+            var context = this.getContext();
+            if (this.template)
+                this.$el.html(new Homefront.Template(this.template).render(context));
+        } catch (e) {
+            this.$el.html('An error was encountered');
+            console.error('Failed to render view');
+            console.error(e);
         }
+        return this;
     },
-    createReducer: function(interaction){
-        var useCase = new interaction();
-        this.listenToDispatches(useCase);
-        return this.addReducer(useCase);
-    },
-    addReducer: function(useCase){
-        this._reducers[useCase.type] = useCase;
-        return useCase;
-    },
-    executeUseCase: function(event){
-        this._reducers[event.type].execute(this.store, event);
+    getContext: function(){
+        return this.properties ? this.properties : { };
     },
-    listenToDispatches: function(publisher){
-        this.listenTo(publisher, 'dispatch', this.executeUseCase);
+    close: function () {
+        this.remove();
     }
 });
-
-Stormfront.Entity = Stormfront.View.extend({
-    exceptions: {
-        model: {
-            error: function(collection, xhr){
-                var response = new Stormfront.Response(xhr);
-                if (response.isActionable()) {
-                    this.handleException({error: response.getError()});
-                    response.markAsHandled();
+Homefront.View = Homefront.ViewBase.extend({
+    when: {},
+    initialize: function (dispatcher) {
+        _.each(this.when, this.addSubscriber, this);
+        this.addPublisher(this);
+        this.transition('before:initializing');
+        Stormfront.Patterns.Dispatcher(this, dispatcher);
+        this.transition('initializing');
+    },
+    render: function () {
+        this.transition('before:rendering');
+        Homefront.ViewBase.prototype.render.call(this);
+        this.transition('rendering');
+        return this;
+    },
+    renderAgain: function(){
+        this.render();
+        this.transition('attached');
+    },
+    addPublisher: function (publisher, identity) {
+        function notify(event) {
+            var args = stormfront.arguments(arguments).skip(1).get();
+            function executeHandler(subscriber) {
+                var handler = stormfront.hash(subscriber).findNestedValue(event.split(':'));
+                try {
+                    if (_.isFunction(handler))
+                        handler.apply(this, args);
+                } catch (e) {
+                    console.error('Error encountered within the When block: ('+event+')');
+                    console.error(e);
                 }
-            },
-            invalid: function(model, error){
-                this.handleException({error: error});
             }
+
+            _.each(this._subscribers, executeHandler, this);
         }
-    },
-    overlays: {
-        model: {
-            request: function(){
-                this.addOverlay();
-            },
-            sync: function(){
-                this.removeOverlay();
-            },
-            error: function(){
-                this.removeOverlay();
+
+        function prepend(identity) {
+            return function (event) {
+                var newEvent = identity + ':' + event;
+                var args = stormfront.arguments(arguments).skip(1).prepend(newEvent).get();
+                notify.apply(this, args);
             }
         }
+
+        if (publisher === this)
+            this.listenTo(publisher, 'transition', notify);
+        else
+            this.listenTo(publisher, 'transition', prepend(identity));
     },
-    change: {
-        model: {
-            change: function(){
-                this.render();
-            }
-        }
+    addSubscriber: function (whenBlock) {
+        this._subscribers = this._subscribers || [];
+        if (whenBlock && !_.isEmpty(whenBlock))
+            this._subscribers.push(whenBlock);
     },
-    initialize: function(){
-        this.addSubscriber(this.overlays);
-        this.addSubscriber(this.exceptions);
-        this.addSubscriber(this.change);
-        this.addPublisher(this.model);
-        Stormfront.View.prototype.initialize.apply(this, arguments);
+    transition: function () {
+        this.trigger.apply(this, stormfront.arguments(arguments).prepend('transition').get());
     },
-    addOverlay: function(){
-        this.removeOverlay();
-        this.overlay = new Stormfront.Overlay({selector: this.$el});
+    updateProperties: function (properties) {
+        var previous = this.properties;
+        this.properties = this.selectProperties(properties);
+        this.transition('updating', this.properties, previous);
     },
-    removeOverlay: function(){
-        if (this.overlay) {
-            this.overlay.close();
-            this.overlay = null;
-        }
+    selectProperties: function (properties) {
+        return properties;
+    },
+    close: function () {
+        this.transition('before:closing');
+        this.transition('closing');
+        Homefront.ViewBase.prototype.close.call(this);
     }
 });
 
-Stormfront.Layout = Stormfront.View.extend({
-    base: {
-        initializing: function(){
-            this._children = new Stormfront.Chaperone();
-            this.addPublisher(this._children, 'child');
-        },
-        rendering: function(){
-            _.each(this.children, this.composeChild, this);
-        },
-        closing: function(){
-            this._children.close();
-        },
-        child: {
-            created: function(child){
-                this._children.add(child);
-            },
-            added: function(child){
-                this.addPublisher(child);
-                this._children.render(child);
-            },
-            rendered: function(child){
-                var location = this.$('.' + child.getIdentity());
-                this._children.attach(child, location, 'replaceWith');
-            },
-            attached: function(child){
-                child.transition('rendered', child);
-            },
-            removed: function(child){
-                child.close();
-                this.stopListening(child);
-            },
-            error: function(error, innerException){
-                this.handleException(
-                    new LayoutError(error, innerException)
-                );
-            }
-        }
-    },
-    initialize: function(){
-        this.addSubscriber(this.base);
-        Stormfront.View.prototype.initialize.apply(this, arguments);
-    },
-    composeChild: function(childOptions, childClass){
-        this._children.create(childClass, childOptions, this);
-    },
-    findChild: function(identity){
-        return this._children.find(identity);
+Homefront.View.extend = function(protoProps){
+    function copyConstructor(base){
+        return function(){ return base.apply(this, arguments); };
     }
-});
+    function copyBaseProperties(child, parent){
+        _.extend(child, parent);
+    }
+    function carryPrototypeChain(child, parent){
+        var Surrogate = function(){ this.constructor = child; };
+        Surrogate.prototype = parent.prototype;
+        child.prototype = new Surrogate;
+    }
+    function copyNewProperties(child, protoProps){
+        var newWhen = protoProps['when'];
+        var oldWhen = child.prototype['when'];
 
-function LayoutError(message, innerException) {
-    var error = Error(message);
-    this.name = 'LayoutError';
-    this.message = error.message;
-    this.stack = error.stack;
-    this.innerException = innerException;
-}
+        _.extend(child.prototype, protoProps);
 
-LayoutError.prototype = Object.create(Error.prototype);
-LayoutError.prototype.constructor = LayoutError;
+        var when = [];
+        oldWhen && when.push(oldWhen);
+        newWhen && when.push(newWhen);
+        child.prototype['when'] =  _.flatten(when);
+    }
+    function enableAccessToBaseClass(){
+        child.__super__ = parent.prototype;
+    }
+
+    var parent = this;
+    var child = copyConstructor(parent);
+    copyBaseProperties(child, parent);
+    carryPrototypeChain(child, parent);
+    copyNewProperties(child, protoProps);
+    enableAccessToBaseClass(child, parent);
+    return child;
+};
 
-Stormfront.Overlay = Stormfront.Class.extend({
+Homefront.Alert = Homefront.View.extend({
+    className: 'alert',
+    events: {
+        'click .close': 'dismiss'
+    },
+    render: function(){
+        var errors = this.properties.errors || [];
+        var content = $('<div>');
+        var summary = $('<p>').addClass('summary').text(Stormfront.Errors.FEEDBACK);
+        var details = $('<p>').addClass('errors').text(errors.join(', '));
+        var close = $('<div>').addClass('close').attr('title', 'click to close');
+        content.append(summary).append(details).append(close);
+        this.$el.html(content);
+        this.transitionAs('rendering', arguments);
+        return this;
+    },
+    dismiss: function(){
+        this.trigger('dismissed');
+        this.close();
+    }
+});
+Homefront.Overlay = Stormfront.Class.extend({
     initialize: function(options){
         var selector = options.selector;
 
         if (!selector)
-            this.overlay = new Stormfront.FullScreenOverlay({model: options});
+            this.overlay = new Homefront.FullScreenOverlay({model: options});
         else if (options.saveRequest)
-            this.overlay = new Stormfront.InlineOverlay();
+            this.overlay = new Homefront.InlineOverlay();
         else
-            this.overlay = new Stormfront.AnonymousOverlay();
+            this.overlay = new Homefront.AnonymousOverlay();
 
         selector = selector ? selector : document.body;
         this.location = selector.size ? selector : $(selector);
@@ -936,7 +1121,7 @@ Stormfront.Overlay = Stormfront.Class.extend({
     }
 });
 
-Stormfront.OverlayBase = Stormfront.View.extend({
+Homefront.OverlayBase = Homefront.View.extend({
     className: 'overlay',
     activated: false,
     PAUSE_DURATION: 0,
@@ -1010,7 +1195,7 @@ Stormfront.OverlayBase = Stormfront.View.extend({
     }
 });
 
-Stormfront.FullScreenOverlay = Stormfront.OverlayBase.extend({
+Homefront.FullScreenOverlay = Homefront.OverlayBase.extend({
     MINIMUM_DURATION: 900,
     css: {
         overlay_background: {
@@ -1028,7 +1213,7 @@ Stormfront.FullScreenOverlay = Stormfront.OverlayBase.extend({
     }
 });
 
-Stormfront.AnonymousOverlay = Stormfront.OverlayBase.extend({
+Homefront.AnonymousOverlay = Homefront.OverlayBase.extend({
     PAUSE_DURATION: 200,
     MINIMUM_DURATION: 450,
     css: {
@@ -1047,7 +1232,7 @@ Stormfront.AnonymousOverlay = Stormfront.OverlayBase.extend({
     }
 });
 
-Stormfront.InlineOverlay = Stormfront.OverlayBase.extend({
+Homefront.InlineOverlay = Homefront.OverlayBase.extend({
     className: 'input_overlay',
     MINIMUM_DURATION: 1500,
     MAXIMUM_WIDTH: 1200,
@@ -1085,53 +1270,546 @@ Stormfront.InlineOverlay = Stormfront.OverlayBase.extend({
         }
     }
 });
+Homefront.Guidance = {
+    Generic: function (type, text) {
+        return Homefront.Text.extend({
+            tagName: type,
+            className: 'guidance',
+            text: text,
+            selectProperties: function () {
+                return {value: this.text}
+            }
+        });
+    },
+    Paragraph: function (text) {
+        return Homefront.Guidance.Generic('p', text);
+    },
+    Table: function (text) {
+        text = '<td colspan="99">' + text + '</td>';
+        return Homefront.Guidance.Generic('tr', text);
+    },
+    List: function (text) {
+        return Homefront.Guidance.Generic('li', text);
+    }
+};
 
-Stormfront.Reducer = Stormfront.Class.extend({
-    type: Stormfront.Errors.NOT_IMPLEMENTED,
-    initialize: function(){
-        _.extend(this, Stormfront.Mixin.Dispatch);
+Homefront.Chaperone = Homefront.View.extend({
+    method: 'append',
+    when: {
+        initializing: function () {
+            this._children = [];
+        },
+        updating: function (properties) {
+            this.updateChildren(this._children, properties);
+        },
+        attached: function(){
+            var previous = this._children;
+            this._children = [];
+            this.createChildren();
+            this.renderChildren(this._children);
+            this.attachChildren(this._children);
+            this.closeChildren(previous);
+        },
+        closing: function () {
+            this.closeChildren(this._children);
+            this._children = [];
+        },
+        chaperone: {
+            create: function (type, properties) {
+                type = _.isString(type) ? stormfront.type(type) : type;
+                properties = _.isObject(properties) ? properties : this.properties;
+                if (type) {
+                    var child = new type(this.getDispatcher());
+                    this.transition('chaperone:add', child, properties);
+                } else {
+                    console.error('Child type does not exist: ', type);
+                }
+            },
+            add: function (child, properties) {
+                this._children.push(child);
+                child.transition && this.addPublisher(child, 'child');
+                child.updateProperties(properties);
+            },
+            attach: function (child, location, method) {
+                child.transition('attaching', child);
+                location[method](child.$el);
+                child.transition('attached', child);
+            }
+        },
+        child: {
+            closing: function (child) {
+                this._children.splice(this._children.indexOf(child), 1);
+                this.stopListening(child);
+            }
+        }
+    },
+    createChild: function (type, properties) {
+        this.transition('chaperone:create', type, properties);
+    },
+    attachChild: function (child, location, method) {
+        this.transition('chaperone:attach', child, location, method || this.method);
+    },
+    createChildren: function () {
+
+    },
+    renderChildren: function (children) {
+        _.invoke(children, 'render');
+    },
+    attachChildren: function (children) {
+        function attachChild(child) {
+            if (child.location)
+                this.attachChild(child, this.$('.' + child.location));
+            else
+                this.attachChild(child, this.$el, 'append');
+        }
+        _.each(children, attachChild, this);
+    },
+    updateChildren: function (children, properties) {
+        _.invoke(children, 'updateProperties', properties);
+    },
+    closeChildren: function (children) {
+        function stop(child) {
+            this.stopListening(child);
+        }
+        //TODO: This bit is odd...
+        _.each(children, stop, this);
+        _.invoke(children, 'close');
+    },
+    at: function (index) {
+        return this._children[index];
+    }
+});
+Homefront.Layout = Homefront.Chaperone.extend({
+    method: 'replaceWith',
+    createChildren: function () {
+        _.each(this.children, this.createChild, this);
+    }
+});
+Homefront.Switch = Homefront.Chaperone.extend({
+    when: {
+        updating: function () {
+            if (this._state !== undefined && this.stateChanged())
+                this.renderAgain();
+        }
+    },
+    getCases: function () {
+        var feedback = '"getState" and "getCases" are not implemented';
+        var guidance = Homefront.Guidance.Paragraph(feedback);
+        return {
+            not_implemented: guidance
+        };
+    },
+    getState: function () {
+        return 'not_implemented'
+    },
+    stateChanged: function(){
+        return this._state !== this.getState(this.properties);
+    },
+    updateState: function () {
+        var oldState = this._state;
+        var newState = this.getState(this.properties);
+        this._state = newState;
+
+        if (oldState !== newState) {
+            oldState && this.transition('exiting:' + oldState, oldState);
+            this.transition('entering:' + newState, newState);
+        } else {
+            oldState && this.transition('staying:' + oldState, oldState);
+        }
+        return newState;
+    },
+    createChildren: function () {
+        var cases = this.getCases();
+        var state = this.updateState();
+        var candidate = cases[state];
+        candidate && this.createChild(candidate);
+    },
+    attachChildren: function (children) {
+        if (children.length === 1) {
+            var candidate = children[0];
+            candidate.$el.addClass(this.className);
+            candidate.$el.addClass(this._state);
+            this.attachChild(candidate, this.$el, 'replaceWith');
+            this.setElement(candidate.el);
+        }
+    }
+});
+
+Homefront.Expandable = Homefront.Switch.extend({
+    summary: null,
+    details: null,
+    expanded: false,
+    getCases: function () {
+        return {
+            summary: this.summary,
+            details: this.details
+        };
+    },
+    getState: function () {
+        return this.expanded ? 'details' : 'summary';
+    },
+    expand: function () {
+        this.expanded = true;
+        this.renderAgain();
+    },
+    collapse: function () {
+        this.expanded = false;
+        this.renderAgain();
+    }
+});
+Homefront.Enumerator = Homefront.Chaperone.extend({
+    item: null,
+    when: {
+        chaperone: {
+            add: function(child){
+                child.location = this.item.location;
+            }
+        }
+    },
+    createChildren: function () {
+        var items = this.selectItems(this.properties);
+        function createChild(item) {
+            this.createChild(this.item.view, item);
+        }
+        _.each(items, createChild, this);
+    },
+    updateChildren: function(children, properties){
+        var items = this.selectItems(properties);
+        function updateChild(child, index) {
+            var item = items[index];
+            child.updateProperties(item);
+        }
+        _.each(children, updateChild);
     },
-    execute: function(model, event){
-        throw Stormfront.Errors.UseCases.NOT_IMPLEMENTED;
+    composeChild: function(item){
+        return this.createChild(this.item, item);
+    },
+    selectItems: function (properties) {
+        return properties;
+    },
+    at: function (index) {
+        return this._children[index];
+    }
+});
+Homefront.List = Homefront.Switch.extend({
+    item: null,
+    when: {
+        initializing: function () {
+            this.enumerator = Homefront.Enumerator.extend({
+                tagName: this.tagName,
+                template: this.template,
+                className: this.className + ' stormfront.enumerator',
+                item: this.item,
+                getContext: this.getContext,
+                selectItems: this.selectItems
+            });
+        }
+    },
+    getCases: function () {
+        return {
+            empty: this.empty,
+            populated: this.enumerator
+        }
+    },
+    getState: function (properties) {
+        var items = this.selectItems(properties);
+        return items && items.length > 0 ? 'populated' : 'empty';
+    },
+    selectItems: function (properties) {
+        return properties.list ? properties.list() : properties;
+    }
+});
+//TODO: This should have a better name I suppose
+Homefront.ActiveList = Homefront.List.extend({
+    getCases: function () {
+        //lazy shortcut
+        this.populated = this.enumerator;
+        return this;
+    },
+    getState: function (properties) {
+        var state = properties.state;
+        if (state === Stormfront.Ajax.SUCCESS)
+        //TODO: Fetching inventory can return an error in the data
+            return this.selectItems(properties).length === 0 ? 'empty' : properties.data.error ? 'error' : 'populated';
+        else if (state === Stormfront.Ajax.START)
+            return 'requesting';
+        else if (state === Stormfront.Ajax.ERROR)
+            return 'error';
+        return state;
+    },
+    selectItems: function(properties) {
+        return properties.data
     }
 });
 
-Stormfront.Request = function(model, request, options){
-    var startTime = stormfront.time.now();
-    var overlay = new Stormfront.Overlay(options);
-    function tryRequest(){
-        return shouldWait() ? delayRequest() : sendRequest();
+//TODO: Got two of them now?
+Homefront.Series = Homefront.List.extend({
+    getState: function (properties) {
+        var state = properties.state();
+        if (state === Stormfront.Ajax.SUCCESS) {
+            var items = this.selectItems(properties);
+            return items && items.length > 0 ? 'populated' : 'empty';
+        }
+        return state;
+    },
+    selectItems: function (properties) {
+        return properties.list();
     }
-    function shouldWait(){
-        //TODO: This is a dependency upon the Indigo behavior
-        return options.wait && $.xhrPool.length > 0;
+});
+Homefront.Patterns.Selectable = function(method, action){
+    var events = {};
+    events[method] = 'select';
+    return {
+        events: events,
+        action: action,
+        select: function(){
+            var action = stormfront.type(this.action);
+            this.dispatch(new action(this.properties));
+        }
+    };
+};
+
+Homefront.SelectableList = Homefront.Enumerator.extend({
+    className: 'options',
+    item: null,
+    select: null,
+    method: 'click',
+    when: {
+        initializing: function(){
+            var item = stormfront.type(this.item);
+            this.item = {
+                view: item.extend(Homefront.Patterns.Selectable(this.method, this.select))
+            };
+        }
+    },
+    selectItems: function (properties) {
+        return properties.list();
     }
-    function delayRequest(){
-        if (stormfront.time.now() - startTime < 5000)
-            setTimeout(tryRequest, 1000);
-        else
-            overlay.error('Request timed out. Please try again soon.');
-        return null;
+});
+
+Homefront.SelectableDisplay = Homefront.Switch.extend({
+    className: 'selected',
+    select: null,
+    guidance: '',
+    display: null,
+    getCases: function() {
+        return {
+            none: Homefront.Guidance.Paragraph(this.guidance),
+            selected: this.display
+        };
+    },
+    when: {
+        entering: {
+            none: function(){
+                var entity = this.properties;
+                if (entity.onlyOne()) {
+                    var action = stormfront.type(this.select);
+                    this.dispatch(new action(entity.first()));
+                }
+            }
+        },
+        updating: function(){
+            this.render();
+        }
+    },
+    getState: function(properties){
+        return properties.selected() ? 'selected' : 'none';
     }
-    function sendRequest(){
-        function onComplete(){
-            removeListeners();
-            overlay.close();
+});
+
+//TODO: Could be a list or a series.
+Homefront.Selection = Homefront.Switch.extend({
+    className: 'selection',
+    item: null,
+    select: null,
+    method: 'click',
+    display: null,
+    none: '',
+    initial: '',
+    empty: '',
+    list: null,
+    adapter: null,
+    when: {
+        initializing: function(){
+            this.selectList = Homefront.SelectableList.extend({
+                item: this.item,
+                select: this.select,
+                method: this.method || 'click'
+            });
+            this.selectDisplay = Homefront.SelectableDisplay.extend({
+                select: this.select,
+                display: this.display,
+                guidance: this.none
+            });
         }
-        function onError(model, xhr){
-            removeListeners();
-            overlay.error(xhr);
+    },
+    getCases: function(){
+        return {
+            initial: Homefront.Guidance.Paragraph(this.initial),
+            empty: Homefront.Guidance.Paragraph(this.empty),
+            populated: Homefront.Layout.extend({
+                children: [this.selectList, this.selectDisplay]
+            })
         }
-        function removeListeners(){
-            model.off('error', onError);
-            model.off('sync', onComplete);
-            model.off('invalid', onComplete);
+    },
+    getState: function (properties) {
+        var state = properties.state();
+        if (state === Stormfront.Ajax.SUCCESS)
+            return properties.isEmpty() ? 'empty' : 'populated';
+        return state;
+    },
+    selectProperties: function(properties){
+        var adapter = stormfront.type(this.adapter);
+        return new adapter(properties);
+    }
+});
+Homefront.Search = Homefront.Layout.extend({
+    className: 'search',
+    adapter: null,
+    when: {
+        initializing: function () {
+            var results = Homefront.Selection.extend({
+                select: this.select,
+                display: this.details,
+                none: this.none,
+                empty: this.empty,
+                initial: this.initial,
+                item: this.item,
+                method: this.method || 'click'
+            });
+            this.children = [this.search, results]
+        }
+    },
+    selectProperties: function (properties) {
+        var adapter = stormfront.type(this.adapter);
+        return new adapter(properties);
+    }
+});
+
+Homefront.Text = Homefront.View.extend({
+    when: {
+        updating: function(){
+            this.updateValue();
+        },
+        rendering: function(){
+            this.updateValue();
+        }
+    },
+    updateValue: function(){
+        this.$el.text(this.getValue(this.properties));
+    },
+    getValue: function(properties){
+        return this.value || properties.value;
+    }
+});
+
+Homefront.Label = Homefront.Text.extend({
+    tagName: 'label',
+    when: {
+        rendering: function() {
+            this.$el.attr('for', this.properties.for);
+        }
+    }
+});
+
+Homefront.Paragraph = Homefront.Text.extend({
+    tagName: 'p'
+});
+
+Homefront.Input = Homefront.Text.extend({
+    tagName: 'input',
+    enable: function(){
+        this.$el.prop('disabled', false);
+    },
+    disable: function(){
+        this.$el.prop('disabled', true);
+    },
+    updateValue: function(){
+        this.$el.val(this.getValue(this.properties));
+    },
+    readValue: function(){
+        return this.$el.val();
+    }
+});
+
+Homefront.Select = Homefront.Input.extend({
+    tagName: 'select',
+    events: {
+        'change': 'select'
+    },
+    when: {
+        rendering: function(){
+            this.updateSelect();
+        },
+        updating: function(){
+            this.updateSelect();
+        }
+    },
+    updateSelect: function(){
+        this.updateOptions();
+        this.updateValue();
+    },
+    updateOptions: function(){
+        var options = this.getOptions(this.properties);
+        function createOption(value){
+            return $('<option>').val(value).text(value);
         }
-        model.once('invalid', onError);
-        model.once('error', onError);
-        model.once('sync', onComplete);
+        this.$el.append(_.map(options, createOption));
+    },
+    getOptions: function(properties){
+        return properties.options;
+    },
+    getValue: function(properties) {
+        return properties.selected;
+    },
+    select: function(){
+        this.transition('change', this.$el.val());
+    }
+});
 
-        return request.call(model, options.args, options.options);
+Homefront.TextBox = Homefront.Input.extend({
+    events: {
+        'change': 'change',
+        'blur': 'blur',
+        'keyup': 'special'
+    },
+    when: {
+        rendering: function(){
+            this.$el.attr('type', 'text');
+        }
+    },
+    change: function(){
+        this.transition('change', this.readValue());
+    },
+    blur: function(){
+        this.transition('blur', this.readValue());
+    },
+    special: function(event){
+        if (event.which === Keys.Enter)
+            this.transition('enter', this.readValue());
+    }
+});
+
+Homefront.Clicker = Homefront.Input.extend({
+    events: {
+        'click': 'click'
+    },
+    click: function(){
+        this.transition('click');
+    }
+});
+
+Homefront.Button = Homefront.Clicker.extend({
+    when: {
+        rendering: function(){
+            this.$el.attr('type', 'button');
+        }
+    }
+});
+Homefront.Leaf = Homefront.View.extend({
+    when: {
+        initializing: function() {
+            this.template = stormfront.string(this.className).firstWord() || null;
+        }
     }
-    return tryRequest();
-};
+});