1 files changed, 433 insertions, 0 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
new file mode 100644
index 00000000..62688825
--- /dev/null
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -0,0 +1,433 @@
+var Montage = require("montage/core/core").Montage;
+var Component = require("montage/ui/component").Component;
+var Collapser = require("js/panels/Timeline/Collapser").Collapser;
+var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager;
+
+var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
+
+    hasTemplate:{
+        value:true
+    },
+
+    _trackID:{
+        value:null,
+        writable:true,
+        serializable:true,
+        enumerable:true
+    },
+
+    trackID:{
+        serializable:true,
+        get:function () {
+            return this._trackID;
+        },
+        set:function (value) {
+            this._trackID = value;
+            this.needsDraw = true;
+        }
+    },
+
+    // Are the various collapsers collapsed or not
+    _isMainCollapsed:{
+        value:""
+    },
+    isMainCollapsed:{
+        get:function () {
+            return this._isMainCollapsed;
+        },
+        set:function (newVal) {
+            if (newVal !== this._isMainCollapsed) {
+                this._isMainCollapsed = newVal;
+                this.needsDraw = true;
+            }
+
+        }
+    },
+    _isTransformCollapsed:{
+        value:true
+    },
+    isTransformCollapsed:{
+        get:function () {
+            return this._isTransformCollapsed;
+        },
+        set:function (newVal) {
+            if (newVal !== this._isTransformCollapsed) {
+                this._isTransformCollapsed = newVal;
+                this.needsDraw = true;
+            }
+        }
+    },
+    _isPositionCollapsed:{
+        value:true
+    },
+    isPositionCollapsed:{
+        get:function () {
+            return this._isPositionCollapsed;
+        },
+        set:function (newVal) {
+            if (newVal !== this._isPositionCollapsed) {
+                this._isPositionCollapsed = newVal;
+                this.needsDraw = true;
+            }
+        }
+    },
+    _isStyleCollapsed:{
+        value:true
+    },
+    isStyleCollapsed:{
+        get:function () {
+            return this._isStyleCollapsed;
+        },
+        set:function (newVal) {
+            if (newVal !== this._isStyleCollapsed) {
+                this._isStyleCollapsed = newVal;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _tweens:{
+        serializable:true,
+        enumerable:true,
+        value:[]
+    },
+
+    tweens:{
+        serializable:true,
+        enumerable:true,
+        get:function () {
+            return this._spans;
+        },
+        set:function (newVal) {
+            this._spans = newVal;
+        }
+    },
+
+    _tweenRepetition:{
+        serializable:true,
+        value:null
+    },
+
+    tweenRepetition:{
+        serializable:true,
+        get:function () {
+            return this._spanRepetition;
+        },
+        set:function (newVal) {
+            this._spanRepetition = newVal;
+        }
+    },
+
+    trackDuration:{
+        value:0
+    },
+
+    currentKeyframeRule:{
+        value:null
+    },
+
+    nextKeyframe:{
+        value:1
+    },
+
+    currentMillisecClicked:{
+        value:0
+    },
+
+    isAnimated:{
+        value:false
+    },
+
+    _animatedElement:{
+        serializable:true,
+        enumerable:true,
+        writable:true,
+        value:null
+    },
+
+    animatedElement:{
+        serializable:true,
+        get:function () {
+            return this._animatedElement;
+        },
+        set:function (val) {
+            this._animatedElement = val;
+        }
+    },
+
+    animationName:{
+        value:null
+    },
+
+    keyFramePropertyData:{
+        value:[]
+    },
+
+    ninjaStylesContoller:{
+        value:null
+    },
+
+    _positionCollapser:{
+        value:null
+    },
+    _mainCollapser:{
+        value:null
+    },
+    _transformCollapser:{
+        value:null
+    },
+    _styleCollapser:{
+        value:null
+    },
+
+    prepareForDraw:{
+        value:function () {
+            this.init();
+            this.ninjaStylesContoller = this.application.ninja.stylesController;
+            this.track_lane.addEventListener("click", this, false);
+            this.keyFramePropertyData = new Array();
+        }
+    },
+
+    draw:{
+        value:function () {
+            if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) {
+                this._mainCollapser.toggle(false);
+            }
+            if (this._positionCollapser.isCollapsed !== this.isPositionCollapsed) {
+                this._positionCollapser.toggle(false);
+            }
+            if (this._transformCollapser.isCollapsed !== this.isTransformCollapsed) {
+                this._transformCollapser.toggle(false);
+            }
+            if (this._styleCollapser.isCollapsed !== this.isStyleCollapsed) {
+                this._styleCollapser.toggle(false);
+            }
+        }
+    },
+
+    handleClick:{
+        value:function (ev) {
+            // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span
+            // This needs to move to a keyboard shortcut that is TBD
+            if (ev.shiftKey) {
+                if (this.application.ninja.timeline.arrLayers[this.trackID - 1].element.length == 1) {
+                    if (this.tweens.length < 1) {
+                        this.insertTween(0);
+                        this.addAnimationRuleToElement(ev);
+                    } else {
+                        this.handleNewTween(ev);
+                    }
+                } else {
+                    alert("There must be exactly one element in an animated layer.")
+                }