4 files changed, 143 insertions, 130 deletions

diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index e279d5c5..3cd2c254 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -66,35 +66,37 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
     
    
     
+    
+    
+    
+    
+    ////////////////////////////////////////////////////////////////////
+        //
     handleWebRequest: {
         value: function (request) {
-                if (request.url.indexOf('js/document/templates/montage-html') !== -1) {
-                        
-                        //console.log(request);
-                        
-                        //TODO: Figure out why active document is not available here
-                        
-                                if (this._hackRootFlag) {
-                                        
-                                        //console.log(request.url.split('/')[request.url.split('/').length-1]);
-                                        //console.log(this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split('/')[request.url.split('/').length-1]);
-                                        
-                                        return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split('/')[request.url.split('/').length-1]};
-                                }
+                if (this._hackRootFlag && request.url.indexOf('js/document/templates/montage-html') !== -1) {
+                        //TODO: Optimize creating string
+                                return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split('/')[request.url.split('/').length-1]};
                         }
         }
     },
-    
-
+    ////////////////////////////////////////////////////////////////////
+        //
     handleAppLoaded: {
         value: function() {
-            //
-            
+            //Adding an intercept to resources loaded to ensure user assets load from cloud simulator
             chrome.webRequest.onBeforeRequest.addListener(this.handleWebRequest.bind(this), {urls: ["<all_urls>"]}, ["blocking"]);
-            
         }
     },
-
+        ////////////////////////////////////////////////////////////////////
+        
+        
+        
+        
+        
+        
+        
+        
     handleExecuteFileOpen: {
         value: function(event) {
             var pickerSettings = event._event.settings || {};
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 44ca50e1..885d710f 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -571,6 +571,10 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 rules = [],
                 win = element.ownerDocument.defaultView,
                 self = this;
+
+            if(!win) {
+                return null;
+            }
                 
             if(!omitPseudos) {
                 pseudos.concat(['link', 'visited', 'active', 'hover', 'focus', 'first-letter', 
@@ -674,8 +678,9 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             }
             
             var matchingElements, i;
+
             for(i = 0; i < specArr.length; i++) {
-                matchingElements = win.document.querySelectorAll(specArr[i].selector);
+                matchingElements = element.ownerDocument.querySelectorAll(specArr[i].selector);
                 if(nj.toArray(matchingElements).indexOf(element) !== -1) {
                     return specArr[i];
                 }
diff --git a/js/document/html-document.js b/js/document/html-document.js
index 77cc711d..28818774 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -358,22 +358,40 @@ 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: Remove
-                window.hackPreview = this.livePreview.bind(this);
-        
-                this.application.ninja.documentController._hackRootFlag = true;
-                        //console.log(this._userDocument.root, this);
                 //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;
@@ -381,82 +399,93 @@ 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;
+            
+            
+            
+            
+            /* this.iframe.contentWindow.document.addEventListener('DOMSubtreeModified', function (e) { */ //TODO: Remove events upon loading once
 
-            this.documentRoot.innerHTML = this._userDocument.content.body;
-            this.iframe.contentWindow.document.getElementById("userHead").innerHTML = this._userDocument.content.head;
-
-          
-            //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") {
+