1 files changed, 138 insertions, 96 deletions

diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index c44a29f6..dc159a01 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -1,8 +1,32 @@
 /* <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> */
+Copyright (c) 2012, Motorola Mobility, Inc
+All Rights Reserved.
+BSD License.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+  - Redistributions of source code must retain the above copyright notice,
+    this list of conditions and the following disclaimer.
+  - Redistributions in binary form must reproduce the above copyright
+    notice, this list of conditions and the following disclaimer in the
+    documentation and/or other materials provided with the distribution.
+  - Neither the name of Motorola Mobility nor the names of its contributors
+    may be used to endorse or promote products derived from this software
+    without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
+LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.
+</copyright> */
 
 /*
  * Style component:  Edits and manages a single style rule for a Layer in the Timeline.
@@ -17,38 +41,80 @@
 
 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
         },
@@ -66,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
     },
@@ -139,6 +202,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
         },
         serializable: true
     },
+    
     _myHintableValue : {
         value: null
     },
@@ -194,13 +258,13 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                 }
         },
 
-    addedColorChips:
-        { value: false },
+    addedColorChips: { 
+                value: false
+        },
 
     _colorelement: {
         writable:true
     },
-
     colorelement: {
         enumerable: true,
         get: function () {
@@ -244,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 {
@@ -260,6 +332,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 
         }
     },
+    
     didDraw: {
         value: function() {
                 if (this._swapViews === true) {
@@ -288,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;