2 files changed, 29 insertions, 22 deletions

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index c46ae8c9..c82a9086 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -86,8 +86,6 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
         value:function(){
             this.tweenkeyframe.addEventListener("click", this, false);
             this.animatedProperties = new Array();
-
-            // should element mediator be used here?
             this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
             this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
         }
@@ -101,15 +99,16 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
 
     handleElementChange:{
         value:function (event) {
+            if(this.application.ninja.selectedElements[0]._element != this.containingTrack.animatedElement){
+                alert("Wrong element selected for this keyframe track");
+                return;
+            }
 
             if(event.detail.source && event.detail.source !== "keyframe") {
-
-                var items = this.application.ninja.selectedElements;
                 this.containingSpan.highlightSpan();
-                if(items[0]._element.offsetTop != this.animatedProperties["top"] && items[0]._element.offsetLeft != this.animatedProperties["left"]){
-                    // update this keyframe's animated properties from the item[0] element props
-                    this.animatedProperties["top"] = items[0]._element.offsetTop;
-                    this.animatedProperties["left"] = items[0]._element.offsetLeft;
+                if(this.containingTrack.animatedElement.offsetTop != this.animatedProperties["top"] && this.containingTrack.animatedElement.offsetLeft != this.animatedProperties["left"]){
+                    this.animatedProperties["top"] = this.containingTrack.animatedElement.offsetTop;
+                    this.animatedProperties["left"] = this.containingTrack.animatedElement.offsetLeft;
                     this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
                     this.containingTrack.updateKeyframeRule();
                 }
@@ -120,7 +119,6 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
     deselect:{
         value:function(){
             this.tweenkeyframe.classList.remove("keyframeSelected");
-
             this.eventManager.removeEventListener("elementChange", this, false);
         }
     },
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index dde01a2c..62688825 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -138,10 +138,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         value:false
     },
 
-    animatedElement:{
+    _animatedElement:{
+        serializable:true,
+        enumerable:true,
+        writable:true,
         value:null
     },
 
+    animatedElement:{
+        serializable:true,
+        get:function () {
+            return this._animatedElement;
+        },
+        set:function (val) {
+            this._animatedElement = val;
+        }
+    },
+
     animationName:{
         value:null
     },
@@ -273,24 +286,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
 
     addAnimationRuleToElement:{
         value:function (tweenEvent) {
-            var theElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0];
-            this.animatedElement = theElement;
-
+            this.animatedElement = this.application.ninja.timeline.currentLayerSelected.element[0];
             var initAnimatedProperties = new Array();
-            initAnimatedProperties["top"] = theElement.offsetTop;
-            initAnimatedProperties["left"] = theElement.offsetLeft;
+            initAnimatedProperties["top"] = this.animatedElement.offsetTop;
+            initAnimatedProperties["left"] = this.animatedElement.offsetLeft;
             this.keyFramePropertyData[0] = initAnimatedProperties;
 
             var animationDuration = Math.round(this.trackDuration / 1000) + "s";
-            //console.log(this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0]);
-            //console.log(this.trackID);
-            this.animationName = this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0].className + this.trackID;
+            this.animationName = this.animatedElement.className + this.trackID;
 
-            this.ninjaStylesContoller.setElementStyle(theElement, "-webkit-animation-name", this.animationName);
-            this.ninjaStylesContoller.setElementStyle(theElement, "-webkit-animation-duration", animationDuration);
-            this.ninjaStylesContoller.setElementStyle(theElement, "-webkit-animation-iteration-count", "infinite");
+            this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName);
+            this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
+            this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", "infinite");
 
-            var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + theElement.offsetTop + "px; left: " + theElement.offsetLeft + "px;} 100% {top: " + theElement.offsetTop + "px; left: " + theElement.offsetLeft + "px;} }";
+            var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} 100% {top: " + this.animatedElement.offsetTop + "px; left: " + this.animatedElement.offsetLeft + "px;} }";
             this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule);
 
             this.isAnimated = true;