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>

1 files changed, 99 insertions, 10 deletions

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
index cf0d4e93..cd933ea6 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
@@ -7,14 +7,36 @@ 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,
     MaterialsData = require("js/panels/Materials/materials-data.json"),
-    Popup = require("montage/ui/popup/popup.reel").Popup;
+    Popup = require("montage/ui/popup/popup.reel").Popup,
+    MaterialsModel = require("js/models/materials-model").MaterialsModel,
+    LeafNode = require("js/components/treeview/ninja-leaf.reel").Leaf;
 
 exports.MaterialsLibraryPanel = Montage.create(Component, {
 
+    deleteButton: {
+        value: null
+    },
+
     materialsData: {
         value: null
     },
 
+    materialId: {
+        value: null
+    },
+
+    selectedMaterialNode: {
+        value: null
+    },
+
+    customMaterialsBranch: {
+        value: null
+    },
+
+    customMaterialsCounter: {
+        value: 2
+    },
+
     _hasFocus: {
         enumerable: false,
         value: false
@@ -36,21 +58,32 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
         value:function(event) {
             switch(event._currentTarget.label)
             {
-                case "Add":
-                    console.log("Add new material");
+                case "Duplicate":
+                    this.duplicateMaterial();
                     break;
-                case "Copy":
-                    console.log("Copy selected material");
+                case "Edit":
+//                    console.log("Edit selected material");
+                    this._showMaterialPopup({ materialId: this.materialId });
                     break;
                 case "Delete":
-                    console.log("Delete selected material");
+                    this.deleteMaterial();
                     break;
             }
         }
     },
 
     handleNodeActivation: {
-        value:function(obj) {
+        value: function(obj, event) {
+            this.selectedMaterialNode = event.currentTarget;
+            this.materialId = obj.id;
+            this.deleteButton.enabled = !!obj.canDelete;
+        }
+    },
+
+    handleDblclick: {
+        value:function(obj, event) {
+            this.selectedMaterialNode = event.currentTarget;
+            this.materialId = obj.id;
             this._showMaterialPopup({ materialId: obj.id });
         }
     },
@@ -58,7 +91,6 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
     handleShowMaterialPopup: {
         enumerable: false,
         value: function (event) {
-            //this._showMaterialPopup(event.detail.materialId);
             this._showMaterialPopup(event.detail);
         }
     },
@@ -80,15 +112,16 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
                         if(!this._materialPopup)
             {
                 this._materialPopup = Popup.create();
+                this._materialInfo.materialsLibraryRef = this;
                 this._materialPopup.content = this._materialInfo;
+                this._materialPopup.delegate = this;
                 this._materialPopup.modal = false;
                 this.eventManager.addEventListener("hideMaterialPopup", this, false);
                 this._materialPopup.addEventListener("show", this, false);
             }
             this._materialPopup.show();
 
-            materialID = materialObj.materialId;
-            this._materialInfo.loadMaterials(materialID,  materialObj.useSelection, materialObj.whichMaterial);
+            this._materialInfo.loadMaterials(materialObj.materialId,  materialObj.useSelection, materialObj.whichMaterial);
         }
     },
 
@@ -99,5 +132,61 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
                 this._materialPopup.hide();
             }
         }
+    },
+
+    duplicateMaterial: {
+        enumerable: false,
+        value: function (matCopyName) {
+//            console.log("Duplicate selected material");
+            var mat = MaterialsModel.getMaterial(this.materialId);
+            if(mat) {
+                var matCopy = mat.dup();
+                if(!matCopyName) {
+                    matCopyName = this.materialId + "_" + this.customMaterialsCounter++;
+                }
+                matCopy.setName(matCopyName);
+                MaterialsModel.addMaterial(matCopy);
+
+                var leaf = LeafNode.create();
+                leaf.id = matCopyName;
+                leaf.label = matCopyName;
+                leaf.treeNodeType = "leaf";
+                leaf.canDelete = true;
+                if(!this.customMaterialsBranch) {
+                    this.customMaterialsBranch = this.materialsController.branchControllers[2];
+                }
+                this.customMaterialsBranch.content.push(leaf);
+            }
+        }
+    },
+
+    deleteMaterial: {
+        enumerable: false,
+        value: function () {
+//            console.log("Delete selected material");
+            if(!this.customMaterialsBranch) {
+                this.customMaterialsBranch = this.materialsController.branchControllers[2];
+            }
+
+            var mat = MaterialsModel.getMaterial(this.materialId);
+            if(mat) {
+                MaterialsModel.removeMaterial(this.materialId);
+
+                var index = this.customMaterialsBranch.selectedIndexes[0];
+                this.customMaterialsBranch.content.splice(index, 1);
+            }
+
+            this.deleteButton.enabled = false;
+        }
+    },
+
+    willPositionPopup: {
+        value: function(popup, defaultPosition) {
+            var content = popup.content.element,
+                contentHt = parseFloat(content.style.height) || content.offsetHeight || 0,
+                contentWd = parseFloat(content.style.width) || content.offsetWidth || 0,
+                pt = webkitConvertPointFromNodeToPage(this.selectedMaterialNode, new WebKitPoint(0, 0));
+            return {top: pt.y - contentHt + 10, l