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/Materials/Materials.xml                  |  11 +
 js/panels/Materials/MaterialsPanel.js              |  44 ++
 .../materials-library-panel.css                    |  47 ++
 .../materials-library-panel.html                   |  40 ++
 .../materials-library-panel.js                     | 205 +++++++
 .../materials-popup.reel/materials-popup.css       | 162 +++++
 .../materials-popup.reel/materials-popup.html      | 122 ++++
 .../materials-popup.reel/materials-popup.js        | 674 +++++++++++++++++++++
 8 files changed, 1305 insertions(+)
 create mode 100644 js/panels/Materials/Materials.xml
 create mode 100644 js/panels/Materials/MaterialsPanel.js
 create mode 100644 js/panels/Materials/materials-library-panel.reel/materials-library-panel.css
 create mode 100644 js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
 create mode 100644 js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
 create mode 100644 js/panels/Materials/materials-popup.reel/materials-popup.css
 create mode 100644 js/panels/Materials/materials-popup.reel/materials-popup.html
 create mode 100644 js/panels/Materials/materials-popup.reel/materials-popup.js

(limited to 'js/panels/Materials')

diff --git a/js/panels/Materials/Materials.xml b/js/panels/Materials/Materials.xml
new file mode 100644
index 00000000..de07990e
--- /dev/null
+++ b/js/panels/Materials/Materials.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="ISO-8859-1"?>
+<tree id="Materials">
+    <folder id="ninjaMaterials" label="Ninja Materials">
+	  <leaf id="UberMaterial" label="Uber" />
+        <leaf id="BumpMetalMaterial" label="Bump Metal" />
+    </folder>
+    <folder id="customMaterials" label="Custom Materials">
+        <leaf id="CheckerBoard" label="CheckerBoard" />
+        <leaf id="ShinyMetal" label="Shiny Metal" />
+    </folder>
+</tree>
\ No newline at end of file
diff --git a/js/panels/Materials/MaterialsPanel.js b/js/panels/Materials/MaterialsPanel.js
new file mode 100644
index 00000000..a63ed860
--- /dev/null
+++ b/js/panels/Materials/MaterialsPanel.js
@@ -0,0 +1,44 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var Montage = require("montage/core/core").Montage,
+	PanelBase = require("js/panels/PanelBase").PanelBase,
+    MaterialsLibraryPanel =	require("js/panels/Materials/materials-library-panel.reel").MaterialsLibraryPanel;
+
+exports.MaterialsPanel = Montage.create(PanelBase, {
+    id : {value : "materialsPanel", writable:true, enumerable:true, configurable:true},
+    panelName : {value : "Materials", writable:true, enumerable:true, configurable:true},
+    panelHeaderID : {value : "materialsPanelHeader", writable:true, enumerable:true, configurable:true},
+    disclosureIconID : {value : "materialsPanelDisclosureIcon", writable:true, enumerable:true, configurable:true},
+    closeButtonID : {value : "materialsPanelCloseButton", writable:true, enumerable:true, configurable:true},
+    panelContentID : {value : "materialsPanelContent", writable:true, enumerable:true, configurable:true},
+
+    _materialsLibraryPanel : {
+        enumerable: true,
+        value: null,
+        writable:true
+    },
+
+    init : {
+        enumerable:true,
+        value : function (){
+            /* OLD WAY -- Removing the temporary div
+            // TODO: Remove this comment once this is tested.
+            var panelContainer = document.createElement("div");
+
+            panelContainer.setAttribute("id", "materialsLibraryPanel");
+            this._materialsLibraryPanel = MaterialsLibraryPanel.create();
+            this._materialsLibraryPanel.element = panelContainer;
+            //Adding container to the parent
+
+            this.content = this._materialsLibraryPanel;
+            this._materialsLibraryPanel.needsDraw = true;
+            */
+            this.content = MaterialsLibraryPanel.create();
+        }
+    }
+
+});
\ No newline at end of file
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css
new file mode 100644
index 00000000..07488da1
--- /dev/null
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css
@@ -0,0 +1,47 @@
+/* <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> */
+
+.materials_library_panel hr {
+  float: left;
+  clear: both;
+  width: 100%;
+  display: block;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #1d1d1d), color-stop(0.75, #424242));
+  border: none;
+  height: 2px;
+  margin: 4px 0px 4px 0px;
+}
+
+
+#ml_buttons {
+    clear:both;
+    float: left;
+    margin: 0px -4px 0px 4px;
+    width: 97%;
+}
+
+#ml_buttons button {
+  height: 22px;
+  overflow: hidden;
+  display: block;
+  cursor: pointer;
+  margin: 0px 1px;
+}
+
+#materialsLibraryPanel-ml_add_btn {
+    float: left;
+    width: 60px;
+}
+
+#materialsLibraryPanel-ml_copy_btn {
+    float: left;
+    width: 60px;
+}
+
+#materialsLibraryPanel-ml_delete_btn {
+    float: right;
+    width: 60px;
+}
\ No newline at end of file
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
new file mode 100644
index 00000000..eede02bd
--- /dev/null
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
@@ -0,0 +1,40 @@
+<!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" type="text/css" href="materials-library-panel.css">
+         <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module": "js/panels/Materials/materials-library-panel.reel",
+                "name": "MaterialsLibraryPanels",
+                "properties": {
+                    "element": {"#": "materials_library_panel"}
+                }
+            }
+
+    	}
+		</script>
+   		
+	</head>
+	<body>
+
+    	<div id="materials_library_panel" class="materials_library_panel">
+            <div id="ml_tree_holder">
+                <ul id="materials_library_tree"></ul>
+            </div>
+            <hr />
+            <div id="ml_buttons">
+                <button id="ml_add_btn">Add</button>
+                <button id="ml_copy_btn">Copy</button>
+                <button id="ml_delete_btn">Delete</button>
+            </div>
+    	</div>
+
+    </body>
+</html>
\ No newline at end of file
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
new file mode 100644
index 00000000..f97e1a27
--- /dev/null
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
@@ -0,0 +1,205 @@
+/* <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 Tree = require("js/components/tree.reel").Tree,
+    Button = require("js/components/button.reel").Button,
+    MaterialsPopup = require("js/panels/Materials/materials-popup.reel").MaterialsPopup,
+    PopupMananger =		require("js/components/popup-manager.reel").PopupMananger;
+
+exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, {
+
+    _hasFocus: {
+    	enumerable: false,
+    	value: false
+    },
+    
+    prepareForDraw: {
+    	enumerable: false,
+    	value: function() {
+            var treeHolderDiv = document.getElementById("materials_library_tree");
+            var materialsTree = Tree.create();
+            materialsTree.element = treeHolderDiv;
+            materialsTree.dataProvider = this._loadXMLDoc("js/panels/Materials/Materials.xml");
+            materialsTree.needsDraw = true;
+
+            materialsTree.addEventListener("change", this, true);
+
+            var addButton = Button.create();
+            addButton.element = document.getElementById("ml_add_btn");
+            addButton.label = "Add";
+            addButton.needsDraw = true;
+            addButton.addEventListener("action", this, true);
+
+            var copyButton = Button.create();
+            copyButton.element = document.getElementById("ml_copy_btn");
+            copyButton.label = "Copy";
+            copyButton.needsDraw = true;
+            copyButton.addEventListener("action", this, true);
+
+            var deleteButton = Button.create();
+            deleteButton.element = document.getElementById("ml_delete_btn");
+            deleteButton.label = "Delete";
+            deleteButton.needsDraw = true;
+            deleteButton.addEventListener("action", this, true);
+    	}
+    },
+
+    willDraw: {
+    	enumerable: false,
+    	value: function() {
+
+    	}
+    },
+    
+    draw: {
+    	enumerable: false,
+    	value: function() {
+
+    	}
+    },
+
+    _loadXMLDoc: {
+        value:function(dname) {
+            if (window.XMLHttpRequest) {
+                xhttp = new XMLHttpRequest();
+            }
+            xhttp.open("GET", dname, false);
+            xhttp.send();
+            return xhttp.responseXML;
+        }
+    },
+
+    captureAction: {
+        value:function(event) {
+            switch(event._currentTarget.label)
+            {
+                case "Add":
+                    console.log("Add new material");
+                    break;
+                case "Copy":
+                    console.log("Copy selected material");
+                    break;
+                case "Delete":
+                    console.log("Delete selected material");
+                    break;
+            }
+        }
+    },
+
+    captureChange: {
+        value:function(e) {
+            var tNode = e._event.treeNode;
+            var left, top;
+            //TODO: Figure out if this is the best way to detect where user clicked
+            var mouseEvent = e._event.mouseEvent;
+    		if (mouseEvent.clientX && mouseEvent.clientY) {
+    			if (mouseEvent.clientX > (parseInt(document.width)/2)) {
+                    left = mouseEvent.clientX - mouseEvent.offsetX-2;
+                    top = mouseEvent.currentTarget.clientHeight/2+mouseEvent.clientY - mouseEvent.offsetY;
+    			} else {
+                    left = mouseEvent.clientX - mouseEvent.offsetX+parseInt(mouseEvent.currentTarget.clientWidth);
+                    top = mouseEvent.clientY - mouseEvent.offsetY;
+    			}
+    		}
+            
+            this._showMaterialPopup(left + 'px', top + 'px', 'right', 'top', tNode.id);
+        }
+    },
+
+    _materialPopup: {
+        enumerable:true,
+        value:null
+    },
+    
+    _showMaterialPopup: {
+    	enumerable: false,
+    	value: function (x, y, side, align, materialID) {
+    		if (this._materialPopup && this._materialPopup.opened) {
+    			if (this._materialPopup.popup.position.x === x && this._materialPopup.popup.position.y === y) {
+					this._hideMaterialPopup();
+    			} else {
+    				this._materialPopup.popup.position = {x: x, y: y};
+    				this._materialPopup.popup.tooltip = {side: side, align: align};
+                    this._materialPopup.popup.base.loadMaterials(materialID);
+    				//TODO: Tooltip needs to be fixed to allow aligning to change on fly
+    				//this._materialPopup.popup.drawTooltip();
+    			}
+    		} else {
+    			////////////////////////////////////////////////////
+    			//Creating popup from m-js component
+    			var popup = document.createElement('div');
+    			var content = document.createElement('div');
+    			var popupBase = MaterialsPopup.create();
+
+
+    			//TODO: Check to see if this HACK is needed
+    			//(elements needs to be on DOM to be drawn)
+    			document.body.appendChild(popup);
+    			popupBase.element = popup;
+   				popupBase.needsDraw = true;
+   				document.body.removeChild(popup);
+    			//Adding drawn element to container
+    			content.appendChild(popupBase.element);
+
+    			//Creating an instance of the popup and sending in created material popup content
+                this._materialPopup = {};
+	        	this._materialPopup.popup = PopupMananger.createPopup(content, {x: x, y: y}, {side: side, align: align});
+				this._materialPopup.popup.element.style.opacity = 0;
+                this._materialPopup.popup.base = popupBase;
+				popupBase._material = MaterialsLibrary.getMaterial( materialID );
+				popupBase._materialName = materialID;
+				//TODO: Fix this animation/draw HACK (Move to didDraw callback)
+				setTimeout(function () {
+					this._materialPopup.popup.element.style.opacity = 1;
+                    this._materialPopup.popup.base.loadMaterials(materialID);
+				}.bind(this), 150);
+
+
+
+	        	//Popup was added, so it's opened
+	        	this._materialPopup.opened = true;
+	        	//TODO: Fix this HACK, it listens to this canvas to be clicked to close popup
+	        	document.getElementById('stageAndScenesContainer').addEventListener('click', this, false);
+        	}
+    	}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    handleClick: {
+    	enumerable: true,
+    	value: function (e) {
+    		//TODO: Fix this HACK
+    		if (e._event.target.id === 'stageCanvas' && this._materialPopup.opened) {
+    			this._handleDocumentClick(e);
+    		}
+    	}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    _handleDocumentClick: {
+    	enumerable: false,
+    	value: function (e) {
+    		this._hideMaterialPopup();
+    		//TODO: Fix this HACK
+			document.getElementById('stageAndScenesContainer').removeEventListener ('click', this, false);
+    	}
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
+    _hideMaterialPopup: {
+    	enumerable: false,
+    	value: function () {
+    		if (this._materialPopup.opened) {
+    			//
+	    		PopupMananger.removePopup(this._materialPopup.popup.element);
+	    		this._materialPopup.opened = false;
+	    		//TODO: Fix HACK of removing popup
+	    		this._materialPopup.popup.base.destroy();
+	    		this._materialPopup.popup = null;
+	    	}
+    	}
+    }
+});
\ No newline at end of file
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css
new file mode 100644
index 00000000..299dc5f9
--- /dev/null
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.css
@@ -0,0 +1,162 @@
+@charset "UTF-8";
+/* <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> */
+
+.materials_popup {
+  font-size: 12px;
+  text-shadow: 1px 1px 1px #000;
+    overflow: hidden;
+}
+
+.materials_popup a:hover {
+  color: #CCC;
+}
+
+.materials_popup hr {
+  float: left;
+  clear: both;
+  width: 100%;
+  display: block;
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #1d1d1d), color-stop(0.75, #424242));
+  border: none;
+  height: 2px;
+  margin: 4px 0px 4px 0px;
+}
+
+#mp_title {
+    margin: 4px 0px 0px 0px;
+    text-align: center;
+}
+
+#mp_preview {
+    height: 100px;
+    text-align: center;
+}
+
+#mp_maps div div,
+#mp_maps div div:focus,
+#mp_maps div input,
+#mp_maps div input:focus {
+    margin: 0px 0px 2px 0px;
+}
+
+#mp_properties_labels,
+#mp_maps_labels {
+  display:block;
+  float: left;
+  width:86px;
+  margin: 0px 8px 2px 5px;
+  font-family: 'Droid Sans', sans-serif;
+  font-size: 12px;
+}
+
+#mp_properties_labels div,
+#mp_maps_labels div {
+  float: right;
+  clear: left;
+  width: auto;
+  margin: 0px 0px 3px 0px;
+}
+
+#mp_maps_labels div {
+  margin: 2px 0px 3px 0px !important;
+}
+
+#mp_properties_labels div {
+  margin: 6px 0px 6px 0px !important;
+}
+
+#mp_properties_colors
+{
+    float:left;
+    width: 24px;
+    margin: 0px -8px 0px 10px;
+}
+
+#mp_properties_colors button {
+  width: 22px;
+  height: 22px;
+  margin:  2px 0;
+}
+
+#mp_properties_colors input.hottext {
+  background: none;
+  float: right;
+  margin: 4px 0px;
+  padding: 0px;
+  width: 23px;
+  color: #FFF;
+  text-shadow: 1px 1px 1px #000;
+  font-family: 'Droid Sans', sans-serif;
+  font-size: 11px;
+  text-align: center;
+}
+
+#mp_properties_colors input.hottextInput {
+  background: #FFF;
+  color: #000;
+  text-shadow: none;
+  border: 1px solid #333;
+  margin: 3px -2px 5px 1px;
+  padding: 1px;
+  text-decoration: none;
+  outline: none;
+}
+
+#mp_maps_inputs
+{
+    float: left;
+    width: auto;
+}
+
+#mp_maps_inputs input {
+  float:left;
+  clear:both;
+  width: 100px;
+  background: #555;
+  border: 1px solid #333;
+  color: #FFF;
+  padding: 1px 0px 1px 0px;
+  margin: 0px 0px 0px 10px;
+  text-decoration: none !important;
+  text-shadow: 1px 1px 1px #000;
+  font-family: 'Droid Sans', sans-serif;
+  font-size: 11px;
+  letter-spacing: 1px;
+}
+
+#mp_maps_inputs input:focus {
+  outline: none;
+  margin: -1px 0px -1px 10px;
+  background: #FFF;
+  color: #000;
+  text-shadow: none;
+}
+
+
+#mp_buttons {
+    clear:both;
+    float: left;
+    margin: 0px -4px 0px 4px;
+    width: 97%;
+}
+
+#mp_buttons button {
+  height: 22px;
+  overflow: hidden;
+  display: block;
+  cursor: pointer;
+}
+
+#mp_cancel_btn {
+    float: left;
+    width: 60px;
+}
+
+#mp_ok_btn {
+    float: right;
+    width: 30px;
+}
\ No newline at end of file
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html
new file mode 100644
index 00000000..bac69f25
--- /dev/null
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.html
@@ -0,0 +1,122 @@
+<!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" type="text/css" href="materials-popup.css">
+
+   		<script type="text/montage-serialization">
+        {
+            "okButton": {
+                "module": "js/components/button.reel",
+                "name": "Button",
+                "properties": {
+                    "element": {"#": "mp_ok_btn"},
+                    "label": "OK"
+                }
+            },
+            "cancelButton": {
+                "module": "js/components/button.reel",
+                "name": "Button",
+                "properties": {
+                    "element": {"#": "mp_cancel_btn"},
+                    "label": "Cancel"
+                }
+            },
+            "eventDelegator": {
+                "module": "montage/event/action-event-listener",
+                "name": "ActionEventListener",
+                "properties": {
+                    "handler": {"@": "owner"},
+                    "action": "updatePreview"
+                }
+            },
+            "propControl1": {
+                "module": "js/components/ui/property-control",
+                "name": "PropertyControl",
+                "properties": {
+                    "element": {"#": "mp_property"}
+                },
+                "bindings": {
+                    "data": {
+                        "boundObject": {"@": "materialsProperties"},
+                        "boundObjectPropertyPath": "objectAtCurrentIteration",
+                        "oneway": false
+                    }
+                },
+                "listeners": [
+                                {
+                                    "type": "propertyChange",
+                                    "listener": {"@": "eventDelegator"},
+                                    "capture": false
+                                },
+                                {
+                                    "type": "propertyChanging",
+                                    "listener": {"@": "eventDelegator"},
+                                    "capture": false
+                                }
+                            ]
+            },
+            "materialsProperties": {
+                "module": "montage/ui/repetition",
+                "name": "Repetition",
+                "properties": {
+                    "element": {"#": "mp_properties_list"}
+                },
+                "bindings": {
+                    "objects": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "materialsData",
+                        "oneway": false
+                    }
+                }
+            },
+            "owner": {
+                "module": "js/panels/Materials/materials-popup.reel",
+                "name": "MaterialsPopup",
+                "properties": {
+                    "materialsProperties": {"@": "materialsProperties"},
+                    "element": {"#": "materials_popup"},
+                    "okButton": {"@": "okButton"},
+                    "cancelButton": {"@": "cancelButton"},
+                    "materialTitle": {"#": "mp_title"}
+                }
+            }
+        }
+    </script>
+
+	</head>
+
+	<body>
+
+    	<div id="materials_popup">
+            <div id="mp_title">Material Name</div>
+
+            <hr />
+
+    		<div id="mp_preview">Preview Pane</div>
+
+            <hr />
+
+            <div id="mp_properties_list" style="-webkit-user-select: none;">
+                <div id="mp_property"></div>
+            </div>
+
+            <hr />
+            
+            <div id="mp_buttons">
+                <button id="mp_cancel_btn"></button>
+                <button id="mp_ok_btn"></button>
+            </div>
+
+    	</div>
+
+	</body>
+
+</html>
\ No newline at end of file
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
new file mode 100644
index 00000000..afdc3628
--- /dev/null
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -0,0 +1,674 @@
+/* <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;
+var Button = 			require("js/components/button.reel").Button;
+
+////////////////////////////////////////////////////////////////////////
+//Exporting as MaterialsPopup
+exports.MaterialsPopup = Montage.create(Component, {
+	////////////////////////////////////////////////////////////////////
+    okButton: {
+        enumerable: false,
+        value: null
+    },
+
+    cancelButton: {
+        enumerable: false,
+        value: null
+    },
+
+    ////////////////////////////////////////////////////////////////////
+	// Material Properties
+
+    materialsProperties: {
+        enumerable: true,
+        serializable: true,
+        value: null
+    },
+
+    _materialName: {
+        enumerable: true,
+        value: "Material"
+    },
+
+	materialTitle: {
+		enumerable: true,
+		value: null
+	},
+
+	captureAction: {
+		value:function(event) {
+			switch(event._currentTarget.label)
+			{
+				case "Cancel":
+					console.log("Cancel material edit");
+					break;
+				case "OK":
+					console.log("Committing material with the following values:");
+                    for(var i=0, len=this.materialsProperties.childComponents.length; i< len; i++)
+                    {
+                        var childControl = this.materialsProperties.childComponents[i];
+                        var childValue = childControl._control[childControl._prop];
+
+                        if(typeof childValue === "object")
+                        {
+                            console.log(childControl.label + " is ");
+                            console.dir(childValue);
+                        }
+                        else
+                        {
+                            console.log(childControl.label + " is " + childValue);
+                        }
+                        console.log("--------------");
+
+                    }
+					break;
+			}
+		}
+	},
+
+    updatePreview:
+    {
+        value: function(event)
+        {
+            if(event.type === "propertyChanging")
+            {
+                this._handlePropertyChanging(event);
+            }
+            else
+            {
+                this._handlePropertyChange(event);
+            }
+        }
+    },
+
+    _handlePropertyChanging:
+    {
+        value: function(event)
+        {
+            if(typeof event.propertyValue === "object")
+            {
+                console.log(event.propertyLabel + " changing to ");
+                console.dir(event.propertyValue);
+            }
+            else
+            {
+                console.log(event.propertyLabel + " changing to " + event.propertyValue);
+            }
+
+			if (event.propertyLabel && event.propertyValue)
+				this.applyProperty( event.propertyLabel,  event.propertyValue );
+        }
+    },
+
+    _handlePropertyChange:
+    {
+        value: function(event)
+        {
+            if(typeof event.propertyValue === "object")
+            {
+                console.log(event.propertyLabel + " changed to ");
+                console.dir(event.propertyValue);
+            }
+            else
+            {
+                console.log(event.propertyLabel + " changed to " + event.propertyValue);
+            }
+
+			if (event.propertyLabel)
+				this.applyProperty( event.propertyLabel,  event.propertyValue );
+        }
+    },
+
+	applyProperty:
+	{
+		value: function( propLabel, propValue)
+		{
+			// find the property lable in the array
+			// This assumes no duplication in labels
+			if (this._propLabels)
+			{
+				// the label cones through with a trailing ':'.  remove that
+				var ch = propLabel[ propLabel.length - 1];
+				if (ch == ':')
+					propLabel = propLabel.substr(0, propLabel.length - 1);
+				
+				var index;
+				var nProps = this._propLabels.length;
+				for (var i=0;  i<nProps;  i++)
+				{
+					if (this._propLabels[i] == propLabel)
+					{
+						index = i;
+						break;
+					}
+				}
+				if ((index != null) && this._material)
+				{
+					var value = this.decodeValue( this._propTypes[index],  propValue );
+					this._material.setProperty( this._propNames[index],  value );
+				}
+			}
+		}
+	},
+
+	decodeValue:
+	{
+		value: function( type,  value )
+		{
+			var rtnValue;
+			switch (type)
+			{
+				case "color":
+					rtnValue = [ value['r']/255.0,  value['g']/255.0,  value['b']/255.0, value['a'] ];
+					break;
+
+				case "vector2d":
+				case "vector3d":
+					rtnValue = [];
+					for (var i in value)  rtnValue.push( value[i] );
+					break;
+
+				case "float":
+					rtnValue = value;
+					break;
+
+				case "file":
+					if (value && (value.length > 0))
+					{
+						var index = value.lastIndexOf( "/" );
+						if (index < 0)  index = value.lastIndexOf( "\\" );
+						if (index >= 0)
+							value = value.substr( index+1 );
+						value = "assets\\images\\" + value;
+						rtnValue = value.slice(0);
+					}
+					break;
+
+				case "checkbox":
+					rtnValue = value;
+					break;
+
+				default:
+					console.log( "unrecognized material control type: " + type );
+					break;
+			}
+			return rtnValue;
+		}
+	},
+
+    ////////////////////////////////////////////////////////////////////
+	//
+	prepareForDraw: {
+		enumerable: false,
+		value: function() {
+            this.cancelButton.addEventListener("action", this, true);
+
+            this.okButton.addEventListener("action", this, true);
+        }
+    },
+	////////////////////////////////////////////////////////////////////
+	//
+	didDraw: {
+		enumerable: false,
+		value: function() {
+           this.materialTitle.innerHTML = this._materialName;
+		}
+	},
+
+	//Garbage collection (Manual method)
+	destroy: {
+		enumerable: false,
+		value: function() {
+			// add cleanup routines here
+		}
+	},
+
+	loadMaterials:
+	{
+		enumerable: true,
+		value: function(materialID)
+		{
+           this._materialName = materialID;
+            if(	
+					(materialID === "BrickMaterial")				||
+					(materialID ===  "UberMaterial")				|| 
+					(materialID ===  "FlatMaterial")				||
+ 					(materialID ===  "BumpMetalMaterial")			||
+ 					(materialID ===  "PlasmaMaterial")				||
+ 					(materialID ===  "LinearGradientMaterial")		||
+ 					(materialID ===  "RadialGradientMaterial")		||
+ 					(materialID ===  "RadialBlurMaterial")			||
+ 					(materialID ===  "PulseMaterial")				||
+ 					(materialID ===  "TunnelMaterial")				||
+ 					(materialID ===  "TwistMaterial")				||
+ 					(materialID ===  "KeleidoscopeMaterial")		||
+ 					(materialID ===  "JuliaMaterial")				||
+ 					(materialID ===  "MandelMaterial")				||
+ 					(materialID ===  "IridescentScalesMaterial")
+				)
+			{
+				var material = MaterialsLibrary.getMaterial( materialID );
+				if (material)
+				{
+					this._material = material;
+					var matData = this.getMaterialData( material );
+					this.materialsData = matData;
+				}
+            }
+            else
+            {
+                this.materialsData = this._dummyData1;
+            }
+            
+           this.needsDraw = true;
+		}
+	},
+
+	getMaterialData:
+	{
+		value: function( material )
+		{
+			// declare the array to hold the results
+			var rtnArray = [];
+
+			var propNames = [],  propValues = [],  propTypes = [],  propLabels = [];
+			this._propNames = propNames;
+			this._propValues = propValues;
+			this._propTypes = propTypes;
+			this._propLabels = propLabels;
+			material.getAllProperties( propNames,  propValues,  propTypes,  propLabels);
+			var n = propNames.length;
+			for (var i=0;  i<n;  i++)
+			{
+				var obj;
+				switch (propTypes[i])
+				{
+					case "color":
+						obj = this.createColorData( propLabels[i], propValues[i] );
+						break;
+
+					case "vector2d":
+						obj = this.createVectorData( 2, propLabels[i], propValues[i] );
+						break;
+
+					case "vector3d":
+						obj = this.createVectorData( 3, propLabels[i], propValues[i] );
+						break;
+
+					case "float":
+						obj = this.createFloatData( propLabels[i], propValues[i] );
+						break;
+
+					case "file":
+						obj = this.createFileData( propLabels[i], propValues[i] );
+						break;
+
+					case "checkbox":
+						obj = this.createCheckboxData( propLabels[i], propValues[i] );
+						break;
+
+					default:
+						console.log( "unrecognized material control type: " + propType[i] );
+						break;
+				}
+
+				if (obj)
+				{
+					rtnArray.push( obj );
+					obj = null;
+				}
+			}
+
+			return rtnArray;
+		}
+	},
+
+	createColorData:
+	{
+		value:  function( label,  color )
+		{
+			var obj =
+			{
+				"label":		label,
+				"description":	"a color",
+				"controlType":	"ColorChip",
+                "defaults":
+                {
+					"color":	{ r:color[0]*255, g:color[1]*255, b:color[2]*255, a:color[3] }
+				}
+			};
+
+			return obj;
+		}
+	},
+
+	createFloatData:
+	{
+		value: function( label, value )
+		{
+			var obj =
+			{
+                "label":         label,
+                "description":   "floating point value",
+                "controlType":   "HotText",
+                "defaults":
+                {
+                    "minValue": 0,
+                    "maxValue": 128,
+                    "decimalPlace": 100,
+					"value": value
+                }
+			}
+
+			return obj;
+		}
+	},
+	
+	createCheckboxData:
+	{
+		value: function( label, value )
+		{
+			var obj =
+			{
+                "label":         label,
+                "description":   "checkbox",
+                "controlType":   "Button",
+                "defaults":
+                {
+                    "isToggleButton": true,
+					"value": value
+                }
+			}
+
+			return obj;
+		}
+	},
+
+	createFileData:
+	{
+		value: function( label, value )
+		{
+			var obj =
+			{
+                "label":         label,
+                "description":   "Image file",
+                "controlType":   "FileInput",
+                "defaults":
+                {
+                    "filePath": value
+                }
+            };
+
+			return obj;
+		}
+	},
+
+	createVectorData:
+	{
+		value: function( dimen, label, value )
+		{
+			var obj = 
+			{
+                "label":         label,
+                "description":   "a vector",
+                "controlType":   "InputGroup",
+                "defaults":
+                {
+                    data:[
+                        {
+                            "label":         "X",
+                            "description":   "X value",
+                            "controlType":   "HotText",
+                            "defaults":
+                            {
+								"decimalPlace": 100,
+								"minValue": -10,
+                                "maxValue":  10,
+                                "value": value[0]
+                            }
+                        },
+                        {
+                            "label":         "Y",
+                            "description":   "Y value",
+                            "controlType":   "HotText",
+                            "defaults":
+                            {
+								"decimalPlace": 100,
+								"minValue": -100,
+                                "maxValue":  100,
+								"value":	value[1]
+                           }
+                        }
+                    ]
+                }
+			}
+
+			if (dimen > 2)
+			{
+				obj["defaults"]["data"][2] =
+				{
+					"label":         "Z",
+					"description":   "Z value",
+					"controlType":   "HotText",
+					"defaults":
+					{
+						"minValue": -1.e8,
+						"maxValue":  1.e8,
+						"value":	value[2]
+					}
+				}
+			}
+
+			return obj;
+		}
+	},
+
+    _dummyData1: {
+        value: [
+            {
+                "label":         "Texture1",
+                "description":   "Texture1 value",
+                "controlType":   "FileInput",
+                "defaults":
+                {
+                    "filePath": "http://localhost/"
+                }
+            },
+            {
+                "label":         "Diffuse",
+                "description":   "Diffuse value",
+                "controlType":   "ColorChip",
+                "defaults":
+                {
+                }
+            },
+            {
+                "label":         "Specular",
+                "description":   "Specular value",
+                "controlType":   "Button",
+                "defaults":
+                {
+                    "isToggleButton": true
+                }
+            },
+            {
+                "label":         "Shininess",
+                "description":   "Shininess value",
+                "controlType":   "HotText",
+                "defaults":
+                {
+                    "minValue": 0,
+                    "maxValue": 128,
+                    "decimalPlace": 100
+                }
+            },
+            {
+                "label":         "RGB",
+                "description":   "RGB value",
+                "controlType":   "InputGroup",
+                "defaults":
+                {
+                    data:[
+                        {
+                            "label":         "R",
+                            "description":   "R value",
+                            "controlType":   "HotText",
+                            "defaults":
+                            {
+                                "minValue": 0,
+                                "maxValue": 255,
+                                "value": 255
+                            }
+                        },
+                        {
+                            "label":         "G",
+                            "description":   "G value",
+                            "controlType":   "HotText",
+                            "defaults":
+                            {
+                                "minValue": 0,
+                                "maxValue": 255
+                            }
+                        },
+                        {
+                            "label":         "B",
+                            "description":   "B value",
+                            "controlType":   "HotText",
+                            "defaults":
+                            {
+                                "minValue": 0,
+                                "maxValue": 255
+                            }
+                        }
+                    ]
+                }
+            },
+            {
+                "label":         "XYZ",
+                "description":   "XYZ value",
+                "controlType":   "InputGroup",
+                "defaults":
+                {
+                    data:[
+                        {
+                            "label":         "X",
+                            "description":   "X value",
+                            "controlType":   "TextField",
+                            "defaults":
+                            {
+                                "text": "0"
+                            }
+                        },
+                        {
+                            "label":         "Y",
+                            "description":   "Y value",
+                            "controlType":   "TextField",
+                            "defaults":
+                            {
+                                "text": "0"
+                            }
+                        },
+                        {
+                            "label":         "Z",
+                            "description":   "Z value",
+                            "controlType":   "TextField",
+                            "defaults":
+                            {
+                                "text": "1"
+                            }
+                        }
+                    ]
+                }
+            },
+            {
+                "label":         "Foo",
+                "description":   "Foo value",
+                "controlType":   "Slider",
+                "defaults":
+                {
+                    "minValue":    0,
+                    "maxValue":    100,
+                    "value":    50,
+                    "allowTrackClick": true
+                }
+            },
+            {
+                "label":         "Bar",
+                "description":   "Bar value",
+                "controlType":   "HotTextUnit",
+                "defaults":
+                {
+                    "acceptableUnits": ["%"],
+                    "value":    50,
+                    "units": "%"
+                }
+            }
+        ]
+    },
+
+    _dummyData2: {
+        value: [
+                    {
+                        "label":         "Diffuse",
+                        "description":   "Diffuse value",
+                        "controlType":   "ColorChip",
+                        "defaults":
+                        {
+                        }
+                    },
+                    {
+                        "label":         "Ambient",
+                        "description":   "Ambient value",
+                        "controlType":   "ColorChip",
+                        "defaults":
+                        {
+                        }
+                    },
+                    {
+                        "label":         "Specular",
+                        "description":   "Specular value",
+                        "controlType":   "ColorChip",
+                        "defaults":
+                        {
+                        }
+                    },
+                    {
+                        "label":         "Shininess",
+                        "description":   "Shininess value",
+                        "controlType":   "HotText",
+                        "defaults":
+                            {
+                                "minValue": 0,
+                                "maxValue": 128
+                            }
+                    }
+                ]
+    },
+    
+    _materialsData: {
+		enumerable: true,
+        serializable: true,
+	    value: this._dummyData1
+    
+	},
+
+    materialsData: {
+        enumerable: true,
+        serializable: true,
+        get: function() {
+                return this._materialsData;
+            },
+        set: function(data) {
+            this._materialsData = data;
+            this.materialsProperties.needsDraw = true;
+        }
+    }
+
+
+});
-- 
cgit v1.2.3