6 files changed, 126 insertions, 18 deletions
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
index 82218b45..1c8f808f 100644
--- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.html
@@ -23,8 +23,9 @@
        <body>
                <div data-montage-id="container-easing-menu" class="container-easing-choices">
                        <ul data-montage-id="easing_choices" class="easing-choices">
+                                <li data-ninja-ease="none">none</li>
                                <li data-ninja-ease="ease">ease</li>
-                                <li data-ninja-ease="ease-out" class="easing-selected">ease-out</li>
+                                <li data-ninja-ease="ease-out">ease-out</li>
                                <li data-ninja-ease="ease-in">ease-in</li>
                                <li data-ninja-ease="ease-in-out">ease-in-out</li>
                                <li data-ninja-ease="linear">linear</li>
diff --git a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
index f0547e31..ced3ae6a 100644
--- a/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
+++ b/js/panels/Timeline/EasingMenu.reel/EasingMenu.js
@@ -81,7 +81,7 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
    
    // currentChoice: The data attribute of the current choice
    _currentChoice: {
-        value: null
+        value: "none"
    },
    currentChoice: {
        get: function() {
@@ -109,8 +109,14 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
    draw: {
        value: function() {
                // Update the selection classes.
-            this.element.querySelector(".easing-selected").classList.remove("easing-selected");
+                        var easingSelected = this.element.querySelector(".easing-selected");
-            this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]').classList.add("easing-selected");
+                        if (easingSelected !== null) {
+                                easingSelected.classList.remove("easing-selected");
+                        }
+            var dataEl = this.element.querySelector('[data-ninja-ease="'+this.currentChoice+'"]');
+            if (dataEl !== null) {
+                dataEl.classList.add("easing-selected");
+            }
        }
    },
    didDraw: {
@@ -147,7 +153,10 @@ var EasingMenu = exports.EasingMenu = Montage.create(Component, {
                event.stopPropagation();
                        // Un-highlight the old choice and highlight the new choice
-                this.element.querySelector(".easing-selected").classList.remove("easing-selected");
+                        var easingSelected = this.element.querySelector(".easing-selected");
+                        if (easingSelected !== null) {
+                                easingSelected.classList.remove("easing-selected");
+                        }
                event.target.classList.add("easing-selected");
                
                // Set the easing in the span that called us
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index 59cd13ed..91ce1cfb 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -59,7 +59,7 @@ var Span = exports.Span = Montage.create(Component, {
    },
    
    _easing: {
-        value: "ease-in"
+        value: "none"
    },
    easing: {
        get: function() {
@@ -68,7 +68,7 @@ var Span = exports.Span = Montage.create(Component, {
        set: function(newVal) {
                if (newVal !== this._easing) {
                        if (typeof(newVal) === "undefined") {
-                                newVal = "ease-in";
+                                newVal = "none";
                        }
                        this._easing = newVal;
                        this.parentComponent.setKeyframeEase(newVal);
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 27b3537c..339ca5a4 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -1016,7 +1016,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
            //console.log(this.trackRepetition);
            var tempEv = {};
            tempEv.offsetX = this.playheadmarker.offsetLeft;
-            this.trackRepetition.childComponents[this.currentLayersSelected[0]].handleKeyboardShortcut(tempEv);
+            if (typeof(this.trackRepetition.childComponents[this.currentLayersSelected[0]]) !== "undefined") {
+                this.trackRepetition.childComponents[this.currentLayersSelected[0]].handleKeyboardShortcut(tempEv);
+            } else {
+                // oops, we do not have a layer selected.  We should growl at the user.  For now, this will fail silently.
+            }
+            
        }
    },
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 3db57a3a..84bac2cb 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -687,7 +687,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                    if (ev.target.className === "tracklane") {
                        this.handleNewTween(ev);
                        this.updateKeyframeRule();
-                    } else if (ev.target.className === "tween_span" && ev.target.parentElement.parentElement.className === "tracklane") {
+                    } else if (ev.target.className === "tween_span_bar" && ev.target.parentElement.parentElement.parentElement.className === "tracklane") {
                        this.handleNewTween(ev);
                        this.updateKeyframeRule();
                    }
@@ -703,7 +703,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                this.addAnimationRuleToElement(ev);
                this.updateKeyframeRule();
            } else {
-                this.handleNewTween(ev);
+                //this.handleNewTween(ev);
+                
+                // Split a tween!
+                this.splitTweenAt(this.application.ninja.timeline.playheadmarker.offsetLeft)
                this.updateKeyframeRule();
            }
        }
@@ -716,7 +719,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                this.application.ninja.timeline.selectLayer(selectedIndex, false);
                this.insertTween(ev.offsetX);
            } else {
-                this.splitTween(ev);
+                // We will be splitting a tween.  Get the x-coordinate of the mouse click within the target element.
+                // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling.
+                // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element
+                                var findXOffset = function(obj) {
+                                        var curleft = 0;
+                                        if (obj.offsetParent) {
+                                                do {
+                                                                curleft += (obj.offsetLeft-obj.scrollLeft);
+                                        
+                                                        } while (obj = obj.offsetParent);
+                                        }
+                                        return curleft;
+                                }
+                                var targetElementOffset = findXOffset(ev.currentTarget),
+                                        position = event.pageX - targetElementOffset;
+                this.splitTweenAt(position-18);
            }
        }
    },
@@ -751,7 +771,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                newTween.tweenData.keyFrameMillisec = currentMillisec;
                newTween.tweenData.tweenID = this.nextKeyframe;
                newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth;
-                newTween.tweenData.easing = "ease-in";
+                newTween.tweenData.easing = "none";
                newTween.tweenData.tweenedProperties = [];
                newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
                newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
@@ -771,10 +791,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
    splitTween:{
        value:function (ev) {
-            var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX;
+            var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX,
-            var i;
+                i,
-            var tweensLength = this.tweens.length-1;
+                tweensLength = this.tweens.length-1,
-            var prevTween, nextTween, splitTweenIndex;
+                prevTween, nextTween, splitTweenIndex;
+            
+            consol.log(ev.target.className)
            for(i=0; i<tweensLength; i++){
                prevTween = this.tweens[i].tweenData.keyFramePosition;
                nextTween = this.tweens[i+1].tweenData.keyFramePosition;
@@ -810,6 +832,71 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
        }
    },
+        // splitTweenAt: Split a tween at a particular position (x coordinate)
+    splitTweenAt: {
+        value:function (position) {