1 files changed, 101 insertions, 67 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 6066066a..8dc19958 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -321,6 +321,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         }
     },
 
+    _ruleList:{
+        value:[]
+    },
+
+    ruleList:{
+        get:function () {
+            return this._ruleList;
+        },
+        set:function (val) {
+            this._ruleList = val;
+        }
+    },
+
     animationNamesString:{
         value:""
     },
@@ -440,11 +453,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
     
     triggerOutgoingBinding : {
         value: function() {
-                if (this.trackData.triggerBinding === true) {
-                        this.trackData.triggerBinding = false;
-                } else {
-                        this.trackData.triggerBinding = true;
-                }
+            this.trackData.triggerBinding = !this.trackData.triggerBinding;
         }
     },
 
@@ -468,8 +477,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.ninjaStylesContoller = this.application.ninja.stylesController;
             var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
             if (selectedIndex !== false) {
-                    if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]){
-                        this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0];
+                    if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement){
+                        this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement;
                     }
             }
 
@@ -514,7 +523,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
     didDraw:{
         value:function () {
             if ((!this.application.ninja.documentController.creatingNewFile)||(!this.application.ninja.currentDocument.setLevel)) {
-                if (this.application.ninja.currentDocument.documentRoot.children[0]) {
+                if (this.application.ninja.currentDocument.model.documentRoot.children[0]) {
                     var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
                     if (selectedIndex !== false) {
                             if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) {
@@ -597,7 +606,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             // This needs to move to a keyboard shortcut that is TBD
             var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
             if (ev.shiftKey) {
-                if (this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList.length == 1) {
+                //if (this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList.length == 1) {
                     if (this.tweens.length < 1) {
                         this.insertTween(0);
                         this.addAnimationRuleToElement(ev);
@@ -612,10 +621,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                             this.updateKeyframeRule();
                         }
                     }
-                } else {
+                //} else {
                     // TEMP error check
-                    console.log("There must be exactly one element in an animated layer.");
-                }
+                    //console.log("There must be exactly one element in an animated layer.");
+                //}
             }
         }
     },
@@ -644,17 +653,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             newTween.tweenData = {};
 
             if (clickPos == 0) {
-                this.animatedElement = this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0];
+                this.animatedElement = this.application.ninja.timeline.arrLayers[this.application.ninja.timeline.currentLayersSelected[0]].layerData.stageElement;
                 newTween.tweenData.spanWidth = 0;
                 newTween.tweenData.keyFramePosition = 0;
                 newTween.tweenData.keyFrameMillisec = 0;
                 newTween.tweenData.tweenID = 0;
                 newTween.tweenData.spanPosition = 0;
                 newTween.tweenData.tweenedProperties = [];
-                newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop;
-                newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft;
-                newTween.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth;
-                newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight;
+                newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
+                newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
+                newTween.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px";
+                newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px";
                 this.tweens.push(newTween);
             } else {
                 newTween.tweenData.spanWidth = clickPos - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition;
@@ -663,10 +672,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 newTween.tweenData.tweenID = this.nextKeyframe;
                 newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth;
                 newTween.tweenData.tweenedProperties = [];
-                newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop;
-                newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft;
-                newTween.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth;
-                newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight;
+                newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
+                newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
+                newTween.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px";
+                newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px";
                 this.tweens.push(newTween);
 
                 // update the animation duration
@@ -675,7 +684,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 this.nextKeyframe += 1;
             }
 
-            this.application.ninja.documentController.activeDocument.needsSave = true;
+            this.application.ninja.documentController.activeDocument.model.needsSave = true;
         }
     },
 
@@ -708,10 +717,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                     newTweenToInsert.tweenData.tweenID = splitTweenIndex - 1;
                     newTweenToInsert.tweenData.spanPosition = clickPos - newTweenToInsert.tweenData.spanWidth;
                     newTweenToInsert.tweenData.tweenedProperties = [];
-                    newTweenToInsert.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop;
-                    newTweenToInsert.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft;
-                    newTweenToInsert.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth;
-                    newTweenToInsert.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight;
+                    newTweenToInsert.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
+                    newTweenToInsert.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
+                    newTweenToInsert.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px";
+                    newTweenToInsert.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px";
                     this.tweens.splice(splitTweenIndex, 0, newTweenToInsert);
                     break;
                 }
@@ -727,41 +736,50 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
 
             var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
             this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created=true;
-            this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0];
+            this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement;
             if(this.animatedElement!==undefined){
                 this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name");
 
                 // check for multiple animation names
                 var animationNameList = this.animationName.split(",");
                 if(animationNameList.length > 1){
+                    this.animationNamesString = this.animationName;
                     this.animationName = animationNameList[0];
-                    this.extractKeyframesFromRules(animationNameList);
+                    this.getAllAnimationRules(animationNameList);
+                } else {
+                    this.animationNamesString = this.animationName;
                 }
 
-                this.animationNamesString = this.animationName;
-
                 // build tweens for this tracks's keyframe rule
                 if(this.animationName){
                     trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration");