31 files changed, 3027 insertions, 115 deletions
diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js
index 458e6b46..1b0591be 100644
--- a/js/controllers/elements/component-controller.js
+++ b/js/controllers/elements/component-controller.js
@@ -9,4 +9,33 @@ var Montage = require("montage/core/core").Montage,
 exports.ComponentController = Montage.create(ElementController, {
+    getProperty: {
+        value: function(el, prop) {
+            switch(prop) {
+                case "label":
+                    return this.application.ninja.currentDocument.getComponentFromElement(el).label;
+                    break;
+                case "enabled":
+                    return this.application.ninja.currentDocument.getComponentFromElement(el).enabled;
+                    break;
+                default:
+                    return ElementController.getProperty(el, prop, true);
+            }
+        }
+    },
+    setProperty: {
+        value: function(el, p, value) {
+            switch(p) {
+                case "label":
+                    this.application.ninja.currentDocument.getComponentFromElement(el).label = value;
+                    break;
+                case "enabled":
+                    this.application.ninja.currentDocument.getComponentFromElement(el).enabled = value;
+                    break;
+                default:
+                    ElementController.setProperty(el, p, value);
+            }
+        }
+    }
 });
diff --git a/js/io/document/html-document.js b/js/io/document/html-document.js
index c44dfe75..a8e06c69 100644
--- a/js/io/document/html-document.js
+++ b/js/io/document/html-document.js
@@ -27,6 +27,7 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base
    _initialUserDocument: { value: null, enumerable: false },
    _htmlSource: {value: "<html></html>", enumerable: false},
    _glData: {value: null, enumerable: false },
+    _userComponents: { value: {}, enumarable: false},
    _elementCounter: { value: 1, enumerable: false },
    _snapping : { value: true, enumerable: false },
@@ -108,23 +109,11 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base
        }
    },
-    _userComponentSet: {
+    userComponents: {
-        value: {},
+        get: function() {
-        writable: true,
+            return this._userComponents;
-        enumerable:true
+        }
    },
-//    userComponentSet:{
-//        enumerable: true,
-//        get: function() {
-//            return this._userComponentSet;
-//        },
-//        set: function(value) {
-//            this._userComponentSet = value;
-//            this._drawUserComponentsOnOpen();
-//        }
-//    },
-//
 //    _drawUserComponentsOnOpen:{
 //        value:function(){
 //            for(var i in this._userComponentSet){
@@ -191,6 +180,29 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base
        set: function(value) { this._zoomFactor = value; }
    },
+    /**
+     * Add a reference to a component instance to the userComponents hash using the
+     * element UUID
+     */
+    setComponentInstance: {
+        value: function(instance, el) {
+            this.userComponents[el.uuid] = instance;
+        }
+    },
+    /**
+     * Returns the component instance obj from the element
+     */
+    getComponentFromElement: {
+        value: function(el) {
+            if(el) {
+                if(el.uuid) return this.userComponents[el.uuid];
+            } else {
+                return null;
+            }
+        }
+    },
    //****************************************//
    // PUBLIC METHODS
    initialize: {
@@ -353,9 +365,6 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base
                        this.callback(this);
                    }
                }.bind(this), 50);
-                
-                // TODO - Not sure where this goes
-                this._userComponentSet = {};
            } else {
                this._styles = this._document.styleSheets[this._document.styleSheets.length - 1];
                this._stylesheets = this._document.styleSheets; // Entire stlyesheets array
diff --git a/js/panels/Components/Components.xml b/js/panels/Components/Components.xml
index b3056330..e076602e 100644
--- a/js/panels/Components/Components.xml
+++ b/js/panels/Components/Components.xml
@@ -2,27 +2,5 @@
 <tree id="Components">
    <folder id="montageComponents" label="Montage Components">
        <leaf id="Button" label="Button" />
-        <leaf id="Checkbox" label="Checkbox" />
-        <leaf id="DynamicText" label="Dynamic Text" />
-        <leaf id="FlowController" label="FlowController" />
-        <leaf id="HotText" label="HotText" />
-        <leaf id="HotTextUnit" label="HotTextUnit" />
-        <leaf id="ImageContainer" label="Image Container" />
-        <leaf id="Progress" label="Progress" />
-        <leaf id="Scrollview" label="Scrollview" />
-        <leaf id="Slider" label="Slider" />
-        <leaf id="TextArea" label="TextArea" />
-        <leaf id="Textfield" label="Textfield" />
-        <leaf id="Toggle" label="Toggle" />
-    </folder>
-    <folder id="metaComponents" label="Meta Components">
-        <leaf id="Condition" label="Condition" />
-        <leaf id="Repetition" label="Repetition" />
-        <leaf id="Slot" label="Slot" />
-        <leaf id="Substitution" label="Substitution" />
-    </folder>
-    <folder id="htmlPresets" label="HTML Components">
-        <leaf id="html_button" label="Button" />
-        <leaf id="html_input" label="Text Input" />
    </folder>
 </tree>
 \ No newline at end of file
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
index df104ecc..1e040e35 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
@@ -11,6 +11,17 @@
        <script type="text/montage-serialization">
        {
+            "componentController": {
+                "module": "montage/ui/controller/array-controller",
+                "name": "ArrayController",
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "owner"},