5 files changed, 206 insertions, 132 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..5623f825 100755
--- a/js/components/layout/document-bar.reel/document-bar.js
+++ b/js/components/layout/document-bar.reel/document-bar.js
@@ -29,140 +29,127 @@ 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.currentView === "design") {
-                this.visible = true;
-            } else if(this._currentDocument && this._currentDocument.currentView === "code") {
-                this.visible = false;
+            //          
+            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;
         }
     },
-
+    ////////////////////////////////////////////////////////////////////
+    //
+    btnCode: {
+        value: null
+    },
+    btnDesign: {
+        value: null
+    },
+    btnPreview: {
+        value: null
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
     _visible: {
         value: false
     },
-
+    ////////////////////////////////////////////////////////////////////
+    //
     visible: {
-        get: function() {
-            return this._visible;
-        },
+        get: function() {return this._visible;},
         set: function(value) {
+            //
             if(this._visible !== value) {
                 this._visible = value;
                 this.needsDraw = true;
             }
         }
     },
-
-    designView: {
-        value: null
-    },
-
-    codeView: {
-        value: null
-    },
-
+    ////////////////////////////////////////////////////////////////////
+    //
     zoomControl: {
         value: null,
         serializable: true
     },
-
-    _type: {
-        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
-    },
-
-    currentView: {
-        get: function() { return this._currentView},
-        set: function(value) {
-            if (this._currentView === value) {
-                return;
-            }
-
+    ////////////////////////////////////////////////////////////////////
+    //