8 files changed, 675 insertions, 572 deletions

diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index ad490c2e..88314c8b 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -22,7 +22,7 @@
  *                      the transition will not work. Subsequent collapses (and expansions) will transition as expected.
  *              isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to 
  *                      false for collapsers that will only be operated remotely.
- *              toggle(): Manually toggle the expand/collapse of the content.
+ *              isToggling: Set this anually toggle the expand/collapse of the content.
  *              
  */
 var Montage = require("montage/core/core").Montage,
@@ -68,7 +68,7 @@ var Montage = require("montage/core/core").Montage,
         },
         
         _bypassAnimation : {
-                value: false
+                value: true
         },
         bypassAnimation: {
                 get: function() {
@@ -76,8 +76,12 @@ var Montage = require("montage/core/core").Montage,
                 },
                 set: function(newVal) {
                         this._bypassAnimation= newVal;
+                        //console.log('bypassAnimation setter ' + newVal)
                 }
         },
+         _oldAnimated : {
+                value: false
+         },
         
         // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition.
         // Note that this CSS class must be defined in your style sheet with the desired transitions.
@@ -104,7 +108,7 @@ var Montage = require("montage/core/core").Montage,
                 set: function(newVal) {
                         if (newVal !== this._isCollapsed) {
                                 this._isCollapsed = newVal;
-                                this.needsDraw = true;
+                                //this.needsDraw = true;
                         }
                         
                 }
@@ -144,28 +148,28 @@ var Montage = require("montage/core/core").Montage,
                         this._isLabelClickable = newVal;
                 }
         },
-        
-        // labelClickEvent: an event to fire when the label is clicked.
-        _labelClickEvent: {
-                value: false
+
+        // isToggling: Bindable property. Set this (to anything) to trigger a toggle.
+        _isToggling: {
+                serializable: true,
+                value: true
         },
-        labelClickEvent: {
+        isToggling: {
+                serializable: true,
                 get: function() {
-                        return this._labelClickEvent;
+                        return this._isToggling;
                 },
                 set: function(newVal) {
-                        this._labelClickEvent = newVal;
-                }
-        },
-        
-        // toggle: manually toggle the collapser.
-        toggle: {
-                value: function() {
-                        if (this.bypassAnimation) {
-                                this.isAnimated = false;
+                        if (newVal !== this._isToggling) {
+                                this._isToggling = newVal;
+                                
+                                if (this.bypassAnimation === true) {
+                                        this._oldAnimated = this.isAnimated;
+                                        this.isAnimated = false;
+                                }
+                                this.myContent.classList.remove(this.transitionClass);
+                                this.handleCollapserLabelClick();
                         }
-                        this.myContent.classList.remove(this.transitionClass);
-                        this.handleCollapserLabelClick();
                 }
         },
         
@@ -175,19 +179,14 @@ var Montage = require("montage/core/core").Montage,
         
         prepareForDraw: {
                 value: function() {
-                        // Add a click listener to the label for expand/collapse
-                        if (this.isLabelClickable) {
-                                this.clicker.identifier = "collapserLabel";
-                                this.clicker.addEventListener("click", this, false);
-                        }
 
                         // Get the original value of the overflow property:
                         this._origOverflowValue = window.getComputedStyle(this.myContent, null).getPropertyValue("overflow");
+                        if (this.isCollapsed === false) {
+                                this.myContent.style.height = "auto";
+                        }
                         
-                        /*
-                         * 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";
@@ -202,7 +201,6 @@ var Montage = require("montage/core/core").Montage,
                                 this.myContent.classList.remove(this.collapsedClass);
                                 this.clicker.classList.remove(this.collapsedClass);
                         }
-                        */
                 }
         },
         draw: {
@@ -285,11 +283,6 @@ var Montage = require("montage/core/core").Montage,
                         
                         // Set the component to run its draw cycle.
                         this.needsDraw = true;
-                        
-                        // Dispatch my labelClick event
-                        if (this.labelClickEvent) {
-                                this.labelClickEvent(this.bypassAnimation);
-                        }
 
                 }
         },
@@ -320,9 +313,10 @@ var Montage = require("montage/core/core").Montage,
                                 
                         }
                         
-                        if (this.bypassAnimation) {
-                                this.bypassAnimation = false;
-                                this.isAnimated = true;
+                        if (this.bypassAnimation === true) {
+                                this.isAnimated = this._oldAnimated;
+                        } else {
+                                this.bypassAnimation = true;
                         }
                 }
         }
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 14315f8d..79b522ee 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -17,7 +17,12 @@
                         "element": {"#": "layer"},
                                                 "styleRepetition" : {"@":"repetition1"},
                                                 "dynamicLayerName" : {"@":"dtext1"},
-                                                "slotStyle" : {"@":"slot1"}
+                                                "slotStyle" : {"@":"slot1"},
+                                                "mainCollapser" : {"@" : "mainCollapser"},
+                                                "positionCollapser" : {"@" : "positionCollapser"},
+                                                "transformCollapser" : {"@" : "transformCollapser"},
+                                                "styleCollapser" : {"@" : "styleCollapser"},
+                                                "clickerMain" : {"#" : "clicker-main"}
                     }
                 },
                     "dtext1" : {
@@ -225,6 +230,90 @@
                                 "oneway": false
                             }
                         }
+                                },
+                                        
+                                "mainCollapser" : {
+                                        "module" : "js/panels/timeline/Collapser.js",
+                                        "name" : "Collapser",
+                                        "properties" : {
+                                                "element" : {"#" : "content-main"},
+                                                "myContent" : {"#" : "content-main"},
+                                                "contentHeight" : 60,
+                                                "isLabelClickable" : true,
+                                                "clicker" : {"#" : "clicker-main"},
+                                                "isCollapsed" : true,
+                                                "isAnimated" : true     
+                                        },
+                                        "bindings" : {