15 files changed, 520 insertions, 154 deletions

diff --git a/js/code-editor/code-editor-wrapper.js b/js/code-editor/code-editor-wrapper.js
index 57fe4d3a..65f42db2 100644
--- a/js/code-editor/code-editor-wrapper.js
+++ b/js/code-editor/code-editor-wrapper.js
@@ -131,6 +131,12 @@ exports.CodeEditorWrapper = Montage.create(Component, {
                 this.application.ninja.editorViewOptions.codeEditorWrapper = this;
             }
 
+            //TODO:add codeEditorWrapper
+            if(!this.application.ninja.documentBar.codeEditorWrapper){
+                this.application.ninja.documentBar.codeEditorWrapper = this;
+            }
+
+
             editorOptions = {
                                lineNumbers: true,
                                matchBrackets:true,
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 9344d34c..e2632d35 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
@@ -51,7 +51,7 @@ exports.CodeEditorViewOptions = Montage.create(Component, {
 
             this._currentDocument = value;
 
-            if(!value || this._currentDocument.currentView === "design") {
+            if(!value || (this._currentDocument.currentView === "design") || ((this._currentDocument.model.views.design !== null))) {
                 this.visible = false;
             } else {
                 this.visible = true;
diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html
index 9e5e4eb2..3e3ac936 100755
--- a/js/components/layout/document-bar.reel/document-bar.html
+++ b/js/components/layout/document-bar.reel/document-bar.html
@@ -75,20 +75,17 @@ POSSIBILITY OF SUCH DAMAGE.
                         "element": {"#": "previewButton"},
                         "identifier": "preview",
                         "label": "Preview"
-                    },
-                    "listeners": [
-                        {
-                            "type": "action",
-                            "listener": {"@": "owner"}
-                        }
-                    ]
+                    }
                 },
     
                 "owner": {
                     "prototype": "js/components/layout/document-bar.reel",
                     "properties": {
                         "element": {"#": "documentBar"},
-                        "zoomControl": {"@": "hottext1"}
+                        "zoomControl": {"@": "hottext1"},
+                        "btnDesign": {"#": "buttonDesign"},
+                        "btnCode": {"#": "buttonCode"},
+                        "btnPreview": {"#": "buttonPreview"}
                     }
                 }
             }
@@ -108,7 +105,7 @@ POSSIBILITY OF SUCH DAMAGE.
                 
             </section>
             
-            <section>
+            <section data-montage-id="buttonDesign">
                 
                 <div class="viewicon viewdesign"></div>
                 
@@ -116,7 +113,7 @@ POSSIBILITY OF SUCH DAMAGE.
                 
             </section>
             
-            <section class="inactive">
+            <section data-montage-id="buttonCode">
                 
                 <div class="viewicon viewcode"></div>
                 
@@ -124,7 +121,7 @@ POSSIBILITY OF SUCH DAMAGE.
                 
             </section>
 
-            <section class="inactive">
+            <section data-montage-id="buttonPreview" class="inactive">
 
                 <div class="viewicon viewPreview"></div>
 
diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js
index fa0c8788..bf84c652 100755
--- a/js/components/layout/document-bar.reel/document-bar.js
+++ b/js/components/layout/document-bar.reel/document-bar.js
@@ -29,140 +29,157 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 POSSIBILITY OF SUCH DAMAGE.
 </copyright> */
 
-var Montage = require("montage/core/core").Montage;
-var Component = require("montage/ui/component").Component;
-
+////////////////////////////////////////////////////////////////////////
+//
+var Montage =   require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+////////////////////////////////////////////////////////////////////////
+//
 exports.DocumentBar = Montage.create(Component, {
-
-    _currentDocument: {
-        enumerable: false,
-        value: null
-    },
-
+    ////////////////////////////////////////////////////////////////////
+    //
+    _currentDocument: {value: null},
+    ////////////////////////////////////////////////////////////////////
+    //
     currentDocument: {
-        enumerable: false,
-        get: function() {
-            return this._currentDocument;
-        },
+        get: function() {return this._currentDocument;},
         set: function(value) {
+            //
             if (value === this._currentDocument) {
                 return;
             }
-
+            //
             this._currentDocument = value;
-
             this.disabled = !this._currentDocument;
+            //          
+            if(this._currentDocument && this._currentDocument.model && this._currentDocument.model.currentView === this._currentDocument.model.views.design) {
+                this.btnCode.setAttribute('class', 'inactive');
+                this.btnDesign.removeAttribute('class');
+            } else if(this._currentDocument && this._currentDocument.model && this._currentDocument.model.currentView === this._currentDocument.model.views.code) {
+                this.btnDesign.setAttribute('class', 'inactive');
+                this.btnCode.removeAttribute('class');
+            }
+            //
+            this.visible = true;
 
-            if(this._currentDocument && this._currentDocument.currentView === "design") {
-                this.visible = true;
-            } else if(this._currentDocument && this._currentDocument.currentView === "code") {
+            //TODO: check if the code's options bar can be unified
+            if(this._currentDocument && this._currentDocument.model && (this._currentDocument.model.views.design === null) && (this._currentDocument.model.views.code !== null)){
                 this.visible = false;
             }
         }
     },
-
-    _visible: {
-        value: false
+    ////////////////////////////////////////////////////////////////////
+    //
+    _codeEditorWrapper:{
+        value: null
     },
-
-    visible: {
-        get: function() {
-            return this._visible;
-        },
+    ////////////////////////////////////////////////////////////////////
+    //
+    codeEditorWrapper:{
+        get: function() {return this._codeEditorWrapper;},
         set: function(value) {
-            if(this._visible !== value) {
-                this._visible = value;
-                this.needsDraw = true;
+                //
+            if(this._codeEditorWrapper !== value){
+                this._codeEditorWrapper = value;
             }