From b89a7ee8b956c96a1dcee995ea840feddc5d4b27 Mon Sep 17 00:00:00 2001
From: Pierre Frisch
Date: Thu, 22 Dec 2011 07:25:50 -0800
Subject: First commit of Ninja to ninja-internal

Signed-off-by: Valerio Virgillito <rmwh84@motorola.com>
---
 js/panels/properties/content.reel/content.css  | 299 ++++++++++++++++++++++
 js/panels/properties/content.reel/content.html | 161 ++++++++++++
 js/panels/properties/content.reel/content.js   | 328 +++++++++++++++++++++++++
 3 files changed, 788 insertions(+)
 create mode 100644 js/panels/properties/content.reel/content.css
 create mode 100644 js/panels/properties/content.reel/content.html
 create mode 100644 js/panels/properties/content.reel/content.js

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

diff --git a/js/panels/properties/content.reel/content.css b/js/panels/properties/content.reel/content.css
new file mode 100644
index 00000000..2537aea2
--- /dev/null
+++ b/js/panels/properties/content.reel/content.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/content.reel/content.html b/js/panels/properties/content.reel/content.html
new file mode 100644
index 00000000..ab485323
--- /dev/null
+++ b/js/panels/properties/content.reel/content.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="content.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/section.reel",
+                "name": "Section",
+                "properties": {
+                    "element": {"#": "PosSize"},
+                    "content" : {"@": "PosSize"},
+                    "name" : "Position And Size"
+                }
+            },
+            "PosSize": {
+                "module": "js/panels/properties/sections/position-and-size.reel",
+                "name": "PosSize"
+            },
+            "threeDSection": {
+                "module": "js/panels/properties/section.reel",
+                "name": "Section",
+                "properties": {
+                    "element": {"#": "threeD"},
+                    "content" : {"@": "threeDProperties"},
+                    "name" : "3D Position And View"
+                }
+            },
+            "threeDProperties": {
+                "module": "js/panels/properties/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/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/Content.reel",
+                "name": "Content",
+                "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/content.reel/content.js b/js/panels/properties/content.reel/content.js
new file mode 100644
index 00000000..fe6faef8
--- /dev/null
+++ b/js/panels/properties/content.reel/content.js
@@ -0,0 +1,328 @@
+/* <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/sections/custom.reel").CustomSection;
+
+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
+
+exports.Content = 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( "elementChange", this, false);
+
+            if(this.application.ninja.selectedElements.length === 0) {
+                this.displayStageProperties();
+            }
+
+            this.elementId.element.addEventListener("blur", this, false);
+            this.elementId.element.addEventListener("keyup", this, false);
+        }
+    },
+
+    /**
+     * 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") {
+                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"));
+            }
+        }
+    },
+
+    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) {
+                this.customPi = stage.elementModel.pi;
+                this.displayCustomProperties(stage, stage.elementModel.pi);
+            }
+        }
+    },
+
+    displayElementProperties: {
+        value: function (el) {
+            var customPI;
+
+            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) {
+                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.prop !== "border-color" && control.prop !== "background-color") {
+                            var currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator);
+                            currentValue ? currentValue = currentValue : currentValue = control.defaultValue;
+                            this.customSections[0].content.controls[control.id] = currentValue;
+                        }
+                    }
+                }
+            }
+
+            
+            //TODO: Once logic for color and gradient is established, this needs to be revised
+
+            var color, background, backgroundImage, borderColor = ElementsMediator.getProperty(el, "border-color"), borderImage = ElementsMediator.getProperty(el, "border-image");
+            this.application.ninja.colorController.colorModel.input = "stroke";
+            if(borderColor || borderImage) {
+            	if (borderImage && borderImage !== 'none' && borderImage.indexOf('-webkit') >= 0) {
+            		//Gradient
+            		color = this.application.ninja.colorController.getColorObjFromCss(borderImage);
+            		if (color && color.value) {
+    		        	this.application.ninja.colorController.colorModel[color.mode] = {value: color.value, wasSetByCode: true, type: 'change'};
+    	        	} else {
+    	        		this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
+	            		this.application.ninja.colorController.colorModel.applyNoColor();
+            		}
+            	} else {
+            		//Solid
+            		color = this.application.ninja.colorController.getColorObjFromCss(borderColor);
+            		if (color && color.value) {
+        	    		color.value.wasSetByCode = true;
+						color.value.type = 'change';
+	    	        	if (color.value.a) {
+	    	        		this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, wasSetByCode: true, type: 'change'};
+	    	        	}
+	    	        	this.application.ninja.colorController.colorModel[color.mode] = color.value;
+	            	} else {
+	            		this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
+            			this.application.ninja.colorController.colorModel.applyNoColor();
+            		}
+            	}
+            } else {
+            	this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
+                this.application.ninja.colorController.colorModel.applyNoColor();
+            }
+			//
+            background = ElementsMediator.getProperty(el, "background-color");
+            backgroundImage = ElementsMediator.getProperty(el, "background-image");
+            this.application.ninja.colorController.colorModel.input = "fill";
+            if(background || backgroundImage) {
+            	if (backgroundImage && backgroundImage !== 'none' && backgroundImage.indexOf('-webkit') >= 0) {
+            		//Gradient
+            		color = this.application.ninja.colorController.getColorObjFromCss(backgroundImage);
+            		if (color && color.value) {
+    		        	this.application.ninja.colorController.colorModel[color.mode] = {value: color.value, wasSetByCode: true, type: 'change'};
+    	        	} else {
+    	        		this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
+	            		this.application.ninja.colorController.colorModel.applyNoColor();
+            		}
+            	} else {
+            		//Solid
+            		color = this.application.ninja.colorController.getColorObjFromCss(background);
+            		if (color && color.value) {
+        	    		color.value.wasSetByCode = true;
+						color.value.type = 'change';
+	    	        	if (color.value.a) {
+	    	        		this.application.ninja.colorController.colorModel.alpha = {value: color.value.a, wasSetByCode: true, type: 'change'};
+	    	        	}
+	    	        	this.application.ninja.colorController.colorModel[color.mode] = color.value;
+	            	} else {
+	            		this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
+            			this.application.ninja.colorController.colorModel.applyNoColor();
+            		}
+            	}
+            } 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) {
+            var newValue;
+
+            e.units ? newValue = e.value + e.units : newValue = e.value;
+
+            if(e.prop === "border-width") {// || e.prop === "border-style") {
+                ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-style", [this.customSections[0].content.controls.borderStyle], "Change", "pi");
+            } else if(e.prop === "border-style") {
+                ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-width", [this.customSections[0].content.controls.borderWidth + "px"], "Change", "pi");
+            }
+
+            ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [newValue], "Change", "pi");
+
+        }
+    },
+
+    handlePropertyChanging: {
+        value: function(e) {
+
+//            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");
+
+
+        }
+    }
+
+});
-- 
cgit v1.2.3