4 files changed, 73 insertions, 73 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 4b7fe24c..679b88f3 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -484,9 +484,16 @@ var Layer = exports.Layer = Montage.create(Component, {
                 // Make it editable!
                 this._layerEditable = Hintable.create();
                 this._layerEditable.element = this.titleSelector;
-                this._layerEditable.addEventListener("blur", this.handleSelectorEditableBlur.bind(this), false);
-                this._layerEditable.addEventListener("change", this.handleSelectorEditableChange.bind(this), false);
-                
+                this.titleSelector.identifier = "selectorEditable";
+                this.titleSelector.addEventListener("click", this, false);
+                this._layerEditable.addEventListener("blur", function(event) {
+                        that.handleSelectorEditableBlur(event);
+                }, false);
+                this._layerEditable.addEventListener("change", function(event) {
+                                that.dynamicLayerName.value = that._layerEditable.value;
+                this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = that.dynamicLayerName.value
+                                that.needsDraw = true;
+                }, false);
                 this._layerEditable.editingClass = "editable2";
                 this._layerEditable.value = this.layerName;
                 //this._layerEditable.needsDraw = true;
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 4177c681..df1a25a8 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -786,6 +786,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
                 this.currentLayerNumber = this.currentLayerNumber + 1;
                 newLayerName = "Layer " + this.currentLayerNumber;
+
+                if(ele.dataset.storedLayerName){
+                    newLayerName = ele.dataset.storedLayerName;
+                }
                 thingToPush.layerData.layerName = newLayerName;
                 thingToPush.layerData.layerID = this.currentLayerNumber;
                 thingToPush.parentElementUUID = this.hashKey;
@@ -816,6 +820,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 // Delete the selected layer.
                 var myIndex = this.layerRepetition.selectedIndexes[0];
                 this.arrLayers.splice(myIndex, 1);
+                var selectIndex = this.arrLayers.length;
+                this.selectLayer(selectIndex-1);
             }
         }
     },
@@ -824,6 +830,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         value:function() {
             this.createNewLayer();
             this.currentLayerSelected.layerData.elementsList.push(this.application.ninja.selectedElements[0]._element);
+            this.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.currentLayerSelected.layerData.layerName;
         }
     },
 
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index e294a69e..edca4306 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -435,6 +435,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.init();
             this.ninjaStylesContoller = this.application.ninja.stylesController;
             this.element.addEventListener("click", this, false);
+            this.eventManager.addEventListener("tlZoomSlider", this, false);
         }
     },
 
@@ -467,6 +468,46 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         }
     },
 
+        handleTlZoomSlider: {
+                value: function(event) {
+                        
+                var currentMilliSecPerPixel , currentMilliSec , clickPos,thingToPush;
+                var i = 0,
+                        tweensLength = this.tweens.length;
+
+                for (i = 0; i < tweensLength; i++) {
+                        
+                        if (i === 0) {
+                                        // Exception: 0th item does not depend on anything
+                                        // TODO: If 0th tween is draggable, this will need to be fixed.
+                                this.tweens[i].tweenData.spanWidth=0;
+                            this.tweens[i].tweenData.spanPosition=0;
+                            this.tweens[i].tweenData.keyFramePosition=0;
+                            this.tweens[i].tweenData.keyFrameMillisec=0;
+        
+                        } else {
+                                        var prevKeyFramePosition = this.tweens[i - 1].tweenData.keyFramePosition,
+                                                myObj = {},
+                                                thing = {};
+
+                                currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
+                            currentMilliSec = this.tweens[i].tweenData.keyFrameMillisec;
+                            clickPos = currentMilliSec / currentMilliSecPerPixel;
+
+                            for (thing in this.tweens[i].tweenData) {
+                                myObj[thing] = this.tweens[i].tweenData[thing];
+                            }
+                                        myObj.spanWidth = clickPos - prevKeyFramePosition;
+                            myObj.keyFramePosition = clickPos;
+                            myObj.spanPosition = clickPos - (clickPos - prevKeyFramePosition);
+
+                            this.tweens[i].tweenData = myObj;
+                        }
+                        
+
+                }
+                }
+        },
     handleClick:{
         value:function (ev) {
             // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span
@@ -682,6 +723,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             }
         }
     },
+    getTweenIndexById: {
+        value: function(intID) {
+                var i = 0,
+                        arrTweensLength = this.tweens.length;
+                        for (i = 0; i < arrTweensLength; i++) {
+                            if (this.tweens[i].tweenData.tweenID === intID) {
+                                returnVal = i;
+                            }
+                        }
+                        return returnVal;
+        }
+    },
         /* Begin: Logging routines */
     _boolDebug: {
         enumerable: false,
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 28c9a585..27828c3c 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -44,6 +44,7 @@ var Tween = exports.Tween = Montage.create(Component, {
         },
         set: function(value){
             this._spanWidth = value;
+            this.tweenData.spanWidth = value;
             this.needsDraw=true;
         }
     },
@@ -59,6 +60,7 @@ var Tween = exports.Tween = Montage.create(Component, {
         },
         set:function (value) {
             this._spanPosition = value;
+            this.tweenData.spanPosition = value;
             this.needsDraw=true;
         }
     },
@@ -74,6 +76,7 @@ var Tween = exports.Tween = Montage.create(Component, {
         },
         set:function (value) {
             this._keyFramePosition = value;
+            this.tweenData.keyFramePosition = value;
             this.needsDraw=true;
         }
     },
@@ -136,11 +139,6 @@ var Tween = exports.Tween = Montage.create(Component, {
         }
     },
 
-    prepareForDraw:{
-        value:function(){
-            this.eventManager.addEventListener("tlZoomSlider", this, false);
-        }
-    },
 
     draw:{
         value:function () {
@@ -227,71 +225,6 @@ var Tween = exports.Tween = Montage.create(Component, {
             // deselect the keyframe for this tween
             this.keyframe.deselectKeyframe();
         }
-    },
-
-    handleTlZoomSlider:{
-        value:function(event){
-            var currentMilliSecPerPixel , currentMilliSec , clickPos,i=0;
-
-            length = this.application.ninja.timeline.tempArray.length;
-            if(length > 0 && this.application.ninja.timeline.tempArray[length-1]!== this.parentComponent.parentComponent.trackID){
-                this.application.ninja.timeline.tempArray.push(this.parentComponent.parentComponent.trackID);
-                var i = this.application.ninja.timeline.tweenarray.length-1;
-                for(;this.currentTween = this.application.ninja.timeline.tweenarray[i];i--){
-                    if(this.application.ninja.timeline.tweenarray[i].tweenID===0){
-                        this.currentTween.spanWidth=0;