9 files changed, 75 insertions, 164 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index b23da749..6358a0e0 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -721,7 +721,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this.dynamicLayerName.value = this._layerEditable.value;
                         this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.dynamicLayerName.value;
                         this.needsDraw = true;
-                        this.application.ninja.documentController.activeDocument.needsSave = true;
+                        this.application.ninja.documentController.activeDocument.model.needsSave = true;
                 }
         },
         handleAddStyleClick: {
@@ -749,7 +749,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this.dynamicLayerName.value = newVal;
                         this.layerName = newVal;
                         this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = newVal;
-                        this.application.ninja.documentController.activeDocument.needsSave = true;
+                        this.application.ninja.documentController.activeDocument.model.needsSave = true;
                         this.needsDraw = true;
                 }
         },
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index d1cab096..94ca9b57 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -994,7 +994,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.arrLayers.splice(myIndex, 0, thingToPush);
 
             }
-            this.selectLayer(myIndex);
+            this.selectLayer(myIndex, false);
         }
     },
 
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index efeeba00..2c15a99c 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -568,7 +568,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 this.nextKeyframe += 1;
             }
 
-            this.application.ninja.documentController.activeDocument.needsSave = true;
+            this.application.ninja.documentController.activeDocument.model.needsSave = true;
         }
     },
 
@@ -687,7 +687,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             keyframeString += " }";
             // set the keyframe string as the new rule
             this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString);
-            this.application.ninja.documentController.activeDocument.needsSave = true;
+            this.application.ninja.documentController.activeDocument.model.needsSave = true;
         }
     },
 
diff --git a/js/panels/components-panel.reel/components-panel.js b/js/panels/components-panel.reel/components-panel.js
index 4169423b..87d5082d 100755
--- a/js/panels/components-panel.reel/components-panel.js
+++ b/js/panels/components-panel.reel/components-panel.js
@@ -278,7 +278,7 @@ exports.ComponentsPanel = Montage.create(Component, {
             that = this;
             element = this.makeComponent(component.component);
 
-            this.application.ninja.currentDocument._window.addComponent(element, {name: component.name, path: component.module}, function(instance, element) {
+            this.application.ninja.currentDocument.model.views.design.iframe.contentWindow.addComponent(element, {name: component.name, path: component.module}, function(instance, element) {
 
                 //var pos = that.getStageCenter();
 
@@ -297,7 +297,7 @@ exports.ComponentsPanel = Montage.create(Component, {
                 
                 instance.addEventListener('firstDraw', that, false);
 
-                that.application.ninja.currentDocument.setComponentInstance(instance, element);
+                that.application.ninja.currentDocument.model.setComponentInstance(instance, element);
 
                 that.application.ninja.elementMediator.addElements(element, styles);
             });
@@ -346,7 +346,7 @@ exports.ComponentsPanel = Montage.create(Component, {
                     break;
                 case "select":
                     el = document.application.njUtils.make("select", null, this.application.ninja.currentDocument);
-                    document.application.njUtils.createModelForComponent(el, "Select");
+                    document.application.njUtils.createModelForComponent(el, "SelectInput");
                     break;
                 case "radioButton":
                     el = document.application.njUtils.make("input", null, this.application.ninja.currentDocument);
@@ -366,7 +366,7 @@ exports.ComponentsPanel = Montage.create(Component, {
                     break;
                 case "textarea":
                     el = document.application.njUtils.make("textarea", null, this.application.ninja.currentDocument);
-                    document.application.njUtils.createModelForComponent(el, "TextArea");
+                    document.application.njUtils.createModelForComponent(el, "Textarea");
                     break;
                 case "toggleButton":
                     el = document.application.njUtils.make("button", null, this.application.ninja.currentDocument);
@@ -404,8 +404,8 @@ exports.ComponentsPanel = Montage.create(Component, {
             //if(!this.centerStage) {
                 var top, left;
 
-                top = ~~((parseFloat(this.application.ninja.elementMediator.getProperty(this.application.ninja.currentDocument.documentRoot, "height"))) / 2);
-                left = ~~((parseFloat(this.application.ninja.elementMediator.getProperty(this.application.ninja.currentDocument.documentRoot, "width"))) / 2);
+                top = (this.application.ninja.stage.canvas.height / 2); // ~~((parseFloat(this.application.ninja.elementMediator.getProperty(this.application.ninja.currentDocument.documentRoot, "height"))) / 2);
+                left = (this.application.ninja.stage.canvas.width / 2); //~~((parseFloat(this.application.ninja.elementMediator.getProperty(this.application.ninja.currentDocument.documentRoot, "width"))) / 2);
                 //this.centerStage = [top, left];
                 return [left, top];
             //}
diff --git a/js/panels/properties.reel/properties.html b/js/panels/properties.reel/properties.html
index 3a1ae880..ac0dab5a 100755
--- a/js/panels/properties.reel/properties.html
+++ b/js/panels/properties.reel/properties.html
@@ -38,13 +38,15 @@
                 "prototype": "js/panels/properties.reel/section.reel",
                 "properties": {
                     "element": {"#": "PosSize"},
-                    "content" : {"@": "PosSize"},
+                    "content" : {"@": "positionSize"},
                     "name" : "Position And Size"
                 }
             },
-            "PosSize": {
-                "prototype": "js/panels/properties.reel/sections/position-and-size.reel[PosSize]"
+
+            "positionSize": {
+                "prototype": "js/panels/properties.reel/sections/position-size.reel"
             },
+
             "threeDSection": {
                 "prototype": "js/panels/properties.reel/section.reel",
                 "properties": {
@@ -97,7 +99,7 @@
                     "elementName":          {"@": "elementName"},
                     "elementClass":         {"@": "elementClass"},
                     "elementId":            {"@": "elementId"},
-                    "positionSize":         {"@": "PosSize"},
+                    "positionSize":         {"@": "positionSize"},
                     "threeD":               {"@": "threeDProperties"}
                 }
             }
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 8c2daa14..3ec48687 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -67,17 +67,12 @@ exports.Properties = Montage.create(Component, {
         }
     },
 
-    // Document is opened - Display the current selection
     handleOpenDocument: {
         value: function() {
-
             this.eventManager.addEventListener( "elementChange", this, false);
 
-            // For now always assume that the stage is selected by default when opening the old template
-            // TODO: Remove marker for old template: NINJA-STAGE-REWORK
-            if(this.application.ninja.selectedElements.length === 0 && this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() !== "body") {
-                this.displayStageProperties();
-            }
+            // Display the default document root PI
+            this.displayElementProperties(this.application.ninja.currentDocument.documentRoot);
         }
     },
 
@@ -174,8 +169,7 @@ exports.Properties = Montage.create(Component, {
     handleSelectionChange: {
         value: function(event) {
             if(event.detail.isDocument) {
-                if(this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() === "body") return;
-                this.displayStageProperties();
+                this.displayElementProperties(this.application.ninja.currentDocument.documentRoot);
             } else {
                 if(this.application.ninja.selectedElements.length === 1) {