8 files changed, 353 insertions, 182 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;
+        }
+    },
+
+    /**
+     * 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: {
+    initialize: {
                 value: function(file, uuid, iframe, callback) {
                         //
                         this._userDocument = file;
                         //
                         this.init(file.name, file.uri, file.extension, iframe, uuid, callback);
                         //
-                        this.iframe = iframe;
-                        this.selectionExclude = ["HTML", "BODY", "Viewport", "UserContent", "stageBG"];
-                        this.currentView = "design";
+            this.iframe = iframe;
+            this.selectionExclude = ["HTML", "BODY", "Viewport", "UserContent", "stageBG"];
+            this.currentView = "design";
                         //
                         this.iframe.src = this._htmlTemplateUrl;
             this.iframe.addEventListener("load", this, true);
@@ -347,7 +359,7 @@ exports.HTMLDocument = Montage.create(BaseDocument, {
     },
 
     /*
-// Private
+    // Private
     _loadDocument: {
         value: function(uri) {
             // Load the document into the Iframe
@@ -356,7 +368,7 @@ exports.HTMLDocument = Montage.create(BaseDocument, {
         }
     },
 */
-        
+
         
         
         ////////////////////////////////////////////////////////////////////
@@ -368,7 +380,7 @@ exports.HTMLDocument = Montage.crea