4 files changed, 60 insertions, 103 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index dd819b2b..e262afe2 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -153,7 +153,7 @@
                                 <div class="label-style">
                                         <span class="collapsible-label">Style</span>
                                         <span class="clicker-style collapsible-clicker"></span>
-                                        <div class="cssbutton button-delete"></div>
+                                        <div class="cssbutton button-delete disabled"></div>
                                         <div class="cssbutton button-add"></div>
                                 </div>
                                 <div class="content-style collapsible-content">
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 71a1f01f..2e9a8f1a 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -80,7 +80,6 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this._layerName = newVal;
                         this._layerEditable.needsDraw = true;
                         this.needsDraw = true;
-                        
                 }
                 
         }
@@ -323,6 +322,7 @@ var Layer = exports.Layer = Montage.create(Component, {
             this.styleCollapser.myContent = this.contentStyle;
             this.styleCollapser.element = this.element;
             this.styleCollapser.isCollapsed = this.isStyleCollapsed;
+            this.styleCollapser.contentHeight = 20;
             this.styleCollapser.isAnimated = true;
             this.styleCollapser.labelClickEvent = function(boolBypass) {
                                 var newEvent = document.createEvent("CustomEvent");
@@ -483,8 +483,11 @@ var Layer = exports.Layer = Montage.create(Component, {
                                         // Delete the style from the view
                                         this.arrLayerStyles.splice(selectedIndex, 1);
                                         
-                                } else {
-                                        alert('TODO: what should happen when no rule is selected and the user clicks the delete button?')
+                                        // Was that the last style?
+                                        if (this.arrLayerStyles.length === 0) {
+                                                this.buttonDeleteStyle.classList.add("disabled");
+                                        }
+                                        
                                 }
                         }
                 }
@@ -509,8 +512,12 @@ var Layer = exports.Layer = Montage.create(Component, {
                 // Next, update this.styleRepetition.selectedIndexes.
                 if (styleIndex !== false) {
                         this.styleRepetition.selectedIndexes = [styleIndex];
+                        this.buttonDeleteStyle.classList.remove("disabled");
                 } else {
                         this.styleRepetition.selectedIndexes = null;
+                        if (typeof(this.buttonDeleteStyle) !== "undefined") {
+                                this.buttonDeleteStyle.classList.add("disabled");
+                        }
                 }
                         
                 }
@@ -537,14 +544,11 @@ var Layer = exports.Layer = Montage.create(Component, {
         /* Begin: Event handlers */
         handleAddStyleClick: {
                 value: function(event) {
-                        // Stop the event propagation
-                        //event.stopPropagation();
                         this.addStyle();
                 }
         },
         handleDeleteStyleClick: {
                 value: function(event) {
-                        //event.stopPropagation();
                         this.deleteStyle();
                 }
         },
@@ -566,25 +570,16 @@ var Layer = exports.Layer = Montage.create(Component, {
         handleMousedown: {
                 value: function(event) {
                         this.isActive = true;
-                        // Check ALL THE CLICKS
-                        // Are they in a particular style? If so, we need to select that style and
-                        // deselect the others.
                         var ptrParent = nj.queryParentSelector(event.target, ".content-style");
                         if (ptrParent !== false) {
-                                // Why yes, the click was within a layer.  But which one?
-                                var myIndex = this.getActiveStyleIndex();
-                                this.selectStyle(myIndex);
+                                this.selectStyle(this.getActiveStyleIndex());
                         }
                 }
         },
         handleLayerClick : {
                 value: function(event) {
-                        // Check ALL THE CLICKS
-                        // Are they in a particular style? If so, we need to select that style and
-                        // deselect the others.
                         var ptrParent = nj.queryParentSelector(event.target, ".content-style");
                         if (ptrParent !== false) {
-                                // Why yes, the click was within a layer.  But which one?
                                 var myIndex = this.getActiveStyleIndex();
                                 this.selectStyle(myIndex);
                         }
diff --git a/js/panels/Timeline/Layer.reel/css/Layer.css b/js/panels/Timeline/Layer.reel/css/Layer.css
index 39869c92..3547a15e 100644
--- a/js/panels/Timeline/Layer.reel/css/Layer.css
+++ b/js/panels/Timeline/Layer.reel/css/Layer.css
@@ -2,63 +2,6 @@
 /* Layer.scss
  * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.
  */
-/* <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- 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> */
-/*
- * _colors.scss
- * Defines the colors for the UI of the application.
- * To create a new theme, copy this file and change the values as desired.
- * Note: Some colors are defined as both rgb and rgba; some of the rgba versions have multiple a values.
- */
-/* Colors for radio buttons and other form elements */
-/* Base colors for dividers 
- *
- * Dividers consist of a div with a background color and either 
- * a top & bottom border (in the case of horizontal dividers)
- * or a left & right border (in the case of vertical dividers),
- * for a total of three different colors.
- * 
- */
-/* top and left */
-/* Middle */
-/* Bottom and right */
-/* Main background color of entire app */
-/* Main app background color. */
-/* rgba version */
-/* Main app border color */
-/* color of drop shadows */
-/* Stage color */
-/* body border color */
-/* Body background color */
-/* Colors for main dropdown menus: background & text for both regular and highlighted states, dividers */
-/* Colors for tools: background, text, how they interact with the UI */
-/* Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. */
-/* used for editable items in their non-edit state, etc. */
-/* Border for panel and for block elements */
-/* Shadow for text and block elements */
-/* Colors for scroll bars */
-/* <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- 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> */
-/*
- * themes/themename/mixins.scss
- * Mixins that are theme-dependent (e.g. sprite mixins, etc)
- */
-/* <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- 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> */
-/*
- * mixins.scss
- * Generic mixins.  Theme-specific mixins (e.g. for sprites) 
- * should go in the theme/themename/mixins.scss file.
- */
 /* line 16, ../scss/Layer.scss */
 .layerLabel {
   width: 100%;
@@ -174,23 +117,24 @@
   border-width: 0px;
 }
 
-/* line 112, ../scss/Layer.scss */
+/* line 113, ../scss/Layer.scss */
 .label-layer,
 .label-position,
 .label-transform,
-.label-style {
+.label-style,
+.label-styles {
   position: relative;
   border-bottom: 1px solid #505050;
   cursor: pointer;
 }
 
-/* line 119, ../scss/Layer.scss */
+/* line 120, ../scss/Layer.scss */