10 files changed, 69 insertions, 94 deletions

diff --git a/js/components/combobox.reel/combobox.js b/js/components/combobox.reel/combobox.js
index f262bb06..a68a7d6b 100644
--- a/js/components/combobox.reel/combobox.js
+++ b/js/components/combobox.reel/combobox.js
@@ -67,7 +67,7 @@ exports.Combobox = Montage.create(Component, {
                 var e = document.createEvent("CustomEvent");
                 e.initEvent("change", true, true);
                 e.type = "change";
-                e._wasSetByCode = this._wasSetByCode;
+                e.wasSetByCode = this._wasSetByCode;
                 e.value = this._value;
                 this.dispatchEvent(e);
 
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.css b/js/components/layout/bread-crumb.reel/bread-crumb.css
index f84c6e80..cc984609 100644
--- a/js/components/layout/bread-crumb.reel/bread-crumb.css
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.css
@@ -5,6 +5,7 @@
  </copyright> */
 
 .bread_crumb{
+    background-color: #282828;
     border-style: double;
     height: 26px;
 }
diff --git a/js/components/radio.reel/radio.js b/js/components/radio.reel/radio.js
index 954da3c4..c661ec11 100644
--- a/js/components/radio.reel/radio.js
+++ b/js/components/radio.reel/radio.js
@@ -41,7 +41,7 @@ exports.RadioGroup = Montage.create(Component, {
                     e = document.createEvent("CustomEvent");
                     e.initEvent("change", true, true);
                     e.type = "change";
-                    e._wasSetByCode = this._wasSetByCode;
+                    e.wasSetByCode = this._wasSetByCode;
                     e.selectedIndex = i;
                     e.selectedItem = value;
                     this.dispatchEvent(e);
@@ -77,7 +77,7 @@ exports.RadioGroup = Montage.create(Component, {
     {
         value:function(event)
         {
-            this._wasSetByCode = event._event._wasSetByCode;
+            this._wasSetByCode = event._event.wasSetByCode;
             this.selectedItem = event._event.value;
         }
     }
@@ -126,7 +126,7 @@ exports.Radio = Montage.create(Component, {
             var e = document.createEvent("CustomEvent");
             e.initEvent("change", true, true);
             e.type = "change";
-            e._wasSetByCode = this._wasSetByCode;
+            e.wasSetByCode = this._wasSetByCode;
             e.value = this;
             this.dispatchEvent(e);
 
diff --git a/js/controllers/color-controller.js b/js/controllers/color-controller.js
index 87180873..925b525d 100644
--- a/js/controllers/color-controller.js
+++ b/js/controllers/color-controller.js
@@ -175,76 +175,21 @@ exports.ColorController = Montage.create(Component, {
     },
     ////////////////////////////////////////////////////////////////////
     //
-    setBackground: {
+    setColor: {
         enumerable: true,
-        value: function (type, background, selection) {
-            //TODO: Remove hack
-            var elements, i, hack = [], hackNone = [];
+        value: function (mode, color, isFill, selection) {
+            var elements;
             //The selection is optional, if none, it asks for the currently selected elements
             if (selection) {
                 elements = selection;
             } else {
                 elements = this.application.ninja.selectedElements;
             }
-            //
-            for (i=0; elements[i]; i++) {
-                hack[i] = background;
-                hackNone[i] = 'none';
-            }
-            //
-            if (elements && elements.length > 0) {
-                switch (type) {
-                    case 'image':
-                        ElementsMediator.setProperty(elements, "background-image", hack, {"background-image": background}, "Change", "color-controller");
-                        ElementsMediator.setProperty(elements, "background-color", hackNone, {"background-color": 'none'}, "Change", "color-controller");
-                        break;
-                    case 'color':
-                        //TODO: Add logic to handle setting color when image (like gradients) is applied
-                        //TODO: Handle applying to multiple items, currently, we need to create a dummy array of the same value
-                        ElementsMediator.setProperty(elements, "background-image", hackNone, {"background-image": 'none'}, "Change", "color-controller");
-                        ElementsMediator.setProperty(elements, "background-color", hack, {"background-color": background}, "Change", "color-controller");
-                        break;
-                    case 'background':
-                        break;
-                }
-                //
-                //console.log(this.getColorObjFromCss('#333'));
-            }
-        }
-    },
-    ////////////////////////////////////////////////////////////////////
-    //
-    setBorder: {
-        enumerable: true,
-        value: function (type, border, selection) {
-            //
-            var elements, i, hack = [], hackNone = [];
-            //The selection is optional, if none, it asks for the currently selected elements
-            if (selection) {
-                elements = selection;
-            } else {
-                elements = this.application.ninja.selectedElements;
-            }
-            //
-            for (i=0; elements[i]; i++) {
-                hack[i] = border;
-                hackNone[i] = 'none';
-            }
-            //
-            if (elements && elements.length > 0) {
-                switch (type) {
-                    case 'image':
-                        //TODO: Figure out why color must be removed, might be related to the CSS
-                        ElementsMediator.setProperty(elements, "border-color", hackNone, {"border-color": 'none'}, "Change", "color-controller");
-                        ElementsMediator.setProperty(elements, "border-image", hack, {"border-image": border}, "Change", "color-controller");
-                        break;
-                    case 'color':
-                        ElementsMediator.setProperty(elements, "border-image", hackNone, {"border-image": 'none'}, "Change", "color-controller");
-                        ElementsMediator.setProperty(elements, "border-color", hack, {"border-color": border}, "Change", "color-controller");
-                        break;
-                    case 'border':
-                        break;
-                }
+            if (elements && elements.length) {
+                var colorInfo = { mode:mode,
+                               color:color
+                             };
+                ElementsMediator.setColor(elements, colorInfo, isFill, "Change", "color-controller");
             }
         }
     },
@@ -264,8 +209,10 @@ exports.ColorController = Montage.create(Component, {
                 color = {value: null, css: 'none'};
             } else if (panelMode === 'rgb' && e._event.rgba && mode !== 'gradient') {
                 color = e._event.rgba;
+                color.webGlColor = e._event.webGlColor;
             } else if (panelMode === 'hsl' && e._event.hsla && mode !== 'gradient') {
                 color = e._event.hsla;
+                color.webGlColor = e._event.webGlColor;
             } else if (mode !== 'gradient'){
                 color = {value: e._event.hex, css: '#'+e._event.hex};
             } else if (mode === 'gradient'){
@@ -280,32 +227,14 @@ exports.ColorController = Montage.create(Component, {
                 //
                 if(e._event.wasSetByCode) return;
                 //
-                if (mode === 'nocolor') {
-                        //TODO: Add a check instead of setting properties
-                        this.setBackground('image', color.css, false);
-                        this.setBackground('color', color.css, false);
-                        this.setBackground('background', color.css, false);
-                } else if (mode === 'gradient') {
-                        this.setBackground('image', color.css, false);
-                } else {
-                        this.setBackground('color', color.css, false);
-                }
+                this.setColor(mode, color, true);
             } else if (input === 'stroke') {
                 //
                 this.stroke = color;
                 //
                 if(e._event.wasSetByCode) return;
-                //
-                if (mode === 'nocolor') {
-                        //TODO: Add a check instead of setting properties
-                        this.setBorder('image', color.css, false);
-                        this.setBorder('color', color.css, false);
-                        this.setBorder('border', color.css, false);
-                } else if (mode === 'gradient') {
-                        this.setBorder('image', color.css, false);
-                } else {
-                        this.setBorder('color', color.css, false);
-                }
+
+                this.setColor(mode, color, false);
             }
             ////////////////////////////////////////////////////////////
             ////////////////////////////////////////////////////////////
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index f254220c..8a0735f7 100644
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -83,13 +83,52