11 files changed, 236 insertions, 83 deletions

diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.html b/js/components/layout/bread-crumb.reel/bread-crumb.html
index 0dabc781..68f3be2b 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.html
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.html
@@ -40,7 +40,7 @@
                 "buttonsListController": {
                     "prototype": "montage/ui/controller/array-controller",
                     "bindings": {
-                        "content": {"<<->": "@owner.containerElements"}
+                        "content": {"<->": "@owner.containerElements"}
                     }
                 },
 
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js
index ac131f2c..a3c743a4 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.js
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.js
@@ -9,6 +9,11 @@ var Montage = require("montage/core/core").Montage,
 
 exports.Breadcrumb = Montage.create(Component, {
 
+    breadcrumbBt: {
+        value: null,
+        serializable: true
+    },
+
     _currentDocument: {
         enumerable: false,
         value: null
@@ -51,22 +56,6 @@ exports.Breadcrumb = Montage.create(Component, {
         }
     },
 
-    _container:{
-        value:null
-    },
-
-    container: {
-        set: function(value) {
-            if(this._container !== value) {
-                this._container = value;
-                this.createContainerElements();
-            }
-        },
-        get: function() {
-            return this._container;
-        }
-    },
-
     containerElements: {
         value: []
     },
@@ -74,31 +63,37 @@ exports.Breadcrumb = Montage.create(Component, {
     prepareForDraw: {
         value: function() {
             this.breadcrumbBt.addEventListener("action", this, false);
+            this.addPropertyChangeListener("currentDocument.model.domContainer", this)
         }
     },
 
-    createContainerElements: {
+    handleChange: {
         value: function() {
-            var parentNode;
+            if(this.currentDocument && this.currentDocument.model.getProperty("domContainer")) {
+                this.createContainerElements(this.currentDocument.model.getProperty("domContainer"));
+            }
+        }
+    },
+
+    createContainerElements: {
+        value: function(container) {
 
 //            delete this.containerElements;
                 this.containerElements = [];
 
-            parentNode = this.container;
-
-            while(parentNode !== this.currentDocument.model.documentRoot) {
-                this.containerElements.unshift({"node": parentNode, "nodeUuid":parentNode.uuid, "label": parentNode.nodeName});
-                parentNode = parentNode.parentNode;
+            while(container !== this.currentDocument.model.documentRoot) {
+                this.containerElements.unshift({"node": container, "nodeUuid":container.uuid, "label": container.nodeName});
+                container = container.parentNode;
             }
 
             // This is always the top container which is now hardcoded to body
-            this.containerElements.unshift({"node": parentNode, "nodeUuid":parentNode.uuid, "label": parentNode.nodeName});
+            this.containerElements.unshift({"node": container, "nodeUuid":container.uuid, "label": container.nodeName});
         }
     },
 
     handleAction: {
         value: function(evt) {
-            if(evt.target.value === this.container.uuid) {
+            if(evt.target.value === this.currentDocument.model.domContainer.uuid) {
                 return;
             }
 
@@ -109,7 +104,8 @@ exports.Breadcrumb = Montage.create(Component, {
             }
 
             // TODO: This is bound 2 ways, update the internal property
-            this.application.ninja.currentSelectedContainer = this.containerElements[i].node;
+            this.currentDocument.model.domContainer = this.containerElements[i].node;
+            this.application.ninja.selectionController.executeSelectElement();
         }
     }
 });
diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html
index a35b5590..889160ad 100755
--- a/js/components/layout/document-bar.reel/document-bar.html
+++ b/js/components/layout/document-bar.reel/document-bar.html
@@ -45,8 +45,6 @@
                 "prototype": "js/components/layout/document-bar.reel",
                 "properties": {
                     "element": {"#": "documentBar"},
-                    "designView": {"#": "design"},
-                    "codeView": {"#": "code"},
                     "zoomControl": {"@": "hottext1"}
                 }
             }
diff --git a/js/components/layout/document-bar.reel/document-bar.js b/js/components/layout/document-bar.reel/document-bar.js
index 1cb0bd90..74ba11c2 100755
--- a/js/components/layout/document-bar.reel/document-bar.js
+++ b/js/components/layout/document-bar.reel/document-bar.js
@@ -61,7 +61,8 @@ exports.DocumentBar = Montage.create(Component, {
     },
 
     zoomControl: {
-        value: null
+        value: null,
+        serializable: true
     },
 
     _type: {
@@ -148,8 +149,8 @@ exports.DocumentBar = Montage.create(Component, {
 
     prepareForDraw: {
         value: function() {
-            this.designView.addEventListener("click", this, false);
-            this.codeView.addEventListener("click", this, false);
+//            this.designView.addEventListener("click", this, false);
+//            this.codeView.addEventListener("click", this, false);
 
         }
     },
diff --git a/js/components/layout/document-entry.reel/document-entry.js b/js/components/layout/document-entry.reel/document-entry.js
index 94056007..e2a36c46 100755
--- a/js/components/layout/document-entry.reel/document-entry.js
+++ b/js/components/layout/document-entry.reel/document-entry.js
@@ -9,6 +9,11 @@ var Component = require("montage/ui/component").Component;
 
 exports.DocumentEntry = Montage.create(Component, {
 
+    label: {
+        value: null,
+        serializable: true
+    },
+
     _document: {
         value: null
     },
diff --git a/js/components/layout/documents-tab.reel/documents-tab.js b/js/components/layout/documents-tab.reel/documents-tab.js
index 41c98b30..b72056f8 100755
--- a/js/components/layout/documents-tab.reel/documents-tab.js
+++ b/js/components/layout/documents-tab.reel/documents-tab.js
@@ -9,6 +9,7 @@ var Component = require("montage/ui/component").Component;
 
 exports.DocumentsTab = Montage.create(Component, {
     contentController: {
-        value: null
+        value: null,
+        serializable: true
     }
 });
\ No newline at end of file
diff --git a/js/components/layout/tool-button.reel/tool-button.html b/js/components/layout/tool-button.reel/tool-button.html
index a329f646..936c47ef 100755
--- a/js/components/layout/tool-button.reel/tool-button.html
+++ b/js/components/layout/tool-button.reel/tool-button.html
@@ -18,7 +18,7 @@
                     "element": {"#": "toolBarButton"}
                 },
                 "bindings": {