36 files changed, 3177 insertions, 346 deletions

diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.js b/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
index 0b7a171e..c6416693 100644
--- a/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.js
@@ -36,14 +36,14 @@ exports.Leaf = Montage.create(TreeNode, {
     handleEvent : {
         value: function(e) {
             var delegateMethod = this.delegateEventMap[e._event.type];
-            this.callDelegateMethod(delegateMethod);
+            this.callDelegateMethod(delegateMethod, e);
         }
     },
     callDelegateMethod : {
-        value: function(methodName) {
+        value: function(methodName, evt) {
             var delegate = this.treeView.contentController.delegate;
             if(delegate && typeof delegate[methodName] === 'function') {
-                delegate[methodName](this.sourceObject);
+                delegate[methodName](this.sourceObject, evt);
             }
         }
     },
@@ -60,6 +60,7 @@ exports.Leaf = Montage.create(TreeNode, {
     delegateEventMap : {
         value: {
             'click'     : 'handleNodeActivation',
+            'dblclick'  : 'handleDblclick',
             'dragstart' : 'handleDragStart',
             'dragend'   : 'handleDragEnd'
         }
diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js
index 458e6b46..33b9b79a 100755
--- a/js/controllers/elements/component-controller.js
+++ b/js/controllers/elements/component-controller.js
@@ -9,4 +9,45 @@ 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;
+                case "disabled":
+                    return this.application.ninja.currentDocument.getComponentFromElement(el).disabled;
+                    break;
+                case "value":
+                    return this.application.ninja.currentDocument.getComponentFromElement(el).value;
+                    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;
+                case "disabled":
+                    this.application.ninja.currentDocument.getComponentFromElement(el).disabled = value;
+                    break;
+                case "value":
+                    this.application.ninja.currentDocument.getComponentFromElement(el).value = 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 ac556c2d..88cfec67 100755
--- a/js/io/document/html-document.js
+++ b/js/io/document/html-document.js
@@ -6,9 +6,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 ////////////////////////////////////////////////////////////////////////
 //
-var Montage =           require("montage/core/core").Montage,
+var Montage = require("montage/core/core").Montage,
     BaseDocument =      require("js/io/document/base-document").BaseDocument,
-    NJUtils =           require("js/lib/NJUtils").NJUtils;
+    NJUtils = require("js/lib/NJUtils").NJUtils;
 ////////////////////////////////////////////////////////////////////////
 //
 exports.HTMLDocument = Montage.create(BaseDocument, {
@@ -31,6 +31,7 @@ exports.HTMLDocument = Montage.create(BaseDocument, {
     _userDocument: { 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 },
@@ -137,23 +138,11 @@ exports.HTMLDocument = Montage.create(BaseDocument, {
         }
     },
 
-    _userComponentSet: {
-        value: {},
-        writable: true,
-        enumerable:true
+    userComponents: {
+        get: function() {
+            return this._userComponents;
+        }
     },
-
-//    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){
@@ -220,22 +209,45 @@ exports.HTMLDocument = Montage.create(BaseDocument, {
         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;
+        }
+    },
+
+    /**