From 42d78d11764dca5df6c7d01f3221f398bee17152 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 1 Mar 2012 15:00:48 -0800
Subject: Squashed commit of the workspace-bugs

- Panels fixes.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/properties.reel/properties.css           | 299 ++++++++++++++++
 js/panels/properties.reel/properties.html          | 161 +++++++++
 js/panels/properties.reel/properties.js            | 394 +++++++++++++++++++++
 .../properties.reel/section.reel/section.html      |  50 +++
 js/panels/properties.reel/section.reel/section.js  |  30 ++
 .../color-select.reel/color-select.html            |  53 +++
 .../custom-rows/color-select.reel/color-select.js  |  83 +++++
 .../custom-rows/dual-row.reel/dual-row.html        |  67 ++++
 .../sections/custom-rows/dual-row.reel/dual-row.js |  53 +++
 .../custom-rows/single-row.reel/single-row.html    |  47 +++
 .../custom-rows/single-row.reel/single-row.js      |  50 +++
 .../sections/custom.reel/custom.html               |  61 ++++
 .../properties.reel/sections/custom.reel/custom.js | 356 +++++++++++++++++++
 .../position-and-size.reel/position-and-size.css   |  14 +
 .../position-and-size.reel/position-and-size.html  | 142 ++++++++
 .../position-and-size.reel/position-and-size.js    | 264 ++++++++++++++
 .../sections/three-d-view.reel/three-d-view.html   | 348 ++++++++++++++++++
 .../sections/three-d-view.reel/three-d-view.js     | 265 ++++++++++++++
 18 files changed, 2737 insertions(+)
 create mode 100755 js/panels/properties.reel/properties.css
 create mode 100755 js/panels/properties.reel/properties.html
 create mode 100755 js/panels/properties.reel/properties.js
 create mode 100755 js/panels/properties.reel/section.reel/section.html
 create mode 100755 js/panels/properties.reel/section.reel/section.js
 create mode 100755 js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.html
 create mode 100755 js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.js
 create mode 100755 js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html
 create mode 100755 js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
 create mode 100755 js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.html
 create mode 100755 js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js
 create mode 100755 js/panels/properties.reel/sections/custom.reel/custom.html
 create mode 100755 js/panels/properties.reel/sections/custom.reel/custom.js
 create mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css
 create mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html
 create mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js
 create mode 100755 js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html
 create mode 100755 js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js

(limited to 'js/panels/properties.reel')

diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css
new file mode 100755
index 00000000..f8d37984
--- /dev/null
+++ b/js/panels/properties.reel/properties.css
@@ -0,0 +1,299 @@
+/* <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> */
+
+.propertiesPanel {
+    color:#FFF;
+    overflow-x: hidden;
+}
+
+.propertiesPanel .fieldCol {
+    display: -webkit-box;
+    -webkit-box-orient:horizontal;
+    position:relative;
+}
+
+.propertiesPanel .fieldCol > label {
+    -webkit-box-flex:0;
+    text-align: right;
+    width:46px;
+    display:block;
+    padding: 4px 2px 4px 5px;
+    height:16px;
+    line-height: 16px;
+}
+
+.propertiesPanel .fieldRow label {
+padding-right:6px;
+    width:20px;
+    display: inline-block;
+    text-align: right;
+}
+
+
+.propertiesPanel .fieldRow {
+    padding: 4px 10px 4px 5px;
+    height:16px;
+    line-height: 16px;
+    display:block;
+    -webkit-box-flex:1;
+}
+
+.propertiesPanel .fieldRow.oneCol div, .propertiesPanel .fieldRow.twoCol div,.propertiesPanel .fieldRow.threeCol div {
+    -webkit-box-sizing: content-box;
+    float:left;
+
+}
+
+.propertiesPanel hr {
+    border: 0;
+    border-top: 1px solid #3c3c3c;
+    border-bottom: 1px solid #555;
+}
+
+.propertiesPanel input[type='text'] {
+    width:100%;
+    padding: 1px;
+}
+
+.propertiesPanel .montage-textfield {
+    padding: 1px;
+}
+
+.propertiesPanel .fieldRow.threeCol div input[type='text'] {
+    width:34px;
+    display: inline-block;
+}
+
+.propertiesPanel .hottextunit input {
+    width:38px;
+}
+
+.propertiesPanel .fieldRow.threeCol div .inputField {
+    width:34px;
+}
+.propertiesPanel .fieldRow.twoCol label {
+    width:74px;
+    display: inline-block;
+    
+}
+
+.propertiesPanel .fieldRow.oneCol label {
+    width:auto;
+    display: inline-block;
+
+}
+
+.propertiesPanel .fieldRow.oneCol div input[type='text'] {
+    width:34px;
+    display: inline-block;
+}
+.propertiesPanel .fieldRow.oneCol div .inputField {
+    width:34px;
+}
+
+
+.propertiesPanel .fieldRow.twoCol div input[type='text'] {
+    width:38px;
+    display: inline-block;
+}
+.propertiesPanel .fieldRow.twoCol div .inputField {
+    width:38px;
+}
+
+.propertiesPanel input[type='text'][readonly], .propertiesPanel input[type='text'][readonly]:focus {
+    border: none;
+    background: none;
+    -webkit-box-shadow:none;
+}
+
+.propertiesPanel h2 {
+    background: #3E3E3E;
+    font-size:11px;
+    height:16px;
+    line-height: 17px;
+    display:-webkit-box;
+    -webkit-box-orient:horizontal;
+    margin: 0px;
+    border-bottom: 1px solid #3A3A3A;
+}
+.propertiesPanel .subSectionHeader .arrow {
+    -webkit-box-flex:0;
+    margin: 0px 10px;
+}
+
+.propertiesPanel .subSectionHeader .arrowIcon {
+    background: url("data:image/png;base64,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") 0px 0px no-repeat;
+    -webkit-background-size:cover;
+    width:15px;
+    height:15px;
+}
+
+.propertiesPanel .subSectionHeader.collapsed .arrowIcon {
+    -webkit-transform: rotate(-90deg);
+}
+
+.propertiesPanel .sectional {
+    padding: 4px;
+}
+
+.propertiesPanel .animated {
+    -webkit-transition: 0.2s all linear;
+}
+
+.propertiesPanel div.collapsed {
+    padding: 0px !important;
+    height:0px !important;
+    overflow: hidden;
+}
+
+.propertiesPanel .subSectionHeader section {
+    -webkit-box-flex:1;
+}
+
+.propertiesPanel {
+    text-shadow: 1px 1px 1px #000;
+}
+
+/* Dropdown layout */
+.propertiesPanel select {
+    -webkit-appearance: none;
+    font-size: 10px;
+    color: white;
+    background-color: #444;
+    border: 1px solid #313131;
+    width: 100%;
+    -webkit-box-sizing: border-box;
+    height: 15px;
+    outline: none;
+    background-image: url("../../../images/dropdown-bg.png");
+    background-repeat: no-repeat;
+    background-position: right center;
+    border-radius: 0px;
+    padding-left:5px;
+}
+
+/* File Input Field */
+.propertiesPanel .file {
+    display:-webkit-box;
+}
+.propertiesPanel .file input {
+    -webkit-box-flex:1;
+    width:auto;
+    display: block;
+}
+.propertiesPanel .file .source {
+    border: 1px solid #313131;
+    background-color: #444;
+    color:#FFF;
+    height:16px;
+    width:20px;
+    -webkit-box-flex:0;
+    cursor: pointer;
+    padding: 0px;
+}
+
+.propertiesPanel .file .source:hover {
+    background-color:#555;
+}
+
+.propertiesPanel .file .source:active {
+    background-color: #666;
+}
+
+/* Checkbox layout */
+
+.propertiesPanel .fieldRow.checkbox div .inputField {
+    width:25px;
+}
+
+.propertiesPanel .fieldRow.colorSelect {
+    height: 20px;
+}
+
+.propertiesPanel .colortoolbar {
+    width: 105px;
+    float:left;
+}
+
+.propertiesPanel .colortoolbar div {
+    margin: 0px 10px 0px 20px;
+    clear:none;
+}
+
+/* color select */
+.propertiesPanel .colortoolbar button {
+    width:40px;
+    height:20px;
+    clear:none;
+}
+
+.propertiesPanel .LockToolUp, .propertiesPanel .UnLockToolUp {
+    position: absolute;
+    left: 105px;
+    border: none;
+    background-color: transparent;
+    top: 2px;
+    opacity: 0.7;
+}
+
+.propertiesPanel .button:active {
+    outline: none;
+}
+
+.propertiesPanel .LockToolUp:hover, .propertiesPanel .UnLockToolUp:hover {
+    opacity: 1;
+}
+
+.propertiesPanel input[type="checkbox"].nj-skinned, .propertiesPanel input[type="radio"].nj-skinned {
+    position: relative;
+    overflow: visible;
+}
+
+.propertiesPanel input[type="checkbox"].nj-skinned:checked::after, .propertiesPanel input[type="radio"].nj-skinned:checked::after {
+    content: "";
+}
+
+.propertiesPanel input[type="checkbox"].nj-skinned:checked::before {
+    content: "✔";
+}
+
+.propertiesPanel input[type="radio"].nj-skinned:checked::before {
+    content: "•";
+}
+
+.propertiesPanel input.nj-skinned label {
+    position: absolute;
+    top: 0;
+    left: 15px;
+    font-size: 10px;
+    width:55px;
+    text-align: left;
+    font-weight: normal;
+    color:#FFF;
+}
+
+.propertiesPanel input[type='radio'].nj-skinned {
+    text-indent: 0px;
+    line-height: 5px;
+}
+
+.propertiesPanel input[type='radio'].nj-skinned label {
+    left:15px;
+}
+
+input label {
+    -webkit-user-select: none;
+}
+
+.propertiesPanel .rotation > label {
+    padding-left:40px;
+    padding-right:5px;
+}
+
+.propertiesPanel .rotation .fieldRow {
+    -webkit-box-flex:0;
+    width:45px;
+}
\ No newline at end of file
diff --git a/js/panels/properties.reel/properties.html b/js/panels/properties.reel/properties.html
new file mode 100755
index 00000000..d903d8ed
--- /dev/null
+++ b/js/panels/properties.reel/properties.html
@@ -0,0 +1,161 @@
+<!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/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+<html lang="en">
+<head>
+    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <link rel="stylesheet" href="properties.css" type="text/css">
+        <script type="text/montage-serialization">
+        {
+            "elementNameInput1": {
+                "module": "montage/ui/textfield.reel",
+                "name": "Textfield",
+                "properties": {
+                    "element": {"#": "elementName"},
+                    "readOnly": true
+                },
+                "bindings": {
+                    "value": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "elementName",
+                        "oneway": true
+                    }
+                }
+            },
+
+            "elementID": {
+                "module": "montage/ui/textfield.reel",
+                "name": "Textfield",
+                "properties": {
+                    "element": {"#": "elementID"},
+                    "readOnly": false
+                },
+                "bindings": {
+                    "value": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "elementID",
+                        "oneway": true
+                    }
+                }
+            },
+
+            "elementClass": {
+                "module": "montage/ui/textfield.reel",
+                "name": "Textfield",
+                "properties": {
+                    "element": {"#": "elementClassName"},
+                    "readOnly": false
+                },
+                "bindings": {
+                    "value": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "elementClassName",
+                        "oneway": true
+                    }
+                }
+            },
+
+
+            "PosSizeSection": {
+                "module": "js/panels/properties.reel/section.reel",
+                "name": "Section",
+                "properties": {
+                    "element": {"#": "PosSize"},
+                    "content" : {"@": "PosSize"},
+                    "name" : "Position And Size"
+                }
+            },
+            "PosSize": {
+                "module": "js/panels/properties.reel/sections/position-and-size.reel",
+                "name": "PosSize"
+            },
+            "threeDSection": {
+                "module": "js/panels/properties.reel/section.reel",
+                "name": "Section",
+                "properties": {
+                    "element": {"#": "threeD"},
+                    "content" : {"@": "threeDProperties"},
+                    "name" : "3D Position And View"
+                }
+            },
+            "threeDProperties": {
+                "module": "js/panels/properties.reel/sections/three-d-view.reel",
+                "name": "ThreeD"
+            },
+
+            "CustomSections": {
+                "module": "montage/ui/repetition.reel",
+                "name": "Repetition",
+                "properties": {
+                    "element": {"#": "customSections"}
+                },
+                "bindings": {
+                    "objects": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "customSections",
+                        "oneway": true
+                    }
+                }
+            },
+
+            "customSection": {
+                "module": "js/panels/properties.reel/section.reel",
+                "name": "Section",
+                "properties": {
+                    "element": {"#": "customSection"}
+                },
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "CustomSections"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.content",
+                        "oneway": true
+                    },
+                    "name": {
+                        "boundObject": {"@": "CustomSections"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration.name",
+                        "oneway": true
+                    }
+                }
+            },
+
+            "owner": {
+                "module": "js/panels/properties.reel",
+                "name": "Properties",
+                "properties": {
+                    "element":              {"#": "propertiesPanel"},
+                    "elementNameInput":     {"@": "elementNameInput1"},
+                    "elementId":            {"@": "elementID"},
+                    "positionSize":         {"@": "PosSize"},
+                    "threeD":               {"@": "threeDProperties"}
+                }
+            }
+    	}
+		</script>
+</head>
+<body>
+    <section id="propertiesPanel" class="propertiesPanel">
+        <section class="sectional">
+            <section class="fieldCol">
+                <label id="lblElement">Element:</label>
+                <article class="fieldRow"><input type="text" id="elementName" class="nj-skinned" readonly="readonly"></article>
+            </section>
+            <section class="fieldCol">
+                <label id="lblID">ID:</label>
+                <article class="fieldRow"><input type="text" id="elementID" class="nj-skinned" /></article>
+            </section>
+            <section class="fieldCol">
+                <label id="lblClass">Class:</label>
+                <article class="fieldRow"><input type="text" id="elementClassName" class="nj-skinned" /></article>
+            </section>
+        </section>
+        <section id="PosSize"></section>
+        <section id="customSections">
+            <div id="customSection"></div>
+        </section>
+        <section 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
new file mode 100755
index 00000000..1fa65075
--- /dev/null
+++ b/js/panels/properties.reel/properties.js
@@ -0,0 +1,394 @@
+/* <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,
+    Component       = require("montage/ui/component").Component,
+    PiData          = require("js/data/pi/pi-data").PiData,
+    CustomSection   = require("js/panels/properties.reel/sections/custom.reel").CustomSection;
+
+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
+
+exports.Properties = Montage.create(Component, {
+
+    elementName: {
+        value: null
+    },
+
+    elementID: {
+        value: null
+    },
+
+    elementClassName: {
+        value: null
+    },
+
+    customSections: {
+        value: []
+    },
+
+    _customPi: {
+        value: null
+    },
+
+    customPi: {
+        get: function() {
+            return this._customPi;
+        },
+        set: function(value) {
+            if(this._customPi !== value) {
+                this._customPi = value;
+            }
+        }
+    },
+
+    prepareForDraw: {
+        value : function() {
+
+            this.eventManager.addEventListener("selectionChange", this, false);
+
+            // This will be a toggle option
+            if(this.application.ninja.appData.PILiveUpdate) {
+                this.eventManager.addEventListener( "elementChanging", this, false);
+            }
+
+            this.eventManager.addEventListener("openDocument", this, false);
+            this.eventManager.addEventListener("switchDocument", this, false);
+        }
+    },
+
+    // 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
+            if(this.application.ninja.selectedElements.length === 0) {
+                this.displayStageProperties();
+            }
+
+            this.elementId.element.addEventListener("blur", this, false);
+            this.elementId.element.addEventListener("keyup", this, false);
+        }
+    },
+
+    handleSwitchDocument: {
+        value: function(){
+            // For now always assume that the stage is selected by default
+            if(this.application.ninja.selectedElements.length === 0) {
+                this.displayStageProperties();
+            }else {
+                if(this.application.ninja.selectedElements.length === 1) {
+                    this.displayElementProperties(this.application.ninja.selectedElements[0]._element);
+                } else {
+                    this.displayGroupProperties(this.application.ninja.selectedElements);
+                }
+            }
+        }
+    },
+
+    /**
+     * Blur and Key up to handle change in the Element ID field.
+     */
+    handleBlur: {
+        value: function(event) {
+            if(this.application.ninja.selectedElements.length) {
+                ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi");
+            } else {
+                ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id);
+            }
+        }
+    },
+    
+    handleKeyup: {
+        value: function(event) {
+            if(event.keyCode === 13) {
+                this.elementId.element.blur();
+            }      
+        }
+    },
+
+    handleElementChanging: {
+        value: function(event) {
+//            this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "left"));
+//            this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "top"));
+        }
+    },
+
+    handleElementChange: {
+        value: function(event) {
+//            console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update
+            if(event.detail.source && event.detail.source !== "pi") {
+                // TODO - This should only update the properties that were changed.
+                var el = this.application.ninja.selectedElements[0]._element || this.application.ninja.selectedElements[0];
+                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(this.threeD.inGlobalMode)
+                {
+                    this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D");
+                    this.threeD.y3D = ElementsMediator.get3DProperty(el, "y3D");
+                    this.threeD.z3D = ElementsMediator.get3DProperty(el, "z3D");
+                    this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle");
+                    this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle");
+                    this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle");
+            }
+        }
+        }
+    },
+
+    handleSelectionChange: {
+        value: function(event) {
+            if(event.detail.isDocument) {
+                this.displayStageProperties();
+            } else {
+                if(this.application.ninja.selectedElements.length === 1) {
+                    this.displayElementProperties(this.application.ninja.selectedElements[0]._element);
+                } else {
+                    this.displayGroupProperties(this.application.ninja.selectedElements);
+                }
+
+            }
+        }
+    },
+
+    displayStageProperties: {
+        value: function() {
+            var stage = this.application.ninja.currentDocument.documentRoot;
+            //this is test code please remove
+            this.elementName = "Stage";
+            this.elementId.value = stage.elementModel.id;
+            this.elementClassName = "";
+
+            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.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;
+
+            this.elementName = el.elementModel.selection;
+            this.elementId.value = el.getAttribute("id") || "";
+            this.elementClassName = el.getAttribute("class");
+
+            this.positionSize.disablePosition = false;
+            this.threeD.disableTranslation = false;
+
+            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(this.threeD.inGlobalMode)
+            {
+                this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D");
+                this.threeD.y3D = ElementsMediator.get3DProperty(el, "y3D");
+                this.threeD.z3D = ElementsMediator.get3DProperty(el, "z3D");
+                this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle");
+                this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle");
+                this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle");
+            }
+
+            // Custom Section
+            if(this.customPi !== el.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 = el.elementModel.pi;
+                this.displayCustomProperties(el, el.elementModel.pi);
+            }
+
+            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++) {
+
+                        if(control.type !== "color") {
+                            currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator);
+                            if(currentValue === null)
+                            {
+                                currentValue = control.defaultValue;
+                            }
+                            this.customSections[i].content.controls[control.id] = currentValue;
+                        }
+                        else
+                        {
+                            currentValue = ElementsMediator.getColor2(el, control.prop, control.valueMutator);
+                            if(control.prop === "border")
+                            {
+                                this.application.ninja.colorController.colorModel.input = "stroke";
+                            }
+                            else if(control.prop === "background")
+                            {
+                                this.application.ninja.colorController.colorModel.input = "fill";
+                            }
+
+                            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.color.mode)
+                                    {
+                                        this.application.ninja.colorController.colorModel[currentValue.color.mode] = currentValue.color;
+                                    }
+                                    else
+                                    {
+                                        this.application.ninja.colorController.colorModel["rgb"] = currentValue.color;
+                                    }
+                                }
+                            }
+                            else
+                            {
+                                this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
+                                this.application.ninja.colorController.colorModel.applyNoColor();
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    },
+
+    displayGroupProperties: {
+        value: function (els) {
+            this.elementName = "Multiple Elements";
+        }
+    },
+
+    displayCustomProperties: {
+        value: function() {
+            var customPI;
+
+            this.customSections = [];
+
+            customPI = PiData[this.customPi];
+
+            if(customPI) {
+                //Get all the custom sections for the custom PI
+                for(var i = 0, customSec; customSec = customPI[i]; i++) {
+                    var customUI = CustomSection.create();
+                    customUI.fields = customSec.Section;
+                    this.customSections.push({
+                        name: customSec.label,
+                        content: customUI
+                    });
+                }
+            }
+
+            for(var j = 0, customSections; customSections = this.customSections[j]; j++) {
+                customSections.content.addEventListener("propertyChange", this, false);
+                customSections.content.addEventListener("propertyChanging", this, false);
+            }
+
+        }
+    },
+
+    handlePropertyChange: {
+        value: function(e) {
+            if(e.wasSetByCode) return;
+
+            var newValue;
+
+            e.units ? newValue = e.value + e.units : newValue = e.value;
+
+            ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [newValue], "Change", "pi");
+
+        }
+    },
+
+    handlePropertyChanging: {
+        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/section.reel/section.html b/js/panels/properties.reel/section.reel/section.html
new file mode 100755
index 00000000..b72a91b3
--- /dev/null
+++ b/js/panels/properties.reel/section.reel/section.html
@@ -0,0 +1,50 @@
+<!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/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+<html lang="en">
+<head>
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "module" : "js/panels/properties.reel/section.reel",
+            "name" : "Section",
+            "properties" : {
+                "element" : {"#": "section"},
+                "slot" : {"@": "sectionSlot"}
+            }
+        },
+
+        "sectionSlot": {
+            "module": "montage/ui/slot.reel",
+            "name": "Slot",
+            "properties": {
+                "element": {"#": "sectionSlot"}
+            }
+        },
+
+        "sectionSplitter": {
+            "module": "js/panels/Splitter",
+            "name": "Splitter",
+            "properties": {
+                "element": {"#": "sectionSplitter"},
+                "panel": {"@": "sectionSlot"}
+            }
+        }
+
+
+    }
+    </script>
+</head>
+<body>
+    <div id="section">
+        <h2 id="sectionSplitter" class="subSectionHeader">
+            <section class="arrow"><div class="arrowIcon animated"></div></section>
+            <section class="title"></section>
+        </h2>
+        <div id="sectionSlot" class="animated"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/panels/properties.reel/section.reel/section.js b/js/panels/properties.reel/section.reel/section.js
new file mode 100755
index 00000000..b246c171
--- /dev/null
+++ b/js/panels/properties.reel/section.reel/section.js
@@ -0,0 +1,30 @@
+/* <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;
+var Component = require("montage/ui/component").Component;
+
+exports.Section = Montage.create(Component, {
+
+    name: {
+        value: "Panel"
+    },
+
+    slot: {
+        value: null
+    },
+
+    content: {
+        value: null
+    },
+
+    prepareForDraw: {
+        value: function() {
+            this.element.getElementsByClassName("title")[0].innerHTML = this.name;
+            this.slot.content = this.content;
+        }
+    }
+});
\ No newline at end of file
diff --git a/js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.html b/js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.html
new file mode 100755
index 00000000..58a50a0d
--- /dev/null
+++ b/js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.html
@@ -0,0 +1,53 @@
+<!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/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+<html lang="en">
+<head>
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "module" : "js/panels/properties.reel/sections/custom-rows/color-select.reel",
+            "name" : "ColorSelect",
+            "properties" : {
+                "element" : {"#": "section"},
+                "Stroke" : {"#": "Stroke"},
+                "Fill" : {"#": "Fill"},
+                "strokeChip" : {"@": "colorChip"},
+                "fillChip" : {"@": "colorChip2"}
+            }
+        },
+
+
+        "colorChip": {
+            "module" : "js/components/ui/color-chip.reel",
+            "name" : "ColorChip",
+            "properties" : {
+                "element" : {"#": "Stroke"}
+            }
+        },
+
+        "colorChip2": {
+               "module" : "js/components/ui/color-chip.reel",
+               "name" : "ColorChip",
+               "properties" : {
+                   "element" : {"#": "Fill"},
+                   "mode": "fill"
+               }
+           }
+    }
+    </script>
+</head>
+<body>
+    <div id="section">
+        <section class="fieldCol">
+            <article class="fieldRow colorSelect">
+                <div id="Stroke"></div>
+                <div id="Fill"></div>
+            </article>
+        </section>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.js b/js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.js
new file mode 100755
index 00000000..3e81ff67
--- /dev/null
+++ b/js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.js
@@ -0,0 +1,83 @@
+/* <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;
+var Component = require("montage/ui/component").Component;
+
+exports.ColorSelect = Montage.create(Component, {
+
+    Stroke: {
+        value: null
+    },
+
+    Fill: {
+        value: null
+    },
+
+    strokeChip: {
+        value: null
+    },
+
+    fillChip: {
+        value: null
+    },
+
+    handleChange: {
+        value: function(e) {
+
+        }
+    },
+
+    colorVisible: {
+        value: true
+    },
+
+    color2Visible: {
+        value: true
+    },
+
+    divider: {
+        value: false
+    },
+
+    prepareForDraw: {
+        value: function() {
+            if (this.divider) {
+                this.element.appendChild(document.createElement("hr"));
+            }
+            if (!this.colorVisible) {
+                this.Stroke.style.display = "none";
+            }
+
+            if (!this.color2Visible) {
+                this.Fill.style.display = "none";
+            }
+
+//            for (var i = 0; i < this.options.length; i ++ ) {
+//                var tmpOption = new Option();
+//                tmpOption.text = this.options[i].name;
+//                tmpOption.value = this.options[i].value;
+//                if (i === this.selectedIndex) tmpOption.selected = true
+//                this.options[i].name = this.element.getElementsByTagName("select")[0].add(tmpOption);
+//            }
+
+        }
+    },
+
+    destroy: {
+        value: function() {
+            if(this.strokeChip)
+            {
+                this.strokeChip.destroy();
+            }
+            if(this.fillChip)
+            {
+                this.fillChip.destroy();
+            }
+        }
+    }
+
+});
\ No newline at end of file
diff --git a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html
new file mode 100755
index 00000000..be4ae431
--- /dev/null
+++ b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html
@@ -0,0 +1,67 @@
+<!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/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+<html lang="en">
+<head>
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "module" : "js/panels/properties.reel/sections/custom-rows/dual-row.reel",
+            "name" : "DualRow",
+            "properties" : {
+                "element" : {"#": "section"},
+                "slot" : {"@": "slot"},
+                "slot2" : {"@": "slot2"}
+            }
+        },
+        "slot": {
+            "module": "montage/ui/slot.reel",
+            "name": "Slot",
+            "properties": {
+                "element": { "#": "slotElement" }
+            },
+            "bindings": {
+                "content" : {
+                    "boundObject": {"@": "owner"},
+                    "boundObjectPropertyPath": "content"
+                }
+            }
+        },
+        "slot2": {
+            "module": "montage/ui/slot.reel",
+            "name": "Slot",
+            "properties": {
+                "element": { "#": "slotElement2" }
+            },
+            "bindings": {
+                "content" : {
+                    "boundObject": {"@": "owner"},
+                    "boundObjectPropertyPath": "content2"
+                }
+            }
+        }
+    }
+    </script>
+</head>
+<body>
+    <div id="section">
+        <section class="fieldCol">
+            <label class="lbl"></label>
+            <article class="fieldRow">
+                <div id="slotElement" class="inputField">
+                    
+                </div>
+            </article>
+            <label class="lbl"></label>
+            <article class="fieldRow">
+                <div id="slotElement2" class="inputField">
+
+                </div>
+            </article>
+        </section>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
new file mode 100755
index 00000000..72d216ca
--- /dev/null
+++ b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
@@ -0,0 +1,53 @@
+/* <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;
+var Component = require("montage/ui/component").Component;
+
+exports.DualRow = Montage.create(Component, {
+    id: {
+        value: null
+    },
+
+    label: {
+        value: null
+    },
+
+    label2:{
+        value: null
+    },
+
+    content: {
+        value: null
+    },
+
+    content2: {
+        value: null
+    },
+
+    eventDelegate: {
+        value: null
+    },
+
+    divider: {
+        value: false
+    },
+
+    prepareForDraw: {
+        value: function() {
+            if (this.divider) this.element.appendChild(document.createElement("hr"));
+            if(this.label !== null) {
+                this.element.getElementsByClassName("lbl")[0].innerHTML = this.label + ":";
+            }
+            if(this.label2 !== null) {
+                this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":";
+            } else {
+                this.element.getElementsByClassName("lbl")[1].style.display = "none";
+            }
+        }
+    }
+
+});
\ No newline at end of file
diff --git a/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.html b/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.html
new file mode 100755
index 00000000..4de3f1ae
--- /dev/null
+++ b/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.html
@@ -0,0 +1,47 @@
+<!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/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+<html lang="en">
+<head>
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "module" : "js/panels/properties.reel/sections/custom-rows/single-row.reel",
+            "name" : "SingleRow",
+            "properties" : {
+                "element" : {"#": "section"},
+                "slot" : {"@": "slot"}
+            }
+        },
+        "slot": {
+            "module": "montage/ui/slot.reel",
+            "name": "Slot",
+            "properties": {
+                "element": { "#": "slotElement" }
+            },
+            "bindings": {
+                "content" : {
+                    "boundObject": {"@": "owner"},
+                    "boundObjectPropertyPath": "content"
+                }
+            }
+        }
+    }
+    </script>
+</head>
+<body>
+    <div id="section">
+        <section class="fieldCol">
+            <label><span class="lbl"></span></label>
+            <article class="fieldRow">
+                <div id="slotElement" class="inputField">
+                    
+                </div>
+            </article>
+        </section>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js b/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js
new file mode 100755
index 00000000..b606d6b8
--- /dev/null
+++ b/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js
@@ -0,0 +1,50 @@
+/* <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;
+var Component = require("montage/ui/component").Component;
+
+exports.SingleRow = Montage.create(Component, {
+    id: {
+        value: null
+    },
+
+    label: {
+        value: null
+    },
+
+    content: {
+        value: null
+    },
+
+    eventDelegate: {
+        value: null
+    },
+
+
+    handleChange: {
+        value: function(event) {
+        }
+    },
+
+    handleChanging: {
+        value: function(event) {
+            this.eventDelegate({"type": "changing", "id": this.id, "prop": this.prop, "text": this.label, "value": this.value});
+        }
+    },
+
+    divider: {
+        value: false
+    },
+
+    prepareForDraw: {
+        value: function() {
+            if (this.divider) this.element.appendChild(document.createElement("hr"));
+            if(this.label !== null) this.element.getElementsByClassName("lbl")[0].innerHTML = this.label + ":";
+        }
+    }
+
+});
\ No newline at end of file
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.html b/js/panels/properties.reel/sections/custom.reel/custom.html
new file mode 100755
index 00000000..99a68264
--- /dev/null
+++ b/js/panels/properties.reel/sections/custom.reel/custom.html
@@ -0,0 +1,61 @@
+<!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/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> -->
+<html>
+<head>
+    <title></title>
+    <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module" : "js/panels/properties.reel/sections/custom.reel",
+                "name" : "CustomSection",
+                "properties" : {
+                    "element" : {"#": "section"},
+                    "repeat" : {"@": "repeat"}
+                }
+            },
+
+            "repeat": {
+                "module": "montage/ui/repetition.reel",
+                "name": "Repetition",
+                "properties": {
+                    "element" : {"#": "repetitionContainer"}
+                },
+                "bindings": {
+                    "objects": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "rows",
+                        "oneway": true
+                    }
+                }
+            },
+
+            "slot": {
+                "module": "montage/ui/slot.reel",
+                "name": "Slot",
+                "properties": {
+                    "element": { "#": "repeitionContent" }
+                },
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "repeat"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration",
+                        "oneway": true
+                    }
+                }
+            }
+
+        }
+    </script>
+</head>
+<body>
+    <div id="section" class="sectional">
+        <div id="repetitionContainer">
+            <div id="repeitionContent"></div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
new file mode 100755
index 00000000..3c595980
--- /dev/null
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -0,0 +1,356 @@
+/* <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;
+var Component = require("montage/ui/component").Component;
+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
+
+//Custom Rows
+var SingleRow = require("js/panels/properties.reel/sections/custom-rows/single-row.reel").SingleRow;
+var DualRow = require("js/panels/properties.reel/sections/custom-rows/dual-row.reel").DualRow;
+var ColorSelect = require("js/panels/properties.reel/sections/custom-rows/color-select.reel").ColorSelect;
+
+// Components Needed to make this work
+var Hottext = require("js/components/hottextunit.reel").HotTextUnit;
+var Dropdown = require("js/components/combobox.reel").Combobox;
+var TextField = require("js/components/textfield.reel").TextField;
+var FileInput = require("js/components/ui/file-input.reel").FileInput;
+var Checkbox = require("js/components/checkbox.reel").Checkbox;
+var ColorChip = require("js/components/ui/color-chip.reel").ColorChip;
+
+exports.CustomSection = Montage.create(Component, {
+
+    repeat: {
+        value: null
+    },
+
+    _fields: {
+
+    },
+
+    fields: {
+        get:  function() {
+            return this._fields;
+        },
+        set: function(val) {
+            this.controls = {};
+            this.rows = [];
+            this._fields = val;
+            for(var i=0; i < this._fields.length; i++) {
+                var tmpRow, fields;
+                if(this._fields[i].length === 1) {
+                    fields = this._fields[i][0];
+                    tmpRow = SingleRow.create();
+                    tmpRow.content = this.generateObject(fields);
+                    if (fields.label)       tmpRow.label = fields.label;
+                    if (fields.divider)     tmpRow.divider = fields.divider;
+                    this.rows.push(tmpRow);
+                } else if(this._fields[i].length === 2) {
+
+                    var obj1 = this._fields[i][0];
+                    var obj2 = this._fields[i][1];
+
+
+                    if (obj1.type == "color" && obj2.type == "color") {
+                        tmpRow = Montage.create(ColorSelect);
+                        if(obj1.visible === false) tmpRow.colorVisible = obj1.visible;
+                        if(obj2.visible === false) tmpRow.color2Visible = obj2.visible;
+
+                        // TODO - Hack for now to reference the color select object to unregister color chips
+                        this.controls["colorSelect"] = tmpRow;
+                    }
+                    else
+                    {
+                        tmpRow = DualRow.create();
+                        if (obj1.label) tmpRow.label = obj1.label;
+                        if (obj2.label) tmpRow.label2 = obj2.label;
+                        tmpRow.content = this.generateObject(obj1);
+                        tmpRow.content2 = this.generateObject(obj2);
+                    }
+
+                    if (obj1.divider === true || obj2.divider === true) tmpRow.divider = true;
+                    this.rows.push(tmpRow);
+
+                } else if(this._fields[i].length === 3) {
+                    
+                }
+
+            }
+        }
+
+    },
+
+    rows: {
+        value: []
+    },
+
+    controls: {
+        value:{}
+    },
+
+    handleChanging: {
+		value:function(event) {
+            var obj = event.currentTarget;
+            this._dispatchPropEvent({"type": "changing", "id": obj.id, "prop": obj.prop, "value": obj.value, "control": obj});
+		}
+	},
+
+    handleChange: {
+		value:function(event) {
+            if(event._event.wasSetByCode) return;
+            
+            var obj = event.currentTarget;
+            this._dispatchPropEvent({"type": "change", "id": obj.id, "prop": obj.prop, "value": obj.value, "control": obj});
+		}
+	},
+
+    /**
+     * Color change handler. Hard coding the stage for now since only the stage PI uses this color chip
+     */
+    handleColorChange: {
+        value: function(event) {
+            // Change the stage color for now
+            //console.log(this, event);
+            ElementsMediator.setProperty([this.application.ninja.currentDocument.documentRoot], this.id, [event._event.color.css], "Change", "pi", '');
+            /*
+            var propEvent = document.createEvent("CustomEvent");
+            propEvent.initEvent("propertyChange", true, true);
+            propEvent.type = "propertyChange";
+
+            propEvent.prop = "background";//event.prop;
+            propEvent.value = event._event.color.css;
+
+            this.dispatchEvent(propEvent);
+            */
+        }
+    },
+
+    _dispatchPropEvent: {
+        value: function(event) {
+//            console.log(event);
+            var propEvent = document.createEvent("CustomEvent");
+            if(event.type === "changing")
+            {
+                propEvent.initEvent("propertyChanging", true, true);
+                propEvent.type = "propertyChanging";
+            }
+            else
+            {
+                propEvent.initEvent("propertyChange", true, true);
+                propEvent.type = "propertyChange";
+            }
+
+            propEvent.id = event.id;
+            propEvent.prop = event.prop;
+            propEvent.text = event.text;
+            propEvent.value = event.value;
+
+            event.control.units ? propEvent.units = event.control.units : propEvent.units = "";
+
+            this.dispatchEvent(propEvent);
+        }
+    },
+
+    generateObject: {
+        value: function(fields) {
+            switch(fields.type) {
+                case "hottext"  : return this.createHottext(fields);
+                case "dropdown" : return this.createDropdown(fields);
+                case "textbox"  : return this.createTextField(fields);
+                case "file"     : return this.createFileInput(fields);
+                case "checkbox" : return this.createCheckbox(fields);
+                case "chip"     : return this.createColorChip(fields);
+            }
+        }
+    },
+
+    //Breaking Up Switch Case Statement to functions to return a row
+    createHottext: {
+        value: function(aField) {
+
+            // Generate Hottext
+            var obj = Hottext.create();
+
+            // Set Values for HottextRow
+            if (aField.id)          obj.id = aField.id;
+            if (aField.value)       obj.value = aField.value;
+            if (aField.acceptableUnits)   obj.acceptableUnits = aField.acceptableUnits;
+            if (aField.unit)        obj.units = aField.unit;
+            if (aField.min)         obj._minValue = aField.min;
+            if (aField.max)         obj._maxValue = aField.max;
+            if (aField.prop)        obj.prop = aField.prop;
+
+            //Initiate onChange Events
+            obj.addEventListener("change", this, false);
+            obj.addEventListener("changing", this, false);
+
+            //Bind object value to controls list so it can be manipulated
+            Object.defineBinding(this.controls, aField.id, {
+              boundObject: obj,
+              boundObjectPropertyPath: "value"
+            });
+
+            return obj;
+        }
+    },
+
+    createDropdown: {
+        value: function(aField) {
+
+            //Generate Dropdown
+            var obj = Dropdown.create();
+
+            // Set Values for Dropdown
+            if (aField.id)          obj.id = aField.id;
+            if (aField.prop)        obj.prop = aField.prop;
+            if (aField.value)       obj.value = aField.value;
+            if (aField.labelField)  obj.labelField = aField.labelField;
+            if (aField.labelFunction)  obj.labelFunction = aField.labelFunction;
+            if (aField.dataField)  obj.dataField = aField.dataField;
+            if (aField.dataFunction)  obj.dataFunction = aField.dataFunction;
+            if (aField.items) {
+                if(aField.items.boundObject) {
+                    obj.items = eval(aField.items.boundObject)[aField.items.boundProperty];
+                } else {
+                    obj.items = aField.items;
+                }
+            }
+            if (aField.enabled) {
+                if(aField.enabled.boundObject) {
+                    // TODO - For now, always bind to this.controls[someProperty]
+                    Object.defineBinding(obj, "enabled", {
+                                    boundObject: this.controls,
+                                    boundObjectPropertyPath: aField.enabled.boundProperty,
+                                    oneway: false
+                                });
+                } else {
+                    obj.enabled = aField.enabled;
+                }
+            }
+
+            obj.addEventListener("change", this, false);
+//
+//            Object.defineBinding(obj, "value", {
+//                boundObject: this.controls,
+//                boundObjectPropertyPath: aField.id,
+//                oneway: false,
+//                boundValueMutator: function(value) {
+//                    console.log("In the binding ", value);
+//                    return value;
+//                }
+//            });
+
+            Object.defineBinding(this.controls, aField.id, {
+                boundObject: obj,
+                boundObjectPropertyPath: "value",
+                oneway: false
+            });
+
+
+            obj.needsDraw = true;
+
+            return obj;
+        }
+    },
+
+    createTextField: {
+        value: function(aField) {
+
+            // Generate Textfield
+            var obj = TextField.create();
+
+            // Set Values for TextField
+            if (aField.id)          obj.id = aField.id;
+            if (aField.value)       obj.value = aField.value;
+            if (aField.prop)        obj.prop = aField.prop;
+
+            //Initiate onChange Events
+            obj.addEventListener("change", this, false);
+
+            //Bind object value to controls list so it can be manipulated
+            Object.defineBinding(this.controls, aField.id, {
+              boundObject: obj,
+              boundObjectPropertyPath: "value"
+            });
+
+            return obj;
+        }
+    },
+
+    createFileInput: {
+        value: function(aField) {
+
+            // Generate Textfield
+            var obj = TextField.create();
+
+            // Set Values for TextField
+            if (aField.id)          obj.id = aField.id;
+            if (aField.value)