1 files changed, 62 insertions, 47 deletions

diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 69cfa7ba..c7afb95c 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -117,9 +117,6 @@ exports.Stage = Montage.create(Component, {
     _userContentTop:        { value: 0 },
     _userContentBorder:     { value: 0 },
 
-    _maxHorizontalScroll:   { value: 0 },
-    _maxVerticalScroll:     { value: 0 },
-
     viewport: {
         get: function () { return this._viewport; },
         set: function(value) { this._viewport = value; }
@@ -189,7 +186,7 @@ exports.Stage = Montage.create(Component, {
         set: function(value) {
             this._userPaddingLeft = value;
             this._documentOffsetLeft = -value;
-            this.application.ninja.currentDocument.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px";
+            this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px";
             this.userContentLeft = this._documentOffsetLeft;
             this.updatedStage = true;
         }
@@ -200,7 +197,7 @@ exports.Stage = Montage.create(Component, {
         set: function(value) {
             this._userPaddingTop = value;
             this._documentOffsetTop = -value;
-            this.application.ninja.currentDocument.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px";
+            this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-top"] = -value + "px";
             this.userContentTop = this._documentOffsetTop;
             this.updatedStage = true;
         }
@@ -235,14 +232,6 @@ exports.Stage = Montage.create(Component, {
             this._context = this._canvas.getContext("2d");
             this._drawingContext= this._drawingCanvas.getContext("2d");
 
-            this._scrollLeft = this._iframeContainer.scrollLeft;
-            this._scrollTop = this._iframeContainer.scrollTop;
-            this._userContentLeft = this._documentOffsetLeft - this._scrollLeft + this._userContentBorder;
-            this._userContentTop = this._documentOffsetTop - this._scrollTop + this._userContentBorder;
-
-            // TODO: Fix the mouse wheel scroll
-            // this._canvas.addEventListener("mousewheel", this, false);
-
             // Setup event listeners
             this._drawingCanvas.addEventListener("mousedown", this, false);
             this._drawingCanvas.addEventListener("mouseup", this, false);
@@ -256,6 +245,7 @@ exports.Stage = Montage.create(Component, {
 
 
             this.eventManager.addEventListener( "openDocument", this, false);
+            this.eventManager.addEventListener( "switchDocument", this, false);
             this.eventManager.addEventListener( "enableStageMove", this, false);
             this.eventManager.addEventListener( "disableStageMove", this, false);
 
@@ -269,30 +259,66 @@ exports.Stage = Montage.create(Component, {
     // Event details will contain the active document prior to opening a new one
     handleOpenDocument: {
         value: function(evt) {
+            this.initWithDocument();
+        }
+    },
+
+    handleSwitchDocument: {
+        value: function(evt) {
+            this.initWithDocument(true);
+        }
+    },
+
+    initWithDocument: {
+        value: function(didSwitch) {
+            var designView = this.application.ninja.currentDocument.model.views.design;
+
             this.hideCanvas(false);
 
             // Recalculate the canvas sizes because of splitter resizing
             this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ;
             this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;
 
+            designView.iframe.contentWindow.addEventListener("scroll", this, false);
+
+            this.addPropertyChangeListener("appModel.show3dGrid", this, false);
+
+            this._userPaddingLeft = 0;
+            this._userPaddingTop = 0;
+
+            this._documentOffsetLeft = 0;
+            this._documentOffsetTop  = 0;
 
-            this.userContentBorder = 0;
+            this._userContentLeft = 0;
+            this._userContentTop = 0;
 
             this._scrollLeft = 0;
             this._scrollTop = 0;
-            this._userContentLeft = this._documentOffsetLeft;
-            this._userContentTop = this._documentOffsetTop;
 
-            this._maxHorizontalScroll = this.application.ninja.currentDocument.documentRoot.scrollWidth - this._canvas.width - 11;
-            this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this._canvas.height - 11;
-            this.application.ninja.currentDocument.model.views.design.iframe.contentWindow.addEventListener("scroll", this, false);
+            this.stageDeps.handleOpenDocument();
+            this.layout.handleOpenDocument();
 
-            // TODO - We will need to modify this once we support switching between multiple documents
-            this.application.ninja.toolsData.selectedToolInstance._configure(true);
+            if(designView._template) {
+                var initialLeft = parseInt((this.canvas.width - designView._template.size.width)/2);
+                var initialTop = parseInt((this.canvas.height - designView._template.size.height)/2);
+                if(initialLeft > this.documentOffsetLeft) {
+                    this.userPaddingLeft = -initialLeft;
+                }
+                if(initialTop > this.documentOffsetTop) {
+                    this.userPaddingTop = -initialTop;
+                }
+            }
 
-            this.addPropertyChangeListener("appModel.show3dGrid", this, false);
+            if(didSwitch) {
+                this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft = this.application.ninja.currentDocument.model.scrollLeft;
+                this.application.ninja.currentDocument.model.views.design.document.body.scrollTop = this.application.ninja.currentDocument.model.scrollTop;
+                this.handleScroll();
+            } else {
+                this.centerStage();
+            }
 
-            this.layout.handleOpenDocument();
+            // TODO - We will need to modify this once we support switching between multiple documents
+            this.application.ninja.toolsData.selectedToolInstance._configure(true);
         }
     },
 
@@ -475,20 +501,10 @@ exports.Stage = Montage.create(Component, {
             this.userContentLeft = this._documentOffsetLeft - this._scrollLeft;
             this.userContentTop = this._documentOffsetTop - this._scrollTop;
 
-            // TODO - scroll events are not dependable.  We may need to use a timer to simulate
-            // scrollBegin and scrollEnd. For now, the Pan Tool will keep track of the stage's scroll values
-            // on mouse down.
-            // this._maxHorizontalScroll = this.application.ninja.currentDocument.documentRoot.scrollWidth - this._canvas.width - 11;
-            // this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this._canvas.height - 11;
-
-
             // Need to clear the snap cache and set up the drag plane
             //snapManager.setupDragPlaneFromPlane( workingPlane );
             this.stageDeps.snapManager._isCacheInvalid = true;
-
-            this.needsDraw = true;
-            this.layout.draw();
-            //this._toolsList.action("DrawHandles");
+            this.updatedStage = true;
         }
     },
 
@@ -517,16 +533,15 @@ exports.Stage = Montage.create(Component, {
      */
     centerStage: {
         value: function() {
-            if(this.application.ninja.currentDocument.documentRoot.id === "UserContent") {
-                this._iframeContainer.scrollLeft = this._documentOffsetLeft - (this._iframeContainer.offsetWidth - this.application.ninja.currentDocument.documentRoot.parentNode.offsetWidth)/2;
-                this._iframeContainer.scrollTop = this._documentOffsetTop - (this._iframeContainer.offsetHeight - this.application.ninja.currentDocument.documentRoot.parentNode.offsetHeight)/2;
-
-                this._scrollLeft = this._iframeContainer.scrollLeft;
-                this._scrollTop = this._iframeContainer.scrollTop;
+            var designView = this.application.ninja.currentDocument.model.views.design;
+            if(designView._template) {
+                designView.document.body.scrollLeft = this._documentOffsetLeft - parseInt((this.canvas.width - designView._template.size.width)/2);
+                designView.document.body.scrollTop = this._documentOffsetTop - parseInt((this.canvas.height - designView._template.size.height)/2);
             } else {
-                this._scrollLeft = this._userContentLeft = this.application.ninja.currentDocument.model.views.design.document.body.scrollLeft = 0;
-                this._scrollTop = this._userContentTop = this.application.ninja.currentDocument.model.views.design.document.body.scrollTop = 0;
+                designView.document.body.scrollLeft = this._documentOffsetLeft;
+                designView.document.body.scrollTop = this._documentOffsetTop;
             }
+            this.handleScroll();
         }
     },
 
@@ -889,7 +904,7 @@ exports.Stage = Montage.create(Component, {
 
     setStageAsViewport: {
         value: function() {
-            this.stageDeps.viewUtils.setViewportObj(this.application.ninja.currentDocument.documentRoot);
+            this.stageDeps.viewUtils.setViewportObj(this.application.ninja.currentDocument.model.documentRoot);
         }
     },
 
@@ -897,7 +912,7 @@ exports.Stage = Montage.create(Component, {
         value: function(value) {
             if(!this._firstDraw)
             {
-                var userContent = this.application.ninja.currentDocument.documentRoot;
+                var userContent = this.application.ninja.currentDocument.model.documentRoot;
                 if (userContent)
                 {
                     var w = this._canvas.width,
@@ -928,12 +943,12 @@ exports.Stage = Montage.create(Component, {
                         {
                 case "top":
                                         plane = [0,1,0,0];
-                                        plane[3] = this.application.ninja.currentDocument.documentRoot.offsetHeight / 2.0;
+                                        plane[3] = this.application.ninja.currentDocument.model.documentRoot.offsetHeight / 2.0;