7 files changed, 83 insertions, 49 deletions

diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js
index e396bdbf..c1b021a3 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.js
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.js
@@ -23,7 +23,7 @@ exports.Breadcrumb = Montage.create(Component, {
         value: function(){
             if(!this.application.ninja.documentController.activeDocument) {
                 this.disabled = true;
-                this.application.ninja.currentSelectedContainer = this.application.ninja.currentDocument.documentRoot;
+                this.application.ninja.currentSelectedContainer = (this.application.ninja.currentDocument ? this.application.ninja.currentDocument.documentRoot : null);
             }
         }
     },
diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index ed4d33eb..17ae8cc3 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -440,10 +440,6 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
 
     closeDocument: {
         value: function(id) {
-            if(this.activeDocument.needsSave === true){
-                //if file dirty then alert user to save
-        }
-
             var doc = this._findDocumentByUUID(id);
 
             var closeDocumentIndex = this._findIndexByUUID(id);
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index ec4314f9..647c0870 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -1102,7 +1102,7 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 ///// The dominant rule might not have the style property defined - why?
                 ///// If no rules have the property defined, we can use the
                 ///// most-specific single-target rule as the dominant rule (for setting styles)
-                return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
+                return (element.ownerDocument.defaultView ? element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property) : null);
             }
 
             return value;
diff --git a/js/document/templates/montage-web/index.html b/js/document/templates/montage-web/index.html
index 3d550768..e02d8d8e 100755
--- a/js/document/templates/montage-web/index.html
+++ b/js/document/templates/montage-web/index.html
@@ -33,6 +33,11 @@
                                 -webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                         }
 
+            html {
+                overflow: scroll;
+                padding: 0 11px 11px 0;
+            }
+
             html, body {
                 width: 100%;
                 height: 100%;
diff --git a/js/stage/stage-view.reel/stage-view.css b/js/stage/stage-view.reel/stage-view.css
index e2c4bb0e..8afb52a2 100755
--- a/js/stage/stage-view.reel/stage-view.css
+++ b/js/stage/stage-view.reel/stage-view.css
@@ -17,29 +17,20 @@
   cursor:text;
 }
 
-.codeViewContainer>div{
-    width:2500px;/*to prevent scrolling of editor container in the middle of the page for short files*/
+.codeViewContainer .CodeMirror {
+    width: 100%;
+    height: 100%;
+    background: white;
 }
 
-/* OLD CSS for reference
-#mainContent #codeMirror_1 {
-    height:100%;
+.codeViewContainer .CodeMirror-scroll {
+    height: 100%;
+    overflow: auto;
 }
-*/
-
-/*.CodeMirror {*/
-    /*width: 100%;*/
-    /*height: 100%;*/
-    /*background: white;*/
-/*}*/
-
-/*.CodeMirror .CodeMirror-scroll {*/
-    /*height: 100%;*/
-    /*overflow: scroll;*/
-    /*overflow-x: auto;*/
-    /*overflow-y: auto;*/
-/*}*/
 
+.codeViewContainer>div{
+    width:2500px;/*to prevent scrolling of editor container in the middle of the page for short files*/
+}
 
 span.CodeMirror-matchhighlight { background: #e9e9e9 }
 .CodeMirror-focused span.CodeMirror-matchhighlight { background: #e7e4ff; !important }
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 171c4f36..dc6444ff 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -118,6 +118,9 @@ exports.Stage = Montage.create(Component, {
     _userContentTop:        { value: 0 },
     _userContentBorder:     { value: 0 },
 
+    _maxHorizontalScroll:   { value: 0 },
+    _maxVerticalScroll:     { value: 0 },
+
     documentRoot: {
         get: function () { return this._documentRoot; },
         set: function(value) { this._documentRoot = value; }
@@ -264,7 +267,9 @@ exports.Stage = Montage.create(Component, {
                 this._userContentLeft = 0;
                 this._userContentTop = 0;
 
-                //this.application.ninja.currentDocument._window.addEventListener("scroll", this, false);
+                this._maxHorizontalScroll = this._documentRoot.scrollWidth - this._canvas.width - 11;
+                this._maxVerticalScroll = this._documentRoot.scrollHeight - this._canvas.height - 11;
+                this.application.ninja.currentDocument.model.views.design.iframe.contentWindow.addEventListener("scroll", this, false);
             }
 
 
@@ -464,6 +469,12 @@ exports.Stage = Montage.create(Component, {
 
                 this.userContentLeft = -this._scrollLeft;
                 this.userContentTop = -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._documentRoot.scrollWidth - this._canvas.width - 11;
+//                this._maxVerticalScroll = this._documentRoot.scrollHeight - this._canvas.height - 11;
             }
 
             // Need to clear the snap cache and set up the drag plane
@@ -540,13 +551,16 @@ exports.Stage = Montage.create(Component, {
      */
     getElement: {
         value: function(position, selectable) {
-            var point, element;
+            var point, element,
+                docView = this.application.ninja.currentDocument.model.views.design;
 
-            point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX, position.pageY));
-            element = this.application.ninja.currentDocument.model.views.design.getElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop);
+            point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX - docView.iframe.contentWindow.pageXOffset, position.pageY - docView.iframe.contentWindow.pageYOffset));
+            element = this.application.ninja.currentDocument.model.views.design.getElementFromPoint(point.x - this.userContentLeft,point.y - this.userContentTop);
 
+            if(!element) debugger;
             // workaround Chrome 3d bug
             if(this.application.ninja.toolsData.selectedToolInstance._canSnap && this.application.ninja.currentDocument.inExclusion(element) !== -1) {
+                point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX, position.pageY));
                 element = this.getElementUsingSnapping(point);
             }
 
@@ -877,7 +891,7 @@ exports.Stage = Montage.create(Component, {
                     //TODO - Maybe move to mediator.
                                         var newVal = value/100.0;
                                         if (newVal >= 1)
-                                                this.application.ninja.currentDocument.iframe.style.zoom = value/100;
+                                                this.application.ninja.currentDocument.model.views.design.iframe.style.zoom = value/100;
 
                     this.updatedStage = true;
 
diff --git a/js/tools/PanTool.js b/js/tools/PanTool.js
index ce7606a1..132ac0b1 100755
--- a/js/tools/PanTool.js
+++ b/js/tools/PanTool.js
@@ -21,6 +21,9 @@ exports.PanTool = Montage.create(toolBase,
         _lastGPt :{value: [0,0], writable:true},
         _lastY :{value: 0, writable:true},
 
+        _maxHorizontalScroll: {value: 0, writable:true},
+        _maxVerticalScroll: {value: 0, writable:true},
+
     Configure: {
         value: function ( doActivate )
                 {
@@ -43,10 +46,19 @@ exports.PanTool = Montage.create(toolBase,
 
     HandleLeftButtonDown: {
         value : function ( event ) {
-            this._isDrawing = true;
-                        this.isDrawing = true;
- 
-                                this.mouseDown( event );
+            // Determine the maximum horizontal and vertical scroll values
+            this._maxHorizontalScroll = this.application.ninja.currentDocument.documentRoot.scrollWidth - this.application.ninja.stage._canvas.width - 11;
+            this._maxVerticalScroll = this.application.ninja.currentDocument.documentRoot.scrollHeight - this.application.ninja.stage._canvas.height - 11;
+            if((this._maxHorizontalScroll > 0) || (this._maxVerticalScroll > 0) || this._altKeyDown)
+            {
+                this._isDrawing = true;
+                this.isDrawing = true;
+                this.mouseDown( event );
+            }
+//            else
+//            {
+//                console.log("nothing to scroll");