5 files changed, 676 insertions, 665 deletions

diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 24fd8392..33029e9e 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -268,7 +268,9 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     insertPropTween:{
         value:function(clickPos){
             var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
-            this.application.ninja.timeline.selectLayer(selectedIndex, true);
+            // this.application.ninja.timeline.selectLayer(selectedIndex, true); // Deprecated.
+            this.application.ninja.timeline.selectLayers([selectedIndex]);
+            this.application.ninja.timeline.updateStageSelection();
 
             var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
             var currentMillisec = currentMillisecPerPixel * clickPos;
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index 122c2c0a..e1c08d2d 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -41,38 +41,80 @@ POSSIBILITY OF SUCH DAMAGE.
 
 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, {
-
+    /* === BEGIN: Models === */
+        _parentLayerComponent: {
+                value: null
+        },
+        
+        _styleContainer: {
+                value: null
+        },
     styleContainer: {
-        value: null,
-        serializable: true
+        serializable: true,
+        get: function() {
+                return this._styleContainer;
+        },
+        set: function(newVal) {
+                this._styleContainer = newVal;
+        }
     },
 
+        _styleHintable: {
+                value: null
+        },
     styleHintable: {
-        value: null,
-        serializable: true
+        serializable: true,
+        get: function() {
+                return this._styleHintable;
+        },
+        set: function(newVal) {
+                this._styleHintable = newVal;
+        }
     },
 
+        _styleProperty: {
+                value: null
+        },
     styleProperty: {
-        value: null,
-        serializable: true
+        serializable: true,
+        get: function() {
+                return this._styleProperty;
+        },
+        set: function(newVal) {
+                this._styleProperty = newVal;
+        }
     },
 
+        _valueEditorHottext: {
+                value: null
+        },
     valueEditorHottext: {
-        value: null,
-        serializable: true
+        serializable: true,
+        get: function() {
+                return this._valueEditorHottext;
+        },
+        set: function(newVal) {
+                this._valueEditorHottext = newVal;
+        }
     },
 
+        _dtextProperty: {
+                value: null
+        },
     dtextProperty: {
-        value: null,
-        serializable: true
+        serializable: true,
+        get: function() {
+                return this._dtextProperty;
+        },
+        set: function(newVal) {
+                this._dtextProperty = newVal;
+        }
     },
 
-    /* === BEGIN: Models === */
-        // isSelected: whether or not the style is selected
         _isSelected: {
                 value: false
         },
@@ -90,9 +132,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                 }
         },
         
-    /* isActive:  Whether or not the user is actively clicking within the style; used to communicate state with
-     * parent Layer.
-     */
     _isActive: {
         value: false
     },
@@ -163,6 +202,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
         },
         serializable: true
     },
+    
     _myHintableValue : {
         value: null
     },
@@ -218,13 +258,13 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                 }
         },
 
-    addedColorChips:
-        { value: false },
+    addedColorChips: { 
+                value: false
+        },
 
     _colorelement: {
         writable:true
     },
-
     colorelement: {
         enumerable: true,
         get: function () {
@@ -268,13 +308,21 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                 this.init();
         }
     },
+    willDraw: {
+        value: function() {
+                if (this._parentLayerComponent === null) {
+                        this._parentLayerComponent = this.parentComponent.parentComponent.parentComponent.parentComponent;
+                }
+        }
+    },
     draw: {
         value: function() {
-                
+                // Show the right view
                 if (this._swapViews === true) {
-                        // Show the right thing
                         this._showView();
                 }
+                
+                // Is this style selected?
                 if (this.isSelected) {
                         this.element.classList.add("style-selected");
                 } else {
@@ -284,6 +332,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 
         }
     },
+    
     didDraw: {
         value: function() {
                 if (this._swapViews === true) {
@@ -312,6 +361,41 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                     this.whichView = "propval";
                 }
         },
+
+    handleFillColorChange: {
+        value: function (event) {
+            if(this.application.ninja.timeline.selectedStyle === "color" ||this.application.ninja.timeline.selectedStyle === this.editorProperty){
+                var fillColorObject={};
+                fillColorObject.color=event._event.color;
+                fillColorObject.mode=event._event.colorMode;
+                ElementsMediator.setColor([this._parentLayerComponent.layerData.stageElement], fillColorObject, this._isFill, "Change", "timeline",null,this._borderSide)
+            }
+        }
+    },
+
+    handleHottextChange:{
+        value:function(event){
+            if(this.application.ninja.timeline.selectedStyle === this.editorProperty){
+                this.application.ninja.elementMediator.setProperty([this._parentLayerComponent.layerData.stageElement], this.editorProperty, [this.editorValue + event.target._units]  , "Change", "timeline");
+            }
+        }
+    },
+
+    handleHottextChanging:{
+        value:function(event){