From 978b9049d057d2a0995758275f68da8641193201 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Wed, 27 Jun 2012 14:21:27 -0700
Subject: Integrating Materials UI changes. Squashed commit of the following:

commit 89ccb55130e67c4516e616ccc56d2a649a2b9160
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Wed Jun 27 14:20:01 2012 -0700

    Position Materials Editor popup and change buttons' text color.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 89bca82adc781f4913f8d302a49a8baa907631c5
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Wed Jun 27 12:00:51 2012 -0700

    Support deleting and editing custom materials.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 5be5160c4786beb70e8ad4d75562adb135718c6c
Merge: 1d9d9f6 2ebf3e3
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Wed Jun 27 11:11:37 2012 -0700

    Merge branch 'refs/heads/ninja-internal' into WebGLMaterials

    Conflicts:
    	js/data/panels-data.js

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 1d9d9f6e66ea7585f07ed461cebba99e71f65de0
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Jun 26 22:01:22 2012 -0700

    "Save as" support to duplicate material with modified settings. Also removed Add button and disabled Reset button for now.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit bf1037508dbc686f2884765344832f906cbf06d0
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Jun 26 17:23:31 2012 -0700

    Added UI for duplicating and deleting materials in the Materials Library.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

commit 54930792f9c417df5f739831164aa1f96a41d67a
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Jun 26 14:29:17 2012 -0700

    Added preview of material in materials editor popup and fixed some styling.

    Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 .../materials-popup.reel/materials-popup.css       |  36 ++-
 .../materials-popup.reel/materials-popup.html      |  26 +-
 .../materials-popup.reel/materials-popup.js        | 333 +++++++--------------
 3 files changed, 163 insertions(+), 232 deletions(-)

(limited to 'js/panels/Materials/materials-popup.reel')

diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css
index 943d9bcb..2de03e91 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.css
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.css
@@ -6,7 +6,8 @@
  </copyright> */
 
 .materials_popup {
-    width:400px;
+    width:auto;
+    min-width: 300px;
     font-size: 12px;
     overflow: hidden;
     background: #494949;
@@ -32,6 +33,7 @@
 .mp_preview {
     height: 100px;
     text-align: center;
+    margin: 20px 0 10px 0;
 }
 
 .mp_property
@@ -59,7 +61,19 @@
 .mp_property .hottext,
 .mp_property .hottextInput
 {
-    width: 30px;
+    width: 23px;
+}
+
+.mp_property .hottext
+{
+    color: white;
+    background: none;
+}
+
+.mp_property .hottextInput
+{
+    color: black;
+    background: white;
 }
 
 .mp_property .button
@@ -76,7 +90,8 @@
 
 .mp_properties_list
 {
-   padding-bottom: 8px;
+    padding-bottom: 8px;
+    padding-right: 20px;
 }
 
 .mp_properties_list > .mp_property > .colortoolbar
@@ -104,13 +119,28 @@
   display: block;
   cursor: pointer;
 }
+.mp_buttons button:hover,
+.mp_buttons button:active {
+    color: white;
+}
 
 .mp_buttons .mp_cancel_btn {
     float: left;
     width: 60px;
 }
 
+.mp_buttons .mp_saveAs_btn {
+    float: right;
+    width: 60px;
+}
+
 .mp_buttons .mp_ok_btn {
     float: right;
     width: 30px;
+    margin-left:4px;
+}
+
+.materials_popup .mp_reset_btn {
+    float: right;
+    margin-right: 8px;
 }
\ 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
index bac722cd..c2f3af4e 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.html
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.html
@@ -27,6 +27,21 @@
                     "label": "Cancel"
                 }
             },
+            "saveAsButton": {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "mp_saveAs_btn"},
+                    "label": "Save As..."
+                }
+            },
+            "resetButton": {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "mp_reset_btn"},
+                    "label": "Reset",
+                    "enabled": false
+                }
+            },
             "eventDelegator": {
                 "prototype": "montage/core/event/action-event-listener",
                 "properties": {
@@ -79,7 +94,10 @@
                     "element": {"#": "materials_popup"},
                     "okButton": {"@": "okButton"},
                     "cancelButton": {"@": "cancelButton"},
-                    "materialTitle": {"#": "mp_title"}
+                    "saveAsButton": {"@": "saveAsButton"},
+                    "resetButton": {"@": "resetButton"},
+                    "materialTitle": {"#": "mp_title"},
+                    "previewCanvas": {"#": "mp_preview_canvas"}
                 }
             }
         }
@@ -91,15 +109,19 @@
     	<div data-montage-id="materials_popup" class="materials_popup">
             <div data-montage-id="mp_title" class="mp_title">Material Name</div>
             <hr />
-    		<div data-montage-id="mp_preview" class="mp_preview">Preview Pane</div>
+    		<div data-montage-id="mp_preview" class="mp_preview">
+                <canvas data-montage-id="mp_preview_canvas" width="200" height="100"/>
+            </div>
             <hr />
             <div data-montage-id="mp_properties_list" class="mp_properties_list">
                 <div data-montage-id="mp_property" class="mp_property"></div>
             </div>
+            <button data-montage-id="mp_reset_btn" class="mp_reset_btn nj-skinned"></button>
             <hr />
             <div data-montage-id="mp_buttons" class="mp_buttons">
                 <button data-montage-id="mp_cancel_btn" class="mp_cancel_btn nj-skinned"></button>
                 <button data-montage-id="mp_ok_btn" class="mp_ok_btn nj-skinned"></button>
+                <button data-montage-id="mp_saveAs_btn" class="mp_saveAs_btn nj-skinned"></button>
             </div>
     	</div>
 	</body>
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index 40f07509..3f702459 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -6,7 +6,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 var Montage = require("montage/core/core").Montage,
     Component   = require("montage/ui/component").Component,
-    MaterialsModel = require("js/models/materials-model").MaterialsModel;
+    MaterialsModel = require("js/models/materials-model").MaterialsModel,
+    NJUtils = require("js/lib/NJUtils").NJUtils,
+    World = require("js/lib/drawing/world").World,
+    Rectangle = require("js/lib/geom/rectangle").Rectangle;
 
 ////////////////////////////////////////////////////////////////////////
 //Exporting as MaterialsPopup
@@ -22,11 +25,35 @@ exports.MaterialsPopup = Montage.create(Component, {
         serializable: true
     },
 
+    saveAsButton: {
+        value: null,
+        serializable: true
+    },
+
+    resetButton: {
+        value: null,
+        serializable: true
+    },
+
+    materialsLibraryRef: {
+        value: null
+    },
+
     materialTitle: {
         value: null,
         serializable: true
     },
 
+    previewCanvas: {
+        value: null,
+        serializable: true
+    },
+
+    previewShape: {
+        value: null,
+        serializable: true
+    },
+
 	// Material Properties
     _materialName: {
         enumerable: true,
@@ -65,6 +92,12 @@ exports.MaterialsPopup = Montage.create(Component, {
 
                     }
 					break;
+                case "Save As...":
+                    this.saveAs();
+                    break;
+                case "Reset":
+                    this.reset();
+                    break;
 			}
 
             // Notify Materials Library to close popup
@@ -72,6 +105,28 @@ exports.MaterialsPopup = Montage.create(Component, {
 		}
 	},
 
+    saveAs:
+    {
+        value: function()
+        {
+            console.log("Save As...");
+            var materialCopy = prompt("Save material as", this._materialName + "_Copy");
+
+            if (materialCopy)
+            {
+                this.materialsLibraryRef.duplicateMaterial(materialCopy);
+            }
+        }
+    },
+
+    reset:
+    {
+        value: function()
+        {
+            console.log("Reset");
+        }
+    },
+
 	revertToOriginalValues:
 	{
 		value: function()
@@ -195,6 +250,7 @@ exports.MaterialsPopup = Montage.create(Component, {
 					this._material.setProperty( this._propNames[index],  value );
 				}
 
+                var obj, matArray, matTypeArray, nMats, iMat, world;
 				if (this._useSelection)
 				{
 					console.log( "apply to selection" );
@@ -206,25 +262,38 @@ exports.MaterialsPopup = Montage.create(Component, {
 						for (var iObj=0;  iObj<nObjs;  iObj++)
 						{
 							var canvas = selection[iObj];
-							var obj;
 							if (canvas.elementModel && canvas.elementModel.shapeModel)  obj = canvas.elementModel.shapeModel.GLGeomObj;
 							if (obj)
 							{
-								var matArray = obj._materialArray;
-								var matTypeArray = obj._materialTypeArray;
-								var nMats = matArray.length;
-								for (var iMat=0;  iMat<nMats;  iMat++)
+								matArray = obj._materialArray;
+								matTypeArray = obj._materialTypeArray;
+								nMats = matArray.length;
+								for (iMat=0;  iMat<nMats;  iMat++)
 								{
 									if (matTypeArray[iMat] === this._whichMaterial)
 										matArray[iMat].setProperty( this._propNames[index], value );
 								}
-								var world = obj.getWorld();
+								world = obj.getWorld();
 								if (world)
 									world.restartRenderLoop();
 							}
 						}
 					}
 				}
+
+                // Update preview material
+                obj = this.previewShape;
+                matArray = obj._materialArray;
+                matTypeArray = obj._materialTypeArray;
+                nMats = matArray.length;
+                for (iMat=0;  iMat<nMats;  iMat++)
+                {
+                    if (matTypeArray[iMat] === "fill")
+                        matArray[iMat].setProperty( this._propNames[index], value );
+                }
+                world = obj.getWorld();
+                if (world)
+                    world.restartRenderLoop();
 			}
 		}
 	},
@@ -286,8 +355,13 @@ exports.MaterialsPopup = Montage.create(Component, {
 		enumerable: false,
 		value: function() {
             this.cancelButton.addEventListener("action", this, true);
-
             this.okButton.addEventListener("action", this, true);
+            this.saveAsButton.addEventListener("action", this, true);
+            this.resetButton.addEventListener("action", this, true);
+
+            if (!this.previewCanvas.getAttribute( "data-RDGE-id" )) {
+                this.previewCanvas.setAttribute( "data-RDGE-id", NJUtils.generateRandom() );
+            }
         }
     },
 	////////////////////////////////////////////////////////////////////
@@ -295,7 +369,23 @@ exports.MaterialsPopup = Montage.create(Component, {
 	didDraw: {
 		enumerable: false,
 		value: function() {
-           this.materialTitle.innerHTML = this._materialName;
+
+            var world;
+            if(!this.previewShape) {
+                world = new World(this.previewCanvas, true);
+                this.previewShape = Object.create(Rectangle, {});
+                this.previewShape.init(world, 0, 0, 200, 100, 1, [0,0,0,1], [1,1,1,1],
+                                            0, 0, 0, 0, null, null, "Solid");
+                world.addObject(this.previewShape);
+            } else {
+                world = this.previewShape.getWorld();
+            }
+
+            this.materialTitle.innerHTML = this._materialName;
+
+            this.previewShape.setFillMaterial(this._material);
+            this.previewShape.buildBuffers();
+            world.render();
 		}
 	},
 
@@ -334,37 +424,7 @@ exports.MaterialsPopup = Montage.create(Component, {
 			else
 			{
 				this._useSelection = false;
-
-				if(
-						(materialID ===  "Bump Metal")		||
-						(materialID ===  "Deform")			||
-						(materialID ===  "Flat")			||
-						(materialID ===  "Flag")			||
-						(materialID ===  "Fly")				||
-						(materialID ===  "Julia")			||
-						(materialID ===  "Keleidoscope")	||
-						(materialID ===  "Linear Gradient")	||
-						(materialID ===  "Mandel")			||
-						(materialID ===  "Paris")			||
-						(materialID ===  "Plasma")			||
-						(materialID ===  "Pulse")			||
-						(materialID ===  "Radial Blur")		||
-						(materialID ===  "Radial Gradient")	||
-						(materialID ===  "Raiders")			||
-						(materialID ===  "Relief Tunnel")	||
-						(materialID ===  "Square Tunnel")	||
-						(materialID ===  "Star")			||
-						(materialID ===  "Taper")			||
-						(materialID ===  "Tunnel")			||
-						(materialID ===  "Twist")			||
-						(materialID ===  "Twist Vertex")	||
-						(materialID ===  "Uber")			||
-						(materialID ===  "Water")			||
-						(materialID ===  "Z-Invert")
-					)
-				{
-					material = MaterialsModel.getMaterial( materialID );
-				}
+                material = MaterialsModel.getMaterial( materialID );
 			}
 				
 			if (material)
@@ -479,7 +539,8 @@ exports.MaterialsPopup = Montage.create(Component, {
                     "minValue": 0,
                     "maxValue": 400,
                     "decimalPlace": 100,
-					"value": value
+					"value": value,
+                    "stepSize": 0.1
                 }
 			}
 
@@ -547,7 +608,8 @@ exports.MaterialsPopup = Montage.create(Component, {
 								"decimalPlace": 100,
 								"minValue": -10,
                                 "maxValue":  10,
-                                "value": value[0]
+                                "value": value[0],
+                                "stepSize": 0.1
                             }
                         },
                         {
@@ -559,7 +621,8 @@ exports.MaterialsPopup = Montage.create(Component, {
 								"decimalPlace": 100,
 								"minValue": -100,
                                 "maxValue":  100,
-								"value":	value[1]
+								"value":	value[1],
+                                "stepSize": 0.1
                            }
                         }
                     ]
@@ -586,190 +649,6 @@ exports.MaterialsPopup = Montage.create(Component, {
 		}
 	},
 
-    // _dummyData1
-    CheckerBoard: {
-        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
-    ShinyMetal: {
-        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
-                            }
-                    }
-                ]
-    },
-
     materialsProperties: {
         serializable: true,
         value: null
-- 
cgit v1.2.3


From 2da05a4c71bfe9b136384d9e94fbfbef19f24550 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Wed, 27 Jun 2012 17:28:06 -0700
Subject: Performance fix for WebGL materials playing even when the dialog/file
 is no longer in view.

Also pausing videos when switching documents.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 .../materials-popup.reel/materials-popup.js        | 51 +++++++++++-----------
 1 file changed, 26 insertions(+), 25 deletions(-)

(limited to 'js/panels/Materials/materials-popup.reel')

diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index 3f702459..9b7b031b 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -69,11 +69,11 @@ exports.MaterialsPopup = Montage.create(Component, {
 			switch(event._currentTarget.label)
 			{
 				case "Cancel":
-					console.log("Cancel material edit");
+//					console.log("Cancel material edit");
 					this.revertToOriginalValues();
 					break;
 				case "OK":
-					console.log("Committing material with the following values:");
+//					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];
@@ -109,7 +109,7 @@ exports.MaterialsPopup = Montage.create(Component, {
     {
         value: function()
         {
-            console.log("Save As...");
+//            console.log("Save As...");
             var materialCopy = prompt("Save material as", this._materialName + "_Copy");
 
             if (materialCopy)
@@ -123,7 +123,7 @@ exports.MaterialsPopup = Montage.create(Component, {
     {
         value: function()
         {
-            console.log("Reset");
+//            console.log("Reset");
         }
     },
 
@@ -186,15 +186,15 @@ exports.MaterialsPopup = Montage.create(Component, {
     {
         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(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 );
@@ -206,15 +206,15 @@ exports.MaterialsPopup = Montage.create(Component, {
         value: function(theEvent)
         {
 			var event = theEvent._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(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 );
@@ -253,7 +253,7 @@ exports.MaterialsPopup = Montage.create(Component, {
                 var obj, matArray, matTypeArray, nMats, iMat, world;
 				if (this._useSelection)
 				{
-					console.log( "apply to selection" );
+//					console.log( "apply to selection" );
 
 					var selection = this.application.ninja.selectedElements;
 					if (selection && (selection.length > 0))
@@ -385,7 +385,7 @@ exports.MaterialsPopup = Montage.create(Component, {
 
             this.previewShape.setFillMaterial(this._material);
             this.previewShape.buildBuffers();
-            world.render();
+            world.restartRenderLoop();
 		}
 	},
 
@@ -393,7 +393,8 @@ exports.MaterialsPopup = Montage.create(Component, {
 	destroy: {
 		enumerable: false,
 		value: function() {
-			// add cleanup routines here
+//			console.log("cleanup routines here");
+            this.previewShape.getWorld().stop();
 		}
 	},
 
-- 
cgit v1.2.3


From 648ee61ae84216d0236e0dbc211addc13b2cfa3a Mon Sep 17 00:00:00 2001
From: Kris Kowal
Date: Fri, 6 Jul 2012 11:52:06 -0700
Subject: Expand tabs

---
 .../materials-popup.reel/materials-popup.css       |   4 +-
 .../materials-popup.reel/materials-popup.html      |  20 +-
 .../materials-popup.reel/materials-popup.js        | 842 ++++++++++-----------
 3 files changed, 433 insertions(+), 433 deletions(-)

(limited to 'js/panels/Materials/materials-popup.reel')

diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css
index a5362615..3ddc8a98 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.css
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.css
@@ -105,8 +105,8 @@ POSSIBILITY OF SUCH DAMAGE.
 
 .mp_properties_list > .mp_property > .colortoolbar
 {
-	width: 27px !important;
-	height: 27px !important;
+    width: 27px !important;
+    height: 27px !important;
     overflow:hidden !important;
     margin-top: -6px;
 }
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html
index b377fa2d..eb2433e3 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.html
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.html
@@ -29,13 +29,13 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 POSSIBILITY OF SUCH DAMAGE.
 </copyright> -->
 <html lang="en">
-	<head>
+    <head>
 
-    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
-    	<link rel="stylesheet" type="text/css" href="materials-popup.css">
+        <link rel="stylesheet" type="text/css" href="materials-popup.css">
 
-   		<script type="text/montage-serialization">
+        <script type="text/montage-serialization">
         {
             "okButton": {
                 "prototype": "montage/ui/button.reel",
@@ -109,13 +109,13 @@ POSSIBILITY OF SUCH DAMAGE.
         }
     </script>
 
-	</head>
+    </head>
 
-	<body>
-    	<div data-montage-id="materials_popup" class="materials_popup">
+    <body>
+        <div data-montage-id="materials_popup" class="materials_popup">
             <div data-montage-id="mp_title" class="mp_title">Material Name</div>
             <hr />
-    		<div data-montage-id="mp_preview" class="mp_preview">Preview Pane</div>
+            <div data-montage-id="mp_preview" class="mp_preview">Preview Pane</div>
             <hr />
             <div data-montage-id="mp_properties_list" class="mp_properties_list">
                 <div data-montage-id="mp_property" class="mp_property"></div>
@@ -125,6 +125,6 @@ POSSIBILITY OF SUCH DAMAGE.
                 <button data-montage-id="mp_cancel_btn" class="mp_cancel_btn nj-skinned"></button>
                 <button data-montage-id="mp_ok_btn" class="mp_ok_btn nj-skinned"></button>
             </div>
-    	</div>
-	</body>
+        </div>
+    </body>
 </html>
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index 7c5493c6..cecb0a71 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -51,26 +51,26 @@ exports.MaterialsPopup = Montage.create(Component, {
         serializable: true
     },
 
-	// Material Properties
+    // Material Properties
     _materialName: {
         enumerable: true,
         value: ""
     },
 
-	_useSelection: {  value: false,  enumerable: true },
-	_whichMaterial: { value: "fill", enumerable: true },
-	_originalValues: {value: null,  enumerable: true },
-
-	captureAction: {
-		value:function(event) {
-			switch(event._currentTarget.label)
-			{
-				case "Cancel":
-					console.log("Cancel material edit");
-					this.revertToOriginalValues();
-					break;
-				case "OK":
-					console.log("Committing material with the following values:");
+    _useSelection: {  value: false,  enumerable: true },
+    _whichMaterial: { value: "fill", enumerable: true },
+    _originalValues: {value: null,  enumerable: true },
+
+    captureAction: {
+        value:function(event) {
+            switch(event._currentTarget.label)
+            {
+                case "Cancel":
+                    console.log("Cancel material edit");
+                    this.revertToOriginalValues();
+                    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];
@@ -88,53 +88,53 @@ exports.MaterialsPopup = Montage.create(Component, {
                         console.log("--------------");
 
                     }
-					break;
-			}
+                    break;
+            }
 
             // Notify Materials Library to close popup
             NJevent("hideMaterialPopup");
-		}
-	},
-
-	revertToOriginalValues:
-	{
-		value: function()
-		{
-			if (this._originalValues)
-			{
-				this._material.importJSON( this._originalValues );
-
-				if (this._useSelection)
-				{
-					var selection = this.application.ninja.selectedElements;
-					if (selection && (selection.length > 0))
-					{
-						var nObjs = selection.length;
-						for (var iObj=0;  iObj<nObjs;  iObj++)
-						{
-							var canvas = selection[iObj];
-							var obj;
-							if (canvas.elementModel && canvas.elementModel.shapeModel)  obj = canvas.elementModel.shapeModel.GLGeomObj;
-							if (obj)
-							{
-								var matArray = obj._materialArray;
-								var matTypeArray = obj._materialTypeArray;
-								var nMats = matArray.length;
-								for (var iMat=0;  iMat<nMats;  iMat++)
-								{
-									if (matTypeArray[iMat] === this._whichMaterial)
-										matArray[iMat].importJSON( this._originalValues );
-								}
-								var world = obj.getWorld();
-								if (world)
-									world.restartRenderLoop();
-							}
-						}
-					}
-				}
-			}
-		}
-	},
+        }
+    },
+
+    revertToOriginalValues:
+    {
+        value: function()
+        {
+            if (this._originalValues)
+            {
+                this._material.importJSON( this._originalValues );
+
+                if (this._useSelection)
+                {
+                    var selection = this.application.ninja.selectedElements;
+                    if (selection && (selection.length > 0))
+                    {
+                        var nObjs = selection.length;
+                        for (var iObj=0;  iObj<nObjs;  iObj++)
+                        {
+                            var canvas = selection[iObj];
+                            var obj;
+                            if (canvas.elementModel && canvas.elementModel.shapeModel)  obj = canvas.elementModel.shapeModel.GLGeomObj;
+                            if (obj)
+                            {
+                                var matArray = obj._materialArray;
+                                var matTypeArray = obj._materialTypeArray;
+                                var nMats = matArray.length;
+                                for (var iMat=0;  iMat<nMats;  iMat++)
+                                {
+                                    if (matTypeArray[iMat] === this._whichMaterial)
+                                        matArray[iMat].importJSON( this._originalValues );
+                                }
+                                var world = obj.getWorld();
+                                if (world)
+                                    world.restartRenderLoop();
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    },
 
     updatePreview:
     {
@@ -165,8 +165,8 @@ exports.MaterialsPopup = Montage.create(Component, {
                 console.log(event.propertyLabel + " changing to " + event.propertyValue);
             }
 
-			if (event.propertyLabel && event.propertyValue)
-				this.applyProperty( event.propertyLabel,  event.propertyValue );
+            if (event.propertyLabel && event.propertyValue)
+                this.applyProperty( event.propertyLabel,  event.propertyValue );
         }
     },
 
@@ -174,7 +174,7 @@ exports.MaterialsPopup = Montage.create(Component, {
     {
         value: function(theEvent)
         {
-			var event = theEvent._event;
+            var event = theEvent._event;
             if(typeof event.propertyValue === "object")
             {
                 console.log(event.propertyLabel + " changed to ");
@@ -185,316 +185,316 @@ exports.MaterialsPopup = Montage.create(Component, {
                 console.log(event.propertyLabel + " changed to " + event.propertyValue);
             }
 
-			if (event.propertyLabel)
-				this.applyProperty( event.propertyLabel,  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 );
-				}
-
-				if (this._useSelection)
-				{
-					console.log( "apply to selection" );
-
-					var selection = this.application.ninja.selectedElements;
-					if (selection && (selection.length > 0))
-					{
-						var nObjs = selection.length;
-						for (var iObj=0;  iObj<nObjs;  iObj++)
-						{
-							var canvas = selection[iObj];
-							var obj;
-							if (canvas.elementModel && canvas.elementModel.shapeModel)  obj = canvas.elementModel.shapeModel.GLGeomObj;
-							if (obj)
-							{
-								var matArray = obj._materialArray;
-								var matTypeArray = obj._materialTypeArray;
-								var nMats = matArray.length;
-								for (var iMat=0;  iMat<nMats;  iMat++)
-								{
-									if (matTypeArray[iMat] === this._whichMaterial)
-										matArray[iMat].setProperty( this._propNames[index], value );
-								}
-								var world = obj.getWorld();
-								if (world)
-									world.restartRenderLoop();
-							}
-						}
-					}
-				}
-			}
-		}
-	},
-
-	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 "angle":
-					rtnValue = value*3.14159/180.0;
-					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;
-		}
-	},
+    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 );
+                }
+
+                if (this._useSelection)
+                {
+                    console.log( "apply to selection" );
+
+                    var selection = this.application.ninja.selectedElements;
+                    if (selection && (selection.length > 0))
+                    {
+                        var nObjs = selection.length;
+                        for (var iObj=0;  iObj<nObjs;  iObj++)
+                        {
+                            var canvas = selection[iObj];
+                            var obj;
+                            if (canvas.elementModel && canvas.elementModel.shapeModel)  obj = canvas.elementModel.shapeModel.GLGeomObj;
+                            if (obj)
+                            {
+                                var matArray = obj._materialArray;
+                                var matTypeArray = obj._materialTypeArray;
+                                var nMats = matArray.length;
+                                for (var iMat=0;  iMat<nMats;  iMat++)
+                                {
+                                    if (matTypeArray[iMat] === this._whichMaterial)
+                                        matArray[iMat].setProperty( this._propNames[index], value );
+                                }
+                                var world = obj.getWorld();
+                                if (world)
+                                    world.restartRenderLoop();
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    },
+
+    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 "angle":
+                    rtnValue = value*3.14159/180.0;
+                    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() {
+    //
+    prepareForDraw: {
+        enumerable: false,
+        value: function() {
             this.cancelButton.addEventListener("action", this, true);
 
             this.okButton.addEventListener("action", this, true);
         }
     },
-	////////////////////////////////////////////////////////////////////
-	//
-	didDraw: {
-		enumerable: false,
-		value: function() {
+    ////////////////////////////////////////////////////////////////////
+    //
+    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,  useSelection,  whichMaterial)
-		{
-			//TODO - Hack to force repetition to draw. Setting .length = 0 did not work.
-			this.materialsData = [];
-
-			var material;
-			this._materialName = materialID;
-			if (useSelection)
-			{
-				this._useSelection = true;
-				var selection = this.application.ninja.selectedElements;
-				if (selection && (selection.length > 0))
-				{
-					var canvas = selection[0];
-					var obj;
-					this._whichMaterial = whichMaterial;
-					if (canvas.elementModel && canvas.elementModel.shapeModel)  obj = canvas.elementModel.shapeModel.GLGeomObj;
-					if (obj)
-						material = (whichMaterial === 'stroke') ? obj.getStrokeMaterial() : obj.getFillMaterial();
-				}
-			}
-			else
-			{
-				this._useSelection = false;
-
-				if(
-						(materialID ===  "Bump Metal")		||
-						(materialID ===  "Deform")			||
-						(materialID ===  "Flat")			||
-						(materialID ===  "Flag")			||
-						(materialID ===  "Fly")				||
-						(materialID ===  "Julia")			||
-						(materialID ===  "Keleidoscope")	||
-						(materialID ===  "Linear Gradient")	||
-						(materialID ===  "Mandel")			||
-						(materialID ===  "Paris")			||
-						(materialID ===  "Plasma")			||
-						(materialID ===  "Pulse")			||
-						(materialID ===  "Radial Blur")		||
-						(materialID ===  "Radial Gradient")	||
-						(materialID ===  "Raiders")			||
-						(materialID ===  "Relief Tunnel")	||
-						(materialID ===  "Square Tunnel")	||
-						(materialID ===  "Star")			||
-						(materialID ===  "Taper")			||
-						(materialID ===  "Tunnel")			||
-						(materialID ===  "Twist")			||
-						(materialID ===  "Twist Vertex")	||
-						(materialID ===  "Uber")			||
-						(materialID ===  "Water")			||
-						(materialID ===  "Z-Invert")
-					)
-				{
-					material = MaterialsModel.getMaterial( materialID );
-				}
-			}
-				
-			if (material)
-			{
-				this._material = material;
-				this._originalValues = material.exportJSON();
-				this.materialsData = this.getMaterialData( material );
-			}
-			else
-			{
-				this.materialsData = this[materialID];
-			}
-			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 "angle":
-						obj = this.createFloatData( propLabels[i], propValues[i]*180.0/3.14159 );
-						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 )
-		{
+        }
+    },
+
+    //Garbage collection (Manual method)
+    destroy: {
+        enumerable: false,
+        value: function() {
+            // add cleanup routines here
+        }
+    },
+
+    loadMaterials:
+    {
+        enumerable: true,
+        value: function(materialID,  useSelection,  whichMaterial)
+        {
+            //TODO - Hack to force repetition to draw. Setting .length = 0 did not work.
+            this.materialsData = [];
+
+            var material;
+            this._materialName = materialID;
+            if (useSelection)
+            {
+                this._useSelection = true;
+                var selection = this.application.ninja.selectedElements;
+                if (selection && (selection.length > 0))
+                {
+                    var canvas = selection[0];
+                    var obj;
+                    this._whichMaterial = whichMaterial;
+                    if (canvas.elementModel && canvas.elementModel.shapeModel)  obj = canvas.elementModel.shapeModel.GLGeomObj;
+                    if (obj)
+                        material = (whichMaterial === 'stroke') ? obj.getStrokeMaterial() : obj.getFillMaterial();
+                }
+            }
+            else
+            {
+                this._useSelection = false;
+
+                if(
+                        (materialID ===  "Bump Metal")      ||
+                        (materialID ===  "Deform")          ||
+                        (materialID ===  "Flat")            ||
+                        (materialID ===  "Flag")            ||
+                        (materialID ===  "Fly")             ||
+                        (materialID ===  "Julia")           ||
+                        (materialID ===  "Keleidoscope")    ||
+                        (materialID ===  "Linear Gradient") ||
+                        (materialID ===  "Mandel")          ||
+                        (materialID ===  "Paris")           ||
+                        (materialID ===  "Plasma")          ||
+                        (materialID ===  "Pulse")           ||
+                        (materialID ===  "Radial Blur")     ||
+                        (materialID ===  "Radial Gradient") ||
+                        (materialID ===  "Raiders")         ||
+                        (materialID ===  "Relief Tunnel")   ||
+                        (materialID ===  "Square Tunnel")   ||
+                        (materialID ===  "Star")            ||
+                        (materialID ===  "Taper")           ||
+                        (materialID ===  "Tunnel")          ||
+                        (materialID ===  "Twist")           ||
+                        (materialID ===  "Twist Vertex")    ||
+                        (materialID ===  "Uber")            ||
+                        (materialID ===  "Water")           ||
+                        (materialID ===  "Z-Invert")
+                    )
+                {
+                    material = MaterialsModel.getMaterial( materialID );
+                }
+            }
+                
+            if (material)
+            {
+                this._material = material;
+                this._originalValues = material.exportJSON();
+                this.materialsData = this.getMaterialData( material );
+            }
+            else
+            {
+                this.materialsData = this[materialID];
+            }
+            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 "angle":
+                        obj = this.createFloatData( propLabels[i], propValues[i]*180.0/3.14159 );
+                        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 css = 'rgba(' + Math.floor(color[0]*255) + ',' + Math.floor(color[1]*255) + ',' + Math.floor(color[2]*255) + ',' + color[3] + ')';
             var colorObj = this.application.ninja.colorController.getColorObjFromCss(css)
-			var obj =
-			{
-				"label":		label,
-				"description":	"a color",
-				"controlType":	"ColorChip",
+            var obj =
+            {
+                "label":        label,
+                "description":  "a color",
+                "controlType":  "ColorChip",
                 "defaults":
                 {
-					"color":	colorObj
-				}
-			};
-
-			return obj;
-		}
-	},
-
-	createFloatData:
-	{
-		value: function( label, value )
-		{
-			var obj =
-			{
+                    "color":    colorObj
+                }
+            };
+
+            return obj;
+        }
+    },
+
+    createFloatData:
+    {
+        value: function( label, value )
+        {
+            var obj =
+            {
                 "label":         label,
                 "description":   "floating point value",
                 "controlType":   "HotText",
@@ -503,40 +503,40 @@ exports.MaterialsPopup = Montage.create(Component, {
                     "minValue": 0,
                     "maxValue": 400,
                     "decimalPlace": 100,
-					"value": value
+                    "value": value
                 }
-			}
-
-			return obj;
-		}
-	},
-	
-	createCheckboxData:
-	{
-		value: function( label, value )
-		{
-			var obj =
-			{
+            }
+
+            return obj;
+        }
+    },
+    
+    createCheckboxData:
+    {
+        value: function( label, value )
+        {
+            var obj =
+            {
                 "label":         label,
                 "description":   "checkbox",
                 "controlType":   "Button",
                 "defaults":
                 {
                     "isToggleButton": true,
-					"value": value
+                    "value": value
                 }
-			}
-
-			return obj;
-		}
-	},
-
-	createFileData:
-	{
-		value: function( label, value )
-		{
-			var obj =
-			{
+            }
+
+            return obj;
+        }
+    },
+
+    createFileData:
+    {
+        value: function( label, value )
+        {
+            var obj =
+            {
                 "label":         label,
                 "description":   "Image file",
                 "controlType":   "FileInput",
@@ -546,16 +546,16 @@ exports.MaterialsPopup = Montage.create(Component, {
                 }
             };
 
-			return obj;
-		}
-	},
+            return obj;
+        }
+    },
 
-	createVectorData:
-	{
-		value: function( dimen, label, value )
-		{
-			var obj = 
-			{
+    createVectorData:
+    {
+        value: function( dimen, label, value )
+        {
+            var obj = 
+            {
                 "label":         label,
                 "description":   "a vector",
                 "controlType":   "InputGroup",
@@ -568,8 +568,8 @@ exports.MaterialsPopup = Montage.create(Component, {
                             "controlType":   "HotText",
                             "defaults":
                             {
-								"decimalPlace": 100,
-								"minValue": -10,
+                                "decimalPlace": 100,
+                                "minValue": -10,
                                 "maxValue":  10,
                                 "value": value[0]
                             }
@@ -580,35 +580,35 @@ exports.MaterialsPopup = Montage.create(Component, {
                             "controlType":   "HotText",
                             "defaults":
                             {
-								"decimalPlace": 100,
-								"minValue": -100,
+                                "decimalPlace": 100,
+                                "minValue": -100,
                                 "maxValue":  100,
-								"value":	value[1]
+                                "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;
-		}
-	},
+            }
+
+            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
     CheckerBoard: {
@@ -800,11 +800,11 @@ exports.MaterialsPopup = Montage.create(Component, {
     },
     
     _materialsData: {
-		enumerable: true,
+        enumerable: true,
         serializable: true,
-	    value: []
+        value: []
     
-	},
+    },
 
     materialsData: {
         enumerable: true,
-- 
cgit v1.2.3


From 04343eda8c2f870b0da55cfdc8003c99fe1cc4de Mon Sep 17 00:00:00 2001
From: Kris Kowal
Date: Fri, 6 Jul 2012 11:53:10 -0700
Subject: Remove trailing spaces

---
 js/panels/Materials/materials-popup.reel/materials-popup.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'js/panels/Materials/materials-popup.reel')

diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index cecb0a71..12a86c47 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -202,7 +202,7 @@ exports.MaterialsPopup = Montage.create(Component, {
                 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++)
@@ -390,7 +390,7 @@ exports.MaterialsPopup = Montage.create(Component, {
                     material = MaterialsModel.getMaterial( materialID );
                 }
             }
-                
+
             if (material)
             {
                 this._material = material;
@@ -510,7 +510,7 @@ exports.MaterialsPopup = Montage.create(Component, {
             return obj;
         }
     },
-    
+
     createCheckboxData:
     {
         value: function( label, value )
@@ -554,7 +554,7 @@ exports.MaterialsPopup = Montage.create(Component, {
     {
         value: function( dimen, label, value )
         {
-            var obj = 
+            var obj =
             {
                 "label":         label,
                 "description":   "a vector",
@@ -798,12 +798,12 @@ exports.MaterialsPopup = Montage.create(Component, {
         serializable: true,
         value: null
     },
-    
+
     _materialsData: {
         enumerable: true,
         serializable: true,
         value: []
-    
+
     },
 
     materialsData: {
-- 
cgit v1.2.3


From 9461e7731f91dd03a15b0a62667e722a60c84721 Mon Sep 17 00:00:00 2001
From: Kris Kowal
Date: Fri, 6 Jul 2012 12:44:57 -0700
Subject: Remove byte order markers (BOM)

---
 js/panels/Materials/materials-popup.reel/materials-popup.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js/panels/Materials/materials-popup.reel')

diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html
index eb2433e3..c1a117e5 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.html
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <copyright>
 Copyright (c) 2012, Motorola Mobility, Inc
 All Rights Reserved.
-- 
cgit v1.2.3


From 40c6eb2c06b34f65a74d59ef9687251952858bab Mon Sep 17 00:00:00 2001
From: Kris Kowal
Date: Fri, 6 Jul 2012 12:47:27 -0700
Subject: Normalize HTML doctype

---
 js/panels/Materials/materials-popup.reel/materials-popup.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js/panels/Materials/materials-popup.reel')

diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html
index c1a117e5..8d505cf8 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.html
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!-- <copyright>
 Copyright (c) 2012, Motorola Mobility, Inc
 All Rights Reserved.
-- 
cgit v1.2.3


From ac27d538af33ca8d67d3d88729f49c05793afda7 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Mon, 9 Jul 2012 11:43:36 -0700
Subject: PI, drawing and editing fixes for shapes and materials.

IKNinja-1841 - Cannot change webgl shape with LinearGradient and RadialGradient to solid color.

IKNINJA-1851 - Cannot draw webgl shapes with Linear/RadialGradient material.

IKNINJA-1864 - PI doesn't update the color of shape if WebGL material switches to Flat.

IKNINJA-1886 - Gradient edits not applied to WebGL Stage object.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 .../materials-popup.reel/materials-popup.css       | 10 +++
 .../materials-popup.reel/materials-popup.js        | 76 ++++++++++++++++++----
 2 files changed, 74 insertions(+), 12 deletions(-)

(limited to 'js/panels/Materials/materials-popup.reel')

diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.css b/js/panels/Materials/materials-popup.reel/materials-popup.css
index 2de03e91..b57d4a03 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.css
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.css
@@ -88,6 +88,16 @@
     position: relative;
 }
 
+.mp_property .gradientpicker
+{
+    top: 0;
+}
+
+.mp_property .gradientpicker .type
+{
+    display: none;
+}
+
 .mp_properties_list
 {
     padding-bottom: 8px;
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index 9b7b031b..a1415343 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -9,7 +9,8 @@ var Montage = require("montage/core/core").Montage,
     MaterialsModel = require("js/models/materials-model").MaterialsModel,
     NJUtils = require("js/lib/NJUtils").NJUtils,
     World = require("js/lib/drawing/world").World,
-    Rectangle = require("js/lib/geom/rectangle").Rectangle;
+    Rectangle = require("js/lib/geom/rectangle").Rectangle,
+    ShapesController = require("js/controllers/elements/shapes-controller").ShapesController;
 
 ////////////////////////////////////////////////////////////////////////
 //Exporting as MaterialsPopup
@@ -341,6 +342,10 @@ exports.MaterialsPopup = Montage.create(Component, {
 					rtnValue = value;
 					break;
 
+                case "gradient":
+                    rtnValue = value;
+                    break;
+
 				default:
 					console.log( "unrecognized material control type: " + type );
 					break;
@@ -432,7 +437,11 @@ exports.MaterialsPopup = Montage.create(Component, {
 			{
 				this._material = material;
 				this._originalValues = material.exportJSON();
-				this.materialsData = this.getMaterialData( material );
+                if((materialID === "Linear Gradient") || (materialID === "Radial Gradient")) {
+                    this.materialsData = this.getEditableProperties( material );
+                } else {
+				    this.materialsData = this.getMaterialData( material );