2 files changed, 85 insertions, 715 deletions

diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index 1d5e9ade..da8cbb76 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -373,78 +373,76 @@ exports.ElementMediator = Montage.create(Component, {
     },
 
     getStroke: {
-        value: function(el) {
-            if(!el.elementModel) {
-                NJUtils.makeElementModel(el, "Div", "block");
-            }
-            return el.elementModel.controller["getStroke"](el);
+        value: function(el, strokeProperties) {
+            return el.elementModel.controller["getStroke"](el, strokeProperties);
         }
     },
 
-
     /**
-     Set a property change command for an element or array of elements
+     Set stroke/border properties on an element or array of elements
      @param els: Array of elements. Can contain 1 or more elements
      @param value: Value to be set. This is the stroke info
      @param eventType: Change/Changing. Will be passed to the dispatched event
      @param source: String for the source object making the call
      @param currentValue *OPTIONAL*: current value array. If not found the current value is calculated
-     @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline
      */
     setStroke: {
         value: function(els, value, eventType, source, currentValue) {
 
-            if(eventType === "Changing") {
-                this._setStroke(els, value, isFill, eventType, source);
-            } else {
+            if(eventType !== "Changing") {
                 // Calculate currentValue if not found for each element
                 if(!currentValue) {
-                    var that = this;
+                    var that = this,
+                        val = value;
                     currentValue = els.map(function(item) {
-                        return that.getStroke(item);
+                        return that.getStroke(item, val);
                     });
                 }
+                document.application.undoManager.add("Set stroke", this.setStroke, this, els, currentValue, eventType, source, value);
+            }
 
-                var command = Montage.create(Command, {
-                    _els:               { value: els },
-                    _value:             { value: value },
-                    _previous:          { value: currentValue },
-                    _eventType:         { value: eventType},
-                    _source:            { value: "undo-redo"},
-                    description:        { value: "Set Color"},
-                    receiver:           { value: this},
-
-                    execute: {
-                        value: function(senderObject) {
-                            if(senderObject) this._source = senderObject;
-                            this.receiver._setStroke(this._els, this._value, this._eventType, this._source);
-                            this._source = "undo-redo";
-                            return "";
-                        }
-                    },
-
-                    unexecute: {
-                        value: function() {
-                            this.receiver._setStroke(this._els, this._previous, this._eventType, this._source);
-                            return "";
-                        }
-                    }
-                });
-
-                NJevent("sendToUndo", command);
-                command.execute(source);
+            for(var i=0, item; item = els[i]; i++) {
+                item.elementModel.controller["setStroke"](item, (value[i] || value), eventType, source);
             }
 
+            NJevent("element" + eventType, {type : "setStroke", source: source, data: {"els": els, "prop": "stroke", "value": value}, redraw: null});
         }
     },
 
-    _setStroke: {
-        value: function(els, value, eventType, source) {
+    getFill: {
+        value: function(el, fillProperties) {
+            return el.elementModel.controller["getFill"](el, fillProperties);
+        }
+    },
+
+    /**
+     Set fill/background properties for an element or array of elements
+     @param els: Array of elements. Can contain 1 or more elements
+     @param value: Value to be set. This is the fill info
+     @param eventType: Change/Changing. Will be passed to the dispatched event
+     @param source: String for the source object making the call
+     @param currentValue *OPTIONAL*: current value array. If not found the current value is calculated
+     */
+    setFill: {
+        value: function(els, value, eventType, source, currentValue) {
+
+            if(eventType !== "Changing") {
+                // Calculate currentValue if not found for each element
+                if(!currentValue) {
+                    var that = this,
+                        val = value;
+                    currentValue = els.map(function(item) {
+                        return that.getFill(item, val);
+                    });
+                }
+                document.application.undoManager.add("Set fill", this.setFill, this, els, currentValue, eventType, source, value);
+            }
+
             for(var i=0, item; item = els[i]; i++) {
-                item.elementModel.controller["setStroke"](item, value);
+                item.elementModel.controller["setFill"](item, (value[i] || value));
             }
 
-            NJevent("element" + eventType, {type : "setStroke", source: source, data: {"els": els, "prop": "stroke", "value": value}, redraw: null});
+            NJevent("element" + eventType, {type : "setFill", source: source, data: {"els": els, "prop": "fill", "value": value}, redraw: null});
         }
     },
 
diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js
index 4dbf32d5..c9e10896 100644
--- a/js/mediators/io-mediator.js
+++ b/js/mediators/io-mediator.js
@@ -10,49 +10,58 @@ var Montage = 			require("montage/core/core").Montage,
         Component =             require("montage/ui/component").Component,
         FileIo =                        require("js/io/system/fileio").FileIo,
         ProjectIo =             require("js/io/system/projectio").ProjectIo,
-        TemplateCreator =       require("node_modules/tools/template/template-creator").TemplateCreator;
+        TemplateMediator =      require("js/document/mediators/template").TemplateDocumentMediator;
 ////////////////////////////////////////////////////////////////////////
 //
 exports.IoMediator = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     hasTemplate: {
-        enumerable: false,
         value: false
     },
     ////////////////////////////////////////////////////////////////////
     //
     deserializedFromTemplate: {
-        enumerable: false,
         value: function () {
             //
         }
     },
     ////////////////////////////////////////////////////////////////////
     //
+    tmplt: {
+        value: TemplateMediator
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
     fio: {
-        enumerable: false,
         value: FileIo
     },
     ////////////////////////////////////////////////////////////////////
     //
     pio: {
-        enumerable: false,
         value: ProjectIo
     },
     ////////////////////////////////////////////////////////////////////
     //
-    getAppTemplatesUrlRegEx: {
-        enumerable: false,
-        value: function () {
-            var regex = new RegExp(chrome.extension.getURL('js/document/templates/montage-html').replace(/\//gi, '\\\/'), 'gi');
-            return regex;
-        }
+    parseToTemplate: {
+            value: function(content, template) {
+                    //
+            if (template.name.toLowerCase() === 'banner' || template.name.toLowerCase() === 'animation') {
+                //Getting dimensions of banner
+                        var dimensions = template.id.split('x');
+                dimensions = {width: String(dimensions[0])+'px', height: String(dimensions[1])+'px'};
+                //
+                content = content.replace(/Dimensions@@@/gi, "Dimensions@@@"+template.id);
+                content = content.replace(/ninja-banner {}/gi, "ninja-banner {overflow: visible; width: "+dimensions.width+"; height: "+dimensions.height+"}");
+                content = content.replace(/ninja-content-wrapper {}/gi, "ninja-content-wrapper {overflow: hidden; width: "+dimensions.width+"; height: "+dimensions.height+"}");
+            }
+            //
+            return content;
+            }
     },
     ////////////////////////////////////////////////////////////////////
     //
     fileNew: {
-        enumerable: false,
         value: function (file, url, callback, template) {
             //Loading template from template URL
             var xhr = new XMLHttpRequest(), result;
@@ -60,7 +69,7 @@ exports.IoMediator = Montage.create(Component, {
             xhr.send();
             if (xhr.readyState === 4) {
                 //Making call to create file, checking for return code