Squashed commit of the following:

commit 10cdeb52403f16d5d4be43a516e8cdfbc866a2a2
Merge: 24f9717 9a404b8
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Wed Feb 8 11:33:42 2012 -0800

    Merge pull request #21 from mencio/pi_bugs

    Pi bugs fixes for 964, 616, 1084

commit 24f9717f2714f0497382436c4602736283247cf1
Merge: 763910b 9154cff
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Wed Feb 8 11:33:22 2012 -0800

    Merge pull request #22 from ericguzman/StylesControllerUpdates

    Styles Controller - Added array of dirty stylesheets and event dispatch ...

commit 9154cff2ce10aae54d9a7bd37a9d8b5578b0e297
Author: Eric Guzman <ericg@motorola.com>
Date:   Wed Feb 8 10:39:17 2012 -0800

    Styles Controller - Added array of dirty stylesheets and event dispatch when a sheet is dirtied.

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 9a404b8a717d0aac0eabb828a4d3cdc8c9c3eed8
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Tue Feb 7 17:42:04 2012 -0800

    IKNINJA - 1084: Fixing the custom tag.

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

commit a930295dfebd7fe7b4db5324b2048e6e7366c6d8
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Tue Feb 7 16:12:23 2012 -0800

    IKNINJA-616 - Drag and drop images fix for the PI and source

    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 65145cebdf4cde2767cbd0489ddcea5863c2ca9e
Author: Valerio Virgillito <valerio@motorola.com>
Date:   Tue Feb 7 14:53:46 2012 -0800

    IKNINJA-964 - Fixed inconsistent element name in PI/CSS panel.

    Signed-off-by: Valerio Virgillito <valerio@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>

4 files changed, 76 insertions, 17 deletions

diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.html b/js/components/tools-properties/tag-properties.reel/tag-properties.html
index c7588b9e..2b81bb71 100644
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.html
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html
@@ -56,9 +56,9 @@
                     <label class="label"> Tag Name:</label>
 
                     <select id="customTagCB" class="nj-skinned">
-                        <option>Article</option>
-                        <option>Aside</option>
-                        <option>Section</option>
+                        <option>article</option>
+                        <option>aside</option>
+                        <option>section</option>
                     </select>
                 </div>
 
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index a38984e7..44e0e798 100644
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -175,6 +175,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             }
             
             stylesheet.insertRule(ruleText, index);
+
+            this.styleSheetModified(stylesheet);
             
             rule = stylesheet.rules[index];
             
@@ -287,6 +289,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 sheet.deleteRule(index);
             }
 
+            this.styleSheetModified(sheet);
+
             return index;
         }
     },
@@ -535,6 +539,9 @@ var stylesController = exports.StylesController = Montage.create(Component, {
         value : function(rule, selector) {
             rule.selectorText = selector;
             rule[this.CONST.SPECIFICITY_KEY] = this.getSpecificity(selector);
+
+            this.styleSheetModified(rule.parentStyleSheet);
+
             return rule;
         }
     },
@@ -784,6 +791,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             ///// method to apply/test the new value
             dec.setProperty(property, value, priority);
 
+            this.styleSheetModified(rule.parentStyleSheet);
+
             ///// Return browser value for value we just set
             return dec.getPropertyValue(property);
         }
@@ -842,7 +851,10 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     
     deleteStyle : {
         value : function(rule, property) {
+            this.styleSheetModified(rule.parentStyleSheet);
+
             rule.style.removeProperty(property);
+
             return rule;
         }
     },
@@ -1074,9 +1086,10 @@ var stylesController = exports.StylesController = Montage.create(Component, {
     
     createStylesheet : {
         value: function(id, document) {
-            var doc = document || this._activeDocument;
+            var doc = document || this._activeDocument._document,
+                sheetElement, sheet;
             
-            sheet = nj.make('style', { 
+            sheetElement = nj.make('style', {
                 type  : 'text/css',
                 rel   : 'stylesheet',
                 id    : id || "",
@@ -1084,9 +1097,12 @@ var stylesController = exports.StylesController = Montage.create(Component, {
                 title : 'Temp'
             });
 
-            doc.head.appendChild(sheet);
-            
-            return this.getSheetFromElement(sheet, doc);
+            doc.head.appendChild(sheetElement);
+            sheet = this.getSheetFromElement(sheetElement, doc);
+
+            this.styleSheetModified(sheet);
+
+            return sheet;
         }
     },
     
@@ -1107,7 +1123,52 @@ var stylesController = exports.StylesController = Montage.create(Component, {
             
         }
     },
-    
+
+    ///// Style Sheet Modified
+    ///// Method to call whenever a stylesheet change is made
+    ///// Dispatches an event, and keeps list of dirty style sheets
+
+    styleSheetModified : {
+        value: function(sheet, eventData) {
+            var sheetSearch = this.dirtyStyleSheets.filter(function(sheetObj) {
+                return sheetObj.stylesheet === sheet;
+            });
+
+            ///// If the sheet doesn't already exist in the list of modified
+            ///// sheets, dispatch dirty event and add the sheet to the list
+            if(sheetSearch.length === 0) {
+                NJevent('styleSheetDirty', eventData);
+                this.dirtyStyleSheets.push({
+                    document : sheet.ownerNode.ownerDocument,
+                    stylesheet : sheet
+                });
+            }
+        }
+    },
+
+    ///// Dirty Style Sheets
+    ///// List of modified style sheets
+
+    dirtyStyleSheets : {
+        value : []
+    },
+
+    ///// Clear Dirty Style Sheets
+    ///// Refreshes the list of dirty style sheets
+    ///// If optional document object is supplied, only the styles sheets
+    ///// of a particular document are cleared
+    ///// Useful to call after a "Save" or "Save All" event
+
+    clearDirtyStyleSheets : {
+        value: function(doc) {
+            if(!doc) {
+                this.dirtyStyleSheets = null;
+                this.dirtyStyleSheets = [];
+            }
+
+        }
+    },
+
     /* ----------------- Utils ------------------- */
 
     _generateRandomAlphaNumeric : {
diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js
index aacb228c..ede71383 100644
--- a/js/mediators/drag-drop-mediator.js
+++ b/js/mediators/drag-drop-mediator.js
@@ -122,7 +122,7 @@ exports.DragDropMediator = Montage.create(Component, {
 
                     NJUtils.makeElementModel(domElem, "SVG", "block");
                 } else { // treat as a regular image
-                    domElem = NJUtils.makeNJElement("image", "Image", "block");
+                    domElem = NJUtils.makeNJElement("image", "image", "image");
                     domElem.src = evt2.currentTarget.result;
                 }
 
diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js
index c527edf3..e3f49bbe 100644
--- a/js/tools/TagTool.js
+++ b/js/tools/TagTool.js
@@ -158,19 +158,17 @@ exports.TagTool = Montage.create(DrawingTool, {
             selectedTag = this.options.selectedElement;
 
             if(selectedTag === "divTool") {
-                newTag = NJUtils.makeNJElement("div", "Div", "block");
+                newTag = NJUtils.makeNJElement("div", "div", "block");
             } else if(selectedTag === "imageTool") {
-                newTag = NJUtils.makeNJElement("image", "Image", "image");
+                newTag = NJUtils.makeNJElement("image", "image", "image");
             } else if(selectedTag === "videoTool") {