10 files changed, 665 insertions, 254 deletions

diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index 5de884a9..d161cdd7 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -68,7 +68,7 @@ var Montage = require("montage/core/core").Montage,
         },
         
         _bypassAnimation : {
-                value: false
+                value: true
         },
         bypassAnimation: {
                 get: function() {
@@ -169,6 +169,28 @@ var Montage = require("montage/core/core").Montage,
                 }
         },
         
+        _isToggling: {
+                serializable: true,
+                value: true
+        },
+        isToggling: {
+                serializable: true,
+                get: function() {
+                        return this._isToggling;
+                },
+                set: function(newVal) {
+                        if (newVal !== this._isToggling) {
+                                this._isToggling = newVal;
+                                
+                                if (this.bypassAnimation) {
+                                        this.isAnimated = false;
+                                }
+                                this.myContent.classList.remove(this.transitionClass);
+                                this.handleCollapserLabelClick();
+                        }
+                }
+        },
+        
         /* === END: Models === */
         
         /* === BEGIN: Draw cycle === */
@@ -184,6 +206,10 @@ var Montage = require("montage/core/core").Montage,
                         // Get the original value of the overflow property:
                         this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");
                         
+                        /*
+                         * Removed because of expense. This disables the feature of having the
+                         * component dynamically expand/collapse the content on init based on properties;
+                         * Now default state of component must be set in CSS.
                         // If the content area is supposed to start out collapsed:
                         if (this.isCollapsed) {
                                 this.myContent.style.height = "0px";
@@ -198,6 +224,7 @@ var Montage = require("montage/core/core").Montage,
                                 this.myContent.classList.remove(this.collapsedClass);
                                 this.clicker.classList.remove(this.collapsedClass);
                         }
+                        */
                 }
         },
         draw: {
@@ -316,7 +343,7 @@ var Montage = require("montage/core/core").Montage,
                         }
                         
                         if (this.bypassAnimation) {
-                                this.bypassAnimation = false;
+                                this.bypassAnimation = true;
                                 this.isAnimated = true;
                         }
                 }
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