1 files changed, 77 insertions, 113 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index e76b8cc0..81bd1867 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -306,24 +306,28 @@ var Layer = exports.Layer = Montage.create(Component, {
     
     // Are the various collapsers collapsed or not
     _isMainCollapsed : {
-        value: ""
+        serializable: true,
+        value: true
     },
     isMainCollapsed : {
+        serializable: true,
         get: function() {
                 return this._isMainCollapsed;
         },
         set: function(newVal) {
+                this.log('layer.js: isMainCollapsed: ' + newVal);
                 if (newVal !== this._isMainCollapsed) {
                         this._isMainCollapsed = newVal;
-                        this.needsDraw = true;
                 }
         }
     },
     
     _isTransformCollapsed : {
+        serializable: true,
         value: true
     },
     isTransformCollapsed : {
+        serializable: true,
         get: function() {
                 return this._isTransformCollapsed;
         },
@@ -336,9 +340,11 @@ var Layer = exports.Layer = Montage.create(Component, {
     },
     
     _isPositionCollapsed : {
+        serializable: true,
         value: true
     },
     isPositionCollapsed : {
+        serializable: true,
         get: function() {
                 return this._isPositionCollapsed;
         },
@@ -351,9 +357,11 @@ var Layer = exports.Layer = Montage.create(Component, {
     },
     
     _isStyleCollapsed : {
+        serializable: true,
         value: true
     },
     isStyleCollapsed : {
+        serializable: true,
         get: function() {
                 return this._isStyleCollapsed;
         },
@@ -364,6 +372,20 @@ var Layer = exports.Layer = Montage.create(Component, {
                 }
         }
     },
+    _bypassAnimation : {
+        serializable: true,
+        value: false
+    },
+    bypassAnimation : {
+        serializable: true,
+        get: function() {
+                return this._bypassAnimation;
+        },
+        set: function(newVal) {
+                //console.log("layer.js _bypassAnimation setter " + newVal)
+                this._bypassAnimation = newVal;
+        }
+    },
     
 
         /* END: Models */
@@ -376,11 +398,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         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;
@@ -396,85 +414,12 @@ var Layer = exports.Layer = Montage.create(Component, {
                 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.myContent;
-            //this.mainCollapser.isCollapsedAtStart = true;
-            this.mainCollapser.isCollapsed = this.isMainCollapsed;
-            this.mainCollapser.isAnimated = true;
-            this.element.setAttribute("data-layerid", this.layerID);
-            this.mainCollapser.labelClickEvent = function(boolBypass) {
-                                var newEvent = document.createEvent("CustomEvent");
-                                newEvent.initCustomEvent("layerEvent", false, true);
-                                newEvent.layerEventLocale = "content-main";
-                                newEvent.layerEventType = "labelClick";
-                                newEvent.layerID = that.layerID;
-                                newEvent.bypassAnimation = boolBypass;
-                                defaultEventManager.dispatchEvent(newEvent);
-                                that.isMainCollapsed = that.mainCollapser.isCollapsed;
-            }
-                //this.mainCollapser.needsDraw = true;
 
-            this.positionCollapser.clicker = this.clickerPosition;
-            this.positionCollapser.myContent = this.contentPosition;
-            this.positionCollapser.element = this.contentPosition;
-            this.positionCollapser.contentHeight = 40;
-            // this.positionCollapser.isCollapsedAtStart = true;
-            this.positionCollapser.isCollapsed = this.isPositionCollapsed;
-            this.positionCollapser.isAnimated = true;
-            this.positionCollapser.labelClickEvent = function(boolBypass) {
-                                var newEvent = document.createEvent("CustomEvent");
-                                newEvent.initCustomEvent("layerEvent", false, true);
-                                newEvent.layerEventLocale = "content-position";
-                                newEvent.layerEventType = "labelClick";
-                                newEvent.layerID = that.layerID;
-                                newEvent.bypassAnimation = boolBypass;
-                                defaultEventManager.dispatchEvent(newEvent);
-                                that.isPositionCollapsed = that.positionCollapser.isCollapsed;
-            }
-            //this.positionCollapser.needsDraw = true;
-            
-            this.transformCollapser.clicker = this.clickerTransform;
-            this.transformCollapser.myContent = this.contentTransform;
-            this.transformCollapser.element = this.contentTransform;
-            this.transformCollapser.contentHeight = 100;
-            // this.transformCollapser.isCollapsedAtStart = true;
-            this.transformCollapser.isCollapsed = this.isTransformCollapsed;
-            this.transformCollapser.isAnimated = true;
-            this.transformCollapser.labelClickEvent = function(boolBypass) {
-                                var newEvent = document.createEvent("CustomEvent");
-                                newEvent.initCustomEvent("layerEvent", false, true);
-                                newEvent.layerEventLocale = "content-transform";
-                                newEvent.layerEventType = "labelClick";
-                                newEvent.layerID = that.layerID;
-                                newEvent.bypassAnimation = boolBypass;
-                                defaultEventManager.dispatchEvent(newEvent);
-                                that.isTransformCollapsed = that.transformCollapser.isCollapsed;
-            }
-            //this.transformCollapser.needsDraw = true;
-            
-            this.styleCollapser.clicker = this.clickerStyle;
-            this.styleCollapser.myContent = this.contentStyle;
-            this.styleCollapser.element = this.contentStyle;
-            this.styleCollapser.isCollapsed = this.isStyleCollapsed;
-            this.styleCollapser.contentHeight = 0;
-            this.styleCollapser.isAnimated = true;
-            this.styleCollapser.labelClickEvent = function(boolBypass) {
-                                var newEvent = document.createEvent("CustomEvent");
-                                newEvent.initCustomEvent("layerEvent", false, true);
-                                newEvent.layerEventLocale = "content-style";
-                                newEvent.layerEventType = "labelClick";
-                                newEvent.layerID = that.layerID;
-                                newEvent.bypassAnimation = boolBypass;
-                                defaultEventManager.dispatchEvent(newEvent);
-                                that.isStyleCollapsed = that.styleCollapser.isCollapsed;
-            }
-            //this.styleCollapser.needsDraw = true;
+            this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false);
+            this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false);
+            this.transformCollapser.clicker.addEventListener("click", this.handleTransformCollapserClick.bind(this), false);
+            this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false);
+
 
             // Add event listeners to add and delete style buttons
             this.buttonAddStyle.identifier = "addStyle";
@@ -491,24 +436,6 @@ var Layer = exports.Layer = Montage.create(Component, {
     },
     draw: {
         value: function() {
-
-                // Coordinate the collapsers
-            if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) {
-                this.mainCollapser.bypassAnimation = true;
-                this.mainCollapser.toggle();
-            }
-            if (this.positionCollapser.isCollapsed !== this.isPositionCollapsed) {
-                this.positionCollapser.bypassAnimation = true;
-                this.positionCollapser.toggle();
-            }