4 files changed, 181 insertions, 71 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 0bd448f7..14315f8d 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -226,6 +226,8 @@
                             }
                         }
                                 }
+                                
+                                
             }
         </script>
         </head>
@@ -241,9 +243,9 @@
                         <div class="collapsible-content content-layer collapsible-collapsed">
                                 <div class="label-position">
                                         <span class="collapsible-label">Position</span>
-                                        <span class="collapsible-clicker clicker-position"></span>
+                                        <span class="collapsible-clicker clicker-position collapsible-collapsed"></span>
                                 </div>
-                                <div class="content-position collapsible-content">
+                                <div class="content-position collapsible-content collapsible-collapsed">
                                         <div class="layout-table">
                                                 <div class="layout-row">
                                                         <div class="layout-cell">X</div>
@@ -257,9 +259,9 @@
                                 </div>
                                 <div class="label-transform">
                                         <span class="collapsible-label">Transform</span>
-                                        <span class="clicker-transform collapsible-clicker"></span>
+                                        <span class="clicker-transform collapsible-clicker collapsible-collapsed"></span>
                                 </div>
-                                <div class="content-transform collapsible-content">
+                                <div class="content-transform collapsible-content collapsible-collapsed">
                                         <div class="layout-table">
                                                 <div class="layout-row">
                                                         <div class="layout-cell">Scale X</div>
@@ -286,11 +288,11 @@
                                 </div>
                                 <div class="label-style">
                                         <span class="collapsible-label">Style</span>
-                                        <span class="clicker-style collapsible-clicker"></span>
+                                        <span class="clicker-style collapsible-clicker collapsible-collapsed"></span>
                                         <div class="cssbutton button-delete disabled"></div>
                                         <div class="cssbutton button-add"></div>
                                 </div>
-                                <div class="content-style collapsible-content">
+                                <div class="content-style collapsible-content collapsible-collapsed">
                                         <div class="" id="style-container">
                                                 <div class="style-row" id="layer-style">
                                                 </div>
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index e75b4d0f..2980842f 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,19 @@ var Layer = exports.Layer = Montage.create(Component, {
                 }
         }
     },
+    _animateCollapser : {
+        serializable: true,
+        value: false
+    },
+    animateCollapser : {
+        serializable: true,
+        get: function() {
+                return this._animateCollapser;
+        },
+        set: function(newVal) {
+                this._animateCollapser = newVal;
+        }
+    },
     
 
         /* END: Models */
@@ -403,11 +424,20 @@ var Layer = exports.Layer = Montage.create(Component, {
                 this.mainCollapser.myContent = this.myContent;
                 this.mainCollapser.contentHeight = 60;
                 this.myContent.style.height = "0px";
-            this.mainCollapser.element = this.element;
-            //this.mainCollapser.isCollapsedAtStart = true;
+            this.mainCollapser.element = this.myContent;
             this.mainCollapser.isCollapsed = this.isMainCollapsed;
             this.mainCollapser.isAnimated = true;
             this.element.setAttribute("data-layerid", this.layerID);
+            // Bind the collapser's isToggling property to the isMainCollapsed property,
+            // so a change in one will affect the other.
+            Object.defineBinding(this.mainCollapser, "isToggling", {
+                                boundObject: this,
+                    boundObjectPropertyPath: "isMainCollapsed",
+                    oneway: false
+                        });
+            this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false);
+            
+            /*
             this.mainCollapser.labelClickEvent = function(boolBypass) {
                                 var newEvent = document.createEvent("CustomEvent");
                                 newEvent.initCustomEvent("layerEvent", false, true);
@@ -418,15 +448,25 @@ var Layer = exports.Layer = Montage.create(Component, {
                                 defaultEventManager.dispatchEvent(newEvent);
                                 that.isMainCollapsed = that.mainCollapser.isCollapsed;
             }
-                this.mainCollapser.needsDraw = true;
+            */
+                //this.mainCollapser.needsDraw = true;
 
             this.positionCollapser.clicker = this.clickerPosition;
             this.positionCollapser.myContent = this.contentPosition;
-            this.positionCollapser.element = this.element;
-            this.positionCollapser.contentHeight = 60;
-            // this.positionCollapser.isCollapsedAtStart = true;
+            this.positionCollapser.element = this.contentPosition;
+            this.positionCollapser.contentHeight = 40;
             this.positionCollapser.isCollapsed = this.isPositionCollapsed;
-            this.positionCollapser.isAnimated = true;
+            this.positionCollapser.isAnimated = false;
+            // Bind the collapser's isToggling property to the isPositionCollapsed property,
+            // so a change in one will affect the other.
+            Object.defineBinding(this.positionCollapser, "isToggling", {
+                                boundObject: this,
+                    boundObjectPropertyPath: "isPositionCollapsed",
+                    oneway: false
+                        });
+            this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false);
+