7 files changed, 174 insertions, 98 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..e4d622e3 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];
+            }
+
+        }
+    },
+
+    _visible: {
+        value: false
+    },
+
+    visible: {
+        get: function() {
+            return this._visible;
+        },
+        set: function(value) {
+            if(this._visible !== value) {
+                this._visible = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _autocomplete: {
+        value: false
+    },
+
+    autocomplete: {
+        get: function() {
+            return this._autocomplete;
+        },
+        set: function(value) {
+            if(this._autocomplete !== value) {
+                this._autocomplete = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    codeCompletionSupport : {
+        value: {"js": true}
+    },
+
+    codeCompleteCheck: {
+        value: null
+    },
 
     prepareForDraw: {
         value: function() {
-            Object.defineBinding(this.codeCompleteCheck , "checked", {
-              boundObject: this.application.ninja.codeEditorController,
-              boundObjectPropertyPath: "automaticCodeComplete",
-              oneway : false
-            });
+            //this.format.addEventListener("click", this.handleFormat.bind(this), false);
+            this.comment.addEventListener("click", this.handleComment.bind(this), false);
+            this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false);
+            this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false);
+            this.shortKeys.addEventListener("click", this.handleShortKeys.bind(this), false);
 
             Object.defineBinding(this.zoomHottext , "value", {
               boundObject: this.application.ninja.codeEditorController,
@@ -28,22 +93,35 @@ var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Compo
         }
     },
 
-    didDraw: {
-        enumerable: false,
+    draw: {
         value: function() {
-            //this.format.addEventListener("click", this.handleFormat.bind(this), false);
-            this.comment.addEventListener("click", this.handleComment.bind(this), false);
-            this.uncomment.addEventListener("click", this.handleUncomment.bind(this), false);
-            this.themeSelect.addEventListener("change", this.handleThemeSelection.bind(this), false);
-            this.shortKeys.addEventListener("click", this.handleShortKeys.bind(this), false);
+            if(this.visible) {
+                this.element.style.display = "block";
+            } else {
+                this.element.style.display = "none";
+            }
+
+            if(this.autocomplete) {
+                this.autoCompleteLabel.classList.add("disabled");
+            } else {
+                this.autoCompleteLabel.classList.remove("disabled");
+            }
+        }
+    },
+
+    getSelectedRange:{
+        value:function(editor){
+            return { from: editor.getCursor(true), to: editor.getCursor(false) };
         }
     },
 
     handleFormat:{
         value: function(evt){
-            this.application.ninja.codeEditorController.autoFormatSelection();
+            var range = this.getSelectedRange(this.currentDocument.model.views.code.editor