1 files changed, 353 insertions, 342 deletions

diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index bfa6f930..9785ba74 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -32,200 +32,240 @@ POSSIBILITY OF SUCH DAMAGE.
 /*
  * Style component:  Edits and manages a single style rule for a Layer in the Timeline.
  * Public Properties:
- *      editorProperty:  The CSS property for the style.
- *      editorValue:    The value for the editorProperty.
- *      whichView:  Which view to show, the hintable view (where a new property can be typed in)
- *                  or the propval view (where the property's value can be set with the tweener).
- *                  Valid values are "hintable" and "propval", defaults to "hintable".
- *
+ *              editorProperty:  The CSS property for the style.
+ *              editorValue:    The value for the editorProperty. 
+ *              whichView:  Which view to show, the hintable view (where a new property can be typed in)
+ *                                      or the propval view (where the property's value can be set with the tweener).
+ *                                      Valid values are "hintable" and "propval", defaults to "hintable".
+ * 
  */
 
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
-var ElementsMediator =      require("js/mediators/element-mediator").ElementMediator
+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator
 
 
 var LayerStyle = exports.LayerStyle = Montage.create(Component, {
-
-    styleContainer: {
-        value: null,
-        serializable: true
-    },
-
-    styleHintable: {
-        value: null,
-        serializable: true
-    },
-
-    styleProperty: {
-        value: null,
-        serializable: true
-    },
-
-    valueEditorHottext: {
-        value: null,
-        serializable: true
-    },
-
-    dtextProperty: {
-        value: null,
-        serializable: true
-    },
-
     /* === BEGIN: Models === */
-    // isSelected: whether or not the style is selected
-    _isSelected: {
-        value: false
-    },
-    isSelected: {
+        _parentLayerComponent: {
+                value: null
+        },
+        
+        _styleContainer: {
+                value: null
+        },
+    styleContainer: {
         serializable: true,
         get: function() {
-            return this._isSelected;
+                return this._styleContainer;
         },
         set: function(newVal) {
-
-            if (newVal !== this._isSelected) {
-                this._isSelected = newVal;
-                this.needsDraw = true;
-            }
+                this._styleContainer = newVal;
         }
     },
 
-    /* isActive:  Whether or not the user is actively clicking within the style; used to communicate state with
-     * parent Layer.
-     */
-    _isActive: {
-        value: false
-    },
-    isActive: {
+        _styleHintable: {
+                value: null
+        },
+    styleHintable: {
+        serializable: true,
         get: function() {
-            return this._isActive;
+                return this._styleHintable;
         },
         set: function(newVal) {
-            this._isActive = newVal;
+                this._styleHintable = newVal;
         }
     },
 
-   // Property for this editor
-    _editorProperty: {
-        value: ""
-    },
-    editorProperty: {
+        _styleProperty: {
+                value: null
+        },
+    styleProperty: {
         serializable: true,
         get: function() {
-            return this._editorProperty;
+                return this._styleProperty;
         },
         set: function(newVal) {
-            this._editorProperty = newVal;
-            this.needsDraw = true;
+                this._styleProperty = newVal;
         }
     },
 
-    // Value for the property for this editor.
-    _editorValue: {
-        value: ""
-    },
-    editorValue: {
+        _valueEditorHottext: {
+                value: null
+        },
+    valueEditorHottext: {
         serializable: true,
         get: function() {
-            return this._editorValue;
+                return this._valueEditorHottext;
         },
         set: function(newVal) {
-            this._editorValue = newVal;
-            this.needsDraw = true;
+                this._valueEditorHottext = newVal;
         }
     },
 
-    // The tweener used to change the value for this property.
-    _ruleTweener: {
-        value: false
-    },
-    ruleTweener: {
+        _dtextProperty: {
+                value: null
+        },
+    dtextProperty: {
         serializable: true,
         get: function() {
-            return this._ruleTweener;
+                return this._dtextProperty;
         },
         set: function(newVal) {
-            this._ruleTweener = newVal;
-            this.needsDraw = true;
+                this._dtextProperty = newVal;
         }
     },
 
+        _isSelected: {
+                value: false
+        },
+        isSelected: {
+                serializable: true,
+                get: function() {
+                        return this._isSelected;
+                },
+                set: function(newVal) {
+
+                        if (newVal !== this._isSelected) {
+                                this._isSelected = newVal;
+                                this.needsDraw = true;
+                        }
+                }
+        },
+        
+    _isActive: {
+        value: false
+    },
+    isActive: {
+        get: function() {
+                return this._isActive;
+        },
+        set: function(newVal) {
+                this._isActive = newVal;
+        }
+    },
+   
+   // Property for this editor
+    _editorProperty: {
+        value: ""
+    },
+    editorProperty: {
+        serializable: true,
+        get: function() {
+                return this._editorProperty;
+        },
+        set: function(newVal) {
+                this._editorProperty = newVal;
+                this.needsDraw = true;
+        }
+    },
+    
+    // Value for the property for this editor.
+    _editorValue: {
+        value: ""
+    },
+    editorValue: {
+        serializable: true,
+        get: function() {
+                return this._editorValue;
+        },
+        set: function(newVal) {
+                this._editorValue = newVal;
+                this.needsDraw = true;
+        }
+    },
+    
+        // The tweener used to change the value for this property. 
+    _ruleTweener: {
+        value: false