9 files changed, 533 insertions, 375 deletions

diff --git a/js/document/document-html.js b/js/document/document-html.js
index 89717dd6..deca9f83 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -7,360 +7,118 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 ////////////////////////////////////////////////////////////////////////
 //
 var Montage =           require("montage/core/core").Montage,
-        Component =         require("montage/ui/component").Component;
-    HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel;
+        Component =         require("montage/ui/component").Component,
+    HtmlDocumentModel = require("js/document/models/html").HtmlDocumentModel,
+    DesignDocumentView = require("js/document/views/design").DesignDocumentView;
 ////////////////////////////////////////////////////////////////////////
 //      
 exports.HtmlDocument = Montage.create(Component, {
         ////////////////////////////////////////////////////////////////////
         //
         hasTemplate: {
-                enumerable: false,
         value: false
     },
-
+    ////////////////////////////////////////////////////////////////////
+        //
     model: {
         value: null
     },
-
-    loadDelegate: {
-        value: null
+        ////////////////////////////////////////////////////////////////////
+        //
+    loaded: {
+        value: {callback: null, context: null}
     },
-
-    delegateContext: {
+    ////////////////////////////////////////////////////////////////////
+        //
+    _observer: {
         value: null
     },
-
-    exclusionList: {
-        value: ["HTML", "BODY"]
-    },
-
-    // Getters for the model.
-    // TODO: Change how these properties are accessed through Ninja
-    name: {
-        get: function() {
-            return this.model._name;
-        },
-        set: function(value) {
-            this.model._name = value;
-        }
-    },
-
-    isActive: {
-        get: function() {
-            return this.model._isActive;
-        },
-        set: function(value) {
-            this.model._isActive = value;
-        }
-    },
-
-    needsSave: {
-        get: function() {
-            return this.model._needsSave;
-        },
-        set: function(value) {
-            this.model._needsSave = value;
-        }
+    ////////////////////////////////////////////////////////////////////
+        //
+    _document: {
+        value: null //TODO: Figure out if this will be needed, probably not
     },
-
-    // View Properties
-    // TODO: Move those into a view object - for now dump it here
-    iframe: {
-        value: null
+        ////////////////////////////////////////////////////////////////////
+        //
+    exclusionList: {
+        value: [] //TODO: Update to correct list
     },
-
+        ////////////////////////////////////////////////////////////////////
+        //
     uuid: {
         get: function() {
             return this._uuid;
         }
     },
-
-    currentView: {
-        value: "design"
-    },
-        ////////////////////////////////////////////////////////////////////
-        ////////////////////////////////////////////////////////////////////
-    init: {
-        value:function(file, context, callback) {
-            this.model = Montage.create(HtmlDocumentModel, {
-                file: {
-                    value: file
-                }
-            });
-
-            this.name = file.name;
-
-            // this.init(file.name, file.uri, file.extension, iframe, uuid, callback);
-
-
-            this.iframe = this.createView();
-
-            //this.selectionExclude = ["HTML", "BODY", "Viewport", "UserContent", "stageBG"];
-            //this.currentView = "design";
-            //
-
-            this.delegateContext = context;
-            this.loadDelegate = callback;
-        }
-    },
-
-    // Create View
-    // Move this into a base view object
-    createView: {
-        value: function() {
-            var ifr = document.createElement("iframe");
-            ifr.id = "document_" + this._uuid;
-
-
-            ifr.style.border = "none";
-            ifr.style.background = "#FFF";
-            ifr.style.height = "100%";
-            ifr.style.width = "100%";
-
-            // TODO: Reable opacity to display only when done loading
-//            ifr.style.opacity = 0;
-
-            ifr.src = "js/document/templates/montage-web/index.html";
-            ifr.addEventListener("load", this.handleWebTemplateLoad.bind(this), true);
-
-            return document.getElementById("iframeContainer").appendChild(ifr);
-        }
-    },
-
-    handleWebTemplateLoad: {
-        value: function(event) {
-            //TODO: Remove, also for prototyping
-            this.application.ninja.documentController._hackRootFlag = true;
-
-
-            //TODO: Clean up, using for prototyping save
-//            this._templateDocument = {};
-//            this._templateDocument.html = this.iframe.contentWindow.document;
-//            this._templateDocument.body =
-
-            this._window = this.iframe.contentWindow;
-            this._document = this.iframe.contentWindow.document;
-            this.documentRoot = this.iframe.contentWindow.document.body;
-
-            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('data-ninja-template', 'true');
-                }
-            }
-
-            // TODO: We don't need this anymore -> need to setup the main container still
-            //Adding a handler for the main user document reel to finish loading
-//            this.documentRoot.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]);
-            }
-            */
-
-            setTimeout(function () {
-
-                ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-                ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-                ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-                if(this._document.styleSheets.length) {
-                    //Checking all styleSheets in document
-                    for (var i in this._document.styleSheets) {
-                        //If rules are null, assuming cross-origin issue
-                        if(this._document.styleSheets[i].rules === null) {
-                            //TODO: Revisit URLs and URI creation logic, very hack right now
-                            var fileUri, cssUrl, cssData, query, prefixUrl, fileCouldDirUrl, docRootUrl;
-                            //
-                            docRootUrl = this.application.ninja.coreIoApi.rootUrl+escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/'));
-                            //TODO: Parse out relative URLs and map them to absolute
-                            if (this._document.styleSheets[i].href.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) {
-                                //
-                                cssUrl = this._document.styleSheets[i].href.split(this.application.ninja.coreIoApi.rootUrl)[1];
-                                fileUri = this.application.ninja.coreIoApi.cloudData.root+cssUrl;
-                                //TODO: Add error handling for reading file
-                                cssData = this.application.ninja.coreIoApi.readFile({uri: fileUri});
-                                //
-                                var tag = this.iframe.contentWindow.document.createElement('style');
-                                tag.setAttribute('type', 'text/css');
-                                tag.setAttribute('data-ninja-uri', fileUri);
-                                tag.setAttribute('data-ninja-file-url', cssUrl);
-                                tag.setAttribute('data-ninja-file-read-only', JSON.parse(this.application.ninja.coreIoApi.isFileWritable({uri: fileUri}).content).readOnly);
-                                tag.setAttribute('data-ninja-file-name', cssUrl.split('/')[cssUrl.split('/').length-1]);
-                                //Copying attributes to maintain same properties as the <link>
-                                for (var n in this._document.styleSheets[i].ownerNode.attributes) {
+    ////////////////////////////////////////////////////////////////////
+        //