21 files changed, 917 insertions, 115 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)
+                {
+                    this.value = current[this.dataField];
+                }
+                else
+                {
+                    this.value = current;
+                }
+            }
             this.element.addEventListener("change", this, false);
         }
     }
diff --git a/js/components/editable.reel/editable.js b/js/components/editable.reel/editable.js
new file mode 100644
index 00000000..1d0ad776
--- /dev/null
+++ b/js/components/editable.reel/editable.js
@@ -0,0 +1,250 @@
+/* ComputedStyleSubPanel.js */
+var Montage   = require("montage").Montage,
+    Component = require("montage/ui/component").Component;
+
+
+/*
+
+EDITABLE - Methods
+- startEdit
+- stopEdit
+- value
+- 
+- _suggest
+- _suggestNext
+- _suggestPrev
+- _clearSuggest
+- _accept
+- _revert
+- _setCaret
+
+*/
+
+
+exports.Editable = Montage.create(Component, {
+    hasTemplate: { value: false },
+
+    _element : { value : null },
+    element : {
+        get : function() {
+            return this._element;
+        },
+        set : function(el) {
+            this._element = el;
+            this._element.addEventListener('keydown', this, false);
+            this._element.addEventListener('input', this, false);
+            
+            if(this.startOnEvent) {
+                this._element.addEventListener(this.startOnEvent, this, false);
+            }
+            
+        }
+    },
+    _readOnly : {
+        value: false
+    },
+    readOnly : {
+        get : function() { return this._readOnly; },
+        set : function(makeReadOnly) {
+            var action = makeReadOnly ? 'add' : 'remove';
+            
+            this._element.classList