1 files changed, 626 insertions, 0 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
new file mode 100644
index 00000000..71a1f01f
--- /dev/null
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -0,0 +1,626 @@
+var Montage = require("montage/core/core").Montage;
+var Component = require("montage/ui/component").Component;
+var Collapser = require("js/panels/Timeline/Collapser").Collapser;
+var Hintable = require("js/components/hintable.reel").Hintable;
+var LayerStyle = require("js/panels/Timeline/Style.reel").LayerStyle;
+var DynamicText = require("montage/ui/dynamic-text.reel").DynamicText;
+var defaultEventManager = require("montage/core/event/event-manager").defaultEventManager;
+var nj = require("js/lib/NJUtils").NJUtils;
+
+var Layer = exports.Layer = Montage.create(Component, {
+
+    hasTemplate:{
+        value: true
+    },
+    
+    /* Begin: Models */
+   
+        /* Main collapser model: the main collapser for the layer */
+    _mainCollapser : {
+        value: false
+    },
+    mainCollapser: {
+        get: function() {
+                return this._mainCollapser;
+        },
+        set: function(newVal) {
+                this._mainCollapser = newVal;
+        }
+    },
+    
+    /* Style models: the array of styles, and the repetition that uses them */
+    _arrLayerStyles : {
+        serializable: true,
+                enumerable: true,
+        serializable: true,
+            value: []
+    },
+    arrLayerStyles : {
+        serializable: true,
+        enumerable: true,
+        serializable: true,
+        get: function() {
+                return this._arrLayerStyles;
+        },
+        set: function(newVal) {
+                this._arrLayerStyles = newVal;
+        }
+    },
+    _styleRepetition : {
+        value: false
+    },
+    styleRepetition : {
+        get: function() {
+                return this._styleRepetition;
+        },
+        set: function(newVal) {
+                this._styleRepetition = newVal;
+        }
+    },
+    _styleCounter : {
+        value: 0
+    },
+
+        /* Layer models: the name, ID, and selected and animation booleans for the layer */
+    _layerName:{
+        serializable: true,
+        value:null,
+        writable:true,
+        enumerable:true
+    },
+    
+    layerName:{
+        serializable: true,
+        get:function(){
+            return this._layerName;
+        },
+        set:function(newVal){
+                if (newVal !== this._layerName) {
+                        this._layerEditable.value = newVal;
+                        this._layerName = newVal;
+                        this._layerEditable.needsDraw = true;
+                        this.needsDraw = true;
+                        
+                }
+                
+        }
+    },
+    _layerID:{
+        value:null,
+        writable:true,
+        serializable: true,
+        enumerable:true
+    },
+
+    layerID:{
+        serializable: true,
+        get:function(){
+            return this._layerID;
+        },
+        set:function(value){
+            this._layerID = value;
+        }
+    },
+    
+    /* isSelected: whether or not the layer is currently selected. */
+    _isSelected:{
+        value: false,
+        writable: true,
+        serializable: true,
+        enumerable: false
+    },
+
+    isSelected:{
+        get:function(){
+            return this._isSelected;
+        },
+        set:function(value){
+                if (value !== this._isSelected) {
+                        // Only concerned about different values
+                        if (value === false) {
+                                // If changing from false to true, we need to deselect any associated styles
+                                this.selectStyle(false);
+                        }
+                        this._isSelected = value;
+                        this.needsDraw = true;
+                }
+            
+        }
+    },
+    
+    /* isActive:  Whether or not the user is actively clicking within the layer; used to communicate state with
+     * TimelinePanel.
+     */
+    _isActive: {
+        value: false
+    },
+    isActive: {
+        get: function() {
+                return this._isActive;
+        },
+        set: function(newVal) {
+                this._isActive = newVal;
+        }
+    },
+    
+    
+    _isAnimated:{
+        value: false,
+        writable: true,
+        enumerable: false
+    },
+
+    isAnimated:{
+        get:function(){
+            return this._isAnimated;
+        },
+        set:function(value){
+            this._isAnimated = value;
+        }
+    },
+    _justAdded: {
+        value: false
+    },
+    _layerEditable : {
+        value: false
+    },
+    
+    // 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;
+                }
+        }
+    },
+    
+
+        /* END: Models */
+
+        /* Begin: Draw cycle */
+    prepareForDraw: {
+        value: function() {
+                
+                // Initialize myself
+                        this.init();
+                        
+                var that = this;
+