3 files changed, 27 insertions, 14 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 6f0b0b58..3c4cfa2e 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -50,6 +50,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
+    currentLayerSelected:{
+        value: null
+    },
+
+    currentTrackSelected:{
+        value: null
+    },
+
     millisecondsOffset:{
         value:1000
     },
@@ -291,7 +299,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     handleNewLayer:{
         value:function (event) {
             // Add a new layer.  It should be added above the currently selected layer,
-            // Or at the end, if no layer is selected.
+            // Or at the top, if no layer is selected.
             var hashIndex = 0 , hashVariable = 0, layerResult, trackResult, layerObject, trackObject, dLayer, parentNode;
 
             this._arrLayersNonEmpty = true;
@@ -520,8 +528,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     handleElementAdded:{
         value:function (event) {
             this.currentLayerSelected.element.push(event.detail);
-            //console.log(this.currentLayerSelected.layerPosition);
-            //console.log(this.arrTracks);
         }
     },
 
@@ -719,10 +725,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             // Next, update this.layerRepetition.selectedIndexes and this.currentLayerSelected.
             if (layerIndex !== false) {
                 this.layerRepetition.selectedIndexes = [layerIndex];
-                this.currentLayerSelected = this.arrLayers[layerIndex]
+                this.trackRepetition.selectedIndexes = [layerIndex];
+                this.currentLayerSelected = this.arrLayers[layerIndex];
+                this.currentTrackSelected = this.arrTracks[layerIndex];
             } else {
                 this.layerRepetition.selectedIndexes = null;
+                this.trackRepetition.selectedIndexes = null;
                 this.currentLayerSelected = null;
+                this.currentTrackSelected = null;
             }
         }
     },
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index f9d3ad6b..dde01a2c 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -173,7 +173,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.ninjaStylesContoller = this.application.ninja.stylesController;
             this.track_lane.addEventListener("click", this, false);
             this.keyFramePropertyData = new Array();
-            //this.insertTween(0);
         }
     },
 
@@ -202,9 +201,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 if (this.application.ninja.timeline.arrLayers[this.trackID - 1].element.length == 1) {
                     if (this.tweens.length < 1) {
                         this.insertTween(0);
-                        this.addAnimationRuleToElement();
+                        this.addAnimationRuleToElement(ev);
+                    } else {
+                        this.handleNewTween(ev);
                     }
-                    this.handleNewTween(ev);
                 } else {
                     alert("There must be exactly one element in an animated layer.")
                 }
@@ -266,12 +266,13 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
 
     splitTween:{
         value:function (ev) {
-            console.log("splitting tween at span offsetX: " + ev.offsetX);
+            alert("Splitting an existing span with a new keyframe is not yet supported.")
+            //console.log("splitting tween at span offsetX: " + ev.offsetX);
         }
     },
 
     addAnimationRuleToElement:{
-        value:function () {
+        value:function (tweenEvent) {
             var theElement = this.application.ninja.timeline.arrLayers[this.trackID - 1].element[0];
             this.animatedElement = theElement;
 
@@ -293,6 +294,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule);
 
             this.isAnimated = true;
+
+            this.insertTween(tweenEvent.offsetX);
         }
     },
 
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 64e998c3..eddf1b17 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -92,17 +92,17 @@ var Tween = exports.Tween = Montage.create(Component, {
     },
 
     prepareForDraw:{
-        value:function(){
+        value:function () {
             this.keyframe.containingTrack = this.timelineTrack;
+            this.keyframe.position = this.spanWidth;
+            this.keyframe.timelinePosition = this.keyFramePosition;
+            this.keyframe.id = this.keyframeID;
         }
     },
 
     draw:{
-        value:function(){
+        value:function () {
             this.span.spanWidth = this.spanWidth;
-            this.keyframe.position = this.spanWidth;
-            this.keyframe.timelinePosition = this.keyFramePosition;
-            this.keyframe.id = this.keyframeID;
             this.tweencontainer.style.left = this.spanPosition + "px";
         }
     }