20 files changed, 214 insertions, 181 deletions

diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index 1f339fe7..c31ffbac 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 || {};
@@ -118,8 +120,10 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
         //TODO: Check for appropiate structures
     handleExecuteSave: {
         value: function(event) {
-                //Text and HTML document classes should return the same save object for fileSave
-                this.application.ninja.ioMediator.fileSave(this.activeDocument.save(), this.fileSaveResult.bind(this));
+            if(!!this.activeDocument){
+                //Text and HTML document classes should return the same save object for fileSave
+                this.application.ninja.ioMediator.fileSave(this.activeDocument.save(), this.fileSaveResult.bind(this));
+            }
                 }
     },
     ////////////////////////////////////////////////////////////////////
@@ -459,5 +463,5 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
         value: function() {
             return "userDocument_" + (this._iframeCounter++);
         }
-        }
+    }
 });
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;
+                                                }