4 files changed, 44 insertions, 5 deletions

diff --git a/js/components/combobox.reel/combobox.js b/js/components/combobox.reel/combobox.js
index a68a7d6b..deef2a47 100644
--- a/js/components/combobox.reel/combobox.js
+++ b/js/components/combobox.reel/combobox.js
@@ -76,6 +76,26 @@ exports.Combobox = Montage.create(Component, {
         }
     },
 
+    _enabled: {
+        enumerable: false,
+        value: true
+    },
+
+    enabled: {
+        enumerable: true,
+        serializable: true,
+        get: function() {
+            return this._enabled;
+        },
+        set: function(value) {
+            if(value !== this._enabled)
+            {
+                this._enabled = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
     handleChange:
     {
         value:function(event)
@@ -117,6 +137,7 @@ exports.Combobox = Montage.create(Component, {
                     }
                     this.element.appendChild(optionItem);
                 }
+                this.element.disabled = !this._enabled;
             }
         }
     },
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index 22ba66b3..74c88084 100644
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -57,8 +57,9 @@ exports.ShapesController = Montage.create(CanvasController, {
                     el.elementModel.shapeModel.GLGeomObj.buildBuffers();
                     break;
                 case "useWebGl":
-                    this.toggleWebGlMode(el, value);
-                    el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+//                    this.toggleWebGlMode(el, value);
+//                    el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+                    el.elementModel.shapeModel.useWebGl = value;
                     break;
                 default:
                     CanvasController.setProperty(el, p, value);
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index 8ccf17cc..901ca37f 100644
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -385,6 +385,7 @@ exports.PiData = Montage.create( Montage, {
                             label: "Stroke",
                             labelField: "_name",
                             items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" },
                             divider : true
                         }
                     ],
@@ -395,7 +396,8 @@ exports.PiData = Montage.create( Montage, {
                             prop:   "fillMaterial",
                             label: "Fill",
                             labelField: "_name",
-                            items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" }
+                            items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
                         }
                     ]
                 ]
@@ -458,7 +460,8 @@ exports.PiData = Montage.create( Montage, {
                             id:   "stroke",
                             label: "Stroke",
                             labelField: "_name",
-                            items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" }
+                            items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
                         }
                     ]
                 ]
@@ -543,6 +546,7 @@ exports.PiData = Montage.create( Montage, {
                             label: "Stroke",
                             labelFunction: function(item) { return item.getName(); },
                             items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" },
                             divider : true
                         }
                     ],
@@ -553,7 +557,8 @@ exports.PiData = Montage.create( Montage, {
                             prop:   "fillMaterial",
                             label: "Fill",
                             labelField: "_name",
-                            items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" }
+                            items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
                         }
                     ]
                 ]
diff --git a/js/panels/properties/sections/custom.reel/custom.js b/js/panels/properties/sections/custom.reel/custom.js
index 2b5b522a..e92a39fd 100644
--- a/js/panels/properties/sections/custom.reel/custom.js
+++ b/js/panels/properties/sections/custom.reel/custom.js
@@ -193,6 +193,18 @@ exports.CustomSection = Montage.create(Component, {
                     obj.items = aField.items;
                 }
             }
+            if (aField.enabled) {
+                if(aField.enabled.boundObject) {
+                    // TODO - For now, always bind to this.controls[someProperty]
+                    Object.defineBinding(obj, "enabled", {
+                                    boundObject: this.controls,
+                                    boundObjectPropertyPath: aField.enabled.boundProperty,
+                                    oneway: false
+                                });
+                } else {
+                    obj.enabled = aField.enabled;
+                }
+            }
 
             obj.addEventListener("change", this, false);
 //