3 files changed, 159 insertions, 90 deletions

diff --git a/js/stage/stage.reel/stage.css b/js/stage/stage.reel/stage.css
index 54b9761b..13537ba1 100755
--- a/js/stage/stage.reel/stage.css
+++ b/js/stage/stage.reel/stage.css
@@ -10,4 +10,49 @@
     box-flex: 1;
     position: relative;
     overflow: hidden;
-}
\ No newline at end of file
+}
+
+.codeViewContainer {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  margin: 0px;
+  padding: 0px;
+  background-color: #ffffff;
+  width: 100%;
+  height: 100%;
+  overflow:auto;
+  cursor:text;
+}
+
+.codeViewContainer .CodeMirror {
+    width: 100%;
+    height: 100%;
+    background: white;
+}
+
+.codeViewContainer .CodeMirror-scroll {
+    height: 100%;
+    overflow: 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 }
+div.CodeMirror span.CodeMirror-matchingbracket {color: #000 !important;background-color: #ffd500;}
+.CodeMirror-completions select {background-color:#e8f2ff;border:1px solid #c1c1c1;box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.8);}
+.CodeMirror-completions {z-index:6001 !important;}
+
+.cm-s-default .activeline {background: #e8f2ff; !important}
+.cm-s-eclipse .activeline {background: #e8f2ff; !important}
+.cm-s-elegant .activeline {background: #e8f2ff; !important}
+.cm-s-neat .activeline {background: #e8f2ff; !important}
+.cm-s-night .activeline {background: #8da6ce; !important}
+.cm-s-cobalt .activeline {background: #8da6ce; !important}
+.cm-s-monokai .activeline {background: #8da6ce; !important}
+.cm-s-rubyblue .activeline {background: #3E7087; !important}
+.cm-s-lesser-dark .activeline {background: #8da6ce; !important}
+.cm-s-xq-dark .activeline {background: #8da6ce; !important}
\ No newline at end of file
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 30c3d231..7a9619cd 100755
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -11,32 +11,22 @@
 
     <script type="text/montage-serialization">
         {
-            "stageView" : {
-                "prototype": "js/stage/stage-view.reel",
-                "properties": {
-                    "element": {"#": "stageView"}
-                }
-            },
-
-            "StageDeps1": {
+            "stageDeps": {
                 "prototype": "js/stage/stage-deps",
                 "properties": {
                     "stage": {"@": "owner"}
                 }
             },
 
-            "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"}
                 }
             },
 
@@ -57,11 +47,11 @@
                     "element":          {"#": "stageAndScenesContainer"},
                     "_iframeContainer":  {"#": "iframeContainer"},
                     "_layoutCanvas":  {"#": "layoutCanvas"},
+                    "_gridCanvas":  {"#": "gridCanvas"},
                     "_canvas":  {"#": "stageCanvas"},
                     "_drawingCanvas":  {"#": "drawingCanvas"},
-                    "stageDeps": {"@": "StageDeps1"},
-                    "layout":   {"@": "layout1"},
-                                        "stageView": {"@": "stageView"},
+                    "stageDeps": {"@": "stageDeps"},
+                    "layout":   {"@": "layout"},
                     "textTool": {"@": "textTool"},
                     "focusManager": {"@": "focusManager"}
                 },
@@ -80,9 +70,10 @@
 <body>
 
     <section data-montage-id="stageAndScenesContainer" class="stageAndScenesContainer">
-        <section data-montage-id="stageView"></section>
+        <section id="codeViewContainer" class="codeViewContainer"></section>
         <section data-montage-id="iframeContainer" id="iframeContainer"></section>
         <section data-montage-id="textToolObject"></section>
+        <canvas data-montage-id="gridCanvas" class="gridCanvas"></canvas>
         <canvas data-montage-id="layoutCanvas" class="layoutCanvas"></canvas>
         <canvas data-montage-id="stageCanvas" class="stageCanvas"></canvas>
         <canvas data-montage-id="drawingCanvas" class="drawingCanvas"></canvas>
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index c7afb95c..d8f7313b 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -97,6 +97,12 @@ exports.Stage = Montage.create(Component, {
     _layoutCanvas: { value: null },
     layoutCanvas: { get: function() { return this._layoutCanvas; } },
 
+    _gridCanvas: { value: null },
+    gridCanvas: { get: function() { return this._gridCanvas; } },
+
+    _gridContext: { value: null },
+    gridContext: { get: function() { return this._gridContext; } },
+
     _drawingCanvas: { value: null },
     drawingCanvas: { get: function() { return this._drawingCanvas; } },
 
@@ -155,27 +161,49 @@ 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(!this._currentDocument && value.currentView === "design") {
+                this.showRulers();
+                this.hideCanvas(false);
+            }
 
-            if(!document) {
-                return false;
+            if(this.currentDocument && (this.currentDocument.currentView === "design")) {
+                this.currentDocument.model.scrollLeft = this._scrollLeft;
+                this.currentDocument.model.scrollTop = this._scrollTop;
             }
 
-            ///// setting document via binding
-            this._activeDocument = document;
+            this._currentDocument = value;
 
-        },
-        enumerable : false
+            if(!value) {
+                this.hideRulers();
+                this.hideCanvas(true);
+                drawUtils._eltArray.length = 0;
+                drawUtils._planesArray.length = 0;
+            } else if(this._currentDocument.currentView === "design") {
+                this.restoreAllPanels();
+                this.hideCanvas(false);
+                this.showRulers();
+
+                this.clearAllCanvas();
+                this.initWithDocument();
+            } else {
+                this.collapseAllPanels();
+                this.hideCanvas(true);
+                this.hideRulers();
+            }
+        }
     },
 
     _userPaddingLeft: { value: 0 },
@@ -186,8 +214,8 @@ exports.Stage = Montage.create(Component, {
         set: function(value) {
             this._userPaddingLeft = value;
             this._documentOffsetLeft = -value;
-            this.application.ninja.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px";
-            this.userContentLeft = this._documentOffsetLeft;
+            this.currentDocument.model.documentRoot.ownerDocument.getElementsByTagName("HTML")[0].style["padding-left"] = -value + "px";
+            this.userContentLeft = this._documentOffsetLeft - this._scrollLeft;
             this.updatedStage = true;
         }
     },
@@ -197,8 +225,8 @@ exports.Stage = Montage.create(Component, {
         set: function(value) {
             this._userPaddingTop = value;
             this._documentOffsetTop = -value;