3 files changed, 72 insertions, 105 deletions

diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.css b/js/components/layout/bread-crumb.reel/bread-crumb.css
index cc984609..67497e10 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.css
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.css
@@ -4,25 +4,17 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
-.bread_crumb{
+.breadcrumbTrail{
     background-color: #282828;
     border-style: double;
     height: 26px;
-}
-.breadcrumbtrail{
+
     -webkit-box-flex: 0;
 }
-.bread_crumb_button{
-    background-color: #575757;
-    float: left;
-    width: 40px;
-    height: 20px;
-    margin-left: 5px;
-    margin-top: 3px;
 
-    font-family: 'Droid Sans', sans-serif;
-    font-size: 12px;
-    text-shadow: 1px 1px 1px black;
+.breadcrumbTrail button.nj-skinned {
+    float: left;
+    width: 60px;
+    margin: 2px;
+}
 
-    color: white;
-} 
\ No newline at end of file
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.html b/js/components/layout/bread-crumb.reel/bread-crumb.html
index c1b9ed61..f2368e9a 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.html
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.html
@@ -16,55 +16,62 @@
                     "module": "js/components/layout/bread-crumb.reel",
                     "name": "Breadcrumb",
                     "properties": {
-                        "element": {"#": "breadcrumb_trail"},
-                        "button" : {"@":"breadCrumbButton"},
-                        "stylerepetition" : {"@":"repetition1"}
-
+                        "element": {"#": "breadcrumbTrail"},
+                        "breadcrumbBt": {"@": "breadCrumbButton"}
                     }
                 },
 
                 "breadCrumbButton": {
-                   "module": "js/components/layout/bread-crumb-button.reel",
-                   "name": "BreadcrumbButton",
-                   "properties": {
-                       "element": {"#": "breadcrumb_button"}
-                   },
-                   "bindings": {
-                       "data": {
-                           "boundObject": {"@": "repetition1"},
-                           "boundObjectPropertyPath": "objectAtCurrentIteration",
-                           "oneway": true
-                       }
-                   }
-               },
-
-               "repetition1": {
-                   "module": "montage/ui/repetition.reel",
-                   "name": "Repetition",
-                   "properties": {
-                       "element": {"#": "breadcrumb_container"}
-                   },
-                   "bindings": {
-                       "objects": {
-                           "boundObject": {"@": "owner"},
-                           "boundObjectPropertyPath": "containerElements",
-                           "oneway": true
-                       }
-                   }
-               }
-
+                    "module": "montage/ui/button.reel",
+                    "name": "Button",
+                    "properties": {
+                        "element": {"#": "breadcrumb_button"}
+                    },
+                    "listeners": [
+                        {
+                            "type": "action",
+                            "listener": {"@": "owner"}
+                        }
+                    ],
+                    "bindings": {
+                        "label": {
+                            "boundObject": {"@": "repetition1"},
+                            "boundObjectPropertyPath": "objectAtCurrentIteration.label",
+                            "oneway": true
+                        },
+                        "value": {
+                            "boundObject": {"@": "repetition1"},
+                            "boundObjectPropertyPath": "objectAtCurrentIteration.nodeUuid",
+                            "oneway": true
+                        }
+                    }
+                },
 
+                "repetition1": {
+                    "module": "montage/ui/repetition.reel",
+                    "name": "Repetition",
+                    "properties": {
+                        "element": {"#": "breadcrumb_container"}
+                    },
+                    "bindings": {
+                        "objects": {
+                            "boundObject": {"@": "owner"},
+                            "boundObjectPropertyPath": "containerElements",
+                            "oneway": true
+                        }
+                    }
+                }
             }
         </script>
 
     </head>
     <body>
 
-        <div id="breadcrumb_trail" class="breadcrumbtrail">
-            <div id="breadcrumb_container" class="bread_crumb">
-                <div id="breadcrumb_button"></div>
+        <section id="breadcrumbTrail" class="breadcrumbTrail">
+            <div id="breadcrumb_container">
+                <button id="breadcrumb_button" class="nj-skinned"></button>
             </div>
-        </div>
+        </section>
 
     </body>
 </html> 
\ No newline at end of file
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js
index 1824c7c3..b2fa42b1 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.js
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.js
@@ -7,7 +7,7 @@
 var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component;
 
-var Breadcrumb = exports.Breadcrumb = Montage.create(Component, {
+exports.Breadcrumb = Montage.create(Component, {
 
     _container:{
         value:null
@@ -29,23 +29,9 @@ var Breadcrumb = exports.Breadcrumb = Montage.create(Component, {
         value: []
     },
 
-
-    deserializedFromTemplate : {
+    prepareForDraw: {
         value: function() {
-            this.eventManager.addEventListener( "appLoaded", this, false);
-            this.eventManager.addEventListener( "breadCrumbTrail", this, false);
-        }
-    },
-
-    handleAppLoaded : {
-        value: function() {
-
-            Object.defineBinding(this, "container", {
-                    boundObject: this.application.ninja,
-                    boundObjectPropertyPath: "currentSelectedContainer",
-                    oneway: false
-            });
-
+            this.breadcrumbBt.addEventListener("action", this, false);
         }
     },
 
@@ -53,56 +39,38 @@ var Breadcrumb = exports.Breadcrumb = Montage.create(Component, {
         value: function() {
             var parentNode;
 
-            this.containerElements.length = 0
+            this.containerElements.length = 0;
 
-            if(this.container.id === "UserContent") {
-                this.containerElements.push({selected:false, element:this.container});
-            } else {
-                parentNode = this.container;
+            parentNode = this.container;
 
-                while(parentNode.id!=="UserContent") {
-                    this.containerElements.unshift({selected:false,element:parentNode});
-                    parentNode = parentNode.parentNode;
-                }
-
-                this.containerElements.unshift({selected:false,element:parentNode});
+            while(parentNode.id !== "UserContent") {
+                this.containerElements.unshift({"node": parentNode, "nodeUuid":parentNode.uuid, "label": parentNode.nodeName});
+                parentNode = parentNode.parentNode;
             }
 
-            NJevent('layerBinding',{selected:false ,element:this.container})
+            // This is always the top container which is now hardcoded to body
+            this.containerElements.unshift({"node": parentNode, "nodeUuid":parentNode.uuid, "label": "Body"});
+
+            // This is for the timeline -- Disable it since the timeline should not know about this object
+            // NJevent('layerBinding',{selected:false ,element:this.container})
+
         }
     },