stormfront-rails 0.1.0 → 0.2.3

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

@@ -0,0 +1,1137 @@
+var stormfront = { };
+var Stormfront = { Mixin: { } };
+
+Stormfront.VERSION = '1.0.0';
+
+Stormfront.Class = function(options) {
+    if (this.initialize)
+        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;
+
+    return child;
+};
+
+
+stormfront.arguments = function(args){
+    return new Stormfront.Arguments(args);
+};
+
+Stormfront.Arguments = Stormfront.Class.extend({
+    initialize: function(array){
+        if (array)
+            this.array = [].slice.call(array);
+        else
+            this.array = [];
+    },
+    skip: function(start) {
+        this.array = this.array.slice(start);
+        return this;
+    },
+    prepend: function(item){
+        this.array.unshift(item);
+        return this;
+    },
+    at: function(index, value){
+        this.array[index] = value;
+        return this;
+    },
+    get: function(){
+        return this.array;
+    }
+});
+
+stormfront.hash = function(hash){
+    return new Stormfront.Hash(hash);
+};
+
+Stormfront.Hash = Stormfront.Class.extend({
+    initialize: function(hash){
+        this.hash = hash;
+    },
+    findNestedValue: function(keys){
+        function retrieve(keys, context){
+            if (!context)
+                return null;
+            if (keys.length === 0)
+                return context;
+            var current = keys.shift();
+            return retrieve(keys, context[current]);
+        }
+        return retrieve(keys, this.hash);
+    },
+    subtract: function(values){
+        return _.omit(this.hash, _.keys(values));
+    }
+});
+
+stormfront.number = function(number){
+    return new Stormfront.Number(number);
+};
+
+Stormfront.Number = Stormfront.Class.extend({
+    initialize: function(number){
+        this.number = number;
+    },
+    isWithin: function(range){
+        return range[0] < this.number && range[1] > this.number;
+    },
+    compare: function(value){
+        return this.number < value ? -1 : this.number > value ? 1 : 0;
+    }
+});
+
+Stormfront.Response = Stormfront.Class.extend({
+    initialize: function(xhr){
+        this.xhr = xhr;
+    },
+    isActionable: function(){
+        return !(this.hasBeenHandled() || this.isUserUnauthorized() || this.hasBeenAborted());
+    },
+    hasBeenHandled: function(){
+        return this.xhr.handled === true;
+    },
+    markAsHandled: function(){
+        this.xhr.handled = true;
+    },
+    isUserUnauthorized: function(){
+        return this.xhr.status === 401;
+    },
+    hasBeenAborted: function(){
+        //TODO: consider xhr.status === 'abort'?
+        return this.xhr.readyState != 4;
+    },
+    getError: function(){
+        try {
+            var message = JSON.parse(this.xhr.responseText);
+            return message.error || message.message;
+        }
+        catch (e){
+            console.warn('Unhandled error', this.xhr, e);
+            return Stormfront.Errors.FEEDBACK;
+        }
+    }
+});
+
+stormfront.string = function(text){
+    return new Stormfront.String(text);
+};
+
+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;
+        var candidate = parseFloat(this.text);
+        return isNaN(candidate) ? placeholder : candidate.toFixed(places);
+    },
+    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] : '';
+    }
+});
+
+stormfront.time = function(datetime){
+    return new Stormfront.Time(datetime);
+};
+
+Stormfront.Time = Stormfront.Class.extend({
+    initialize: function(datetime){
+        this.time = moment(datetime || (new Date()).getTime());
+    },
+    now: function(){
+        return this.time;
+    },
+    getDiff: function(unit){
+        unit = unit || 'hours';
+        var now = moment().format();
+        return this.time.diff(now, unit);
+    },
+    getTimeAgo: function(){
+        return this.time.fromNow();
+    },
+    getLongDate: function(){
+        return this.time.format('MMMM D, YYYY h:mm:ss a');
+    },
+    getShortDate: function(){
+        return this.time.format('MMMM D, YYYY');
+    }
+});
+
+
+
+
+
+
+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);
+            }
+        }
+    },
+    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);
+            }
+            setTimeout(func, 5);
+        }
+    },
+
+    close: function(){
+        _.each(this.children, this.remove, this);
+    }
+});
+
+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());
+
+                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;
+            }
+        }
+        try {
+            return renderTemplate(this.view);
+        }
+        catch(e) {
+            throw new TemplateError(findError(this.view), e.message);
+        }
+    }
+});
+
+function TemplateError(message, innerException) {
+    var error = Error.call(this, message);
+    this.name = 'TemplateError';
+    this.message = error.message;
+    this.stack = error.stack;
+    this.innerException = innerException;
+}
+
+TemplateError.prototype = Object.create(Error.prototype);
+TemplateError.prototype.constructor = TemplateError;
+
+
+Stormfront.Mixin.Dispatch = {
+    hasEvents: function(){
+        return this.trigger;
+    },
+    addEvents: function(){
+        $.extend(this, Backbone.Events);
+    },
+    streamlineDispatch: function(event){
+        this.dispatch = function(){
+            this.trigger('dispatch', event)
+        };
+        this.dispatch(event);
+    },
+    dispatch: function(event){
+        if (!this.hasEvents())
+            this.addEvents();
+        this.streamlineDispatch(event);
+    }
+};
+
+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);
+    },
+    invalid: function(entity){
+        function propagateInvalid(source, response, options){
+            if (response.status === 400)
+                this.trigger('invalid', source, response, options);
+        }
+        entity.on('error', propagateInvalid);
+    },
+    empty: function(collection){
+        function determineEmpty(collection, response, options){
+            if (collection.isEmpty())
+                this.trigger('empty', collection, response, options);
+            else
+                this.trigger('populated', collection, response, options);
+        }
+        collection.on('sync', determineEmpty);
+    }
+};
+
+
+Keys = {
+    Enter: 13,
+    LeftArrow: 37,
+    DownArrow: 40,
+    RightArrow: 39,
+    UpArrow: 38,
+    C: 67,
+    R: 82,
+    M: 77,
+    Tab: 9,
+    Override: 1000,
+    Shift: 2000
+};
+
+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);
+        }
+        _.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');
+    }
+});
+
+
+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 = {
+    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 view model for the child 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'; }
+};
+
+//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);
+        }
+    },
+    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);
+    },
+    listenToDispatches: function(publisher){
+        this.listenTo(publisher, 'dispatch', this.executeUseCase);
+    }
+});
+
+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();
+                }
+            },
+            invalid: function(model, error){
+                this.handleException({error: error});
+            }
+        }
+    },
+    overlays: {
+        model: {
+            request: function(){
+                this.addOverlay();
+            },
+            sync: function(){
+                this.removeOverlay();
+            },
+            error: function(){
+                this.removeOverlay();
+            }
+        }
+    },
+    change: {
+        model: {
+            change: function(){
+                this.render();
+            }
+        }
+    },
+    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);
+    },
+    addOverlay: function(){
+        this.removeOverlay();
+        this.overlay = new Stormfront.Overlay({selector: this.$el});
+    },
+    removeOverlay: function(){
+        if (this.overlay) {
+            this.overlay.close();
+            this.overlay = null;
+        }
+    }
+});
+
+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);
+    }
+});
+
+function LayoutError(message, innerException) {
+    var error = Error(message);
+    this.name = 'LayoutError';
+    this.message = error.message;
+    this.stack = error.stack;
+    this.innerException = innerException;
+}
+
+LayoutError.prototype = Object.create(Error.prototype);
+LayoutError.prototype.constructor = LayoutError;
+
+Stormfront.Overlay = Stormfront.Class.extend({
+    initialize: function(options){
+        var selector = options.selector;
+
+        if (!selector)
+            this.overlay = new Stormfront.FullScreenOverlay({model: options});
+        else if (options.saveRequest)
+            this.overlay = new Stormfront.InlineOverlay();
+        else
+            this.overlay = new Stormfront.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);
+    }
+});
+
+Stormfront.OverlayBase = Stormfront.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();
+        }
+    },
+    initialize: function(){
+        this.addSubscriber(this.base);
+        Stormfront.View.prototype.initialize.apply(this, arguments);
+    },
+    error: function(){
+        this.remove();
+    },
+    close: function(){
+        this.transition.apply(this, stormfront.arguments(arguments).prepend('closing').get());
+    }
+});
+
+Stormfront.FullScreenOverlay = Stormfront.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');
+        }
+    }
+});
+
+Stormfront.AnonymousOverlay = Stormfront.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');
+        }
+    }
+});
+
+Stormfront.InlineOverlay = Stormfront.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();
+        }
+    }
+});
+
+Stormfront.Reducer = Stormfront.Class.extend({
+    type: Stormfront.Errors.NOT_IMPLEMENTED,
+    initialize: function(){
+        _.extend(this, Stormfront.Mixin.Dispatch);
+    },
+    execute: function(model, event){
+        throw Stormfront.Errors.UseCases.NOT_IMPLEMENTED;
+    }
+});
+
+Stormfront.Request = function(model, request, options){
+    var startTime = stormfront.time.now();
+    var overlay = new Stormfront.Overlay(options);
+    function tryRequest(){
+        return shouldWait() ? delayRequest() : sendRequest();
+    }
+    function shouldWait(){
+        //TODO: This is a dependency upon the Indigo behavior
+        return options.wait && $.xhrPool.length > 0;
+    }
+    function delayRequest(){
+        if (stormfront.time.now() - startTime < 5000)
+            setTimeout(tryRequest, 1000);
+        else
+            overlay.error('Request timed out. Please try again soon.');
+        return null;
+    }
+    function sendRequest(){
+        function onComplete(){
+            removeListeners();
+            overlay.close();
+        }
+        function onError(model, xhr){
+            removeListeners();
+            overlay.error(xhr);
+        }
+        function removeListeners(){
+            model.off('error', onError);
+            model.off('sync', onComplete);
+            model.off('invalid', onComplete);
+        }
+        model.once('invalid', onError);
+        model.once('error', onError);
+        model.once('sync', onComplete);
+
+        return request.call(model, options.args, options.options);
+    }
+    return tryRequest();
+};