3 files changed, 34 insertions, 15 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 130dd044..b0f6d220 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -83,13 +83,13 @@ var Layer = exports.Layer = Montage.create(Component, {
             return this._layerName;
         },
         set:function(newVal){
-
                         this._layerEditable.value = newVal;
                 this._layerName = newVal;
                 this.layerData.layerName = newVal;
                 if (typeof(this.dynamicLayerName) !== "undefined") {
                         this.dynamicLayerName.value = newVal;
                 }
+
         }
     },
     _layerID:{
@@ -485,6 +485,8 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false);
                         this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
                         this.element.addEventListener("drop", this.handleDrop.bind(this), false);
+
+            this.eventManager.addEventListener("updatedID", this, false);
                         
 
 
@@ -668,11 +670,11 @@ var Layer = exports.Layer = Montage.create(Component, {
     
         /* Begin: Event handlers */
         handleLayerNameChange: {
-                value: function(event) {                
+                value: function(event) {
                         this.dynamicLayerName.value = this._layerEditable.value;
-                        this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.dynamicLayerName.value;
                         this.needsDraw = true;
                         this.application.ninja.documentController.activeDocument.needsSave = true;
+            this.layerData.elementsList[0].setAttribute("id",this.dynamicLayerName.value);
                 }
         },
         handleAddStyleClick: {
@@ -699,7 +701,6 @@ var Layer = exports.Layer = Montage.create(Component, {
                         }
                         this.dynamicLayerName.value = newVal;
                         this.layerName = newVal;
-                        this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = newVal;
                         this.application.ninja.documentController.activeDocument.needsSave = true;
                         this.needsDraw = true;
                 }
@@ -845,7 +846,24 @@ var Layer = exports.Layer = Montage.create(Component, {
                                 return e.stack.split("at")[3].split(":")[2];
                         }
         }
+    },
+
+    handleUpdatedID:{
+        value:function(event){
+            var i= this.application.ninja.timeline.arrLayers.length;
+            if(event.detail.id){
+                for(var k=0;k<i;k++){
+                    if(this.application.ninja.timeline.arrLayers[k].layerData.layerID=== this.application.ninja.timeline.currentLayerSelected.layerData.layerID){
+                        this.application.ninja.timeline.currentLayerSelected.layerData.layerName = event.detail.id;
+                        this.application.ninja.timeline.triggerLayerBinding(k);
+                        this.needsDraw=true;
+                    }
+                }
+
+            }
+        }
     }
+
         /* End: Logging routines */
 
 });
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 8859e115..7f4fee89 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -402,7 +402,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
     
-    draw: {
+    draw:{
         value: function() {
                 
                 // Drag and Drop:
@@ -568,8 +568,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     // Bind all document-specific events (pass in true to unbind)
     _bindDocumentEvents : {
         value: function(boolUnbind) {
-            var arrEvents = ["deleteLayerClick",
-                             "newLayer",
+            var arrEvents = [ "newLayer",
                              "deleteLayer",
                              "elementAdded",
                              "elementsRemoved",
@@ -1014,7 +1013,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
                         // Make up a layer name.
             this.currentLayerNumber = this.currentLayerNumber + 1;
-            newLayerName = "Layer " + this.currentLayerNumber;
+//            newLayerName = "Layer " + this.currentLayerNumber;
+            newLayerName="         ";
 
                         // Possibly currentLayerNumber doesn't correctly reflect the
                         // number of layers.  Check that.
@@ -1074,12 +1074,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             var newLayerName, thingToPush = this.createLayerTemplate();
 
             this.currentLayerNumber = this.currentLayerNumber + 1;
-            newLayerName = "Layer " + this.currentLayerNumber;
+//            newLayerName = "Layer " + this.currentLayerNumber;
 
-            if(ele.dataset.storedLayerName){
-                newLayerName = ele.dataset.storedLayerName;
+//            if(ele.dataset.storedLayerName){
+//                newLayerName = ele.dataset.storedLayerName;
+//            }
+            if(ele.id){
+                thingToPush.layerData.layerName = ele.id;
             }
-            thingToPush.layerData.layerName = newLayerName;
             thingToPush.layerData.layerID = this.currentLayerNumber;
             thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">";
             thingToPush.parentElement = this.application.ninja.currentSelectedContainer;
@@ -1170,7 +1172,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.currentLayerSelected.layerData.elementsList = [];
             }
             this.currentLayerSelected.layerData.elementsList.push(this.application.ninja.selectedElements[0]);
-            this.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.currentLayerSelected.layerData.layerName;
+//            this.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.currentLayerSelected.layerData.layerName;
         }
     },
 
@@ -1178,7 +1180,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         value:function (event) {
             var deleteElements = event.detail;
             //console.log("TimelinePanel.handleElementsRemoved; event.detail is ", event.detail);
-            //debugger;
             this.deleteLayer(deleteElements);
         }
     },
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 8c2daa14..507770f6 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -101,7 +101,6 @@ exports.Properties = Montage.create(Component, {
      */
     handleBlur: {
         value: function(event) {
-
             if(event.target.id === "elementId") {
 
                 // Remove all white spaces from the id
@@ -126,6 +125,7 @@ exports.Properties = Montage.create(Component, {
                     ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "class", this.elementClass.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.elementClass);
                 }
             }
+            NJevent("updatedID",this.application.ninja.selectedElements[0]);
         }
     },