Squashed commit of the following:

commit 763910b9d074137eb7dee80447b89407ce5750c9
Merge: e557937 329a859
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Wed Feb 8 10:18:36 2012 -0800

    Merge pull request #20 from mqg734/ToolFixes

    Hooked up materials code to go through the ShapesController and updated the PI to reflect the currently selected shape's materials. Also fixed the following bugs:

commit e5579374ff39b80b8c0c69faba37f6f581758fe0
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Tue Feb 7 13:28:17 2012 -0800

    updated montage v.0.6 to the latest changes.

    Signed-off-by: Valerio Virgillito <valerio@motorola.com>

commit 329a859e2666716c3a1d99c6bd2679e10c81fc8d
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 15:25:11 2012 -0800

    Added ability to toggle combobox's visibility so we can show/hide materials comboboxes in the tool options.

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

commit 668510892537eaaeb2e11520831d87b44b2489b7
Merge: 8950b34 c066fb4
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Tue Feb 7 14:19:22 2012 -0800

    Merge pull request #19 from ericguzman/TreeComponents

    Tree Components - Added copyright comments

commit aec849d91e4b697d496b9ede28b5d89cf2283781
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 14:18:13 2012 -0800

    id's must start with a letter, so our workaround for using uuid for RDGE canvas id's won't work because they often start with a number.

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

commit e8e21367e59bb521801fe2e843f42ad5bca5ea9f
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 13:52:54 2012 -0800

    Fixing some typos and undeclared variables in GLRectangle and ShapesController.

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

commit c066fb41ebee85bacf9b2155366b16831af41d76
Author: Eric Guzman <ericg@motorola.com>
Date:   Tue Feb 7 13:46:05 2012 -0800

    Tree Components - Added copyright comments

commit 3a8875c288049b466bfeb8b7f0510fd8cbfb970d
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 13:30:08 2012 -0800

    Supporting switching materials in the PI. Also, moved makeFillMaterial and makeStrokeMaterial functions into GLGeomObj so shapes other than GLRectangle can use these routines.

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

commit 8ad767b61460984a4031ba630f76ac8247a61857
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 11:42:10 2012 -0800

    Fixed PI to support WebGL materials.

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

commit 486842239c71e7964f38a09aacda4970f2a82e1a
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 10:58:14 2012 -0800

    Updated tools and PI to get/set materials by binding to appModel's materials property.  This requires us to add FlatMaterial to the list of materials in the MaterialsLibrary.

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

commit 789eaf5a92c903f27462c69a8890fbec695ab14e
Merge: 92ae17b 8950b34
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Tue Feb 7 09:36:29 2012 -0800

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

commit 92ae17bc800cf82cdbd1482ef1af1a5fd7bd632a
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Feb 6 16:35:12 2012 -0800

    Force layout canvas and SelectionController to update their info when a 2d canvas is replaced by a 3d canvas (and vice-versa).

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

commit 75486be2839494c9b54833aff8f5eef3f9542151
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Feb 6 15:41:48 2012 -0800

    Support toggling between 2d and 3d canvas context. This requires us to create a new canvas with all the same values as the canvas being replaced and copying over all the shape data.

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

commit f94b0c5ada403379b3ff8a900c2a2aabcecce49e
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Feb 6 14:03:40 2012 -0800

    Add enabled property for ComboBox to support enabling/disabling materials dropdowns in the PI.

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

commit 5737864d1d55d96e3cc3c1bc9b38ec58303b3981
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Feb 6 13:35:30 2012 -0800

    Allow users to switch between 2d and webGL mode. Note that this doesn't currently work.

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

commit 486d9a31a85dd833a1c798049a00403756703034
Author: Nivesh Rajbhandari <mqg734@motorola.com>
Date:   Mon Feb 6 11:35:49 2012 -0800

    Support use WebGL checkbox in the PI.

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

Signed-off-by: Jonathan Duran <jduran@motorola.com>

3 files changed, 48 insertions, 29 deletions

diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.css b/js/components/tools-properties/shape-properties.reel/shape-properties.css
index 1e36b0bd..0441c1cf 100644
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.css
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.css
@@ -2,8 +2,4 @@
  This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
  No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> */
-
-#strokeIcon {
-    float: left;
-}
\ No newline at end of file
+ </copyright> */
\ No newline at end of file
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html
index 52502d47..64840b17 100644
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.html
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html
@@ -53,6 +53,26 @@
                 }
             },
 
+            "_strokeMaterial1": {
+                "module": "js/components/combobox.reel",
+                "name": "Combobox",
+                "properties": {
+                    "element": {"#": "strokeMaterialCB"},
+                    "labelField": "_name",
+                    "dataField": "_name"
+                }
+            },
+
+            "_fillMaterial1": {
+                "module": "js/components/combobox.reel",
+                "name": "Combobox",
+                "properties": {
+                    "element": {"#": "fillMaterialCB"},
+                    "labelField": "_name",
+                    "dataField": "_name"
+                }
+            },
+
             "toolbutton1": {
                 "module": "js/components/layout/subtool-button.reel",
                 "name": "SubToolButton",
@@ -89,10 +109,9 @@
                 "name": "ShapeProperties",
                 "properties": {
                     "element": {"#": "shapeProperties"},
-                    "_strokeStyle": {"#": "strokeStyleCB"},
-                    "_strokeMaterial": {"#": "strokeMaterialCB"},
+                    "_strokeMaterial": {"@": "_strokeMaterial1"},
                     "_fillIcon": {"#": "fillIcon"},
-                    "_fillMaterial": {"#": "fillMaterialCB"},
+                    "_fillMaterial": {"@": "_fillMaterial1"},
 
                     "_useWebGL": {"#": "useWebGLCH"},
                     "_materialLabel": {"#": "materialLabel"},
@@ -125,14 +144,6 @@
             <label class="label">Stroke:</label>
             <div id="strokeControl" class="label"></div>
 
-            <label class="label">Style:</label>
-            <select id="strokeStyleCB" class="selectBox">
-                <option value="0">Hairline</option>
-                <option value="1" selected>Solid</option>
-                <option value="2">Dashed</option>
-                <option value="3">Dotted</option>
-            </select>
-
             <div id="customProperties">
                 <div id="ovalProperties" class="label"></div>
                 <div id="rectProperties" class="label"></div>
@@ -142,7 +153,7 @@
             <label class="label subOption optionLabel"><input id="useWebGLCH" type="checkbox" name="useWebGLControl" class="checkBoxAlign"/>Use WebGL</label>
 
             <label id="materialLabel" class="label">Material:</label>
-            <div id="strokeIcon" class="pencilToolUp"></div>
+            <div id="strokeIcon" class="pencilToolUp" style="float: left;"></div>
 
             <select class="selectBox" id="strokeMaterialCB">
             </select>
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.js b/js/components/tools-properties/shape-properties.reel/shape-properties.js
index b0d674cc..79567453 100644
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.js
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.js
@@ -16,8 +16,17 @@ exports.ShapeProperties = Montage.create(ToolProperties, {
         value: function() {
             this.rectProperties.visible = true;
 
-            ShapesController.DisplayMaterials(this._strokeMaterial);
-            ShapesController.DisplayMaterials(this._fillMaterial);
+            Object.defineBinding(this._strokeMaterial, "items", {
+                boundObject: this.application.ninja.appModel,
+                boundObjectPropertyPath: "materials",
+                oneway: false
+            });
+
+            Object.defineBinding(this._fillMaterial, "items", {
+                boundObject: this.application.ninja.appModel,
+                boundObjectPropertyPath: "materials",
+                oneway: false
+            });
 
             this.handleChange(null);
             this._useWebGL.addEventListener("change", this, false);
@@ -36,12 +45,15 @@ exports.ShapeProperties = Montage.create(ToolProperties, {
                 this._selectedSubTool = value;
                 this[this._selectedSubTool.properties].visible = true;
 
-                if(this._selectedSubTool.id === "LineTool") {
-                    this._fillIcon.style["display"] = "none";
-                    this._fillMaterial.style["display"] = "none";
-                } else {
-                    this._fillIcon.style["display"] = "";
-                    this._fillMaterial.style["display"] = "";
+                if(this._useWebGL.checked)
+                {
+                    if(this._selectedSubTool.id === "LineTool") {
+                        this._fillIcon.style["display"] = "none";
+                        this._fillMaterial.visible = false;
+                    } else {
+                        this._fillIcon.style["display"] = "";
+                        this._fillMaterial.visible = true;
+                    }
                 }
                 
             }
@@ -55,11 +67,11 @@ exports.ShapeProperties = Montage.create(ToolProperties, {
                 this._use3D = true;
                 this._materialLabel.style["display"] = "";
                 this._strokeIcon.style["display"] = "";
-                this._strokeMaterial.style["display"] = "";
+                this._strokeMaterial.visible = true;
                 if(this.selectedSubTool.id !== "LineTool")
                 {
                     this._fillIcon.style["display"] = "";
-                    this._fillMaterial.style["display"] = "";
+                    this._fillMaterial.visible = true;
                 }
             }
             else
@@ -67,9 +79,9 @@ exports.ShapeProperties = Montage.create(ToolProperties, {
                 this._use3D = false;
                 this._materialLabel.style["display"] = "none";
                 this._strokeIcon.style["display"] = "none";
-                this._strokeMaterial.style["display"] = "none";
+                this._strokeMaterial.visible = false;
                 this._fillIcon.style["display"] = "none";
-                this._fillMaterial.style["display"] = "none";
+                this._fillMaterial.visible = false;