5 files changed, 64 insertions, 3 deletions

diff --git a/index.html b/index.html
index eb76abed..f494ee67 100755
--- a/index.html
+++ b/index.html
@@ -198,6 +198,7 @@
         <script type="text/javascript" src="imports/codemirror/lib/util/match-highlighter.js"></script>
         <script type="text/javascript" src="imports/codemirror/lib/util/simple-hint.js"></script>
         <script type="text/javascript" src="imports/codemirror/lib/util/javascript-hint.js"></script>
+        <script type="text/javascript" src="imports/codemirror/lib/util/formatting.js"></script>
 
 
         <script type="text/javascript" src="node_modules/montage/montage.js"></script>
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 5aa66af2..90cf88d3 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
@@ -1,3 +1,14 @@
 .viewOptions{
     color:#F7F7F7;
-}
\ No newline at end of file
+    font-size:12px;
+}
+
+.viewOptions div{
+    display:inline;
+}
+
+.viewOptions .format{
+    float:right;
+    font-size:9px;
+}
+
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 c6d3da4e..6698baa9 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
@@ -36,7 +36,10 @@
             "properties": {
                 "element": {"#": "viewOptions"},
                 "codeCompleteCheck":{"@": "codeCompleteCheck"},
-                "zoomHottext":{"@":"zoomHottext"}
+                "zoomHottext":{"@":"zoomHottext"},
+                "format":{"#": "format"},
+                "comment":{"#":"comment"},
+                "uncomment":{"#":"uncomment"}
             }
         }
     }
@@ -47,8 +50,13 @@
     <div>
         <input class="zoomFont" id="zoomFont"/>
         <div class="autoCodeComplete" >
-            <span>Automatic Code completion</span>
             <input type="checkbox" id="codeComplete" />
+            <span>Automatic Completion</span>
+        </div>
+        <div class="floatButtons">
+            <!--<button id="format" value="format" class="nj-skinned format">Format</button>-->
+            <button id="comment" value="comment" class="nj-skinned format">comment</button>
+            <button id="uncomment" value="uncomment" class="nj-skinned format">uncomment</button>
         </div>
     </div>
 </div>
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 a1ff8547..a381ae2a 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
@@ -42,7 +42,27 @@ var CodeEditorViewOptions = exports.CodeEditorViewOptions = Montage.create(Compo
         didDraw: {
             enumerable: false,
             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);
+            }
+        },
+
+        handleFormat:{
+            value: function(){
+                this.application.ninja.codeEditorController.autoFormatSelection();
+            }
+        },
+        handleComment:{
+            value: function(){
+                this.application.ninja.codeEditorController.commentSelection(true);
+            }
+        },
 
+        handleUncomment:{
+            value: function(){
+                this.application.ninja.codeEditorController.commentSelection(false);
             }
         }
+
 });
\ No newline at end of file
diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js
index 534d4645..52eb47eb 100644
--- a/js/controllers/code-editor-controller.js
+++ b/js/controllers/code-editor-controller.js
@@ -162,5 +162,26 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
                 autoCodeCompleteElem.style.visibility = "hidden";
             }
         }
+    },
+
+    getSelectedRange:{
+        value:function(editor){
+            return { from: editor.getCursor(true), to: editor.getCursor(false) };
+        }
+    },
+
+    autoFormatSelection:{
+        value: function(){
+            var range = this.getSelectedRange(this.application.ninja.documentController.activeDocument.editor);
+            this.application.ninja.documentController.activeDocument.editor.autoFormatRange(range.from, range.to);
+        }
+    },
+
+    commentSelection:{
+        value: function(isComment){
+            var range = this.getSelectedRange(this.application.ninja.documentController.activeDocument.editor);
+            this.application.ninja.documentController.activeDocument.editor.commentRange(isComment, range.from, range.to);
+        }
     }
+
 });
\ No newline at end of file