9 files changed, 21 insertions, 21 deletions

diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
index 4c0a3611..b4a803b2 100755
--- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
+++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js
@@ -87,7 +87,7 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre
 
     populateStyleSheetList: {
         value: function() {
-            this.sections.sheets.doc = this.application.ninja.currentDocument._document;
+            this.sections.sheets.doc = this.application.ninja.currentDocument.model.views.design.document;
             var styleTagCount = 0,
                 sect          = this.sections.sheets,
                 sheetsArray   = nj.toArray(sect.doc.styleSheets),
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 2c02e544..c55e5a24 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -598,11 +598,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 // But what if we're opening an existing document?
                 if (!this.application.ninja.documentController.creatingNewFile && this.application.ninja.currentDocument.currentView !== "code") {
                     // Opening an existing document. If it has DOM elements we need to restore their timeline info
-                    if (this.application.ninja.currentDocument.documentRoot.children[0]) {
+                    if (this.application.ninja.currentDocument.model.documentRoot.children[0]) {
                         // Yes, it has DOM elements. Loop through them and create a new object for each.
-                        for (myIndex = 0; this.application.ninja.currentDocument.documentRoot.children[myIndex]; myIndex++) {
+                        for (myIndex = 0; this.application.ninja.currentDocument.model.documentRoot.children[myIndex]; myIndex++) {
                             this._openDoc = true;
-                            this.restoreLayer(this.application.ninja.currentDocument.documentRoot.children[myIndex]);
+                            this.restoreLayer(this.application.ninja.currentDocument.model.documentRoot.children[myIndex]);
                         }
                     }
                 }
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 3d83dc36..ff684446 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -434,7 +434,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
     didDraw:{
         value:function () {
             if ((!this.application.ninja.documentController.creatingNewFile)||(!this.application.ninja.currentDocument.setLevel)) {
-                if (this.application.ninja.currentDocument.documentRoot.children[0]) {
+                if (this.application.ninja.currentDocument.model.documentRoot.children[0]) {
                     var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
                     if (selectedIndex !== false) {
                             if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) {
@@ -588,7 +588,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                     trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration");
                     this.nextKeyframe = 0;
 
-                    this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document);
+                    this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument.model.views.design.document);
 
                     for (i =0; this.currentKeyframeRule[i] ;i++) {
                         var newTween = {};
diff --git a/js/panels/components-panel.reel/components-panel.js b/js/panels/components-panel.reel/components-panel.js
index e028d1db..3ad1763d 100755
--- a/js/panels/components-panel.reel/components-panel.js
+++ b/js/panels/components-panel.reel/components-panel.js
@@ -398,8 +398,8 @@ exports.ComponentsPanel = Montage.create(Component, {
             //if(!this.centerStage) {
                 var top, left;
 
-                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);
+                top = (this.application.ninja.stage.canvas.height / 2); // ~~((parseFloat(this.application.ninja.elementMediator.getProperty(this.application.ninja.currentDocument.model.documentRoot, "height"))) / 2);
+                left = (this.application.ninja.stage.canvas.width / 2); //~~((parseFloat(this.application.ninja.elementMediator.getProperty(this.application.ninja.currentDocument.model.documentRoot, "width"))) / 2);
                 //this.centerStage = [top, left];
                 return [left, top];
             //}
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js
index 5229b92e..454008fa 100644
--- a/js/panels/css-panel/styles-view-delegate.js
+++ b/js/panels/css-panel/styles-view-delegate.js
@@ -30,7 +30,7 @@ exports.StylesViewDelegate = Montage.create(Component, {
         value: function(selector, direction) {
             if(!selector) { return false; }
 
-            var elements = this.stylesController._activeDocument._document.querySelectorAll(selector),
+            var elements = this.stylesController._activeDocument.model.views.design.document.querySelectorAll(selector),
                 method = (direction === "out") ? "remove" : "add";
 
             Array.prototype.slice.call(elements).forEach(function(el) {
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index b292a66a..e3ecce10 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -73,7 +73,7 @@ exports.Properties = Montage.create(Component, {
             this.application.ninja.currentDocument.model.views.design.propertiesPanel = this;
 
             // Display the default document root PI
-            this.displayElementProperties(this.application.ninja.currentDocument.documentRoot);
+            this.displayElementProperties(this.application.ninja.currentDocument.model.documentRoot);
         }
     },
 
@@ -95,7 +95,7 @@ exports.Properties = Montage.create(Component, {
                 this.elementId.value = this.elementId.value.replace(/\s/g, '');
 
                 // Check if that id is in use
-                if(this.application.ninja.currentDocument._document.getElementById(this.elementId.value) !== null) {
+                if(this.application.ninja.currentDocument.model.views.design.document.getElementById(this.elementId.value) !== null) {
                     // TODO: Replace with Ninja Alert
                     alert("The following ID: " + this.elementId.value + " is already in use");
                 }
@@ -104,13 +104,13 @@ exports.Properties = Montage.create(Component, {
 //                    ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi");
                     ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, this.application.ninja.selectedElements[0].id, "pi");
                 } else {
-                    ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id);
+                    ElementsMediator.setAttribute(this.application.ninja.currentDocument.model.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.model.documentRoot.elementModel.id);
                 }
             } else if(event.target.id === "elementClass") {
                 if(this.application.ninja.selectedElements.length) {
                     ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "class", this.elementClass.value, this.application.ninja.selectedElements[0].className, "pi");
                 } else {
-                    ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "class", this.elementClass.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.elementClass);
+                    ElementsMediator.setAttribute(this.application.ninja.currentDocument.model.documentRoot, "class", this.elementClass.value, "Change", "pi", this.application.ninja.currentDocument.model.documentRoot.elementModel.elementClass);
                 }
             }
         }
@@ -135,7 +135,7 @@ exports.Properties = Montage.create(Component, {
         value: function(event) {
 //            console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update
             if(event.detail.source && event.detail.source !== "pi") {
-                var el = this.application.ninja.currentDocument.documentRoot;
+                var el = this.application.ninja.currentDocument.model.documentRoot;
                 if(this.application.ninja.selectedElements.length) {
                     el = this.application.ninja.selectedElements[0];
                 }
@@ -161,7 +161,7 @@ exports.Properties = Montage.create(Component, {
     handleSelectionChange: {
         value: function(event) {
             if(event.detail.isDocument) {
-                this.displayElementProperties(this.application.ninja.currentDocument.documentRoot);
+                this.displayElementProperties(this.application.ninja.currentDocument.model.documentRoot);
             } else {
                 if(this.application.ninja.selectedElements.length === 1) {
                     this.displayElementProperties(this.application.ninja.selectedElements[0]);
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index b1fd910d..ae408f11 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -116,7 +116,7 @@ exports.CustomSection = Montage.create(Component, {
         value: function(event) {
             // Change the stage color for now
             //console.log(this, event);
-            ElementsMediator.setProperty([this.application.ninja.currentDocument.documentRoot], this.id, [event._event.color.css], "Change", "pi", '');
+            ElementsMediator.setProperty([this.application.ninja.currentDocument.model.documentRoot], this.id, [event._event.color.css], "Change", "pi", '');
             /*
             var propEvent = document.createEvent("CustomEvent");
             propEvent.initEvent("propertyChange", true, true);
diff --git a/js/panels/properties.reel/sections/position-size.reel/position-size.js b/js/panels/properties.reel/sections/position-size.reel/position-size.js
index 10e084be..7c24e02a 100755
--- a/js/panels/properties.reel/sections/position-size.reel/position-size.js
+++ b/js/panels/properties.reel/sections/position-size.reel/position-size.js
@@ -158,7 +158,7 @@ exports.PositionSize = Montage.create(Component, {
             if(!event.wasSetByCode) {
                 if(this.savedPosition) prevPosition = [this.savedPosition + "px"];