8 files changed, 276 insertions, 177 deletions

diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index 5de884a9..ad490c2e 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -184,6 +184,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 +202,7 @@ var Montage = require("montage/core/core").Montage,
                                 this.myContent.classList.remove(this.collapsedClass);
                                 this.clicker.classList.remove(this.collapsedClass);
                         }
+                        */
                 }
         },
         draw: {
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 e3897bbf..e76b8cc0 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -403,7 +403,7 @@ 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.element = this.myContent;
             //this.mainCollapser.isCollapsedAtStart = true;
             this.mainCollapser.isCollapsed = this.isMainCollapsed;
             this.mainCollapser.isAnimated = true;
@@ -418,12 +418,12 @@ 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.element = this.contentPosition;
+            this.positionCollapser.contentHeight = 40;
             // this.positionCollapser.isCollapsedAtStart = true;
             this.positionCollapser.isCollapsed = this.isPositionCollapsed;
             this.positionCollapser.isAnimated = true;
@@ -437,11 +437,11 @@ var Layer = exports.Layer = Montage.create(Component, {
                                 defaultEventManager.dispatchEvent(newEvent);
                                 that.isPositionCollapsed = that.positionCollapser.isCollapsed;
             }
-            this.positionCollapser.needsDraw = true;
+            //this.positionCollapser.needsDraw = true;
             
             this.transformCollapser.clicker = this.clickerTransform;
             this.transformCollapser.myContent = this.contentTransform;
-            this.transformCollapser.element = this.element;
+            this.transformCollapser.element = this.contentTransform;
             this.transformCollapser.contentHeight = 100;
             // this.transformCollapser.isCollapsedAtStart = true;
             this.transformCollapser.isCollapsed = this.isTransformCollapsed;
@@ -456,13 +456,13 @@ var Layer = exports.Layer = Montage.create(Component, {
                                 defaultEventManager.dispatchEvent(newEvent);
                                 that.isTransformCollapsed = that.transformCollapser.isCollapsed;
             }
-            this.transformCollapser.needsDraw = true;
+            //this.transformCollapser.needsDraw = true;
             
             this.styleCollapser.clicker = this.clickerStyle;
             this.styleCollapser.myContent = this.contentStyle;
-            this.styleCollapser.element = this.element;
+            this.styleCollapser.element = this.contentStyle;
             this.styleCollapser.isCollapsed = this.isStyleCollapsed;
-            this.styleCollapser.contentHeight = 20;
+            this.styleCollapser.contentHeight = 0;
             this.styleCollapser.isAnimated = true;
             this.styleCollapser.labelClickEvent = function(boolBypass) {
                                 var newEvent = document.createEvent("CustomEvent");
@@ -474,7 +474,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                                 defaultEventManager.dispatchEvent(newEvent);
                                 that.isStyleCollapsed = that.styleCollapser.isCollapsed;
             }
-            this.styleCollapser.needsDraw = true;
+            //this.styleCollapser.needsDraw = true;
 
             // Add event listeners to add and delete style buttons
             this.buttonAddStyle.identifier = "addStyle";
@@ -485,7 +485,7 @@ var Layer = exports.Layer = Montage.create(Component, {
             
             // Add mousedown listener to set isActive
             this.element.addEventListener("mousedown", this, false);
-            //this.element.addEventListener("click", this, false);
+            this.element.addEventListener("click", this, false);
 
         }
     },
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css
index 18d0a5e3..8e36c2db 100644
--- a/js/panels/Timeline/Layer.reel/css/Layer.css
+++ b/js/panels/Timeline/Layer.reel/css/Layer.css
@@ -4,11 +4,10 @@
  No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
-
 /* Layer.scss
  * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.
  */
-/* line 16, ../scss/Layer.scss */
+/* line 22, ../scss/Layer.scss */