4 files changed, 83 insertions, 49 deletions

diff --git a/js/stage/stage-deps.js b/js/stage/stage-deps.js
index 33ba2359..1825eb06 100755
--- a/js/stage/stage-deps.js
+++ b/js/stage/stage-deps.js
@@ -95,12 +95,6 @@ exports.StageDeps = Montage.create(Component, {
     handleAppLoaded: {
         value: function() {
 
-            Object.defineBinding(this, "currentDocument", {
-                boundObject: this.application.ninja,
-                boundObjectPropertyPath: "currentDocument",
-                oneway: true
-            });
-
             Object.defineBinding(this, "userContentLeft", {
                 boundObject: this.stage,
                 boundObjectPropertyPath: "_userContentLeft",
diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js
index 518c3bdd..ba94fadf 100755
--- a/js/stage/stage-view.reel/stage-view.js
+++ b/js/stage/stage-view.reel/stage-view.js
@@ -25,32 +25,12 @@ exports.StageView = Montage.create(Component, {
         }
     },
 
-    templateDidLoad: {
-        value: function() {
-            this.eventManager.addEventListener("appLoaded", this, false);
-        }
-    },
-
     didDraw:{
         value: function() {
             if(!this.application.ninja.documentController._textHolder) this.application.ninja.documentController._textHolder = this.element;
         }
     },
 
-    handleAppLoaded: {
-        value: function() {
-
-            // Don't bind for now
-            /*
-            Object.defineBinding(this, "docs", {
-              boundObject: this.application.ninja.documentController,
-              boundObjectPropertyPath: "_documents"
-            });
-            */
-
-        }
-    },
-
     /**
      * Public method
      * Creates a textarea element which will contain the content of the opened text document.
@@ -140,7 +120,22 @@ exports.StageView = Montage.create(Component, {
             }
 
             this.application.ninja.stage._scrollFlag = false;    // TODO HACK to prevent type error on Hide/Show Iframe
-            this.application.ninja.documentController._showCurrentDocument();
+
+
+//            this.application.ninja.documentController._showCurrentDocument();
+            // Inline function below
+            if(this.activeDocument) {
+                this.activeDocument.container.style["display"] = "block";
+                if(this.activeDocument.currentView === "design"){
+                    this.activeDocument.container.parentNode.style["display"] = "block";
+                    this.activeDocument.restoreAppState();
+                } else {
+                    //hide the iframe when switching to code view
+                    document.getElementById("iframeContainer").style.display = "none";
+                }
+            }
+
+
             //focus editor
             if(!!this.application.ninja.documentController.activeDocument && !!this.application.ninja.documentController.activeDocument.editor){
                 this.application.ninja.documentController.activeDocument.editor.focus();
@@ -172,17 +167,6 @@ exports.StageView = Montage.create(Component, {
         }
     },
 
-    hideOtherDocuments:{
-        value:function(docUuid){
-            this.application.ninja.documentController._documents.forEach(function(aDoc){
-                if(aDoc.currentView === "design"){
-                    aDoc.container.parentNode.style["display"] = "none";
-                }else if((aDoc.currentView === "code") && (aDoc.uuid !== docUuid)){
-                    aDoc.container.style["display"] = "none";
-                }
-            }, this);
-        }
-    },
     showRulers:{
         value:function(){
             this.application.ninja.rulerTop.style.display = "block";
@@ -200,7 +184,7 @@ exports.StageView = Montage.create(Component, {
             if(isCodeView === true) {
                 this.application.ninja.editorViewOptions.element.style.display = "block";
                 this.application.ninja.documentBar.element.style.display = "none";
-            }else{
+            } else {
                 this.application.ninja.documentBar.element.style.display = "block";
                 this.application.ninja.editorViewOptions.element.style.display = "none";
             }
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 30c3d231..88cd6149 100755
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -22,6 +22,9 @@
                 "prototype": "js/stage/stage-deps",
                 "properties": {
                     "stage": {"@": "owner"}
+                },
+                "bindings": {
+                    "currentDocument": {"<-": "@owner.activeDocument"}
                 }
             },
 
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index deed4112..cac99326 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -164,6 +164,60 @@ exports.Stage = Montage.create(Component, {
         set: function(value) { this._userContentBorder = value; }
     },
 
+    _activeDocument : {
+        value : null,
+        enumerable : false
+    },
+
+    activeDocument : {
+        get : function() {
+            return this._activeDocument;
+        },
+        set : function(document) {
+            ///// If the document is null set default stylesheets to null
+
+            if(!document) {
+                return false;
+            }
+
+            ///// setting document via binding
+            this._activeDocument = document;
+
+        },
+        enumerable : false
+    },
+
+    _userPaddingLeft: { value: 0 },
+    _userPaddingTop: { value: 0 },
+
+    userPaddingLeft: {
+        get: function() { return this._userPaddingLeft; },
+        set: function(value) {
+            this._userPaddingLeft = value;
+            this._documentOffsetLeft = -value;
+            if(!this._documentRoot) {
+                this._documentRoot = this.application.ninja.currentDocument.documentRoot;
+            }
+            this._documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px";
+            this.userContentLeft = this._documentOffsetLeft;
+            this.updatedStage = true;
+        }
+    },
+
+    userPaddingTop: {
+        get: function() { return this._userPaddingTop; },
+        set: function(value) {
+            this._userPaddingTop = value;
+            this._documentOffsetTop = -value;
+            if(!this._documentRoot) {
+                this._documentRoot = this.application.ninja.currentDocument.documentRoot;
+            }
+            this._documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px";
+            this.userContentTop = this._documentOffsetTop;
+            this.updatedStage = true;
+        }
+    },
+
     willDraw: {
         value: function() {
             if(this.resizeCanvases) {
@@ -264,8 +318,8 @@ exports.Stage = Montage.create(Component, {
 
                 this._scrollLeft = 0;
                 this._scrollTop = 0;
-                this._userContentLeft = 0;
-                this._userContentTop = 0;
+                this._userContentLeft =  this._documentOffsetLeft;
+                this._userContentTop =  this._documentOffsetTop;
 
                 this._maxHorizontalScroll = this._documentRoot.scrollWidth - this._canvas.width - 11;
                 this._maxVerticalScroll = this._documentRoot.scrollHeight - this._canvas.height - 11;
@@ -277,7 +331,7 @@ exports.Stage = Montage.create(Component, {
             // TODO - We will need to modify this once we support switching between multiple documents
             this.application.ninja.toolsData.selectedToolInstance._configure(true);
 
-            this.addEventListener("change@appModel.show3dGrid", this, false);
+            this.addPropertyChangeListener("appModel.show3dGrid", this, false);
 
             this.layout.handleOpenDocument();
         }
@@ -286,10 +340,9 @@ exports.Stage = Montage.create(Component, {
     /**
     * Event handler for the change @ 3DGrid
     */
-    handleEvent: {
-        value: function(e) {
-            if(e.type === "change@appModel.show3dGrid") {
+    handleChange: {
+        value: function(notification) {
+            if("appModel.show3dGrid" === notification.currentPropertyPath) {