1 files changed, 414 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..13529115
--- /dev/null
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -0,0 +1,414 @@
+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:{
+        value:null
+    },
+
+    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();
+            //this.insertTween(0);
+        }
+    },
+    
+    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.tweens.length < 1) {
+                    this.addAnimationRuleToElement();
+                    this.insertTween(0);
+                }
+                this.handleNewTween(ev);
+            }
+        }
+    },
+
+    handleNewTween:{
+        value: function(ev){
+            if(ev.offsetX > this.tweens[this.tweens.length-1].keyFramePosition){
+                this.insertTween(ev.offsetX);
+            } else {
+                this.splitTween(ev);
+            }
+        }
+    },
+
+    insertTween:{
+        value:function (clickPos) {
+