1 files changed, 648 insertions, 0 deletions

diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
new file mode 100644
index 00000000..e6e03901
--- /dev/null
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -0,0 +1,648 @@
+/*
+ * 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".
+ * 
+ */
+
+var Montage = require("montage/core/core").Montage;
+var Component = require("montage/ui/component").Component;
+
+var LayerStyle = exports.LayerStyle = Montage.create(Component, {
+
+    hasTemplate:{
+        value: true
+    },
+    
+    /* === BEGIN: Models === */
+        // isSelected: whether or not the style is selected
+        _isSelected: {
+                serializable: true,
+                value: false
+        },
+        isSelected: {
+                serializable: true,
+                get: function() {
+                        return this._isSelected;
+                },
+                set: function(newVal) {
+                        if (newVal !== this._isSelected) {
+                                this._isSelected = newVal;
+                                this.needsDraw = true;
+                        }
+                }
+        },
+        
+    /* isActive:  Whether or not the user is actively clicking within the style; used to communicate state with
+     * parent Layer.
+     */
+    _isActive: {
+        value: false
+    },
+    isActive: {
+        get: function() {
+                return this._isActive;
+        },
+        set: function(newVal) {
+                this._isActive = newVal;
+        }
+    },
+   
+   // Property for this editor
+    _editorProperty: {
+        serializable: true,
+        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: {
+        serializable: true,
+        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: {
+        serializable: true,
+        value: false
+    },
+    ruleTweener: {
+        serializable: true,
+        get: function() {
+                return this._ruleTweener;
+        },
+        set: function(newVal) {
+                this._ruleTweener = newVal;
+                this.needsDraw = true;
+        }
+    },
+    
+    // The hintable we use to change the Property
+    _myHintable: {
+        value: ""
+    },
+    myHintable: {
+        get: function() {
+                return this._myHintable;
+        },
+        set: function(newVal) {
+                this._myHintable = newVal;
+        }
+    },
+    _myHintableValue : {
+        value: null
+    },
+    myHintableValue: {
+        get: function() {
+                return this._myHintableValue;
+        },
+        set: function(newVal) {
+                this._myHintableValue = newVal;
+        }
+    },
+    
+    // swapViews: Is a view swap happening?
+    _swapViews : {
+        value: true
+    },
+    
+    // whichView: which view should we show: hintable or propval
+    _whichView : {
+        serializable: true,
+        value: "hintable"
+    },
+    whichView: {
+        serializable: true,
+        get: function() {
+                return this._whichView;
+        },
+        set: function(newVal) {
+                if (this._whichView !== newVal) {
+                        if ((newVal !== "hintable") && (newVal !== "propval")) {
+                                this.log("Error: Unknown view -"+newVal+"- requested for style.js.");
+                                return;
+                        }
+                        this._whichView = newVal;
+                        this._swapViews = true;
+                        this.needsDraw = true;
+                }
+        }
+    },
+ 
+        // styleID: the id for this style;
+        // Used to publish events
+        _styleID : {
+                serializable: true,
+                value: null
+        },
+        styleID: {
+                serializable: true,
+                get: function() {
+                        return this._styleID;
+                },
+                set: function(newVal) {
+                        this._styleID = newVal;
+                        this.needsDraw = true;
+                }
+        },
+        
+        handleMousedown: {
+                value: function(event) {
+                        this.isActive = true;
+                }
+        },
+    
+    /* === END: Models === */
+    
+        /* === BEGIN : Draw cycle === */
+    prepareForDraw: {
+        value: function() {
+                this.init();
+        }
+    },
+    draw: {
+        value: function() {
+                
+                if (this._swapViews === true) {
+                        // Show the right thing
+                        this._showView();
+                }
+                if (this.isSelected) {
+                        this.element.classList.add("selected");
+                } else {
+                        this.element.classList.remove("selected");
+                }
+        }
+    },
+    didDraw: {
+        value: function() {
+                if (this._swapViews === true) {
+                        // View swap has been completed.
+                        this._swapViews === false;
+                }
+        }
+    },
+        /* === END: Draw cycle === */
+        
+        /* === BEGIN: controllers === */
+        
+        // handleStylePropertyDblClick: What happens when the user double-clicks on the style property
+        handleStylePropertyDblclick: {
+                value: function(event) {
+                        this.whichView = "hintable";
+                }
+        },
+        
+        // handleHintableStop: What happens when the hintable issues its stop event
+        handleHintableStop: {
+                value: function(event) {
+                        // this should be handled via binding, but somehow is not. Setting manually for now.
+                    this.editorProperty = this.myHintable.value;
+                    
+                    // Change views.
+                    this.whichView = "propval";
+                }
+        },
+        
+        // Init: Initialize the component with some useful selectors and other defaults.
+        init : {
+                value: function() {
+
+                var arrHints = [],
+                        i = 0;