5 files changed, 21 insertions, 10 deletions
diff --git a/js/components/layout/document-bar.reel/document-bar.css b/js/components/layout/document-bar.reel/document-bar.css
index 588b8952..2a147964 100755
--- a/js/components/layout/document-bar.reel/document-bar.css
+++ b/js/components/layout/document-bar.reel/document-bar.css
@@ -33,7 +33,7 @@
 .documentBar span{
    text-decoration: none;
-    cursor: default;
+    cursor: pointer;
    color: #3a3a3a;
 }
@@ -41,3 +41,10 @@
    color: white;
 }
+.documentBar .enable{
+    color: #d7d7d7;
+}
+.documentBar .disable{
+    color: #3a3a3a;
+}
+\ No newline at end of file
diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html
index d58f0d14..48f1423c 100755
--- a/js/components/layout/document-bar.reel/document-bar.html
+++ b/js/components/layout/document-bar.reel/document-bar.html
@@ -51,8 +51,8 @@
 <body>
    <div id="documentBar">
        <input class="zoomHotText label" id="zoomControlHT"/>
-        <span class="design-view" id="design">Design View</span>
+        <span class="design-view disable" id="design">Design View</span>
-        <span class="code-view" id="code">Code View</span>
+        <span class="code-view disable" id="code">Code View</span>
    </div>
 </body>
 </html>
 \ No newline at end of file
diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js
index 3eece273..44f65804 100755
--- a/js/components/layout/document-bar.reel/document-bar.js
+++ b/js/components/layout/document-bar.reel/document-bar.js
@@ -86,7 +86,7 @@ exports.DocumentBar = Montage.create(Component, {
        value: function() {
            this.designView.addEventListener("click", this, false);
            this.codeView.addEventListener("click", this, false);
-         
        }
    },
@@ -95,7 +95,13 @@ exports.DocumentBar = Montage.create(Component, {
            if(event._event.target.id === this.currentView) return;
            this.currentView = event._event.target.id;
-            documentManagerModule.DocumentManager.switchViews();
+            this.application.ninja.documentController.switchViews(event._event.target.id);//switch between design view
+        }
+    },
+    handleOnDocumentChanged:{
+        value:function(event){
        }
    }
 });
diff --git a/js/components/layout/documents-tab.reel/documents-tab.js b/js/components/layout/documents-tab.reel/documents-tab.js
index e874a73c..982f6ecd 100755
--- a/js/components/layout/documents-tab.reel/documents-tab.js
+++ b/js/components/layout/documents-tab.reel/documents-tab.js
@@ -7,8 +7,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
-var documentManagerModule = require("js/io/document/document-controller");
 exports.DocumentsTab = Montage.create(Component, {
    openDocuments: {
@@ -19,7 +17,7 @@ exports.DocumentsTab = Montage.create(Component, {
        enumerable: false,
        value: function() {
 //            console.log("Change this to be inside the Ninja Reel");
-            this.openDocuments = documentManagerModule.DocumentController._documents;
+            this.openDocuments = this.application.ninja.documentController._documents;
 //            this.eventManager.addEventListener( "appLoaded", this, false);
        }
    },
diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html
index b4aee4b2..b5da0e6e 100755
--- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html
+++ b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html
@@ -97,8 +97,8 @@
        <div id="right-bottom" class="right-bottom"></div>
    </div>
    <div class="buttons">
-        <input id="cancelButton" type="button" value="CANCEL" class="cancelButton" />
+        <input id="cancelButton" type="button" value="CANCEL" class="cancelButton nj-skinned" />
-        <input id="okButton" disabled="true" type="button" value="OK" class="okButton" />
+        <input id="okButton" disabled="true" type="button" value="OK" class="okButton nj-skinned" />
    </div>
    <div id="filters" class="filters" style="display:block;">
        <div class="dropdown hide"></div>