7 files changed, 354 insertions, 190 deletions

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 4bb73514..b6623dcd 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -78,6 +78,10 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
         }
     },
 
+    containingSpan:{
+        value: null
+    },
+
     prepareForDraw:{
         value:function(){
             this.tweenkeyframe.addEventListener("click", this, false);
@@ -91,7 +95,7 @@ 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";
         }
     },
 
@@ -101,16 +105,15 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
             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();
+                }
             }
-
-
         }
     },
 
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/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 52b63376..48537cef 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -114,27 +114,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         value: false
     },
 
-    _isLayerAdded:{
-        value:false
-    },
-
-    addButtonClicked:{
-        value:true
+    _firstTimeLoaded:{
+        value:true,
+        writable:true
     },
 
-    _firstLayerDraw:{
-        value:false,
+    _arrLayersNonEmpty:{
+        value:true,
         writable:true
     },
 
     willDraw: {
         value: function() {
             if (this._isLayer) {
-                this.addButtonClicked=false;
-                this._isElementAdded=true;
-                NJevent('newLayer',this)
-                this._isLayer = false;
-                this.addButtonClicked=true;
+                this.insertLayer();
+                this._isLayer = false;;
             }
         }
     },
@@ -204,7 +198,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             //event.stopPropagation();
             this._isLayer = true;
             this.needsDraw = true;
-
         }
     },
 
@@ -215,7 +208,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             if(this.application.ninja.currentSelectedContainer.id==="UserContent"){
                 this._hashKey="123";
             }
-            NJevent('deleteLayer')
+            this.removeLayer();
         }
     },
 
@@ -223,23 +216,28 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         value:function(event){
              var i=0;
              this.currentParentNode=this.application.ninja.currentSelectedContainer.parentNode;
-             this.removeLayerFromParentUUid = this.application.ninja.currentSelectedContainer.parentNode.uuid;
-             this.currentElement= event.detail.element;
-
-//             if(this._firstLayerDraw===false){
-//                 while(this.arrLayers.pop()){
-//                 }
-//                 while(this.arrTracks.pop()){
-//                 }
-//             }
-
-             this._hashKey = event.detail.element.uuid;
-             if(this.returnedObject = this.hashInstance.getItem(this._hashKey)){
-                this.returnedTrack = this.hashTrackInstance.getItem(this._hashKey);
-                this._hashFind = true;
-                NJevent('newLayer');
 
-            }
+             if(this._firstTimeLoaded){
+                     this._firstTimeLoaded=false;
+             }else{
+                     while(this.arrLayers.pop()){
+                     }
+                     while(this.arrTracks.pop()){
+                     }
+
+                     if(event.detail.element.id==="UserContent"){
+                         this._hashKey= "123";
+                     }else{
+                         this._hashKey = event.detail.element.uuid;
+                     }
+
+                     if(this.returnedObject = this.hashInstance.getItem(this._hashKey)){
+                        this.returnedTrack = this.hashTrackInstance.getItem(this._hashKey);
+                        this._hashFind = true;
+                     }
+                     NJevent('newLayer',event.detail);
+
+             }
 
         }
     },
@@ -276,6 +274,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {