58 files changed, 2221 insertions, 335 deletions

diff --git a/js/components/combobox.reel/combobox.js b/js/components/combobox.reel/combobox.js
index a68a7d6b..bc433f52 100644
--- a/js/components/combobox.reel/combobox.js
+++ b/js/components/combobox.reel/combobox.js
@@ -15,7 +15,7 @@ exports.Combobox = Montage.create(Component, {
     },
 
     _wasSetByCode: {
-        enumerable: false,
+        enumerable: true,
         value: true
     },
 
@@ -27,6 +27,14 @@ exports.Combobox = Montage.create(Component, {
         value: null
     },
 
+    dataField: {
+        value: null
+    },
+
+    dataFunction: {
+        value: null
+    },
+
     _items: {
         value: []
     },
@@ -71,7 +79,47 @@ exports.Combobox = Montage.create(Component, {
                 e.value = this._value;
                 this.dispatchEvent(e);
 
-                this._wasSetByCode = false;
+                this._wasSetByCode = true;
+            }
+        }
+    },
+
+    _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;
+            }
+        }
+    },
+
+    _visible: {
+        enumerable: false,
+        value: true
+    },
+
+    visible: {
+        enumerable: true,
+        serializable: true,
+        get: function() {
+            return this._visible;
+        },
+        set: function(value) {
+            if(value !== this._visible)
+            {
+                this._visible = value;
+                this.needsDraw = true;
             }
         }
     },
@@ -102,7 +150,19 @@ exports.Combobox = Montage.create(Component, {
                 {
                     var current = items[i];
                     optionItem = document.createElement("option");
-                    optionItem.value = current;
+                    if(this.dataFunction)
+                    {
+                        optionItem.value = this.dataFunction(current);
+                    }
+                    else if(this.dataField)
+                    {
+                        optionItem.value = current[this.dataField];
+                    }
+                    else
+                    {
+                        optionItem.value = current;
+                    }
+
                     if(this.labelFunction)
                     {
                         optionItem.innerText = this.labelFunction(current);
@@ -117,6 +177,15 @@ exports.Combobox = Montage.create(Component, {
                     }
                     this.element.appendChild(optionItem);
                 }
+                this.element.disabled = !this._enabled;
+                if(this._visible)
+                {
+                    this.element.style.visibility = "visible";
+                }
+                else
+                {
+                    this.element.style.visibility = "hidden";
+                }
             }
         }
     },
@@ -133,6 +202,22 @@ exports.Combobox = Montage.create(Component, {
 
     prepareForDraw: {
         value: function() {
+            if( (this._value === null) && this._items.length )
+            {
+                var current = this._items[0];
+                if(this.dataFunction)
+                {
+                    this.value = this.dataFunction(current);
+                }
+                else if(this.dataField)