1 files changed, 18 insertions, 13 deletions

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 1259fa63..b6623dcd 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -1,5 +1,6 @@
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
 
 var Keyframe = exports.Keyframe = Montage.create(Component, {
 
@@ -77,11 +78,16 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
         }
     },
 
+    containingSpan:{
+        value: null
+    },
+
     prepareForDraw:{
         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;
         }
@@ -89,26 +95,25 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
 
     draw:{
         value:function(){
-            this.tweenkeyframe.style.left = (this.position - 2) + "px";
+            this.tweenkeyframe.style.left = (this.position - 3) + "px";
         }
     },
 
     handleElementChange:{
         value:function (event) {
 
-            if(event.detail.source && event.detail.source !== "pi") {
+            if(event.detail.source && event.detail.source !== "keyframe") {
 
                 var items = this.application.ninja.selectedElements;
-
-                // 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;
-                this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
-
-                this.containingTrack.updateKeyframeRule();
+                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;
+                    this.containingTrack.keyFramePropertyData[this.id] = this.animatedProperties;
+                    this.containingTrack.updateKeyframeRule();
+                }
             }
-
-
         }
     },
 
@@ -131,8 +136,8 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
             var currentTop = this.animatedProperties["top"] + "px";
             var currentLeft = this.animatedProperties["left"] + "px";
 
-            this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "top", currentTop);
-            this.containingTrack.ninjaStylesContoller.setElementStyle(this.containingTrack.animatedElement, "left", currentLeft);
+            ElementsMediator.setProperty([this.containingTrack.animatedElement], "top", [currentTop], "Change", "keyframe");
+            ElementsMediator.setProperty([this.containingTrack.animatedElement], "left", [currentLeft], "Change", "keyframe");
 
             // turn on element change event listener
             this.eventManager.addEventListener("elementChange", this, false);