4 files changed, 47 insertions, 15 deletions

diff --git a/js/components/ui/tree-basic/treeItem.reel/treeItem.js b/js/components/ui/tree-basic/treeItem.reel/treeItem.js
index a67dad43..13e278e9 100755
--- a/js/components/ui/tree-basic/treeItem.reel/treeItem.js
+++ b/js/components/ui/tree-basic/treeItem.reel/treeItem.js
@@ -107,8 +107,8 @@ exports.TreeItem = Montage.create(Component, {
             //icon or text click sends selection event
             var contentEls = this.element.querySelectorAll(".atreeItemContent");
             for(var i=0;i<contentEls.length;i++){
-                contentEls[i].addEventListener("click", function(evt){that.handleTreeItemContentClick(evt);}, false);
-                contentEls[i].addEventListener("dblclick", function(evt){that.handleTreeItemContentDblclick(evt);}, false);
+                contentEls[i].addEventListener("click", function(evt){that.handleTreeItemContentClick(evt);}, true);
+                contentEls[i].addEventListener("dblclick", function(evt){that.handleTreeItemContentDblclick(evt);}, true);
             }
 
             this.element.addEventListener("mouseover", function(evt){that.handleTreeItemMouseover(evt);}, false);
@@ -123,7 +123,7 @@ exports.TreeItem = Montage.create(Component, {
             if(this.treeItemData.modifiedDate){this.metadata = this.metadata + "<br />" + "Modified date: "+ this.formatTimestamp(this.treeItemData.modifiedDate);}
 
             if((this.treeItemData.type === "directory") && (this.expandAfterDraw === true)){
-                this.toggleContent(this.treeArrow);
+                this.expand(this.treeArrow);
             }
             if(this.treeItemData.uri === this.highlightedUri){
                 this.itemName.classList.add("selected");
@@ -171,6 +171,35 @@ exports.TreeItem = Montage.create(Component, {
         }
     },
 
+    expand:{
+        writable:false,
+        enumerable:true,
+        value:function(el){
+            //if children already drawn then just hide/show
+            if(this.element.getElementsByTagName("ul").length > 0){
+                var theParent = this.element.getElementsByTagName("ul")[0].parentNode;
+                if(theParent.classList.contains("hideTree")){//collapsed
+                    theParent.classList.remove("hideTree");//expand
+                    el.innerHTML = "&#9660;";
+                }
+            }
+            //else send event to draw the children
+            else{
+                var treeClickEvent = document.createEvent("Events");
+                treeClickEvent.initEvent("drawTree", false, false);
+                treeClickEvent.uri = this.treeItemData.uri;
+                treeClickEvent.uriType = this.treeItemData.type;
+                var divEl = document.createElement("div");
+                this.element.appendChild(divEl);
+                treeClickEvent.subTreeContainer = divEl;
+                this.element.dispatchEvent(treeClickEvent);
+
+                el.innerHTML = "&#9660;";
+            }
+        }
+    },
+
+
     /**
      * Event Listeners
      */
diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index 539fd13e..d5556fa8 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -64,10 +64,16 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
 
             this.eventManager.addEventListener("styleSheetDirty", this, false);
             
+            this.eventManager.addEventListener("addComponentFirstDraw", this, false);
         }
     },
     
-   
+    handleAddComponentFirstDraw: {
+        value: function (e) {
+                //TODO: Add logic to reparse the document for dynamically added styles
+                console.log(e);
+        }
+    },
     
                         
                         
diff --git a/js/document/templates/montage-html/main.reel/main.js b/js/document/templates/montage-html/main.reel/main.js
index 2970f37a..019c675e 100644
--- a/js/document/templates/montage-html/main.reel/main.js
+++ b/js/document/templates/montage-html/main.reel/main.js
@@ -31,8 +31,6 @@ exports.Main = Montage.create(Component, {
                         componentInstance.needsDraw = true;
                         componentInstance.ownerComponent = self;
 
-                        componentInstance.addEventListener("firstDraw", self, false);
-
                         callback(componentInstance, element);
                     })
                     .end();
@@ -46,14 +44,5 @@ exports.Main = Montage.create(Component, {
             document.body.dispatchEvent( newEvent );
 
         }
-    },
-
-    handleFirstDraw: {
-        value: function() {
-            var newEvent = document.createEvent( "CustomEvent" );
-            newEvent.initCustomEvent( "addComponentFirstDraw", false, true );
-
-            document.body.dispatchEvent( newEvent );
-        }
     }
 });
\ No newline at end of file
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 599eeda3..3505393c 100755
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -297,6 +297,8 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
                         styles[n] = defaultStyles[n];
                     }
                 }
+                
+                instance.addEventListener('firstDraw', that, false);
 
                 that.application.ninja.currentDocument.setComponentInstance(instance, element);
 
@@ -305,6 +307,12 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
 
         }
     },
+    
+    handleFirstDraw: {
+        value: function (e) {
+                NJevent("addComponentFirstDraw");
+        }
+    },
 
     makeComponent: {
         value: function(name) {