78 files changed, 2571 insertions, 3260 deletions

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;
+        },
+        set : function(value) {
+            if (value === this._currentDocument) {
+                return;
+            }
+
+            this._currentDocument = value;
+
+            if(!value || this._currentDocument.currentView === "design") {
+                this.visible = false;
+            } else {
+                this.visible = true;
+                this.autocomplete = !this.codeCompletionSupport[this._currentDocument.model.file.extension];
+            }
+