7 files changed, 343 insertions, 93 deletions

diff --git a/js/document/html-document.js b/js/document/html-document.js
index 0c8695fb..9a7755e6 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -14,7 +14,7 @@ var Montage = 		require("montage/core/core").Montage,
 exports.HTMLDocument = Montage.create(TextDocument, {
     
     _selectionExclude: { value: null, enumerable: false },
-    _htmlTemplateUrl: { value: "user-document-templates/montage-application-cloud/index.html", enumerable: false},
+    _htmlTemplateUrl: { value: "js/document/templates/montage-html/index.html", enumerable: false},
     _iframe: { value: null, enumerable: false },
     _server: { value: null, enumerable: false },
     _templateDocument: { value: null, enumerable: false },
@@ -235,6 +235,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
         //
     initialize: {
                 value: function(file, uuid, iframe, callback) {
+                        this.application.ninja.documentController._hackRootFlag = false;
                         //
                         this._userDocument = file;
                         //
@@ -289,15 +290,6 @@ exports.HTMLDocument = Montage.create(TextDocument, {
         }
     },
 
-
-
-    AppendElement: {
-        value: function(element, parent) {
-            this.dirtyFlag = true;
-        }
-    },
-
-
     /**
      * Return the specified inline attribute from the element.
      */
@@ -354,17 +346,43 @@ exports.HTMLDocument = Montage.create(TextDocument, {
     },
     
     
-        
+    
+    
+    
+    
+    
+    
+        /*              
+            DOM Mutation Events:
+                        
+            DOMActivate, DOMFocusIn, DOMFocusOut, DOMAttrModified,
+                DOMCharacterDataModified, DOMNodeInserted, DOMNodeInsertedIntoDocument,
+                DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified, DOMContentLoaded
+                        
+        */
+        
+        
+        
+        /*
+//TODO: Remove and clean up event listener (DOMSubtreeModified)
+        _hackCount: {
+                value: 0
+        },
+*/
+        
+        
         ////////////////////////////////////////////////////////////////////
         //
     handleEvent: {
         value: function(event){
                 //TODO: Clean up, using for prototyping save
                 this._templateDocument = {};
-                this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead");;
-                this._templateDocument.body = this.iframe.contentWindow.document.getElementById("UserContent");;
+                this._templateDocument.head = this.iframe.contentWindow.document.getElementById("userHead");
+                this._templateDocument.body = this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent");
+                //TODO: Remove, also for prototyping
+                this.application.ninja.documentController._hackRootFlag = true;
                 //
-            this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent");
+            //this.documentRoot = this.iframe.contentWindow.document.getElementById("UserContent");
             this.stageBG = this.iframe.contentWindow.document.getElementById("stageBG");
             this.stageBG.onclick = null;
             this._document = this.iframe.contentWindow.document;
@@ -372,79 +390,103 @@ exports.HTMLDocument = Montage.create(TextDocument, {
             //
             if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {};
             //
+            this._templateDocument.head.innerHTML = this._userDocument.content.head;
+            this._templateDocument.body.innerHTML = this._userDocument.content.body;
+
+            // Adding a handler for the main user document reel to finish loading.
+            this._document.body.addEventListener("userTemplateDidLoad",  this.userTemplateDidLoad.bind(this), false);
 
-            this.documentRoot.innerHTML = this._userDocument.content.body;
-            this.iframe.contentWindow.document.getElementById("userHead").innerHTML = this._userDocument.content.head;
+            
+            /* this.iframe.contentWindow.document.addEventListener('DOMSubtreeModified', function (e) { */ //TODO: Remove events upon loading once
 
-          
-            //TODO: Look at code below and clean up
+            //TODO: When written, the best way to initialize the document is to listen for the DOM tree being modified
+            setTimeout(function () {
                 
                 
+                
+                ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                if(this._document.styleSheets.length > 1) {
+                                        this._styles = this._document.styleSheets[this._document.styleSheets.length - 1];
+                                        this._stylesheets = this._document.styleSheets; // Entire stlyesheets array
+                                        
+                                        //TODO Finish this implementation once we start caching Core Elements
+                                        // Assign a model to the UserContent and add the ViewPort reference to it.
+                                        NJUtils.makeElementModel(this.documentRoot, "Stage", "stage");
+                                        //this.documentRoot.elementModel.viewPort = this.iframe.contentWindow.document.getElementById("Viewport");
+                                        NJUtils.makeElementModel(this.stageBG, "Stage", "stage");
+                                        NJUtils.makeElementModel(this.iframe.contentWindow.document.getElementById("Viewport"), "Stage", "stage");
+                                         
+                                        for(i = 0; i < this._stylesheets.length; i++) {
+                                                if(this._stylesheets[i].ownerNode.id === this._stageStyleSheetId) {
+                                                        this.documentRoot.elementModel.defaultRule = this._stylesheets[i];
+                                                        break;
+                                                }
+                                        }
+                                         
+                                        //Temporary create properties for each rule we need to save the index of the rule
+                                        var len = this.documentRoot.elementModel.defaultRule.cssRules.length;
+                                        for(var j = 0; j < len; j++) {
+                                                //console.log(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText);
+                                                if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "*") {
+                                                
+                                                        this.documentRoot.elementModel.transitionStopRule = this.documentRoot.elementModel.defaultRule.cssRules[j];
+                                                
+                                                } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "body") {
+                                                        
+                                                        this.documentRoot.elementModel.body = this.documentRoot.elementModel.defaultRule.cssRules[j];
+                                                
+                                                } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "#Viewport") {
+                                                
+                                                        this.documentRoot.elementModel.viewPort = this.documentRoot.elementModel.defaultRule.cssRules[j];
+                                                        
+                                                } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === ".stageDimension") {
+                                                
+                                                        this.documentRoot.elementModel.stageDimension = this.documentRoot.elementModel.defaultRule.cssRules[j];
+                                                        
+                                                } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === ".stageView") {
+                                                        
+                                                        this.documentRoot.elementModel.stageView = this.documentRoot.elementModel.defaultRule.cssRules[j];
+                                                        
+                                                } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "#stageBG") {
+                                                        
+                                                        this.documentRoot.elementModel.stageBackground = this.documentRoot.elementModel.defaultRule.cssRules[j];
+                                                }
+                                        }
+                                        
+                                        this.callback(this);
+                                        
+                                }
+                                ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                                ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                                ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                        
+                        
+                        
+                        
+                        
+                        }.bind(this), 1000);
+                        
+                        
             
-
-                this.cssLoadInterval = setInterval(function() {
-                    if(this._document.styleSheets.length > 1) {
-                        clearInterval(this.cssLoadInterval);
-                        this._styles = this._document.styleSheets[this._document.styleSheets.length - 1];
-                        this._stylesheets = this._document.styleSheets; // Entire stlyesheets array
-
-                        this.callback(this);
-                    }
-                }.bind(this), 50);
             
-                this._styles = this._document.styleSheets[this._document.styleSheets.length - 1];
-                this._stylesheets = this._document.styleSheets; // Entire stlyesheets array
-
-                /* TODO Finish this implementation once we start caching Core Elements */
-                // Assign a model to the UserContent and add the ViewPort reference to it.
-                NJUtils.makeElementModel(this.documentRoot, "Stage", "stage");
-                //this.documentRoot.elementModel.viewPort = this.iframe.contentWindow.document.getElementById("Viewport");
-                NJUtils.makeElementModel(this.stageBG, "Stage", "stage");
-                NJUtils.makeElementModel(this.iframe.contentWindow.document.getElementById("Viewport"), "Stage", "stage");
-
+        }
+    },