5 files changed, 13 insertions, 17 deletions
diff --git a/js/panels/color/colorchippopup.reel/colorchippopup.html b/js/panels/color/colorchippopup.reel/colorchippopup.html
index 1ae40cc1..cdb26894 100755
--- a/js/panels/color/colorchippopup.reel/colorchippopup.html
+++ b/js/panels/color/colorchippopup.reel/colorchippopup.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- 
        <copyright>
        This file contains proprietary software owned by Motorola Mobility, Inc.
@@ -16,8 +16,7 @@
                <script type="text/montage-serialization">
        {
            "owner": {
-                "module": "js/panels/Color/colorchippopup.reel",
+                "prototype": "js/panels/Color/colorchippopup.reel",
-                "name": "colorchippopup",
                "properties": {
                    "element": {"#": "cc_popup"}
                }
@@ -29,7 +28,7 @@
        
        <body>
    
-        <div id="cc_popup" class="cc_popup">
+        <div data-montage-id="cc_popup" class="cc_popup">
                <div id="cc_pu_options">
                        
                        <div id="cc_pu_hex">#<input id="cc_pu_hottext_hex" class="cc_pu_hottext_hex" maxlength="6" /></div>
diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.html b/js/panels/color/colorpanelbase.reel/colorpanelbase.html
index d4330596..19bc4b6b 100755
--- a/js/panels/color/colorpanelbase.reel/colorpanelbase.html
+++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <copyright>
 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/>
@@ -13,8 +13,7 @@
                <script type="text/montage-serialization">
        {
            "owner": {
-                "module": "js/panels/Color/ColorPanelBase.reel",
+                "prototype": "js/panels/Color/ColorPanelBase.reel",
-                "name": "ColorPanelBase",
                "properties": {
                    "element": {"#": "cp_expanded"}
                }
@@ -27,7 +26,7 @@
        
        <body>
    
-        <div id="cp_expanded" class="cp_expanded">
+        <div data-montage-id="cp_expanded" class="cp_expanded">
                <div class="cp_history">
                        <button class="cp_color_current">Current Color</button>
                        <button class="cp_color_previous">Previous Color</button>
diff --git a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
index feebb45c..f65d5bc0 100755
--- a/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
+++ b/js/panels/color/colorpanelpopup.reel/colorpanelpopup.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!-- <copyright>
 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/>
@@ -14,8 +14,7 @@
                <script type="text/montage-serialization">      
        {
            "owner": {
-                "module": "js/panels/Color/colorpanelpopup.reel",
+                "prototype": "js/panels/Color/colorpanelpopup.reel[ColorPanelPopup]",
-                "name": "ColorPanelPopup",
                "properties": {
                    "element": {"#": "cpp_popup"}
                }
@@ -27,7 +26,7 @@
        
        <body>
    
-        <div id="cpp_popup" class="cpp_popup">
+        <div data-montage-id="cpp_popup" class="cpp_popup">
                <div class="cp_pu_options">
                        
                        <div class="cp_pu_history">
diff --git a/js/panels/color/colorpopup-manager.js b/js/panels/color/colorpopup-manager.js
index d6d94807..529ec1c8 100755
--- a/js/panels/color/colorpopup-manager.js
+++ b/js/panels/color/colorpopup-manager.js
@@ -70,7 +70,7 @@ exports.ColorPopupManager = Montage.create(Component, {
            //
            document.addEventListener('mousedown', function (e) {
                //
-                if (e._event.srcElement.id === 'stageCanvas' || e._event.srcElement.id === 'mainContainer' || e._event.srcElement.id === 'drawingCanvas') {
+                if (e._event.srcElement.getAttribute('data-montage-id') === 'stageCanvas' || e._event.srcElement.id === 'mainContainer' || e._event.srcElement.getAttribute('data-montage-id') === 'drawingCanvas') {
                        this.application.ninja.colorController.colorPopupManager.hideColorPopup();
                }
            }.bind(this));
diff --git a/js/panels/color/colortoolbar.reel/colortoolbar.html b/js/panels/color/colortoolbar.reel/colortoolbar.html
index 9ab54836..6561ed99 100755
--- a/js/panels/color/colortoolbar.reel/colortoolbar.html
+++ b/js/panels/color/colortoolbar.reel/colortoolbar.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML>
+<!DOCTYPE HTML>
 <!DOCTYPE html>
 <!-- <copyright>
@@ -16,8 +16,7 @@
        {
            "owner": {
-                "module": "js/panels/Color/colortoolbar.reel",
+                "prototype": "js/panels/Color/colortoolbar.reel[ColorToolbar]",
-                "name": "ColorToolbar",
                "properties": {
                    "element": {"#": "colortoolbar"}
                }
@@ -29,7 +28,7 @@
    <body>
-        <div id="colortoolbar" class="colortoolbar">
+        <div data-montage-id="colortoolbar" class="colortoolbar">
                <div class="cpe_stroke_icon selected"></div>