4 files changed, 80 insertions, 100 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index dd819b2b..a3fbd5b1 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -1,4 +1,9 @@
 <!DOCTYPE html>
+<!-- <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> -->
 <html lang="en">
        <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
@@ -153,7 +158,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..f62c0b90 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -1,3 +1,9 @@
+/* <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> */
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
 var Collapser = require("js/panels/Timeline/Collapser").Collapser;
@@ -80,7 +86,6 @@ var Layer = exports.Layer = Montage.create(Component, {
                        this._layerName = newVal;
                        this._layerEditable.needsDraw = true;
                        this.needsDraw = true;
-                        
                }
                
        }
@@ -323,6 +328,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 +489,11 @@ var Layer = exports.Layer = Montage.create(Component, {
                                        // Delete the style from the view
                                        this.arrLayerStyles.splice(selectedIndex, 1);
                                        
-                                } else {
+                                        // Was that the last style?
-                                        alert('TODO: what should happen when no rule is selected and the user clicks the delete button?')
+                                        if (this.arrLayerStyles.length === 0) {
+                                                this.buttonDeleteStyle.classList.add("disabled");
+                                        }
+                                        
                                }
                        }
                }
@@ -509,8 +518,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 +550,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 +576,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?
+                                this.selectStyle(this.getActiveStyleIndex());
-                                var myIndex = this.getActiveStyleIndex();
-                                this.selectStyle(myIndex);
                        }
                }
        },
        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..833c921c 100644
--- a/js/panels/Timeline/Layer.reel/css/Layer.css
+++ b/js/panels/Timeline/Layer.reel/css/Layer.css
@@ -1,63 +1,12 @@
 @charset "UTF-8";
-/* 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> */