3 files changed, 83 insertions, 9 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 3fc5a3e1..acc0567c 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -601,7 +601,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                 }
         },
         addStyle : {
-                value: function(styleProperty) {
+                value: function(styleProperty, existingRule) {
                         // Add a new style rule.  It should be added above the currently selected rule, 
                         // Or at the end, if no rule is selected.
 
@@ -630,6 +630,9 @@ var Layer = exports.Layer = Montage.create(Component, {
                 newStyle.editorProperty = styleProperty;
                 newEvent.layerEventType = "restoreStyle";
                 newEvent.trackEditorProperty = styleProperty;
+                if(existingRule){
+                    newEvent.existingRule = existingRule;
+                }
             }
                         newStyle.editorValue = "";
                         newStyle.ruleTweener = false;
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 59bc14e4..d602641e 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -24,7 +24,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
 
     draw:{
         value:function(){
-
+            console.log(this.currentKeyframeRule);
         }
     },
 
@@ -178,6 +178,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
             this.propTweens = this.propTrackData.propTweens;
             this.trackType = this.propTrackData.trackType;
             this.trackEditorProperty = this.propTrackData.trackEditorProperty;
+            this.currentKeyframeRule = this.propTrackData.existingRule;
             this.needsDraw = true;
         }
     },
@@ -315,7 +316,77 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
 
     retrieveStoredStyleTweens:{
         value:function(){
-            console.log("retrieve style tweens");
+            console.log("retrieving style tweens");
+            var percentValue, fraction, splitValue;
+            var currentMilliSec, currentMilliSecPerPixel, clickPosition, tempTiming, tempTimingFloat, trackTiming, i = 0;
+
+            if (this.animatedElement !== undefined) {
+
+                //this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name");
+
+                // build tweens for this tracks's keyframe rule
+                if (this.animationName) {
+
+                    trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration");
+                    this.nextKeyframe = 0;
+
+                    this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument.model.views.design.document);
+
+                    for (i = 0; this.currentKeyframeRule[i]; i++) {
+                        var newTween = {};
+                        newTween.tweenData = {};
+
+                        var j, styleLength = this.currentKeyframeRule[i].style.length, keyframeStyles = [];
+
+                        for (j = 0; j < styleLength; j++) {
+
+                            // check for vendor prefixes and skip them for now
+                            var firstChar = this.currentKeyframeRule[i].style[j].charAt(0);
+                            if (firstChar === "-") {
+                                break;
+                            } else {
+                                var currProp = this.currentKeyframeRule[i].style[j];
+                                var propVal = this.currentKeyframeRule[i].style[currProp];
+                                keyframeStyles.push([currProp, propVal]);
+                            }
+                        }
+
+                        // recreate tween properties array for timeline tween
+                        newTween.tweenData.tweenedProperties = [];
+                        for (var k in keyframeStyles) {
+                            newTween.tweenData.tweenedProperties[keyframeStyles[k][0]] = keyframeStyles[k][1];
+                        }
+
+                        if (this.currentKeyframeRule[i].keyText === "0%") {
+                            newTween.tweenData.spanWidth = 0;
+                            newTween.tweenData.keyFramePosition = 0;
+                            newTween.tweenData.keyFrameMillisec = 0;
+                            newTween.tweenData.tweenID = 0;
+                            newTween.tweenData.spanPosition = 0;
+                            this.tweens.push(newTween);
+                        }
+                        else {
+                            tempTiming = trackTiming.split("s");
+                            tempTimingFloat = parseFloat(tempTiming[0]);
+                            this.trackDuration = tempTimingFloat * 1000;
+                            percentValue = this.currentKeyframeRule[i].keyText;
+                            splitValue = percentValue.split("%");
+                            fraction = splitValue[0] / 100;
+                            currentMilliSec = fraction * this.trackDuration;
+                            currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
+                            clickPosition = currentMilliSec / currentMilliSecPerPixel;
+                            newTween.tweenData.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition;
+                            newTween.tweenData.keyFramePosition = clickPosition;
+                            newTween.tweenData.keyFrameMillisec = currentMilliSec;
+                            newTween.tweenData.tweenID = this.nextKeyframe;
+                            newTween.tweenData.spanPosition = clickPosition - newTween.tweenData.spanWidth;
+                            this.tweens.push(newTween);
+                        }
+                        this.nextKeyframe += 1;
+                    }
+                    this.isTrackAnimated = true;
+                }
+            }
         }
     },
 
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index bd55f2fb..efaf7aa8 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -829,14 +829,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
 
     recreatePropertyTracks:{
         value:function(ruleSet){
-
-
             for(var i in ruleSet){
                 var styleProp = ruleSet[i][0].style[0];
                 console.log(styleProp);
-                this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle(styleProp);
+                console.log(ruleSet[i]);
+                this.application.ninja.timeline.layerRepetition.childComponents[0].addStyle(styleProp, ruleSet[i]);
             }
-
         }
     },
 
@@ -881,8 +879,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 keyframeString += keyframePropertyString;
             }
             keyframeString += " }";
+            //console.log(keyframeString);
             // set the keyframe string as the new rule
             this.currentKeyframeRule = this.ninjaStylesContoller.addRule(keyframeString);
+            //console.log(this.currentKeyframeRule);
             this.application.ninja.currentDocument.model.needsSave = true;
         }
     },
@@ -944,8 +944,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 return;
             }
             if (layerEvent.layerEventType === "newStyle") {
-                // TODO: Add a real track of tweens.  Probably need a method for that.
-
                 var newStyleTrack = {};
                 newStyleTrack.propTrackData = {};
                 newStyleTrack.propTrackData.styleSelection = layerEvent.styleSelection;
@@ -953,6 +951,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 newStyleTrack.propTrackData.trackType = "style";
                 newStyleTrack.propTrackData.trackEditorProperty = "";
                 newStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex;
+                newStyleTrack.propTrackData.existingRule = "";
 
                 this.arrStyleTracks.push(newStyleTrack);
 
@@ -964,6 +963,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 restoredStyleTrack.propTrackData.trackType = "style";
                 restoredStyleTrack.propTrackData.trackEditorProperty = layerEvent.trackEditorProperty;
                 restoredStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex;
+                restoredStyleTrack.propTrackData.existingRule = layerEvent.existingRule;
 
                 this.arrStyleTracks.push(restoredStyleTrack);
             }