2 files changed, 420 insertions, 293 deletions

diff --git a/js/panels/Timeline/Style.reel/Style.html b/js/panels/Timeline/Style.reel/Style.html
index 5be159c3..cdc355e7 100644
--- a/js/panels/Timeline/Style.reel/Style.html
+++ b/js/panels/Timeline/Style.reel/Style.html
@@ -19,7 +19,8 @@
                         "styleProperty" : {"#": "container-property"},
                         "valueEditorHottext" : {"@":"hottextunit"},
                         "dtextProperty" : {"@":"dtext1"},
-                        "myHintable" : {"@" :"hintable"}
+                        "myHintable" : {"@" :"hintable"},
+                        "_fillColorCtrl": {"#": "fillColorCtrl"}
                     }
                 },
                     "dtext1" : {
@@ -78,7 +79,9 @@
                                                 <div data-montage-id="value-editor-hottext"></div>
                                         </div>
                                         <div class="cell-value value-editor editor-color hidden">
-                                                <div data-montage-id="value-editor-color">[&nbsp;]</div>
+                                                <div data-montage-id="value-editor-color">
+                            <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div>
+                                                </div>
                                         </div>
                                         <div class="cell-value value-editor editor-input hidden">
                                                 <!-- <div data-montage-id="value-editor-input"></div> -->
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index 5c1c9eeb..03d674a5 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -17,6 +17,8 @@
 
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
+var ElementsMediator =          require("js/mediators/element-mediator").ElementMediator
+
 
 var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 
@@ -169,7 +171,43 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                         this.needsDraw = true;
                 }
         },
-        
+
+    addedColorChips:
+        { value: false },
+
+    _colorelement: {
+        writable:true
+    },
+
+    colorelement: {
+        enumerable: true,
+        get: function () {
+            return this._colorelement;
+        },
+        set: function (value) {
+            if (value !== this._colorelement) {
+                this._colorelement = value;
+            }
+        }
+    },
+
+    _fill: {
+        enumerable: false,
+        value: { colorMode: 'rgb', color: { r: 255, g: 255, b: 255, a: 1, css: 'rgb(255,255,255)', mode: 'rgb', wasSetByCode: true, type: 'change' }, webGlColor: [1, 1, 1, 1] }
+    },
+
+    fill: {
+        enumerable: true,
+        get: function () {
+            return this._fill;
+        },
+        set: function (value) {
+            if (value !== this._fill) {
+                this._fill = value;
+            }
+        }
+    },
+
         handleMousedown: {
                 value: function(event) {
                         this.isActive = true;
@@ -196,6 +234,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                 } else {
                         this.element.classList.remove("style-selected");
                 }
+
+
         }
     },
     didDraw: {
@@ -222,7 +262,6 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                 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";
                 }
@@ -287,6 +326,12 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                         // First, get the appropriate editor type from the data structure.
                         var tweenable = {},
                                 i = 0;
+
+            if (this.ruleTweener === true) {
+               return;
+            } else {
+               this.ruleTweener = true;
+            }
                                 
                         tweenable.tweener = "input";
 
@@ -304,17 +349,45 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                                 this.valueEditorHottext.units = tweenable.units;
                                 this.valueEditorHottext.minValue = tweenable.min;
                                 this.valueEditorHottext.maxValue = tweenable.max;
+                this.valueEditorHottext.identifier="hottext";
+                el = this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement;
+                this.editorValue = parseFloat(ElementsMediator.getProperty(el, this.editorProperty));
+                this.valueEditorHottext.value = this.editorValue
+                this.valueEditorHottext.addEventListener("change",this,false);
+                this.valueEditorHottext.addEventListener("changing",this,false);
                                 this.valueEditorHottext.needsDraw = true;
                         } else if (tweenable.tweener === "color" ) {
                                 this.editorInputContainer.classList.add("hidden");
                                 this.editorColorContainer.classList.remove("hidden");
                                 this.editorHottextContainer.classList.add("hidden");
+
+                if(tweenable.colorType === "fill"){
+                    this._isFill = true;
+                }else{
+                    if(tweenable.colorType === "stroke"){
+                        this._isFill = false;
+                        this._borderSide = tweenable.strokePosition
+                    }
+                }
+
+                if (this.addedColorChips === false && this.application.ninja.colorController.colorPanelDrawn) {
+                    // setup fill color
+                    this._fillColorCtrl.props = { side: 'top', align: 'center', wheel: true, palette: true, gradient: false, image: false, nocolor: true, offset: -80 };
+                    this.application.ninja.colorController.addButton("chip", this._fillColorCtrl);
+                    this.colorelement = this._fillColorCtrl;
+                    var currentValue = ElementsMediator.getColor(this.parentComponent.parentComponent.parentComponent.parentComponent.layerData.stageElement,this._isFill,this._borderSide)
+                    this.application.ninja.timeline.selectedStyle = this.editorProperty;
+                    this._fillColorCtrl.addEventListener("change", this.handleFillColorChange.bind(this), false);
+                    this._fillColorCtrl.color(currentValue.colorMode, currentValue.color);
+                    this.addedColorChips = true;
+                }
                                 // TODO: set up color chip here.
                         } else if (tweenable.tweener === "input"){
                                 this.editorInputContainer.classList.remove("hidden");
                                 this.editorColorContainer.classList.add("hidden");
                                 this.editorHottextContainer.classList.add("hidden");
                                 this.valueEditorInput.value = this.editorValue;
+                this.valueEditorInput.addEventListener("blur",this,false);
                         } else {
                                 this.log("Warning: unknown tweenable -"+tweenable.tweener+"- specified in style.js.")
                         }
@@ -324,296 +397,347 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
         /* === END: Controllers === */
     
     _myTweenables: {
-        value: [
-                {
-                        "property" : "background-color",
-                        "tweener" : "color",
-                        "units" : "",
-                        "min" : "",
-                        "max" : "",
-                        "default" :"#FFFFFF"
-                },
-                {
-                        "property" : "background-position-x",
-                        "tweener" : "hottext",
-                        "units" : "px",
-                        "min" : -9999,
-                        "max" : 9999,
-                        "default" : 0
-                },
-                {
-                        "property" : "background-position-y",
+        value: [
+            {
+                "property" : "background-color",
+                "tweener" : "color",
+                "units" : "",
+                "min" : "",
+                "max" : "",
+                "default" :"#FFFFFF",
+                "colorType" :"fill"
+            },
+            {
+                "property" : "background-position-x",
+                "tweener" : "hottext",
+                "units" : "px",
+                "min" : -9999,
+                "max" : 9999,
+                "default" : 0
+            },
+            {