2 files changed, 62 insertions, 21 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index 79014ae6..658764c8 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -56,7 +56,7 @@
                    "styleTrackRepetition": {
                        "prototype": "montage/ui/repetition.reel",
                            "properties": {
-                               "element": {"#": "content-styles"},
+                               "element": {"#": "content_style_tracks"},
                                "isSelectionEnabled" : false
                            },
                            "bindings": {
@@ -195,22 +195,23 @@
             </div>
             <div class="label-main collapsible-label collapsible-collapsed" data-montage-id="label-main"></div>
             <div class="collapsible-content collapsible-collapsed content-main" data-montage-id="content-main">
-                <div class="label-position collapsible-label collapsible-collapsed" data-montage-id="label-position">
 
-                </div>
-                <div class="content-position collapsible-content collapsible-collapsed"
-                     data-montage-id="content_position_collapser">
+                <div class="label-position collapsible-label collapsible-collapsed" data-montage-id="label-position"></div>
+
+                <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content_position_collapser">
                     <div data-montage-id="content_position_tracks">
                         <div data-montage-id="position_track_base"></div>
                     </div>
                 </div>
 
-                <div class="label-styles collapsible-label collapsible-collapsed" data-montage-id="label-styles">
-                        
-                </div>
-                <div data-montage-id="content-styles" class="content-styles collapsible-content collapsible-collapsed">
-                        <div data-montage-id="style-track-base"></div>
+                <div class="label-styles collapsible-label collapsible-collapsed" data-montage-id="label-styles"></div>
+
+                <div class="content-styles collapsible-content collapsible-collapsed" data-montage-id="content-styles">
+                    <div data-montage-id="content_style_tracks">
+                            <div data-montage-id="style-track-base"></div>
+                    </div>
                 </div>
+
             </div>
         </div>
 
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index bf380e00..7576b33f 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -702,15 +702,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
 
     handleKeyboardShortcut:{
         value:function(ev){
-            if (this.tweens.length < 1) {
-                this.insertTween(0);
-                this.addAnimationRuleToElement(ev);
-                this.updateKeyframeRule();
-            } else {
-                //this.handleNewTween(ev);
-                
-                // Split a tween!
-                this.splitTweenAt(this.application.ninja.timeline.playheadmarker.offsetLeft)
+            if(ev.actionType == "insert"){
+                if (this.tweens.length < 1) {
+                    this.insertTween(0);
+                    this.addAnimationRuleToElement(ev);
+                    this.updateKeyframeRule();
+                } else {
+                    this.handleNewTween(ev);
+                    this.updateKeyframeRule();
+                }
+            } else if(ev.actionType == "remove"){
+                this.removeTween();
                 this.updateKeyframeRule();
             }
         }
@@ -795,9 +797,42 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 this.createMatchingPositionSizeTween(newTween);
             }
 
+            this.application.ninja.currentDocument.model.needsSave = true;
+        }
+    },
 
+    removeTween:{
+        value:function(){
+            var tweenIDToRemove = this.application.ninja.timeline.selectedTweens[0].tweenID,
+                oldPosition = this.application.ninja.timeline.selectedTweens[0].spanPosition,
+                oldSpanWidth = this.application.ninja.timeline.selectedTweens[0].spanWidth;
+
+            if(tweenIDToRemove == this.tweens[this.tweens.length-1].tweenData.tweenID){
+                this.trackDuration = this.tweens[this.tweens.length-2].tweenData.keyFrameMillisec;
+                this.tweens.pop();
+                return;
+            }
+
+            // Update the next tween to have new span position and width.
+            this.tweens[tweenIDToRemove + 1].tweenData.spanPosition = oldPosition;
+            this.tweens[tweenIDToRemove + 1].spanPosition = oldPosition;
+            this.tweens[tweenIDToRemove + 1].tweenData.spanWidth = this.tweens[tweenIDToRemove + 1].tweenData.spanWidth + oldSpanWidth;
+            this.tweens[tweenIDToRemove + 1].spanWidth = this.tweens[tweenIDToRemove + 1].spanWidth + oldSpanWidth;
 
+            // redraw the tweens
+            for(var i in this.tweenRepetition.childComponents){
+                this.tweenRepetition.childComponents[i].setData();
+            }
+
+            // remove the selected tween
+            this.tweens.splice(tweenIDToRemove, 1);
             this.application.ninja.currentDocument.model.needsSave = true;
+
+            // update the tween ids
+            for (var j = 0; j < this.tweens.length; j++) {
+                this.tweens[j].tweenID = j;
+                this.tweens[j].tweenData.tweenID = j;
+            }
         }
     },
 
@@ -934,6 +969,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                             newTween.tweenData.tweenID = 0;
                             newTween.tweenData.spanPosition = 0;
                             this.tweens.push(newTween);
+                            this.createMatchingPositionSizeTween(newTween);
                         }
                         else {
                             tempTiming = trackTiming.split("s");
@@ -955,6 +991,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                                 newTween.tweenData.easing = "none";
                             }
                             this.tweens.push(newTween);
+                            this.createMatchingPositionSizeTween(newTween);
                         }
                         this.nextKeyframe += 1;
                     }
@@ -982,8 +1019,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         value:function(ruleSet){
             for(var i in ruleSet){
                 var styleProp = ruleSet[i][0].style[0];
-                //console.log(styleProp);
-                //console.log(ruleSet[i]);
                 this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle(styleProp, ruleSet[i]);
             }
         }
@@ -1051,6 +1086,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
     createPositionTracks:{
         value:function(){
             // create track objects for position and transform tracks and push into arrays
+            
+            // ... but only do it if we haven't already.
+            if (this.arrPositionTracks.length > 0) {
+                return;
+            }
 
             // create 'left' track
             var newLeftTrack = {};