From e065244ac75d1d0f25fd5c75cb58e714a13fe16b Mon Sep 17 00:00:00 2001
From: Jonathan Duran
Date: Wed, 14 Mar 2012 08:59:17 -0700
Subject: Squashed commit of the following:

merge master into timeline

Signed-off-by: Jonathan Duran <jduran@motorola.com>
---
 .../gradientpicker.reel/gradientpicker.js          |   22 +-
 .../brush-properties.reel/brush-properties.html    |   56 +-
 .../brush-properties.reel/brush-properties.js      |   26 +-
 .../treeview/ninja-leaf.reel/ninja-leaf.css        |   14 +-
 js/components/ui/icon-list-basic/icon.reel/icon.js |   14 +-
 .../ui/tree-basic/treeItem.reel/treeItem.js        |   14 +-
 js/controllers/document-controller.js              |   50 +-
 js/controllers/elements/element-controller.js      |   32 +-
 js/controllers/elements/shapes-controller.js       |  140 +-
 js/controllers/selection-controller.js             |   19 +-
 js/controllers/styles-controller.js                |   10 +-
 js/data/menu-data.js                               |    6 +
 js/document/html-document.js                       |  149 +-
 js/helper-classes/3D/draw-utils.js                 |  140 +-
 js/helper-classes/3D/math-utils.js                 |    5 +-
 js/helper-classes/3D/snap-manager.js               |   12 +-
 js/helper-classes/RDGE/rdge-compiled.js            |   64 +-
 .../RDGE/runtime/CanvasDataManager.js              |   98 --
 js/helper-classes/RDGE/runtime/GLRuntime.js        |  159 --
 js/helper-classes/RDGE/src/core/script/engine.js   |   15 +
 js/helper-classes/RDGE/src/core/script/fx/ssao.js  |    2 +-
 .../RDGE/src/core/script/init_state.js             |   12 +-
 js/helper-classes/RDGE/src/core/script/jshader.js  |    8 +-
 js/helper-classes/RDGE/src/core/script/renderer.js |    1 +
 .../RDGE/src/core/script/scenegraphNodes.js        |    2 +-
 .../RDGE/src/core/script/utilities.js              |    4 +-
 js/helper-classes/RDGE/src/tools/rdge-compiled.js  |   64 +-
 js/helper-classes/backup-delete/GLBrushStroke.js   |  174 +-
 js/helper-classes/backup-delete/GLCircle.js        |    3 +-
 js/helper-classes/backup-delete/GLGeomObj.js       |   46 +
 js/helper-classes/backup-delete/GLRectangle.js     |    2 +
 js/helper-classes/backup-delete/GLSubpath.js       |  147 +-
 js/helper-classes/backup-delete/GLWorld.js         |   71 +-
 .../backup-delete/Materials/BumpMetalMaterial.js   |   39 +-
 .../backup-delete/Materials/DeformMaterial.js      |    2 +-
 .../backup-delete/Materials/FlatMaterial.js        |   34 +-
 .../backup-delete/Materials/FlyMaterial.js         |    2 +-
 .../backup-delete/Materials/JuliaMaterial.js       |    2 +-
 .../Materials/KeleidoscopeMaterial.js              |    2 +-
 .../Materials/LinearGradientMaterial.js            |    2 +-
 .../backup-delete/Materials/MandelMaterial.js      |    2 +-
 .../backup-delete/Materials/PlasmaMaterial.js      |    2 +-
 .../backup-delete/Materials/PulseMaterial.js       |    5 +-
 .../backup-delete/Materials/RadialBlurMaterial.js  |    2 +-
 .../Materials/RadialGradientMaterial.js            |    6 +-
 .../Materials/ReliefTunnelMaterial.js              |    2 +-
 .../Materials/SquareTunnelMaterial.js              |    2 +-
 .../backup-delete/Materials/StarMaterial.js        |    2 +-
 .../backup-delete/Materials/TaperMaterial.js       |    4 +-
 .../backup-delete/Materials/TunnelMaterial.js      |    2 +-
 .../backup-delete/Materials/TwistMaterial.js       |    2 +-
 .../backup-delete/Materials/TwistVertMaterial.js   |    2 +-
 .../backup-delete/Materials/UberMaterial.js        |   73 +-
 .../backup-delete/Materials/WaterMaterial.js       |    4 +-
 .../backup-delete/Materials/ZInvertMaterial.js     |    2 +-
 js/io/system/ninjalibrary.js                       |   10 +-
 js/io/system/ninjalibrary.json                     |    2 +-
 js/io/ui/file-picker/file-picker-controller.js     |    2 +-
 js/io/ui/file-picker/file-picker-model.js          |    6 +
 .../picker-navigator.reel/picker-navigator.js      |    7 +-
 js/io/ui/save-as-dialog.reel/save-as-dialog.js     |    4 +-
 js/lib/NJUtils.js                                  |   34 +-
 js/lib/drawing/world.js                            |  102 +-
 js/lib/geom/brush-stroke.js                        |  329 ++--
 js/lib/geom/circle.js                              |  103 +-
 js/lib/geom/geom-obj.js                            |  210 ++-
 js/lib/geom/line.js                                |   57 +-
 js/lib/geom/rectangle.js                           |  111 +-
 js/lib/geom/sub-path.js                            |   86 +-
 js/lib/rdge/materials/bump-metal-material.js       |   10 +-
 js/lib/rdge/materials/deform-material.js           |    2 +-
 js/lib/rdge/materials/flat-material.js             |   41 +-
 js/lib/rdge/materials/fly-material.js              |    2 +-
 js/lib/rdge/materials/julia-material.js            |    2 +-
 js/lib/rdge/materials/keleidoscope-material.js     |    2 +-
 js/lib/rdge/materials/linear-gradient-material.js  |    2 +-
 js/lib/rdge/materials/mandel-material.js           |    2 +-
 js/lib/rdge/materials/plasma-material.js           |   37 +-
 js/lib/rdge/materials/pulse-material.js            |   11 +-
 js/lib/rdge/materials/radial-blur-material.js      |    9 +-
 js/lib/rdge/materials/radial-gradient-material.js  |    7 +-
 js/lib/rdge/materials/relief-tunnel-material.js    |    2 +-
 js/lib/rdge/materials/square-tunnel-material.js    |    2 +-
 js/lib/rdge/materials/star-material.js             |    2 +-
 js/lib/rdge/materials/taper-material.js            |    8 +-
 js/lib/rdge/materials/tunnel-material.js           |    2 +-
 js/lib/rdge/materials/twist-material.js            |    2 +-
 js/lib/rdge/materials/twist-vert-material.js       |    6 +-
 js/lib/rdge/materials/uber-material.js             |  109 +-
 js/lib/rdge/materials/water-material.js            |    2 +-
 js/lib/rdge/materials/z-invert-material.js         |    2 +-
 js/mediators/element-mediator.js                   |   15 +-
 js/mediators/io-mediator.js                        |   93 +-
 js/models/color-model.js                           |    3 +
 js/panels/Color/colorbutton-manager.js             |   44 -
 .../ColorPanelPopup.scssc                          |  Bin 15335 -> 0 bytes
 .../ColorPanelPopup.scssc                          |  Bin 17879 -> 0 bytes
 .../ColorPanelBase.scssc                           |  Bin 23592 -> 0 bytes
 .../Color/colorchippopup.reel/colorchippopup.html  |   63 -
 .../Color/colorchippopup.reel/colorchippopup.js    |  590 -------
 js/panels/Color/colorchippopup.reel/config.rb      |    9 -
 .../colorchippopup.reel/css/colorchippopup.css     |  239 ---
 .../colorchippopup.reel/css/colorchippopup.scss    |  240 ---
 .../Color/colorchippopup.reel/img/icon_bitmap.png  |  Bin 3072 -> 0 bytes
 .../colorchippopup.reel/img/icon_colorwheel.png    |  Bin 3420 -> 0 bytes
 .../colorchippopup.reel/img/icon_gradient.png      |  Bin 2815 -> 0 bytes
 .../Color/colorchippopup.reel/img/icon_nofill.png  |  Bin 2951 -> 0 bytes
 js/panels/Color/colorchippopup.reel/img/knob.png   |  Bin 1036 -> 0 bytes
 js/panels/Color/colorpanel.js                      |   53 -
 .../Color/colorpanelbase.reel/colorpanelbase.html  |   76 -
 .../Color/colorpanelbase.reel/colorpanelbase.js    | 1654 --------------------
 js/panels/Color/colorpanelbase.reel/config.rb      |    9 -
 .../colorpanelbase.reel/css/colorpanelbase.css     |  332 ----
 .../colorpanelbase.reel/css/colorpanelbase.scss    |  339 ----
 .../Color/colorpanelbase.reel/img/icon_default.png |  Bin 3011 -> 0 bytes
 .../Color/colorpanelbase.reel/img/icon_nocolor.png |  Bin 3036 -> 0 bytes
 .../Color/colorpanelbase.reel/img/icon_swap.png    |  Bin 2961 -> 0 bytes
 js/panels/Color/colorpanelbase.reel/img/knob.png   |  Bin 1036 -> 0 bytes
 .../colorpanelpopup.reel/colorpanelpopup.html      |   68 -
 .../Color/colorpanelpopup.reel/colorpanelpopup.js  |  466 ------
 js/panels/Color/colorpanelpopup.reel/config.rb     |    9 -
 .../colorpanelpopup.reel/css/colorpanelpopup.css   |  239 ---
 .../colorpanelpopup.reel/css/colorpanelpopup.scss  |  240 ---
 .../Color/colorpanelpopup.reel/img/icon_bitmap.png |  Bin 3072 -> 0 bytes
 .../colorpanelpopup.reel/img/icon_colorwheel.png   |  Bin 3420 -> 0 bytes
 .../colorpanelpopup.reel/img/icon_gradient.png     |  Bin 2815 -> 0 bytes
 .../Color/colorpanelpopup.reel/img/icon_nofill.png |  Bin 2951 -> 0 bytes
 js/panels/Color/colorpanelpopup.reel/img/knob.png  |  Bin 1036 -> 0 bytes
 js/panels/Color/colorpopup-manager.js              |  529 -------
 .../Color/colortoolbar.reel/colortoolbar.html      |   54 -
 js/panels/Color/colortoolbar.reel/colortoolbar.js  |  138 --
 js/panels/Color/colortoolbar.reel/config.rb        |    9 -
 .../Color/colortoolbar.reel/css/colortoolbar.css   |   45 -
 .../Color/colortoolbar.reel/css/colortoolbar.scss  |   52 -
 js/panels/color/colorbutton-manager.js             |   44 +
 .../color/colorchippopup.reel/colorchippopup.html  |   63 +
 .../color/colorchippopup.reel/colorchippopup.js    |  590 +++++++
 js/panels/color/colorchippopup.reel/config.rb      |    9 +
 .../colorchippopup.reel/css/colorchippopup.css     |  239 +++
 .../colorchippopup.reel/css/colorchippopup.scss    |  240 +++
 .../color/colorchippopup.reel/img/icon_bitmap.png  |  Bin 0 -> 3072 bytes
 .../colorchippopup.reel/img/icon_colorwheel.png    |  Bin 0 -> 3420 bytes
 .../colorchippopup.reel/img/icon_gradient.png      |  Bin 0 -> 2815 bytes
 .../color/colorchippopup.reel/img/icon_nofill.png  |  Bin 0 -> 2951 bytes
 js/panels/color/colorchippopup.reel/img/knob.png   |  Bin 0 -> 1036 bytes
 js/panels/color/colorpanel.js                      |   53 +
 .../color/colorpanelbase.reel/colorpanelbase.html  |   76 +
 .../color/colorpanelbase.reel/colorpanelbase.js    | 1654 ++++++++++++++++++++
 js/panels/color/colorpanelbase.reel/config.rb      |    9 +
 .../colorpanelbase.reel/css/colorpanelbase.css     |  332 ++++
 .../colorpanelbase.reel/css/colorpanelbase.scss    |  339 ++++
 .../color/colorpanelbase.reel/img/icon_default.png |  Bin 0 -> 3011 bytes
 .../color/colorpanelbase.reel/img/icon_nocolor.png |  Bin 0 -> 3036 bytes
 .../color/colorpanelbase.reel/img/icon_swap.png    |  Bin 0 -> 2961 bytes
 js/panels/color/colorpanelbase.reel/img/knob.png   |  Bin 0 -> 1036 bytes
 .../colorpanelpopup.reel/colorpanelpopup.html      |   68 +
 .../color/colorpanelpopup.reel/colorpanelpopup.js  |  466 ++++++
 js/panels/color/colorpanelpopup.reel/config.rb     |    9 +
 .../colorpanelpopup.reel/css/colorpanelpopup.css   |  239 +++
 .../colorpanelpopup.reel/css/colorpanelpopup.scss  |  240 +++
 .../color/colorpanelpopup.reel/img/icon_bitmap.png |  Bin 0 -> 3072 bytes
 .../colorpanelpopup.reel/img/icon_colorwheel.png   |  Bin 0 -> 3420 bytes
 .../colorpanelpopup.reel/img/icon_gradient.png     |  Bin 0 -> 2815 bytes
 .../color/colorpanelpopup.reel/img/icon_nofill.png |  Bin 0 -> 2951 bytes
 js/panels/color/colorpanelpopup.reel/img/knob.png  |  Bin 0 -> 1036 bytes
 js/panels/color/colorpopup-manager.js              |  529 +++++++
 .../color/colortoolbar.reel/colortoolbar.html      |   54 +
 js/panels/color/colortoolbar.reel/colortoolbar.js  |  138 ++
 js/panels/color/colortoolbar.reel/config.rb        |    9 +
 .../color/colortoolbar.reel/css/colortoolbar.css   |   45 +
 .../color/colortoolbar.reel/css/colortoolbar.scss  |   52 +
 js/panels/presets/content.reel/content.css         |    4 +-
 js/panels/properties.reel/properties.js            |    4 +-
 js/preloader/Preloader.js                          |    2 +
 js/stage/layout.js                                 |   10 +-
 js/stage/stage-view.reel/stage-view.js             |    5 +-
 js/tools/BrushTool.js                              |   41 +-
 js/tools/EyedropperTool.js                         |  133 +-
 js/tools/PenTool.js                                |   18 +-
 js/tools/SelectionTool.js                          |   28 +-
 js/tools/Translate3DToolBase.js                    |    1 -
 js/tools/TranslateObject3DTool.js                  |    2 +-
 js/tools/modifier-tool-base.js                     |   12 +-
 183 files changed, 7917 insertions(+), 6551 deletions(-)
 delete mode 100644 js/helper-classes/RDGE/runtime/CanvasDataManager.js
 delete mode 100644 js/helper-classes/RDGE/runtime/GLRuntime.js
 delete mode 100755 js/panels/Color/colorbutton-manager.js
 delete mode 100755 js/panels/Color/colorchippopup.reel/.sass-cache/2fbca323ccf38cf180e7675ba0d8d3e07adeffea/ColorPanelPopup.scssc
 delete mode 100755 js/panels/Color/colorchippopup.reel/.sass-cache/6f8390f69a31f1a976968b9c18d0824d78460db2/ColorPanelPopup.scssc
 delete mode 100755 js/panels/Color/colorchippopup.reel/.sass-cache/de22270a8ac487505e8876f1cd16286e094a5127/ColorPanelBase.scssc
 delete mode 100755 js/panels/Color/colorchippopup.reel/colorchippopup.html
 delete mode 100755 js/panels/Color/colorchippopup.reel/colorchippopup.js
 delete mode 100755 js/panels/Color/colorchippopup.reel/config.rb
 delete mode 100755 js/panels/Color/colorchippopup.reel/css/colorchippopup.css
 delete mode 100755 js/panels/Color/colorchippopup.reel/css/colorchippopup.scss
 delete mode 100755 js/panels/Color/colorchippopup.reel/img/icon_bitmap.png
 delete mode 100755 js/panels/Color/colorchippopup.reel/img/icon_colorwheel.png
 delete mode 100755 js/panels/Color/colorchippopup.reel/img/icon_gradient.png
 delete mode 100755 js/panels/Color/colorchippopup.reel/img/icon_nofill.png
 delete mode 100755 js/panels/Color/colorchippopup.reel/img/knob.png
 delete mode 100755 js/panels/Color/colorpanel.js
 delete mode 100755 js/panels/Color/colorpanelbase.reel/colorpanelbase.html
 delete mode 100755 js/panels/Color/colorpanelbase.reel/colorpanelbase.js
 delete mode 100755 js/panels/Color/colorpanelbase.reel/config.rb
 delete mode 100755 js/panels/Color/colorpanelbase.reel/css/colorpanelbase.css
 delete mode 100755 js/panels/Color/colorpanelbase.reel/css/colorpanelbase.scss
 delete mode 100755 js/panels/Color/colorpanelbase.reel/img/icon_default.png
 delete mode 100755 js/panels/Color/colorpanelbase.reel/img/icon_nocolor.png
 delete mode 100755 js/panels/Color/colorpanelbase.reel/img/icon_swap.png
 delete mode 100755 js/panels/Color/colorpanelbase.reel/img/knob.png
 delete mode 100755 js/panels/Color/colorpanelpopup.reel/colorpanelpopup.html
 delete mode 100755 js/panels/Color/colorpanelpopup.reel/colorpanelpopup.js
 delete mode 100755 js/panels/Color/colorpanelpopup.reel/config.rb
 delete mode 100755 js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.css
 delete mode 100755 js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.scss
 delete mode 100755 js/panels/Color/colorpanelpopup.reel/img/icon_bitmap.png
 delete mode 100755 js/panels/Color/colorpanelpopup.reel/img/icon_colorwheel.png
 delete mode 100755 js/panels/Color/colorpanelpopup.reel/img/icon_gradient.png
 delete mode 100755 js/panels/Color/colorpanelpopup.reel/img/icon_nofill.png
 delete mode 100755 js/panels/Color/colorpanelpopup.reel/img/knob.png
 delete mode 100755 js/panels/Color/colorpopup-manager.js
 delete mode 100755 js/panels/Color/colortoolbar.reel/colortoolbar.html
 delete mode 100755 js/panels/Color/colortoolbar.reel/colortoolbar.js
 delete mode 100755 js/panels/Color/colortoolbar.reel/config.rb
 delete mode 100755 js/panels/Color/colortoolbar.reel/css/colortoolbar.css
 delete mode 100755 js/panels/Color/colortoolbar.reel/css/colortoolbar.scss
 create mode 100755 js/panels/color/colorbutton-manager.js
 create mode 100755 js/panels/color/colorchippopup.reel/colorchippopup.html
 create mode 100755 js/panels/color/colorchippopup.reel/colorchippopup.js
 create mode 100755 js/panels/color/colorchippopup.reel/config.rb
 create mode 100755 js/panels/color/colorchippopup.reel/css/colorchippopup.css
 create mode 100755 js/panels/color/colorchippopup.reel/css/colorchippopup.scss
 create mode 100755 js/panels/color/colorchippopup.reel/img/icon_bitmap.png
 create mode 100755 js/panels/color/colorchippopup.reel/img/icon_colorwheel.png
 create mode 100755 js/panels/color/colorchippopup.reel/img/icon_gradient.png
 create mode 100755 js/panels/color/colorchippopup.reel/img/icon_nofill.png
 create mode 100755 js/panels/color/colorchippopup.reel/img/knob.png
 create mode 100755 js/panels/color/colorpanel.js
 create mode 100755 js/panels/color/colorpanelbase.reel/colorpanelbase.html
 create mode 100755 js/panels/color/colorpanelbase.reel/colorpanelbase.js
 create mode 100755 js/panels/color/colorpanelbase.reel/config.rb
 create mode 100755 js/panels/color/colorpanelbase.reel/css/colorpanelbase.css
 create mode 100755 js/panels/color/colorpanelbase.reel/css/colorpanelbase.scss
 create mode 100755 js/panels/color/colorpanelbase.reel/img/icon_default.png
 create mode 100755 js/panels/color/colorpanelbase.reel/img/icon_nocolor.png
 create mode 100755 js/panels/color/colorpanelbase.reel/img/icon_swap.png
 create mode 100755 js/panels/color/colorpanelbase.reel/img/knob.png
 create mode 100755 js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
 create mode 100755 js/panels/color/colorpanelpopup.reel/colorpanelpopup.js
 create mode 100755 js/panels/color/colorpanelpopup.reel/config.rb
 create mode 100755 js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.css
 create mode 100755 js/panels/color/colorpanelpopup.reel/css/colorpanelpopup.scss
 create mode 100755 js/panels/color/colorpanelpopup.reel/img/icon_bitmap.png
 create mode 100755 js/panels/color/colorpanelpopup.reel/img/icon_colorwheel.png
 create mode 100755 js/panels/color/colorpanelpopup.reel/img/icon_gradient.png
 create mode 100755 js/panels/color/colorpanelpopup.reel/img/icon_nofill.png
 create mode 100755 js/panels/color/colorpanelpopup.reel/img/knob.png
 create mode 100755 js/panels/color/colorpopup-manager.js
 create mode 100755 js/panels/color/colortoolbar.reel/colortoolbar.html
 create mode 100755 js/panels/color/colortoolbar.reel/colortoolbar.js
 create mode 100755 js/panels/color/colortoolbar.reel/config.rb
 create mode 100755 js/panels/color/colortoolbar.reel/css/colortoolbar.css
 create mode 100755 js/panels/color/colortoolbar.reel/css/colortoolbar.scss

(limited to 'js')

diff --git a/js/components/gradientpicker.reel/gradientpicker.js b/js/components/gradientpicker.reel/gradientpicker.js
index da4e8c0f..b10f6624 100755
--- a/js/components/gradientpicker.reel/gradientpicker.js
+++ b/js/components/gradientpicker.reel/gradientpicker.js
@@ -213,21 +213,13 @@ exports.GradientPicker = Montage.create(Component, {
     removeStop: {
     	enumerable: false,
     	value: function(stop) {
-    		//Removing stops
-    		this.element._components.stopsContainer.removeChild(stop);
-    		//Stopping events related to this current stop
-    		this.removeStopMoving();
-    		//Resetting stops if less than 2
     		var i, buttons = this.element._components.stopsContainer.getElementsByTagName('button');
-    		if (buttons.length < 2) {
-    			//Removing remaining stops prior to resetting
-    			for (i=0; buttons[i]; i++) {
-    				this.element._components.stopsContainer.removeChild(buttons[i].stop);
-    			}
-    			//Nulling then adding defaults
-    			this.value = null;
-    			this.addDefaultStops();
-    			this._dispatchEvent('change', false);
+    		//
+    		if (buttons.length > 2) {
+    			//Removing stops
+    			this.element._components.stopsContainer.removeChild(stop);
+    			//Stopping events related to this current stop
+    			this.removeStopMoving();
     		}
     	}
     },
@@ -327,7 +319,7 @@ exports.GradientPicker = Montage.create(Component, {
     		//
     		this.application.ninja.colorController.colorPopupManager.hideColorChipPopup();
     		//
-    		if ((e._event.y+this.hack.y) > this.element._trackY+50 || (e._event.y+this.hack.y) < this.element._trackY) {
+    		if ((e._event.y+this.hack.y) > this.element._trackY+70 || (e._event.y+this.hack.y) < this.element._trackY) {
     			this.removeStop(this.currentStop);
     		}
     		//
diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.html b/js/components/tools-properties/brush-properties.reel/brush-properties.html
index 38f7f856..608111bd 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.html
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html
@@ -11,12 +11,55 @@
 
         <script type="text/montage-serialization">
         {
+            "strokeSizeHT": {
+                "module": "js/components/hottextunit.reel",
+                "name": "HotTextUnit",
+                "properties": {
+                    "element": {"#": "strokeSize"},
+                    "minValue": 1,
+                    "maxValue": 100,
+                    "value": 1,
+                    "decimalPlace": 10,
+                    "acceptableUnits" : ["px", "pt"]
+                }
+            },
+
+            "strokeHardnessHT": {
+                "module": "js/components/hottextunit.reel",
+                "name": "HotTextUnit",
+                "properties": {
+                    "element": {"#": "strokeHardness"},
+                    "minValue": 0,
+                    "maxValue": 100,
+                    "value": 100,
+                    "decimalPlace": 10,
+                    "acceptableUnits" : ["px", "pt"]
+                }
+            },
+
+            "strokeAngleHT": {
+                "module": "js/components/hottextunit.reel",
+                "name": "HotTextUnit",
+                "properties": {
+                    "element": {"#": "strokeAngle"},
+                    "minValue": -90,
+                    "maxValue": 90,
+                    "value": 0,
+                    "decimalPlace": 10,
+                    "acceptableUnits" : ["px", "pt"]
+                }
+            },
 
             "owner": {
                 "module": "js/components/tools-properties/brush-properties.reel",
                 "name": "BrushProperties",
                 "properties": {
-                    "element": {"#": "brushProperties"}
+                    "element": {"#": "brushProperties"},
+                    "_strokeSize": {"@": "strokeSizeHT"},
+                    "_strokeHardness": {"@": "strokeHardnessHT"},
+                    "_doSmoothing": {"#": "doSmoothing"},
+                    "_useCalligraphic":{"#": "useCalligraphic"},
+                    "_strokeAngle": {"@": "strokeAngleHT"}
                 }
             }
     	}
@@ -26,6 +69,17 @@
 
     <body>
         <div id="brushProperties" class="subToolHolderPanel">
+            <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
+                <label class="label"> Width:</label>
+                <div id="strokeSize" class="label"></div>
+                <label class="label"> Hardness:</label>
+                <div id="strokeHardness" class="label"></div>
+                <label class="label"><input id="doSmoothing" type="checkbox" name="doSmoothingControl" class="checkBoxAlign"/>Smoothing</label>
+                <label class="label"><input id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="checkBoxAlign"/>Calligraphic</label>
+                <label class="label"> Angle:</label>
+                <div id="strokeAngle" class="label"></div>
+
+            </div>
         </div>
     </body>
 
diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.js b/js/components/tools-properties/brush-properties.reel/brush-properties.js
index 92da98cc..e6faa0f0 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.js
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.js
@@ -9,17 +9,19 @@ var Component = require("montage/ui/component").Component;
 var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
 
 exports.BrushProperties = Montage.create(ToolProperties, {
-
-    
-    _subPrepare: {
-        value: function() {
-            //this.divElement.addEventListener("click", this, false);
-        }
+    strokeSize: {
+        get: function() { return this._strokeSize; }
     },
-
-    handleClick: {
-        value: function(event) {
-           // this.selectedElement = event._event.target.id;
-        }
+    strokeHardness: {
+        get: function() { return this._strokeHardness; }
+    },
+    doSmoothing:{
+        get: function() {return this._doSmoothing.checked; }
+    },
+    useCalligraphic: {
+        get: function() {return this._useCalligraphic.checked;}
+    },
+    strokeAngle: {
+        get: function() {return this._strokeAngle;}
     }
-});
\ No newline at end of file
+});
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.css b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
index fedc1d9d..cc8108f6 100644
--- a/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.css
@@ -3,7 +3,12 @@
  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> */
-
+.treeRoot .branch-label, .treeRoot .leaf-label {
+    margin: 0 8px;
+}
+.treeRoot .leaf-label:hover {
+    margin: 0;
+}
 .treeRoot .leaf-label {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEQzcwMEU1RjQxM0MxMUUxQUM0MERBNzM1MUVEMUQxMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEQzcwMEU2MDQxM0MxMUUxQUM0MERBNzM1MUVEMUQxMCI%2BIDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRDNzAwRTVENDEzQzExRTFBQzQwREE3MzUxRUQxRDEwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRDNzAwRTVFNDEzQzExRTFBQzQwREE3MzUxRUQxRDEwIi8%2BIDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY%2BIDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8%2BUcaK3QAAANFJREFUeNqMULEOREAQdYjvuE%2FYWlSUQqKQ7A%2FsD6n0SoVCFHpRa0SllvgFlpvzZO9OcfGSnbx9M%2FNmMpp2Dw96VVX9L%2FJ93wRrmkZJIKrZcRyK%2Bs25p5%2BU8pK4KCakMAzxL4oCJIqivu8Nw0DDu25ZFtW3ritIkiS0tGVZtm1%2F6rZtu4yr67osSyJBEJx3ybKsbVukOecU4zh2XRfKMAzTNJmYpWxgPM%2BzEIIxRrzrOs%2FzdMyVvyAxTdPxAJFzv%2BeBbz8cfN93kDzPb55ZewkwAF0Ddf6ATSsHAAAAAElFTkSuQmCC);
     background-position: 3px center;
@@ -12,6 +17,11 @@
     cursor: pointer;
     padding: 3px 0 4px;
 }
+.branch .branch .leaf-label:hover {
+    background-color: #333333;
+    background-position: 33px center;
+    padding-left: 53px;
+}
 /* First level */
 .branch .leaf-label {
     padding-left: 25px;
@@ -26,4 +36,4 @@
 .branch .branch .branch .leaf-label {
     background-position: 45px center;
     padding-left: 65px;
-}
\ No newline at end of file
+}
diff --git a/js/components/ui/icon-list-basic/icon.reel/icon.js b/js/components/ui/icon-list-basic/icon.reel/icon.js
index 72adbfa1..1ef6e277 100755
--- a/js/components/ui/icon-list-basic/icon.reel/icon.js
+++ b/js/components/ui/icon-list-basic/icon.reel/icon.js
@@ -174,21 +174,17 @@ var Icon = exports.Icon = Montage.create(Component, {
         enumerable: true,
         value:{
             "img_root":"images/picker/",
-            ".png":"png_file.png",
-            ".jpg":"jpeg_file.png",
             ".js":"js_file.png",
+            ".json":"json_file.png",
             ".css":"css_file.png",
             ".html":"html_file.png",
             ".xml":"xml_file.png",
             ".php":"php_file.png",
+            ".pl":"pl_file.png",
+            ".py":"py_file.png",
+            ".rb":"rb_file.png",
             ".doc":"doc_file.png",
-            ".docx":"doc_file.png",
-            ".rtf":"rtf_file.png",
-            ".pdf":"pdf_file.png",
-            ".zip":"zip_file.png",
-            ".rar":"zip_file.png",
-            ".app":"executable.png",
-            ".exe":"executable.png",
+            ".txt":"txt_file.png",
             "file_default":"file.png",
             "directory":"folder.png"
         }
diff --git a/js/components/ui/tree-basic/treeItem.reel/treeItem.js b/js/components/ui/tree-basic/treeItem.reel/treeItem.js
index 4c71cb6b..a67dad43 100755
--- a/js/components/ui/tree-basic/treeItem.reel/treeItem.js
+++ b/js/components/ui/tree-basic/treeItem.reel/treeItem.js
@@ -242,21 +242,17 @@ exports.TreeItem = Montage.create(Component, {
         enumerable: true,
         value:{
             "img_root":"images/picker/",
-            ".png":"png_file.png",
-            ".jpg":"jpeg_file.png",
             ".js":"js_file.png",
+            ".json":"json_file.png",
             ".css":"css_file.png",
             ".html":"html_file.png",
             ".xml":"xml_file.png",
             ".php":"php_file.png",
+            ".pl":"pl_file.png",
+            ".py":"py_file.png",
+            ".rb":"rb_file.png",
             ".doc":"doc_file.png",
-            ".docx":"doc_file.png",
-            ".rtf":"rtf_file.png",
-            ".pdf":"pdf_file.png",
-            ".zip":"zip_file.png",
-            ".rar":"zip_file.png",
-            ".app":"executable.png",
-            ".exe":"executable.png",
+            ".txt":"txt_file.png",
             "file_default":"file.png",
             "directory":"folder.png"
         }
diff --git a/js/controllers/document-controller.js b/js/controllers/document-controller.js
index a8056519..87e93465 100755
--- a/js/controllers/document-controller.js
+++ b/js/controllers/document-controller.js
@@ -60,8 +60,9 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
             this.eventManager.addEventListener("executeSave", this, false);
             this.eventManager.addEventListener("executeSaveAs", this, false);
             this.eventManager.addEventListener("executeSaveAll", this, false);
+            this.eventManager.addEventListener("executeFileClose", this, false);
 
-            this.eventManager.addEventListener("recordStyleChanged", this, false);
+            this.eventManager.addEventListener("styleSheetDirty", this, false);
             
         }
     },
@@ -157,17 +158,29 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
             if((typeof this.activeDocument !== "undefined") && this.application.ninja.coreIoApi.cloudAvailable()){
                 saveAsSettings.fileName = this.activeDocument.name;
                 saveAsSettings.folderUri = this.activeDocument.uri.substring(0, this.activeDocument.uri.lastIndexOf("/"));
-                //add callback
+                saveAsSettings.callback = this.saveAsCallback.bind(this);
                 this.application.ninja.newFileController.showSaveAsDialog(saveAsSettings);
             }
         }
     },
-
+    ////////////////////////////////////////////////////////////////////
+    handleExecuteFileClose:{
+        value: function(event) {
+            if(this.activeDocument && this.application.ninja.coreIoApi.cloudAvailable()){
+                this.closeDocument(this.activeDocument.uuid);
+            }
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
     //
     fileSaveResult: {
     	value: function (result) {
-    		if(result.status === 204){
+            if((result.status === 204) || (result.status === 404)){//204=>existing file || 404=>new file... saved
                 this.activeDocument.needsSave = false;
+                if(this.application.ninja.currentDocument !== null){
+                    //clear Dirty StyleSheets for the saved document
+                    this.application.ninja.stylesController.clearDirtyStyleSheets(this.application.ninja.currentDocument);
+                }
             }
     	}
     },
@@ -249,6 +262,29 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
     },
 	////////////////////////////////////////////////////////////////////
 	//
+    saveAsCallback:{
+        value:function(saveAsDetails){
+            var fileUri = null, filename = saveAsDetails.filename, destination = saveAsDetails.destination;
+            //update document metadata
+            this.activeDocument.name = ""+filename;
+            //prepare new file uri
+            if(destination && (destination.charAt(destination.length -1) !== "/")){
+                destination = destination + "/";
+            }
+            fileUri = destination+filename;
+
+            this.activeDocument.uri = fileUri;
+            //save a new file
+            //use the ioMediator.fileSaveAll when implemented
+            this.activeDocument._userDocument.name=filename;
+            this.activeDocument._userDocument.root=destination;
+            this.activeDocument._userDocument.uri=fileUri;
+            this.application.ninja.ioMediator.fileSave(this.activeDocument.save(), this.fileSaveResult.bind(this));
+            //
+        }
+    },
+
+    ////////////////////////////////////////////////////////////////////
 	openDocument: {
 		value: function(doc) {
 			
@@ -515,5 +551,11 @@ var DocumentController = exports.DocumentController = Montage.create(Component,
         value: function() {
             return "userDocument_" + (this._iframeCounter++);
         }
+    },
+
+    handleStyleSheetDirty:{
+        value:function(){
+            this.activeDocument.needsSave = true;
         }
+    }
 });
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index ec0335b4..9f00604f 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -74,8 +74,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
 
     //--------------------------------------------------------------------------------------------------------
     // Routines to get/set color properties
+    // borderSide : "top", "right", "bottom", or "left"
     getColor: {
-        value: function(el, isFill) {
+        value: function(el, isFill, borderSide) {
             var colorObj,
                 color,
                 image;
@@ -87,22 +88,29 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
                 {
                     return el.elementModel.fill;
                 }
-//                return this.application.ninja.stylesController.getElementStyle(el, "background-color");
                 //TODO: Once logic for color and gradient is established, this needs to be revised
                 color = this.getProperty(el, "background-color");
                 image = this.getProperty(el, "background-image");
             }
             else
             {
-                // TODO - Need to figure out which border side user wants
-                if(el.elementModel.stroke)
+                // Try getting border color from specific side first
+                if(borderSide)
                 {
-                    return el.elementModel.stroke;
+                    color = this.getProperty(el, "border-" + borderSide + "-color");
+                    image = this.getProperty(el, "border-" + borderSide + "-image");
+                }
+
+                // If no color was found, look up the shared border color
+                if(!color && !image)
+                {
+                    if(el.elementModel.stroke)
+                    {
+                        return el.elementModel.stroke;
+                    }
+                    color = this.getProperty(el, "border-color");
+                    image = this.getProperty(el, "border-image");
                 }
-                // TODO - Need to figure out which border side user wants
-//                return this.application.ninja.stylesController.getElementStyle(el, "border-color");
-                color = this.getProperty(el, "border-color");
-                image = this.getProperty(el, "border-image");
             }
 
             if(color || image) {
@@ -120,11 +128,15 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
             {
                 el.elementModel.fill = colorObj;
             }
-            else
+            else if(!borderSide)
             {
                 // TODO - Need to update border style and width also
                 el.elementModel.stroke = colorObj;
             }
+            else
+            {
+                // TODO - Should update specific border sides too
+            }
 
             return colorObj;
         }
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index 3423a5a7..d72d9c14 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -259,24 +259,82 @@ exports.ShapesController = Montage.create(CanvasController, {
         }
     },
 
-    setColor: {
-        value: function(el, color, isFill) {
-            var webGl = color.webGlColor || color.color.webGlColor;
-            if(!webGl)
+    _setGradientMaterial: {
+        value: function(el, gradientMode, isFill) {
+            var m = "LinearGradientMaterial",
+                fm;
+            if(gradientMode === "radial")
             {
-                webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color);
+                m = "RadialGradientMaterial";
             }
+
             if(isFill)
             {
-                el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl);
-                this.setShapeProperty(el, "fill", webGl);
-                this.setShapeProperty(el, "background", color);
+                if(el.elementModel.shapeModel.fillMaterial.getName() !== m)
+                {
+                    fm = Object.create(MaterialsModel.getMaterial(m));
+                    if(fm)
+                    {
+                        el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm);
+                        el.elementModel.shapeModel.fillMaterial = fm;
+                        el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+                    }
+                }
             }
             else
             {
-                el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl);
-                this.setShapeProperty(el, "stroke", webGl);
-                this.setShapeProperty(el, "border", color);
+                if(el.elementModel.shapeModel.strokeMaterial.getName() !== m)
+                {
+                    fm = Object.create(MaterialsModel.getMaterial(m));
+                    if(fm)
+                    {
+                        el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(fm);
+                        el.elementModel.shapeModel.strokeMaterial = fm;
+                        el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+                    }
+                }
+            }
+        }
+    },
+
+    setColor: {
+        value: function(el, color, isFill) {
+            var mode = color.mode,
+                webGl;
+            if(isFill)
+            {
+                if(mode)
+                {
+                    switch (mode) {
+                        case 'nocolor':
+                            el.elementModel.shapeModel.GLGeomObj.setFillColor(null);
+                            this.setShapeProperty(el, "fill", null);
+                            this.setShapeProperty(el, "background", color);
+                            el.elementModel.fill = null;
+                            return;
+                        case 'gradient':
+                            if(el.elementModel.shapeModel.useWebGl)
+                            {
+                                this._setGradientMaterial(el, color.color.gradientMode, isFill);
+                            }
+                            el.elementModel.shapeModel.GLGeomObj.setFillColor({gradientMode:color.color.gradientMode, color:color.color.stops});
+                            el.elementModel.shapeModel.GLWorld.render();
+                            this.setShapeProperty(el, "fill", color.color.css);
+                            this.setShapeProperty(el, "background", color);
+                            el.elementModel.fill = color;
+                            break;
+                        default:
+                            webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color);
+                            el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl);
+                            this.setShapeProperty(el, "fill", webGl);
+                            this.setShapeProperty(el, "background", color);
+                            el.elementModel.fill = color;
+                    }
+                }
+            }
+            else
+            {
+                // Support for ink-bottle tool
                 if(color.strokeInfo)
                 {
                     var strokeWidth = this.GetValueInPixels(color.strokeInfo.strokeSize,
@@ -285,7 +343,67 @@ exports.ShapesController = Montage.create(CanvasController, {
                     this.setShapeProperty(el, "strokeSize", color.strokeInfo.strokeSize + " "
                                                                 + color.strokeInfo.strokeUnits);
                 }
+
+                if(mode)
+                {
+                    switch (mode) {
+                        case 'nocolor':
+                            el.elementModel.shapeModel.GLGeomObj.setStrokeColor(null);
+                            this.setShapeProperty(el, "stroke", null);
+                            this.setShapeProperty(el, "border", color);
+                            el.elementModel.fill = null;
+                            return;
+                        case 'gradient':
+                            if(el.elementModel.shapeModel.useWebGl)
+                            {
+                                this._setGradientMaterial(el, color.color.gradientMode, isFill);
+                            }
+                            el.elementModel.shapeModel.GLGeomObj.setStrokeColor({gradientMode:color.color.gradientMode, color:color.color.stops});
+                            el.elementModel.shapeModel.GLWorld.render();
+                            this.setShapeProperty(el, "stroke", color.color.css);
+                            this.setShapeProperty(el, "border", color);
+                            el.elementModel.fill = color;
+                            break;
+                        default:
+                            webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color);
+                            el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl);
+                            this.setShapeProperty(el, "stroke", webGl);
+                            this.setShapeProperty(el, "border", color);
+                            el.elementModel.fill = color;
+                    }
+                }
             }
+
+
+
+
+
+
+//            var webGl = color.webGlColor || color.color.webGlColor;
+//            if(!webGl)
+//            {
+//                webGl = this.application.ninja.colorController.colorModel.colorToWebGl(color.color);
+//            }
+//            if(isFill)
+//            {
+//                el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl);
+//                this.setShapeProperty(el, "fill", webGl);
+//                this.setShapeProperty(el, "background", color);
+//            }
+//            else
+//            {
+//                el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl);
+//                this.setShapeProperty(el, "stroke", webGl);
+//                this.setShapeProperty(el, "border", color);
+//                if(color.strokeInfo)
+//                {
+//                    var strokeWidth = this.GetValueInPixels(color.strokeInfo.strokeSize,
+//                                                            color.strokeInfo.strokeUnits);
+//                    el.elementModel.shapeModel.GLGeomObj.setStrokeWidth(strokeWidth);
+//                    this.setShapeProperty(el, "strokeSize", color.strokeInfo.strokeSize + " "
+//                                                                + color.strokeInfo.strokeUnits);
+//                }
+//            }
             el.elementModel.shapeModel.GLWorld.render();
         }
     },
diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js
index 75968d4a..c713b6e5 100755
--- a/js/controllers/selection-controller.js
+++ b/js/controllers/selection-controller.js
@@ -48,6 +48,7 @@ exports.SelectionController = Montage.create(Component, {
             this.eventManager.addEventListener("selectAll", this, false);
             this.eventManager.addEventListener("deleteSelection", this, false);
             this.eventManager.addEventListener("switchDocument", this, false);
+            this.eventManager.addEventListener("closeDocument", this, false);
 //            defaultEventManager.addEventListener( "undo", this, false);
 //            defaultEventManager.addEventListener( "redo", this, false);
         }
@@ -89,17 +90,17 @@ exports.SelectionController = Montage.create(Component, {
         }
     },
 
-    handleSwitchDocument: {
+     handleSwitchDocument: {
         value: function() {
-            this._selectedItems = this.application.ninja.selectedElements.slice(0);
-            if(this._selectedItems.length === 0) {
-                this._isDocument = true;
-            } else {
-                this._isDocument = false;
+            if(this.application.ninja.documentController.activeDocument.currentView === "design"){
+                this._selectedItems = this.application.ninja.selectedElements.slice(0);
+                if(this._selectedItems.length === 0 ){
+                    this._isDocument = true;
+                }else{
+                    this._isDocument = false;
+                }
+                NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": this._isDocument} );
             }
-            NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": this._isDocument});
-
-			this._selectionContainer = this.application.ninja.currentSelectedContainer;
         }
     },
 
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index 662816f5..addfc24e 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -1236,11 +1236,17 @@ var stylesController = exports.StylesController = Montage.create(Component, {
 
     clearDirtyStyleSheets : {
         value: function(doc) {
-            if(!doc) {
+            this.dirtyStyleSheets.length = 0;
+
+            if(doc) {
+                var stillDirty = this.dirtyStyleSheets.filter(function(sheet) {
+                    return sheet.document !== doc;
+                });
                 this.dirtyStyleSheets = null;
-                this.dirtyStyleSheets = [];
+                this.dirtyStyleSheets = stillDirty;
             }
 
+
         }
     },
 
diff --git a/js/data/menu-data.js b/js/data/menu-data.js
index 52710b3a..40512f5d 100755
--- a/js/data/menu-data.js
+++ b/js/data/menu-data.js
@@ -30,6 +30,12 @@ exports.MenuData = Montage.create( Montage, {
                         "enabled": true,
                         "action": "executeFileOpen"
                     },
+                    {
+                        "displayText" : "Close File",
+                        "hasSubMenu" : false,
+                        "enabled": true,
+                        "action": "executeFileClose"
+                    },
                     {
                         "displayText" : "",
                         "separator":    true
diff --git a/js/document/html-document.js b/js/document/html-document.js
index 23b55e92..051490f5 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -8,7 +8,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 //
 var Montage = 		require("montage/core/core").Montage,
     TextDocument =	require("js/document/text-document").TextDocument,
-    NJUtils = 		require("js/lib/NJUtils").NJUtils;
+    NJUtils = 		require("js/lib/NJUtils").NJUtils,
+	GLWorld =			require("js/lib/drawing/world").World;
 ////////////////////////////////////////////////////////////////////////
 //
 exports.HTMLDocument = Montage.create(TextDocument, {
@@ -187,31 +188,112 @@ exports.HTMLDocument = Montage.create(TextDocument, {
 //    },
     
     glData: {
-        get: function()
-		{
+    	get: function() {
+			//
 			var elt = this.iframe.contentWindow.document.getElementById("UserContent");
-			this._glData = null;
-			if (elt)
-			{
-				var cdm = new CanvasDataManager();
+			//
+			if (elt) {
 				this._glData = [];
-				cdm.collectGLData( elt,  this._glData );
+				//if (path) {
+					//this.collectGLData(elt, this._glData, path);
+				//} else {
+					this.collectGLData(elt, this._glData );
+				//}
+			} else {
+				this._glData = null
 			}
-				
+			//	
 			return this._glData;
 		},
+        set: function(value) {
+			var elt = this.documentRoot;
+			if (elt) {
+				var nWorlds= value.length;
+				for (var i=0;  i<nWorlds;  i++) {
+					var importStr = value[i];
+					var startIndex = importStr.indexOf( "id: " );
+					if (startIndex >= 0) {
+						var endIndex = importStr.indexOf( "\n", startIndex );
+						if (endIndex > 0) {
+							var id = importStr.substring( startIndex+4, endIndex );
+							if (id) {
+								var canvas = this.findCanvasWithID( id, elt );
+								if (canvas) {
+									if (!canvas.elementModel) {
+										NJUtils.makeElementModel(canvas, "Canvas", "shape", true);
+									}
+									if (canvas.elementModel) {
+										if (canvas.elementModel.shapeModel.GLWorld) {
+											canvas.elementModel.shapeModel.GLWorld.clearTree();
+										}
+										var index = importStr.indexOf( "webGL: " );
+										var useWebGL = (index >= 0)
+										var world = new GLWorld( canvas, useWebGL );
+										world.import( importStr );
+										this.buildShapeModel( canvas.elementModel, world );
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+    },
 
-        set: function(value)
+	buildShapeModel:
+	{
+		value: function( elementModel, world )
 		{
-			var elt = this.documentRoot;
-			if (elt)
+            var shapeModel = elementModel.shapeModel;
+			shapeModel.shapeCount	= 1;	// for now...
+			shapeModel.useWebGl		= world._useWebGL;
+			shapeModel.GLWorld		= world;
+			var root = world.getGeomRoot();
+			if (root)
 			{
-				console.log( "load canvas data: " , value );
-				var cdm = new CanvasDataManager();
-				cdm.loadGLData(elt,  value);
+				shapeModel.GLGeomObj			= root;
+				shapeModel.strokeSize			= root._strokeWidth;
+				shapeModel.stroke				= root._strokeColor.slice();
+				shapeModel.strokeMaterial		= root._strokeMaterial.dup();
+				shapeModel.strokeStyle			= "solid";
+				//shapeModel.strokeStyleIndex
+				//shapeModel.border
+				//shapeModel.background
+				switch (root.geomType())
+				{
+					case root.GEOM_TYPE_RECTANGLE:
+                        elementModel.selection = "Rectangle";
+                        elementModel.pi = "RectanglePi";
+                        shapeModel.fill					= root._fillColor.slice();
+                        shapeModel.fillMaterial			= root._fillMaterial.dup();
+						shapeModel.tlRadius = root._tlRadius;
+						shapeModel.trRadius = root._trRadius;
+						shapeModel.blRadius = root._blRadius;
+						shapeModel.brRadius = root._brRadius;
+						break;
+
+					case root.GEOM_TYPE_CIRCLE:
+                        elementModel.selection = "Oval";
+                        elementModel.pi = "OvalPi";
+                        shapeModel.fill					= root._fillColor.slice();
+                        shapeModel.fillMaterial			= root._fillMaterial.dup();
+						shapeModel.innerRadius = root._innerRadius;
+						break;
+
+					case root.GEOM_TYPE_LINE:
+                        elementModel.selection = "Line";
+                        elementModel.pi = "LinePi";
+						shapeModel.slope = root._slope;
+						break;
+
+					default:
+						console.log( "geometry type not supported for file I/O, " + root.geomType());
+						break;
+				}
 			}
 		}
-    },
+	},
 
     zoomFactor: {
         get: function() { return this._zoomFactor; },
@@ -240,6 +322,27 @@ exports.HTMLDocument = Montage.create(TextDocument, {
             }
         }
     },
+
+    /**
+     * search the DOM tree to find a canvas with the given id
+     */
+	findCanvasWithID:  {
+		value: function( id,  elt )  {
+			var cid = elt.getAttribute( "data-RDGE-id" );
+			if (cid == id)  return elt;
+
+			if (elt.children)
+			{
+				var nKids = elt.children.length;
+				for (var i=0;  i<nKids;  i++)
+				{
+					var child = elt.children[i];
+					var foundElt = this.findCanvasWithID( id, child );
+					if (foundElt)  return foundElt;
+				}
+			}
+		}
+	},
     
     
     
@@ -768,8 +871,12 @@ exports.HTMLDocument = Montage.create(TextDocument, {
     	value: function () {
     		//TODO: Add logic to handle save before preview
     		this.application.ninja.documentController.handleExecuteSaveAll(null);
-    		//Launching 'blank' tab for testing movie
-    		window.open(this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]);
+    		//Temp check for webGL Hack
+    		if (this.application.ninja.documentController.activeDocument.glData.length && this.application.ninja.documentController.activeDocument.glData.length > 0) {
+    			setTimeout(function () {window.open(this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]);}.bind(this), 3500);
+    		} else {
+    			window.open(this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]);
+    		}
     		//chrome.tabs.create({url: this.application.ninja.coreIoApi.rootUrl+this.application.ninja.documentController._activeDocument.uri.split(this.application.ninja.coreIoApi.cloudData.root)[1]});		
     	}
     },
@@ -788,8 +895,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
             			}
             		}
             	}
-    			//return {mode: 'html', document: this._userDocument, webgl: this.glData, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
-    			return {mode: 'html', document: this._userDocument, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
+    			return {mode: 'html', document: this._userDocument, webgl: this.glData, styles: styles, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
     		} else if (this.currentView === "code"){
     			//TODO: Would this get call when we are in code of HTML?
     		} else {
@@ -812,8 +918,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
             			}
             		}
             	}
-    			//return {mode: 'html', document: this._userDocument, webgl: this.glData, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
-    			return {mode: 'html', document: this._userDocument, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
+    			return {mode: 'html', document: this._userDocument, webgl: this.glData, css: css, head: this._templateDocument.head.innerHTML, body: this._templateDocument.body.innerHTML};
     		} else if (this.currentView === "code"){
     			//TODO: Would this get call when we are in code of HTML?
     		} else {
diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js
index 63e7799a..1c00f7ea 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 = [];
-                this._planesArray = [];
+                this._eltArray = null;
+                this._planesArray = null;
             }
         }
     },
@@ -721,8 +721,17 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
 	drawSelectionBounds : {
 		value: function( eltArray ) {
 			this._selectionCtr = null;
+            var len = eltArray.length,
+                i,
+                j,
+                bounds,
+                bounds3D,
+                pt,
+                tmpPt,
+                ssMat,
+                elt;
 			
-			if (eltArray.length == 0)  return;
+			if (len === 0)  return;
 			var context = this._drawingContext;
 			if (!context)  return;
 
@@ -731,18 +740,19 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
 			context.lineWidth = 2;
 
 			// handle the single element case
-			if (eltArray.length == 1)
+            // TODO - Currently, the stage draws its own selection bounds for single selection case
+			if (len === 1)
 			{
 				// single selection case
 				//console.log( "single selection" );
 
-				var elt = eltArray[0];
+				elt = eltArray[0];
 
 				this.viewUtils.pushViewportObj( elt );
 
 				// get the element bounds in world space
-				var bounds3D = this.viewUtils.getElementViewBounds3D( elt );
-				for (var j=0;  j<4;  j++) {
+				bounds3D = this.viewUtils.getElementViewBounds3D( elt );
+				for (j=0;  j<4;  j++) {
 					bounds3D[j] = this.viewUtils.localToGlobal( bounds3D[j],  elt );
 				}
 
@@ -766,19 +776,12 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
 			}
 			else
 			{
-				// the multiple selection case.
-				//console.log( "multiple selection" );
-
-				// we set the root to "the world".
-				var saveRoot = this.viewUtils.getRootElement();
-				this.viewUtils.setRootElement( this.viewUtils.getStageElement() );
-
 				// get the plane from the first element to compare against the other elements
 				var flat = true;
 				var plane = this.viewUtils.getElementPlane( eltArray[0] );
-				for (var i=1;  i<eltArray.length;  i++)
+				for (i=1;  i<len;  i++)
 				{
-					var elt = eltArray[i];
+					elt = eltArray[i];
 					var plane2 = this.viewUtils.getElementPlane( elt );
 					var dot = MathUtils.dot3(plane,plane2);
 					if (MathUtils.fpCmp(dot, 1) != 0)
@@ -796,34 +799,23 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
 					}
 				}
 
-				// construct a matrix from world space to 'plane' space
-				var ptOnPlane = this.viewUtils.localToGlobal( [0,0,0], eltArray[0]);
-				var planeToWorld = this.getPlaneToWorldMatrix( plane, ptOnPlane );
-				//var worldToPlane = planeToWorld.inverse();
-				var worldToPlane = glmat4.inverse(planeToWorld, []);
-
-                var ssMat = this.viewUtils.getLocalToGlobalMatrix( this._sourceSpaceElt );
 				// if all the elements share the same plane, draw the 2D rectangle
 				if (flat)
 				{
 					// make a 2D rectangle on the plane
 					var rect;
-					for (var i=0;  i<eltArray.length;  i++)
+					for (i=0;  i<len;  i++)
 					{
-						var elt = eltArray[i];
+						elt = eltArray[i];
 
 						// get the element bounds in 'plane' space
-						var bounds = this.viewUtils.getElementViewBounds3D( elt );
-						for (var j=0;  j<4;  j++)
+						bounds = this.viewUtils.getElementViewBounds3D( elt );
+                        ssMat = this.viewUtils.getLocalToGlobalMatrix( elt );
+						for (j=0;  j<4;  j++)
 						{
-//							var gPt = MathUtils.makeDimension4( this.viewUtils.localToGlobal( bounds[j],  elt ) );
-//							//var pt = worldToPlane.multiply( gPt );
-//							var pt    = glmat4.multiplyVec3( worldToPlane, gPt, [] );
-//							var tmpPt = glmat4.multiplyVec3( planeToWorld,  pt, [] );
-
                             var localPt = bounds[j];
-                            var tmpPt = this.viewUtils.localToGlobal2(localPt, ssMat);
-                            var pt = glmat4.multiplyVec3( worldToPlane, tmpPt, [] );
+                            tmpPt = this.viewUtils.localToGlobal2(localPt, ssMat);
+                            pt = tmpPt;
 
 							if (!rect)
 							{
@@ -837,30 +829,18 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
 						}
 					}
 
-					// restore the rootct
-					this.viewUtils.setRootElement (saveRoot );
-
-					// draw the reectangle
+					// draw the rectangle
 					context.beginPath();
 
-					var pt4 = MathUtils.makeDimension4(rect.getPoint(3));
-					var viewPt = glmat4.multiplyVec3( planeToWorld, pt4, [] );
-					MathUtils.makeDimension3( viewPt );
-//					var pt = this.viewUtils.localToGlobal( viewPt, this._sourceSpaceElt );
-					var pt = this.viewUtils.localToGlobal2(viewPt, ssMat);
+                    pt = MathUtils.makeDimension3(rect.getPoint(3));
 
-					var bounds3D = [[0,0], [0,0], [0,0], [0,0]];
+					bounds3D = [[0,0], [0,0], [0,0], [0,0]];
 					this._selectionCtr = pt.slice(0);
 
 					context.moveTo( pt[0],  pt[1] );
-					for (var i=0;  i<4;  i++)
+					for (i=0;  i<4;  i++)
 					{
-						pt4 = MathUtils.makeDimension4(rect.getPoint(i));
-						//viewPt = planeToWorld.multiply( pt4 );
-						viewPt = glmat4.multiplyVec3( planeToWorld, pt4, [] );
-						MathUtils.makeDimension3( viewPt );
-//						pt = this.viewUtils.localToGlobal( viewPt, this._sourceSpaceElt );
-						pt = this.viewUtils.localToGlobal2( viewPt, ssMat );
+                        pt = rect.getPoint(i);
 						context.lineTo( pt[0],  pt[1] );
 						bounds3D[i] = pt.slice(0);
 					}
@@ -870,8 +850,6 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
 					var dir = vecUtils.vecSubtract(2, bounds3D[1], bounds3D[3]);
 					var ctr = vecUtils.vecNormalize(2, dir, vecUtils.vecDist(2, bounds3D[1], bounds3D[3])/2);
 
-//					this._selectionCtr[0] += ctr[0] - window.stageManager.userContentLeft;
-//					this._selectionCtr[1] += ctr[1] - window.stageManager.userContentTop;
 					this._selectionCtr[0] += ctr[0] - this.application.ninja.stage.userContentLeft;
 					this._selectionCtr[1] += ctr[1] - this.application.ninja.stage.userContentTop;
 				}
@@ -879,16 +857,19 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
 				{
 					var minPt,  maxPt;
 
-					for (var i=0;  i<eltArray.length;  i++)
+                    // we set the root to "the world".
+                    var saveRoot = this.viewUtils.getRootElement();
+                    this.viewUtils.setRootElement( this.viewUtils.getStageElement() );
+                    ssMat = this.viewUtils.getLocalToGlobalMatrix( this._sourceSpaceElt );
+
+					for (i=0;  i<len;  i++)
 					{
-						var elt = eltArray[i];
-						var bounds = this.viewUtils.getElementViewBounds3D( elt );
+						elt = eltArray[i];
+						bounds = this.viewUtils.getElementViewBounds3D( elt );
                         var eltMat = this.viewUtils.getLocalToGlobalMatrix( elt );
-						for (var j=0;  j<4;  j++)
+						for (j=0;  j<4;  j++)
 						{
-							//var pt = worldToPlane.multiply( MathUtils.makeDimension4( this.viewUtils.localToGlobal( bounds[j],  elt )) );
-//							var pt = this.viewUtils.localToGlobal( bounds[j],  elt );
-							var pt = this.viewUtils.localToGlobal2( bounds[j],  eltMat );
+							pt = this.viewUtils.localToGlobal2( bounds[j],  eltMat );
 							if (!minPt)
 							{
 								minPt = pt.slice(0);
@@ -925,15 +906,6 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
 
 					// get the 8 corners of the parallelpiped in world space
 					var wc = new Array();   // wc == world cube
-//					wc.push(  this.viewUtils.localToGlobal( [x0,y0,z1], this._sourceSpaceElt ) );
-//					wc.push(  this.viewUtils.localToGlobal( [x0,y1,z1], this._sourceSpaceElt ) );
-//					wc.push(  this.viewUtils.localToGlobal( [x1,y1,z1], this._sourceSpaceElt ) );
-//					wc.push(  this.viewUtils.localToGlobal( [x1,y0,z1], this._sourceSpaceElt ) );
-//					wc.push(  this.viewUtils.localToGlobal( [x0,y0,z0], this._sourceSpaceElt ) );
-//					wc.push(  this.viewUtils.localToGlobal( [x0,y1,z0], this._sourceSpaceElt ) );
-//					wc.push(  this.viewUtils.localToGlobal( [x1,y1,z0], this._sourceSpaceElt ) );
-//					wc.push(  this.viewUtils.localToGlobal( [x1,y0,z0], this._sourceSpaceElt ) );
-
                     wc.push(  this.viewUtils.localToGlobal2( [x0,y0,z1], ssMat ) );
 					wc.push(  this.viewUtils.localToGlobal2( [x0,y1,z1], ssMat ) );
 					wc.push(  thi