4 files changed, 87 insertions, 36 deletions

diff --git a/js/stage/layout.js b/js/stage/layout.js
index 7b6e47e7..71296405 100755
--- a/js/stage/layout.js
+++ b/js/stage/layout.js
@@ -23,6 +23,30 @@ exports.Layout = Montage.create(Component, {
     drawFillColor: { value: 'rgba(255,255,255,1)' },
     ctxLineWidth: { value: 0.2 },
 
+    _currentDocument: {
+        value : null,
+        enumerable : false
+    },
+
+    currentDocument : {
+        get : function() {
+            return this._currentDocument;
+        },
+        set : function(value) {
+            if (value === this._currentDocument) {// || value.getProperty("currentView") !== "design") {
+                return;
+            }
+
+            this._currentDocument = value;
+
+            if(!value) {
+
+            } else if(this._currentDocument.currentView === "design") {
+                this.elementsToDraw = this._currentDocument.model.documentRoot.childNodes;
+            }
+        }
+    },
+
     _layoutView: {
         value: "layoutAll"
     },
@@ -58,15 +82,6 @@ exports.Layout = Montage.create(Component, {
         }
     },
 
-    handleOpenDocument: {
-        value: function() {
-            // Initial elements to draw are the childrens of the root element
-            if(this.application.ninja.documentController.activeDocument.currentView === "design") {
-                this.elementsToDraw = this.application.ninja.documentController.activeDocument.model.documentRoot.childNodes;
-            }
-        }
-    },
-
     // Redraw stage only once after all deletion is completed
     handleElementsRemoved: {
         value: function(event) {
@@ -79,11 +94,11 @@ exports.Layout = Montage.create(Component, {
         value: function(event) {
             var containerIndex;
 
-            if(this.application.ninja.documentController.activeDocument === null){
+            if(this.currentDocument === null){
                 return;
             }
 
-            if(this.application.ninja.documentController.activeDocument.currentView === "design"){
+            if(this.currentDocument.currentView === "design"){
                 // Make an array copy of the line node list which is not an array like object
                 this.domTree = this.application.ninja.currentDocument.model.views.design.getLiveNodeList(true);
                 // Index of the current container
@@ -218,7 +233,7 @@ exports.Layout = Montage.create(Component, {
             if(this.layoutView === "layoutAll") {
                 this.ctx.strokeStyle = 'rgba(0,0,0,1)'; // Black Stroke
                 this.ctx.strokeRect(bounds3D[0][0]+5.5, bounds3D[0][1]-15.5, 70, 11);
-                this.ctx.fillStyle = 'rgba(255,255,255,1)' // White Fill
+                this.ctx.fillStyle = 'rgba(255,255,255,1)'; // White Fill
                 this.ctx.fillRect(bounds3D[0][0]+6, bounds3D[0][1]-15, 69, 10);
 
                 this.ctx.fillStyle = 'rgba(0,0,0,1)';
diff --git a/js/stage/stage-deps.js b/js/stage/stage-deps.js
index b45315b7..709c0201 100755
--- a/js/stage/stage-deps.js
+++ b/js/stage/stage-deps.js
@@ -14,6 +14,37 @@ var Montage = 			require("montage/core/core").Montage,
     VecUtils =                  require("js/helper-classes/3D/vec-utils").VecUtils;
 
 exports.StageDeps = Montage.create(Component, {
+
+    _currentDocument: {
+        value : null,
+        enumerable : false
+    },
+
+    currentDocument : {
+        get : function() {
+            return this._currentDocument;
+        },
+        set : function(value) {
+            if (value === this._currentDocument) {
+                return;
+            }
+
+            this._currentDocument = value;
+
+            if(!value) {
+
+            } else if(this._currentDocument.currentView === "design") {
+                workingPlane = [0,0,1,0];
+
+                snapManager._isCacheInvalid = true;
+                snapManager.setupDragPlaneFromPlane (workingPlane);
+
+                drawUtils.initializeFromDocument();
+            }
+
+        }
+    },
+
     viewUtils: {
         value: viewUtils
     },
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index a819fc79..1b5cec17 100755
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -18,25 +18,25 @@
                 }
             },
 
-            "StageDeps1": {
+            "stageDeps": {
                 "prototype": "js/stage/stage-deps",
                 "properties": {
                     "stage": {"@": "owner"}
+                },
+                "bindings": {
+                    "currentDocument": {"<-": "@owner.currentDocument"}
                 }
             },
 
-            "layout1": {
+            "layout": {
                 "prototype": "js/stage/layout",
                 "properties": {
                     "canvas": {"#": "layoutCanvas"},
                     "stage": {"@": "owner"}
                 },
                 "bindings": {
-                    "layoutView": {
-                        "boundObject": {"@": "owner" },
-                        "boundObjectPropertyPath": "appModel.layoutView",
-                        "oneway": true
-                    }
+                    "layoutView": {"<-": "@owner.appModel.layoutView"},
+                    "currentDocument": {"<-": "@owner.currentDocument"}
                 }
             },
 
@@ -60,8 +60,8 @@
                     "_gridCanvas":  {"#": "gridCanvas"},
                     "_canvas":  {"#": "stageCanvas"},
                     "_drawingCanvas":  {"#": "drawingCanvas"},
-                    "stageDeps": {"@": "StageDeps1"},
-                    "layout":   {"@": "layout1"},
+                    "stageDeps": {"@": "stageDeps"},
+                    "layout":   {"@": "layout"},
                                         "stageView": {"@": "stageView"},
                     "textTool": {"@": "textTool"},
                     "focusManager": {"@": "focusManager"}
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 7025c692..4505ff66 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -161,28 +161,35 @@ exports.Stage = Montage.create(Component, {
         set: function(value) { this._userContentBorder = value; }
     },
 
-    _activeDocument : {
-        value : null,
-        enumerable : false
+    _currentDocument: {
+        value : null
     },
 
-    activeDocument : {
+    currentDocument : {
         get : function() {
-            return this._activeDocument;
+            return this._currentDocument;
         },
-        set : function(document) {
-            ///// If the document is null set default stylesheets to null
+        set : function(value) {
+            if (value === this._currentDocument) {
+                return;
+            }
 
-            if(!document) {
-                return false;
+            if(!this._currentDocument && value.currentView === "design") {
+                this.showRulers();
+                this.hideCanvas(false);
             }
 
-            ///// setting document via binding
-            this._activeDocument = document;
+            this._currentDocument = value;
 
+            if(!value) {
+                this.hideRulers();
+                this.hideCanvas(true);
+            } else if(this._currentDocument.currentView === "design") {
+                this.clearAllCanvas();
+                this.initWithDocument(false);
+            }
+        }
         },
-        enumerable : false
-    },
 
     _userPaddingLeft: { value: 0 },
     _userPaddingTop: { value: 0 },
@@ -283,8 +290,6 @@ exports.Stage = Montage.create(Component, {
         value: function(didSwitch) {
             var designView = this.application.ninja.currentDocument.model.views.design;
 
-            this.hideCanvas(false);
-