1 files changed, 474 insertions, 0 deletions

diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 175b77f9..c75e105d 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -15,7 +15,481 @@ 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.parentComponent.animatedElement;
+            this.ninjaStylesContoller = this.application.ninja.stylesController;
+        }
+    },
+
+    draw:{
+        value:function(){
+
+        }
+    },
+
+    didDraw:{
+        value:function () {
+            if(this.currentKeyframeRule){
+                this.retrieveStoredStyleTweens();
+            }
+        }
+    },
+
+    trackEditorProperty:{
+        value:""
+    },
+
+    animatedElement:{
+        value:null
+    },
+
+    isSubproperty:{
+        value:true
+    },
+
+    _propTweenRepetition:{
+        value:null
+    },
+
+    propTweenRepetition:{
+        get:function () {
+            return this._propTweenRepetition;
+        },
+        set:function (newVal) {
+            this._propTweenRepetition = newVal;
+        }
+    },
+
+    _propTweens:{
+        value:[]
+    },
+
+    propTweens:{
+        serializable:true,
+        get:function () {
+            return this._propTweens;
+        },
+        set:function (newVal) {
+            this._propTweens = newVal;
+        }
+    },
+
+    _propTrackData:{
+        value:false
+    },
+
+    propTrackData:{
+        serializable:true,
+        get:function () {
+            return this._propTrackData;
+        },
+        set:function (val) {
+            this._propTrackData = val;
+            if (this._propTrackData) {
+                this.setData();
+            }
+        }
+    },
+
+    nextKeyframe:{
+        value:1
+    },
+
+    ninjaStylesContoller:{
+        value:null
+    },
+
+    animationName:{
+        value:null
+    },
+
+    currentKeyframeRule:{
+        value:null
+    },
+
+    trackDuration:{
+        value:0
+    },
+
+    _trackID:{
+        value:null
+    },
+
+    trackID:{
+        serializable:true,
+        get:function () {
+            return this._trackID;
+        },
+        set:function (value) {
+            if (value !== this._trackID) {
+                this._trackID = value;
+            }
+        }
+    },
+
+    _trackType:{
+        value:null
+    },
+
+    trackType:{
+        serializable:true,
+        get:function () {
+            return this._trackType;
+        },
+        set:function (value) {
+            if (value !== this._trackType) {
+                this._trackType = value;
+            }
+        }
+    },
+
+    _styleIndex:{
+        value:null
+    },
+
+    styleIndex:{
+        serializable:true,
+        get:function () {
+            return this._styleIndex;
+        },
+        set:function (value) {
+            if (value !== this._styleIndex) {
+                this._styleIndex = value;
+            }
+        }
+    },
+
+    setData:{
+        value:function () {
+            if (typeof(this.propTrackData) === "undefined") {
+                return;
+            }
+
+            this.styleIndex = this.propTrackData.styleIndex;
+            this.propTweens = this.propTrackData.propTweens;
+            this.trackType = this.propTrackData.trackType;
+            this.trackEditorProperty = this.propTrackData.trackEditorProperty;
+            this.currentKeyframeRule = this.propTrackData.existingRule;
+            this.needsDraw = true;
+        }
+    },
+
+    handleClick:{
+        value:function (ev) {
+            if (ev.shiftKey) {
+
+                if (this.trackType == "position") {
+                    this.parentComponent.parentComponent.parentComponent.parentComponent.handleNewTween(ev);
+                }
+
+                if (this.propTweens.length < 1) {
+
+                    // check if there is an editor property assigned yet
+                    // get this property track's editor prop name from layer data arrays
+                    var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID),
+                        currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex);
+
+                    if (this.trackType == "style") {
+                        //console.log("PropertyTrack.handleClick; selectIndex = ", selectIndex, "; styleIndex = ", currentSelectedStyleIndex)
+                        if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) {
+                            console.log("Please enter a style property for this track before adding keyframes.");
+                            return;
+                        } else {
+                            this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty;
+                            //console.log("Property track editorProperty set to: " + this.trackEditorProperty);
+                        }
+                        this.insertPropTween(0);
+                        this.addPropAnimationRuleToElement(ev);
+                        this.updatePropKeyframeRule();
+                    } else if (this.trackType == "position") {
+                        //console.log("Property track editorProperty set to: " + this.trackEditorProperty);
+                    }
+                } else {
+                    this.handleNewPropTween(ev);
+                    if (this.trackType == "style") {
+                        this.updatePropKeyframeRule();
+                    }
+                }
+            }
+        }
+    },
+    
+    getCurrentSelectedStyleIndex: {
+        value: function(layerIndex) {
+                var returnVal = false,
+                        i = 0,
+                        arrLayerStylesLength = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles.length;
+                for (i = 0; i < arrLayerStylesLength; i++) {
+                        var currItem =  this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles[i];
+                        if (currItem.isSelected === true) {
+                                returnVal = i;
+                        }
+                }
+                return returnVal;
+        }
+    },
+
+    handleNewPropTween:{
+        value:function (ev) {
+            if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) {