78 files changed, 1505 insertions, 2552 deletions

diff --git a/css/ninja.css b/css/ninja.css
index 682dfc9d..ce27977b 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -198,11 +198,13 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
 
 #iframeContainer { position: absolute; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 100%; height: 100%; overflow: scroll; background: gray; }
 
-.drawingCanvas { position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; z-index: 6; }
+.drawingCanvas { position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; z-index: 7; }
 
-.stageCanvas { position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; z-index: 5; }
+.stageCanvas { position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; z-index: 6; }
 
-.layoutCanvas { position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; z-index: 4; }
+.layoutCanvas { position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; z-index: 5; }
+
+.gridCanvas { position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; z-index: 4; }
 
 .montage-editor-frame { position: absolute; z-index: 7; top: 0; left: 0; display: none; -webkit-user-select: initial; }
 
diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css
index 6130382b..aeaf604c 100644
--- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css
+++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css
@@ -18,7 +18,7 @@
     height: 20px;
 }
 
-.viewOptions .autoCodeComplete span{
+.viewOptions .autoCodeComplete label{
     vertical-align: middle;
 }
 
diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html
index 14d6cb55..2c91ca13 100644
--- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html
+++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html
@@ -14,6 +14,9 @@
             "prototype": "montage/ui/checkbox.reel",
             "properties": {
                 "element": {"#": "codeComplete"}
+            },
+            "bindings": {
+                "disabled": {"<-": "@owner.autocomplete"}
             }
         },
 
@@ -33,6 +36,7 @@
             "prototype": "js/code-editor/ui/code-editor-view-options.reel[CodeEditorViewOptions]",
             "properties": {
                 "element": {"#": "viewOptions"},
+                "autoCompleteLabel": {"#": "autoCompleteLabel"},
                 "codeCompleteCheck":{"@": "codeCompleteCheck"},
                 "zoomHottext":{"@":"zoomHottext"},
                 "comment":{"#":"comment"},
@@ -50,7 +54,7 @@
         <input class="zoomFont" data-montage-id="zoomFont"/>
         <div class="autoCodeComplete" >
             <input type="checkbox" data-montage-id="codeComplete" />
-            <span>Automatic Completion</span>
+            <label data-montage-id="autoCompleteLabel">Automatic Completion</label>
         </div>
         <div class="floatButtons">
             <!--<button disabled="disabled" id="format" value="format" class="nj-skinned format">Format</button>-->
diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js
index a27d4450..dabce6e0 100644
--- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js
+++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.js
@@ -9,15 +9,80 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage =           require("montage/core/core").Montage,
     Component =         require("montage/ui/component").Component;
 
-var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Component, {
+exports.CodeEditorViewOptions = Montage.create(Component, {
+
+    _currentDocument: {
+        value : null
+    },
+
+    currentDocument : {
+        get : function() {
+            return this._currentDocument;