From 4b5cc9cf1f01552f61c08b9299b6e99366432e03 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Tue, 24 Apr 2012 15:36:03 -0700
Subject: Added a body controller

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/controllers/elements/body-controller.js         | 44 ++++++++++++++++++++++
 js/controllers/elements/controller-factory.js      |  5 ++-
 js/data/pi/pi-data.js                              | 14 +++++++
 js/document/document-html.js                       |  3 +-
 js/document/templates/montage-web/default_html.css |  2 +-
 js/document/templates/montage-web/index.html       |  2 +-
 js/models/properties-3d.js                         |  3 +-
 7 files changed, 67 insertions(+), 6 deletions(-)
 create mode 100755 js/controllers/elements/body-controller.js

diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js
new file mode 100755
index 00000000..fbbb7c6e
--- /dev/null
+++ b/js/controllers/elements/body-controller.js
@@ -0,0 +1,44 @@
+/* <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/core/core").Montage,
+    ElementController = require("js/controllers/elements/element-controller").ElementController;
+
+exports.BodyController = Montage.create(ElementController, {
+
+    // TODO - perspective distance needs to be passed in as "dist" and matrix3d needs to be passed in as "mat"
+    set3DProperties: {
+        value: function(el, props, update3DModel) {
+        }
+    },
+
+    getProperty: {
+        value: function(el, p) {
+        }
+    },
+
+    setProperty: {
+        value: function(el, p, value) {
+        }
+    },
+
+    setAttribute: {
+        value: function(el, att, value) {
+        }
+    },
+
+    getPerspectiveDist: {
+        value: function(el) {
+            if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.perspectiveDist) {
+                return el.elementModel.props3D.perspectiveDist;
+            } else {
+                var dist = this.application.ninja.stylesController.getPerspectiveDistFromElement(el, true);
+                el.elementModel.props3D.perspectiveDist = dist;
+                return dist;
+            }
+        }
+    }
+});
diff --git a/js/controllers/elements/controller-factory.js b/js/controllers/elements/controller-factory.js
index a772eb16..1bbbbce0 100755
--- a/js/controllers/elements/controller-factory.js
+++ b/js/controllers/elements/controller-factory.js
@@ -6,7 +6,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 var Montage         = require("montage/core/core").Montage;
 
-var BlockController = require("js/controllers/elements/block-controller").BlockController,
+var BodyController = require("js/controllers/elements/body-controller").BodyController,
+    BlockController = require("js/controllers/elements/block-controller").BlockController,
     StageController = require("js/controllers/elements/stage-controller").StageController,
     ShapesController = require("js/controllers/elements/shapes-controller").ShapesController,
 	ImageController = require("js/controllers/elements/image-controller").ImageController,
@@ -27,6 +28,8 @@ exports.ControllerFactory = Montage.create(Montage, {
                     return BlockController;
                 } else if(value.indexOf("stage") !== -1) {
                     return StageController;
+                } else if(value.indexOf("body") !== -1) {
+                    return BodyController;
                 } else if(value.indexOf("shape") !== -1) {
                     return ShapesController;
                 } else if(value.indexOf("canvas") !== -1) {
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index 157c54ec..65161b4f 100755
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -9,6 +9,20 @@ var Montage = require("montage/core/core").Montage,
 
 exports.PiData = Montage.create( Montage, {
 
+    bodyPi: {
+        value: [
+            {
+                label: "Style",
+
+                                Section: [
+                                    [
+
+                                    ]
+                                ]
+            }
+        ]
+    },
+
     stagePi: {
         value: [
             {
diff --git a/js/document/document-html.js b/js/document/document-html.js
index 8cb88516..b19ca0d0 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -270,7 +270,8 @@ exports.HtmlDocument = Montage.create(Component, {
 
                     //TODO Finish this implementation once we start caching Core Elements
                     // Assign a model to the UserContent and add the ViewPort reference to it.
-                    document.application.njUtils.makeElementModel(this.documentRoot, "Stage", "stage");
+                    document.application.njUtils.makeElementModel(this.documentRoot, "Body", "body");
+//                    this.documentRoot.elementModel.props3D.init(this.documentRoot, true);
 
                     for(i = 0; i < this._stylesheets.length; i++) {
                         if(this._stylesheets[i].ownerNode.id === "nj-stage-stylesheet") {
diff --git a/js/document/templates/montage-web/default_html.css b/js/document/templates/montage-web/default_html.css
index db069d4e..08e39f22 100755
--- a/js/document/templates/montage-web/default_html.css
+++ b/js/document/templates/montage-web/default_html.css
@@ -11,7 +11,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 }
 
 .active-element-outline {
-  outline: #adff2f solid 2px;
+    outline: #adff2f solid 2px;
 }
 
 .nj-preset-transition {
diff --git a/js/document/templates/montage-web/index.html b/js/document/templates/montage-web/index.html
index 90b0f7fd..c52a5394 100755
--- a/js/document/templates/montage-web/index.html
+++ b/js/document/templates/montage-web/index.html
@@ -42,7 +42,7 @@
 
 	<body>
 		
-		<div>IPSUM</div>
+		<!--<div>IPSUM</div>-->
 
 	</body>
 
diff --git a/js/models/properties-3d.js b/js/models/properties-3d.js
index c1270c3b..e571e505 100755
--- a/js/models/properties-3d.js
+++ b/js/models/properties-3d.js
@@ -5,8 +5,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> */
 
 var Montage = require("montage/core/core").Montage,
-    Component = require("montage/ui/component").Component,
-    NJUtils = require("js/lib/NJUtils").NJUtils;
+    Component = require("montage/ui/component").Component;
 
 exports.Properties3D = Montage.create(Component, {
 
-- 
cgit v1.2.3


From 1ccc4d6dcff232b00763a5a49d7ad7a91f78ad3f Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 26 Apr 2012 13:24:51 -0700
Subject: Fixing the element model and adding get element

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/document/document-html.js            |  6 ++++++
 js/document/html-document.js            | 10 +++++++---
 js/lib/NJUtils.js                       | 14 ++++++-------
 js/models/element-model.js              | 35 ++++++++++++++++++---------------
 js/panels/properties.reel/properties.js |  1 +
 5 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/js/document/document-html.js b/js/document/document-html.js
index b19ca0d0..24eb4f47 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -310,6 +310,12 @@ exports.HtmlDocument = Montage.create(Component, {
         }
     },
 
+    GetElementFromPoint: {
+        value: function(x, y) {
+            return this._window.getElement(x,y);
+        }
+    },
+
     // Handler for user content main reel. Gets called once the main reel of the template
     // gets deserialized.
     // Setting up the currentSelectedContainer to the document body.
diff --git a/js/document/html-document.js b/js/document/html-document.js
index 3876670c..3dbf96ce 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -759,10 +759,14 @@ exports.HTMLDocument = Montage.create(TextDocument, {
 					//TODO Finish this implementation once we start caching Core Elements
 					// Assign a model to the UserContent and add the ViewPort reference to it.
 					NJUtils.makeElementModel(this.documentRoot, "Stage", "stage");
-					//this.documentRoot.elementModel.viewPort = this.iframe.contentWindow.document.getElementById("Viewport");
-					NJUtils.makeElementModel(this.stageBG, "Stage", "stage");
+                    NJUtils.makeElementModel(this.stageBG, "Stage", "stage");
 					NJUtils.makeElementModel(this.iframe.contentWindow.document.getElementById("Viewport"), "Stage", "stage");
-					 
+
+                    // Initialize the 3D properties
+                    this.documentRoot.elementModel.props3D.init(this.documentRoot, true);
+                    this.stageBG.elementModel.props3D.init(this.stageBG, true);
+                    this.iframe.contentWindow.document.getElementById("Viewport").elementModel.props3D.init(this.iframe.contentWindow.document.getElementById("Viewport"), true);
+
 					for(i = 0; i < this._stylesheets.length; i++) {
 						if(this._stylesheets[i].ownerNode.id === this._stageStyleSheetId) {
 							this.documentRoot.elementModel.defaultRule = this._stylesheets[i];
diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js
index 67bb59c4..dae128e4 100755
--- a/js/lib/NJUtils.js
+++ b/js/lib/NJUtils.js
@@ -94,10 +94,10 @@ exports.NJUtils = Object.create(Object.prototype, {
     ///// TODO: find a different place for this function
     makeElementModel: {
         value: function(el, selection, controller, isShape) {
+            //el.elementModel = Montage.create(ElementModel).initialize(el.nodeName, selection, controller, isShape);
+
             var p3d = Montage.create(Properties3D);
-            if(selection === "Stage") {
-                p3d.init(el, true);
-            }
+
             var shapeProps = null;
             var pi = controller + "Pi";
 
@@ -143,6 +143,7 @@ exports.NJUtils = Object.create(Object.prototype, {
                     isShape:    { value: isShape}
             });
 
+
         }
     },
 
@@ -167,15 +168,12 @@ exports.NJUtils = Object.create(Object.prototype, {
                     break;
                 case "canvas":
                     isShape = el.getAttribute("data-RDGE-id");
-                    if(isShape)
-                    {
+                    if(isShape) {
                         // TODO - Need more info about the shape
                         selection = "canvas";
                         controller = "shape";
                         isShape = true;
-                    }
-                    else
-                    {
+                    } else {
                         selection = "canvas";
                         controller = "canvas";
                     }
diff --git a/js/models/element-model.js b/js/models/element-model.js
index fa02fd38..0e199a67 100755
--- a/js/models/element-model.js
+++ b/js/models/element-model.js
@@ -4,7 +4,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
 
-var Montage = require("montage/core/core").Montage;
+var Montage = require("montage/core/core").Montage,
+    Properties3D    = require("js/models/properties-3d").Properties3D,
+    ShapeModel    = require("js/models/shape-model").ShapeModel,
+    ControllerFactory   = require("js/controllers/elements/controller-factory").ControllerFactory;
 
 exports.ElementModel = Montage.create(Montage, {
     key:            { value: "_model_"},
@@ -16,36 +19,36 @@ exports.ElementModel = Montage.create(Montage, {
 
     id:             { value: "" },
     classList:      { value: null },
-
     defaultRule:    { value: null },
 
     top:            { value: null },
     left:           { value: null },
     width:          { value: null },
     height:         { value: null },
-
-    /**
-     * Properties 3D
-     */
     props3D:        { value: null },
 
-    /**
-     * Shape Info
-     */
     isShape:        { value: false },
     shapeModel:     { value: null },
-
-    /**
-     * SnapManager 2d Snap Cache Info
-     */
     isIn2DSnapCache : { value: false },
 
-    /**
-     * Color info
-     */
     fill:           { value: null },
     stroke:         { value: null },
 
+    initialize: {
+        value: function(type, selection, controller, isShape) {
+            /*
+            this.type = type;
+            this.selection = selection;
+
+            controller: { value: ControllerFactory.getController(controller)},
+            pi:         { value: pi},
+            props3D:    { value: p3d},
+            shapeModel: { value: shapeProps},
+            isShape:    { value: isShape}
+            */
+        }
+    },
+
     getProperty: {
         value: function(property) {
             var key = this.key + property;
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index b21014c1..ee90cd64 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -174,6 +174,7 @@ 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();
             } else {
                 if(this.application.ninja.selectedElements.length === 1) {
-- 
cgit v1.2.3


From 238586be0df568c6804268d97bf9d3ef7cd33fda Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 26 Apr 2012 15:33:48 -0700
Subject: Simplifying the getElement method from stage and adding an exclusion
 list to the new template

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/document/document-html.js      | 15 ++++++++
 js/stage/stage.reel/stage.js      | 73 +++++++++++++++++++--------------------
 js/tools/EyedropperTool.js        |  2 +-
 js/tools/FillTool.js              |  2 +-
 js/tools/InkBottleTool.js         |  2 +-
 js/tools/ShapeTool.js             |  2 +-
 js/tools/ToolBase.js              |  4 +--
 js/tools/TranslateObject3DTool.js |  2 +-
 js/tools/modifier-tool-base.js    |  2 +-
 9 files changed, 58 insertions(+), 46 deletions(-)

diff --git a/js/document/document-html.js b/js/document/document-html.js
index 24eb4f47..d9789cd2 100755
--- a/js/document/document-html.js
+++ b/js/document/document-html.js
@@ -31,6 +31,10 @@ exports.HtmlDocument = Montage.create(Component, {
         value: null
     },
 
+    exclusionList: {
+        value: ["HTML"]
+    },
+
     // Getters for the model.
     // TODO: Change how these properties are accessed through Ninja
     name: {
@@ -316,6 +320,17 @@ exports.HtmlDocument = Montage.create(Component, {
         }
     },
 
+    inExclusion: {
+        value: function(element) {
+            if(this.exclusionList.indexOf(element.nodeName) === -1) {
+                return -1;
+            }
+
+            return 1;
+
+        }
+    },
+
     // Handler for user content main reel. Gets called once the main reel of the template
     // gets deserialized.
     // Setting up the currentSelectedContainer to the document body.
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 8382135d..fb7abf48 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -521,62 +521,59 @@ exports.Stage = Montage.create(Component, {
     },
 
     /**
-     * GetSelectableElement: Returns a selectable object (direct child of current container) at clicked point
+     * GetElement: Returns the element or selectable element under the X,Y coordinates passed as an obj with x,y
      *
-     * @param: X,Y
-     * @return: Returns the current container if the the X,Y hits an element in the exclusion list
+     * @param position: mouse event
+     * @param selectable (default == null) if true this will return the current container element
+     * @return: Returns the element or container or null if the the X,Y hits the exclusion list and tool cannot operate on stage
      */
-    GetSelectableElement: {
-        value: function(pos) {
-            var item = this.GetElement(pos);
-            if(this.application.ninja.currentDocument.inExclusion(item) !== -1) {
-                return this.application.ninja.currentSelectedContainer;
+    getElement: {
+        value: function(position, selectable) {
+            var point, element;
+
+            point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(position.pageX, position.pageY));
+            element = this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop);
+
+            // workaround Chrome 3d bug
+            if(this.application.ninja.toolsData.selectedToolInstance._canSnap && this.application.ninja.currentDocument.inExclusion(element) !== -1) {
+                element = this.getElementUsingSnapping(point);
             }
-            var activeContainerId = this.application.ninja.currentSelectedContainer.uuid;
-            if(item.parentNode.uuid === activeContainerId) {
-                return item;
-            } else {
-                var outerElement = item.parentNode;
 
-                while(outerElement.parentNode && outerElement.parentNode.uuid !== activeContainerId) {
-                    // If element is higher up than current container then return
-                    if(outerElement.id === "UserContent") return;
-                    // else keep going up the chain
-                    outerElement = outerElement.parentNode;
+            if(selectable) {
+
+                if(this.application.ninja.currentDocument.inExclusion(element) !== -1) {
+                    return this.application.ninja.currentSelectedContainer;
                 }
 
-                return outerElement;
-            }
-        }
-    },
+                var activeContainerId = this.application.ninja.currentSelectedContainer.uuid;
+                if(element.parentNode.uuid === activeContainerId) {
+                    return element;
+                } else {
+                    var outerElement = element.parentNode;
 
-    /**
-     * GetElement: Returns the object under the X,Y coordinates passed as an obj with x,y
-     *
-     * @param: X,Y
-     * @return: Returns the Object or null if the the X,Y hits the exclusion list and tool cannot operate on stage
-     */
-    GetElement: {
-        value: function(pos) {
-            var point = webkitConvertPointFromPageToNode(this.canvas, new WebKitPoint(pos.pageX, pos.pageY)),
-                elt = this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop);
+                    while(outerElement.parentNode && outerElement.parentNode.uuid !== activeContainerId) {
+                        // If element is higher up than current container then return
+                        if(outerElement.id === "UserContent") return;
+                            // else keep going up the chain
+                            outerElement = outerElement.parentNode;
+                        }
+
+                    return outerElement;
+                }
 
-            // workaround Chrome 3d bug
-            if(this.application.ninja.toolsData.selectedToolInstance._canSnap && this.application.ninja.currentDocument.inExclusion(elt) !== -1) {
-                return this._getElementUsingSnapping(point);
             } else {
-                return elt;
+                return element;
             }
         }
     },
 
     /**
-     * _getElementUsingSnapping: Returns the object at point using snap manager
+     * getElementUsingSnapping: Returns the object at point using snap manager
      *
      * @param: point
      * @return: Returns the Object in the user document under the point
      */
-    _getElementUsingSnapping: {
+    getElementUsingSnapping: {
         value: function(point) {
             this.stageDeps.snapManager.enableElementSnap( true );
             var hitRec = this.stageDeps.snapManager.snap(point.x, point.y, true);
diff --git a/js/tools/EyedropperTool.js b/js/tools/EyedropperTool.js
index d627f03b..346975b2 100755
--- a/js/tools/EyedropperTool.js
+++ b/js/tools/EyedropperTool.js
@@ -104,7 +104,7 @@ exports.EyedropperTool = Montage.create(toolBase, {
         value : function (event) {
             var c,
                 color,
-                obj = this.application.ninja.stage.GetElement(event);
+                obj = this.application.ninja.stage.getElement(event);
             if (obj)
             {
                 if(this.application.ninja.currentDocument.inExclusion(obj) !== -1)
diff --git a/js/tools/FillTool.js b/js/tools/FillTool.js
index 746f20cf..87a093ff 100755
--- a/js/tools/FillTool.js
+++ b/js/tools/FillTool.js
@@ -22,7 +22,7 @@ exports.FillTool = Montage.create(ModifierToolBase, {
     HandleMouseMove: {
         value : function (event)
 		{
-            var obj = this.application.ninja.stage.GetSelectableElement(event);
+            var obj = this.application.ninja.stage.getElement(event, true);
             var cursor = "url('images/cursors/fill.png') 14 14, default";
             var canColor = true;
             if (obj)
diff --git a/js/tools/InkBottleTool.js b/js/tools/InkBottleTool.js
index 960c19fa..fd17f4d6 100755
--- a/js/tools/InkBottleTool.js
+++ b/js/tools/InkBottleTool.js
@@ -16,7 +16,7 @@ exports.InkBottleTool = Montage.create(ModifierToolBase, {
     HandleMouseMove: {
         value : function (event)
 		{
-            var obj = this.application.ninja.stage.GetSelectableElement(event);
+            var obj = this.application.ninja.stage.getElement(event, true);
             var cursor = "url('images/cursors/ink.png') 6 11, default";
             var canColor = true;
             if (obj)
diff --git a/js/tools/ShapeTool.js b/js/tools/ShapeTool.js
index f3b5e92d..21a5a025 100755
--- a/js/tools/ShapeTool.js
+++ b/js/tools/ShapeTool.js
@@ -138,7 +138,7 @@ exports.ShapeTool = Montage.create(DrawingTool, {
 	_showFeedbackOnMouseMove: {
 		value: function (event) {
 			// TODO - This call is causing the canvas to redraw 3 times per mouse move
-			var targetedObject = this.application.ninja.stage.GetSelectableElement(event);
+			var targetedObject = this.application.ninja.stage.getElement(event, true);
 
 			if (targetedObject) {
 				if((targetedObject.nodeName === "CANVAS") && !ShapesController.isElementAShape(targetedObject))
diff --git a/js/tools/ToolBase.js b/js/tools/ToolBase.js
index 69ac5727..f43b1b58 100755
--- a/js/tools/ToolBase.js
+++ b/js/tools/ToolBase.js
@@ -89,9 +89,9 @@ exports.toolBase = Montage.create(Component, {
 
             if(this._canOperateOnStage) {
                 if(event.shiftKey) {
-                    this.application.ninja.selectionController.shiftSelectElement(this.application.ninja.stage.GetElement(event));
+                    this.application.ninja.selectionController.shiftSelectElement(this.application.ninja.stage.getElement(event));
                 } else {
-                    this.application.ninja.selectionController.selectElement(this.application.ninja.stage.GetElement(event));
+                    this.application.ninja.selectionController.selectElement(this.application.ninja.stage.getElement(event));
                 }
             }
 
diff --git a/js/tools/TranslateObject3DTool.js b/js/tools/TranslateObject3DTool.js
index 72a55322..b4f55bd9 100755
--- a/js/tools/TranslateObject3DTool.js
+++ b/js/tools/TranslateObject3DTool.js
@@ -83,7 +83,7 @@ exports.TranslateObject3DTool = Montage.create(Translate3DToolBase, {
                     // Check that hitRec's element matches element that browser says we clicked on
                     // TODO - This is still not working when using a handle that is on top of an
                     // element that is not currently selected
-                    var elt = this.application.ninja.stage.GetSelectableElement(event);
+                    var elt = this.application.ninja.stage.getElement(event, true);
                     if(elt && (elt !== hitRec.getElement()))
                     {
                         hitRec = snapManager.findHitRecordForElement(elt);
diff --git a/js/tools/modifier-tool-base.js b/js/tools/modifier-tool-base.js
index 2e006c35..d023206a 100755
--- a/js/tools/modifier-tool-base.js
+++ b/js/tools/modifier-tool-base.js
@@ -134,7 +134,7 @@ exports.ModifierToolBase = Montage.create(DrawingTool, {
 				var hitRec = snapManager.snap(point.x, point.y, do3DSnap);
 
                 // TODO - Check that hitRec's element matches element that browser says we clicked on
-                var elt = this.application.ninja.stage.GetSelectableElement(event);
+                var elt = this.application.ninja.stage.getElement(event, true);
                 if(elt !== hitRec.getElement())
                 {
                     hitRec = snapManager.findHitRecordForElement(elt);
-- 
cgit v1.2.3


From bcfb200482c26b2bfc0d6577b1eb0de7a19a6762 Mon Sep 17 00:00:00 2001
From: John Mayhew
Date: Thu, 26 Apr 2012 16:23:59 -0700
Subject: Removing all "module" declarations and replaced with "prototype" in
 preparation for montage converting to the new "prototype" format fully

---
 index.html                                         |   3 +-
 js/components/about-box.reel/about-box.html        |   5 +-
 js/components/checkbox.reel/checkbox.html          |   3 +-
 js/components/colorbar.reel/colorbar.html          |   5 +-
 js/components/colorwheel.reel/colorwheel.html      |   5 +-
 js/components/combobox.reel/combobox.html          |   3 +-
 .../gradientpicker.reel/gradientpicker.html        |   5 +-
 js/components/hottext.reel/hottext.html            |   5 +-
 js/components/hottextunit.reel/hottextunit.html    |   5 +-
 .../layout/bread-crumb.reel/bread-crumb.html       |  11 +-
 .../layout/document-bar.reel/document-bar.html     |   8 +-
 .../layout/document-entry.reel/document-entry.html |   5 +-
 .../layout/documents-tab.reel/documents-tab.html   |  11 +-
 .../layout/stage-mode.reel/stage-mode.html         |   5 +-
 .../layout/subtool-button.reel/subtool-button.html |   5 +-
 .../layout/tool-button.reel/tool-button.html       |   5 +-
 .../layout/tools-list.reel/tools-list.html         |  77 +++++---------
 .../tools-properties.reel/tools-properties.html    |  56 ++++------
 js/components/menu/menu-entry.reel/menu-entry.html |  14 +--
 js/components/menu/menu-item.reel/menu-item.html   |  14 +--
 js/components/menu/menu.reel/menu.html             |  17 ++-
 .../popup-manager.reel/popup-manager.html          |   5 +-
 js/components/popup-manager.reel/popup-manager.js  |   4 +-
 js/components/popup.reel/popup.html                |   5 +-
 js/components/radio.reel/radio.html                |   3 +-
 js/components/slider.reel/slider.html              |   5 +-
 js/components/textfield.reel/textfield.html        |   3 +-
 .../brush-properties.reel/brush-properties.html    |  17 ++-
 .../eraser-properties.reel/eraser-properties.html  |   5 +-
 .../eyedropper-properties.html                     |   5 +-
 .../fill-properties.reel/fill-properties.html      |   8 +-
 .../ink-bottle-properties.html                     |  14 +--
 .../line-properties.reel/line-properties.html      |   5 +-
 .../object3d-properties.html                       |   5 +-
 .../oval-properties.reel/oval-properties.html      |   8 +-
 .../pan-properties.reel/pan-properties.html        |   5 +-
 .../pen-properties.reel/pen-properties.html        |   8 +-
 .../pencil-properties.reel/pencil-properties.html  |   5 +-
 .../rect-properties.reel/rect-properties.html      |  17 ++-
 .../rotate-stage-properties.html                   |   5 +-
 .../selection-properties.html                      |   3 +-
 .../shape-properties.reel/shape-properties.html    |  27 ++---
 .../subselection-properties.html                   |   5 +-
 .../tag-properties.reel/tag-properties.html        |   3 +-
 .../text-properties.reel/text-properties.html      |  56 ++++------
 .../zoom-properties.reel/zoom-properties.html      |   5 +-
 js/components/treeview/branch.reel/branch.html     |  23 ++--
 js/components/treeview/leaf.reel/leaf.html         |   8 +-
 .../treeview/ninja-branch.reel/ninja-branch.html   |  23 ++--
 .../treeview/ninja-leaf.reel/ninja-leaf.html       |   8 +-
 js/components/treeview/treeview.reel/treeview.html |  17 ++-
 js/components/ui/color-chip.reel/color-chip.html   |   5 +-
 js/components/ui/file-input.reel/file-input.html   |   5 +-
 .../ui/icon-list-basic/icon.reel/icon.html         |   5 +-
 .../icon-list-basic/iconsList.reel/iconsList.html  |  11 +-
 js/components/ui/input-group.reel/input-group.html |  14 +--
 .../ui/property-control.reel/property-control.html |   8 +-
 js/components/ui/tree-basic/tree.reel/tree.html    |  11 +-
 .../ui/tree-basic/treeItem.reel/treeItem.html      |   5 +-
 js/document/templates/montage-html/index.html      |   3 +-
 js/document/templates/montage-web/index.html       |   3 +-
 js/io/ui/cloudpopup.reel/cloudpopup.html           |   5 +-
 .../file-input-field.reel/file-input-field.html    |   5 +-
 .../picker-navigator.reel/picker-navigator.html    |   5 +-
 .../new-file-location.reel/new-file-location.html  |  14 +--
 .../new-file-options-navigator.html                |   8 +-
 js/io/ui/save-as-dialog.reel/save-as-dialog.html   |   8 +-
 js/ninja.reel/ninja.html                           | 116 +++++++--------------
 .../CSSPanel/CSSPanelBase.reel/CSSPanelBase.html   |  11 +-
 .../ComputedStyleSubPanel.html                     |   5 +-
 .../materials-library-panel.html                   |  17 ++-
 .../materials-popup.reel/materials-popup.html      |  18 ++--
 js/panels/Panel.reel/Panel.html                    |  24 ++---
 js/panels/PanelContainer.reel/PanelContainer.html  |  24 ++---
 .../projectpanelbase.reel/projectpanelbase.html    |   5 +-
 js/panels/Timeline/Keyframe.reel/Keyframe.html     |   5 +-
 js/panels/Timeline/Layer.reel/Layer.html           |  47 +++------
 .../Timeline/PropertyTrack.reel/PropertyTrack.html |   5 +-
 js/panels/Timeline/Span.reel/Span.html             |   5 +-
 js/panels/Timeline/Style.reel/Style.html           |  14 +--
 .../Timeline/TimelinePanel.reel/TimelinePanel.html |  23 ++--
 .../Timeline/TimelineTrack.reel/TimelineTrack.html |  38 +++----
 js/panels/Timeline/Track.reel/Track.html           |  11 +-
 .../Timeline/TrackSpacer.reel/TrackSpacer.html     |   5 +-
 js/panels/Timeline/Tween.reel/Tween.html           |  11 +-
 .../color/colorchippopup.reel/colorchippopup.html  |   5 +-
 .../color/colorpanelbase.reel/colorpanelbase.html  |   5 +-
 .../colorpanelpopup.reel/colorpanelpopup.html      |   5 +-
 .../color/colortoolbar.reel/colortoolbar.html      |   5 +-
 .../components-panel.reel/components-panel.html    |  14 +--
 .../animations-presets.html                        |  14 +--
 js/panels/presets/content.reel/content.html        |  17 ++-
 .../presets/style-presets.reel/style-presets.html  |  14 +--
 .../transitions-presets.html                       |  14 +--
 js/panels/properties.reel/properties.html          |  26 ++---
 .../properties.reel/section.reel/section.html      |   9 +-
 .../color-select.reel/color-select.html            |   9 +-
 .../custom-rows/dual-row.reel/dual-row.html        |   9 +-
 .../custom-rows/single-row.reel/single-row.html    |   6 +-
 .../sections/custom.reel/custom.html               |   9 +-
 .../position-and-size.reel/position-and-size.html  |  15 +--
 .../sections/three-d-view.reel/three-d-view.html   |  36 +++----
 js/stage/stage-view.reel/stage-view.html           |   5 +-
 js/stage/stage.reel/stage.html                     |  17 ++-
 104 files changed, 465 insertions(+), 845 deletions(-)

diff --git a/index.html b/index.html
index 00e8bc5e..0f1c6d51 100755
--- a/index.html
+++ b/index.html
@@ -224,8 +224,7 @@
 	    <script type="text/montage-serialization">
     	    {
             	"owner": {
-                	"module": "montage/ui/loader.reel",
-	                "name": "Loader",
+                	"prototype": "montage/ui/loader.reel",
     	            "properties": {
         	            "mainModule": "js/ninja.reel",
             	        "mainName": "Ninja",
diff --git a/js/components/about-box.reel/about-box.html b/js/components/about-box.reel/about-box.html
index 7142d605..1f41699e 100644
--- a/js/components/about-box.reel/about-box.html
+++ b/js/components/about-box.reel/about-box.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <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/>
@@ -12,8 +12,7 @@
     <script type="text/montage-serialization">
          {
              "owner": {
-                 "module": "js/components/about-box.reel",
-                 "name": "AboutBox",
+                 "prototype": "js/components/about-box.reel",
                  "properties": {
                      "element": {"#": "mainAboutBoxContainer"}
                  }
diff --git a/js/components/checkbox.reel/checkbox.html b/js/components/checkbox.reel/checkbox.html
index 3d523a98..a03d72fb 100755
--- a/js/components/checkbox.reel/checkbox.html
+++ b/js/components/checkbox.reel/checkbox.html
@@ -9,8 +9,7 @@
     <script type="text/montage-serialization">
     {
         "owner": {
-            "module": "js/components/checkbox.reel",
-            "name": "Checkbox",
+            "prototype": "js/components/checkbox.reel",
             "properties": {
                 "element": {"#": "ch_comp"}
             }
diff --git a/js/components/colorbar.reel/colorbar.html b/js/components/colorbar.reel/colorbar.html
index f74f1437..c5bc186a 100755
--- a/js/components/colorbar.reel/colorbar.html
+++ b/js/components/colorbar.reel/colorbar.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!--
 <copyright>
 	This file contains proprietary software owned by Motorola Mobility, Inc.
@@ -16,8 +16,7 @@
    		<script type="text/montage-serialization">
    			{
             	"owner": {
-                	"module": "js/components/colorbar.reel",
-                	"name": "ColorBar",
+                	"prototype": "js/components/colorbar.reel[ColorBar]",
                 	"properties": {
                     	"element": {"#": "colorbar"}
 
diff --git a/js/components/colorwheel.reel/colorwheel.html b/js/components/colorwheel.reel/colorwheel.html
index a9fbfbd9..ef955c2d 100755
--- a/js/components/colorwheel.reel/colorwheel.html
+++ b/js/components/colorwheel.reel/colorwheel.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- 
 <copyright>
 	This file contains proprietary software owned by Motorola Mobility, Inc.
@@ -16,8 +16,7 @@
 		<script type="text/montage-serialization">
    			{
             	"owner": {
-                	"module": "js/components/colorwheel.reel",
-                	"name": "ColorWheel",
+                	"prototype": "js/components/colorwheel.reel[ColorWheel]",
                 	"properties": {
                     	"element": {"#": "colorwheel"}
 
diff --git a/js/components/combobox.reel/combobox.html b/js/components/combobox.reel/combobox.html
index d78cc9c1..a68dd37f 100755
--- a/js/components/combobox.reel/combobox.html
+++ b/js/components/combobox.reel/combobox.html
@@ -9,8 +9,7 @@
     <script type="text/montage-serialization">
     {
         "owner": {
-            "module": "js/components/combobox.reel",
-            "name": "Combobox",
+            "prototype": "js/components/combobox.reel",
             "properties": {
                 "element": {"#": "cb_comp"}
             }
diff --git a/js/components/gradientpicker.reel/gradientpicker.html b/js/components/gradientpicker.reel/gradientpicker.html
index f71c6705..afd42925 100755
--- a/js/components/gradientpicker.reel/gradientpicker.html
+++ b/js/components/gradientpicker.reel/gradientpicker.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- 
  <copyright>
 	This file contains proprietary software owned by Motorola Mobility, Inc.
@@ -16,8 +16,7 @@
 		<script type="text/montage-serialization">
    			{
             	"owner": {
-                	"module": "js/components/gradientpicker.reel",
-                	"name": "GradientPicker",
+                	"prototype": "js/components/gradientpicker.reel[GradientPicker]",
                 	"properties": {
                     	"element": {"#": "gradientpicker"}
 
diff --git a/js/components/hottext.reel/hottext.html b/js/components/hottext.reel/hottext.html
index 3531999c..314d4ca3 100755
--- a/js/components/hottext.reel/hottext.html
+++ b/js/components/hottext.reel/hottext.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <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/>
@@ -13,8 +13,7 @@
     <script type="text/montage-serialization">
         {
             "owner": {
-                "module": "js/components/hottext.reel",
-                "name": "HotText",
+                "prototype": "js/components/hottext.reel[HotText]",
                 "properties": {
                     "element": {"#": "hottext"}
                 }
diff --git a/js/components/hottextunit.reel/hottextunit.html b/js/components/hottextunit.reel/hottextunit.html
index cc0835fb..3f946f9b 100755
--- a/js/components/hottextunit.reel/hottextunit.html
+++ b/js/components/hottextunit.reel/hottextunit.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <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/>
@@ -12,8 +12,7 @@
     <script type="text/montage-serialization">
         {
             "owner": {
-                "module": "js/components/hottextunit.reel",
-                "name": "HotTextUnit",
+                "prototype": "js/components/hottextunit.reel[HotTextUnit]",
                 "properties": {
                     "element": {"#": "hottextunit"}
                 }
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.html b/js/components/layout/bread-crumb.reel/bread-crumb.html
index 413f588d..7e14157e 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.html
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <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/>
@@ -13,8 +13,7 @@
         <script type="text/montage-serialization">
             {
                 "owner": {
-                    "module": "js/components/layout/bread-crumb.reel",
-                    "name": "Breadcrumb",
+                    "prototype": "js/components/layout/bread-crumb.reel[Breadcrumb]",
                     "properties": {
                         "element": {"#": "breadcrumbTrail"},
                         "breadcrumbBt": {"@": "breadCrumbButton"}
@@ -22,8 +21,7 @@
                 },
 
                 "breadCrumbButton": {
-                    "module": "montage/ui/button.reel",
-                    "name": "Button",
+                    "prototype": "montage/ui/button.reel",
                     "properties": {
                         "element": {"#": "breadcrumb_button"}
                     },
@@ -48,8 +46,7 @@
                 },
 
                 "repetition1": {
-                    "module": "montage/ui/repetition.reel",
-                    "name": "Repetition",
+                    "prototype": "montage/ui/repetition.reel",
                     "properties": {
                         "element": {"#": "breadcrumb_container"}
                     },
diff --git a/js/components/layout/document-bar.reel/document-bar.html b/js/components/layout/document-bar.reel/document-bar.html
index bd13f231..8dcaf178 100755
--- a/js/components/layout/document-bar.reel/document-bar.html
+++ b/js/components/layout/document-bar.reel/document-bar.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <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/>
@@ -13,8 +13,7 @@
     <script type="text/montage-serialization">
         {
             "hottext1": {
-                "module": "js/components/hottextunit.reel",
-                "name": "HotTextUnit",
+                "prototype": "js/components/hottextunit.reel[HotTextUnit]",
                 "properties": {
                     "element": {"#": "zoomControlHT"},
                     "minValue":25,
@@ -47,8 +46,7 @@
             },
 
             "owner": {
-                "module": "js/components/layout/document-bar.reel",
-                "name": "DocumentBar",
+                "prototype": "js/components/layout/document-bar.reel",
                 "properties": {
                     "element": {"#": "documentBar"},
                     "designView": {"#": "design"},
diff --git a/js/components/layout/document-entry.reel/document-entry.html b/js/components/layout/document-entry.reel/document-entry.html
index 1cf01737..451d9cc4 100755
--- a/js/components/layout/document-entry.reel/document-entry.html
+++ b/js/components/layout/document-entry.reel/document-entry.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <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/>
@@ -12,8 +12,7 @@
         {
             
             "owner": {
-                "module": "js/components/layout/document-entry.reel",
-                "name": "DocumentEntry",
+                "prototype": "js/components/layout/document-entry.reel",
                 "properties": {
                     "element": {"#": "documentEntry"},
                     "label":    {"#": "name"},
diff --git a/js/components/layout/documents-tab.reel/documents-tab.html b/js/components/layout/documents-tab.reel/documents-tab.html
index 737dfbcb..1516a8ce 100755
--- a/js/components/layout/documents-tab.reel/documents-tab.html
+++ b/js/components/layout/documents-tab.reel/documents-tab.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML>
+<!DOCTYPE HTML>
 <!-- <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/>
@@ -14,16 +14,14 @@
         {
 
             "owner": {
-                "module": "js/components/layout/documents-tab.reel",
-                "name": "DocumentsTab",
+                "prototype": "js/components/layout/documents-tab.reel",
                 "properties": {
                     "element": {"#": "openDocumentsTabComponent"}
                 }
             },
 
             "documentEntry": {
-                "module": "js/components/layout/document-entry.reel",
-                "name": "DocumentEntry",
+                "prototype": "js/components/layout/document-entry.reel",
                 "properties": {
                     "element": {"#": "document"}
                 },
@@ -52,8 +50,7 @@
             },
             
             "repetition1": {
-                "module": "montage/ui/repetition.reel",
-                "name": "Repetition",
+                "prototype": "montage/ui/repetition.reel",
                 "properties": {
                     "element": {"#": "openDocuments"}
                 },
diff --git a/js/components/layout/stage-mode.reel/stage-mode.html b/js/components/layout/stage-mode.reel/stage-mode.html
index ab111136..15d4955c 100755
--- a/js/components/layout/stage-mode.reel/stage-mode.html
+++ b/js/components/layout/stage-mode.reel/stage-mode.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML>
+<!DOCTYPE HTML>
 <!-- <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/>
@@ -13,8 +13,7 @@
         <script type="text/montage-serialization">
         {
             "owner": {
-                "module": "js/components/layout/stage-mode.reel",
-                "name": "StageMode",
+                "prototype": "js/components/layout/stage-mode.reel",
                 "properties": {
                     "element": {"#": "stageMode"}
                 }
diff --git a/js/components/layout/subtool-button.reel/subtool-button.html b/js/components/layout/subtool-button.reel/subtool-button.html
index 24fce57c..501193d3 100755
--- a/js/components/layout/subtool-button.reel/subtool-button.html
+++ b/js/components/layout/subtool-button.reel/subtool-button.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML>
+<!DOCTYPE HTML>
 <!-- <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/>
@@ -13,8 +13,7 @@
         <script type="text/montage-serialization">
         {
             "owner": {
-                "module": "js/components/layout/subtool-button.reel",
-                "name": "SubToolButton",
+                "prototype": "js/components/layout/subtool-button.reel[SubToolButton]",
                 "properties": {
                     "element":             {"#": "toolButton"}
                 }
diff --git a/js/components/layout/tool-button.reel/tool-button.html b/js/components/layout/tool-button.reel/tool-button.html
index 476b66f3..3980b92c 100755
--- a/js/components/layout/tool-button.reel/tool-button.html
+++ b/js/components/layout/tool-button.reel/tool-button.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML>
+<!DOCTYPE HTML>
 <!-- <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/>
@@ -13,8 +13,7 @@
         <script type="text/montage-serialization">
         {
             "owner": {
-                "module": "js/components/layout/tool-button.reel",
-                "name": "ToolButton",
+                "prototype": "js/components/layout/tool-button.reel",
                 "properties": {
                     "element": {"#": "toolBarButton"}
                 }
diff --git a/js/components/layout/tools-list.reel/tools-list.html b/js/components/layout/tools-list.reel/tools-list.html
index 5996e446..acee20b2 100755
--- a/js/components/layout/tools-list.reel/tools-list.html
+++ b/js/components/layout/tools-list.reel/tools-list.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML>
+<!DOCTYPE HTML>
 <!-- <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/>
@@ -11,8 +11,7 @@
         <script type="text/montage-serialization">
         {
             "toolbutton1": {
-                "module": "js/components/layout/tool-button.reel",
-                "name": "ToolButton",
+                "prototype": "js/components/layout/tool-button.reel",
                 "properties": {
                     "element": {"#": "toolbutton"}
                 },
@@ -26,8 +25,7 @@
             },
 
             "groupLine": {
-                "module": "montage/ui/condition.reel",
-                "name": "Condition",
+                "prototype": "montage/ui/condition.reel",
                 "properties": {
                     "element": {"#": "groupLine"}
                 },
@@ -41,8 +39,7 @@
             },
 
             "repetition1": {
-                "module": "montage/ui/repetition.reel",
-                "name": "Repetition",
+                "prototype": "montage/ui/repetition.reel",
                 "properties": {
                     "element": {"#": "toolscontainer"}
                 },
@@ -56,89 +53,68 @@
             },
 
             "SelectionTool1": {
-                "module": "js/tools/SelectionTool",
-                "name": "SelectionTool"
+                "prototype": "js/tools/SelectionTool"
             },
             "SubselectionTool1": {
-                "module": "js/tools/SubSelectTool",
-                "name": "SubSelectTool"
+                "prototype": "js/tools/SubSelectTool"
             },
             "Rotate3DTool1": {
-                "module": "js/tools/RotateObject3DTool",
-                "name": "RotateObject3DTool"
+                "prototype": "js/tools/RotateObject3DTool"
             },
             "Translate3DTool1": {
-                "module": "js/tools/TranslateObject3DTool",
-                "name": "TranslateObject3DTool"
+                "prototype": "js/tools/TranslateObject3DTool"
             },
             "TagTool1": {
-                "module": "js/tools/TagTool",
-                "name": "TagTool"
+                "prototype": "js/tools/TagTool"
             },
             "PenTool1": {
-                "module": "js/tools/PenTool",
-                "name": "PenTool"
+                "prototype": "js/tools/PenTool"
             },
             "TextTool1": {
-                "module": "js/tools/TextTool",
-                "name": "TextTool"
+                "prototype": "js/tools/TextTool"
             },
             "ShapeTool1": {
-                "module": "js/tools/ShapeTool",
-                "name": "ShapeTool"
+                "prototype": "js/tools/ShapeTool"
             },
             "OvalTool1": {
-                "module": "js/tools/OvalTool",
-                "name": "OvalTool"
+                "prototype": "js/tools/OvalTool"
             },
             "RectTool1": {
-                "module": "js/tools/RectTool",
-                "name": "RectTool"
+                "prototype": "js/tools/RectTool"
             },
             "LineTool1": {
-                "module": "js/tools/LineTool",
-                "name": "LineTool"
+                "prototype": "js/tools/LineTool"
             },
             "PencilTool1": {
-                "module": "js/tools/PencilTool",
-                "name": "PencilTool"
+                "prototype": "js/tools/PencilTool"
             },
             "BrushTool1": {
-                "module": "js/tools/BrushTool",
-                "name": "BrushTool"
+                "prototype": "js/tools/BrushTool"
             },
             "FillTool1": {
-                "module": "js/tools/FillTool",
-                "name": "FillTool"
+                "prototype": "js/tools/FillTool"
             },
             "InkBottleTool1": {
-                "module": "js/tools/InkBottleTool",
-                "name": "InkBottleTool"
+                "prototype": "js/tools/InkBottleTool"
             },
             "EyedropperTool1": {
-                "module": "js/tools/EyedropperTool",
-                "name": "EyedropperTool"
+                "prototype": "js/tools/EyedropperTool"
             },
             "EraserTool1": {
-                "module": "js/tools/EraserTool",
-                "name": "EraserTool"
+                "prototype": "js/tools/EraserTool"
             },
             "RotateStageTool3D1": {
-                "module": "js/tools/RotateStage3DTool",
-                "name": "RotateStage3DTool"
+                "prototype": "js/tools/RotateStage3DTool"
             },
             "PanTool1": {
-                "module": "js/tools/PanTool",
-                "name": "PanTool"
+                "prototype": "js/tools/PanTool"
             },
             "ZoomTool1": {
-                "module": "js/tools/ZoomTool",
-                "name": "ZoomTool"
+                "prototype": "js/tools/ZoomTool"
             },
 
             "disable": {
-                "module": "montage/ui/condition.reel",
-                "name": "Condition",
+                "prototype": "montage/ui/condition.reel",
                 "properties": {
                     "element": {"#": "disabledCondition"}
                 },
@@ -152,8 +128,7 @@
             },
 
             "owner": {
-                "module": "js/components/layout/tools-list.reel",
-                "name": "ToolsList",
+                "prototype": "js/components/layout/tools-list.reel",
                 "properties": {
                     "element": {"#": "toolsList"},
                     "SelectionTool":          {"@": "SelectionTool1"},
diff --git a/js/components/layout/tools-properties.reel/tools-properties.html b/js/components/layout/tools-properties.reel/tools-properties.html
index 3c7a92fa..8dd0f713 100755
--- a/js/components/layout/tools-properties.reel/tools-properties.html
+++ b/js/components/layout/tools-properties.reel/tools-properties.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML>
+<!DOCTYPE HTML>
 <!-- <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/>
@@ -13,50 +13,43 @@
         {
 
             "selectionProperties1": {
-                "module": "js/components/tools-properties/selection-properties.reel",
-                "name": "SelectionProperties",
+                "prototype": "js/components/tools-properties/selection-properties.reel",
                 "properties": {
                     "element": {"#": "selectionProperties"}
                 }
             },
             "subSelectionProperties1": {
-                "module": "js/components/tools-properties/subselection-properties.reel",
-                "name": "SubSelectionProperties",
+                "prototype": "js/components/tools-properties/subselection-properties.reel[SubSelectionProperties]",
                 "properties": {
                     "element": {"#": "subSelectionProperties"}
                 }
             },
             "object3DProperties1": {
-                "module": "js/components/tools-properties/object3d-properties.reel",
-                "name": "Object3DProperties",
+                "prototype": "js/components/tools-properties/object3d-properties.reel[Object3DProperties]",
                 "properties": {
                     "element": {"#": "object3DProperties"}
                 }
             },
             "tagProperties1": {
-                "module": "js/components/tools-properties/tag-properties.reel",
-                "name": "TagProperties",
+                "prototype": "js/components/tools-properties/tag-properties.reel",
                 "properties": {
                     "element": {"#": "tagProperties"}
                 }
             },
             "penProperties1": {
-                "module": "js/components/tools-properties/pen-properties.reel",
-                "name": "PenProperties",
+                "prototype": "js/components/tools-properties/pen-properties.reel",
                 "properties": {
                     "element": {"#": "penProperties"}
                 }
             },
             "textProperties1": {
-                "module": "js/components/tools-properties/text-properties.reel",
-                "name": "TextProperties",
+                "prototype": "js/components/tools-properties/text-properties.reel",
                 "properties": {
                     "element": {"#": "textProperties"}
                 }
             },
             "shapeProperties1": {
-                "module": "js/components/tools-properties/shape-properties.reel",
-                "name": "ShapeProperties",
+                "prototype": "js/components/tools-properties/shape-properties.reel",
                 "properties": {
                     "element": {"#": "shapeProperties"}
                 },
@@ -74,72 +67,62 @@
                 }
             },
             "pencilProperties1": {
-                "module": "js/components/tools-properties/pencil-properties.reel",
-                "name": "PencilProperties",
+                "prototype": "js/components/tools-properties/pencil-properties.reel",
                 "properties": {
                     "element": {"#": "pencilProperties"}
                 }
             },
             "brushProperties1": {
-                "module": "js/components/tools-properties/brush-properties.reel",
-                "name": "BrushProperties",
+                "prototype": "js/components/tools-properties/brush-properties.reel",
                 "properties": {
                     "element": {"#": "brushProperties"}
                 }
             },
             "fillProperties1": {
-                "module": "js/components/tools-properties/fill-properties.reel",
-                "name": "FillProperties",
+                "prototype": "js/components/tools-properties/fill-properties.reel",
                 "properties": {
                     "element": {"#": "fillProperties"}
                 }
             },
             "inkbottleProperties1": {
-                "module": "js/components/tools-properties/ink-bottle-properties.reel",
-                "name": "InkBottleProperties",
+                "prototype": "js/components/tools-properties/ink-bottle-properties.reel",
                 "properties": {
                     "element": {"#": "inkbottleProperties"}
                 }
             },
             "eyedropperProperties1": {
-                "module": "js/components/tools-properties/eyedropper-properties.reel",
-                "name": "EyedropperProperties",
+                "prototype": "js/components/tools-properties/eyedropper-properties.reel",
                 "properties": {
                     "element": {"#": "eyedropperProperties"}
                 }
             },
             "eraserProperties1": {
-                "module": "js/components/tools-properties/eraser-properties.reel",
-                "name": "EraserProperties",
+                "prototype": "js/components/tools-properties/eraser-properties.reel",
                 "properties": {
                     "element": {"#": "eraserProperties"}
                 }
             },
             "rotateStageProperties1": {
-                "module": "js/components/tools-properties/rotate-stage-properties.reel",
-                "name": "RotateStageProperties",
+                "prototype": "js/components/tools-properties/rotate-stage-properties.reel",
                 "properties": {
                     "element": {"#": "rotateStageProperties"}
                 }
             },
             "panProperties1": {
-                "module": "js/components/tools-properties/pan-properties.reel",
-                "name": "PanProperties",
+                "prototype": "js/components/tools-properties/pan-properties.reel",
                 "properties": {
                     "element": {"#": "panProperties"}
                 }
             },
             "zoomProperties1": {
-                "module": "js/components/tools-properties/zoom-properties.reel",
-                "name": "ZoomProperties",
+                "prototype": "js/components/tools-properties/zoom-properties.reel",
                 "properties": {
                     "element": {"#": "zoomProperties"}
                 }
             },
 
             "disable": {
-                "module": "montage/ui/condition.reel",
-                "name": "Condition",
+                "prototype": "montage/ui/condition.reel",
                 "properties": {
                     "element": {"#": "disabledCondition"}
                 },
@@ -153,8 +136,7 @@
             },
             
             "owner": {
-                "module": "js/components/layout/tools-properties.reel",
-                "name": "ToolsProperties",
+                "prototype": "js/components/layout/tools-properties.reel",
                 "properties": {
                     "element": {"#": "toolsProperties"},
                     "selectionProperties":          {"@": "selectionProperties1"},
diff --git a/js/components/menu/menu-entry.reel/menu-entry.html b/js/components/menu/menu-entry.reel/menu-entry.html
index bba5e65d..7ebbcec8 100755
--- a/js/components/menu/menu-entry.reel/menu-entry.html
+++ b/js/components/menu/menu-entry.reel/menu-entry.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <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/>
@@ -12,8 +12,7 @@
     <script type="text/montage-serialization">
         {
             "entriesController": {
-                "name": "ArrayController",
-                "module": "montage/ui/controller/array-controller",
+                "prototype": "montage/ui/controller/array-controller",
                 "properties": {
                     "automaticallyOrganizeObjects": false
                 },
@@ -27,8 +26,7 @@
             },
 
             "repetition": {
-                "module": "montage/ui/repetition.reel",
-                "name": "Repetition",
+                "prototype": "montage/ui/repetition.reel",
                 "properties": {
                     "element": { "#": "subEntries" },
                     "contentController": {"@": "entriesController"}
@@ -36,8 +34,7 @@
             },
 
             "menuItem": {
-                "module": "js/components/menu/menu-item.reel",
-                "name": "MenuItem",
+                "prototype": "js/components/menu/menu-item.reel",
                 "properties": {
                     "element": { "#": "menuEntryItem" }
                 },
@@ -51,8 +48,7 @@
             },
 
             "owner": {
-                "module": "js/components/menu/menu-entry.reel",
-                "name": "MenuEntry",
+                "prototype": "js/components/menu/menu-entry.reel",
                 "properties": {
                     "element":              {"#": "menuItem"},
                     "topHeader":            {"#": "topHeaderBackground"},
diff --git a/js/components/menu/menu-item.reel/menu-item.html b/js/components/menu/menu-item.reel/menu-item.html
index d199a440..92e9aafc 100755
--- a/js/components/menu/menu-item.reel/menu-item.html
+++ b/js/components/menu/menu-item.reel/menu-item.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <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/>
@@ -12,8 +12,7 @@
     <script type="text/montage-serialization">
         {
             "entriesController": {
-                "name": "ArrayController",
-                "module": "montage/ui/controller/array-controller",
+                "prototype": "montage/ui/controller/array-controller",
                 "properties": {
                     "automaticallyOrganizeObjects": false
                 },
@@ -27,8 +26,7 @@
             },
 
             "repetition": {
-                "module": "montage/ui/repetition.reel",
-                "name": "Repetition",
+                "prototype": "montage/ui/repetition.reel",
                 "properties": {
                     "element": {"#": "subEntries"},
                     "contentController": {"@": "entriesController"}
@@ -36,8 +34,7 @@
             },
 
             "menuItem": {
-                "module": "js/components/menu/menu-item.reel",
-                "name": "MenuItem",
+                "prototype": "js/components/menu/menu-item.reel",
                 "properties": {
                     "element": {"#": "menuEntryItem" }
                 },
@@ -51,8 +48,7 @@
             },
 
             "owner": {
-                "module": "js/components/menu/menu-item.reel",
-                "name": "MenuItem",
+                "prototype": "js/components/menu/menu-item.reel",
                 "properties": {
                     "element":          {"#": "menuItem"},
                     "itemBackground":   {"#": "menuItemBackground"},
diff --git a/js/components/menu/menu.reel/menu.html b/js/components/menu/menu.reel/menu.html
index 2cc6bf9b..adaf68ea 100755
--- a/js/components/menu/menu.reel/menu.html
+++ b/js/components/menu/menu.reel/menu.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <copyright>
  This file contains proprietary software owned by Motorola Mobility, In