7 files changed, 237 insertions, 367 deletions

diff --git a/js/controllers/code-editor-controller.js b/js/controllers/code-editor-controller.js
index e7163bd8..d292f838 100644
--- a/js/controllers/code-editor-controller.js
+++ b/js/controllers/code-editor-controller.js
@@ -9,11 +9,35 @@ 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 CodeEditorController = exports.CodeEditorController = Montage.create(Component, {
+exports.CodeEditorController = Montage.create(Component, {
     hasTemplate: {
         value: false
     },
 
+    _currentDocument: {
+        value : null
+    },
+
+    currentDocument : {
+        get : function() {
+            return this._currentDocument;
+        },
+        set : function(value) {
+            if (value === this._currentDocument) {
+                return;
+            }
+
+            this._currentDocument = value;
+
+            if(!value) {
+
+            } else if(this._currentDocument.currentView === "code") {
+                this._currentDocument.model.views.code.editor.focus();
+                this.applySettings();
+            }
+        }
+    },
+
     _codeEditor : {
         value:null
     },
@@ -213,22 +237,22 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
 
     autoFormatSelection:{
         value: function(){
-            var range = this.getSelectedRange(this.application.ninja.documentController.activeDocument.model.views.code.editor);
-            this.application.ninja.documentController.activeDocument.model.views.code.editor.autoFormatRange(range.from, range.to);
+            var range = this.getSelectedRange(this.currentDocument.model.views.code.editor);
+            this.currentDocument.model.views.code.editor.autoFormatRange(range.from, range.to);
         }
     },
 
     commentSelection:{
         value: function(isComment){
-            var range = this.getSelectedRange(this.application.ninja.documentController.activeDocument.model.views.code.editor);
-            this.application.ninja.documentController.activeDocument.model.views.code.editor.commentRange(isComment, range.from, range.to);
+            var range = this.getSelectedRange(this.currentDocument.model.views.code.editor);
+            this.currentDocument.model.views.code.editor.commentRange(isComment, range.from, range.to);
         }
     },
 
     handleThemeSelection:{
         value: function(){
-            this.application.ninja.documentController.activeDocument.model.views.code.editor.setOption("theme", this.editorTheme);
-            this.application.ninja.documentController.activeDocument.model.views.code.applyTheme("cm-s-"+this.editorTheme);
+            this.currentDocument.model.views.code.editor.setOption("theme", this.editorTheme);
+            this.currentDocument.model.views.code.applyTheme("cm-s-"+this.editorTheme);
         }
     },
 
@@ -236,10 +260,10 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
         value:function(value){
             var originalFont=13,originalLineHeight=16;
             this._zoomFactor = value;
-            this.application.ninja.documentController.activeDocument.model.views.code.textViewContainer.style.fontSize = ""+((value/100)*originalFont)+"px";
-            this.application.ninja.documentController.activeDocument.model.views.code.textViewContainer.style.cursor = "text";
-            this.application.ninja.documentController.activeDocument.model.views.code.textViewContainer.querySelector(".CodeMirror").style.lineHeight = ""+((value/100)*originalLineHeight)+"px";
-            this.application.ninja.documentController.activeDocument.model.views.code.editor.refresh();//refresh editor display for xoom
+            this.currentDocument.model.views.code.textViewContainer.style.fontSize = ""+((value/100)*originalFont)+"px";
+            this.currentDocument.model.views.code.textViewContainer.style.cursor = "text";
+            this.currentDocument.model.views.code.textViewContainer.querySelector(".CodeMirror").style.lineHeight = ""+((value/100)*originalLineHeight)+"px";
+            this.currentDocument.model.views.code.editor.refresh();//refresh editor display for xoom
         }
     },
 
@@ -248,7 +272,7 @@ var CodeEditorController = exports.CodeEditorController = Montage.create(Compone
             //set theme
             this.handleThemeSelection();
             //check autocomplete support
-            this.handleCodeCompletionSupport(this.application.ninja.documentController.activeDocument.model.file.extension);
+            this.handleCodeCompletionSupport(this.currentDocument.model.file.extension);
             //set zoom
             this.handleZoom(this._zoomFactor);
         }
diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index 2c34eedf..f85e2f97 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -8,37 +8,58 @@ 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,
-    Uuid =                      require("montage/core/uuid").Uuid,
     HTMLDocument =  require("js/document/document-html").HtmlDocument,
     TextDocument =  require("js/document/document-text").TextDocument;
 ////////////////////////////////////////////////////////////////////////
 //
 exports.DocumentController = Montage.create(Component, {
         //
-    hasTemplate: {value: false},
-    _documents: {value: []},
-        //TODO: what is this?!?!
-    _hackInitialStyles: {value: true},
-    _activeDocument: { value: null },
-    //TODO: Are any of these needed?
-    _iframeCounter: { value: 1, enumerable: false },
-    _iframeHolder: { value: null, enumerable: false },
-    _textHolder: { value: null, enumerable: false },
-    _codeMirrorCounter: {value: 1, enumerable: false},
-    
-    activeDocument: {
-        get: function() {
-            return this._activeDocument;
+    hasTemplate: {
+        value: false
+    },
+
+    iframeContainer: {
+        value: null
+    },
+
+    codeContainer: {
+        value: null
+    },
+
+    documents: {
+        value: []
+    },
+
+    _currentDocument: {
+            value : null
+    },
+
+    currentDocument : {
+        get : function() {
+            return this._currentDocument;
         },
-        set: function(doc) {
-                        //if(!!this._activeDocument){ this._activeDocument.isActive = false;}
+        set : function(value) {
+            if (value === this._currentDocument) {
+                return;
+            }
 
-            this._activeDocument = doc;
+            if(this._currentDocument) {
+                this._currentDocument.model.currentView.hide();
+            }
+
+            this._currentDocument = value;
 
-            if(!!this._activeDocument){
-                if(this._documents.indexOf(doc) === -1) this._documents.push(doc);
-                this._activeDocument.isActive = true;
+            if(!value) {
+                document.getElementById("iframeContainer").style.display = "block";
+                document.getElementById("codeViewContainer").style.display = "block";
+            } else if(this._currentDocument.currentView === "design") {
+                this._currentDocument.model.currentView.show();
+                this._currentDocument.model.views.design._liveNodeList = this._currentDocument.model.documentRoot.getElementsByTagName('*');
+            } else {
+                document.getElementById("iframeContainer").style.display = "none";
+                this._currentDocument.model.currentView.show();
             }
+
         }
     },
 
@@ -52,11 +73,15 @@ exports.DocumentController = Montage.create(Component, {
             this.eventManager.addEventListener("executeSaveAll", this, false);
             this.eventManager.addEventListener("executeFileClose", this, false);
             this.eventManager.addEventListener("executeFileCloseAll", this, false);
+        }
+    },
 
-            this.eventManager.addEventListener("styleSheetDirty", this, false);
+    didCreate: {
+        value: function() {
+            this.iframeContainer = document.getElementById("iframeContainer");
+            this.codeContainer = document.getElementById("codeViewContainer");
         }
     },
-    
 
         //TODO: Ensure these APIs are not needed
         redirectRequests: {
@@ -70,11 +95,11 @@ exports.DocumentController = Montage.create(Component, {
                 if (this.redirectRequests && request.parentFrameId !== -1) {
                         //Checking for proper URL redirect (from different directories)
                         if (request.url.indexOf('js/document/templates/banner') !== -1) {