1 files changed, 511 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..29171272
--- /dev/null
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -0,0 +1,511 @@
+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 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:{
+        value: false,
+        writable: true,
+        enumerable: false
+    },
+
+    isSelected:{
+        get:function(){
+            return this._isSelected;
+        },
+        set:function(value){
+            this._isSelected = value;
+        }
+    },
+    _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;
+                
+                        this.positionCollapser = Collapser.create();
+                this.transformCollapser = Collapser.create();
+                this.styleCollapser = Collapser.create();
+                
+                // Make it editable!
+                this._layerEditable = Hintable.create();
+                this._layerEditable.element = this.titleSelector;
+                this.titleSelector.identifier = "selectorEditable";
+                this.titleSelector.addEventListener("click", this, false);
+                this._layerEditable.addEventListener("blur", function(event) {
+                        that.handleSelectorEditableBlur(event);
+                }, false);
+                this._layerEditable.addEventListener("change", function(event) {
+                                that.dynamicLayerName.value = that._layerEditable.value;
+                                that.needsDraw = true;
+                }, false);
+                this._layerEditable.editingClass = "editable2";
+                this._layerEditable.value = this.layerName;
+                this._layerEditable.needsDraw = true;
+                
+                // Change the markup into collapsible sections using the nifty Collapser component!
+                this.mainCollapser = Collapser.create();
+                this.mainCollapser.clicker = this.clicker;
+                this.mainCollapser.myContent = this.myContent;
+                this.mainCollapser.contentHeight = 60;
+                this.myContent.style.height = "0px";
+            this.mainCollapser.element = this.element;