1 files changed, 56 insertions, 8 deletions

diff --git a/js/document/html-document.js b/js/document/html-document.js
index f260b665..d38709e3 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -23,6 +23,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
 
     _document: { value: null, enumerable: false },
     _documentRoot: { value: null, enumerable: false },
+    _liveNodeList: { value: null, enumarable: false },
     _stageBG: { value: null, enumerable: false },
     _window: { value: null, enumerable: false },
     _styles: { value: null, enumerable: false },
@@ -403,6 +404,12 @@ exports.HTMLDocument = Montage.create(TextDocument, {
             this._document = this.iframe.contentWindow.document;
             this._window = this.iframe.contentWindow;
             //
+            for (var k in this._document.styleSheets) {
+                if (this._document.styleSheets[k].ownerNode && this._document.styleSheets[k].ownerNode.setAttribute) {
+                        this._document.styleSheets[k].ownerNode.setAttribute('ninjatemplate', 'true');
+                }
+            }
+            //
             if(!this.documentRoot.Ninja) this.documentRoot.Ninja = {};
             //Inserting user's document into template
             this._templateDocument.head.innerHTML = this._userDocument.content.head;
@@ -411,7 +418,16 @@ exports.HTMLDocument = Montage.create(TextDocument, {
             //Adding a handler for the main user document reel to finish loading
             this._document.body.addEventListener("userTemplateDidLoad",  this.userTemplateDidLoad.bind(this), false);
 
-            
+            // Live node list of the current loaded document
+            this._liveNodeList = this.documentRoot.getElementsByTagName('*');
+
+            // TODO Move this to the appropriate location
+            var len = this._liveNodeList.length;
+
+            for(var i = 0; i < len; i++) {
+                NJUtils.makeModelFromElement(this._liveNodeList[i]);
+            }
+
             /* this.iframe.contentWindow.document.addEventListener('DOMSubtreeModified', function (e) { */ //TODO: Remove events upon loading once
 
             //TODO: When re-written, the best way to initialize the document is to listen for the DOM tree being modified
@@ -438,8 +454,10 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                                                                 cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri});
                                                                 //Creating tag with file content
                                                                 tag = this.iframe.contentWindow.document.createElement('style');
+                                                                tag.setAttribute('type', 'text/css');
                                                                 tag.setAttribute('ninjauri', fileUri);
                                                                 tag.setAttribute('ninjafileurl', cssUrl);
+                                                                tag.setAttribute('ninjafilename', cssUrl.split('/')[cssUrl.split('/').length-1]);
                                                                 tag.innerHTML = cssData.content;
                                                                 //Looping through DOM to insert style tag at location of link element
                                                                 query = this._templateDocument.html.querySelectorAll(['link']);
@@ -454,12 +472,11 @@ exports.HTMLDocument = Montage.create(TextDocument, {
                                                         }
                         }
                                         }
+                                        ////////////////////////////////////////////////////////////////////////////
+                                        ////////////////////////////////////////////////////////////////////////////
                                         
-                                        //TODO: Revisit this logic
-                                        this._styles = this._document.styleSheets[1];
-                                        this._stylesheets = this._document.styleSheets; // Entire stlyesheets array
-                                        
-                                        //console.log(this._document.styleSheets);
+                                        //TODO: Check if this is needed
+                                        this._stylesheets = this._document.styleSheets;
                                         
                                         ////////////////////////////////////////////////////////////////////////////
                                         ////////////////////////////////////////////////////////////////////////////
@@ -566,7 +583,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
         enumerable: false,
         value: function () {
                 //TODO: Add logic to handle save before preview
-                this.save();
+                this.saveAll();
                 //Launching 'blank' tab for testing movie
                 chrome.tabs.create({url: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]});            
         }
@@ -578,7 +595,38 @@ exports.HTMLDocument = Montage.create(TextDocument, {
         value: function () {
                 //TODO: Add code view logic and also styles for HTML
                 if (this.currentView === 'design') {
-                        return {mode: 'html', document: this._userDocument, webgl: this.glData, style: this._styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
+                        var styles = [];
+                        for (var k in this._document.styleSheets) {
+                                if (this._document.styleSheets[k].ownerNode && this._document.styleSheets[k].ownerNode.getAttribute) {
+                                if (this._document.styleSheets[k].ownerNode.getAttribute('ninjatemplate') === null) {
+                                        styles.push(this._document.styleSheets[k]);
+                                }
+                        }
+                }
+                        return {mode: 'html', document: this._userDocument, webgl: this.glData, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
+                } else if (this.currentView === "code"){
+                        //TODO: Would this get call when we are in code of HTML?
+                } else {
+                        //Error
+                }
+        }
+        },
+        ////////////////////////////////////////////////////////////////////
+        //
+        saveAll: {
+                enumerable: false,
+        value: function () {
+                //TODO: Add code view logic and also styles for HTML
+                if (this.currentView === 'design') {
+                        var css = [];
+                        for (var k in this._document.styleSheets) {
+                                if (this._document.styleSheets[k].ownerNode && this._document.styleSheets[k].ownerNode.getAttribute) {
+                                if (this._document.styleSheets[k].ownerNode.getAttribute('ninjatemplate') === null) {
+                                        css.push(this._document.styleSheets[k]);
+                                }
+                        }
+                }
+                        return {mode: 'html', document: this._userDocument, webgl: this.glData, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
                 } else if (this.currentView === "code"){
                         //TODO: Would this get call when we are in code of HTML?
                 } else {