5 files changed, 189 insertions, 122 deletions

diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html
index 69f8107f..fbd03221 100755
--- a/js/components/layout/document-bar.reel/document-bar.html
+++ b/js/components/layout/document-bar.reel/document-bar.html
@@ -73,7 +73,9 @@ POSSIBILITY OF SUCH DAMAGE.
                     "prototype": "js/components/layout/document-bar.reel",
                     "properties": {
                         "element": {"#": "documentBar"},
-                        "zoomControl": {"@": "hottext1"}
+                        "zoomControl": {"@": "hottext1"},
+                        "btnDesign": {"#": "buttonDesign"},
+                        "btnCode": {"#": "buttonCode"}
                     }
                 }
             }
@@ -93,7 +95,7 @@ POSSIBILITY OF SUCH DAMAGE.
                 
             </section>
             
-            <section>
+            <section data-montage-id="buttonDesign">
                 
                 <div class="viewicon viewdesign"></div>
                 
@@ -101,7 +103,7 @@ POSSIBILITY OF SUCH DAMAGE.
                 
             </section>
             
-            <section class="inactive">
+            <section data-montage-id="buttonCode">
                 
                 <div class="viewicon viewcode"></div>
                 
diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js
index 248bc8c4..dbb4fcad 100755
--- a/js/components/layout/document-bar.reel/document-bar.js
+++ b/js/components/layout/document-bar.reel/document-bar.js
@@ -29,140 +29,115 @@ 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;
         }
     },
-
+    ////////////////////////////////////////////////////////////////////
+    //
     _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;
-            }
-
-            this._currentView = value;
-            this.needsDraw = true;
-        }
-    },
-
+    ////////////////////////////////////////////////////////////////////
+    //
     _zoomFactor: {
         value: 100
     },
-
+    ////////////////////////////////////////////////////////////////////
+    //
     zoomFactor: {
-        get: function() { return this._zoomFactor; },
-
-        set: function(value)
-        {
-            if(value !== this._zoomFactor)
-            {
+        get: function() {return this._zoomFactor;},
+        set: function(value) {
+            if(value !== this._zoomFactor) {
+                //
                 this._zoomFactor = value;
-                if (!this._firstDraw)
-                {
+                //
+                if (!this._firstDraw) {
                     this.application.ninja.stage.setZoom(value);
                 }
             }
         }
     },
-
-    draw: {
+    ////////////////////////////////////////////////////////////////////
+    //
+    prepareForDraw: {
         value: function() {