stormfront-rails 0.10.6 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 454e22f09976d29d75b77b5769dd3c7282c01363
-  data.tar.gz: 25f88483b8ea590832dd50decd5479fbba27519c
+  metadata.gz: e4fc59612c92509eb2ce9c7dec61d92793625739
+  data.tar.gz: a5fafb949f95680426b40dc6ef0c38918f1a25e5
 SHA512:
-  metadata.gz: 39ab1223257b6f556b5b09adec9cef23ca0d908928002591949b8caf3c0ee208fa0f4ba0bacdcfa6b33fbd8810ae622d5963f5e5bac9a131fa72a12532d78ed5
-  data.tar.gz: 740c33c95d0623cc5aa97be78af117eb6e1ba13236632268c8b94248e357339ce252a3ee28987562d7b9d2b4ef8cd32a0f9866a1a50d906afe27896d44deeff2
+  metadata.gz: 785a3d81a0da1d81c251b1984543e5556fc804b6d8dc1643805f5cddba28c061e0ca8d27792736b53e8ca2264a4c56a18bb77c0fe0b1316879583b9c569481e1
+  data.tar.gz: 07b2fd98c22bc81c28587ca176d1d13b7a28729e74f2321bd72034f3f3b81ec4bb65059d0eb7d3a39cf3e927e86a3d6c33892cbdaacfc34c39b7e4e467214398

data/lib/stormfront/rails/version.rb

@@ -1,5 +1,5 @@
 module Stormfront
   module Rails
-    VERSION = '0.10.6'
+    VERSION = '0.11.0'
   end
 end

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

@@ -8,34 +8,28 @@ Stormfront.Class = function(options) {
         this.initialize.apply(this, arguments);
 };
 
-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;
-    }
+stormfront.enableModules =  function (child, modules) {
+    _.each(modules, function(module){
+        stormfront.enableModules(child, module(child).dependencies);
+    });
+};
 
+stormfront.extend = function(properties){
     var parent = this;
-    var child = copyConstructor(parent);
-    copyBaseProperties(child, parent);
-    carryPrototypeChain(child, parent);
-    copyNewProperties(protoProps);
-    enableAccessToBaseClass(child, parent);
+    var child = function() {
+        parent.apply(this, arguments);
+        stormfront.enableModules(this, properties.include);
+        return this;
+    };
+    _.extend(child, parent);
+    child.prototype = _.create(parent.prototype, properties);
+    child.prototype.constructor = child;
+    child.__super__ = parent.prototype;
     return child;
 };
 
+Stormfront.Class.extend = stormfront.extend;
+
 stormfront.arguments = function(args){
     return new Stormfront.Arguments(args);
 };
@@ -172,6 +166,10 @@ Stormfront.Number = Stormfront.Class.extend({
         return this.number < value ? -1 : this.number > value ? 1 : 0;
     }
 });
+Stormfront.Errors = {
+    FEEDBACK: 'An unexpected error was encountered'
+};
+
 Stormfront.Response = Stormfront.Class.extend({
     initialize: function(xhr){
         this.xhr = xhr;
@@ -189,7 +187,6 @@ Stormfront.Response = Stormfront.Class.extend({
         return this.xhr.status === 401;
     },
     hasBeenAborted: function(){
-        //TODO: consider xhr.status === 'abort'?
         return this.xhr.readyState != 4;
     },
     getError: function(){
@@ -284,15 +281,26 @@ Stormfront.Type = Stormfront.Class.extend({
 });
 
 Stormfront.Patterns = {
+    When: function (subject, methods) {
+        subject.when = subject.when || {};
+        _.each(methods, function (method) {
+            var actualMethod = subject[method];
+            subject[method] = function () {
+                var when = subject.when[method];
+                var value = actualMethod.apply(subject, arguments);
+                when && when.apply(subject, arguments);
+                return value;
+            }
+        });
+        subject.when.initialize && subject.when.initialize.apply(subject);
+    },
     Dispatcher: function (subject, dispatcher) {
-        if (dispatcher) {
-            subject.dispatch = function (event) {
-                dispatcher.dispatch(event);
-            };
-            subject.getDispatcher = function(){
-                return dispatcher;
-            };
-        }
+        subject.dispatch = function (event) {
+            dispatcher.dispatch(event);
+        };
+        subject.getDispatcher = function () {
+            return dispatcher;
+        };
     },
     Events: function (subject) {
         if (!subject.listenTo)
@@ -300,17 +308,12 @@ Stormfront.Patterns = {
 
         $.extend(subject, {
             forward: function (other, type) {
-                function propagate(){
-                    subject.trigger.apply(subject, arguments);
-                }
-                subject.listenTo(other, type || 'all', propagate);
+                subject.listenTo(other, type || 'all', subject.trigger);
             }
         })
     }
 };
-Stormfront.Errors = {
-    FEEDBACK: 'An unexpected error was encountered'
-};
+
 
 Stormfront.Dispatches = {
     RECEIVED: 'Dispatcher:Action:Received',
@@ -329,10 +332,10 @@ Stormfront.NO_CHANGE = 'Store:Nothing_Changed';
 Stormfront.Reducer = Stormfront.Class.extend({
     type: 'NOT:IMPLEMENTED',
     dependencies: [],
-    initialize: function(dispatcher){
+    initialize: function (dispatcher) {
         Stormfront.Patterns.Dispatcher(this, dispatcher);
     },
-    execute: function(store, event){
+    execute: function (store, event) {
         throw 'The reducer does not implement a function body'
     }
 });
@@ -577,7 +580,6 @@ Stormfront.Dispatcher = Stormfront.Class.extend({
             root.trigger(Stormfront.Dispatches.QUEUED, event);
         }
 
-
         function processQueue() {
             if (_.isEmpty(queue))
                 return;
@@ -592,67 +594,37 @@ Stormfront.Dispatcher = Stormfront.Class.extend({
     }
 });
 Stormfront.Container = Stormfront.Class.extend({
-    page: null,
-    initial: null,
-    reducers: [],
-    initialize: function(location) {
+    initialize: function (reducers) {
         Stormfront.Patterns.Events(this);
-        var dispatcher = new Stormfront.Dispatcher();
-        var page = new this.page(dispatcher);
+        Stormfront.Patterns.Dispatcher(this, new Stormfront.Dispatcher());
+        var ursula = this.getDispatcher();
         var store = new Stormfront.Store({
-            reducers: this.reducers,
-            dispatcher: dispatcher
+            reducers: reducers,
+            dispatcher: ursula
         });
 
-        function executeAction(action){
-            store.executeReducer(action);
-        }
-        function updateView(action, reducer, newProperties, oldProperties){
-            page.updateProperties(newProperties, oldProperties, action, reducer);
+        function execute (store) {
+            return function (action) {
+                store.executeReducer(action);
+            }
         }
-        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.listenTo(ursula, Stormfront.Dispatches.READY, execute(store));
+        this.forward(ursula);
         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)
+    start: function (initial) {
+        this.dispatch(SetStateAction(initial));
     }
 });
 
+Homefront = {};
+Homefront.Virtualize = require('virtual-html');
+Homefront.Virtual = require('virtual-dom');
+Homefront.Diff = Homefront.Virtual.diff;
+Homefront.Patch = Homefront.Virtual.patch;
+Homefront.Create = Homefront.Virtual.create;
+
 Homefront.Entity = Stormfront.Class.extend({
     defaults: null,
     initialize: function (properties) {
@@ -728,567 +700,73 @@ Homefront.Request = Stormfront.Ajax.Request.extend({
     }
 });
 
-Keys = {
-    Enter: 13,
-    LeftArrow: 37,
-    DownArrow: 40,
-    RightArrow: 39,
-    UpArrow: 38,
-    C: 67,
-    R: 82,
-    M: 77,
-    Tab: 9,
-    Override: 1000,
-    Shift: 2000
+Homefront.Templating = function (template, viewModel) {
+    return Handlebars.compile(template)(viewModel);
 };
-
-KeyboardEvents = Stormfront.Class.extend({
-    initialize: function(){
-        _.bindAll(this, 'onKeyDown');
-        _.extend(this, Backbone.Events);
-        $(window).on('keydown', this.onKeyDown);
-    },
-    onKeyDown: function(event){
-        function isInput(node){
-            switch(node){
-                case 'SELECT':
-                    return true;
-                case 'TEXTAREA':
-                    return true;
-                case 'INPUT':
-                    return true;
-                case 'BUTTON':
-                    return true;
-                default:
-                    return false;
-            }
-        }
-        var shift = event.shiftKey ? Keys.Shift : 0;
-        var override = isInput(document.activeElement.nodeName) ? Keys.Override : 0;
-        this.trigger(shift + override + event.which, event);
-    },
-    enterState: function(bindings){
-        var self = this;
-        this.off();
-        function addBinding(value, key) {
-            self.on(key, value);
+Homefront.Rendering = function (html, events, context) {
+    return Homefront.Eventing(Homefront.Virtualize(html), events, context);
+};
+Homefront.Eventing = function (view, events, context) {
+    function delegate (handler) {
+        return function () {
+            handler.apply(context, arguments);
         }
-        _.each(bindings, addBinding);
-    },
-    close: function(){
-        $(window).off('keydown', this.onKeyDown);
-        this.off('all');
     }
-});
-MouseEvents = Stormfront.Class.extend({
-    initialize: function(options){
-        options = _.extend({delay: 175}, options);
-        this.delay = options.delay ? options.delay : 175;
-        this.public = _.clone(Backbone.Events);
-        this.internal = _.clone(Backbone.Events);
-    },
-    listen: function(target){
-        this.$el = target;
-        this.$el.global = $(document);
-        this.el = this.$el[0];
-
-        var self = this;
-        function enterStandardEventMode() {
-            self.$el.on('wheel.me', handleMouseWheel);
-            self.$el.on('mousewheel.me', handleMouseWheel);
-            self.$el.one('mousedown.me', handleFirstMouseDown);
-
-            function handleFirstMouseDown(eventArgs) {
-                self.$el.one('mousemove.me', enterDraggingMode);
-
-                self.$el.one('mousedown.me', handleSubsequentMouseDown);
-                self.internal.once("special:single-click:down", function() { handleSpecialMouseDown(eventArgs)});
-                self.$el.global.one('mouseup.me', handleFirstMouseUp);
-                delay("special:single-click:down", eventArgs);
-            }
-
-            function handleFirstMouseUp(eventArgs) {
-                self.$el.off('mousemove.me');
-                self.internal.once("special:single-click:up", function() { handleSpecialMouseUp(eventArgs); });
-                delay("special:single-click:up", eventArgs);
-            }
 
-            function delay(event, eventArgs){
-                setTimeout(function() { publishInternalEvent(event, eventArgs);}, self.delay);
-            }
-
-            function handleSpecialMouseDown(eventArgs) {
-                self.$el.off('mousedown.me');
-                self.$el.one('mousedown.me', handleFirstMouseDown);
-                publishExternalEvent("single-click:down", eventArgs);
-            }
-
-            function handleSpecialMouseUp(eventArgs) {
-                publishExternalEvent("single-click:up", eventArgs);
-            }
-
-            function handleSubsequentMouseDown(eventArgs) {
-                self.internal.off("special:single-click:down");
-                self.$el.one('mousedown.me', handleFirstMouseDown);
-                self.$el.global.one('mouseup.me', handleSubsequentMouseUp);
-                publishExternalEvent("double-click:down", eventArgs);
-            }
-
-            function handleSubsequentMouseUp(eventArgs) {
-                self.internal.off("special:single-click:up");
-                publishExternalEvent("double-click:up", eventArgs);
-            }
-
-            function handleMouseWheel(eventArgs) {
-                publishExternalEvent("mousewheel", eventArgs);
-            }
-        }
-
-        function exitStandardEventMode() {
-            self.$el.off('mousedown.me');
-            self.$el.global.off('mouseup.me');
-            self.$el.off('mousemove.me');
-            self.$el.off('wheel.me');
-            self.$el.off('mousewheel.me');
-            self.internal.off("special:single-click:down");
-            self.internal.off("special:single-click:up");
-        }
-
-        function enterDraggingMode(eventArgs) {
-            function handleMouseMove(eventArgs) {
-                publishExternalEvent("dragging:move", eventArgs);
-            }
-
-            function handleMouseUp(eventArgs) {
-                publishExternalEvent("dragging:end", eventArgs);
-                exitDraggingMode();
-                enterStandardEventMode();
-            }
-
-            exitStandardEventMode();
-            publishExternalEvent("dragging:start", eventArgs);
-            self.$el.global.on('mousemove.me', handleMouseMove);
-            self.$el.global.one('mouseup.me', handleMouseUp);
-        }
-
-        function exitDraggingMode() {
-            self.$el.off('mouseup.me');
-            self.$el.global.off('mousemove.me');
-            self.$el.global.off('mousedown.me');
-        }
-
-        function disableUnsupportedEvents() {
-            self.$el.global.on('selectstart.me', function(eventArgs) {
-                eventArgs.preventDefault();
-                eventArgs.stopPropagation();
-                return false; });
-            self.$el.on("contextmenu.me", function(eventArgs) {
-                eventArgs.preventDefault();
-                eventArgs.stopPropagation();
-                return false; });
-        }
-
-        function publishInternalEvent(event, eventArgs){
-            publishEvent(self.internal, event, eventArgs);
-        }
-        function publishExternalEvent(event, eventArgs){
-            publishEvent(self.public, event, eventArgs);
-        }
-        function publishEvent(publisher, event, eventArgs){
-            function getMousePosition(eventArgs) {
-                var offset = self.$el.offset();
-                var relativeX = eventArgs.originalEvent.pageX - offset.left;
-                var relativeY = eventArgs.originalEvent.pageY - offset.top;
-                eventArgs.preventDefault();
-                eventArgs.stopPropagation();
-                return  {
-                    x: relativeX,
-                    y: relativeY
-                };
-            }
-            var position = getMousePosition(eventArgs);
-            publisher.trigger(event, position, eventArgs.originalEvent);
-        }
-
-        enterStandardEventMode();
-        disableUnsupportedEvents();
-    },
-    on: function(event, callback){
-        this.public.on(event, callback);
-        return this;
-    },
-    off: function(event ,callback){
-        this.public.off(event, callback);
-        return this;
-    },
-    stopListening: function(){
-        this.$el && this.$el.off('.me');
-        this.$el.global && this.$el.global.off('.me');
-    }
-});
-Homefront.Errors = {
-    FEEDBACK: 'An unexpected error was encountered',
-    /** @return {string} */
-    NO_SELECTOR: function() { return 'A template selector was not provided for your view' },
-    /** @return {string} */
-    NO_TEMPLATE: function(name) { return name +'\'s template was not found'; },
-    /** @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 context generated an error'; },
-    /** @return {string} */
-    NO_LOCATION: function(name) { return name + ' has no locations available to render'; },
-    /** @return {string} */
-    MULTIPLE_LOCATIONS: function(name) { return name + ' has multiple locations available to render'; },
-    /** @return {string} */
-    INITIALIZING: function(name) { return name + ' failed to initialize'; },
-    /** @return {string} */
-    RENDERING: function(name) { return name + ' failed to render'; },
-    /** @return {string} */
-    ATTACHING: function(name) { return name + ' failed to attach'; },
-    /** @return {string} */
-    CLOSING: function(name) { return name + ' failed to close'; },
-    /** @return {string} */
-    ADDING: function(name) { return name + ' failed to add'; }
+    _.each(events, function (handler, key) {
+        view.properties['on' + key] = delegate(handler);
+    });
+    return view;
 };
 
-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;
-    },
-    getContext: function(){
-        return this.properties ? this.properties : { };
-    },
-    close: function () {
-        this.remove();
-    }
-});
-Homefront.View = Homefront.ViewBase.extend({
-    when: {},
+Homefront.Base = Stormfront.Class.extend({
     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;
+        Stormfront.Patterns.When(this, ['initialize', 'render', 'attached']);
     },
-    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);
-                }
-            }
-
-            _.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
-            this.listenTo(publisher, 'transition', prepend(identity));
-    },
-    addSubscriber: function (whenBlock) {
-        this._subscribers = this._subscribers || [];
-        if (whenBlock && !_.isEmpty(whenBlock))
-            this._subscribers.push(whenBlock);
-    },
-    transition: function () {
-        this.trigger.apply(this, stormfront.arguments(arguments).prepend('transition').get());
-    },
-    updateProperties: function (properties) {
-        var previous = this.properties;
-        this.properties = this.selectProperties(properties);
-        this.transition('updating', this.properties, previous);
-    },
-    selectProperties: function (properties) {
+    render: function(properties){
+        // return a v-tree to have
+        // it rendered to the screen
+        this.properties = properties;
         return properties;
     },
-    close: function () {
-        this.transition('before:closing');
-        this.transition('closing');
-        Homefront.ViewBase.prototype.close.call(this);
+    attached: function (dom) {
+        this.dom = dom;
     }
 });
-
-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'];
-
-        _.extend(child.prototype, protoProps);
-
-        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;
-};
-
-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 Homefront.FullScreenOverlay({model: options});
-        else if (options.saveRequest)
-            this.overlay = new Homefront.InlineOverlay();
-        else
-            this.overlay = new Homefront.AnonymousOverlay();
-
-        selector = selector ? selector : document.body;
-        this.location = selector.size ? selector : $(selector);
-        this.render();
-    },
-    render: function(){
-        this.location.append(this.overlay.render().$el);
-        this.overlay.transition('attached');
-        return this;
-    },
-    close: function(){
-        this.overlay.close();
-        this.location = null;
-    },
-    error: function(){
-        this.overlay.error.apply(this.overlay, arguments);
-    }
-});
-
-Homefront.OverlayBase = Homefront.View.extend({
-    className: 'overlay',
-    activated: false,
-    PAUSE_DURATION: 0,
-    MINIMUM_DURATION: 0,
-    base_css: {
-        overlay_background: {
-            top: '0px', left: '0px',
-            width: '100%', height: '100%'
-        },
-        overlay_panel: {
-            position: 'absolute',
-            top: '50%', left: '50%'
-        }
-    },
-    base: {
-        rendering: function(){
-            function applyCss(value, key){
-                var selector = '.' + key;
-                this.$(selector).css(value);
-            }
-            this.startTime = stormfront.time().now();
-            _.each(this.base_css, applyCss, this);
-            _.each(this.css, applyCss, this);
-            this.$el.css({opacity: '0', 'pointer-events': 'none'});
-        },
-        attached: function(){
-            var self = this;
-            function activate(){
-                self.$el.css({opacity: '1', 'pointer-events': 'auto'});
-                self.activated = true;
-            }
-            function setDimensions(panel){
-                var content = self.$('.content');
-                var position = {
-                    'margin-left': - content.outerWidth() / 2,
-                    'margin-top': - content.outerHeight() / 2
-                };
-                panel.css(position);
-            }
-            setDimensions(this.$('.overlay_panel'));
-            if (this.PAUSE_DURATION)
-                setTimeout(activate, this.PAUSE_DURATION);
-            else
-                activate();
-        },
-        closing: function(){
-            var self = this;
-            function remove(){
-                self.remove();
-            }
-            if (!this.activated)
-                this.remove();
-
-            var currentDuration = stormfront.time().now() - this.startTime;
-            var remainingDuration = this.MINIMUM_DURATION - currentDuration;
-            if (remainingDuration > 0)
-                setTimeout(remove, remainingDuration);
-            else
-                this.remove();
-        }
+Homefront.View = Homefront.Base.extend({
+    template: '<div></div>',
+    templating: Homefront.Templating,
+    rendering: Homefront.Rendering,
+
+    render: function (properties) {
+        this.properties = properties;
+        this.context = this.getContext(properties);
+        this.html = this.templating(this.template, this.context);
+        this.setNode(this.rendering(this.html, this.events, this));
+        return this.getNode();
+    },
+    getContext: function (properties) {
+        return properties;
     },
-    initialize: function(){
-        this.addSubscriber(this.base);
-        Stormfront.View.prototype.initialize.apply(this, arguments);
+    getNode: function(){
+        return this.node;
     },
-    error: function(){
-        this.remove();
+    setNode: function(node){
+        this.node = node;
     },
-    close: function(){
-        this.transition.apply(this, stormfront.arguments(arguments).prepend('closing').get());
-    }
-});
 
-Homefront.FullScreenOverlay = Homefront.OverlayBase.extend({
-    MINIMUM_DURATION: 900,
-    css: {
-        overlay_background: {
-            position: 'fixed',
-            'z-index': '100000'
-        },
-        overlay_panel: {
-            'z-index': '100001'
-        }
-    },
-    when: {
-        rendering: function(){
-            this.$el.addClass('blocking');
-        }
-    }
-});
-
-Homefront.AnonymousOverlay = Homefront.OverlayBase.extend({
-    PAUSE_DURATION: 200,
-    MINIMUM_DURATION: 450,
-    css: {
-        overlay_background: {
-            position: 'absolute',
-            'z-index': 'auto'
-        },
-        overlay_panel: {
-            'z-index': 'auto'
-        }
-    },
-    when: {
-        rendering: function(){
-            this.$el.addClass('anonymous');
-        }
+    attached: function (dom) {
+        this.dom = dom;
     }
 });
 
-Homefront.InlineOverlay = Homefront.OverlayBase.extend({
-    className: 'input_overlay',
-    MINIMUM_DURATION: 1500,
-    MAXIMUM_WIDTH: 1200,
-    base_css: {
-        input: {
-            position: 'absolute',
-            top: '2px',
-            right: '10px',
-            width:'16px',
-            'z-index':'10000'
-        }
-    },
-    when: {
-        rendering: function () {
-            this.$el.find('.error').hide();
-            this.$el.find('.confirm').hide();
-        },
-        closing: function(){
-            this.$el.find('.spinner').hide();
-            this.$el.find('.confirm').show();
-        }
-    },
-    error: function (xhr) {
-        //TODO: Elevate this code up a level to the Request
-        try {
-            var response = JSON.parse(xhr.responseText);
-            var error = response.error || response.message;
-            this.$el.find('.spinner').hide();
-            this.$el.find('.error').show().attr('title', error);
-            xhr.handled = true;
-        }
-        catch (e) {
-            console.warn('Could not parse error', arguments);
-            this.remove();
-        }
-    }
-});
 Homefront.Guidance = {
     Generic: function (type, text) {
-        return Homefront.Text.extend({
-            tagName: type,
-            className: 'guidance',
-            text: text,
-            selectProperties: function () {
-                return {value: this.text}
+        return Homefront.View.extend({
+            template: '<{{type}} class="guidance">{{text}}</{{type}}>',
+            getContext: function () {
+                return {type: type, text: text}
             }
         });
     },
@@ -1304,526 +782,274 @@ Homefront.Guidance = {
     }
 };
 
-Homefront.Chaperone = Homefront.View.extend({
-    method: 'append',
-    when: {
-        initializing: function () {
-            this._children = [];
+Homefront.Empty = { tagName: '', children: [] };
+
+Homefront.VirtualGateway = function(view) {
+    function getProperties(node){
+        return node ? node.properties || {} : {};
+    }
+    function getClass(node){
+        return getProperties(node).class || '';
+    }
+    function hasClass(node, className){
+        return (_.contains(getClass(node).split(' '), className));
+    }
+    function find(node, className){
+        if (hasClass(node, className))
+            return node;
+        var candidate = Homefront.Empty;
+        _.find(node.children, function(child){
+            candidate = find(child, className);
+            return candidate !== Homefront.Empty;
+        });
+        return candidate;
+    }
+    function findParent(node, className){
+        var candidate = Homefront.Empty;
+        _.find(node.children, function(child){
+            if (hasClass(child, className))
+                candidate = node;
+            else
+                candidate = findParent(child, className);
+            return candidate !== Homefront.Empty;
+        });
+        return candidate;
+    }
+    return _.extend(view, {
+        hasClass: function(className){
+            return hasClass(view.getNode(), className);
         },
-        updating: function (properties) {
-            this.updateChildren(this._children, properties);
+        find: function (location) {
+            return find(view.getNode(), location);
         },
-        attached: function () {
-            var previous = this._children;
-            this._children = [];
-            this.createChildren();
-            this.renderChildren(this._children);
-            this.attachChildren(this._children);
-            this.closeChildren(previous);
+        parent: function(location) {
+            return findParent(view.getNode(), location);
         },
-        closing: function () {
-            this.closeChildren(this._children);
-            this._children = [];
+        replace: function (location, node) {
+            var child = find(view.getNode(), location);
+            var parent = findParent(view.getNode(), location);
+            var index = _.indexOf(parent.children, child);
+            parent.children[index] = node;
         },
-        chaperone: {
-            create: function (child, properties) {
-                var type = stormfront.type(child);
-                properties = _.isObject(properties) ? properties : this.properties;
-
-                if (type)
-                    this.transition('chaperone:add', new type(this.getDispatcher()), properties);
-                else
-                    console.error('Child type does not exist: ', child);
-            },
-            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));
+        append: function(node, location){
+            if (location)
+                find(view.getNode(), location).children.push(node);
             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);
+                view.getNode().children.push(node);
         }
+    });
+};
 
-        //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;
+Homefront.Chaperone = function(child){
+    _.extend(child, {
+        default: Homefront.Guidance.Paragraph,
+        createChild: function (name) {
+            var type = stormfront.type(name);
+            return (type) ?
+                new type(this.getDispatcher()) :
+                this.guidance('View was not found: ' + name);
+        },
+        renderChild: function (child, properties) {
+            return child.render(properties || this.properties);
+        },
+        appendChild: function (child, location) {
+            this.append(child, location);
+        },
+        attachChild: function (child, location) {
+            this.replace(location, child);
+        },
+        //todo: when a view wants to render two children
 
-        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);
+        guidance: function (text) {
+            return new (this.default(text))();
         }
-    }
-});
+    });
 
-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();
+    return {
+        dependencies: [Homefront.VirtualGateway]
     }
-});
-Homefront.Enumerator = Homefront.Chaperone.extend({
-    item: null,
+};
+Homefront.Layout = Homefront.View.extend({
+    include: [Homefront.Chaperone],
+    children: [],
     when: {
-        chaperone: {
-            add: function (child) {
-                child.location = this.item.location;
-            }
+        render: function () {
+            this.appendChildren(this.children);
         }
     },
-    createChildren: function () {
-        function createChild(item) {
-            this.createChild(this.item.view, item);
-        }
-
-        _.each(this.selectItems(this.properties), createChild, this);
-    },
-    updateChildren: function (children, properties) {
-        function updateWith(items) {
-            return function(child, index) {
-                var item = items[index];
-                child.updateProperties(item);
-            }
-        }
-
-        _.each(children, updateWith(this.selectItems(properties)));
-    },
-    composeChild: function (item) {
-        return this.createChild(this.item, item);
-    },
-    selectItems: function (properties) {
-        return properties;
-    },
-    at: function (index) {
-        return this._children[index];
+    appendChildren: function(types){
+        _.each(types, function(type){
+            var child = this.createChild(type);
+            var view = this.renderChild(child);
+            this.appendChild(view);
+        }, this);
     }
 });
-Homefront.List = Homefront.Switch.extend({
-    item: null,
+
+Homefront.Template = Homefront.View.extend({
+    include: [Homefront.Chaperone],
+    children: {},
     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
-            });
+        render: function () {
+            this.attachChildren(this.children);
         }
     },
-    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;
+    attachChildren: function(types){
+        _.each(types, function(type, location){
+            var child = this.createChild(type);
+            var view = this.renderChild(child);
+            this.attachChild(view, location);
+        }, this);
     }
 });
-//TODO: This should have a better name I suppose
-Homefront.ActiveList = Homefront.List.extend({
-    getCases: function () {
-        //lazy shortcut
-        this.populated = this.enumerator;
-        return this;
+Homefront.Switch = Homefront.Base.extend({
+    cases: {},
+    include: [Homefront.Chaperone],
+    render: function (properties) {
+        this.properties = properties;
+        return this.createCase(this.getState(properties)).render(properties);
     },
     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
-    }
-});
-
-//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;
+        return properties;
     },
-    selectItems: function (properties) {
-        return properties.list();
+    createCase: function(state){
+        var candidate = this.cases[state];
+        return (candidate) ?
+            this.createChild(candidate) :
+            this.guidance('Case was not found for state: ' + state);
     }
 });
-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',
+Homefront.Collection = Homefront.Switch.extend({
+    loading: null,
     item: null,
-    select: null,
-    method: 'click',
+    empty: null,
+    error: null,
     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();
-    }
-});
-
-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()));
-                }
+        initialize: function(){
+            this.cases = {
+                loading: this.loading,
+                error: this.error,
+                populated: Homefront.List.extend({
+                    template: this.template,
+                    empty: this.empty,
+                    item: this.item,
+                    selectList: this.selectList
+                })
             }
-        },
-        updating: function(){
-            this.render();
         }
     },
-    getState: function(properties){
-        return properties.selected() ? 'selected' : 'none';
+    getState: function (properties) {
+        switch(properties.state) {
+            case Stormfront.Ajax.START:
+                return 'loading';
+            case Stormfront.Ajax.PENDING:
+                return 'loading';
+            case Stormfront.Ajax.SUCCESS:
+                return 'populated';
+            case Stormfront.Ajax.ERROR:
+                return 'error';
+            case Stormfront.Ajax.ABORTED:
+                return 'error';
+            default:
+                return properties.state;
+        }
+    },
+    selectList: function (properties) {
+        return properties.list;
     }
 });
-
-//TODO: Could be a list or a series.
-Homefront.Selection = Homefront.Switch.extend({
-    className: 'selection',
+Homefront.List = Homefront.View.extend({
+    include: [Homefront.Chaperone],
     item: null,
-    select: null,
-    method: 'click',
-    display: null,
-    none: '',
-    initial: '',
-    empty: '',
-    list: null,
-    adapter: null,
+    empty: 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
-            });
+        render: function () {
+            this.renderList(this.selectList(this.properties));
         }
     },
-    getCases: function(){
-        return {
-            initial: Homefront.Guidance.Paragraph(this.initial),
-            empty: Homefront.Guidance.Paragraph(this.empty),
-            populated: Homefront.Layout.extend({
-                children: [this.selectList, this.selectDisplay]
-            })
-        }
+    selectList: function (properties) {
+        return properties;
     },
-    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]
-        }
+    renderList: function (list) {
+        (_.isEmpty(list)) ?
+            this.appendChild(this.renderChild(this.createChild(this.empty))) :
+            _.each(list, this.renderEntry, this);
     },
-    selectProperties: function (properties) {
-        var adapter = stormfront.type(this.adapter);
-        return new adapter(properties);
+    renderEntry: function (entry) {
+        this.appendChild(this.renderChild(this.createChild(this.item), entry));
     }
 });
 
 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);
-        }
-        this.$el.append(_.map(options, createOption));
-    },
-    getOptions: function(properties){
-        return properties.options;
-    },
-    getValue: function(properties) {
-        return this.selected || properties.selected;
-    },
-    select: function(){
-        this.transition('change', this.readValue());
-    }
+
 });
 
 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;
-        }
+Homefront.Page = Stormfront.Class.extend({
+    initial: {},
+    reducers: null,
+    view: null,
+    initialize: function(location){
+        Stormfront.Patterns.Events(this);
+        this.start(this.reducers, location, this.view, this.initial);
+    },
+    start: function(reducers, location, view, initial){
+        var container = new Stormfront.Container(reducers);
+        var options = {
+            location: location,
+            dispatcher: container.getDispatcher(),
+            view: this.view
+        };
+        this.listenTo(container, Stormfront.Dispatches.CHANGE, this.renderView(options));
+        container.start(initial);
+    },
+    renderView: function(options){
+        return function(action, reducer, newProperties, oldProperties) {
+            var view = new this.view(options.dispatcher);
+            var newTree = view.render(newProperties, oldProperties, action, reducer);
+            this.attachView(newTree, options.location);
+        }
+    },
+    attachView: function(newTree, location){
+        this.tree = this.tree ?
+            this.updateView(newTree) :
+            this.createView(location, newTree);
+        view.transition('attached');
+    },
+    createView: function(location, newTree){
+        this.root = Homefront.Create(newTree);
+        location.appendChild(this.root);
+        return newTree;
+    },
+    updateView: function(newTree){
+        var patches = Homefront.Diff(this.tree, newTree);
+        this.root = Homefront.Patch(this.root, patches);
+        return newTree;
     }
-});
+});