2 files changed, 85 insertions, 34 deletions

diff --git a/js/document/document-html.js b/js/document/document-html.js
index 6ace440f..b169e046 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -82,43 +82,71 @@ exports.HtmlDocument = Montage.create(Component, {
                 this.model.views.design.content = this.model.file.content;
                 //
                 this.model.views.design.render(function () {
-                        
-                        
-                        
-                        
-                        
                         //TODO: Identify and remove usage of '_document'
                         this._document = this.model.views.design.document;
                                 //TODO: Check for needed
                         this.documentRoot = this.model.views.design.document.body;
                         //TODO: Why is this needed?
                         this._liveNodeList = this.documentRoot.getElementsByTagName('*');
-                        //
+                        //Initiliazing document model
                         document.application.njUtils.makeElementModel(this.documentRoot, "Body", "body");
-                        //TODO: Figure out why timeout is needed
-                        setTimeout(function () {
-                                //Making callback after view is loaded
-                                this.loaded.callback.call(this.loaded.context, this);
-                                //Setting opacity to be viewable after load
-                                setTimeout(function () {
-                                        this.model.views.design.iframe.style.opacity = 1;
-                                }.bind(this), 1000);
-                        }.bind(this), 1000);
-                        
-                        
-                        
-                        
-                        
-                        
-                        
+                        //Adding event to know when template is ready
+                        this.model.views.design.document.head.addEventListener('DOMSubtreeModified', this.handleTemplateReady.bind(this), false);
                 }.bind(this));
             } else {
                 //TODO: Identify default view (probably code)
             }
         }
     },
-        ////////////////////////////////////////////////////////////////////
+    ////////////////////////////////////////////////////////////////////
         //
+    handleTemplateReady: {
+        value: function (e) {
+                //Removing event listener, a must for this type of event
+                this.model.views.design.document.head.removeEventListener('DOMSubtreeModified', this.handleTemplateReady.bind(this), false);
+                //Making callback after view is loaded
+            this.loaded.callback.call(this.loaded.context, this);
+            //Setting opacity to be viewable after load
+                        this.model.views.design.iframe.style.opacity = 1;
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    ////////////////////////////////////////////////////////////////////
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+        
+        
     handleWebTemplateLoad: {
         value: function(event) {
             //TODO: Remove, also for prototyping
diff --git a/js/document/views/design.js b/js/document/views/design.js
index 10963cab..a2bf965a 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -28,6 +28,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
     },
     ////////////////////////////////////////////////////////////////////
         //
+        _headFragment: {
+        value: null
+    },
+    ////////////////////////////////////////////////////////////////////
+        //
         content: {
         value: null
     },
@@ -69,22 +74,40 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
                 //
                 this.document = this.iframe.contentWindow.document;
                 //
-                
-                
-                
-                
-                //this.document.head.innerHTML += this.content.head;
-                this.document.body.innerHTML = this.content.head + this.content.body;
-                
-                
-                
-                
+                this._headFragment = this.document.createElement('head');
+                this._headFragment.addEventListener('DOMSubtreeModified', this.insertHeadContent.bind(this), false);
+                this._headFragment.innerHTML = this.content.head;       
                 //
-                if (this._callback) this._callback();
+                this.document.body.addEventListener('DOMSubtreeModified', this.bodyContentLoaded.bind(this), false);
+                this.document.body.innerHTML += this.content.body;
         }
     },
     ////////////////////////////////////////////////////////////////////
         //
+    bodyContentLoaded: {
+        value: function (e) {
+                //
+                this.document.body.removeEventListener('DOMSubtreeModified', this.bodyContentLoaded.bind(this), false);
+                //
+                if (this._callback) this._callback();
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+        //
+    insertHeadContent: {
+        value: function (e) {
+                //
+                this._headFragment.removeEventListener('DOMSubtreeModified', this.insertHeadContent, false);
+                //
+                for(var i in this._headFragment.childNodes) {
+                        if(this._headFragment.childNodes[i].outerHTML) {
+                                this.document.head.appendChild(this._headFragment.childNodes[i]);
+                        }
+                }
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+        //
     initCss: {
         value: function () {
                 //