5 files changed, 122 insertions, 145 deletions

diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js
index 4dc39fd6..27402dff 100755
--- a/js/components/layout/document-bar.reel/document-bar.js
+++ b/js/components/layout/document-bar.reel/document-bar.js
@@ -100,7 +100,7 @@ exports.DocumentBar = Montage.create(Component, {
             if(event._event.target.id === this.currentView) return;
 
             this.currentView = event._event.target.id;
-            this.application.ninja.documentController.stage.stageView.switchViews(event._event.target.id);//switch between design view
+            this.application.ninja.documentController.stage.stageView.switchDesignDocViews(event._event.target.id);//switch between design view
         }
     },
 
diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js
new file mode 100644
index 00000000..23bd9279
--- /dev/null
+++ b/js/controllers/code-editor-controller.js
@@ -0,0 +1,79 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+////////////////////////////////////////////////////////////////////////
+//
+var Montage =           require("montage/core/core").Montage,
+    Component =         require("montage/ui/component").Component;
+
+var CodeEditorController = exports.CodeEditorController = Montage.create(Component, {
+    hasTemplate: {
+        value: false
+    },
+
+    _codeEditor : {
+        value:null
+    },
+
+    codeEditor:{
+        get: function(){return this._codeEditor;},
+        set: function(value){this._codeEditor = value;}
+    },
+
+    deserializedFromTemplate: {
+        value: function() {
+            //TODO:add logic to check some configuration file to load the right code editor
+            this.codeEditor = CodeMirror;
+        }
+    },
+
+    createEditor : {
+        value:function(doc, type){
+            var self = this;
+            var editor = self.codeEditor.fromTextArea(doc.textArea, {
+                               lineNumbers: true,
+                               matchBrackets:true,
+                               mode: type,
+                               onChange: function(){
+                                   var historySize = doc.editor.historySize();
+                                   if(historySize.undo>0){
+                                        doc.needsSave = true;
+                                   }else if(historySize.undo===0 && historySize.redo>0){
+                                       doc.needsSave = false;
+                                   }
+                               },
+                               onCursorActivity: function() {
+                                   doc.editor.matchHighlight("CodeMirror-matchhighlight");
+                                   doc.editor.setLineClass(doc.editor.hline, null, null);
+                                   doc.editor.hline = doc.editor.setLineClass(doc.editor.getCursor().line, null, "activeline");
+                               },
+                               //extraKeys: {"Ctrl-Space": function(cm) {CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);}}
+                               onKeyEvent: function(cm, keyEvent) {
+                                    if((keyEvent.type === "keyup")//need seperate keycode set per mode
+                                        && ((keyEvent.keyCode > 47 && keyEvent.keyCode < 57)//numbers
+                                            || (keyEvent.keyCode > 64 && keyEvent.keyCode <91)//letters
+                                            || (keyEvent.keyCode === 190)//period
+                                            || (keyEvent.keyCode === 189)//underscore, dash
+                                           )
+                                        && !( (keyEvent.keyCode === 219)//open bracket [
+                                                || (keyEvent.keyCode === 221)//close bracket ]
+                                                || (keyEvent.shiftKey && keyEvent.keyCode === 219)//open bracket {
+                                                || (keyEvent.shiftKey && keyEvent.keyCode === 221)//close bracket }
+                                                || (keyEvent.shiftKey && keyEvent.keyCode === 57)//open bracket (
+                                                || (keyEvent.shiftKey && keyEvent.keyCode === 48)//close bracket )
+                                           )
+                                    ){
+
+                                        self.codeEditor.simpleHint(cm, self.codeEditor.javascriptHint);
+                                    }
+                               }
+                       });
+
+            return editor;
+        }
+    }
+
+});
\ No newline at end of file
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index ead7f576..5862cf61 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -348,6 +348,11 @@
                 }
             },
 
+            "codeEditorController": {
+                "module": "js/controllers/code-editor-controller",
+                "name": "CodeEditorController"
+            },
+
             "owner": {
                 "module": "js/ninja.reel",
                 "name": "Ninja",
@@ -377,6 +382,7 @@
                     "ioMediator":           {"@": "ioMediator"},
                     "timeline":             {"@": "timeline"},
                     "mainMenuController":   {"@": "mainMenuController"},
+                    "codeEditorController":   {"@": "codeEditorController"},
                     "rightPanelContainer":  {"#": "rightPanelContainer" },
                     "panelSplitter":     {"@": "splitter3"},
                     "timelineSplitter":     {"@": "splitter4"}
diff --git a/js/stage/stage-view.reel/stage-view.css b/js/stage/stage-view.reel/stage-view.css
index ce7072c7..372af144 100755
--- a/js/stage/stage-view.reel/stage-view.css
+++ b/js/stage/stage-view.reel/stage-view.css
@@ -23,15 +23,17 @@
 }
 */
 
-.CodeMirror {
-    width: 100%;
-    height: 100%;
-    background: white;
-}
+/*.CodeMirror {*/
+    /*width: 100%;*/
+    /*height: 100%;*/
+    /*background: white;*/
+/*}*/
+
+/*.CodeMirror .CodeMirror-scroll {*/
+    /*height: 100%;*/
+    /*overflow: scroll;*/
+    /*overflow-x: auto;*/
+    /*overflow-y: auto;*/
+/*}*/
+
 
-.CodeMirror .CodeMirror-scroll {
-    height: 100%;
-    overflow: scroll;
-    overflow-x: auto;
-    overflow-y: auto;
-}
diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js
index 917cbeb5..bfbee2b6 100755
--- a/js/stage/stage-view.reel/stage-view.js
+++ b/js/stage/stage-view.reel/stage-view.js
@@ -52,12 +52,11 @@ exports.StageView = Montage.create(Component, {
     },
 
     /**
-     * Creates a text area which will contain the content of the opened text document.
+     * Public method
+     * Creates a textarea element which will contain the content of the opened text document.
      */
     createTextAreaElement: {
         value: function(uuid) {
-
-
             var codeMirrorDiv = document.createElement("div");
             codeMirrorDiv.id = "codeMirror_"  + uuid;
             codeMirrorDiv.style.display = "block";
@@ -66,19 +65,22 @@ exports.StageView = Montage.create(Component, {
             var textArea = document.createElement("textarea");
             textArea.id = "code";
             textArea.name = "code";
-
             codeMirrorDiv.appendChild(textArea);
 
             return textArea;
         }
     },
 
-    // Temporary function to create a Codemirror text view
+    /**
+     * Public method
+     * Creates a new instance of a code editor
+     */
     createTextView: {
         value: function(doc) {
+            var type;
             this.application.ninja.documentController._hideCurrentDocument();
             this.hideOtherDocuments(doc.uuid);
-            var type;
+
             switch(doc.documentType) {
                 case  "css" :
                     type = "css";
@@ -87,66 +89,25 @@ exports.StageView = Montage.create(Component, {
                     type = "javascript";
                     break;
             }
-
-            //fix hack
             document.getElementById("codeMirror_"+doc.uuid).style.display="block";
 
-            var documentController = this.application.ninja.documentController;
-            doc.editor = CodeMirror.fromTextArea(doc.textArea, {
-                   lineNumbers: true,
-                   lineWrapping: true,
-                   matchBrackets:true,
-                   mode: type,
-                   onChange: function(){
-                       var historySize = doc.editor.historySize();
+            doc.editor = this.application.ninja.codeEditorController.createEditor(doc, type);