9 files changed, 139 insertions, 153 deletions

diff --git a/js/components/converter/string-units-converter.js b/js/components/converter/string-units-converter.js
index 6b97d5c5..9f6e4112 100644
--- a/js/components/converter/string-units-converter.js
+++ b/js/components/converter/string-units-converter.js
@@ -9,7 +9,6 @@ var Montage = require("montage").Montage,
 
 exports.StringUnitsConverter = Montage.create(Converter, {
 
-    // convert fahrenheit to celsius (showing our non-metric heritage here)
     convert: {
         value: function(value) {
             if(value) {
@@ -20,7 +19,6 @@ exports.StringUnitsConverter = Montage.create(Converter, {
         }
     },
 
-    // revert celsius to fahrenheit
     revert: {
         value: function(value) {
             console.log("revert string to unit ", value);
diff --git a/js/components/converter/string-value-converter.js b/js/components/converter/string-value-converter.js
index 28d7dd29..f397f731 100644
--- a/js/components/converter/string-value-converter.js
+++ b/js/components/converter/string-value-converter.js
@@ -9,7 +9,6 @@ var Montage = require("montage").Montage,
 
 exports.StringValueConverter = Montage.create(Converter, {
 
-    // convert fahrenheit to celsius (showing our non-metric heritage here)
     convert: {
         value: function(value) {
             console.log(value);
@@ -18,7 +17,6 @@ exports.StringValueConverter = Montage.create(Converter, {
         }
     },
 
-    // revert celsius to fahrenheit
     revert: {
         value: function(value) {
             console.log("revert string to value ", value);
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.js b/js/components/layout/bread-crumb.reel/bread-crumb.js
index ac131f2c..260922b3 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.js
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.js
@@ -51,22 +51,6 @@ exports.Breadcrumb = Montage.create(Component, {
         }
     },
 
-    _container:{
-        value:null
-    },
-
-    container: {
-        set: function(value) {
-            if(this._container !== value) {
-                this._container = value;
-                this.createContainerElements();
-            }
-        },
-        get: function() {
-            return this._container;
-        }
-    },
-
     containerElements: {
         value: []
     },
@@ -74,31 +58,37 @@ exports.Breadcrumb = Montage.create(Component, {
     prepareForDraw: {
         value: function() {
             this.breadcrumbBt.addEventListener("action", this, false);
+            this.addPropertyChangeListener("currentDocument.model.domContainer", this)
         }
     },
 
-    createContainerElements: {
+    handleChange: {
         value: function() {
-            var parentNode;
+            if(this.currentDocument && this.currentDocument.model.getProperty("domContainer")) {
+                this.createContainerElements(this.currentDocument.model.getProperty("domContainer"));
+            }
+        }
+    },
+
+    createContainerElements: {
+        value: function(container) {
 
 //            delete this.containerElements;
                 this.containerElements = [];
 
-            parentNode = this.container;
-
-            while(parentNode !== this.currentDocument.model.documentRoot) {
-                this.containerElements.unshift({"node": parentNode, "nodeUuid":parentNode.uuid, "label": parentNode.nodeName});
-                parentNode = parentNode.parentNode;
+            while(container !== this.currentDocument.model.documentRoot) {
+                this.containerElements.unshift({"node": container, "nodeUuid":container.uuid, "label": container.nodeName});
+                container = container.parentNode;
             }
 
             // This is always the top container which is now hardcoded to body
-            this.containerElements.unshift({"node": parentNode, "nodeUuid":parentNode.uuid, "label": parentNode.nodeName});
+            this.containerElements.unshift({"node": container, "nodeUuid":container.uuid, "label": container.nodeName});
         }
     },
 
     handleAction: {
         value: function(evt) {
-            if(evt.target.value === this.container.uuid) {
+            if(evt.target.value === this.currentDocument.model.domContainer.uuid) {
                 return;
             }
 
@@ -109,7 +99,7 @@ exports.Breadcrumb = Montage.create(Component, {
             }
 
             // TODO: This is bound 2 ways, update the internal property
-            this.application.ninja.currentSelectedContainer = this.containerElements[i].node;
+            this.currentDocument.model.domContainer = this.containerElements[i].node;
         }
     }
 });
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html
index 734966dc..ca447b8b 100755
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.html
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html
@@ -11,10 +11,35 @@
 
         <script type="text/montage-serialization">
         {
-            "_fillMaterialCB": {
+            "useFillColor": {
+                "prototype": "montage/ui/checkbox.reel",
+                "properties": {
+                    "element": {"#": "useFillColor"},
+                    "identifier": "useFillColor",
+                    "checked": true
+                }
+            },
+
+            "useWebGL": {
+                "prototype": "montage/ui/checkbox.reel",
+                "properties": {
+                    "element": {"#": "useWebGL"},
+                    "identifier": "useWebGL",
+                    "checked": false
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"},
+                        "capture": false
+                    }
+                ]
+            },
+
+            "fillMaterial": {
                 "prototype": "js/components/combobox.reel",
                 "properties": {
-                    "element": {"#": "fillMaterialCB"},
+                    "element": {"#": "fillMaterial"},
                     "labelField": "_name",
                     "dataField": "_name"
                 }
@@ -24,11 +49,12 @@
                 "properties": {
                     "element": {"#": "fillProperties"},
 
+                    "useFillColor": {"@": "useFillColor"},
                     "_fillColorCtrl": {"#": "fillColorCtrl"},
 
-                    "_useWebGL": {"#": "useWebGLCH"},
+                    "useWebGL": {"@": "useWebGL"},