4 files changed, 72 insertions, 40 deletions

diff --git a/js/document/document-html.js b/js/document/document-html.js
index 33a41a8e..c9acd2e0 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -68,6 +68,8 @@ exports.HtmlDocument = Montage.create(Component, {
                 if (this.model.views.design.initialize(this.model.parentContainer)) {
                         //Hiding iFrame, just initiliazing
                         this.model.views.design.hide();
+                        //Setting the iFrame property for reference in helper class
+                        this.model.webGlHelper.iframe = this.model.views.design.iframe;
                 } else {
                         //ERROR: Design View not initialized
                 }
@@ -82,7 +84,7 @@ exports.HtmlDocument = Montage.create(Component, {
                 this.model.views.design.iframe.style.opacity = 0;
                 this.model.views.design.content = this.model.file.content;
                 //TODO: Improve reference (probably through binding values)
-                this.model.views.design.model = this.model;
+                this.model.views.design._webGlHelper = this.model.webGlHelper;
                 //Rendering design view, using observers to know when template is ready
                 this.model.views.design.render(function () {
                         //Adding observer to know when template is ready
diff --git a/js/document/models/base.js b/js/document/models/base.js
index 0957145a..a3644815 100755
--- a/js/document/models/base.js
+++ b/js/document/models/base.js
@@ -65,7 +65,8 @@ exports.BaseDocumentModel = Montage.create(Component, {
     _selection: {
         value: []
     },
-
+    ////////////////////////////////////////////////////////////////////
+    //
     selection: {
         get: function() {
             return this._selection;
@@ -134,20 +135,22 @@ exports.BaseDocumentModel = Montage.create(Component, {
         }
     },
     ////////////////////////////////////////////////////////////////////
-        //
+        //Gets all stylesheets in document
         getStyleSheets: {
                 value: function () {
-                        //
+                        //Array to store styles (style and link tags)
                         var styles = [];
-                //
+                //Looping through document sytles
                 for (var k in this.views.design.iframe.contentWindow.document.styleSheets) {
+                        //Check for styles to has proper propeties
                         if (this.views.design.iframe.contentWindow.document.styleSheets[k].ownerNode && this.views.design.iframe.contentWindow.document.styleSheets[k].ownerNode.getAttribute) {
+                                //Check for ninja-template styles, if so, exclude
                         if (this.views.design.iframe.contentWindow.document.styleSheets[k].ownerNode.getAttribute('data-ninja-template') === null) {
                                 styles.push(this.views.design.iframe.contentWindow.document.styleSheets[k]);
                         }
                 }
                 }
-                //
+                //Returning filtered results
                 return styles;
                 }
         },
@@ -155,7 +158,7 @@ exports.BaseDocumentModel = Montage.create(Component, {
         //
         save: {
         value: function (callback, libCopyCallback) {
-                //
+                //TODO: Implement on demand logic
                 if (this.needsSave) {
                         //Save
                 } else {
@@ -184,7 +187,7 @@ exports.BaseDocumentModel = Montage.create(Component, {
         //
         saveAll: {
         value: function (callback, libCopyCallback) {
-                //
+                //TODO: Implement on demand logic
                 if (this.needsSave) {
                         //Save
                 } else {
@@ -214,47 +217,49 @@ exports.BaseDocumentModel = Montage.create(Component, {
         //
         saveAs: {
         value: function (callback) {
-                //
+                //TODO: Implement on demand logic
                 if (this.needsSave) {
                         //Save current file on memory
                 } else {
                         //Copy file from disk
                 }
+                //TODO: Add functionality
         }
     },
     ////////////////////////////////////////////////////////////////////
         //
         handleSaved: {
                 value: function (result) {
-                        //
+                        //Checking for success code in save
                         if (result.status === 204) {
+                                //Clearing flag with successful save
                                 this.model.needsSave = false;
                         }
-                        //
+                        //Making callback call if specifed with results of operation
                         if (this.callback) this.callback(result);
                 }
         },
     ////////////////////////////////////////////////////////////////////
-        //
+        //TODO: Implement better logic to include different views on single document
         close: {
         value: function (view, callback) {
                 //Outcome of close (pending on save logic)
                 var success;
                 //
                 if (this.needsSave) {
-                        //Prompt user to save of lose data
+                        //TODO: Prompt user to save or lose data
                 } else {
                         //Close file
                         success = true;
                 }
-                //
+                //Checking for view mode to close
                 if (this.views.design && (!view || view === 'design')) {
-                        //
+                        //TODO: Create a destroy method, this is messy
+                        this.views.design.pauseAndStopVideos();
                         this.parentContainer.removeChild(this.views.design.iframe);
-                this.views.design.pauseAndStopVideos();
                         this.views.design = null;
                 }
-                //
+                //Returning result of operation
                 return success;
         }
     }
diff --git a/js/document/models/html.js b/js/document/models/html.js
index 9aa0d27e..0f88229d 100755
--- a/js/document/models/html.js
+++ b/js/document/models/html.js
@@ -40,22 +40,32 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, {
     scrollLeft: {
         value: null
     },
-
+    ////////////////////////////////////////////////////////////////////
+    //
     scrollTop: {
         value: null
     },
-
+    ////////////////////////////////////////////////////////////////////
+    //
     userContentLeft: {
         value: null
     },
-
+    ////////////////////////////////////////////////////////////////////
+    //
     userContentTop: {
         value: null
     },
     ////////////////////////////////////////////////////////////////////
-        //
+        //TODO: Convert to bindings
+    documentRoot: {
+        get: function() {return this.views.design._documentRoot;},
+        set: function(value) {this.views.design._documentRoot = value;}
+    },
+    ////////////////////////////////////////////////////////////////////
+        //TODO: Convert to bindings
         baseHref: {
-                value: null
+                get: function() {return this.views.design._baseHref;},
+        set: function(value) {this.views.design._baseHref = value;}
         },
     ////////////////////////////////////////////////////////////////////
         //
@@ -67,11 +77,6 @@ exports.HtmlDocumentModel = Montage.create(BaseDocumentModel, {
     userComponents: {
         value: {}
     },
-    ////////////////////////////////////////////////////////////////////
-        //
-    documentRoot: {
-        value: null
-    },
         ////////////////////////////////////////////////////////////////////
         //Add a reference to a component instance to the userComponents hash using the element UUID
     setComponentInstance: {
diff --git a/js/document/views/design.js b/js/document/views/design.js
index f7fbf3c5..53590944 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -52,11 +52,6 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {