13 files changed, 211 insertions, 126 deletions

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index ba6952aa..95a94b36 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -76,9 +76,17 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
 
     selectKeyframe:{
         value:function(){
+
+            if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){
+                var tweenID = this.parentComponent.tweenID;
+                var mainTrack = this.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent;
+                mainTrack.childComponents[0].childComponents[tweenID].childComponents[0].selectKeyframe();
+                return;
+            }
+
             this.isSelected=true;
             this.element.style.left = (this.position - 6) + "px";
-            this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty
+            this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty;
             this.parentComponent.selectTween();
         }
     },
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 66f39b5a..31ba8253 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -16,8 +16,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     prepareForDraw:{
         value:function(){
             this.element.addEventListener("click", this, false);
-            this.trackID = this.parentComponent.parentComponent.parentComponent.trackID;
-            this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement;
+            this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID;
+            this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement;
             this.ninjaStylesContoller = this.application.ninja.stylesController;
         }
     },
@@ -442,12 +442,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
 
             for (var i = 0; i < this.propTweens.length; i++) {
                 var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec);
-                // TODO - trackDur should be parseFloat rounded to significant digits
+                // trackDur should be parseFloat rounded to significant digits
                 var trackDur = parseInt(this.trackDuration);
                 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%";
                 var keyframePropertyString = " " + keyframePercent + " {";
                 for(var prop in this.propTweens[i].tweenData.tweenedProperties){
-                    keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop];
+                    keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop] + ";";
                 }
                 keyframePropertyString += "}";
                 keyframeString += keyframePropertyString;
@@ -465,13 +465,11 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
             if (currentStyleValue == null) {
                 currentStyleValue = "1px";
             }
-            console.log(currentStyleValue);
 
             this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue;
 
-
             this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty;
-            var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString;
+            var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.parentComponent.animationNamesString;
             var newAnimationNames = currentAnimationNameString + "," + this.animationName;
             var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration");
             var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration;
@@ -481,14 +479,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
             this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames;
 
             this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames);
-
             this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration);
+            this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "forwards");
             this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount);
 
             var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }";
-            console.log(initRule);
             this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule);
-
             this.insertPropTween(tweenEvent.offsetX);
         }
     }
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
index 91ce1cfb..3c491a53 100644
--- a/js/panels/Timeline/Span.reel/Span.js
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -71,6 +71,8 @@ var Span = exports.Span = Montage.create(Component, {
                                 newVal = "none";
                         }
                         this._easing = newVal;
+                        this.parentComponent.easing = this.easing;
+                        this.parentComponent.tweenData.easing = this.easing;
                         this.parentComponent.setKeyframeEase(newVal);
                         this.needsDraw = true;
                 }
@@ -180,7 +182,7 @@ var Span = exports.Span = Montage.create(Component, {
     handleEasingChoicesClick: {
         value: function(event) {
                 event.stopPropagation();
-                        
+
                         // Remove the pointer to ourselves
                         //this.application.ninja.timeline.currentOpenSpanMenu = false;
                         
@@ -190,6 +192,8 @@ var Span = exports.Span = Montage.create(Component, {
                 
                 // Set the easing 
                 this.easing = event.target.dataset.ninjaEase;
+                this.parentComponent.easing = this.easing;
+                this.parentComponent.tweenData.easing = this.easing;
                 
                 // Unbind the event handler
                 this.application.ninja.timeline.easingMenu.popup.contentEl.removeEventListener("click");
diff --git a/js/panels/Timeline/Style.reel/Style.html b/js/panels/Timeline/Style.reel/Style.html
index cdc355e7..f141fc1c 100644
--- a/js/panels/Timeline/Style.reel/Style.html
+++ b/js/panels/Timeline/Style.reel/Style.html
@@ -80,7 +80,7 @@
                                         </div>
                                         <div class="cell-value value-editor editor-color hidden">
                                                 <div data-montage-id="value-editor-color">
-                            <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div>
+                            <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl color-chip-position"></div>
                                                 </div>
                                         </div>
                                         <div class="cell-value value-editor editor-input hidden">
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index fe8d04e9..c8d323a9 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -400,8 +400,10 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                     var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,this._isFill,this._borderSide)
                     this.application.ninja.timeline.selectedStyle = this.editorProperty;
                     this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
-                    this._fillColorCtrl.color(currentValue.colorMode, currentValue.color);
-                    this.addedColorChips = true;
+                    if(currentValue){
+                        this._fillColorCtrl.color(currentValue.colorMode, currentValue.color);
+                        this.addedColorChips = true;
+                    }
                 }
                                 // TODO: set up color chip here.
                         } else if (tweenable.tweener === "input"){
diff --git a/js/panels/Timeline/Style.reel/css/Style.css b/js/panels/Timeline/Style.reel/css/Style.css
index bb65b0c7..77035873 100644
--- a/js/panels/Timeline/Style.reel/css/Style.css
+++ b/js/panels/Timeline/Style.reel/css/Style.css
@@ -6,31 +6,22 @@
 /* Layer.scss
  * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.
  */
-/* line 18, ../scss/Style.scss */
 .hidden {
-  display: none;
-}
+  display: none; }
 
-/* line 21, ../scss/Style.scss */
 .row-editor {