9 files changed, 89 insertions, 131 deletions
diff --git a/js/panels/properties.reel/properties.html b/js/panels/properties.reel/properties.html
index d212ae80..3a1ae880 100755
--- a/js/panels/properties.reel/properties.html
+++ b/js/panels/properties.reel/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/>
@@ -27,8 +27,7 @@
            },
            "elementClass": {
-                "module": "montage/ui/textfield.reel",
+                "prototype": "montage/ui/textfield.reel",
-                "name": "Textfield",
                "properties": {
                    "element": {"#": "elementClass"},
                    "readOnly": false
@@ -36,8 +35,7 @@
            },
            "PosSizeSection": {
-                "module": "js/panels/properties.reel/section.reel",
+                "prototype": "js/panels/properties.reel/section.reel",
-                "name": "Section",
                "properties": {
                    "element": {"#": "PosSize"},
                    "content" : {"@": "PosSize"},
@@ -45,12 +43,10 @@
                }
            },
            "PosSize": {
-                "module": "js/panels/properties.reel/sections/position-and-size.reel",
+                "prototype": "js/panels/properties.reel/sections/position-and-size.reel[PosSize]"
-                "name": "PosSize"
            },
            "threeDSection": {
-                "module": "js/panels/properties.reel/section.reel",
+                "prototype": "js/panels/properties.reel/section.reel",
-                "name": "Section",
                "properties": {
                    "element": {"#": "threeD"},
                    "content" : {"@": "threeDProperties"},
@@ -58,13 +54,11 @@
                }
            },
            "threeDProperties": {
-                "module": "js/panels/properties.reel/sections/three-d-view.reel",
+                "prototype": "js/panels/properties.reel/sections/three-d-view.reel[ThreeD]"
-                "name": "ThreeD"
            },
            "CustomSections": {
-                "module": "montage/ui/repetition.reel",
+                "prototype": "montage/ui/repetition.reel",
-                "name": "Repetition",
                "properties": {
                    "element": {"#": "customSections"}
                },
@@ -78,8 +72,7 @@
            },
            "customSection": {
-                "module": "js/panels/properties.reel/section.reel",
+                "prototype": "js/panels/properties.reel/section.reel",
-                "name": "Section",
                "properties": {
                    "element": {"#": "customSection"}
                },
@@ -98,8 +91,7 @@
            },
            "owner": {
-                "module": "js/panels/properties.reel",
+                "prototype": "js/panels/properties.reel",
-                "name": "Properties",
                "properties": {
                    "element":              {"#": "propertiesPanel"},
                    "elementName":          {"@": "elementName"},
@@ -113,26 +105,26 @@
                </script>
 </head>
 <body>
-    <section id="propertiesPanel" class="propertiesPanel">
+    <section data-montage-id="propertiesPanel" class="propertiesPanel">
        <section class="sectional">
            <section class="fieldCol">
                <label>Element:</label>
-                <article class="fieldRow"><input type="text" id="elementName" class="nj-skinned" readonly="readonly"></article>
+                <article class="fieldRow"><input type="text" data-montage-id="elementName" class="nj-skinned" readonly="readonly"></article>
            </section>
            <section class="fieldCol">
                <label>ID:</label>
-                <article class="fieldRow"><input type="text" id="elementId" class="nj-skinned" /></article>
+                <article class="fieldRow"><input type="text" data-montage-id="elementId" class="nj-skinned" /></article>
            </section>
            <section class="fieldCol">
                <label>Class:</label>
-                <article class="fieldRow"><input type="text" id="elementClass" class="nj-skinned" /></article>
+                <article class="fieldRow"><input type="text" data-montage-id="elementClass" class="nj-skinned" /></article>
            </section>
        </section>
-        <section id="PosSize"></section>
+        <section data-montage-id="PosSize"></section>
-        <section id="customSections">
+        <section data-montage-id="customSections">
-            <div id="customSection"></div>
+            <div data-montage-id="customSection"></div>
        </section>
-        <section id="threeD"></section>
+        <section data-montage-id="threeD"></section>
    </section>
 </body>
 </html>
 \ No newline at end of file
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index b21014c1..507770f6 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -101,7 +101,6 @@ exports.Properties = Montage.create(Component, {
     */
    handleBlur: {
        value: function(event) {
            if(event.target.id === "elementId") {
                // Remove all white spaces from the id
@@ -126,6 +125,7 @@ exports.Properties = Montage.create(Component, {
                    ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "class", this.elementClass.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.elementClass);
                }
            }
+            NJevent("updatedID",this.application.ninja.selectedElements[0]);
        }
    },
    
@@ -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) {
@@ -207,11 +208,7 @@ exports.Properties = Montage.create(Component, {
                this.threeD.zAngle = ElementsMediator.get3DProperty(stage, "zAngle");
            }
-            if(ElementsMediator.getProperty(stage, "-webkit-transform-style") === "preserve-3d") {
+            this.threeD.flatten = ElementsMediator.getProperty(stage, "-webkit-transform-style") !== "preserve-3d";
-                this.threeD.flatten = false;
-            } else {
-                this.threeD.flatten = true;
-            }
            if(this.customPi !== stage.elementModel.pi) {
                // We need to unregister color chips from the previous selection from the Color Model
diff --git a/js/panels/properties.reel/section.reel/section.html b/js/panels/properties.reel/section.reel/section.html
index b72a91b3..c9b14565 100755
--- a/js/panels/properties.reel/section.reel/section.html
+++ b/js/panels/properties.reel/section.reel/section.html
@@ -9,8 +9,7 @@
    <script type="text/montage-serialization">
    {
        "owner": {
-            "module" : "js/panels/properties.reel/section.reel",
+            "prototype" : "js/panels/properties.reel/section.reel",
-            "name" : "Section",
            "properties" : {
                "element" : {"#": "section"},
                "slot" : {"@": "sectionSlot"}
@@ -18,16 +17,14 @@
        },
        "sectionSlot": {
-            "module": "montage/ui/slot.reel",
+            "prototype": "montage/ui/slot.reel",
-            "name"