From dd5519dc15f56d44abe38b6454a5034db4800585 Mon Sep 17 00:00:00 2001
From: Ananya Sen
Date: Fri, 16 Mar 2012 17:27:42 -0700
Subject: fix for IKNINJA-1357 - Cannot create other file types such as css,
 json from the New file dialog box.

Signed-off-by: Ananya Sen <Ananya.Sen@motorola.com>
---
 .../ui/tree-basic/treeItem.reel/treeItem.js        | 35 ++++++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/js/components/ui/tree-basic/treeItem.reel/treeItem.js b/js/components/ui/tree-basic/treeItem.reel/treeItem.js
index a67dad43..13e278e9 100755
--- a/js/components/ui/tree-basic/treeItem.reel/treeItem.js
+++ b/js/components/ui/tree-basic/treeItem.reel/treeItem.js
@@ -107,8 +107,8 @@ exports.TreeItem = Montage.create(Component, {
             //icon or text click sends selection event
             var contentEls = this.element.querySelectorAll(".atreeItemContent");
             for(var i=0;i<contentEls.length;i++){
-                contentEls[i].addEventListener("click", function(evt){that.handleTreeItemContentClick(evt);}, false);
-                contentEls[i].addEventListener("dblclick", function(evt){that.handleTreeItemContentDblclick(evt);}, false);
+                contentEls[i].addEventListener("click", function(evt){that.handleTreeItemContentClick(evt);}, true);
+                contentEls[i].addEventListener("dblclick", function(evt){that.handleTreeItemContentDblclick(evt);}, true);
             }
 
             this.element.addEventListener("mouseover", function(evt){that.handleTreeItemMouseover(evt);}, false);
@@ -123,7 +123,7 @@ exports.TreeItem = Montage.create(Component, {
             if(this.treeItemData.modifiedDate){this.metadata = this.metadata + "<br />" + "Modified date: "+ this.formatTimestamp(this.treeItemData.modifiedDate);}
 
             if((this.treeItemData.type === "directory") && (this.expandAfterDraw === true)){
-                this.toggleContent(this.treeArrow);
+                this.expand(this.treeArrow);
             }
             if(this.treeItemData.uri === this.highlightedUri){
                 this.itemName.classList.add("selected");
@@ -171,6 +171,35 @@ exports.TreeItem = Montage.create(Component, {
         }
     },
 
+    expand:{
+        writable:false,
+        enumerable:true,
+        value:function(el){
+            //if children already drawn then just hide/show
+            if(this.element.getElementsByTagName("ul").length > 0){
+                var theParent = this.element.getElementsByTagName("ul")[0].parentNode;
+                if(theParent.classList.contains("hideTree")){//collapsed
+                    theParent.classList.remove("hideTree");//expand
+                    el.innerHTML = "&#9660;";
+                }
+            }
+            //else send event to draw the children
+            else{
+                var treeClickEvent = document.createEvent("Events");
+                treeClickEvent.initEvent("drawTree", false, false);
+                treeClickEvent.uri = this.treeItemData.uri;
+                treeClickEvent.uriType = this.treeItemData.type;
+                var divEl = document.createElement("div");
+                this.element.appendChild(divEl);
+                treeClickEvent.subTreeContainer = divEl;
+                this.element.dispatchEvent(treeClickEvent);
+
+                el.innerHTML = "&#9660;";
+            }
+        }
+    },
+
+
     /**
      * Event Listeners
      */
-- 
cgit v1.2.3


From a6a6f9bcc5ff92f5bb5e9275336dfaec2d8e8f4c Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Fri, 16 Mar 2012 17:56:25 -0700
Subject: Presets Panel - Change Tab labels, Add Un-3d preset

---
 js/panels/presets/content.reel/content.html     |  6 +++---
 js/panels/presets/default-transition-presets.js | 16 ++++++++++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/js/panels/presets/content.reel/content.html b/js/panels/presets/content.reel/content.html
index f01e6435..afbdd559 100644
--- a/js/panels/presets/content.reel/content.html
+++ b/js/panels/presets/content.reel/content.html
@@ -62,9 +62,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 <body>
     <section id="presetsPanel" class="presetsPanel">
         <nav id="tab-bar" class="tab-bar">
-            <div id="styles">Style Library</div>
-            <div id="transitions">Transitions Library</div>
-            <div id="animations">Animations Library</div>
+            <div id="styles">Styles</div>
+            <div id="transitions">Transitions</div>
+            <div id="animations">Animations</div>
         </nav>
         <div id="librarySlot" class="librarySlot"></div>
     </section>
diff --git a/js/panels/presets/default-transition-presets.js b/js/panels/presets/default-transition-presets.js
index 00873231..48f7c2b7 100644
--- a/js/panels/presets/default-transition-presets.js
+++ b/js/panels/presets/default-transition-presets.js
@@ -88,6 +88,22 @@ exports.transitionPresets = {
                         "-webkit-transform": "rotate(180deg)"
                     }
                 }]
+            },{
+                "text": "Remove 3D",
+                "selectorBase" : "remove-3d",
+                "rules" : [{
+                    "selectorSuffix": "",
+                    "styles" : {
+                        "-webkit-transition": "all 0.4s ease-in"
+                    }
+                },
+                    {
+                    "selectorSuffix" : ":hover",
+                    "styles" : {
+                        "-webkit-transform": "rotateX(0deg)",
+                        "opacity": "1"
+                    }
+                }]
             }]
     }]
 };
\ No newline at end of file
-- 
cgit v1.2.3


From 41740c12e03ca1380eb80dc557faedae05e4ce1c Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Sat, 17 Mar 2012 00:06:03 -0700
Subject: Presets Panel - Fix conflict with default transition presets

---
 js/panels/presets/default-transition-presets.js | 30 +++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/js/panels/presets/default-transition-presets.js b/js/panels/presets/default-transition-presets.js
index 48f7c2b7..15f4882f 100644
--- a/js/panels/presets/default-transition-presets.js
+++ b/js/panels/presets/default-transition-presets.js
@@ -89,6 +89,36 @@ exports.transitionPresets = {
                     }
                 }]
             },{
+                "text": "Scale Up",
+                "selectorBase" : "scale-up",
+                "rules" : [{
+                    "selectorSuffix" : "",
+                    "styles" : {
+                        "-webkit-transition": "-webkit-transform 0.4s ease-in"
+                    }
+                }, {
+                    "selectorSuffix" : ":hover",
+                    "styles" : {
+                        "-webkit-transform": "scale(1.4)"
+                    }
+                }]
+            },
+            {
+                "text": "Scale Down",
+                "selectorBase" : "scale-down",
+                "rules" : [{
+                    "selectorSuffix" : "",
+                    "styles" : {
+                        "-webkit-transition": "-webkit-transform 0.4s ease-in"
+                    }
+                }, {
+                    "selectorSuffix" : ":hover",
+                    "styles" : {
+                        "-webkit-transform": "scale(.5)"
+                    }
+                }]
+            },
+            {
                 "text": "Remove 3D",
                 "selectorBase" : "remove-3d",
                 "rules" : [{
-- 
cgit v1.2.3


From 50ee8428d398d2a5f21f4d642642ba85d7df3e5e Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Mon, 19 Mar 2012 13:51:31 -0700
Subject: Replacing old button component with montage button component in our
 UI.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 .../ui/property-control.reel/property-control.js   |  2 +-
 .../materials-library-panel.css                    |  8 ++---
 .../materials-library-panel.html                   | 42 ++++++++++++++++++++--
 .../materials-library-panel.js                     | 21 +----------
 .../materials-popup.reel/materials-popup.html      |  8 ++---
 .../materials-popup.reel/materials-popup.js        |  5 ++-
 .../color/colorchippopup.reel/colorchippopup.js    |  1 -
 .../color/colorpanelpopup.reel/colorpanelpopup.js  |  1 -
 8 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/js/components/ui/property-control.reel/property-control.js b/js/components/ui/property-control.reel/property-control.js
index 58b1be9f..cd59c02c 100755
--- a/js/components/ui/property-control.reel/property-control.js
+++ b/js/components/ui/property-control.reel/property-control.js
@@ -9,7 +9,7 @@ var Montage = require("montage/core/core").Montage,
     HotText = require("js/components/hottext.reel").HotText,
     HotTextUnit = require("js/components/hottextunit.reel").HotTextUnit,
     Slider = require("js/components/slider.reel").Slider,
-    Button = require("js/components/button.reel").Button,
+    Button = require("montage/ui/button.reel").Button,
     Checkbox = require("js/components/checkbox.reel").Checkbox,
     Combobox = require("js/components/combobox.reel").Combobox,
     TextField = require("js/components/TextField.reel").TextField,
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
index 07488da1..fe88ebf6 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.css
@@ -23,7 +23,7 @@
     width: 97%;
 }
 
-#ml_buttons button {
+#ml_buttons .nj-skinned{
   height: 22px;
   overflow: hidden;
   display: block;
@@ -31,17 +31,17 @@
   margin: 0px 1px;
 }
 
-#materialsLibraryPanel-ml_add_btn {
+#ml_add_btn {
     float: left;
     width: 60px;
 }
 
-#materialsLibraryPanel-ml_copy_btn {
+#ml_copy_btn {
     float: left;
     width: 60px;
 }
 
-#materialsLibraryPanel-ml_delete_btn {
+#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
index 6ba4ac75..fe17d0f8 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,6 +10,42 @@
     	<link rel="stylesheet" type="text/css" href="materials-library-panel.css">
          <script type="text/montage-serialization">
         {
+            "addButton": {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "ml_add_btn"}
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+             },
+            "copyButton": {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "ml_copy_btn"}
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+             },
+            "deleteButton": {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "ml_delete_btn"}
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
+             },
              "materialInfo": {
                  "module": "js/panels/Materials/materials-popup.reel",
                  "name": "MaterialsPopup"
@@ -34,9 +70,9 @@
             </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>
+                <button id="ml_add_btn" class="nj-skinned">Add</button>
+                <button id="ml_copy_btn" class="nj-skinned">Copy</button>
+                <button id="ml_delete_btn" class="nj-skinned">Delete</button>
             </div>
     	</div>
 
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 b16c4376..bb550598 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
@@ -5,7 +5,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </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,
     Popup = require("montage/ui/popup/popup.reel").Popup;
@@ -27,24 +26,6 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re
             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);
     	}
     },
 
@@ -73,7 +54,7 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re
         }
     },
 
-    captureAction: {
+    handleAction: {
         value:function(event) {
             switch(event._currentTarget.label)
             {
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.html b/js/panels/Materials/materials-popup.reel/materials-popup.html
index de4f98c1..34f68554 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.html
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.html
@@ -14,7 +14,7 @@
    		<script type="text/montage-serialization">
         {
             "okButton": {
-                "module": "js/components/button.reel",
+                "module": "montage/ui/button.reel",
                 "name": "Button",
                 "properties": {
                     "element": {"#": "mp_ok_btn"},
@@ -22,7 +22,7 @@
                 }
             },
             "cancelButton": {
-                "module": "js/components/button.reel",
+                "module": "montage/ui/button.reel",
                 "name": "Button",
                 "properties": {
                     "element": {"#": "mp_cancel_btn"},
@@ -111,8 +111,8 @@
             <hr />
             
             <div id="mp_buttons" class="mp_buttons">
-                <button id="mp_cancel_btn" class="mp_cancel_btn"></button>
-                <button id="mp_ok_btn" class="mp_ok_btn"></button>
+                <button id="mp_cancel_btn" class="mp_cancel_btn nj-skinned"></button>
+                <button id="mp_ok_btn" class="mp_ok_btn nj-skinned"></button>
             </div>
 
     	</div>
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index c57bb2d7..193e72b7 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -5,9 +5,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> */
 
 var Montage = require("montage/core/core").Montage,
-    Component   = require("montage/ui/component").Component;
-var Button = 			require("js/components/button.reel").Button;
-var MaterialsModel = require("js/models/materials-model").MaterialsModel;
+    Component   = require("montage/ui/component").Component,
+    MaterialsModel = require("js/models/materials-model").MaterialsModel;
 
 ////////////////////////////////////////////////////////////////////////
 //Exporting as MaterialsPopup
diff --git a/js/panels/color/colorchippopup.reel/colorchippopup.js b/js/panels/color/colorchippopup.reel/colorchippopup.js
index 05bcb447..414be8b7 100755
--- a/js/panels/color/colorchippopup.reel/colorchippopup.js
+++ b/js/panels/color/colorchippopup.reel/colorchippopup.js
@@ -9,7 +9,6 @@ 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,
 	Slider = 			require("js/components/slider.reel").Slider,
-	Button = 			require("js/components/button.reel").Button,
 	HotText = 			require("js/components/hottext.reel").HotText,
 	ColorWheel = 		require("js/components/colorwheel.reel").ColorWheel,
 	GradientPicker = 	require("js/components/gradientpicker.reel").GradientPicker;
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
index b957d495..dd7e6192 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
@@ -9,7 +9,6 @@ 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,
 	Slider = 			require("js/components/slider.reel").Slider,
-	Button = 			require("js/components/button.reel").Button,
 	HotText = 			require("js/components/hottext.reel").HotText,
 	ColorWheel = 		require("js/components/colorwheel.reel").ColorWheel,
 	GradientPicker = 	require("js/components/gradientpicker.reel").GradientPicker;
-- 
cgit v1.2.3


From e4159f8cea57077c755030a421c091b28c7a8ecc Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Mon, 19 Mar 2012 17:06:20 -0700
Subject: Use new tree control in Materials panel.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/panels/Materials/materials-data.json            | 43 ++++++++++++++++++++++
 .../materials-library-panel.html                   | 43 ++++++++++++++++++----
 .../materials-library-panel.js                     | 34 ++++++++---------
 .../materials-popup.reel/materials-popup.js        |  6 ++-
 4 files changed, 99 insertions(+), 27 deletions(-)
 create mode 100644 js/panels/Materials/materials-data.json

diff --git a/js/panels/Materials/materials-data.json b/js/panels/Materials/materials-data.json
new file mode 100644
index 00000000..f06ab6c8
--- /dev/null
+++ b/js/panels/Materials/materials-data.json
@@ -0,0 +1,43 @@
+{
+    "label": "materials",
+    "children": [
+        {
+            "label": "Ninja Materials",
+            "children": [
+                {
+                    "label": "Uber",
+                    "id" : "UberMaterial"
+                },
+                {
+                    "label": "Bump Metal",
+                    "id" : "BumpMetalMaterial"
+                },
+                {
+                    "label": "Linear Gradient",
+                    "id" : "LinearGradientMaterial"
+                },
+                {
+                    "label": "Radial Gradient",
+                    "id" : "RadialGradientMaterial"
+                },
+                {
+                    "label": "Flat",
+                    "id" : "FlatMaterial"
+                }
+            ]
+        },
+        {
+            "label": "Custom Materials",
+            "children": [
+                {
+                    "label": "Checker Board",
+                    "id" : "CheckerBoard"
+                },
+                {
+                    "label": "Shiny Metal",
+                    "id" : "ShinyMetal"
+                }
+            ]
+        }
+    ]
+}
\ 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
index fe17d0f8..4e41512f 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
@@ -46,10 +46,39 @@
                     }
                 ]
              },
-             "materialInfo": {
-                 "module": "js/panels/Materials/materials-popup.reel",
-                 "name": "MaterialsPopup"
-             },
+            "materialInfo": {
+                "module": "js/panels/Materials/materials-popup.reel",
+                "name": "MaterialsPopup"
+            },
+            "materialsController" : {
+                "module": "js/controllers/tree-controller",
+                "name": "TreeController",
+                "properties" : {
+                    "branchKey" : "children",
+                    "labelKey" : "label",
+                    "delegate": {"@": "owner" }
+                },
+                "bindings": {
+                    "content": {
+                        "boundObject": {"@": "owner"},
+                        "boundObjectPropertyPath": "materialsData"
+                    }
+                }
+            },
+            "materialsContainer" : {
+                "module" : "js/components/treeview/treeview.reel",
+                "name" : "Treeview",
+                "properties" : {
+                    "element" : {"#": "materials_library_tree"},
+                    "branchComponent" : {"@": "branch" },
+                    "contentController": {"@": "materialsController"},
+                    "showRoot": false
+                }
+            },
+            "branch" : {
+                "module" : "js/components/treeview/ninja-branch.reel",
+                "name" : "Branch"
+            },
             "owner": {
                 "module": "js/panels/Materials/materials-library-panel.reel",
                 "name": "MaterialsLibraryPanels",
@@ -65,9 +94,9 @@
 	<body>
 
     	<div id="materials_library_panel" class="materials_library_panel">
-            <div id="ml_tree_holder">
-                <ul id="materials_library_tree"></ul>
-            </div>
+            <section id="ml_tree_holder" class="animationsLibrary">
+                <div id="materials_library_tree"></div>
+            </section>
             <hr />
             <div id="ml_buttons">
                 <button id="ml_add_btn" class="nj-skinned">Add</button>
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 bb550598..5fd86d00 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
@@ -4,29 +4,26 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
 
-var Tree = require("js/components/tree.reel").Tree,
-    MaterialsPopup = require("js/panels/Materials/materials-popup.reel").MaterialsPopup,
-    PopupMananger =		require("js/components/popup-manager.reel").PopupMananger,
+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;
 
-exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, {
+exports.MaterialsLibraryPanel = Montage.create(Component, {
+
+    materialsData: {
+        value: null
+    },
 
     _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);
-    	}
+    didCreate: {
+        value: function() {
+            this.materialsData = MaterialsData;
+        }
     },
 
     willDraw: {
@@ -71,10 +68,9 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re
         }
     },
 
-    captureChange: {
-        value:function(e) {
-            var tNode = e._event.treeNode;
-            this._showMaterialPopup(tNode.id);
+    handleNodeActivation: {
+        value:function(obj) {
+            this._showMaterialPopup(obj.id);
         }
     },
 
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index 193e72b7..b44761bc 100755
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -214,7 +214,11 @@ exports.MaterialsPopup = Montage.create(Component, {
 		enumerable: true,
 		value: function(materialID)
 		{
-           this._materialName = materialID;
+            // Note that setting Array.length = 0 will empty arrays,
+            // which is fine if you use getMaterialData to get a new array, but not for the
+            // dummyData arrays.
+            this._materialsData.length = 0;
+            this._materialName = materialID;
             if(
 					(materialID ===  "UberMaterial")				||
 					(materialID ===  "FlatMaterial")				||
-- 
cgit v1.2.3


From fff3c568e6884a867527390b9b77f45c63944aec Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Tue, 20 Mar 2012 06:04:41 -0700
Subject: Removing zoom from element's getMatrix. Zoom should only be checked
 on stage.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/controllers/elements/element-controller.js | 16 -----------
 js/controllers/elements/stage-controller.js   | 41 +++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 70aba54e..b35251ad 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -228,22 +228,6 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
                         mat = this.transformStringToMat( xformStr );
                     if (!mat)
                         mat = Matrix.I(4);
-
-                    var zoom = this.application.ninja.elementMediator.getProperty(el, "zoom");
-                    if (zoom)
-                    {
-                        zoom = Number(zoom);
-                        if (zoom != 1)
-                        {
-                            var zoomMat = Matrix.create(  [
-                                [ zoom,    0,    0, 0],
-                                [    0, zoom,    0, 0],
-                                [    0,    0, zoom, 0],
-                                [    0,    0,    0, 1]
-                            ] );
-                            glmat4.multiply( zoomMat, mat, mat );
-                        }
-                    }
                 }
 
                 el.elementModel.props3D.matrix3d = mat;
diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js
index 34bb1fb5..97ea3aa5 100755
--- a/js/controllers/elements/stage-controller.js
+++ b/js/controllers/elements/stage-controller.js
@@ -129,5 +129,46 @@ exports.StageController = Montage.create(ElementController, {
         value: function(el, rule, selector) {
             el.elementModel.transitionStopRule.selectorText = selector;
         }
+    },
+
+    getMatrix: {
+        value: function(el) {
+            if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.matrix3d)
+            {
+                return el.elementModel.props3D.matrix3d.slice(0);
+            }
+            else
+            {
+                var mat;
+
+                if (el)
+                {
+                    var xformStr = this.application.ninja.elementMediator.getProperty(el, "-webkit-transform");
+                    if (xformStr)
+                        mat = this.transformStringToMat( xformStr );
+                    if (!mat)
+                        mat = Matrix.I(4);
+
+                    var zoom = this.application.ninja.elementMediator.getProperty(el, "zoom");
+                    if (zoom)
+                    {
+                        zoom = Number(zoom);
+                        if (zoom != 1)
+                        {
+                            var zoomMat = Matrix.create(  [
+                                [ zoom,    0,    0, 0],
+                                [    0, zoom,    0, 0],
+                                [    0,    0, zoom, 0],
+                                [    0,    0,    0, 1]
+                            ] );
+                            glmat4.multiply( zoomMat, mat, mat );
+                        }
+                    }
+                }
+
+                el.elementModel.props3D.matrix3d = mat;
+                return mat;
+            }
+        }
     }
 });
-- 
cgit v1.2.3


From e33b3ce6f7b6789cfe854d4a6a8bb5bd57b8ae37 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Tue, 20 Mar 2012 06:45:06 -0700
Subject: Fixing error in drawUtils when closing document - should set
 _eltArray and _planesArray's length to 0 instead of setting the arrays to
 null.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/helper-classes/3D/draw-utils.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js
index 1c00f7ea..d6334e6c 100755
--- a/js/helper-classes/3D/draw-utils.js
+++ b/js/helper-classes/3D/draw-utils.js
@@ -139,8 +139,8 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
     handleCloseDocument:{
         value: function() {
             if(this.application.ninja.documentController._documents.length === 0){
-                this._eltArray = null;
-                this._planesArray = null;
+                this._eltArray.length = 0;
+                this._planesArray.length = 0;
             }
         }
     },
-- 
cgit v1.2.3


From e1c4f30a4c13d747fa69d78598e0961286bbe571 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Tue, 20 Mar 2012 10:59:05 -0700
Subject: Support button control in Properties Panel and use them for edit fill
 and stroke material.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/controllers/elements/shapes-controller.js       | 13 +++++--
 js/data/pi/pi-data.js                              | 14 +++++++
 .../materials-library-panel.js                     | 32 +++++-----------
 .../sections/custom-rows/dual-row.reel/dual-row.js |  8 +++-
 .../properties.reel/sections/custom.reel/custom.js | 44 ++++++++++++++++++++++
 5 files changed, 84 insertions(+), 27 deletions(-)

diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index d72d9c14..b3ac9ddb 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -6,10 +6,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 var Montage = 			require("montage/core/core").Montage,
     CanvasController = require("js/controllers/elements/canvas-controller").CanvasController,
-    njModule = require("js/lib/NJUtils");
-
-var World = require("js/lib/drawing/world").World;
-var MaterialsModel = require("js/models/materials-model").MaterialsModel;
+    njModule = require("js/lib/NJUtils"),
+    World = require("js/lib/drawing/world").World,
+    MaterialsModel = require("js/models/materials-model").MaterialsModel;
 
 exports.ShapesController = Montage.create(CanvasController, {
 
@@ -100,6 +99,12 @@ exports.ShapesController = Montage.create(CanvasController, {
                         el.elementModel.shapeModel.GLWorld.render();
                     }
                     break;
+                case "editStrokeMaterial":
+                    NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.strokeMaterial.getName()});
+                    break;
+                case "editFillMaterial":
+                    NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.fillMaterial.getName()});
+                    break;
                 default:
                     CanvasController.setProperty(el, p, value);
             }
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index ba03c347..28ffa536 100755
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -402,6 +402,13 @@ exports.PiData = Montage.create( Montage, {
                             items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
                             enabled: { boundObject: "this.controls", boundProperty: "useWebGl" },
                             divider : true
+                        },
+                        {
+                            type: "button",
+                            id: "editStrokeMaterial",
+                            prop: "editStrokeMaterial",
+                            label: "Edit",
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
                         }
                     ],
                     [
@@ -414,6 +421,13 @@ exports.PiData = Montage.create( Montage, {
                             dataField: "_name",
                             items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
                             enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
+                        },
+                        {
+                            type: "button",
+                            id: "editFillMaterial",
+                            prop: "editFillMaterial",
+                            label: "Edit",
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
                         }
                     ]
                 ]
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 5fd86d00..2176c6d5 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
@@ -26,28 +26,9 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
         }
     },
 
-    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;
+    prepareForDraw: {
+        value : function() {
+            this.eventManager.addEventListener("showMaterialPopup", this, false);
         }
     },
 
@@ -74,6 +55,13 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
         }
     },
 
+    handleShowMaterialPopup: {
+        enumerable: false,
+        value: function (event) {
+            this._showMaterialPopup(event.detail.materialId);
+        }
+    },
+
     _materialPopup: {
         enumerable:true,
         value:null
diff --git a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
index 72d216ca..4c5c80d7 100755
--- a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
+++ b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
@@ -43,7 +43,13 @@ exports.DualRow = Montage.create(Component, {
                 this.element.getElementsByClassName("lbl")[0].innerHTML = this.label + ":";
             }
             if(this.label2 !== null) {
-                this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":";
+                if(this.content2.type === "button") {
+                    this.content2.element = document.createElement("button");
+                    this.content2.element.classList.add("nj-skinned");
+                    this.element.getElementsByClassName("lbl")[1].style.display = "none";
+                } else {
+                    this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":";
+                }
             } else {
                 this.element.getElementsByClassName("lbl")[1].style.display = "none";
             }
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index 3c595980..d7334afe 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -20,6 +20,7 @@ var TextField = require("js/components/textfield.reel").TextField;
 var FileInput = require("js/components/ui/file-input.reel").FileInput;
 var Checkbox = require("js/components/checkbox.reel").Checkbox;
 var ColorChip = require("js/components/ui/color-chip.reel").ColorChip;
+var Button = require("montage/ui/button.reel").Button;
 
 exports.CustomSection = Montage.create(Component, {
 
@@ -128,6 +129,15 @@ exports.CustomSection = Montage.create(Component, {
         }
     },
 
+    handleAction: {
+        value:function(event) {
+            if(event._event.wasSetByCode) return;
+
+            var obj = event.currentTarget;
+            this._dispatchPropEvent({"type": "change", "id": obj.id, "prop": obj.prop, "value": obj.value, "control": obj});
+        }
+    },
+
     _dispatchPropEvent: {
         value: function(event) {
 //            console.log(event);
@@ -163,6 +173,7 @@ exports.CustomSection = Montage.create(Component, {
                 case "file"     : return this.createFileInput(fields);
                 case "checkbox" : return this.createCheckbox(fields);
                 case "chip"     : return this.createColorChip(fields);
+                case "button"     : return this.createButton(fields);
             }
         }
     },
@@ -349,6 +360,39 @@ exports.CustomSection = Montage.create(Component, {
             // TODO - Hack for now to reference the color select object to unregister color chips
             this.controls["stageBackground"] = obj;
 
+            return obj;
+        }
+    },
+
+    createButton: {
+        value: function(aField) {
+            var obj = Button.create();
+
+            // Set Values for Button
+            if (aField.id)                  obj.id = aField.id;
+            if (aField.label)               obj.label = aField.label;
+            if (aField.prop)                obj.prop = aField.prop;
+
+            // Special casing button so slot uses "button" tag instead of "div"
+            obj.type = "button";
+
+            if (aField.enabled) {
+                if(aField.enabled.boundObject) {
+                    // TODO - For now, always bind to this.controls[someProperty]
+                    Object.defineBinding(obj, "enabled", {
+                                    boundObject: this.controls,
+                                    boundObjectPropertyPath: aField.enabled.boundProperty,
+                                    oneway: false
+                                });
+                } else {
+                    obj.enabled = aField.enabled;
+                }
+            }
+
+            obj.addEventListener("action", this, false);
+
+            this.controls[aField.id] = obj;
+
             return obj;
         }
     }
-- 
cgit v1.2.3


From 1eb663dc0ab2f9f2a6daea57ad2974b731dbc513 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Tue, 20 Mar 2012 11:07:49 -0700
Subject: Support edit material button in oval and line PI.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/data/pi/pi-data.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index 28ffa536..53fec3be 100755
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -495,6 +495,13 @@ exports.PiData = Montage.create( Montage, {
                             items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
                             enabled: { boundObject: "this.controls", boundProperty: "useWebGl" },
                             divider : true
+                        },
+                        {
+                            type: "button",
+                            id: "editStrokeMaterial",
+                            prop: "editStrokeMaterial",
+                            label: "Edit",
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
                         }
                     ]
                 ]
@@ -582,6 +589,13 @@ exports.PiData = Montage.create( Montage, {
                             items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
                             enabled: { boundObject: "this.controls", boundProperty: "useWebGl" },
                             divider : true
+                        },
+                        {
+                            type: "button",
+                            id: "editStrokeMaterial",
+                            prop: "editStrokeMaterial",
+                            label: "Edit",
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
                         }
                     ],
                     [
@@ -594,6 +608,13 @@ exports.PiData = Montage.create( Montage, {
                             dataField: "_name",
                             items : { boundObject: "this.application.ninja.appModel", boundProperty: "materials" },
                             enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
+                        },
+                        {
+                            type: "button",
+                            id: "editFillMaterial",
+                            prop: "editFillMaterial",
+                            label: "Edit",
+                            enabled: { boundObject: "this.controls", boundProperty: "useWebGl" }
                         }
                     ]
                 ]
-- 
cgit v1.2.3


From 17cf4470b54cc6014f23f982d1a644a045cccb04 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Tue, 20 Mar 2012 11:17:46 -0700
Subject: Deleting unused Materials.xml file since we converted to JSON.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/panels/Materials/Materials.xml | 14 --------------
 1 file changed, 14 deletions(-)
 delete mode 100755 js/panels/Materials/Materials.xml

diff --git a/js/panels/Materials/Materials.xml b/js/panels/Materials/Materials.xml
deleted file mode 100755
index a958575e..00000000
--- a/js/panels/Materials/Materials.xml
+++ /dev/null
@@ -1,14 +0,0 @@
-<?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" />
-        <leaf id="LinearGradientMaterial" label="Linear Gradient" />
-        <leaf id="RadialGradientMaterial" label="Radial Gradient" />
-        <leaf id="FlatMaterial" label="Flat" />
-    </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
-- 
cgit v1.2.3


From 634358d2697d9668bb9406ac7a029aafae542285 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Tue, 20 Mar 2012 11:18:07 -0700
Subject: Button's enabled property binding should be oneway only.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/panels/properties.reel/sections/custom.reel/custom.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index d7334afe..703ef950 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -382,7 +382,7 @@ exports.CustomSection = Montage.create(Component, {
                     Object.defineBinding(obj, "enabled", {
                                     boundObject: this.controls,
                                     boundObjectPropertyPath: aField.enabled.boundProperty,
-                                    oneway: false
+                                    oneway: true
                                 });
                 } else {
                     obj.enabled = aField.enabled;
-- 
cgit v1.2.3