45 files changed, 1162 insertions, 724 deletions

diff --git a/js/panels/Materials/Materials.xml b/js/panels/Materials/Materials.xml
index e955623a..a958575e 100755
--- a/js/panels/Materials/Materials.xml
+++ b/js/panels/Materials/Materials.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="ISO-8859-1"?>
 <tree id="Materials">
     <folder id="ninjaMaterials" label="Ninja Materials">
-          <leaf id="UberMaterial" label="Uber" />
+              <leaf id="UberMaterial" label="Uber" />
         <leaf id="BumpMetalMaterial" label="Bump Metal" />
         <leaf id="LinearGradientMaterial" label="Linear Gradient" />
         <leaf id="RadialGradientMaterial" label="Radial Gradient" />
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
index eede02bd..6ba4ac75 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
@@ -10,14 +10,18 @@
         <link rel="stylesheet" type="text/css" href="materials-library-panel.css">
          <script type="text/montage-serialization">
         {
+             "materialInfo": {
+                 "module": "js/panels/Materials/materials-popup.reel",
+                 "name": "MaterialsPopup"
+             },
             "owner": {
                 "module": "js/panels/Materials/materials-library-panel.reel",
                 "name": "MaterialsLibraryPanels",
                 "properties": {
-                    "element": {"#": "materials_library_panel"}
+                    "element": {"#": "materials_library_panel"},
+                    "_materialInfo": {"@": "materialInfo"}
                 }
             }
-
         }
                 </script>
                 
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 f97e1a27..b16c4376 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,7 +7,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 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;
+    PopupMananger =             require("js/components/popup-manager.reel").PopupMananger,
+    Popup = require("montage/ui/popup/popup.reel").Popup;
 
 exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, {
 
@@ -92,20 +93,7 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re
     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);
+            this._showMaterialPopup(tNode.id);
         }
     },
 
@@ -113,93 +101,34 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re
         enumerable:true,
         value:null
     },
+
+    _materialInfo: {
+        enumerable:true
+    },
     
     _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');
+        value: function (materialID) {
+
+            if(!this._materialPopup)
+            {
+                this._materialPopup = Popup.create();
+                this._materialPopup.content = this._materialInfo;
+                this._materialPopup.modal = false;
+                this.eventManager.addEventListener("hideMaterialPopup", this, false);
+                this._materialPopup.addEventListener("show", this, false);
+            }
+            this._materialPopup.show();
+            this._materialInfo.loadMaterials(materialID);