2 files changed, 183 insertions, 125 deletions

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;
             }
         }
     },
-
-    designView: {
+    ////////////////////////////////////////////////////////////////////
+    //
+    btnCode: {
         value: null
     },
-
-    codeView: {
+    ////////////////////////////////////////////////////////////////////
+    //
+    btnDesign: {
         value: null
     },
-
-    zoomControl: {
-        value: null,
-        serializable: true
-    },
-
-    _type: {
+    ////////////////////////////////////////////////////////////////////
+    //
+    btnPreview: {
         value: null
     },
-
-    type: {
-        enumerable: false,
-        get: function() { return this._type; },
-        set: function(value) {
-            if (this._type === value) {
-                return;
-            }
-
-            this._type = value;
-            this.needsDraw = true;
-
-        }
-    },
-
-    _currentView: {
-        value: null
+    ////////////////////////////////////////////////////////////////////
+    //
+    _visible: {
+        value: false
     },
-
-    currentView: {
-        get: function() { return this._currentView},
+    ////////////////////////////////////////////////////////////////////
+    //
+    visible: {