From a0dceb06e0643066bb17c75c1d2ad3bd3826ada9 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Fri, 11 May 2012 14:43:48 -0700
Subject: fixing the timeline selecting when creating a new layer

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index d1cab096..94ca9b57 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -994,7 +994,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.arrLayers.splice(myIndex, 0, thingToPush);
 
             }
-            this.selectLayer(myIndex);
+            this.selectLayer(myIndex, false);
         }
     },
 
-- 
cgit v1.2.3


From 2b718df00eb9f3a3d2ad269fab533967668988bf Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Fri, 11 May 2012 14:59:59 -0700
Subject: adding a converter for the hot text

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/components/converter/value-units-converter.js | 29 ++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 js/components/converter/value-units-converter.js

diff --git a/js/components/converter/value-units-converter.js b/js/components/converter/value-units-converter.js
new file mode 100644
index 00000000..e4f9aee9
--- /dev/null
+++ b/js/components/converter/value-units-converter.js
@@ -0,0 +1,29 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+var Montage = require("montage").Montage,
+Converter = require("montage/core/converter/converter").Converter;
+
+exports.ValueUnitsConverter = Montage.create(Converter, {
+
+    // convert fahrenheit to celsius (showing our non-metric heritage here)
+    convert: {
+        value: function(value) {
+//            return (parseInt(value, 10) - 32) / 1.8;
+//            console.log(value);
+            console.log(value);
+            return parseInt(value);
+        }
+    },
+
+    // revert celsius to fahrenheit
+    revert: {
+        value: function(value) {
+//            return (1.8 * parseInt(value, 10)) + 32;
+            console.log(value);
+        }
+    }
+
+});
-- 
cgit v1.2.3


From d68c1ea5163c67ada54ac24f1da69695cc8dfab5 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Fri, 11 May 2012 16:22:17 -0700
Subject: Fixing position issue

Need to implement centering document.
---
 js/document/templates/banner/index.html | 4 ++--
 js/document/views/design.js             | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/js/document/templates/banner/index.html b/js/document/templates/banner/index.html
index 2cd82f51..8e8c96d6 100755
--- a/js/document/templates/banner/index.html
+++ b/js/document/templates/banner/index.html
@@ -60,8 +60,8 @@
 				border: 0;
 				position: absolute;
 				overflow: visible;
-				top: 50%;
-				left: 50%;
+				top: 0;
+				left: 0;
 				background: #FFF;
 			}
         </style>
diff --git a/js/document/views/design.js b/js/document/views/design.js
index 16d1ac06..bff65b7f 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -168,7 +168,8 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
 				}
 			}
 			//Adjusting margin per size of document
-			this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important; margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'px}';
+			//this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important; margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'px}';
+			this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important;}';
 			//Setting content in template
     		ninjaBanner.innerHTML = banner.innerHTML;
         	//Garbage collection
-- 
cgit v1.2.3


From 1559abff592b976e6b983881fe208da4257e98f7 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Mon, 14 May 2012 10:44:42 -0700
Subject: Fixing webRequest URL parsing

---
 js/controllers/document-controller.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index d88059ab..e6b543d7 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -95,11 +95,14 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
     	value: function (request) {
     		//TODO: Check if frameId is proper
     		if (this._hackRootFlag && request.parentFrameId !== -1) {
-    			//TODO: Optimize creating string
-    			//console.log(request);
-    			//console.log(this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1], request.url);
-				//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]};
-				return {redirectUrl: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]+request.url.split(chrome.extension.getURL('js/document/templates/'))[1]};
+    			//Checking for proper URL redirect (from different directories)
+    			if (request.url.indexOf('js/document/templates/banner') !== -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(chrome.extension.getURL('js/document/templates/banner/'))[1]};
+				} else if (request.url.indexOf('js/document/templates/html')  !== -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(chrome.extension.getURL('js/document/templates/html/'))[1]};
+				} else {
+					//Error, not a valid folder
+				}
 			}
 		}
     },
-- 
cgit v1.2.3


From 734b6ad96d25bb67d0db4a0a75c331468e194809 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Mon, 14 May 2012 12:05:41 -0700
Subject: Fixing 3d to work in banner templates.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/controllers/document-controller.js   | 5 ++++-
 js/document/document-html.js            | 2 +-
 js/document/templates/banner/index.html | 5 +++--
 js/helper-classes/3D/view-utils.js      | 6 +++++-
 js/mediators/io-mediator.js             | 2 +-
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index d88059ab..3b6eb5bf 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -683,8 +683,11 @@ if(this.activeDocument && this.application.ninja.coreIoApi.cloudAvailable()){
             }
 
             if(needsRule) {
-                rule = sc.addRule('body{}');
+//                rule = sc.addRule('body{}');
+//                sc.setStyles(rule, styles);
+                rule = sc.addRule('.ninjaUserDoc{}');
                 sc.setStyles(rule, styles);
+                sc.addClass(docRoot, "ninjaUserDoc");
             }
         }
     }
diff --git a/js/document/document-html.js b/js/document/document-html.js
index 4767271f..f8e88ede 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -107,7 +107,7 @@ exports.HtmlDocument = Montage.create(Component, {
             		//TODO: Why is this needed?
             		this._liveNodeList = this.model.views.design.document.body.getElementsByTagName('*');
             		//Initiliazing document model
-            		document.application.njUtils.makeElementModel(this.model.views.design.document.body, "Body", "body");
+            		document.application.njUtils.makeElementModel(this.documentRoot, "Body", "body");
             		//Adding observer to know when template is ready
             		this._observer = new WebKitMutationObserver(this.handleTemplateReady.bind(this));
         			this._observer.observe(this.model.views.design.document.head, {childList: true});
diff --git a/js/document/templates/banner/index.html b/js/document/templates/banner/index.html
index 8e8c96d6..9da6699b 100755
--- a/js/document/templates/banner/index.html
+++ b/js/document/templates/banner/index.html
@@ -27,8 +27,6 @@
 				margin: 0;
     			padding: 0;
 				position: absolute;
-				-webkit-transform-style: preserve-3d;
-				-webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
 			}
 
             html {
@@ -63,6 +61,9 @@
 				top: 0;
 				left: 0;
 				background: #FFF;
+                -webkit-transform-style: preserve-3d;
+                -webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+
 			}
         </style>
         
diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js
index 22446403..8c338f84 100755
--- a/js/helper-classes/3D/view-utils.js
+++ b/js/helper-classes/3D/view-utils.js
@@ -358,9 +358,13 @@ exports.ViewUtils = Montage.create(Component, {
             {
                 pt = this.childToParent( pt, child );
 
-                if (child === this._stageElement)  break;
+//                if (child === this._stageElement)  break;
+//                child = child.offsetParent;
 
+                if (child === this._stageElement)  break;
+                if (child === this._rootElement)  break;
                 child = child.offsetParent;
+                if (child === this._rootElement)  break;
             }
 
             /////////////////////////////////////////////////////////
diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js
index c9c7203f..7d55b20f 100644
--- a/js/mediators/io-mediator.js
+++ b/js/mediators/io-mediator.js
@@ -83,7 +83,7 @@ exports.IoMediator = Montage.create(Component, {
                 		dimensions = {width: String(dimensions[0])+'px', height: String(dimensions[1])+'px'};
                 		//
                 		content = content.replace(/Dimensions@@@/gi, "Dimensions@@@"+template.id);
-                		content = content.replace(/ninja-banner {}/gi, "ninja-banner {overflow: hidden; width: "+dimensions.width+"; height: "+dimensions.height+"}");
+                		content = content.replace(/ninja-banner {}/gi, "ninja-banner {overflow: visible; width: "+dimensions.width+"; height: "+dimensions.height+"}");
                 	}
                 	//
                 	return content;
-- 
cgit v1.2.3


From ba5b8238784a41099d0eb76795de2a7e5abde226 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Mon, 14 May 2012 13:44:27 -0700
Subject: code cleanup

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/components/layout/document-entry.reel/document-entry.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/js/components/layout/document-entry.reel/document-entry.js b/js/components/layout/document-entry.reel/document-entry.js
index 9e4110e2..81a63c90 100755
--- a/js/components/layout/document-entry.reel/document-entry.js
+++ b/js/components/layout/document-entry.reel/document-entry.js
@@ -7,8 +7,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
 
-//var documentManagerModule = ("js/document/documentManager");
-
 exports.DocumentEntry = Montage.create(Component, {
 
     dirty: { value: null },
-- 
cgit v1.2.3


From 8c014c75b7f7ac7cf854af6d2cc2f8d330335858 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Mon, 14 May 2012 14:27:55 -0700
Subject: Fixing grid drawing bug.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/document/document-html.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/document/document-html.js b/js/document/document-html.js
index f8e88ede..b5203e92 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -105,7 +105,7 @@ exports.HtmlDocument = Montage.create(Component, {
     					this.documentRoot = this.model.views.design.document.body;
     				}
             		//TODO: Why is this needed?
-            		this._liveNodeList = this.model.views.design.document.body.getElementsByTagName('*');
+            		this._liveNodeList = this.documentRoot.getElementsByTagName('*');
             		//Initiliazing document model
             		document.application.njUtils.makeElementModel(this.documentRoot, "Body", "body");
             		//Adding observer to know when template is ready
-- 
cgit v1.2.3


From cfd3a44bb7aba54c15fab59eff39ecdffcb7ac11 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Mon, 14 May 2012 14:38:35 -0700
Subject: Viewport for banner templates so content doesn't push through "body".

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/controllers/document-controller.js   |  6 ++----
 js/document/templates/banner/index.html | 19 +++++++++++++++++--
 js/document/views/design.js             |  2 +-
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index 3b6eb5bf..3ce4ba81 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -683,11 +683,9 @@ if(this.activeDocument && this.application.ninja.coreIoApi.cloudAvailable()){
             }
 
             if(needsRule) {
-//                rule = sc.addRule('body{}');
-//                sc.setStyles(rule, styles);
-                rule = sc.addRule('.ninjaUserDoc{}');
+                rule = sc.addRule('.ninja-body{}');
                 sc.setStyles(rule, styles);
-                sc.addClass(docRoot, "ninjaUserDoc");
+                sc.addClass(docRoot, "ninja-body");
             }
         }
     }
diff --git a/js/document/templates/banner/index.html b/js/document/templates/banner/index.html
index 9da6699b..7b29c038 100755
--- a/js/document/templates/banner/index.html
+++ b/js/document/templates/banner/index.html
@@ -50,6 +50,18 @@
 			.nj-preset-transition {
 				-webkit-transition: all 450ms linear !important;
 			}
+
+           ninja-viewport {
+               display: block;
+               margin: 0;
+               padding: 0;
+               border: 0;
+               position: absolute;
+               overflow: visible;
+               top: 0;
+               left: 0;
+               background: #FFF;
+           }
 			
 			ninja-banner {
 				display: block;
@@ -60,7 +72,7 @@
 				overflow: visible;
 				top: 0;
 				left: 0;
-				background: #FFF;
+				background: transparent;
                 -webkit-transform-style: preserve-3d;
                 -webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
 
@@ -89,7 +101,10 @@
 
 	<body>
 		<ninjaloadinghack></ninjaloadinghack>
-		<ninja-banner></ninja-banner>
+        <ninja-viewport>
+            <!--TODO - rename-->
+		    <ninja-banner></ninja-banner>
+        </ninja-viewport>
 	</body>
 
 </html>
\ No newline at end of file
diff --git a/js/document/views/design.js b/js/document/views/design.js
index bff65b7f..3378ad71 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -169,7 +169,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
 			}
 			//Adjusting margin per size of document
 			//this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important; margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'px}';
-			this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important;}';
+			this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important;} ninja-banner, ninja-viewport {width: ' + this._template.size.width + 'px; height: ' + this._template.size.height + 'px;}';
 			//Setting content in template
     		ninjaBanner.innerHTML = banner.innerHTML;
         	//Garbage collection
-- 
cgit v1.2.3


From 7f71c29e6558eefc5904ca0dfcb7ec898b2492a5 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Mon, 14 May 2012 16:04:37 -0700
Subject: adding some test converters

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/components/converter/string-units-converter.js | 31 +++++++++++++++++++++++
 js/components/converter/string-value-converter.js | 29 +++++++++++++++++++++
 js/components/converter/value-units-converter.js  | 29 ---------------------
 3 files changed, 60 insertions(+), 29 deletions(-)
 create mode 100644 js/components/converter/string-units-converter.js
 create mode 100644 js/components/converter/string-value-converter.js
 delete mode 100644 js/components/converter/value-units-converter.js

diff --git a/js/components/converter/string-units-converter.js b/js/components/converter/string-units-converter.js
new file mode 100644
index 00000000..6b97d5c5
--- /dev/null
+++ b/js/components/converter/string-units-converter.js
@@ -0,0 +1,31 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+var Montage = require("montage").Montage,
+    Converter = require("montage/core/converter/converter").Converter,
+    NJUtils = require("js/lib/NJUtils").NJUtils;
+
+exports.StringUnitsConverter = Montage.create(Converter, {
+
+    // convert fahrenheit to celsius (showing our non-metric heritage here)
+    convert: {
+        value: function(value) {
+            if(value) {
+                console.log("convert string to unit ", value);
+                var tmp = NJUtils.getValueAndUnits(value);
+                return tmp[1];
+            }
+        }
+    },
+
+    // revert celsius to fahrenheit
+    revert: {
+        value: function(value) {
+            console.log("revert string to unit ", value);
+            return value;
+        }
+    }
+
+});
diff --git a/js/components/converter/string-value-converter.js b/js/components/converter/string-value-converter.js
new file mode 100644
index 00000000..28d7dd29
--- /dev/null
+++ b/js/components/converter/string-value-converter.js
@@ -0,0 +1,29 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+var Montage = require("montage").Montage,
+    Converter = require("montage/core/converter/converter").Converter,
+    NJUtils = require("js/lib/NJUtils").NJUtils;
+
+exports.StringValueConverter = Montage.create(Converter, {
+
+    // convert fahrenheit to celsius (showing our non-metric heritage here)
+    convert: {
+        value: function(value) {
+            console.log(value);
+            console.log(parseInt(value));
+                return parseInt(value);
+        }
+    },
+
+    // revert celsius to fahrenheit
+    revert: {
+        value: function(value) {
+            console.log("revert string to value ", value);
+            return value;
+        }
+    }
+
+});
diff --git a/js/components/converter/value-units-converter.js b/js/components/converter/value-units-converter.js
deleted file mode 100644
index e4f9aee9..00000000
--- a/js/components/converter/value-units-converter.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/* <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
- (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> */
-var Montage = require("montage").Montage,
-Converter = require("montage/core/converter/converter").Converter;
-
-exports.ValueUnitsConverter = Montage.create(Converter, {
-
-    // convert fahrenheit to celsius (showing our non-metric heritage here)
-    convert: {
-        value: function(value) {
-//            return (parseInt(value, 10) - 32) / 1.8;
-//            console.log(value);
-            console.log(value);
-            return parseInt(value);
-        }
-    },
-
-    // revert celsius to fahrenheit
-    revert: {
-        value: function(value) {
-//            return (1.8 * parseInt(value, 10)) + 32;
-            console.log(value);
-        }
-    }
-
-});
-- 
cgit v1.2.3


From 9b2cecc30a2e94ac247fddd8ec931b9aa768cb5c Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Mon, 14 May 2012 16:04:46 -0700
Subject: code cleanup

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/controllers/document-controller.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index d88059ab..0a91ae29 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -155,13 +155,13 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
     },
 
     handleExecuteNewFile: {
-            value: function(event) {
-                var newFileSettings = event._event.settings || {};
-                if (this.application.ninja.coreIoApi.cloudAvailable()) {
-                    newFileSettings.callback = this.createNewFile.bind(this);
-                    this.application.ninja.newFileController.showNewFileDialog(newFileSettings);
-                }
+        value: function(event) {
+            var newFileSettings = event._event.settings || {};
+            if (this.application.ninja.coreIoApi.cloudAvailable()) {
+                newFileSettings.callback = this.createNewFile.bind(this);
+                this.application.ninja.newFileController.showNewFileDialog(newFileSettings);
             }
+        }
     },
 	////////////////////////////////////////////////////////////////////
 	//
@@ -607,7 +607,7 @@ if(this.activeDocument && this.application.ninja.coreIoApi.cloudAvailable()){
                     //hide the iframe when switching to code view
                     document.getElementById("iframeContainer").style.display = "none";
                 }
-        }
+            }
         }
     },
 
-- 
cgit v1.2.3


From 150b6eb2be526627d588a0cf7226ddad7a399b8f Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Mon, 14 May 2012 16:35:09 -0700
Subject: Fixing banner template

Need to implement save, but this cover open and new.
---
 js/document/document-html.js            |  2 +-
 js/document/templates/banner/index.html | 54 ++++++++++++++++-----------------
 js/document/views/design.js             |  7 +++--
 js/io/templates/files/banner.txt        | 15 ++++++---
 js/mediators/io-mediator.js             |  1 +
 5 files changed, 42 insertions(+), 37 deletions(-)

diff --git a/js/document/document-html.js b/js/document/document-html.js
index b5203e92..9bbea4c9 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -100,7 +100,7 @@ exports.HtmlDocument = Montage.create(Component, {
             		this._document = this.model.views.design.document;
             		//TODO: Remove usage, seems as not needed
     				if (template && template.type === 'banner') {
-    					this.documentRoot = this.model.views.design.document.body.getElementsByTagName('ninja-banner')[0];
+    					this.documentRoot = this.model.views.design.document.body.getElementsByTagName('ninja-content')[0];
     				} else {
     					this.documentRoot = this.model.views.design.document.body;
     				}
diff --git a/js/document/templates/banner/index.html b/js/document/templates/banner/index.html
index 7b29c038..91ef06de 100755
--- a/js/document/templates/banner/index.html
+++ b/js/document/templates/banner/index.html
@@ -38,10 +38,6 @@
                 height: 100%;
                 background: #666;
             }
-			
-			ninjaloadinghack {
-				display: none;
-			}
 
 			.active-element-outline {
     			outline: #adff2f solid 2px;
@@ -50,32 +46,30 @@
 			.nj-preset-transition {
 				-webkit-transition: all 450ms linear !important;
 			}
-
-           ninja-viewport {
-               display: block;
-               margin: 0;
-               padding: 0;
-               border: 0;
-               position: absolute;
-               overflow: visible;
-               top: 0;
-               left: 0;
-               background: #FFF;
-           }
 			
-			ninja-banner {
+			ninjaloadinghack {
+				display: none;
+			}
+			
+			ninja-viewport, ninja-content {
 				display: block;
-				margin: 0;
-				padding: 0;
-				border: 0;
-				position: absolute;
-				overflow: visible;
-				top: 0;
-				left: 0;
-				background: transparent;
+               	margin: 0;
+               	padding: 0;
+               	border: 0;
+               	position: absolute;
+               	overflow: visible;
+               	top: 0;
+               	left: 0;
+               	background: transparent;
+			}
+			
+			ninja-viewport {
+               	background: #FFF;
+           	}
+			
+			ninja-content {
                 -webkit-transform-style: preserve-3d;
                 -webkit-transform: perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-
 			}
         </style>
         
@@ -100,11 +94,15 @@
 	</head>
 
 	<body>
+		
 		<ninjaloadinghack></ninjaloadinghack>
+        
         <ninja-viewport>
-            <!--TODO - rename-->
-		    <ninja-banner></ninja-banner>
+		    
+		    <ninja-content></ninja-content>
+		    
         </ninja-viewport>
+        
 	</body>
 
 </html>
\ No newline at end of file
diff --git a/js/document/views/design.js b/js/document/views/design.js
index 3378ad71..4c91ff39 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -159,8 +159,9 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
     insertBannerContent: {
     	value: function (e) {
     		//Getting first element in DOM (assumes it's root)
-    		var banner = this._bodyFragment.getElementsByTagName('*')[1],
-    			ninjaBanner = this.document.body.getElementsByTagName('ninja-banner')[0];
+    		//TODO: Ensure wrapper logic is proper
+    		var banner = this._bodyFragment.getElementsByTagName('*')[2],
+    			ninjaBanner = this.document.body.getElementsByTagName('ninja-content')[0];
     		//Copying attributes to maintain same properties as the banner root
 			for (var n in banner.attributes) {
 				if (banner.attributes[n].value) {
@@ -169,7 +170,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
 			}
 			//Adjusting margin per size of document
 			//this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important; margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'px}';
-			this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important;} ninja-banner, ninja-viewport {width: ' + this._template.size.width + 'px; height: ' + this._template.size.height + 'px;}';
+			this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-content {overflow: visible !important;} ninja-content, ninja-viewport {width: ' + this._template.size.width + 'px; height: ' + this._template.size.height + 'px;}';
 			//Setting content in template
     		ninjaBanner.innerHTML = banner.innerHTML;
         	//Garbage collection
diff --git a/js/io/templates/files/banner.txt b/js/io/templates/files/banner.txt
index fdafe4f6..33b45e53 100755
--- a/js/io/templates/files/banner.txt
+++ b/js/io/templates/files/banner.txt
@@ -1,13 +1,18 @@
 <!DOCTYPE html>
 
-<div class="ninja-banner">
+<div class="ninja-content-wrapper">
 	
 	<!-- Created with Motorola Mobility Ninja -->
 	
 	<!-- Ninja-Banner Dimensions@@@ -->
-		
-	<style type="text/css">
-		.ninja-banner {}
-	</style>
+	
+	<div class="ninja-banner">
+	
+		<style type="text/css">
+			.ninja-content-wrapper {}
+			.ninja-banner {}
+		</style>
+
+	</div>
 
 </div>
\ No newline at end of file
diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js
index 7d55b20f..7a905fc6 100644
--- a/js/mediators/io-mediator.js
+++ b/js/mediators/io-mediator.js
@@ -84,6 +84,7 @@ exports.IoMediator = Montage.create(Component, {
                 		//
                 		content = content.replace(/Dimensions@@@/gi, "Dimensions@@@"+template.id);
                 		content = content.replace(/ninja-banner {}/gi, "ninja-banner {overflow: visible; width: "+dimensions.width+"; height: "+dimensions.height+"}");
+                		content = content.replace(/ninja-content-wrapper {}/gi, "ninja-content-wrapper {overflow: hidden; width: "+dimensions.width+"; height: "+dimensions.height+"}");
                 	}
                 	//
                 	return content;
-- 
cgit v1.2.3


From 7ad96123fcc61f613c199faa3b98bff5d352ceee Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Mon, 14 May 2012 17:17:17 -0700
Subject: userContentLeft and userContentTop need to set scroll offsets for 0
 also.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/stage/stage-deps.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/stage/stage-deps.js b/js/stage/stage-deps.js
index a71b77be..33ba2359 100755
--- a/js/stage/stage-deps.js
+++ b/js/stage/stage-deps.js
@@ -52,7 +52,7 @@ exports.StageDeps = Montage.create(Component, {
     userContentLeft: {
         get: function() { return this._userContentLeft; },
         set: function(value) {
-            if(value) {
+            if(value != null) {
                 viewUtils.setUserContentLeft(value);
             }
         }
@@ -65,7 +65,7 @@ exports.StageDeps = Montage.create(Component, {
     userContentTop: {
         get: function() { return this._userContentTop; },
         set: function(value) {
-            if(value) {
+            if(value != null) {
                 viewUtils.setUserContentTop(value);
             }
         }
-- 
cgit v1.2.3


From 8f8eb57f4506987942745c3325492e939ed3caa8 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Mon, 14 May 2012 17:27:32 -0700
Subject: fixing the body pi

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/data/pi/pi-data.js                              |  18 +--
 js/panels/properties.reel/properties.js            | 155 +++++----------------
 .../position-and-size.reel/position-and-size.html  |  30 ++--
 .../position-and-size.reel/position-and-size.js    |  12 ++
 4 files changed, 54 insertions(+), 161 deletions(-)

diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index d1dc9f34..157cbc64 100755
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -10,20 +10,6 @@ var Montage = require("montage/core/core").Montage,
 exports.PiData = Montage.create( Montage, {
 
     bodyPi: {
-        value: [
-            {
-                label: "Style",
-
-                                Section: [
-                                    [
-
-                                    ]
-                                ]
-            }
-        ]
-    },
-
-    stagePi: {
         value: [
             {
                 label: "Style",
@@ -31,8 +17,8 @@ exports.PiData = Montage.create( Montage, {
                 Section: [
                     [
                         {
-                            type : "chip",
-                            id : "background",
+                            type: "chip",
+                            id: "background",
                             prop: "background"
                         }
                     ]
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 20f670d9..837e74bc 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -67,15 +67,11 @@ exports.Properties = Montage.create(Component, {
         }
     },
 
-    // Document is opened - Display the current selection
     handleOpenDocument: {
         value: function() {
-
             this.eventManager.addEventListener( "elementChange", this, false);
 
-            // For now always assume that the stage is selected by default when opening the old template
-            // TODO: Remove marker for old template: NINJA-STAGE-REWORK
-           
+            // Display the default document root PI
             this.displayElementProperties(this.application.ninja.currentDocument.documentRoot);
         }
     },
@@ -156,7 +152,7 @@ exports.Properties = Montage.create(Component, {
                 this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left"));
                 this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top"));
                 this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height"));
-                this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width"));
+                this.positionSize.widthSize = ElementsMediator.getProperty(el, "width");
 
                 if(this.threeD.inGlobalMode) {
                     this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D");
@@ -173,8 +169,6 @@ exports.Properties = Montage.create(Component, {
     handleSelectionChange: {
         value: function(event) {
             if(event.detail.isDocument) {
-//                if(this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() === "body") return;
-//                this.displayStageProperties();
                 this.displayElementProperties(this.application.ninja.currentDocument.documentRoot);
             } else {
                 if(this.application.ninja.selectedElements.length === 1) {
@@ -187,98 +181,23 @@ exports.Properties = Montage.create(Component, {
         }
     },
 
-    displayStageProperties: {
-        value: function() {
-            var stage = this.application.ninja.currentDocument.documentRoot;
-            //this is test code please remove
-            this.elementName.value = "Stage";
-            this.elementId.value = stage.elementModel.id;
-            this.elementClass.value = "";
-
-            this.positionSize.disablePosition = true;
-            this.threeD.disableTranslation = true;
-
-            this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(stage, "height"));
-            this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(stage, "width"));
-
-            if(this.threeD.inGlobalMode)
-            {
-                this.threeD.xAngle = ElementsMediator.get3DProperty(stage, "xAngle");
-                this.threeD.yAngle = ElementsMediator.get3DProperty(stage, "yAngle");
-                this.threeD.zAngle = ElementsMediator.get3DProperty(stage, "zAngle");
-            }
-
-            this.threeD.flatten = ElementsMediator.getProperty(stage, "-webkit-transform-style") !== "preserve-3d";
-
-            if(this.customPi !== stage.elementModel.pi) {
-                // We need to unregister color chips from the previous selection from the Color Model
-                var len = this.customSections.length;
-                for(var n = 0, controls; n < len; n++) {
-                    controls = this.customSections[n].content.controls;
-                    if(controls["colorSelect"]) {
-                        controls["colorSelect"].destroy();
-                    } else if(controls["stageBackground"]) {
-                        controls["stageBackground"].destroy();
-                    }
-                }
-
-                this.customPi = stage.elementModel.pi;
-                this.displayCustomProperties(stage, stage.elementModel.pi);
-            }
-
-            // For now hardcode the background since it is the only custom property
-            // No need to loop through all the properties.
-            var backgroundChip = this.customSections[0].content.controls["background"];
-            backgroundChip.color = ElementsMediator.getProperty(stage, "background");
-
-            /*
-            var customPI = PiData[this.customPi];
-            // Get all the custom section for the custom PI
-            for(var i = 0, customSec; customSec = customPI[i]; i++) {
-
-                // Now set the Fields for the custom PI
-                for(var j = 0, fields; fields = customSec.Section[j]; j++) {
-                    for(var k = 0, control; control = fields[k]; k++) {
-
-                        var colorChipEl = this.customSections[i].content.controls[control.id];
-                        this.foo = colorChipEl;
-                        colorChipEl.addEventListener("firstDraw", this, false);
-
-                    }
-                }
-            }
-            */
-        }
-    },
-
-    handleFirstDraw: {
-        value: function() {
-            this.foo.chipBtn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 0, b: 0}, css: 'rgb(255,0,0)'});
-        }
-    },
-
     displayElementProperties: {
         value: function (el) {
-            var customPI,
-                currentValue;
+            var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument;
 
             this.elementName.value = el.elementModel.selection;
             this.elementId.value = el.getAttribute("id") || "";
             this.elementClass.value = el.getAttribute("class");
 
-            this.positionSize.disablePosition = false;
-            this.threeD.disableTranslation = false;
+            this.positionSize.disablePosition = isRoot;
+            this.threeD.disableTranslation = isRoot;
+            this.threeD.flatten = ElementsMediator.getProperty(el, "-webkit-transform-style") !== "preserve-3d";
 
             this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left"));
             this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top"));
             this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height"));
             this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width"));
-
-            if(ElementsMediator.getProperty(el, "-webkit-transform-style") === "preserve-3d") {
-                this.threeD.flatten = false;
-            } else {
-                this.threeD.flatten = true;
-            }
+//            this.positionSize.widthSize = ElementsMediator.getProperty(el, "width");
 
             if(this.threeD.inGlobalMode)
             {
@@ -306,6 +225,12 @@ exports.Properties = Montage.create(Component, {
                 this.customPi = el.elementModel.pi;
                 this.displayCustomProperties(el, el.elementModel.pi);
             }
+
+            if(isRoot) {
+                var backgroundChip = this.customSections[0].content.controls["background"];
+                backgroundChip.color = ElementsMediator.getProperty(el, "background");
+            }
+
 			var previousInput = this.application.ninja.colorController.colorModel.input;
             customPI = PiData[this.customPi];
             // Get all the custom section for the custom PI
@@ -317,64 +242,47 @@ exports.Properties = Montage.create(Component, {
 
                         if(control.type !== "color") {
                             currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator);
-                            if(currentValue === null)
-                            {
+                            if(currentValue === null) {
                                 currentValue = control.defaultValue;
                             }
                             this.customSections[i].content.controls[control.id] = currentValue;
-                        }
-                        else
-                        {
-                            if(control.prop === "border")
-                            {
+                        } else {
+                            if(control.prop === "border") {
                                 // TODO - For now, always return the top border if multiple border sides
                                 currentValue = ElementsMediator.getColor(el, false, "top");
                                 this.application.ninja.colorController.colorModel.input = "stroke";
-                            }
-                            else if(control.prop === "background")
-                            {
+                            } else if(control.prop === "background") {
                                 currentValue = ElementsMediator.getColor(el, true);
                                 this.application.ninja.colorController.colorModel.input = "fill";
                             }
 
-                            if(currentValue)
-                            {
-                                if(currentValue.color)
-                                {
+                            if(currentValue) {
+                                if(currentValue.color) {
                                     currentValue.color.wasSetByCode = true;
                                     currentValue.color.type = "change";
                                 }
 
-                                if(currentValue.mode === "gradient")
-                                {
-                                    this.application.ninja.colorController.colorModel["gradient"] =
-                                                    {value: currentValue.color, wasSetByCode: true, type: 'change'};
-                                }
-                                else
-                                {
-                                    if (currentValue.color.a !== undefined)
-                                    {
-                                        this.application.ninja.colorController.colorModel.alpha =
-                                                        {value: currentValue.color.a, wasSetByCode: true, type: 'change'};
+                                if(currentValue.mode === "gradient") {
+                                    this.application.ninja.colorController.colorModel["gradient"] = {value: currentValue.color, wasSetByCode: true, type: 'change'};
+                                } else {
+                                    if (currentValue.color.a !== undefined) {
+                                        this.application.ninja.colorController.colorModel.alpha = {value: currentValue.color.a, wasSetByCode: true, type: 'change'};
                                     }
-                                    if(currentValue.color.mode)
-                                    {
+
+                                    if(currentValue.color.mode) {
                                         this.application.ninja.colorController.colorModel[currentValue.color.mode] = currentValue.color;
-                                    }
-                                    else
-                                    {
+                                    } else {
                                         this.application.ninja.colorController.colorModel["rgb"] = currentValue.color;
                                     }
                                 }
-                            }
-                            else
-                            {
+                            } else {
                                 this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
                                 this.application.ninja.colorController.colorModel.applyNoColor();
                             }
                         }
                     }
                 }
+
                 this.application.ninja.colorController.colorModel.input =  previousInput;
                 var color = this.application.ninja.colorController.colorModel.colorHistory[previousInput][this.application.ninja.colorController.colorModel.colorHistory[previousInput].length-1];
     			color.c.wasSetByCode = true;
@@ -409,6 +317,8 @@ exports.Properties = Montage.create(Component, {
     displayGroupProperties: {
         value: function (els) {
             this.elementName.value = "Multiple Elements";
+            this.elementId.value = "";
+            this.elementClass.value = "";
         }
     },
 
@@ -457,10 +367,7 @@ exports.Properties = Montage.create(Component, {
         value: function(e) {
             if(e.wasSetByCode) return;
 
-//            ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-style", [this.customSections[0].content.controls.borderStyle], "Changing", "pi");
             ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [e.value + "px"], "Changing", "pi");
-
-
         }
     }
 
diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html
index a7aac84e..75cb2944 100755
--- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html
+++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html
@@ -23,6 +23,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "bindButton":       {"@": "bindButton"}
             }
         },
+
         "PosX": {
             "prototype": "js/components/hottextunit.reel[HotTextUnit]",
             "properties": {
@@ -31,11 +32,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "minValue": -10000
             },
             "bindings": {
-                "value": {
-                    "boundObject": {"@": "owner"},
-                    "boundObjectPropertyPath": "leftPosition",
-                    "oneway": false
-                }
+                "value": {"<<->": "@owner.leftPosition"}
             }
         },
         "PosY": {
@@ -46,11 +43,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "minValue": -10000
             },
             "bindings": {
-                "value": {
-                    "boundObject": {"@": "owner"},
-                    "boundObjectPropertyPath": "topPosition",
-                    "oneway": false
-                }
+                "value": {"<<->": "@owner.topPosition"}
             }
         },
         "PosH": {
@@ -59,25 +52,20 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "element": {"#": "PosH"}
             },
             "bindings": {
-                "value": {
-                    "boundObject": {"@": "owner"},
-                    "boundObjectPropertyPath": "heightSize",
-                    "oneway": false
-                }
+                "value": {"<<->": "@owner.heightSize"}
             }
         },
         "PosW": {
             "prototype": "js/components/hottextunit.reel[HotTextUnit]",
             "properties": {
-                "element": {"#": "PosW"}
+                "element": {"#": "PosW"},
+                "acceptableUnits" : ["px", "%"],
+                "units": "px"
             },
             "bindings": {
-                "value": {
-                    "boundObject": {"@": "owner"},
-                    "boundObjectPropertyPath": "widthSize",
-                    "oneway": false
-                }
+                "value": {"<<->": "@owner.widthSize"}
             }
+
         },
         "bindButton": {
             "prototype": "montage/ui/toggle-button.reel",
diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js
index 1e47916f..8842558b 100755
--- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js
+++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js
@@ -23,7 +23,19 @@ exports.PosSize = Montage.create(Component, {
     widthSize: {
         value: 0
     },
+/*
+    widthSize: {
+        get: function() { return this._widthSize;},
+        set: function(value) {
+            this._widthSize = parseInt(value);
+            this.widthUnit = value;
+        }
+    },
 
+    widthUnit: {
+        value: "px"
+    },
+*/
     savedPosition: {
         value: null
     },
-- 
cgit v1.2.3


From 5df0e78f2eced2fd04a531652f61c42261d97636 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Mon, 14 May 2012 17:29:57 -0700
Subject: reverting a pi width change

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/properties.reel/properties.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 837e74bc..3ec48687 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -152,7 +152,7 @@ exports.Properties = Montage.create(Component, {
                 this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left"));
                 this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top"));
                 this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height"));
-                this.positionSize.widthSize = ElementsMediator.getProperty(el, "width");
+                this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width"));
 
                 if(this.threeD.inGlobalMode) {
                     this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D");
-- 
cgit v1.2.3


From 77c0f0b369d431f6824906c91753b934f749c5d8 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Tue, 15 May 2012 11:15:27 -0700
Subject: Finalizing open for new banner templates

Moving to implement save.
---
 js/document/views/design.js | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/js/document/views/design.js b/js/document/views/design.js
index 4c91ff39..48c91aad 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -160,16 +160,23 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
     	value: function (e) {
     		//Getting first element in DOM (assumes it's root)
     		//TODO: Ensure wrapper logic is proper
-    		var banner = this._bodyFragment.getElementsByTagName('*')[2],
-    			ninjaBanner = this.document.body.getElementsByTagName('ninja-content')[0];
-    		//Copying attributes to maintain same properties as the banner root
+    		var wrapper =	this._bodyFragment.getElementsByTagName('*')[1],
+    			banner =	this._bodyFragment.getElementsByTagName('*')[2],
+    			ninjaBanner = this.document.body.getElementsByTagName('ninja-content')[0],
+    			ninjaWrapper = this.document.body.getElementsByTagName('ninja-viewport')[0];
+    		//Copying attributes to maintain same properties as the banner wrapper
+			for (var n in wrapper.attributes) {
+				if (wrapper.attributes[n].value) {
+					ninjaWrapper.setAttribute(wrapper.attributes[n].name, wrapper.attributes[n].value);
+				}
+			}
+			//Copying attributes to maintain same properties as the banner content
 			for (var n in banner.attributes) {
 				if (banner.attributes[n].value) {
 					ninjaBanner.setAttribute(banner.attributes[n].name, banner.attributes[n].value);
 				}
 			}
 			//Adjusting margin per size of document
-			//this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-banner {overflow: visible !important; margin-top: -'+Math.floor(this._template.size.height/2)+'px; margin-left: -'+Math.floor(this._template.size.width/2)+'px}';
 			this.document.head.getElementsByTagName('style')[0].innerHTML += '\n ninja-content {overflow: visible !important;} ninja-content, ninja-viewport {width: ' + this._template.size.width + 'px; height: ' + this._template.size.height + 'px;}';
 			//Setting content in template
     		ninjaBanner.innerHTML = banner.innerHTML;
@@ -204,7 +211,7 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
     		//Removing event, only needed on initial load
     		this._observer.body.disconnect();
     		this._observer.body = null;
-    		//Removing loading container
+    		//Removing loading container (should be removed)
     		this.document.body.removeChild(this.document.getElementsByTagName('ninjaloadinghack')[0]);
    			//Getting style and link tags in document
             var stags = this.document.getElementsByTagName('style'),
@@ -218,8 +225,12 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
 				for (i = 0; i < ltags.length; i++) {
 					//
 					if (ltags[i].href) {
-						//TODO: Verify this works for tags in body as well (working in head)
-						this.document.head.insertBefore(this.getStyleTagFromCssFile(ltags[i]), ltags[i]) || this.document.body.insertBefore(this.getStyleTagFromCssFile(ltags[i]), ltags[i]);
+						//Inseting <style> right above of <link> to maintain hierarchy
+						try {
+							this.document.head.insertBefore(this.getStyleTagFromCssFile(ltags[i]), ltags[i])
+						} catch (e) {
+							this.document.body.insertBefore(this.getStyleTagFromCssFile(ltags[i]), ltags[i]);
+						}
 						//Disabling tag once it has been reloaded
 						ltags[i].setAttribute('disabled', 'true');
 					} else {
-- 
cgit v1.2.3


From 3ce003c8d99f0043d460b5833c9e5e6bf6a9f0a7 Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Tue, 15 May 2012 11:24:05 -0700
Subject: Adding animation sub-category to new file

Adding animation sub-category to template in new file.
---
 js/io/templates/descriptor.json     | 17 +++++++++++++----
 js/io/templates/files/animation.txt | 18 ++++++++++++++++++
 js/mediators/io-mediator.js         |  2 +-
 3 files changed, 32 insertions(+), 5 deletions(-)
 create mode 100755 js/io/templates/files/animation.txt

diff --git a/js/io/templates/descriptor.json b/js/io/templates/descriptor.json
index 0b2b70e5..9c9c4ac8 100644
--- a/js/io/templates/descriptor.json
+++ b/js/io/templates/descriptor.json
@@ -13,7 +13,7 @@
 		"name":"Template",
 		"uri":"/template",
 		"type":"directory",
-        "children":["js/io/templates/files/banner.txt"]
+        "children":["js/io/templates/files/banner.txt", "js/io/templates/files/animation.txt"]
 	},
 	
 	"js/io/templates/files/html.txt":{
@@ -90,7 +90,7 @@
 		"uri":"js/io/templates/files/banner.txt",
 		"type":"file",
         "fileExtension":".html",
-        "children":["120x600", "160x600", "200x200", "250x250", "300x250", "336x280", "550x400"]
+        "children":["120x600", "160x600", "200x200", "250x250", "300x250", "336x280"]
 	},
     
     "120x600":{
@@ -123,8 +123,17 @@
         "uri": "336x280",
         "type":"file"
     },
-    "550x400":{
-        "name": "Animation Default",
+    
+    "js/io/templates/files/animation.txt":{
+		"name":"Animation",
+		"uri":"js/io/templates/files/animation.txt",
+		"type":"file",
+        "fileExtension":".html",
+        "children":["550x400"]
+	},
+	
+	"550x400":{
+        "name": "Default",
         "uri": "550x400",
         "type":"file"
     }
diff --git a/js/io/templates/files/animation.txt b/js/io/templates/files/animation.txt
new file mode 100755
index 00000000..33b45e53
--- /dev/null
+++ b/js/io/templates/files/animation.txt
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+
+<div class="ninja-content-wrapper">
+	
+	<!-- Created with Motorola Mobility Ninja -->
+	
+	<!-- Ninja-Banner Dimensions@@@ -->
+	
+	<div class="ninja-banner">
+	
+		<style type="text/css">
+			.ninja-content-wrapper {}
+			.ninja-banner {}
+		</style>
+
+	</div>
+
+</div>
\ No newline at end of file
diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js
index 7a905fc6..696a69dc 100644
--- a/js/mediators/io-mediator.js
+++ b/js/mediators/io-mediator.js
@@ -77,7 +77,7 @@ exports.IoMediator = Montage.create(Component, {
                 //TODO: Improve template data injection
                 function parseTemplate (content, template) {
                 	//
-                	if (template.name.toLowerCase() === 'banner') {
+                	if (template.name.toLowerCase() === 'banner' || template.name.toLowerCase() === 'animation') {
                 		//Getting dimensions of banner
                 		var dimensions = template.id.split('x');
                 		dimensions = {width: String(dimensions[0])+'px', height: String(dimensions[1])+'px'};
-- 
cgit v1.2.3


From bffc9b2a4bd3480a6e369a36660ce402f7e16aba Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Tue, 15 May 2012 12:01:37 -0700
Subject: File save for banner template

Adding file save for templates, completing I/O.
---
 js/document/models/base.js  |  2 ++
 js/mediators/io-mediator.js | 47 +++++++++++++++++++++++++++++++++++++--------
 2 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/js/document/models/base.js b/js/document/models/base.js
index 0f58e75c..5f2a5893 100755
--- a/js/document/models/base.js
+++ b/js/document/models/base.js
@@ -138,6 +138,7 @@ exports.BaseDocumentModel = Montage.create(Component, {
         			file: this.file,
         			webgl: this.webGlHelper.glData,
         			styles: this.getStyleSheets(),
+        			template: this.fileTemplate,
         			document: this.views.design.iframe.contentWindow.document,
         			head: this.views.design.iframe.contentWindow.document.head,
         			body: this.views.design.iframe.contentWindow.document.body
@@ -165,6 +166,7 @@ exports.BaseDocumentModel = Montage.create(Component, {
         			file: this.file,
         			webgl: this.webGlHelper.glData,
         			css: this.getStyleSheets(),
+        			template: this.fileTemplate,
         			document: this.views.design.iframe.contentWindow.document,
         			head: this.views.design.iframe.contentWindow.document.head,
         			body: this.views.design.iframe.contentWindow.document.body
diff --git a/js/mediators/io-mediator.js b/js/mediators/io-mediator.js
index 696a69dc..aa2165c7 100644
--- a/js/mediators/io-mediator.js
+++ b/js/mediators/io-mediator.js
@@ -169,7 +169,11 @@ exports.IoMediator = Montage.create(Component, {
             switch (doc.mode) {
                 case 'html':
                     //Getting content from function to properly handle saving assets (as in external if flagged)
-                    contents = this.parseNinjaTemplateToHtml(doc);
+                    if (doc.template && (doc.template.type === 'banner' || doc.template.type === 'animation')) {
+                    	contents = this.parseNinjaTemplateToHtml(doc, true);
+                    } else {
+                    	contents = this.parseNinjaTemplateToHtml(doc);
+                    }
                     break;
                 default:
                     contents = doc.content;
@@ -214,7 +218,7 @@ exports.IoMediator = Montage.create(Component, {
     //TODO: Expand to allow more templates, clean up variables
     parseNinjaTemplateToHtml: {
         enumerable: false,
-        value: function (template) {
+        value: function (template, ninjaWrapper) {
             var regexRootUrl, rootUrl = this.application.ninja.coreIoApi.rootUrl + escape((this.application.ninja.documentController.documentHackReference.root.split(this.application.ninja.coreIoApi.cloudData.root)[1]));
             regexRootUrl = new RegExp(rootUrl.replace(/\//gi, '\\\/'), 'gi');
             //Injecting head and body into old document
@@ -446,7 +450,11 @@ exports.IoMediator = Montage.create(Component, {
                     webglrdgetag.setAttribute('type', 'text/javascript');
                     webglrdgetag.setAttribute('src', rdgeDirName + '/rdge-compiled.js');
                     webglrdgetag.setAttribute('data-ninja-webgl-rdge', 'true');
-                    template.file.content.document.head.appendChild(webglrdgetag);
+                    if (ninjaWrapper) {
+                    	template.file.content.document.body.getElementsByTagName('ninja-content')[0].appendChild(webglrdgetag);
+                    } else {
+                    	template.file.content.document.head.appendChild(webglrdgetag);
+                    }
                 }
                 //
                 if (!webgllibtag) {
@@ -454,20 +462,32 @@ exports.IoMediator = Montage.create(Component, {
                     webgllibtag.setAttribute('type', 'text/javascript');
                     webgllibtag.setAttribute('src', rdgeDirName + '/canvas-runtime.js');
                     webgllibtag.setAttribute('data-ninja-webgl-lib', 'true');
-                    template.file.content.document.head.appendChild(webgllibtag);
+                    if (ninjaWrapper) {
+                    	template.file.content.document.body.getElementsByTagName('ninja-content')[0].appendChild(webgllibtag);
+                    } else {
+                    	template.file.content.document.head.appendChild(webgllibtag);
+                    }
                 }
                 //
                 if (!webgltag) {
                     webgltag = template.file.content.document.createElement('script');
                     webgltag.setAttribute('data-ninja-webgl', 'true');
-                    template.file.content.document.head.appendChild(webgltag);
+                    if (ninjaWrapper) {
+                    	template.file.content.document.body.getElementsByTagName('ninja-content')[0].appendChild(webgltag);
+                    } else {
+	                    template.file.content.document.head.appendChild(webgltag);
+	                }
                 }
                 //TODO: Remove this tag and place inside JS file
                 if (!webgljstag) {
                     webgljstag = template.file.content.document.createElement('script');
                     webgljstag.setAttribute('type', 'text/javascript');
                     webgljstag.setAttribute('data-ninja-webgl-js', 'true');
-                    template.file.content.document.head.appendChild(webgljstag);
+                    if (ninjaWrapper) {
+                    	template.file.content.document.body.getElementsByTagName('ninja-content')[0].appendChild(webgljstag);
+                    } else {
+	                    template.file.content.document.head.appendChild(webgljstag);
+	                }
                 }
                 //TODO: Decide if this should be over-writter or only written on creation
                 var rootElement = 'document.body'; //TODO: Set actual root element
@@ -549,10 +569,15 @@ for (var m in template.mjs) {
 
 
 
-
+			
 
             //Cleaning URLs from HTML
-            var 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));
+            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) {
@@ -561,6 +586,12 @@ for (var m in template.mjs) {
                     return url;
                 }
             }
+            //
+            if (ninjaWrapper) {
+            	cleanHTML = cleanHTML.replace(/ninja-viewport/gi, 'div');
+            	cleanHTML = cleanHTML.replace(/ninja-content/gi, 'div');
+            }
+            
             //
             return this.getPrettyHtml(cleanHTML.replace(this.getAp