From e09e4a8e24e5daf899d24314d0ffc218bbb2a97d Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Fri, 1 Jun 2012 11:51:16 -0700
Subject: Fixing Google Map component

Pulled in from components branch.
---
 node_modules/montage-google/map.reel/map.js | 82 ++++++++++++++++-------------
 1 file changed, 46 insertions(+), 36 deletions(-)

diff --git a/node_modules/montage-google/map.reel/map.js b/node_modules/montage-google/map.reel/map.js
index fc104df5..879a80d4 100644
--- a/node_modules/montage-google/map.reel/map.js
+++ b/node_modules/montage-google/map.reel/map.js
@@ -20,8 +20,9 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
     didCreate: {
         value: function() {
             var self = this;
+
+            this._latLng  = this.defaultLatLng;
             window.initialize = function initialize() {
-                console.log('google maps api loaded');
                 self._mapLoaded = true;
                 self._geoCoder = new google.maps.Geocoder();
                 self.needsDraw = true;
@@ -32,7 +33,10 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
     _geoCoder: {value: null},
 
     // HTMLElement to load the Map into
-    mapEl: {value: null},
+    mapEl: {
+        serializable: true,
+        value: null
+    },
 
     _mapLoaded: {
         enumerable: false,
@@ -49,9 +53,9 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
     },
 
     _latLng: {
-        value: this.defaultLatLng,
-        distinct: true
+        value: null
     },
+
     latLng: {
         get: function() {
             return this._latLng;
@@ -67,6 +71,7 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
 
     // {lat, lon} Or a String representing the location (eg: Paris, France)
     center: {
+        serializable: true,
         get: function() {
             return this._center;
         },
@@ -78,10 +83,12 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
 
                     if(String.isString(value)) {
                         // geocode
+                        self.LatLng = null;
                         geocoder.geocode( { 'address': value}, function(results, status) {
                             if (status == google.maps.GeocoderStatus.OK) {
                                 var loc = results[0].geometry.location;
                                 self.latLng = {lat: loc.lat(), lng: loc.lng()};
+                                self.category = self._category;
                             } else {
                                 console.log('Geocode was not successful : ' + status);
                             }
@@ -101,15 +108,17 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
     },
 
     category: {
+        serializable: true,
         get: function() {
             return this._category;
         },
         set: function(value) {
-            console.log('category set: ' + value);
             if(value) {
                 this._category = value;
-                this._getPlaces(this._category);
-                this.needsDraw = true;
+                if (this._mapLoaded && this.latLng) {
+                    this._getPlaces(this._category);
+                    this.needsDraw = true;
+                }
             }
         }
     },
@@ -159,12 +168,12 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
             }
             var service = new google.maps.places.PlacesService(this._map);
             service.search(request, function(results, status) {
-                console.log('got places for ', self.category, status, results);
                 if (status == google.maps.places.PlacesServiceStatus.OK) {
                     self._places = results;
                 } else {
                     self._places = [];
                 }
+                self.needsDraw = true;
             });
         }
     },
@@ -252,35 +261,36 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
                     };
 
                     this._map = new window.google.maps.Map(this.mapEl, myOptions);
-                 } else {
-                      var map = this._map;
-                      map.setZoom(10);
-                      var latLng = new window.google.maps.LatLng(latLng.lat, latLng.lng);
-                      map.setCenter(latLng);
-                      var marker = new google.maps.Marker({
-                          map: map,
-                          position: latLng
-                      });
-
-                      var places = this._places;
-                      if(places && places.length > 0) {
-                          map.setZoom(13);
-                          this._removeAllMarkers();
-                          for (var i = 0; i < places.length; i++) {
-                              this._createMarker(places[i]);
-                          }
-                      }
-
-                      if(this.traffic === true) {
-                          this.trafficLayer = new google.maps.TrafficLayer();
-                          this.trafficLayer.setMap(map);
-                      } else {
-                          if(this.trafficLayer) {
-                              this.trafficLayer.setMap(null);
-                          }
-                      }
+                    this.center = this._center;
+                    this.category = this._category;
+                 }
+
+                 var map = this._map;
+                 map.setZoom(10);
+                 var latLng = new window.google.maps.LatLng(latLng.lat, latLng.lng);
+                 map.setCenter(latLng);
+                 var marker = new google.maps.Marker({
+                     map: map,
+                     position: latLng
+                 });
+
+                 var places = this._places;
+                 if(places && places.length > 0) {
+                     map.setZoom(13);
+                     this._removeAllMarkers();
+                     for (var i = 0; i < places.length; i++) {
+                         this._createMarker(places[i]);
+                     }
                  }
 
+                 if(this.traffic === true) {
+                     this.trafficLayer = new google.maps.TrafficLayer();
+                     this.trafficLayer.setMap(map);
+                 } else {
+                     if(this.trafficLayer) {
+                         this.trafficLayer.setMap(null);
+                     }
+                 }
             }
 
               //window.google.maps.event.addDomListener(window, 'load', initialize);
@@ -294,4 +304,4 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
             serializer.set("center", this.center);
         }
     }
-});
+});
\ No newline at end of file
-- 
cgit v1.2.3


From 86837d69186bc4d1d6f54fc893c523de0972a0b9 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Fri, 1 Jun 2012 11:53:57 -0700
Subject: Creating template mediator class

This is to simplify code, more to be changed and added.
---
 js/document/mediators/template.js | 637 +++++++++++++++++++++++++++++++++++-
 js/document/views/design.js       |   6 +-
 js/mediators/io-mediator.js       | 658 +-------------------------------------
 3 files changed, 646 insertions(+), 655 deletions(-)

diff --git a/js/document/mediators/template.js b/js/document/mediators/template.js
index c5b45ba1..86055a1f 100755
--- a/js/document/mediators/template.js
+++ b/js/document/mediators/template.js
@@ -6,16 +6,647 @@ 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;
+var Montage = 			require("montage/core/core").Montage,
+	Component = 		require("montage/ui/component").Component,
+	TemplateCreator = 	require("node_modules/tools/template/template-creator").TemplateCreator;
 ////////////////////////////////////////////////////////////////////////
 //	
 exports.TemplateDocumentMediator = Montage.create(Component, {
 	////////////////////////////////////////////////////////////////////
 	//
 	hasTemplate: {
-		enumerable: false,
         value: false
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    getAppTemplatesUrlRegEx: {
+        value: function () {
+            var regex = new RegExp(chrome.extension.getURL(this.application.ninja.currentDocument.model.views.design.iframe.src.split(chrome.extension.getURL('/'))[1]).replace(/\//gi, '\\\/'), 'gi');
+            return regex;
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    getDataDirectory: {
+    	value: function (path) {
+    		//TODO: Implement user overwrite
+        	return this._getUserDirectory(path+'data/');
+    	}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    getNinjaDirectory: {
+    	value: function (path) {
+    		//TODO: Implement user overwrite
+    		return this._getUserDirectory(this.getDataDirectory(path)+'ninja/');
+    	}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    getCanvasDirectory: {
+    	value: function (path) {
+    		//TODO: Implement user overwrite
+    		return this._getUserDirectory(this.getNinjaDirectory(path)+'canvas/');
+    	}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    _getUserDirectory: {
+    	value: function (path) {
+    		//Checking for data directory
+            var check = this.application.ninja.coreIoApi.fileExists({uri: path}), directory;
+            //Creating directory if doesn't exists
+            switch (check.status) {
+            	case 204: //Exists
+            		directory = path;
+            		break;
+            	case 404: //Doesn't exists
+            		directory = this.application.ninja.coreIoApi.createDirectory({uri: path});
+            		//Checking for success
+            		if (directory.status === 201) {
+            			directory = path;
+            		} else {
+            			//Error
+            			directory = null;
+            		}
+            		break;
+            	default: //Error
+            		directory = null;
+            		break;
+            }
+            //Returning the path to the directory on disk (null for any error)
+            return directory;
+    	}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    parseHtmlToNinjaTemplate: {
+        value: function (html) {
+            //Creating temp object to mimic HTML
+            var doc = window.document.implementation.createHTMLDocument(), template;
+            //Setting content to temp
+            doc.getElementsByTagName('html')[0].innerHTML = html;
+            //Creating return object
+            return {head: doc.head.innerHTML, body: doc.body.innerHTML, document: doc};
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //TODO: Expand to allow more templates, clean up variables
+    parseNinjaTemplateToHtml: {
+        value: function (template, ninjaWrapper) {
+        	//TODO: Improve reference for rootUrl
+            var regexRootUrl,
+            	rootUrl = this.application.ninja.coreIoApi.rootUrl + escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1])),
+            	mjsCreator = template.mjsTemplateCreator.create(),
+            	mJsSerialization,
+            	toremovetags = [],
+            	presentNodes,
+            	montageTemplate;
+            //Creating instance of template creator
+            montageTemplate = mjsCreator.initWithDocument(template.document);
+            //Setting up expression for parsing URLs
+            regexRootUrl = new RegExp(rootUrl.replace(/\//gi, '\\\/'), 'gi');
+            //Injecting head and body into old document
+            if (montageTemplate._ownerSerialization.length > 0) {
+            	template.file.content.document.head.innerHTML = montageTemplate._document.head.innerHTML.replace(regexRootUrl, '');
+	            template.file.content.document.body.innerHTML = montageTemplate._document.body.innerHTML.replace(regexRootUrl, '');
+	            //
+	            mJsSerialization = montageTemplate._ownerSerialization;
+            } else {
+            	template.file.content.document.head.innerHTML = template.head.innerHTML.replace(regexRootUrl, '');
+	            template.file.content.document.body.innerHTML = template.body.innerHTML.replace(regexRootUrl, '');
+            }
+            //Copying attributes to maintain same properties as the <body>
+			for (var n in template.body.attributes) {
+				if (template.body.attributes[n].value) {
+					//
+					template.file.content.document.body.setAttribute(template.body.attributes[n].name, template.body.attributes[n].value);
+				}				
+			}
+            
+            
+            
+            //TODO: Add attribute copying for <HEAD> and <HTML>
+            
+            
+            
+            //Getting list of current nodes (Ninja DOM)
+            presentNodes = template.file.content.document.getElementsByTagName('*');
+            //Looping through nodes to determine origin and removing if not inserted by Ninja
+            for (var n in presentNodes) {
+	    		if (presentNodes[n].getAttribute && presentNodes[n].getAttribute('data-ninja-node') === null) {
+		    	 	toremovetags.push(presentNodes[n]);	
+	    		} else if (presentNodes[n].getAttribute && presentNodes[n].getAttribute('data-ninja-node') !== null) {
+	    			//Removing attribute
+		    		presentNodes[n].removeAttribute('data-ninja-node');
+	    		}
+    		}
+            //Getting all CSS (style or link) tags
+            var styletags = template.file.content.document.getElementsByTagName('style'),
+    			linktags = template.file.content.document.getElementsByTagName('link'),
+    			njtemplatetags = template.file.content.document.querySelectorAll('[data-ninja-template]');
+    		
+    		//////////////////////////////////////////////////
+    		//TODO: Remove, temp hack, this is to be fixed by Montage
+    		var basetags = template.file.content.document.getElementsByTagName('base');
+    		for (var g in basetags) {
+    			if (basetags[g].getAttribute && basetags[g].href && basetags[g].href.indexOf('chrome-extension://') !== -1) toremovetags.push(basetags[g]);
+    		}
+    		//////////////////////////////////////////////////
+    		
+    		//Adding to tags to be removed form template
+    		for (var f in njtemplatetags) {
+    			if (njtemplatetags[f].getAttribute) toremovetags.push(njtemplatetags[f]);
+    		}
+            //Getting styles tags to be removed from document
+            if (styletags.length) {
+                for (var j = 0; j < styletags.length; j++) {
+                    if (styletags[j].getAttribute) {
+                        if (styletags[j].getAttribute('data-ninja-uri') !== null && !styletags[j].getAttribute('data-ninja-template')) {
+                            toremovetags.push(styletags[j]);
+                        } else if (styletags[j].getAttribute('data-ninja-external-url')) {
+                            toremovetags.push(styletags[j]);
+                        }
+                    }
+                }
+            }
+            //Removing styles tags from document
+            for (var h = 0; toremovetags[h]; h++) {
+                try {
+                    //Checking head first
+                    template.file.content.document.head.removeChild(toremovetags[h]);
+                } catch (e) {
+                    
+                }
+                try {
+                        //Checking body if not in head
+                        template.file.content.document.body.removeChild(toremovetags[h]);
+                    } catch (e) {
+                        //Error, not found!
+                    }
+            }
+            //Removing disabled tags from tags that were not originally disabled by user (Ninja enables all)
+            for (var l in linktags) {
+                if (linktags[l].getAttribute && linktags[l].getAttribute('disabled')) {//TODO: Use querySelectorAll
+                    for (var p = 0; toremovetags[p]; p++) {
+                        if (toremovetags[p].getAttribute('href') === linktags[l].getAttribute('href')) {
+                            if (!toremovetags[p].getAttribute('data-ninja-disabled')) {
+                                linktags[l].removeAttribute('disabled');
+                            }
+                        }
+                    }
+                }
+            }
+            //Checking for type of save: styles = <style> only | css = <style> and <link> (all CSS)
+            if (template.styles) {
+                //Getting all style tags
+                var styleCounter = 0,
+    				docStyles = template.file.content.document.getElementsByTagName('style');
+                //Looping through all style tags
+                for (var i in template.styles) {
+                    if (template.styles[i].ownerNode) {
+                        if (template.styles[i].ownerNode.getAttribute) {
+                            //Checking for node not to be loaded from file
+                            if (template.styles[i].ownerNode.getAttribute('data-ninja-uri') === null && !template.styles[i].ownerNode.getAttribute('data-ninja-template') && !template.styles[i].ownerNode.getAttribute('data-ninja-external-url')) {
+                                if (docStyles[styleCounter]) {
+                                    //Inseting data from rules array into tag as string
+                                    docStyles[styleCounter].innerHTML = this.getCssFromRules(template.styles[i].cssRules);
+                                    //Syncing <style> tags count since it might be mixed with <link>
+                                    styleCounter++;
+                                }
+                            }
+                        }
+                    }
+                }
+            } else if (template.css) {
+                //Getting all style and link tags
+                var styleCounter = 0,
+    				docStyles = template.file.content.document.getElementsByTagName('style'),
+    				docLinks = template.file.content.document.getElementsByTagName('link');
+                //Removing Ninja Data Attributes
+                for (var n in docLinks) {
+                    if (docLinks[n].attributes) {
+                        for (var m in docLinks[n].attributes) {
+                            if (docLinks[n].attributes[m].name && docLinks[n].attributes[m].name.indexOf('data-ninja') !== -1) {
+                                docLinks[n].removeAttribute(docLinks[n].attributes[m].name);
+                            }
+                        }
+                    }
+                }
+                //
+                for (var i in template.css) {
+                    if (template.css[i].ownerNode) {
+                        if (template.css[i].ownerNode.getAttribute) {
+                            if (template.css[i].ownerNode.getAttribute('data-ninja-uri') === null && !template.css[i].ownerNode.getAttribute('data-ninja-template')) {//TODO: Use querySelectorAll
+                                //Inseting data from rules array into <style> as string
+                                if (docStyles[styleCounter] && !template.css[i].ownerNode.getAttribute('data-ninja-external-url') && template.css[i].ownerNode.getAttribute('data-ninja-node')) {
+                                    docStyles[styleCounter].innerHTML = this.getCssFromRules(template.css[i].cssRules);
+                                    styleCounter++;
+                                }
+                            } else if (!template.css[i].ownerNode.getAttribute('data-ninja-template')) {
+                                //Checking for attributes to be added to tag upon saving
+                                for (var k in docLinks) {
+                                    if (docLinks[k].getAttribute) {
+                                        if (docLinks[k].getAttribute('href') && ('/' + docLinks[k].getAttribute('href')) === template.css[i].ownerNode.getAttribute('data-ninja-file-url')) {
+                                            for (var l in template.css[i].ownerNode.attributes) {
+                                                if (template.css[i].ownerNode.attributes[l].value) {
+                                                    if (template.css[i].ownerNode.attributes[l].name.indexOf('data-ninja') != -1) {
+                                                        //Ninja attribute...
+                                                    } else {
+                                                        docLinks[k].setAttribute(template.css[i].ownerNode.attributes[l].name, template.css[i].ownerNode.attributes[l].value);
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+
+                                ///////////////////////////////////////////////////////////////////////////////////////////
+                                ///////////////////////////////////////////////////////////////////////////////////////////
+
+
+                                var cleanedCss,
+    								dirtyCss = this.getCssFromRules(template.css[i].cssRules),
+    								fileUrl = template.css[i].ownerNode.getAttribute('data-ninja-file-url'),
+    								fileRootUrl = this.application.ninja.coreIoApi.rootUrl + fileUrl.split(fileUrl.split('/')[fileUrl.split('/').length - 1])[0],
+    								cleanedCss = dirtyCss.replace(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi, parseNinjaUrl.bind(this));
+
+                                function parseNinjaUrl(url) {
+                                    if (url.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) {
+                                        return this.getUrlfromNinjaUrl(url, fileRootUrl, fileUrl);
+                                    } else {
+                                        return url;
+                                    }
+                                }
+
+                                ///////////////////////////////////////////////////////////////////////////////////////////
+                                ///////////////////////////////////////////////////////////////////////////////////////////
+
+
+
+
+                                //Saving data from rules array converted to string into <link> file
+                                var save = this.application.ninja.ioMediator.fio.saveFile({ uri: template.css[i].ownerNode.getAttribute('data-ninja-uri'), contents: cleanedCss });
+                                //TODO: Add error handling for saving files
+                            }
+                        }
+                    }
+                }
+            }
+            //
+            var matchingtags = [], scripts = template.file.content.document.getElementsByTagName('script'), webgltag, webgllibtag, webglrdgetag, mjstag, mjslibtag;
+           	//this.getDataDirectory(template.file.root)
+           	//this.getNinjaDirectory(template.file.root)
+            //
+            for (var i in scripts) {
+            	if (scripts[i].getAttribute) {
+               		if (scripts[i].getAttribute('data-ninja-canvas') !== null) {//TODO: Use querySelectorAll
+               			matchingtags.push(scripts[i]);
+                    }
+                    if (scripts[i].getAttribute('data-ninja-canvas-lib') !== null) {
+                        webgllibtag = scripts[i]; // TODO: Add logic to delete unneccesary tags
+                    }
+                    if (scripts[i].getAttribute('data-ninja-canvas-rdge') !== null) {
+               	        webglrdgetag = scripts[i]; // TODO: Add logic to delete unneccesary tags
+                    }
+                    if (scripts[i].getAttribute('type') === 'text/montage-serialization') {
+                        mjstag = scripts[i]; // TODO: Add logic to delete unneccesary tags
+                    }
+                    if (scripts[i].getAttribute('data-mjs-lib') !== null) {
+                     	mjslibtag = scripts[i]; // TODO: Add logic to delete unneccesary tags
+                    }
+                }
+            }
+            //Checking for webGL elements in document
+            if (template.webgl && template.webgl.length > 1) {//TODO: Should be length 0, hack for a temp fix
+                var rdgeDirName, rdgeVersion, cvsDataDir = this.getCanvasDirectory(template.file.root), fileCvsDir, fileCvsDirAppend, cvsDirCounter = 1;
+                //
+                if (cvsDataDir && !matchingtags.length) {
+                	fileCvsDir = cvsDataDir+template.file.name.split('.'+template.file.extension)[0];
+                	if (!this._getUserDirectory(fileCvsDir)) {
+                		fileCvsDirAppend = fileCvsDir+cvsDirCounter;
+                		while (!this._getUserDirectory(fileCvsDirAppend)) {
+                			fileCvsDirAppend = fileCvsDir+(cvsDirCounter++);
+                		}
+                	}
+                	//TODO: Allow user overwrite
+                	fileCvsDir += '/';
+                }
+                //Copy webGL library if needed
+                for (var i in this.application.ninja.coreIoApi.ninjaLibrary.libs) {
+                    //Checking for RDGE library to be available
+                    if (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name === 'RDGE') {
+                        rdgeDirName = (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name + this.application.ninja.coreIoApi.ninjaLibrary.libs[i].version).toLowerCase();
+                        rdgeVersion = this.application.ninja.coreIoApi.ninjaLibrary.libs[i].version;
+                        this.application.ninja.coreIoApi.ninjaLibrary.copyLibToCloud(template.file.root, rdgeDirName);
+                    } else {
+                        //TODO: Error handle no available library to copy
+                    }
+                }
+                //
+                if (matchingtags.length) {
+                    if (matchingtags.length === 1) {
+                        webgltag = matchingtags[0];
+                    } else {
+                        //TODO: Add logic to handle multiple tags, perhaps combine to one
+                        webgltag = matchingtags[matchingtags.length - 1]; //Saving all data to last one...
+                    }
+                }
+                //TODO: Add check for file needed
+                if (!webglrdgetag) {
+                    webglrdgetag = template.file.content.document.createElement('script');
+                    webglrdgetag.setAttribute('type', 'text/javascript');
+                    webglrdgetag.setAttribute('src', rdgeDirName + '/rdge-compiled.js');
+                    webglrdgetag.setAttribute('data-ninja-canvas-rdge', 'true');
+                    if (ninjaWrapper) {
+                    	template.file.content.document.body.getElementsByTagName('ninja-content')[0].appendChild(webglrdgetag);
+                    } else {
+                    	template.file.content.document.head.appendChild(webglrdgetag);
+                    }
+                }
+                //
+                if (!webgllibtag) {
+                    webgllibtag = template.file.content.document.createElement('script');
+                    webgllibtag.setAttribute('type', 'text/javascript');
+                    webgllibtag.setAttribute('src', rdgeDirName + '/canvas-runtime.js');
+                    webgllibtag.setAttribute('data-ninja-canvas-lib', 'true');
+                    if (ninjaWrapper) {
+                    	template.file.content.document.body.getElementsByTagName('ninja-content')[0].appendChild(webgllibtag);
+                    } else {
+                    	template.file.content.document.head.appendChild(webgllibtag);
+                    }
+                }
+                //
+                if (!webgltag && !fileCvsDir) {
+                    webgltag = template.file.content.document.createElement('script');
+                    webgltag.setAttribute('data-ninja-canvas', 'true');
+                    if (ninjaWrapper) {
+                    	template.file.content.document.body.getElementsByTagName('ninja-content')[0].appendChild(webgltag);
+                    } else {
+	                    template.file.content.document.head.appendChild(webgltag);
+	                }
+                }
+                
+                //TODO: Decide if this should be over-writter or only written on creation
+                var rootElement = 'document.body'; //TODO: Set actual root element
+                
+                //TODO: This data should be saved to a JSON file eventually
+                var json = '\n({\n\t"version": "' + rdgeVersion + '",\n\t"directory": "' + rdgeDirName + '/",\n\t"data": [';
+                //Looping through data to create escaped array
+                for (var j = 0; template.webgl[j]; j++) {
+                    if (j === 0) {
+                    	//if (fileCvsDir) {
+                    	//	json += '\n\t\t\t"' + template.webgl[j] + '"';
+                    	//} else {
+                    		json += '\n\t\t\t"' + escape(template.webgl[j]) + '"';
+                    	//}
+                    } else {
+                    	//if (fileCvsDir) {
+                    	//	json += ',\n\t\t\t"' + template.webgl[j] + '"';
+                    	//} else {
+                    		json += ',\n\t\t\t"' + escape(template.webgl[j]) + '"';
+                    	//}
+                    }
+                }
+                //Closing array (make-shift JSON string to validate data in <script> tag)
+                json += '\n\t\t]\n})\n';
+                //Setting string in tag
+                if (fileCvsDir) {
+                	//
+                	var cvsDataFilePath = fileCvsDir+'data.json', cvsDataFileUrl, cvsDataFileCheck, cvsDataFileOperation;
+                	//
+                	cvsDataFileUrl = this.getNinjaPropUrlRedirect(cvsDataFilePath.split(this.application.ninja.coreIoApi.cloudData.root+'/')[1]),
+                	cvsDataFileCheck = this.application.ninja.coreIoApi.fileExists({uri: cvsDataFilePath}),
+                	//Setting the local path to the JSON file
+                	webgllibtag.setAttribute('data-ninja-canvas-json', this.application.ninja.coreIoApi.rootUrl+'/'+cvsDataFileUrl);
+                	webgllibtag.setAttribute('data-ninja-canvas-libpath', rdgeDirName);
+                	//
+                	if (cvsDataFileCheck.status === 404 || cvsDataFileCheck.status === 204) {
+                		//Saving file
+                		cvsDataFileOperation = this.application.ninja.ioMediator.fio.saveFile({uri: cvsDataFilePath, contents: json});
+                	} else {
+                		//Error
+                	}
+                	
+                	
+                } else {
+                	webgllibtag.setAttribute('data-ninja-canvas-libpath', rdgeDirName);
+                	webgltag.innerHTML = json;
+                }
+            }
+			//Checking for Montage
+			if (mJsSerialization) {
+				//Copy Montage library if needed
+                for (var i in this.application.ninja.coreIoApi.ninjaLibrary.libs) {
+                    //Checking for Montage library to be available
+                    if (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name === 'Montage') {
+                        mjsDirName = (this.application.ninja.coreIoApi.ninjaLibrary.libs[i].name + this.application.ninja.coreIoApi.ninjaLibrary.libs[i].version).toLowerCase();
+                        mjsVersion = this.application.ninja.coreIoApi.ninjaLibrary.libs[i].version;
+                        this.application.ninja.coreIoApi.ninjaLibrary.copyLibToCloud(template.file.root, mjsDirName);
+                        
+                        
+                        
+                        //TODO: Fix to allow no overwrite and nested locations
+                        var mjsCheck, mjsPath = template.file.root + 'package.json';
+                        mjsCheck = this.application.ninja.coreIoApi.fileExists({uri: mjsPath});
+                        //
+                        if (!mjsCheck || mjsCheck.status !== 204) {
+	                        var packjson = this.application.ninja.coreIoApi.createFile({ uri: mjsPath, contents: '{"mappings": {\n\t\t"montage": "' + mjsDirName + '/montage/",\n\t\t"montage-google": "' + mjsDirName + '/montage-google/"\n\t}\n}' });
+                        } else {
+                        	//Already exists
+                        }
+                        
+                        
+                        
+                    } else {
+                        //TODO: Error handle no available library to copy
+                    }
+                }
+                //
+                if (!mjslibtag) {
+                    mjslibtag = template.file.content.document.createElement('script');
+                    mjslibtag.setAttribute('type', 'text/javascript');
+                    mjslibtag.setAttribute('src', mjsDirName + '/montage/montage.js');
+                    mjslibtag.setAttribute('data-package', '.');
+                    mjslibtag.setAttribute('data-mjs-lib', 'true');
+                    if (ninjaWrapper) {
+                    	template.file.content.document.body.getElementsByTagName('ninja-content')[0].appendChild(mjslibtag);
+                    } else {
+                    	template.file.content.document.head.appendChild(mjslibtag);
+                    }
+                    
+                }
+                //
+                if (!mjstag) {
+                    mjstag = template.file.content.document.createElement('script');
+                    mjstag.setAttribute('type', 'text/montage-serialization');
+                    if (ninjaWrapper) {
+                    	template.file.content.document.body.getElementsByTagName('ninja-content')[0].appendChild(mjstag);
+                    } else {
+                    	template.file.content.document.head.appendChild(mjstag);
+                    }
+                    
+                }
+                //
+                mjstag.innerHTML = mJsSerialization;
+                mjsCreator = null;
+			}
+            //Cleaning URLs from HTML
+            var cleanHTML;
+            if (ninjaWrapper) {
+            	cleanHTML = template.file.content.document.body.innerHTML.replace(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi, parseNinjaRootUrl.bind(this));
+            } else {
+            	cleanHTML = template.file.content.document.documentElement.outerHTML.replace(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi, parseNinjaRootUrl.bind(this));
+      	    }
+            //
+            function parseNinjaRootUrl(url) {
+                if (url.indexOf(this.application.ninja.coreIoApi.rootUrl) !== -1) {
+                    return this.getUrlfromNinjaUrl(url, rootUrl, rootUrl.replace(new RegExp((this.application.ninja.coreIoApi.rootUrl).replace(/\//gi, '\\\/'), 'gi'), '') + 'file.ext');
+                } else {
+                    return url;
+                }
+            }
+            //
+            if (ninjaWrapper) {
+            	cleanHTML = cleanHTML.replace(/ninja-viewport/gi, 'div');
+            	cleanHTML = cleanHTML.replace(/ninja-content/gi, 'div');
+            }
+            //
+            return this.getPrettyHtml(cleanHTML.replace(this.getAppTemplatesUrlRegEx(), ''));
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    getUrlfromNinjaUrl: {
+        enumerable: false,
+        value: function (url, fileRootUrl, fileUrl) {
+            //
+            if (url.indexOf(fileRootUrl) !== -1) {
+                url = url.replace(new RegExp(fileRootUrl.replace(/\//gi, '\\\/'), 'gi'), '');
+            } else {
+                //TODO: Clean up vars
+                var assetsDirs = (url.replace(new RegExp((this.application.ninja.coreIoApi.rootUrl).replace(/\//gi, '\\\/'), 'gi'), '')).split('/');
+                var fileDirs = (fileUrl.split(fileUrl.split('/')[fileUrl.split('/').length - 1])[0]).split('/');
+                var counter = 0;
+                var path = '';
+                var newURL = '';
+                //
+                for (var p = 0; p < fileDirs.length - 1; p++) {
+                    if (fileDirs[p] === assetsDirs[p]) {
+                        counter++;
+                    }
+                }
+                //
+                for (var p = 0; p < (fileDirs.length - counter) - 1; p++) {
+                    path += '../';
+                }
+                //
+                for (var p = counter; p < assetsDirs.length; p++) {
+                    newURL += '/' + assetsDirs[p];
+                }
+                //
+                url = (path + newURL).replace(/\/\//gi, '/');
+            }
+            //
+            return url;
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    getDocRootUrl: {
+        value: function () {
+        	//TODO: Add support for model.baseHref (base tag)
+        	return this.application.ninja.coreIoApi.rootUrl + escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]).replace(/\/\//gi, '/'));
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    getNinjaPropUrlRedirect: {
+        enumerable: false,
+        value: function (prop/* , root */) {
+            //Checking for property value to not contain a full direct URL
+            if (!prop.match(/(\b(?:(?:https?|ftp|file|[A-Za-z]+):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$]))/gi)) {
+                //Checking for attributes and type of source
+                if (prop.indexOf('href') !== -1 || prop.indexOf('src') !== -1) {
+                    //From HTML attribute
+                    //if (root) {
+                    //prop = (root+prop).replace(/"([^"]*)"/gi, this.getNinjaUrlPrepend.bind(this));
+                    //} else {
+                    prop = prop.replace(/"([^"]*)"/gi, this.getNinjaUrlPrepend.bind(this));
+                    //}
+                } else if (prop.indexOf('url') !== -1) {
+                    //From CSS property
+                    //if (root) {
+                    //prop = (root+prop).replace(/[^()\\""\\'']+/g, cssUrlToNinjaUrl.bind(this));
+                    //} else {
+                    prop = prop.replace(/[^()\\""\\'']+/g, cssUrlToNinjaUrl.bind(this));
+                    //}
+                    function cssUrlToNinjaUrl(s) {
+                        if (s !== 'url') {
+                            s = this.getDocRootUrl() + s;
+                        }
+                        return s;
+                    }
+                }
+            }
+            return prop;
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    getNinjaUrlPrepend: {
+        value: function (url) {
+            if (url.indexOf('data:') !== -1) {
+                return url;
+            } else {
+                return '"' + this.getDocRootUrl() + url.replace(/\"/gi, '') + '"';
+            }
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //Method to return a string from CSS rules (to be saved to a file)
+    getCssFromRules: {
+        value: function (list) {
+            //Variable to store CSS definitions
+            var i, str, css = '';
+            //Looping through list
+            if (list && list.length > 0) {
+                //Adding each list item to string and also adding breaks
+                for (i = 0; list[i]; i++) {
+                    css += list[i].cssText;
+                }
+            }
+            //Returning the CSS string
+            return this.getPrettyCss(css.replace(this.getAppTemplatesUrlRegEx(), ''));
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    ////////////////////////////////////////////////////////////////////
+    //Pretty methods (minified)
+    /*
+    is-beautify javascript code courtesy of Einar Lielmanis:
+    Code from https://github.com/einars/js-beautify
+    License https://github.com/einars/js-beautify/blob/master/license.txt
+    Used with author's permission, as stated below
+		
+    Copyright (c) 2009 - 2011, Einar Lielmanis
+    Permission is hereby granted, free of charge, to any person
+    obtaining a copy of this software and associated documentation
+    files (the "Software"), to deal in the Software without
+    restriction, including without limitation the rights to use,
+    copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the
+    Software is furnished to do so, subject to the following
+    conditions:The above copyright notice and this permission notice shall be
+    included in all copies or substantial portions of the Software.
+    */
+    //For HTML, including any JS or CSS (single string/file)
+    getPrettyHtml: {
+        value: function (a, b) { function h() { this.pos = 0; this.token = ""; this.current_mode = "CONTENT"; this.tags = { parent: "parent1", parentcount: 1, parent1: "" }; this.tag_type = ""; this.token_text = this.last_token = this.last_text = this.token_type = ""; this.Utils = { whitespace: "\n\r\t ".split(""), single_token: "br,input,link,meta,!doctype,basefont,base,area,hr,wbr,param,img,isindex,?xml,embed".split(","), extra_liners: "head,body,/html".split(","), in_array: function (a, b) { for (var c = 0; c < b.length; c++) { if (a === b[c]) { return true } } return false } }; this.get_content = function () { var a = ""; var b = []; var c = false; while (this.input.charAt(this.pos) !== "<") { if (this.pos >= this.input.length) { return b.length ? b.join("") : ["", "TK_EOF"] } a = this.input.charAt(this.pos); this.pos++; this.line_char_count++; if (this.Utils.in_array(a, this.Utils.whitespace)) { if (b.length) { c = true } this.line_char_count--; continue } else if (c) { if (this.line_char_count >= this.max_char) { b.push("\n"); for (var d = 0; d < this.indent_level; d++) { b.push(this.indent_string) } this.line_char_count = 0 } else { b.push(" "); this.line_char_count++ } c = false } b.push(a) } return b.length ? b.join("") : "" }; this.get_contents_to = function (a) { if (this.pos == this.input.length) { return ["", "TK_EOF"] } var b = ""; var c = ""; var d = new RegExp("</" + a + "\\s*>", "igm"); d.lastIndex = this.pos; var e = d.exec(this.input); var f = e ? e.index : this.input.length; if (this.pos < f) { c = this.input.substring(this.pos, f); this.pos = f } return c }; this.record_tag = function (a) { if (this.tags[a + "count"]) { this.tags[a + "count"]++; this.tags[a + this.tags[a + "count"]] = this.indent_level } else { this.tags[a + "count"] = 1; this.tags[a + this.tags[a + "count"]] = this.indent_level } this.tags[a + this.tags[a + "count"] + "parent"] = this.tags.parent; this.tags.parent = a + this.tags[a + "count"] }; this.retrieve_tag = function (a) { if (this.tags[a + "count"]) { var b = this.tags.parent; while (b) { if (a + this.tags[a + "count"] === b) { break } b = this.tags[b + "parent"] } if (b) { this.indent_level = this.tags[a + this.tags[a + "count"]]; this.tags.parent = this.tags[b + "parent"] } delete this.tags[a + this.tags[a + "count"] + "parent"]; delete this.tags[a + this.tags[a + "count"]]; if (this.tags[a + "count"] == 1) { delete this.tags[a + "count"] } else { this.tags[a + "count"]-- } } }; this.get_tag = function () { var a = ""; var b = []; var c = false; do { if (this.pos >= this.input.length) { return b.length ? b.join("") : ["", "TK_EOF"] } a = this.input.charAt(this.pos); this.pos++; this.line_char_count++; if (this.Utils.in_array(a, this.Utils.whitespace)) { c = true; this.line_char_count--; continue } if (a === "'" || a === '"') { if (!b[1] || b[1] !== "!") { a += this.get_unformatted(a); c = true } } if (a === "=") { c = false } if (b.length && b[b.length - 1] !== "=" && a !== ">" && c) { if (this.line_char_count >= this.max_char) { this.print_newline(false, b); this.line_char_count = 0 } else { b.push(" "); this.line_char_count++ } c = false } b.push(a) } while (a !== ">"); var d = b.join(""); var e; if (d.indexOf(" ") != -1) { e = d.indexOf(" ") } else { e = d.indexOf(">") } var f = d.substring(1, e).toLowerCase(); if (d.charAt(d.length - 2) === "/" || this.Utils.in_array(f, this.Utils.single_token)) { this.tag_type = "SINGLE" } else if (f === "script") { this.record_tag(f); this.tag_type = "SCRIPT" } else if (f === "style") { this.record_tag(f); this.tag_type = "STYLE" } else if (this.Utils.in_array(f, unformatted)) { var g = this.get_unformatted("</" + f + ">", d); b.push(g); this.tag_type = "SINGLE" } else if (f.charAt(0) === "!") { if (f.indexOf("[if") != -1) { if (d.indexOf("!IE") != -1) { var g = this.get_unformatted("-->", d); b.push(g) } this.tag_type = "START" } else if (f.indexOf("[endif") != -1) { this.tag_type = "END"; this.unindent() } else if (f.indexOf("[cdata[") != -1) { var g = this.get_unformatted("]]>", d); b.push(g); this.tag_type = "SINGLE" } else { var g = this.get_unformatted("-->", d); b.push(g); this.tag_type = "SINGLE" } } else { if (f.charAt(0) === "/") { this.retrieve_tag(f.substring(1)); this.tag_type = "END" } else { this.record_tag(f); this.tag_type = "START" } if (this.Utils.in_array(f, this.Utils.extra_liners)) { this.print_newline(true, this.output) } } return b.join("") }; this.get_unformatted = function (a, b) { if (b && b.indexOf(a) != -1) { return "" } var c = ""; var d = ""; var e = true; do { if (this.pos >= this.input.length) { return d } c = this.input.charAt(this.pos); this.pos++; if (this.Utils.in_array(c, this.Utils.whitespace)) { if (!e) { this.line_char_count--; continue } if (c === "\n" || c === "\r") { d += "\n"; this.line_char_count = 0; continue } } d += c; this.line_char_count++; e = true } while (d.indexOf(a) == -1); return d }; this.get_token = function () { var a; if (this.last_token === "TK_TAG_SCRIPT" || this.last_token === "TK_TAG_STYLE") { var b = this.last_token.substr(7); a = this.get_contents_to(b); if (typeof a !== "string") { return a } return [a, "TK_" + b] } if (this.current_mode === "CONTENT") { a = this.get_content(); if (typeof a !== "string") { return a } else { return [a, "TK_CONTENT"] } } if (this.current_mode === "TAG") { a = this.get_tag(); if (typeof a !== "string") { return a } else { var c = "TK_TAG_" + this.tag_type; return [a, c] } } }; this.get_full_indent = function (a) { a = this.indent_level + a || 0; if (a < 1) return ""; return Array(a + 1).join(this.indent_string) }; this.printer = function (a, b, c, d, e) { this.input = a || ""; this.output = []; this.indent_character = b; this.indent_string = ""; this.indent_size = c; this.brace_style = e; this.indent_level = 0; this.max_char = d; this.line_char_count = 0; for (var f = 0; f < this.indent_size; f++) { this.indent_string += this.indent_character } this.print_newline = function (a, b) { this.line_char_count = 0; if (!b || !b.length) { return } if (!a) { while (this.Utils.in_array(b[b.length - 1], this.Utils.whitespace)) { b.pop() } } b.push("\n"); for (var c = 0; c < this.indent_level; c++) { b.push(this.indent_string) } }; this.print_token = function (a) { this.output.push(a) }; this.indent = function () { this.indent_level++ }; this.unindent = function () { if (this.indent_level > 0) { this.indent_level-- } } }; return this } var c, d, e, f, g; b = b || {}; d = b.indent_size || 4; e = b.indent_char || " "; g = b.brace_style || "collapse"; f = b.max_char || "999999"; unformatted = b.unformatted || ["a"]; c = new h; c.printer(a, e, d, f, g); while (true) { var i = c.get_token(); c.token_text = i[0]; c.token_type = i[1]; if (c.token_type === "TK_EOF") { break } switch (c.token_type) { case "TK_TAG_START": c.print_newline(false, c.output); c.print_token(c.token_text); c.indent(); c.current_mode = "CONTENT"; break; case "TK_TAG_STYLE": case "TK_TAG_SCRIPT": c.print_newline(false, c.output); c.print_token(c.token_text); c.current_mode = "CONTENT"; break; case "TK_TAG_END": if (c.last_token === "TK_CONTENT" && c.last_text === "") { var j = c.token_text.match(/\w+/)[0]; var k = c.output[c.output.length - 1].match(/<\s*(\w+)/); if (k === null || k[1] !== j) c.print_newline(true, c.output) } c.print_token(c.token_text); c.current_mode = "CONTENT"; break; case "TK_TAG_SINGLE": c.print_newline(false, c.output); c.print_token(c.token_text); c.current_mode = "CONTENT"; break; case "TK_CONTENT": if (c.token_text !== "") { c.print_token(c.token_text) } c.current_mode = "TAG"; break; case "TK_STYLE": case "TK_SCRIPT": if (c.token_text !== "") { c.output.push("\n"); var l = c.token_text; if (c.token_type == "TK_SCRIPT") { var m = typeof js_beautify == "function" && js_beautify } else if (c.token_type == "TK_STYLE") { var m = typeof this.getPrettyCss == "function" && this.getPrettyCss } if (b.indent_scripts == "keep") { var n = 0 } else if (b.indent_scripts == "separate") { var n = -c.indent_level } else { var n = 1 } var o = c.get_full_indent(n); if (m) { l = m(l.replace(/^\s*/, o), b) } else { var p = l.match(/^\s*/)[0]; var q = p.match(/[^\n\r]*$/)[0].split(c.indent_string).length - 1; var r = c.get_full_indent(n - q); l = l.replace(/^\s*/, o).replace(/\r\n|\r|\n/g, "\n" + r).replace(/\s*$/, "") } if (l) { c.print_token(l); c.print_newline(true, c.output) } } c.current_mode = "TAG"; break } c.last_token = c.token_type; c.last_text = c.token_text } return c.output.join("") }
+    },
+    //For CSS (single string/file)
+    getPrettyCss: {
+        value: function (a, b) { function t() { r--; p = p.slice(0, -c) } function s() { r++; p += q } function o(a, b) { return u.slice(-a.length + (b || 0), b).join("").toLowerCase() == a } function n() { var b = g; i(); while (i()) { if (h == "*" && j() == "/") { g++; break } } return a.substring(b, g + 1) } function m() { var a = g; do { } while (e.test(i())); return g != a + 1 } function l() { var a = g; while (e.test(j())) g++; return g != a } function k(b) { var c = g; while (i()) { if (h == "\\") { i(); i() } else if (h == b) { break } else if (h == "\n") { break } } return a.substring(c, g + 1) } function j() { return a.charAt(g + 1) } function i() { return h = a.charAt(++g) } b = b || {}; var c = b.indent_size || 4; var d = b.indent_char || " "; if (typeof c == "string") c = parseInt(c); var e = /^\s+$/; var f = /[\w$\-_]/; var g = -1, h; var p = a.match(/^[\r\n]*[\t ]*/)[0]; var q = Array(c + 1).join(d); var r = 0; print = {}; print["{"] = function (a) { print.singleSpace(); u.push(a); print.newLine() }; print["}"] = function (a) { print.newLine(); u.push(a); print.newLine() }; print.newLine = function (a) { if (!a) while (e.test(u[u.length - 1])) u.pop(); if (u.length) u.push("\n"); if (p) u.push(p) }; print.singleSpace = function () { if (u.length && !e.test(u[u.length - 1])) u.push(" ") }; var u = []; if (p) u.push(p); while (true) { var v = m(); if (!h) break; if (h == "{") { s(); print["{"](h) } else if (h == "}") { t(); print["}"](h) } else if (h == '"' || h == "'") { u.push(k(h)) } else if (h == ";") { u.push(h, "\n", p) } else if (h == "/" && j() == "*") { print.newLine(); u.push(n(), "\n", p) } else if (h == "(") { u.push(h); l(); if (o("url", -1) && i()) { if (h != ")" && h != '"' && h != "'") u.push(k(")")); else g-- } } else if (h == ")") { u.push(h) } else if (h == ",") { l(); u.push(h); print.singleSpace() } else if (h == "]") { u.push(h) } else if (h == "[" || h == "=") { l(); u.push(h) } else { if (v) print.singleSpace(); u.push(h) } } var w = u.join("").replace(/[\n ]+$/, ""); return w }
     }
 	////////////////////////////////////////////////////////////////////
 	////////////////////////////////////////////////////////////////////
diff --git a/js/document/views/design.js b/js/document/views/design.js
index dedfe8b6..02e78e6e 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -159,7 +159,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
         			this._observer.body = new WebKitMutationObserver(this.insertBannerContent.bind(this));
     	    		this._observer.body.observe(this._bodyFragment, {childList: true});
 	        		//Inserting <body> HTML and parsing URLs via mediator method
-        			this._bodyFragment.innerHTML = '<ninjaloadinghack></ninjaloadinghack>'+(this.content.body.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator));
+        			this._bodyFragment.innerHTML = '<ninjaloadinghack></ninjaloadinghack>'+(this.content.body.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, this.application.ninja.ioMediator.tmplt.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator.tmplt))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.tmplt.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator.tmplt));
     	    	}
         	} else {
     	    	//Creating temp code fragement to load head
@@ -168,12 +168,12 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
         		this._observer.head = new WebKitMutationObserver(this.insertHeadContent.bind(this));
     	    	this._observer.head.observe(this._headFragment, {childList: true});
 	        	//Inserting <head> HTML and parsing URLs via mediator method
-        		this._headFragment.innerHTML = (this.content.head.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator));
+        		this._headFragment.innerHTML = (this.content.head.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, this.application.ninja.ioMediator.tmplt.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator.tmplt))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.tmplt.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator.tmplt));
         		//Adding event listener to know when the body is ready and make callback (using HTML5 new DOM Mutation Events)
     	    	this._observer.body = new WebKitMutationObserver(this.bodyContentLoaded.bind(this));
 	        	this._observer.body.observe(this.document.body, {childList: true});
         		//Inserting <body> HTML and parsing URLs via mediator method
-        		this.document.body.innerHTML += '<ninjaloadinghack></ninjaloadinghack>'+(this.content.body.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator));
+        		this.document.body.innerHTML += '<ninjaloadinghack></ninjaloadinghack>'+(this.content.body.replace(/\b(href|src)\s*=\s*"([^"]*)"/g, this.application.ninja.ioMediator.tmplt.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator.tmplt))).replace(/url\(([^"]*)(.+?)\1\)/g, this.application.ninja.ioMediator.tmplt.getNinjaPropUrlRedirect.bind(this.application.ninja.ioMediator.tmplt));
     	    	//Copying attributes to maintain same properties as the <body>
 				for (var n in this.content.document.body.attributes) {
 					if (this.content.document.body.attributes[n].value) {
diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js
index 4dbf32d5..4535cad6 100644
--- a/js/mediators/io-mediator.js
+++ b/js/mediators/io-mediator.js
@@ -10,49 +10,40 @@ var Montage = 			require("montage/core/core").Montage,
 	Component = 		require("montage/ui/component").Component,
 	FileIo = 			require("js/io/system/fileio").FileIo,
 	ProjectIo = 		require("js/io/system/projectio").ProjectIo,
-	TemplateCreator = 	require("node_modules/tools/template/template-creator").TemplateCreator;
+	TemplateMediator = 	require("js/document/mediators/template").TemplateDocumentMediator;
 ////////////////////////////////////////////////////////////////////////
 //
 exports.IoMediator = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     hasTemplate: {
-        enumerable: false,
         value: false
     },
     ////////////////////////////////////////////////////////////////////
     //
     deserializedFromTemplate: {
-        enumerable: false,
         value: function () {
             //
         }
     },
     ////////////////////////////////////////////////////////////////////
     //
+    tmplt: {
+        value: TemplateMediator
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
     fio: {
-        enumerable: false,
         value: FileIo
     },
     ////////////////////////////////////////////////////////////////////
     //
     pio: {
-        enumerable: false,
         value: ProjectIo
     },
     ////////////////////////////////////////////////////////////////////
     //
-    getAppTemplatesUrlRegEx: {
-        enumerable: false,
-        value: function () {
-            var regex = new RegExp(chrome.extension.getURL('js/document/templates/montage-html').replace(/\//gi, '\\\/'), 'gi');
-            return regex;
-        }
-    },
-    ////////////////////////////////////////////////////////////////////
-    //
     fileNew: {
-        enumerable: false,
         value: function (file, url, callback, template) {
             //Loading template from template URL
             var xhr = new XMLHttpRequest(), result;
@@ -102,7 +93,6 @@ exports.IoMediator = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     fileOpen: {
-        enumerable: false,
         value: function (file, callback) {
             //Reading file (Ninja doesn't really open a file, all in browser memory)
             var read = this.fio.readFile({ uri: file }), result;
@@ -118,7 +108,7 @@ exports.IoMediator = Montage.create(Component, {
                         result.content = read.file.content;
                     } else {
                         //Object to be used by Ninja Template
-                        result.content = this.parseHtmlToNinjaTemplate(read.file.content);
+                        result.content = this.tmplt.parseHtmlToNinjaTemplate(read.file.content);
                     }
                     //Status of call
                     result.status = read.status;
@@ -161,7 +151,6 @@ exports.IoMediator = Montage.create(Component, {
     ////////////////////////////////////////////////////////////////////
     //
     fileSave: {
-        enumerable: false,
         value: function (doc, callback) {
             //
             var contents, save;
@@ -170,9 +159,9 @@ exports.IoMediator = Montage.create(Component, {
                 case 'html':
                     //Getting content from function to properly handle saving assets (as in external if flagged)
                     if (doc.template && (doc.template.type === 'banner' || doc.template.type === 'animation')) {
-                    	contents = this.parseNinjaTemplateToHtml(doc, true);
+                    	contents = this.tmplt.parseNinjaTemplateToHtml(doc, true);
                     } else {
-                    	contents = this.parseNinjaTemplateToHtml(doc);
+                    	contents = this.tmplt.parseNinjaTemplateToHtml(doc);
                     }
                     break;
                 default:
@@ -200,635 +189,6 @@ exports.IoMediator = Montage.create(Component, {
         value: function (file, callback) {
             //TODO: Implement Delete functionality
         }
-    },
-    ////////////////////////////////////////////////////////////////////
-    //
-    getDataDirectory: {
-    	value: function (path) {
-    		//TODO: Implement user overwrite
-        	return this._getUserDirectory(path+'data/');
-    	}
-    },
-    ////////////////////////////////////////////////////////////////////
-    //
-    getNinjaDirectory: {
-    	value: function (path) {
-    		//TODO: Implement user overwrite
-    		return this._getUserDirectory(this.getDataDirectory(path)+'ninja/');
-    	}
-    },
-    ////////////////////////////////////////////////////////////////////
-    //
-    getCanvasDirectory: {
-    	value: function (path) {
-    		//TODO: Implement user overwrite
-    		return this._getUserDirectory(this.getNinjaDirectory(path)+'canvas/');
-    	}
-    },
-    ////////////////////////////////////////////////////////////////////
-    //
-    _getUserDirectory: {
-    	value: function (path) {
-    		//Checking for data directory
-            var check = this.application.ninja.coreIoApi.fileExists({uri: path}), directory;
-            //Creating directory if doesn't exists
-            switch (check.status) {
-            	case 204: //Exists
-            		directory = path;
-            		break;
-            	case 404: //Doesn't exists
-            		directory = this.application.ninja.coreIoApi.createDirectory({uri: path});
-            		//Checking for success
-            		if (directory.status === 201) {
-            			directory = path;
-            		} else {
-            			//Error
-            			directory = null;
-            		}
-            		break;
-            	default: //Error
-            		directory = null;
-            		break;
-            }
-            //Returning the path to the directory on disk (null for any error)
-            return directory;
-    	}
-    },
-    ////////////////////////////////////////////////////////////////////
-    //
-    parseHtmlToNinjaTemplate: {
-        enumerable: false,
-        value: function (html) {
-            //Creating temp object to mimic HTML
-            var doc = window.document.implementation.createHTMLDocument(), template;
-            //Setting content to temp
-            doc.getElementsByTagName('html')[0].innerHTML = html;
-            //Creating return object
-            return {head: doc.head.innerHTML, body: doc.body.innerHTML, document: doc};
-        }
-    },
-    ////////////////////////////////////////////////////////////////////
-    //TODO: Expand to allow more templates, clean up variables
-    parseNinjaTemplateToHtml: {
-        enumerable: false,
-        value: function (template, ninjaWrapper) {
-        	//TODO: Improve reference for rootUrl
-            var regexRootUrl,
-            	rootUrl = this.application.ninja.coreIoApi.rootUrl + escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1])),
-            	mjsCreator = template.mjsTemplateCreator.create(),
-            	mJsSerialization,
-            	toremovetags = [],
-            	presentNodes,
-            	montageTemplate;
-            //Creating instance of template creator
-            montageTemplate = mjsCreator.initWithDocument(template.document);
-            //Setting up expression for parsing URLs
-            regexRootUrl = new RegExp(rootUrl.replace(/\//gi, '\\\/'), 'gi');
-            //Injecting head and body into old document
-            if (montageTemplate._ownerSerialization.length > 0) {
-            	template.file.content.document.head.innerHTML = montageTemplate._document.head.innerHTML.replace(regexRootUrl, '');
-	            template.file.content.document.body.innerHTML = montageTemplate._document.body.innerHTML.replace(regexRootUrl, '');
-	            //
-	            mJsSerialization = montageTemplate._ownerSerialization;
-            } else {
-            	template.file.content.document.head.innerHTML = template.head.innerHTML.replace(regexRootUrl, '');
-	            template.file.content.document.body.innerHTML = template.body.innerHTML.replace(regexRootUrl, '');
-            }
-