13 files changed, 59 insertions, 29 deletions

diff --git a/js/panels/Resizer.js b/js/panels/Resizer.js
index 69efd6ac..3afe5d5b 100644
--- a/js/panels/Resizer.js
+++ b/js/panels/Resizer.js
@@ -92,7 +92,7 @@ exports.Resizer = Montage.create(Component, {
  
     handleDblclick: {
         value : function() {
-            this.panel.addEventListener("webkitTransitionEnd", this, true);
+            this.panel.addEventListener("webkitTransitionEnd", this, false);
             if (this.isVertical) {
                 this.panel.style.height = "";
             } else {
@@ -102,7 +102,7 @@ exports.Resizer = Montage.create(Component, {
         }
     },
 
-    captureWebkitTransitionEnd: {
+    handleWebkitTransitionEnd: {
         value: function() {
             if(this.redrawStage) {
                 this.application.ninja.stage.resizeCanvases = true;
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index 2fbe8e83..d286d84c 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -206,6 +206,7 @@ var Montage = require("montage/core/core").Montage,
                                         
                                         // Add a handler for the end of the transition, so we can tidy things up after
                                         // the transition completes
+                    this.myContent.identifier = "myContent";
                                         this.myContent.addEventListener("webkitTransitionEnd", this, false);    
                                         
                                         this.myContent.style.overflow = "hidden";
@@ -236,7 +237,7 @@ var Montage = require("montage/core/core").Montage,
                                 // Special cases:  If transition does not happen (in the case of a contentHeight of 0 
                                 // or isAnimated = false) we need to manually fire it here to do the cleanup.
                                 if ((this.contentHeight < 3) || (!this.isAnimated)) {
-                                        this.handleWebkitTransitionEnd();
+                                        this.handleMyContentWebkitTransitionEnd();
                                 }
                         }
                 }
@@ -284,7 +285,7 @@ var Montage = require("montage/core/core").Montage,
         
         // This handler is bound to the transitionEnd event.  If transitions
         // are disabled, it is called manually.
-        handleWebkitTransitionEnd: {
+    handleMyContentWebkitTransitionEnd: {
                 value: function(event) {
                         
                         // Are we animating the transitions?
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);
diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
index e66bcf10..4afc1180 100644
--- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
+++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -1,11 +1,15 @@
 .tween_keyframe{
     position: absolute;
     height: 16px;
-    width: 4px;
+    width: 5px;
     background-color: white;
     z-index: 23;
+    border-radius: 3px;
 }
 
 .tween_keyframe.keyframeSelected{
-    background-color: blue;
+    background-color: #570e19;
+    border-style: solid;
+    border-width: thin;
+    border-color: #d6d1cf;
 }
\ No newline at end of file
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index 05f56a32..f7bd4ff0 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -31,5 +31,11 @@ var Span = exports.Span = Montage.create(Component, {
         value: function(){
             this.tweenspan.style.width = this.spanWidth + "px";
         }
+    },
+
+    highlightSpan:{
+        value: function(){
+            this.tweenspan.classList.add("spanHighlight");
+        }
     }
 });
diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css
index 1583c20f..1e988c6c 100644
--- a/js/panels/Timeline/Span.reel/css/Span.css
+++ b/js/panels/Timeline/Span.reel/css/Span.css
@@ -3,4 +3,8 @@
     height: 16px;
     opacity: 0.3;
     background-color: white;
+}
+
+.tween_span.spanHighlight{
+    background-color: #a0c8ff;
 }
\ No newline at end of file
diff --git a/js/panels/Timeline/Style.reel/Style.html b/js/