3 files changed, 530 insertions, 333 deletions

diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js
index 9782d9d1..ead7c764 100644
--- a/js/components/layout/bread-crumb.reel/bread-crumb.js
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.js
@@ -1,13 +1,8 @@
-/* <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
- (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> */
 
-var Montage = require("montage/core/core").Montage,
-    Component = require("montage/ui/component").Component;
+var Montage = require("montage/core/core").Montage
+var Component = require("montage/ui/component").Component
 
-exports.Breadcrumb = Montage.create(Component, {
+var Breadcrumb = exports.Breadcrumb = Montage.create(Component, {
 
     _container:{
         value:null
@@ -16,10 +11,12 @@ exports.Breadcrumb = Montage.create(Component, {
 
     container: {
         set: function(value) {
-            if(this._container !== value) {
-                this._container = value;
-                this.createContainerElements();
-            }
+          if(this._container !== value) {
+              this._container = value;
+              this.createContainerElements();
+          }
+
+
         },
         get: function() {
             return this._container;
@@ -28,83 +25,132 @@ exports.Breadcrumb = Montage.create(Component, {
 
     containerElements: {
         value: []
+
     },
 
+
     deserializedFromTemplate : {
         value: function() {
             this.eventManager.addEventListener( "appLoaded", this, false);
-            this.eventManager.addEventListener( "openDocument", this, false);
             this.eventManager.addEventListener( "breadCrumbTrail", this, false);
-        }
+        },
+        enumerable : false
     },
 
     handleAppLoaded : {
         value: function() {
 
+
             Object.defineBinding(this, "container", {
                     boundObject: this.application.ninja,
                     boundObjectPropertyPath: "currentSelectedContainer",
                     oneway: false
             });
+
+        }
+    },
+
+    prepareForDraw: {
+        value: function() {
+
+        }
+    },
+
+    draw: {
+        value: function() {
+
+        }
+    },
+
+    didDraw:{
+        value:function(){
         }
     },
 
     createContainerElements: {
         value: function() {
+
             var parentNode;
 
             while(this.containerElements.pop()){
               // To empty the array to get the new parentNode of the new currentLevel
             }
 
-            if(this.container.id === "UserContent") {
+            if(this.container.id === "UserContent"){
+
                 this.containerElements.push({selected:false,element:this.container});
-            } else {
 
-                parentNode = this.container;
 
-                while(parentNode.id !== "UserContent") {
+            }
+            else{
+
+               parentNode= this.container;
+
+                  while(parentNode.id!=="UserContent"){
+
                       this.containerElements.unshift ({selected:false,element:parentNode});
-                      parentNode = parentNode.parentNode;
+                      parentNode=parentNode.parentNode;
+
                   }
 
-                this.containerElements.unshift({selected:false,element:parentNode});
+               this.containerElements.unshift({selected:false,element:parentNode});
 
             }
 
-            NJevent('layerBinding',this.container);
+            NJevent('layerBinding',{selected:false ,element:this.container})
+
+
         }
     },
 
 
-    handleBreadCrumbTrail: {
+     handleBreadCrumbTrail: {
         value: function(event) {
-            var newLength, revaluatedLength, tmpvalue, i=0;
+
+           var newLength,revaluatedLength,tmpvalue
+           var i=0;
+            if(event.detail.setFlag){
+                 this.application.ninja.currentSelectedContainer = event.detail.element;
+                  return;
+            }
 
             newLength = this.containerElements.length;
 
-            while(i < newLength ) {
-                if(this.containerElements[i].selected){
-                    tmpvalue = i ;
-                    break;
-                }
+            while(i < newLength ){
+
+                  if(this.containerElements[i].selected){
+
+                           tmpvalue = i ;
+                           break;
+
+                 }
 
                 i++;
             }
 
-            for(i = newLength -1 ; i >= 1 ; i--) {
-                if(tmpvalue!==i) {
+
+
+            for(i = newLength -1 ; i >= 1 ; i--){
+
+                if(tmpvalue!==i){
+
                     this.containerElements.pop();
-                } else {
+                }
+
+                else{
+
                     break;
                 }
+
             }
 
             revaluatedLength = this.containerElements.length;
             this.application.ninja.currentSelectedContainer = this.containerElements[revaluatedLength-1].element;
 
+
         }
     }
 
 
 });
+
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index 1aaa0c60..158bcaff 100644
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -345,13 +345,10 @@
                         </section>
 
                         <section id="timelineResizer" class="timelineResizer resizeBar"></section>
-
+                        <section id="breadCrumbTrail">
+                                                        <div id="breadCrumbComponent"></div>
+